/* ============================================================
   CASA — estilos

   Dos reglas heredadas de Racha, las dos medidas alli y no
   opinadas:

   1. NO SE DIBUJAN BORDES. Lo que separa dos cosas es el espacio
      entre ellas y la diferencia de luz de sus fondos. Un borde de
      1 px es lo que mas grita "pagina web" en un movil.

   2. SUBIR DE CAPA NO ES UN ESTADO. Entre --l1 y --l2 hay dos
      puntos de luminosidad: sirve para decir "esto flota", nunca
      para decir "esto esta elegido". Lo elegido se rellena de
      --tinta; lo hecho, de --ok.

   Y una propia de esta app, que es la que manda sobre el resto:
   TODO LO QUE SE TOCA MIDE AL MENOS 56 px DE ALTO. Aqui se toca de
   pie, en un pasillo, con una mano, con el carro en la otra y con
   un padre de 55 anos al otro lado. Un boton de 40 px es una
   funcion que no existe.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* Papel: la paleta clara de Racha. Crema calido, tinta casi negra. */
  --l0: #EFEAE0;
  --l1: #F8F5ED;
  --l2: #FFFDF8;
  --l3: #E1D9C6;
  --hair: rgba(28, 24, 16, .10);

  --tinta: #171410;
  --dim:   #4C473D;
  --faint: #67635A;
  --ok:      #4E9E77;
  --ok-txt:  #1F6B47;
  --alarma:  #B4503C;
  --aviso-txt: #7A5A1E;

  --btn-bg: #171410;
  --btn-txt: #F6F3EA;

  --sombra: rgba(58, 48, 28, .16);
  --hundido: rgba(28, 24, 16, .07);

  --f: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --m: ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad: 1.15rem;
  --r-s: 12px;
  --r: 18px;
  --barra: 4.6rem;
  --toque: 56px;

  --curva: cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --l0: #08090A;
    --l1: #12161A;
    --l2: #1A2128;
    --l3: #242D35;
    --hair: rgba(237, 234, 227, .08);

    --tinta: #EDEAE3;
    --dim:   #98A4AC;
    --faint: #86929A;
    --ok:      #6FBF95;
    --ok-txt:  #6FBF95;
    --alarma:  #C4604B;
    --aviso-txt: #C8A45C;

    --btn-bg: #EDEAE3;
    --btn-txt: #0A0B0C;

    --sombra: rgba(0, 0, 0, .5);
    --hundido: rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f);
  font-size: 17px;
  line-height: 1.4;
  color: var(--tinta);
  background: var(--l0);
  /* El rebote de iOS al final de la lista deja ver el fondo del
     navegador y delata la web al instante. */
  overscroll-behavior-y: none;
}

.sprite { display: none; }
.ico { width: 24px; height: 24px; flex: none; }
[hidden] { display: none !important; }

/* ---------- vistas ---------- */

main {
  display: block;
  padding: max(1rem, env(safe-area-inset-top)) var(--pad)
           calc(var(--barra) + env(safe-area-inset-bottom) + 1.5rem);
  max-width: 34rem;
  margin: 0 auto;
}

.vista { display: none; }
.vista.is-on { display: block; animation: entra .22s var(--curva); }

@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .vista.is-on { animation: none; }
  * { transition: none !important; }
}

.cabecera { margin: .4rem 0 1.1rem; }
.cabecera h1 { font-size: 1.65rem; line-height: 1.15; margin: 0; letter-spacing: -.02em; }
.pista { margin: .35rem 0 0; color: var(--faint); font-size: .92rem; }
.rotulo {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--faint); margin: 0 0 .55rem; font-weight: 600;
}
.nota { color: var(--faint); font-size: .88rem; margin: .55rem 0 0; }
.nota.mono { font-family: var(--m); font-size: .82rem; word-break: break-all; color: var(--dim); }
.bloque { margin: 0 0 2rem; }

/* ---------- botones ---------- */

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

.primary, .ghost {
  min-height: var(--toque);
  border-radius: var(--r);
  padding: 0 1.2rem;
  font-size: 1.03rem;
  font-weight: 600;
  transition: transform .12s var(--curva), background .15s;
}
.primary { background: var(--btn-bg); color: var(--btn-txt); }
.ghost { background: var(--l1); color: var(--tinta); }
.wide { display: block; width: 100%; }
.primary:active, .ghost:active { transform: scale(.975); }
.ghost:active { background: var(--l3); }

.fin { margin-top: 1.6rem; }

/* ---------- buscador ---------- */

.buscar {
  display: flex; align-items: center; gap: .6rem;
  background: var(--l1); border-radius: var(--r);
  padding: 0 .95rem; min-height: var(--toque);
  margin-bottom: 1rem;
}
.buscar .ico { color: var(--faint); width: 20px; height: 20px; }
.buscar input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; color: var(--tinta); padding: 0;
  /* 17 px o mas: por debajo, iOS hace zoom al enfocar y deja la app
     descuadrada hasta que se recarga. */
  font-size: 17px;
  -webkit-appearance: none;
}
.buscar input::-webkit-search-decoration,
.buscar input::-webkit-search-cancel-button { -webkit-appearance: none; }
.buscar input::placeholder { color: var(--faint); }
.limpiar { display: flex; align-items: center; padding: .5rem; margin: -.5rem -.4rem -.5rem 0; color: var(--faint); }

/* ---------- la rejilla: el toque unico ---------- */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.2rem, 1fr));
  gap: .6rem;
}

.pastilla {
  min-height: 68px;
  border-radius: var(--r);
  background: var(--l1);
  color: var(--tinta);
  padding: .7rem .85rem;
  text-align: left;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.22;
  display: flex; align-items: center;
  transition: transform .1s var(--curva), background .15s;
}
.pastilla:active { transform: scale(.955); background: var(--l3); }
.pastilla.nueva { background: var(--l2); box-shadow: inset 0 0 0 2px var(--hair); }
.pastilla.nueva .mas { color: var(--faint); font-weight: 400; }

.rejilla-vacia { color: var(--faint); font-size: .95rem; padding: 1.2rem 0; }

/* ---------- lo apuntado hoy ---------- */

.hoy { margin-top: 1.8rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: 0 .55rem 0 .85rem;
  border-radius: 999px; background: var(--l1);
  font-size: .92rem; color: var(--dim);
}
.chip .ico { width: 17px; height: 17px; color: var(--faint); }
.chip:active { background: var(--l3); }

/* ---------- la compra ---------- */

.seccion { margin: 0 0 1.5rem; }
.seccion h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--faint); margin: 0 0 .5rem; font-weight: 600;
}
.filas { background: var(--l1); border-radius: var(--r); overflow: hidden; }

.fila {
  display: flex; align-items: center; gap: .85rem;
  width: 100%; min-height: var(--toque);
  padding: .7rem .95rem;
  text-align: left;
  transition: background .15s;
}
/* El unico pelo permitido: dentro de una lista, donde la fila de
   arriba y la de abajo comparten fondo y hay que decir donde acaba
   una. Nunca alrededor de nada. */
.fila + .fila { box-shadow: inset 0 1px 0 var(--hair); }
.fila:active { background: var(--l3); }

.caja {
  width: 26px; height: 26px; flex: none;
  border-radius: 8px; background: var(--hundido);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background .15s, color .15s;
}
.fila.hecha .caja { background: var(--ok); color: #fff; }
@media (prefers-color-scheme: dark) { .fila.hecha .caja { color: #0A0B0C; } }
.caja .ico { width: 17px; height: 17px; }

.fila-txt { flex: 1; min-width: 0; }
.fila-n { display: block; font-size: 1.02rem; font-weight: 500; }
.fila.hecha .fila-n { text-decoration: line-through; color: var(--faint); font-weight: 400; }
.fila-q { display: block; font-size: .8rem; color: var(--faint); margin-top: .1rem; }

/* Lo que ha entrado mientras estabas comprando. Dura un minuto y se
   apaga sola: si todo esta marcado, nada esta marcado. */
.fila.recien { background: color-mix(in srgb, var(--ok) 12%, var(--l1)); }
.fila.recien .fila-q { color: var(--ok-txt); font-weight: 600; }

.vacio { text-align: center; color: var(--faint); padding: 2.5rem 0; }
.vacio p { margin: 0 0 1.2rem; }

/* ---------- perfiles ---------- */

.perfiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.perfil {
  min-height: var(--toque); border-radius: var(--r);
  background: var(--l1); font-weight: 600; font-size: 1.02rem;
  transition: transform .1s var(--curva);
}
.perfil:active { transform: scale(.97); }
.perfil.is-on { background: var(--btn-bg); color: var(--btn-txt); }

/* ---------- orden de pasillos ---------- */

.orden { background: var(--l1); border-radius: var(--r); overflow: hidden; }
.orden-fila { display: flex; align-items: center; gap: .5rem; padding: .5rem .5rem .5rem 1rem; min-height: var(--toque); }
.orden-fila + .orden-fila { box-shadow: inset 0 1px 0 var(--hair); }
.orden-n { flex: 1; font-size: .98rem; }
.mover {
  width: 44px; height: 44px; border-radius: var(--r-s);
  display: flex; align-items: center; justify-content: center; color: var(--dim);
}
.mover:active { background: var(--l3); }
.mover:disabled { opacity: .25; }

/* ---------- alta ---------- */

.alta {
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  padding: var(--pad); padding-bottom: max(var(--pad), env(safe-area-inset-bottom));
}
.alta-caja { width: 100%; max-width: 22rem; }
.alta-t { font-size: 2.1rem; margin: 0 0 .4rem; letter-spacing: -.03em; }
.alta-p { color: var(--dim); margin: 0 0 1.6rem; }
.alta-paso { margin-top: 1.2rem; }
.alta-err { color: #A8382A; font-size: .92rem; margin-top: 1rem; }
@media (prefers-color-scheme: dark) { .alta-err { color: #E07A6B; } }

/* ---------- barra de pestanas ---------- */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: color-mix(in srgb, var(--l0) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -1px 0 var(--hair);
}
.tab {
  position: relative;
  height: var(--barra);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .01em;
  color: var(--faint);
  transition: color .15s;
}
.tab.is-on { color: var(--tinta); }
.globo {
  position: absolute; top: .8rem; left: 50%; margin-left: .5rem;
  min-width: 8px; height: 8px; border-radius: 999px; background: var(--ok);
}

/* ---------- el aviso con deshacer ---------- */

.aviso {
  position: fixed; z-index: 40;
  left: var(--pad); right: var(--pad);
  bottom: calc(var(--barra) + env(safe-area-inset-bottom) + .7rem);
  max-width: 32rem; margin: 0 auto;
  display: flex; align-items: center; gap: .8rem;
  background: var(--btn-bg); color: var(--btn-txt);
  border-radius: var(--r); padding: .85rem 1rem;
  box-shadow: 0 12px 32px var(--sombra);
  font-size: .96rem; font-weight: 500;
  animation: sube .25s var(--curva);
}
.aviso span { flex: 1; min-width: 0; }
@keyframes sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.deshacer {
  flex: none; color: inherit; font-weight: 700; font-size: .95rem;
  padding: .55rem .3rem; margin: -.55rem -.3rem;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ============================================================
   LA ENCUESTA

   Pantalla completa y una sola cosa a la vez. Setenta y ocho platos
   solo se contestan si cada uno cuesta un vistazo y un toque, y si
   se puede parar sin sensacion de haberlo dejado a medias — por eso
   el boton de parar esta arriba desde el primer plato y no
   escondido al final.
   ============================================================ */

.enc {
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding: max(.8rem, env(safe-area-inset-top)) var(--pad)
           max(var(--pad), env(safe-area-inset-bottom));
  max-width: 34rem; margin: 0 auto;
}

.enc-top { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.4rem; }
.enc-barra { flex: 1; height: 6px; border-radius: 999px; background: var(--hundido); overflow: hidden; }
.enc-barra i { display: block; height: 100%; background: var(--tinta); border-radius: 999px; transition: width .3s var(--curva); }
.enc-cuenta { font-size: .82rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.enc-parar { font-size: .9rem; color: var(--faint); font-weight: 600; padding: .6rem 0 .6rem .4rem; }

.enc-paso { flex: 1; display: flex; flex-direction: column; }

/* ---------- la ficha del plato ---------- */

.ficha {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
  padding: 1rem 0 2rem;
  animation: entra .2s var(--curva);
}
.ficha-e { font-size: 3.6rem; line-height: 1; margin-bottom: 1rem; }
.ficha-n { font-size: 1.75rem; line-height: 1.15; margin: 0 0 1rem; letter-spacing: -.02em; }

/* Los ingredientes son lo que de verdad se juzga al decidir si te
   comerias algo, asi que van grandes y no en letra pequena. Es lo que
   sustituye a la foto. */
.ficha-ing { font-size: 1.08rem; line-height: 1.5; color: var(--dim); margin: 0 0 1.3rem; }
.ficha-dat { font-size: .95rem; color: var(--faint); margin: 0; font-variant-numeric: tabular-nums; }
/* Los numeros de nutricion NO los ven los padres: NUTRICION-CASA.md
   dice "Padres: CERO numeros". El precio y el tiempo si, que no son
   numeros sobre el cuerpo de nadie. */
.ficha-nut { font-size: .92rem; color: var(--faint); margin: .4rem 0 0; font-variant-numeric: tabular-nums; }

.enc-botones { display: flex; flex-direction: column; gap: .55rem; }
.enc-motivos { animation: entra .2s var(--curva); }
.enc-motivos .rotulo { text-align: center; }
.enc-motivos .chips { justify-content: center; margin-bottom: .9rem; }
.chip.motivo { background: var(--l1); color: var(--tinta); padding: 0 1rem; font-weight: 500; }
.chip.motivo:active { background: var(--l3); }

/* ---------- la despensa ---------- */

.desp-sec { margin: 0 0 1.4rem; }
.desp-sec h3 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--faint); margin: 0 0 .5rem; font-weight: 600;
}
.desp-filas { background: var(--l1); border-radius: var(--r); overflow: hidden; }
.desp-fila { display: flex; align-items: center; gap: .5rem; padding: .45rem .5rem .45rem 1rem; min-height: var(--toque); }
.desp-fila + .desp-fila { box-shadow: inset 0 1px 0 var(--hair); }
.desp-n { flex: 1; font-size: 1rem; }
.desp-b {
  min-width: 62px; height: 42px; border-radius: var(--r-s);
  font-size: .88rem; font-weight: 600; color: var(--faint);
  background: var(--hundido);
}
.desp-b:active { background: var(--l3); }
.desp-b.on { background: var(--tinta); color: var(--l1); }
.desp-b.on.no { background: var(--alarma); color: #fff; }

/* ---------- el final ---------- */

.enc-fin { justify-content: center; text-align: center; }
.enc-fin h1 { font-size: 2rem; margin: 0 0 .5rem; letter-spacing: -.03em; }
.enc-fin .chips { justify-content: center; margin-bottom: 1.2rem; }
.enc-fin .ghost { margin-top: .6rem; }

/* ---------- la invitacion a contestarla ---------- */

.invita {
  display: flex; align-items: center; gap: .85rem; width: 100%;
  background: var(--l1); border-radius: var(--r);
  padding: .9rem 1rem; margin-bottom: 1rem; text-align: left;
  min-height: var(--toque);
}
.invita:active { background: var(--l3); }
.invita span { flex: 1; min-width: 0; }
.invita b { display: block; font-size: 1rem; font-weight: 600; }
.invita i { display: block; font-size: .85rem; color: var(--faint); font-style: normal; margin-top: .1rem; }
.invita .ico { color: var(--faint); }

/* ---------- el resumen de la casa ---------- */

#resumen-casa .rotulo { margin-top: 1.4rem; }
.res-fila { display: flex; align-items: baseline; gap: .6rem; padding: .55rem 0; }
.res-fila + .res-fila { box-shadow: inset 0 1px 0 var(--hair); }
.res-n { flex: 1; font-size: .98rem; font-weight: 600; }
.res-d { font-size: .85rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.res-duda { margin-top: 1rem; font-size: .9rem; color: var(--dim); }
.res-duda b { font-weight: 600; }