/* PROT INN · calculadora de macros.
   Va en su propio archivo y solo se carga en /calculadora/: son ~3 KB que las
   otras 41 páginas no tienen por qué descargar. */

.calc-sec { padding-block: calc(var(--head-h) + clamp(3rem, 7vw, 5.5rem)) clamp(3rem, 7vw, 5rem); }
.calc-sec h1 { font-size: clamp(2.6rem, 7.5vw, 6rem); }

/* ── El formulario ──────────────────────────────────────────────────────── */

.calc-form {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--greige);
  display: grid; gap: clamp(1.1rem, 2.4vw, 1.8rem);
}
.cf-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(1rem, 2.2vw, 1.8rem); align-items: end; }
.cf-campo { display: flex; flex-direction: column; gap: .5rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.cf-ancho { grid-column: span 2; }
@media (max-width: 620px) { .cf-ancho { grid-column: span 1; } }

.cf-campo > label, .cf-campo > legend {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--black-60); padding: 0;
}
.cf-campo input[type="number"], .cf-campo select {
  font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--black);
  background: var(--white); border: 1px solid transparent; border-radius: 0;
  padding: .78rem .85rem; width: 100%; min-width: 0; appearance: none;
}
.cf-campo select {
  background-image: linear-gradient(45deg, transparent 50%, var(--black) 50%), linear-gradient(135deg, var(--black) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.2rem;
}
.cf-campo input:focus-visible, .cf-campo select:focus-visible { outline: 3px solid var(--persimmon); outline-offset: 1px; }

/* Campo con sufijo: el número y su unidad leídos como una sola pieza. */
.cf-mix { display: flex; align-items: stretch; background: var(--white); }
.cf-mix input { flex: 1 1 auto; }
.cf-mix > span {
  display: flex; align-items: center; padding-right: .9rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--black-40);
}
.cf-mix select { flex: 0 0 auto; width: auto; background-color: transparent; }

.cf-radios { display: flex; flex-wrap: wrap; gap: .45rem; }
.cf-radios label {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--white); padding: .7rem .95rem; cursor: pointer;
  font-size: .92rem; font-weight: 600; line-height: 1;
}
.cf-radios input { accent-color: var(--persimmon); margin: 0; }
.cf-radios label:has(input:checked) { background: var(--black); color: #fff; }
.cf-radios label:has(input:focus-visible) { outline: 3px solid var(--persimmon); outline-offset: 2px; }

.cf-boton { justify-content: flex-end; }
.cf-boton .btn { width: 100%; }

/* ── El resultado ───────────────────────────────────────────────────────── */

.calc-meta { margin-top: clamp(2.4rem, 5vw, 3.5rem); }
.calc-meta h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
.cm-cifras {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem 1.4rem;
}
.cm-cifras li { border-top: 2px solid var(--black); padding-top: .7rem; }
.cm-cifras b { display: block; font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -.04em; line-height: .9; font-variant-numeric: tabular-nums; }
.cm-cifras span { display: block; margin-top: .35rem; font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--black-40); }

.calc-gasto { margin-top: 1.2rem; font-size: 1rem; color: var(--black-60); }
.calc-gasto b { color: var(--black); }

/* El descargo NO va en letra diminuta ni en gris casi ilegible: es lo que
   evita que alguien tome una estimación por una prescripción. */
.calc-nota {
  margin-top: 1.2rem; max-width: 62ch;
  font-size: .88rem; line-height: 1.5; color: var(--black-60);
  border-left: 2px solid var(--hair); padding-left: 1rem;
}
.calc-aviso { margin-top: 1rem; font-size: .95rem; color: var(--black-60); }

/* ── El día armado ──────────────────────────────────────────────────────── */

.calc-dia { margin-top: clamp(2.4rem, 5vw, 3.5rem); }
.calc-dia-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; }
.calc-dia-cab h3 { margin: 0; font-size: clamp(1.4rem, 3vw, 2.2rem); }

.cd-lista { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.cd {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: .2rem 1rem; padding: 1rem 0; border-top: 1px solid var(--hair);
}
.cd-franja { grid-column: 1 / -1; font-family: var(--mono); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--persimmon); }
.cd-n { font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 700; letter-spacing: -.02em; }
.cd-p { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; white-space: nowrap; }
.cd-m { grid-column: 1 / -1; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--black-60); }
.cd-m b { color: var(--black); }

.calc-suma { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 2px solid var(--black); font-size: .98rem; line-height: 1.55; }
.calc-suma b { font-variant-numeric: tabular-nums; }

/* ── Explorar la carta ──────────────────────────────────────────────────── */

.calc-explora { background: var(--greige); padding-block: clamp(3.5rem, 8vw, 6rem); }
.calc-explora h2 { font-size: clamp(2rem, 5vw, 3.6rem); }
.calc-filtros { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; margin-top: clamp(1.6rem, 3.5vw, 2.4rem); }
.calc-filtros .cf-campo { min-width: 210px; }

.calc-lista { margin-top: 1.6rem; }
/* Lista larga con su propio scroll: 61 productos seguidos empujarían el pie de
   página tan abajo que el filtro dejaría de verse mientras se lee. */
.cd-lista-larga { max-height: 62vh; overflow-y: auto; padding-right: .6rem; }
.calc-explora .cd { border-top-color: rgba(17, 17, 16, .16); }

/* ── Lo que queda libre ─────────────────────────────────────────────────────
   La pregunta real de quien mira no es "¿qué porcentaje cubre esto?" sino
   "¿cuánto me queda para el resto del día?". Va después de la suma, con el
   mismo peso visual que el objetivo, y en rojo cuando el día propuesto se pasa
   — pasarse no se esconde. */

.calc-libre { margin-top: 1.4rem; }
.cl-tit {
  display: block; font-family: var(--mono); font-size: .6rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--black-40);
}
.cl-cifras {
  list-style: none; margin: .7rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .8rem 1.2rem;
}
.cl-cifras li { border-top: 1px solid var(--hair); padding-top: .55rem; }
.cl-cifras b {
  display: block; font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 800;
  letter-spacing: -.03em; line-height: .95; font-variant-numeric: tabular-nums;
}
.cl-cifras span { display: block; margin-top: .25rem; font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--black-40); }
.cl-neg b { color: var(--persimmon); }
.cl-neg { border-top-color: var(--persimmon); }

.calc-compartir { margin-top: 1.6rem; }