/* ==================================================================
   Calculadora Metabólica · Zone Diet Argentina
   ================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f0f4f8;
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

#app {
  width: 100%;
  max-width: 480px;
  background: #f0f4f8;
  padding: 0 0 40px;
}

[hidden] { display: none !important; }

/* ---------------------------- HEADER ---------------------------- */
.hero {
  background: linear-gradient(135deg, #0d3f7a, #1a5fa8);
  padding: 32px 20px 28px;
  color: white;
  text-align: center;
}
.hero-logo { font-size: 36px; margin-bottom: 8px; }
.hero h1 { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.hero p { font-size: 14px; opacity: 0.85; line-height: 1.5; }

/* ---------------------------- CARDS ----------------------------- */
.card {
  background: white;
  border-radius: 18px;
  padding: 20px;
  margin: 14px 14px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.card-title {
  font-size: 15px;
  font-weight: 800;
  color: #1a5fa8;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --------------------------- FORMULARIO -------------------------- */
.form-group { margin-bottom: 14px; }

.form-label {
  font-size: 13px;
  font-weight: 700;
  color: #444;
  margin-bottom: 6px;
  display: block;
}

.form-input {
  width: 100%;
  padding: 13px 14px;
  border: 2px solid #e0e7ef;
  border-radius: 12px;
  font-size: 16px;
  color: #333;
  background: #fafcff;
  font-family: inherit;
  transition: border-color 0.15s;
}
.form-input:focus { outline: none; border-color: #1a5fa8; }
.form-input.con-error { border-color: #c62828; background: #fff5f5; }

/* Saca las flechitas de los number en Chrome y Firefox */
.form-input[type=number]::-webkit-inner-spin-button,
.form-input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.form-input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Nota de "completá al menos uno" */
.nota-contacto {
  font-size: 13px;
  line-height: 1.5;
  color: #55636f;
  background: #eef4fb;
  border-left: 4px solid #1a5fa8;
  border-radius: 8px;
  padding: 11px 13px;
  margin-top: 2px;
}
.nota-contacto strong { color: #0d3f7a; }
.nota-contacto.nota-alerta {
  background: #fff3e0;
  border-left-color: #e65c00;
  color: #8a3b00;
}
.nota-contacto.nota-alerta strong { color: #b71c1c; }

/* Errores por campo */
.field-error {
  font-size: 12.5px;
  color: #c62828;
  line-height: 1.45;
  margin-top: 5px;
  display: none;
}
.field-error.visible { display: block; }

/* Error general del formulario */
.form-error {
  background: #ffebee;
  border-left: 4px solid #c62828;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #8e1f1f;
  margin: 14px 0 4px;
}

/* Honeypot: fuera de la pantalla, invisible para las personas */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Género */
.gender-row { display: flex; gap: 10px; }
.gender-btn {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  border: 2px solid #e0e7ef;
  background: white;
  font-size: 20px;
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}
.gender-btn span { font-size: 13px; font-weight: 600; color: #555; }
.gender-btn.sel { border-color: #1a5fa8; background: #e3f2fd; }

/* Actividad */
.activity-btns { display: flex; flex-direction: column; gap: 8px; }
.act-btn {
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid #e0e7ef;
  background: white;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
  text-align: left;
  color: #333;
  transition: all 0.2s;
  font-family: inherit;
}
.act-btn.sel { border-color: #1a5fa8; background: #e3f2fd; color: #1a5fa8; font-weight: 700; }

/* Botón principal */
.calc-btn {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, #1a5fa8, #0d3f7a);
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  margin-top: 6px;
  box-shadow: 0 4px 14px rgba(26,95,168,0.35);
  letter-spacing: 0.3px;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.calc-btn:disabled { opacity: 0.65; cursor: default; }
.calc-btn.secundario {
  background: white;
  color: #1a5fa8;
  border: 2px solid #1a5fa8;
  box-shadow: none;
}

.btn-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,0.35);
  border-top-color: white;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.legal {
  font-size: 11.5px;
  color: #9aa8b5;
  line-height: 1.5;
  text-align: center;
  margin-top: 12px;
}

/* --------------------------- RESULTADOS -------------------------- */
.result-hero {
  border-radius: 18px;
  padding: 24px 20px;
  color: white;
  text-align: center;
  margin: 14px 14px 0;
}
.result-hero.verde    { background: linear-gradient(135deg, #2e7d32, #388e3c); box-shadow: 0 4px 14px rgba(46,125,50,0.30); }
.result-hero.amarillo { background: linear-gradient(135deg, #e65c00, #f57c00); box-shadow: 0 4px 14px rgba(230,92,0,0.30); }
.result-hero.rojo     { background: linear-gradient(135deg, #b71c1c, #c62828); box-shadow: 0 4px 14px rgba(183,28,28,0.35); }

.result-hero .rh-titulo { font-size: 14px; opacity: 0.9; margin-bottom: 6px; font-weight: 600; }
.result-hero .rh-pct    { font-size: 56px; font-weight: 900; line-height: 1; }
.result-hero .rh-label  { font-size: 16px; font-weight: 700; margin-top: 4px; opacity: 0.95; }
.result-hero .rh-sub    { font-size: 13px; opacity: 0.85; margin-top: 8px; line-height: 1.5; }

/* Alerta */
.alert-box {
  border-radius: 16px;
  padding: 20px;
  margin: 14px 14px 0;
  border-left: 5px solid;
}
.alert-box.alerta-naranja { background: #fff3e0; border-color: #e65c00; }
.alert-box.alerta-roja    { background: #ffebee; border-color: #c62828; }

.alert-title { font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.alerta-naranja .alert-title { color: #bf360c; }
.alerta-roja .alert-title    { color: #b71c1c; }

.alert-box p { font-size: 14px; line-height: 1.7; color: #333; margin-bottom: 10px; }
.alert-box p:last-child { margin-bottom: 0; }
.alert-box strong { color: #b71c1c; }

.enf-list { list-style: none; padding: 0; margin: 10px 0; }
.enf-list li { font-size: 13px; padding: 5px 0; color: #444; display: flex; gap: 8px; }
.enf-list li::before { content: "→"; color: #c62828; font-weight: 700; flex-shrink: 0; }

.cta-box {
  background: #1a5fa8;
  color: white;
  border-radius: 12px;
  padding: 14px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 600;
}

/* Métricas */
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metric-tile {
  background: #f8faff;
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
  border: 1.5px solid #e0e7ef;
}
.metric-tile .mt-num   { font-size: 26px; font-weight: 800; color: #1a5fa8; }
.metric-tile .mt-label { font-size: 11px; color: #777; margin-top: 4px; }
.metric-tile .mt-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
  margin-top: 6px;
  line-height: 1.4;
}

.ref-title { font-size: 13px; font-weight: 700; color: #555; margin-bottom: 8px; }

/* Bloques */
.blocks-hero {
  background: linear-gradient(135deg, #1a5fa8, #0d3f7a);
  border-radius: 16px;
  padding: 20px;
  color: white;
  text-align: center;
}
.blocks-hero .bh-num   { font-size: 64px; font-weight: 900; line-height: 1; }
.blocks-hero .bh-label { font-size: 15px; opacity: 0.9; margin-top: 4px; }

.dist-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 14px; }
.dist-tile { background: rgba(255,255,255,0.15); border-radius: 10px; padding: 10px 4px; text-align: center; }
.dist-tile .dt-num   { font-size: 22px; font-weight: 800; }
.dist-tile .dt-label { font-size: 10px; opacity: 0.85; margin-top: 2px; }

.explica {
  margin-top: 14px;
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  background: #f8faff;
  border-radius: 10px;
  padding: 12px;
}

/* Tabla de referencia */
.bf-table { border-radius: 12px; overflow: hidden; border: 1.5px solid #e0e7ef; }
.bf-row-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #f0f4f8;
  font-size: 13px;
}
.bf-row-item:last-child { border-bottom: none; }
.bf-row-item.you { background: #f0f4f8; font-weight: 700; }
.bf-dot   { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.bf-range { width: 70px; flex-shrink: 0; font-size: 12px; color: #555; }
.bf-name  { flex: 1; }
.bf-you-tag { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 20px; }

/* Ayuda debajo de un campo del formulario */
.ayuda-campo {
  font-size: 12.5px;
  color: #7b8b9c;
  line-height: 1.5;
  margin-top: 6px;
  background: #f7fafd;
  border-radius: 8px;
  padding: 9px 11px;
}
.ayuda-campo strong { color: #44586c; }

/* Aviso cuando el resultado no cuadra con el IMC */
.revisar-box {
  background: #fff8e1;
  border: 2px solid #f0c14b;
  border-radius: 16px;
  padding: 18px;
  margin: 14px 14px 0;
}
.revisar-titulo {
  font-size: 16px;
  font-weight: 800;
  color: #8a6d00;
  margin-bottom: 8px;
}
.revisar-box p {
  font-size: 14px;
  line-height: 1.6;
  color: #5c4a00;
}
.revisar-btn {
  width: 100%;
  margin-top: 13px;
  padding: 12px;
  background: #8a6d00;
  color: white;
  border: none;
  border-radius: 11px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.revisar-btn:active { background: #6d5600; }

/* ------------------ LLAMADOS A LA ACCIÓN DEL RESULTADO ------------------ */
.cta-zona {
  margin: 18px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Los dos botones comparten estructura: título grande y bajada chica */
.cta-plan, .cta-pro {
  display: block;
  text-decoration: none;
  text-align: center;
  border-radius: 16px;
  padding: 16px 18px;
  transition: transform 0.12s, box-shadow 0.12s;
}
.cta-plan:active, .cta-pro:active { transform: scale(0.985); }

.cta-plan .cta-t, .cta-pro .cta-t {
  display: block;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.2px;
}
.cta-plan .cta-d, .cta-pro .cta-d {
  display: block;
  font-size: 12.5px;
  opacity: 0.88;
  margin-top: 4px;
  line-height: 1.4;
}

/* Armar mi plan: azul, en la línea de la marca */
.cta-plan {
  background: linear-gradient(135deg, #1a5fa8, #0d3f7a);
  color: white;
  box-shadow: 0 5px 16px rgba(26,95,168,0.32);
}
.cta-plan:active { box-shadow: 0 3px 10px rgba(26,95,168,0.3); }

/* Seguimiento profesional: verde WhatsApp, para que se lea de un vistazo */
.cta-pro {
  background: linear-gradient(135deg, #128c7e, #25d366);
  color: white;
  box-shadow: 0 5px 16px rgba(18,140,126,0.3);
}
.cta-pro:active { box-shadow: 0 3px 10px rgba(18,140,126,0.28); }

/* Recalcular: discreto, ya cumplió su función */
.cta-volver {
  background: none;
  border: none;
  color: #8a97a4;
  font-size: 13.5px;
  font-family: inherit;
  padding: 8px;
  cursor: pointer;
  touch-action: manipulation;
  align-self: center;
  text-decoration: underline;
}
.cta-volver:active { color: #55636f; }

/* Pie */
.footer {
  text-align: center;
  padding: 24px 20px 0;
  font-size: 12px;
  color: #999;
  line-height: 1.6;
}