/* =============================================================================
   NUTRITUPP · /calculadora
   -----------------------------------------------------------------------------
   Hereda los tokens de sistema.css y los campos y botones de planificador.css.
   Aquí solo va lo propio de esta página.

   La forma manda el orden de lectura: en pantalla ancha, los datos a la
   izquierda y el resultado FIJO a la derecha, para que el número se mueva
   mientras tocas los mandos — que es lo que hace que una calculadora se sienta
   un juguete y no un formulario. En el móvil, uno debajo del otro y el
   resultado pegado arriba por la misma razón.

   Mismos tres colores que el tablero del perfil, y significan lo mismo:
   verde = proteína, ámbar = hidratos, teal = lo demás.
   ========================================================================== */
.calc { padding: 28px 0 72px; }

.calc__cab { max-width: 44rem; margin: 0 0 28px; }
.calc__eyebrow {
  margin: 0 0 8px; font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--teal);
}
.calc h1 {
  margin: 0 0 12px; font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.8rem);
  line-height: 1.08; letter-spacing: -.02em;
}
.calc__intro { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.55; color: var(--texto); max-width: 40rem; }
.calc__aviso {
  margin: 0; padding: 10px 14px; border-radius: 10px;
  background: var(--fondo); border-left: 3px solid var(--verde);
  font-size: .88rem; line-height: 1.5; color: var(--texto); max-width: 40rem;
}

.calc__cuerpo {
  display: grid; gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  align-items: start;
}

/* --- Los mandos ----------------------------------------------------------- */
.calc__form {
  padding: 20px; border-radius: 14px;
  background: #fff; border: 1px solid var(--linea);
}
.calc__rejilla { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calc .campo { display: block; margin: 0 0 14px; }
.calc .campo > span { display: block; margin-bottom: 6px; font-size: .84rem; font-weight: 600; color: var(--texto); }
.calc .campo input[type="number"],
.calc .campo select {
  width: 100%; min-height: 48px; padding: 8px 10px;
  border: 1.5px solid var(--linea); border-radius: 8px;
  background: #fff; color: inherit; font: inherit;
}
.calc .campo input[type="number"]:focus-visible,
.calc .campo select:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.calc .campo input[type="range"] { width: 100%; accent-color: var(--teal); }
.calc__grupo { margin: 0 0 14px; padding: 0; border: 0; }
.calc__grupo legend { padding: 0; margin-bottom: 6px; font-size: .84rem; font-weight: 600; color: var(--texto); }
.calc__opciones { display: flex; gap: 8px; }
.calc__opciones label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 6px 10px; border-radius: 8px;
  border: 1.5px solid var(--linea); cursor: pointer; font-size: .95rem; font-weight: 600;
}
.calc__opciones label:has(input:checked) { border-color: var(--teal); background: var(--fondo); }
.calc__opciones input { accent-color: var(--teal); }
.calc__pista { margin: -6px 0 0; font-size: .8rem; color: var(--texto); opacity: .9; line-height: 1.45; }

/* --- El resultado --------------------------------------------------------- */
.calc__salida { position: sticky; top: 88px; display: grid; gap: 12px; }
.res { padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--linea); }
.res--comida { border: 2px solid var(--teal); background: var(--fondo); }
.res__cab {
  margin: 0 0 2px; font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--texto);
}
.res__kcal {
  margin: 0 0 10px; font-size: 2.4rem; font-weight: 800; line-height: 1.05;
  color: var(--teal); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.res__kcal small { font-size: 1rem; font-weight: 700; }
.res__macros { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.res__macros li {
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem; color: var(--texto); font-variant-numeric: tabular-nums;
}
.mac { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--teal); }
.mac--p { background: var(--verde); }
.mac--h { background: #c87f2e; }
.mac--g { background: #8e7b62; }
.calc__nota { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--texto); opacity: .9; }

@media (max-width: 860px) {
  .calc__cuerpo { grid-template-columns: 1fr; }
  /* en el móvil el resultado va ARRIBA: es lo que la gente ha venido a ver */
  .calc__form { order: 2; }
  .calc__salida { order: 1; position: static; }
}
@media (max-width: 420px) {
  .calc__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .calc .campo > span { font-size: .78rem; }
}

/* --- Los platos que encajan ------------------------------------------------
   Una calculadora que suelta «2.150 kcal» y se calla no sirve de nada: nadie
   sabe qué es eso en un plato. Esto es el puente entre jugar y pedir. */
.calc__platos { margin: 40px 0 0; }
.calc__platos h2, .calc__leer h2 {
  margin: 0 0 8px; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); letter-spacing: -.01em;
}
.calc__ayuda { margin: 0 0 16px; font-size: .92rem; color: var(--texto); line-height: 1.5; }
.calc__lista {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.pcard {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border-radius: 14px;
  background: #fff; border: 1.5px solid var(--linea);
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.pcard:hover { border-color: var(--teal); box-shadow: 0 6px 20px rgba(7,52,57,.10); transform: translateY(-2px); }
.pcard:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
/* Las piezas del plato, una al lado de otra: se ve que es principal +
   guarnición. La proporción la fija el CONTENEDOR, no cada foto: si la pone
   cada una, un plato sin guarnición (una sola foto a todo el ancho) sale con el
   doble de alto que sus vecinas y la fila entera baila. */
.pcard__fotos { display: flex; gap: 4px; aspect-ratio: 16 / 9; }
.pcard__foto {
  flex: 1; min-width: 0; width: auto; height: 100%;
  object-fit: cover; border-radius: 8px; display: block; background: var(--fondo);
}
.pcard__foto--nada { background: linear-gradient(135deg, #eef6f0, #e2efe4); }
/* min-height: el nombre reserva dos líneas para que los precios de la fila
   queden todos en la misma raya en vez de escalonados */
.pcard__nom { font-size: .95rem; font-weight: 700; line-height: 1.3; min-height: 2.6em; }
.pcard__dato { font-size: .82rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.pcard__dato b { color: var(--titulo); }
.pcard__precio {
  margin-top: auto; font-size: 1.15rem; font-weight: 800;
  color: var(--teal); font-variant-numeric: tabular-nums;
}

.calc__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.calc__acciones .boton { min-height: 52px; }

.calc__leer { margin: 40px 0 0; max-width: 42rem; }
.calc__leer p { margin: 0 0 10px; line-height: 1.6; color: var(--texto); }
.calc__leer a { color: var(--teal); font-weight: 600; }

@media (max-width: 480px) {
  .calc__acciones .boton { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pcard { transition: none; }
  .pcard:hover { transform: none; }
}

/* --- El texto: lo que Google necesita para entender de qué va esto ----------
   Andrés, 09-09-2026: «no metemos texto para atraer SEO con la calculadora».
   Sí, pero medido: esta página y el artículo llevaban casi el mismo title y el
   mismo H1, o sea que competían entre ellas. El artículo se queda con la
   pregunta y esta página con la herramienta, y lo que se escribe aquí es lo
   que el artículo NO tiene. */
.calc__texto { margin: 44px 0 0; }
.calc__texto h2 {
  margin: 32px 0 10px; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); letter-spacing: -.01em;
}
.calc__texto h2:first-child { margin-top: 0; }
.calc__texto h3 { margin: 0 0 6px; font-size: 1rem; color: var(--teal); }
.calc__texto p { margin: 0 0 12px; line-height: 1.65; color: var(--texto); max-width: 44rem; }
.calc__texto b { color: var(--titulo); }

.calc__cols {
  display: grid; gap: 18px 28px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 0 0 8px;
}
.calc__cols p { margin: 0; }

.calc__lista-texto { margin: 0 0 12px; padding-left: 20px; max-width: 44rem; }
.calc__lista-texto li { margin-bottom: 6px; line-height: 1.6; color: var(--texto); }
.calc__lista-texto b { color: var(--titulo); }

/* La tabla: 31 filas y 8 columnas no caben en un móvil, así que se desplaza
   DENTRO de su caja. El body no se mueve de lado en ningún ancho. */
.calc__tabla-caja {
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--linea); border-radius: 12px; background: #fff;
  margin: 0 0 10px;
}
.calc__tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.calc__tabla caption {
  caption-side: bottom; padding: 10px 14px; text-align: left;
  font-size: .78rem; color: var(--texto); opacity: .9;
}
.calc__tabla th, .calc__tabla td {
  padding: 9px 12px; text-align: right; white-space: nowrap;
  border-top: 1px solid var(--linea-fina, #ece6dc);
}
/* La fila de títulos NO va sticky: `top: 0` la metía justo debajo de la
   cabecera fija del sitio y se veía el menú a través de la tabla. Y dentro de
   un contenedor con overflow-x el sticky vertical no se comporta igual en
   todos los navegadores. Con 31 filas se lee de sobra sin pegarla. */
.calc__tabla thead th {
  background: var(--fondo); border-top: 0;
  font-size: .76rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--texto);
}
/* la primera columna es el nombre: a la izquierda y sin cortar */
.calc__tabla th[scope="row"], .calc__tabla thead th:first-child { text-align: left; }
.calc__tabla th[scope="row"] { font-weight: 600; white-space: normal; min-width: 12rem; }
.calc__tabla th[scope="row"] a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linea); }
.calc__tabla th[scope="row"] a:hover { color: var(--teal); border-color: var(--teal); }
.calc__tabla td { font-variant-numeric: tabular-nums; color: var(--texto); }
.calc__tabla td b { color: var(--titulo); font-size: .95rem; }
.calc__tabla tbody tr:hover { background: var(--fondo); }

/* Las preguntas: <details> nativo, sin una línea de JavaScript */
.calc__faq { max-width: 44rem; margin: 0 0 8px; }
.calc__faq details {
  border-bottom: 1px solid var(--linea);
}
.calc__faq summary {
  padding: 14px 28px 14px 0; position: relative;
  font-weight: 700; cursor: pointer; list-style: none; line-height: 1.4;
}
.calc__faq summary::-webkit-details-marker { display: none; }
.calc__faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 12px;
  font-size: 1.3rem; font-weight: 400; color: var(--teal); line-height: 1;
}
.calc__faq details[open] summary::after { content: "\2212"; }
.calc__faq summary:hover { color: var(--teal); }
.calc__faq summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.calc__faq details p { margin: 0 0 14px; line-height: 1.6; color: var(--texto); }

/* --- EL IMC (Andrés, 11-09-2026) --------------------------------------------
   Una escala con los cuatro tramos de la OMS y una aguja. La forma dice más
   que el número: se ve de un golpe en qué franja cae y lo cerca que está de
   la siguiente, que es lo que la cifra sola no cuenta.

   Los colores NO son un semáforo verde-amarillo-rojo a propósito: el IMC no
   distingue músculo de grasa y pintar «rojo» a alguien que entrena sería
   soltarle un juicio que este número no puede hacer. Es una escala de
   intensidad del mismo teal, con el tramo normal marcado en verde. */
.res--imc { border: 1px solid var(--linea); }
.res--imc .res__kcal { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.res--imc .res__kcal small {
  font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--crema-honda, #e5dcd0); color: var(--titulo, #161915);
}
.res--imc .res__kcal small[data-t="normal"] { background: #e6f1dc; color: #3a7026; }
.res--imc .res__kcal small[data-t="bajo"]   { background: #e7eff0; color: #145961; }
.res--imc .res__kcal small[data-t="sobre"]  { background: #f6ead9; color: #8a5a20; }
.res--imc .res__kcal small[data-t="obes"]   { background: #f1e0d4; color: #8a4420; }

.imc { margin: 4px 0 10px; }
.imc__barra {
  position: relative; display: flex; height: 10px; border-radius: 999px; overflow: hidden;
}
/* los anchos son los tramos reales sobre una escala de 15 a 40:
   bajo 15-18,5 (14%) · normal 18,5-25 (26%) · sobre 25-30 (20%) · obes 30-40 (40%) */
.imc__tramo[data-t="bajo"]   { flex: 0 0 14%; background: #cfdcdd; }
.imc__tramo[data-t="normal"] { flex: 0 0 26%; background: var(--verde, #74b74e); }
.imc__tramo[data-t="sobre"]  { flex: 0 0 20%; background: #dcc7a8; }
.imc__tramo[data-t="obes"]   { flex: 0 0 40%; background: #c9a98f; }
.imc__aguja {
  position: absolute; top: -3px; width: 3px; height: 16px; margin-left: -1.5px;
  border-radius: 2px; background: var(--titulo, #161915);
  box-shadow: 0 0 0 2px #fff;
  transition: left .35s cubic-bezier(.22, 1, .36, 1);
}
.imc__eje {
  position: relative; height: 1.1em; margin-top: 3px;
  font-size: .7rem; color: var(--texto, #556354); font-variant-numeric: tabular-nums;
}
/* las marcas van justo donde cambia el tramo, no repartidas a ojo */
.imc__eje span { position: absolute; transform: translateX(-50%); }
.imc__eje span:nth-child(1) { left: 14%; }
.imc__eje span:nth-child(2) { left: 40%; }
.imc__eje span:nth-child(3) { left: 60%; }

.imc__sano { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--texto, #556354); }
.imc__sano b { color: var(--titulo, #161915); }
.imc__sano em { display: block; margin-top: 4px; font-style: normal; opacity: .9; }

@media (prefers-reduced-motion: reduce) { .imc__aguja { transition: none; } }