:root{
  --primary:#06b6d4;
  --primary-dark:#0891b2;
  --bg:#f3f6fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --success:#16a34a;
  --border:#e5e7eb;
}

body{
  margin:0;
  font-family:'Segoe UI',sans-serif;
  background:linear-gradient(180deg,#f8fafc,#eef2f7);
  color:var(--text);
  transition:0.3s;
}

body.dark{
  background:#0f172a;
  color:white;
}

body.dark .subtitle,
body.dark .steps,
body.dark .history{
  color:white;
}



.container{
  max-width:950px;
  margin:auto;
  padding:40px 20px;
}

h1{
  text-align:center;
  font-size:2.6rem;
  background:linear-gradient(90deg,#0ea5e9,#06b6d4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.subtitle{
  text-align:center;
  margin-bottom:40px;
  color:var(--muted);
}

.card{

 

  padding:35px;
  border-radius:18px;
  box-shadow:0 20px 40px rgba(0,0,0,0.05);
  border:1px solid var(--border);
}

.tabs{
  display:flex;
  gap:12px;
  margin-bottom:30px;
}

.tabs button{
  flex:1;
  padding:14px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  background:#f1f5f9;
  font-weight:600;
  transition:0.3s;
}

.tabs button.active{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:white;
}

input{
  width:100%;
  padding:14px;
  margin:12px 0;
  border-radius:12px;
  border:1px solid var(--border);

}

.calculate{
  width:100%;
  padding:15px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:white;
  border:none;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

.calculate:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(6,182,212,0.3);
}

.result{
  margin-top:25px;
  font-size:2.4rem;
  font-weight:bold;
  text-align:center;
  color: green;
 
}

.steps{
  margin-top:15px;
  background:#f8fafc;
  padding:18px;
  border-radius:12px;
  color: black;
  
}

input[type="number"] {
  font-family: 'Source Code Pro', monospace;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  transition: all 0.2s ease;
}

input[type="number"]:focus {
  outline: none;
  border-color: #0f172a;
  background: white;
}

/* CALC RESULTS */
#r1, #r2, #r3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #0f172a;
  text-align: center;
  margin-top: 15px;
}


/* RESULT STEPS */
#s1, #s2, #s3 {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #64748b;
  margin-top: 8px;
  text-align: center;
}

#r1, #r2, #r3 {
  transition: transform 0.3s ease;
}

#r1:hover, #r2:hover, #r3:hover {
  transform: scale(1.05);
}

.copy-btn{
  margin-top:15px;
  background:#111827;
  color:white;
  border:none;
  padding:10px 16px;
  border-radius:8px;
  cursor:pointer;
}

.history{
  margin-top:25px;
  font-size:0.9rem;
}

.reset-btn {
  margin-top: 10px;
  padding: 8px 14px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: 0.2s ease;
}

.reset-btn:hover {
  background: #eaeaea;
}

.copy-btn, .reset-btn {
  margin-top: 10px;
  margin-right: 8px;
}



.section{
  margin-top:60px;
}

.section h2{
  font-size:1.8rem;
  margin-bottom:20px;
}

.section h2::after{
  content:"";
  display:block;
  width:60px;
  height:4px;
  background:linear-gradient(90deg,var(--primary),var(--primary-dark));
  margin-top:8px;
  border-radius:4px;
}

.faq-item{
  border-bottom:1px solid var(--border);
}

.faq-question{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:18px 0;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  position:relative;
}

.faq-question::after{
  content:"+";
  position:absolute;
  right:0;
  font-size:1.2rem;
  transition:0.3s;
}

.faq-item.active .faq-question::after{
  content:"−";
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.3s ease;
  color:var(--muted);
  padding-right:20px;
}

.faq-item.active .faq-answer{
  max-height:200px;
  margin-bottom:15px;
}

body.dark .faq-answer{
  color:white;
}



/* BMI TABLE */
.bmi-table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 15px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.bmi-table thead{
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white;
}

.bmi-table th,
.bmi-table td{
  padding: 14px;
  text-align: center;
}

.bmi-table tbody tr{
  transition: all 0.3s ease;
}

.bmi-table tbody tr:hover{
  transform: scale(1.02);
  background-color: rgba(0,0,0,0.04);
}





/* ===== DARK MODE TEXT FIX ===== */

body.dark{
  background:#0f172a;
  
}



body.dark .steps,
body.dark .history,
body.dark input{
  color:black;
}

body.dark .faq-answer,
body.dark .faq-question{
  color:white;
}


body.dark input{
  
  border-color:#334155;
}

/* mantener botones con su estilo */
body.dark .calculate{
  color:white;
}




/* ===== Dark Toggle Button Style ===== */

.dark-toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.icon-circle{
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111827;
  transition:0.3s;
}

body.dark .icon-circle{
  background:#facc15;
  color:#111827;
}

/* =========================
   BMI TABLE - DARK MODE
========================= */

body.dark .bmi-table{
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

body.dark .bmi-table thead{
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f1f5f9;
}

body.dark .bmi-table th,
body.dark .bmi-table td{
  color: #f8fafc;
}

/* Dark category colors */

body.dark .bmi-table .underweight td{
  background-color: #1e3a8a; /* deep blue */
}

body.dark .bmi-table .normal td{
  background-color: #065f46; /* deep green */
}

body.dark .bmi-table .overweight td{
  background-color: #854d0e; /* deep amber */
}

body.dark .bmi-table .obesity td{
  background-color: #7f1d1d; /* deep red */
}

/* Hover effect in dark */
body.dark .bmi-table tbody tr:hover{
  transform: scale(1.02);
  filter: brightness(1.15);
}


/* Animación suave al aparecer */
/* Animación */
@keyframes fadeInHighlight {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.bmi-row {
  transition: all 0.3s ease;
}

/* Underweight */
.bmi-row.underweight-active {
  animation: fadeInHighlight 0.4s ease forwards;
  border: 2px solid #3498db;
  box-shadow: 0 0 15px rgba(52, 152, 219, 0.7);
}

/* Normal */
.bmi-row.normal-active {
  animation: fadeInHighlight 0.4s ease forwards;
  border: 2px solid #2ecc71;
  box-shadow: 0 0 15px rgba(46, 204, 113, 0.7);
}

/* Overweight */
.bmi-row.overweight-active {
  animation: fadeInHighlight 0.4s ease forwards;
  border: 2px solid #f39c12;
  box-shadow: 0 0 15px rgba(243, 156, 18, 0.7);
}

/* Obesity */
.bmi-row.obese-active {
  animation: fadeInHighlight 0.4s ease forwards;
  border: 2px solid #e74c3c;
  box-shadow: 0 0 18px rgba(231, 76, 60, 0.8);
}

.bmi-message{
  margin-top: 15px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  animation: fadeInHighlight 0.4s ease forwards;
}

/* Colores dinámicos */
.bmi-message.underweight-msg{
  background: rgba(52,152,219,0.1);
  border-left: 4px solid #3498db;
  color: blue;
}

.bmi-message.normal-msg{
  background: rgba(46,204,113,0.1);
  border-left: 4px solid #2ecc71;
  color: green;
}

.bmi-message.overweight-msg{
  background: rgba(243,156,18,0.1);
  border-left: 4px solid #f39c12;
  color:orange;
}

.bmi-message.obese-msg{
  background: rgba(231,76,60,0.1);
  border-left: 4px solid #e74c3c;
  color:red;
}

.bmi-icon{
  font-size: 18px;
  margin-right: 6px;
  display: inline-block;
  animation: popIcon 0.3s ease;
}

@keyframes popIcon{
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}