/* MyChef — identidad visual compartida.
   Referencia: la pantalla de nevera Samsung Family Hub. Fondos neutros, superficies blancas de esquinas
   amplias, un acento verde y una sola familia de letra, Lexend, hecha para leerse fácil. */

@font-face { font-family: "Lexend"; src: url(/static/fonts/lexend-latin-300-normal.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Lexend"; src: url(/static/fonts/lexend-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lexend"; src: url(/static/fonts/lexend-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Lexend"; src: url(/static/fonts/lexend-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Lexend"; src: url(/static/fonts/lexend-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #f2f3f5;
  --paper: #ffffff;
  --paper-2: #f6f7f9;
  --ink: #121714;
  --muted: #5b635e;
  --line: #e3e6e8;
  --line-strong: #cdd2d5;

  --green: #17804f;
  --green-hover: #126b41;
  --green-ink: #12663f;
  --green-soft: #e2f2e8;
  --green-mist: #eef7f1;
  --on-green: #ffffff;

  --terra: #9a4a00;        /* avisos (naranja) */
  --terra-soft: #fff0dc;
  --honey: #9a4a00;
  --honey-fill: #f5a524;
  --honey-soft: #fff0dc;
  --berry: #b3261e;        /* errores y borrar */
  --berry-soft: #fce4e2;
  --sky: #1558b0;
  --sky-soft: #e3eefb;

  /* Tonos suaves con nombre: botones del inicio, grupos del inventario y categorías de la agenda.
     Fondo (--tint-x) y texto (--tint-x-ink), con contraste ≥ 5.9:1; en modo oscuro se invierten. */
  --tint-honey: #fff0dc; --tint-honey-ink: #8a4200;
  --tint-clay: #fde2d3; --tint-clay-ink: #9a3412;
  --tint-lilac: #efe4f7; --tint-lilac-ink: #6b2f8f;
  --tint-sky: #e3eefb; --tint-sky-ink: #1558b0;
  --tint-teal: #dcf1ef; --tint-teal-ink: #0c5c56;
  --tint-berry: #fce4e2; --tint-berry-ink: #b3261e;
  --tint-wheat: #f6ead9; --tint-wheat-ink: #7a4510;
  --tint-indigo: #e6ecfa; --tint-indigo-ink: #3446a0;
  --tint-stone: #eef0f2; --tint-stone-ink: #374151;
  --alert: #d93025;          /* contador rojo */
  --star: #ffd23f;           /* la estrella de los niños (relleno); el borde es --honey-fill */
  --star-ink: #6b3a00;       /* su carita: igual de día y de noche, siempre sobre amarillo */
  --star-shine: #ffffff;
  --star-cheek: #ff7a59;

  --display: "Lexend", "Segoe UI", system-ui, sans-serif;
  --sans: "Lexend", "Segoe UI", system-ui, sans-serif;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 24px;
  --r-dialog: 28px;
  --float: 0 24px 60px -24px rgba(10, 16, 12, .45), 0 4px 12px -6px rgba(10, 16, 12, .2);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1110; --paper: #1b1f1d; --paper-2: #222725; --ink: #f2f4f3; --muted: #a2aba6;
    --line: #2c322f; --line-strong: #3b433f;
    --green: #5ccb8f; --green-hover: #74d6a0; --green-ink: #7fd8a6; --green-soft: #1f3528; --green-mist: #18241d;
    --on-green: #0b130e;
    --terra: #ffb870; --terra-soft: #3a2a17; --honey: #ffb870; --honey-fill: #d98a14; --honey-soft: #3a2a17;
    --berry: #ff9c92; --berry-soft: #3f2220; --sky: #8ab8ff; --sky-soft: #1c2a40;
    --tint-honey: #3a2a17; --tint-honey-ink: #ffb870;
    --tint-clay: #3d2419; --tint-clay-ink: #ffa27a;
    --tint-lilac: #33243f; --tint-lilac-ink: #d8b4fe;
    --tint-sky: #1b2a3d; --tint-sky-ink: #93c5fd;
    --tint-teal: #173330; --tint-teal-ink: #7fdcd2;
    --tint-berry: #3f2220; --tint-berry-ink: #ff9c92;
    --tint-wheat: #36291b; --tint-wheat-ink: #f0c48f;
    --tint-indigo: #1e2540; --tint-indigo-ink: #a5b4fc;
    --tint-stone: #2a2f33; --tint-stone-ink: #d1d5db;
    --float: 0 24px 60px -24px rgba(0, 0, 0, .8), 0 4px 12px -6px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--bg);
  font: 16px/1.5 var(--sans);
  caret-color: var(--green);
  scrollbar-color: var(--line-strong) transparent;
}
::selection { background: color-mix(in srgb, var(--green) 28%, transparent); color: var(--ink); }
.num { font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; text-wrap: balance; }
h1 { font-size: 1.6rem; margin: 0; }
h2 { font-size: 1.3rem; margin: 0 0 .75rem; }
h3 { font-size: 1.1rem; margin: 1.2rem 0 .5rem; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.i { flex: none; vertical-align: -0.2em; }
a { color: var(--green-ink); }

/* ---------------------------------------------------------------- botones y campos */

button, .btn {
  font: inherit; font-weight: 500; color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  padding: .5rem .9rem; transition: background .15s, border-color .15s, transform .08s;
}
button:hover, .btn:hover { border-color: var(--green); }
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--green) 45%, transparent); outline-offset: 2px;
}
button.primary, .btn-primary { background: var(--green); border-color: var(--green); color: var(--on-green); }
button.primary:hover, .btn-primary:hover { background: var(--green-hover); border-color: var(--green-hover); }
.btn-soft { background: var(--green-soft); border-color: transparent; color: var(--green-ink); }
.btn-plain { background: var(--paper); }
.btn-danger, button.danger { color: var(--berry); }
.btn-danger { background: var(--berry-soft); border-color: transparent; }
button.ghost { background: none; border-color: transparent; }
button.ghost:hover { background: var(--green-mist); }
button:disabled { opacity: .45; cursor: default; transform: none; }
button[aria-busy="true"] { opacity: 1; cursor: progress; position: relative; color: transparent !important; }
button[aria-busy="true"] > * { visibility: hidden; }
button[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 1.2em; height: 1.2em; border-radius: 50%;
  border: 2.5px solid currentColor; border-color: var(--busy-ink, var(--on-green)) transparent var(--busy-ink, var(--on-green)) transparent;
  animation: spin .8s linear infinite;
}
button:not(.primary):not(.btn-primary)[aria-busy="true"] { --busy-ink: var(--green); }
@keyframes spin { to { transform: rotate(360deg); } }
a.btn { text-decoration: none; }

input, select, textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: .5rem .65rem; min-width: 0;
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
input[type=checkbox] { accent-color: var(--green); width: 1.15rem; height: 1.15rem; }
textarea { width: 100%; min-height: 6rem; }
label.field { display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; color: var(--muted); font-weight: 500; }
label.field > input, label.field > select, label.field > textarea { font-weight: 400; font-size: 1rem; }

/* ---------------------------------------------------------------- piezas comunes */

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1rem;
}
.stack > * + * { margin-top: .75rem; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.badge {
  display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 500;
  padding: .12rem .55rem; border-radius: 999px; background: var(--paper-2); color: var(--muted);
  border: 1px solid var(--line);
}
.badge.ok { background: var(--green-soft); color: var(--green-ink); border-color: transparent; }
.badge.warn { background: var(--honey-soft); color: var(--honey); border-color: transparent; }
.badge.bad { background: var(--berry-soft); color: var(--berry); border-color: transparent; }
.badge.accent { background: var(--terra-soft); color: var(--terra); border-color: transparent; }

.bar { height: 7px; background: var(--paper-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.bar > span { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.bar.mid > span { background: var(--honey-fill); }
.bar.low > span { background: var(--terra); }

ul.clean { list-style: none; padding: 0; margin: 0; }
ul.clean li { padding: .5rem 0; border-bottom: 1px dashed var(--line); }
ul.clean li:last-child { border-bottom: 0; }
.ing-status { width: 1.4rem; display: inline-flex; justify-content: center; }
.st-ok { color: var(--green); } .st-basic { color: var(--muted); } .st-poco { color: var(--honey); } .st-falta { color: var(--berry); }
table { width: 100%; border-collapse: collapse; }
td, th { padding: .45rem .35rem; border-bottom: 1px dashed var(--line); text-align: left; vertical-align: middle; }
th { font-size: .78rem; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
td input { width: 100%; }
.table-wrap { overflow-x: auto; }
.table-wrap table { min-width: 620px; }
td input[type=checkbox] { width: auto; }
tr.expiring td { background: var(--honey-soft); }
tr.cat th { font-weight: 600; font-size: .95rem; text-transform: none; letter-spacing: 0; color: var(--green-ink); padding-top: 1rem; }
.instructions { white-space: pre-wrap; }
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.empty .i { color: var(--green); margin-bottom: .5rem; }

/* ---------------------------------------------------------------- administrar */

.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .8rem 1.2rem; background: var(--paper); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .7rem; }
.brand h1 { font-size: 1.3rem; }
.brand small { display: block; font-family: var(--sans); font-size: .78rem; color: var(--muted); font-weight: 400; letter-spacing: 0; }

.tabs {
  display: flex; gap: .2rem; overflow-x: auto; padding: 0 1.2rem;
  background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5;
}
.tabs button {
  border: 0; background: none; border-radius: 0;
  padding: .85rem .8rem .75rem; white-space: nowrap; color: var(--muted);
}
.tabs button:hover { color: var(--ink); background: none; }
.tabs button.active { color: var(--green-ink); box-shadow: inset 0 -3px 0 var(--green); }

main { padding: 1.2rem; max-width: 1120px; margin: 0 auto; }

.ing-row { display: grid; gap: .4rem; grid-template-columns: 2fr .8fr .9fr 1.3fr auto auto; align-items: center; }
.form-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* ---------------------------------------------------------------- modales */

dialog.m, dialog#modal {
  border: 0; padding: 0; width: min(640px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
  background: var(--paper); color: var(--ink); border-radius: var(--r-dialog);
  box-shadow: var(--float);
  display: flex; flex-direction: column; overflow: hidden;
  animation: m-in .22s var(--ease-out);
}
dialog.m:not([open]), dialog#modal:not([open]) { display: none; }
dialog#modal { width: min(780px, calc(100vw - 2rem)); }
dialog.m.narrow { width: min(440px, calc(100vw - 2rem)); }
dialog.m.wide { width: min(900px, calc(100vw - 2rem)); }
dialog.m.closing { animation: m-out .14s ease-in forwards; }
dialog::backdrop { background: rgba(22, 32, 24, .45); animation: fade-in .22s var(--ease-out); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes m-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes m-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }

.m-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.2rem .6rem 1.4rem;
}
.m-title { margin: 0; font-size: 1.3rem; }
.m-x { border: 0; background: var(--paper-2); width: 40px; height: 40px; padding: 0; border-radius: 50%; color: var(--muted); }
.m-x:hover { background: var(--green-soft); color: var(--green-ink); }
.m-body { padding: .2rem 1.4rem 1rem; overflow-y: auto; }
.m-text { margin: 0; font-size: 1.1rem; color: var(--muted); }
.m-actions {
  display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap;
  padding: .9rem 1.2rem 1.1rem; border-top: 1px dashed var(--line); background: var(--paper-2);
}
.m-actions button { padding: .7rem 1.2rem; font-size: 1rem; }
#modal-body { padding: 1.2rem 1.4rem 1.3rem; overflow-y: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: .4rem; }
.modal-head h2 { margin: 0; font-size: 1.3rem; }

/* avatares de la familia */
.avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--av); color: #fff; font-weight: 600; line-height: 1; vertical-align: middle; }

/* selector de caras / dibujos */
.pick { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .4rem; }
.pick label { cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span {
  display: grid; place-items: center; width: 52px; height: 52px; font-size: 1.6rem; border-radius: var(--r-sm);
  background: var(--paper-2); border: 2px solid var(--line);
}
.pick input:checked + span { border-color: var(--green); background: var(--green-soft); }
.pick input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--green) 45%, transparent); }
.m-title:empty { visibility: hidden; }

/* ---------------------------------------------------------------- aviso flotante */

#toast {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translate(-50%, 8px); z-index: 200;
  background: var(--green-ink); color: var(--paper); padding: .75rem 1.2rem; border-radius: 999px;
  font-weight: 500; box-shadow: var(--float);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 2rem);
}
@media (prefers-color-scheme: dark) { #toast { background: var(--green); color: var(--on-green); } }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- PIN */

.pin-screen { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-items: center; padding: 1rem; }
.pin-card { text-align: center; width: min(340px, 100%); }
.pin-emoji { color: var(--green); }
.pin-card h2 { font-size: 1.6rem; margin: .4rem 0 1rem; }
.pin-dots { font-size: 1.6rem; letter-spacing: .5rem; min-height: 2.6rem; color: var(--green); }
.pin-error { color: var(--berry); min-height: 1.5rem; font-weight: 500; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: .6rem; }
.pin-pad button { font-size: 1.6rem; font-variant-numeric: tabular-nums; padding: .9rem 0; border-radius: var(--r); }
.pin-pad button.ok { background: var(--green); border-color: var(--green); color: var(--on-green); }

@media (max-width: 640px) {
  .ing-row { grid-template-columns: 1fr 1fr 1fr; }
  .ing-row .ing-name { grid-column: 1 / -1; }
  main { padding: .8rem; }
  .topbar { padding: .7rem .9rem; }
  .tabs { padding: 0 .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, dialog::backdrop { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  button[aria-busy="true"]::after { animation: spin 1.6s linear infinite !important; }
}

/* Modo de inventario (Administrar → Despensa) */
.modes { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.mode { position: relative; display: grid; gap: .2rem; padding: .8rem 1rem; border-radius: var(--r); border: 2px solid var(--line); cursor: pointer; background: var(--paper); }
.mode input { position: absolute; opacity: 0; pointer-events: none; }
.mode.on { border-color: var(--green); background: var(--green-mist); }
.mode:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.badge.staple { display: inline-flex; align-items: center; gap: .15rem; padding-right: .15rem; }
.badge.staple button { width: 24px; height: 24px; min-height: 0; padding: 0 !important; border: 0; color: inherit; }

/* Horario de tareas (Administrar → Casa y tareas) */
.seg { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.seg label, .days label { position: relative; cursor: pointer; }
.seg input, .days input { position: absolute; opacity: 0; pointer-events: none; }
.seg label > span { display: inline-block; padding: .55rem 1rem; border-radius: 999px; border: 2px solid var(--line); background: var(--paper); font-weight: 500; }
.seg input:checked + span { border-color: var(--green); background: var(--green-mist); color: var(--green-ink); }
.days { display: flex; gap: .4rem; margin-top: .35rem; flex-wrap: wrap; }
.days span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--line); font-weight: 600; background: var(--paper); }
.days input:checked + span { background: var(--green); border-color: var(--green); color: var(--on-green); }
.seg input:focus-visible + span, .days input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.when-btn { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; text-align: left; }
.when-btn .remind { display: inline-flex; align-items: center; gap: .2rem; color: var(--muted); font-size: .9em; }
[data-sch][hidden] { display: none !important; }

/* Cuestionario de «Cómo comemos» (Administrar): una pregunta por pantalla, respuestas grandes */
.quiz-q { margin: 0 0 .6rem; font-size: 1.25rem; font-weight: 600; }
.quiz-opts label > span { padding: .75rem 1.2rem; font-size: 1.05rem; }

/* Receta de prueba (idea de la IA) en Administrar → Recetas */
.trial-note { padding: .7rem 1rem; border-radius: var(--r-sm); background: var(--tint-lilac); color: var(--tint-lilac-ink); flex-wrap: wrap; gap: .6rem; }
.trial-note > span:first-child { display: inline-flex; align-items: center; gap: .4rem; }

/* Modelos de IA (Administrar → Casa y tareas) */
.ai-row + .ai-row { border-top: 1px dashed var(--line); padding-top: .8rem; }
.ok-text { color: var(--green-ink); font-weight: 500; }
.bad-text { color: var(--berry); font-weight: 500; }

/* ¿Cuánto hay? Por porciones (adultos y niños) o por medida. Lo usan la tablet y Administrar. */
.amount-form { display: grid; gap: .9rem; margin-top: .4rem; }
.amt-mode { display: flex; gap: .35rem; padding: .3rem; border-radius: 999px; background: var(--paper-2); }
.amt-mode button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 48px;
  border: 0 !important; background: transparent !important; color: var(--muted) !important; font-weight: 500; border-radius: 999px;
}
.amt-mode button[aria-checked="true"] { background: var(--green) !important; color: var(--on-green) !important; }
.amount-form[data-mode="portions"] .amt-measure, .amount-form[data-mode="measure"] .amt-portions { display: none; }
.amt-portions .m-text { margin: 0 0 .5rem; }

.people-picker { display: grid; gap: .5rem; }
.pp-row { display: flex; align-items: center; gap: .8rem; }
.pp-label { flex: 1; font-size: 1.1rem; font-weight: 500; }
.pp-row button { width: 52px; height: 52px; padding: 0 !important; flex: none; border-radius: 50%; background: var(--paper-2) !important; border-color: transparent !important; }
.pp-row strong { min-width: 2.2rem; text-align: center; font-size: 1.6rem; font-weight: 500; font-variant-numeric: tabular-nums; }

.inv-qty { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.inv-qty > button { width: 64px; height: 64px; padding: 0 !important; flex: none; border-radius: 50%; background: var(--paper-2) !important; border-color: transparent !important; }
.inv-qty label { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; }
.inv-qty input { width: 7.5rem; max-width: 100%; text-align: center; font-size: 2.2rem !important; font-weight: 500; font-variant-numeric: tabular-nums; padding: .5rem !important; }
.inv-qty .qu-txt { font-size: 1.1rem; color: var(--muted); }
.inv-qty select { width: auto; }
@media (max-width: 760px) {
  .inv-qty { gap: .6rem; }
  .inv-qty > button { width: 56px; height: 56px; }
  .inv-qty input { width: 6rem; }
}

/* Cabecera de Administrar: quiénes comen en casa */

/* Porciones por comidas: "3 comidas de 2 adultos y 1 niño" + otras líneas */
.meal-lines { display: grid; gap: .6rem; }
.meal-line { display: grid; gap: .45rem; padding: .7rem .8rem; border-radius: var(--r); background: var(--paper-2); }
.ml-top, .ml-who { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .5rem; }
.ml-top .ml-word { font-size: 1.1rem; font-weight: 500; }
.ml-de { color: var(--muted); margin-right: .1rem; }
.ml-word { color: var(--ink); margin: 0 .5rem 0 .15rem; }
.ml-step { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.ml-step button { width: 40px; height: 40px; padding: 0 !important; flex: none; border-radius: 50%; background: var(--paper) !important; border-color: transparent !important; }
.ml-step strong { min-width: 1.6rem; text-align: center; font-size: 1.3rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.ml-top .ml-step strong { font-size: 1.6rem; }
.ml-rm { margin-left: auto; width: 40px; height: 40px; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--muted) !important; }
.ml-rm[hidden] { display: none; }
.add-line {
  display: flex !important; align-items: center; justify-content: center; gap: .4rem; width: 100%; margin-top: .6rem; min-height: 48px;
  border: 2px dashed var(--line-strong) !important; background: transparent !important; color: var(--green-ink) !important; border-radius: var(--r) !important;
}
.meal-total { margin: .6rem 0 0; color: var(--green-ink); font-weight: 500; }
.meal-total:empty { display: none; }

/* Ajustes: calendario de Google */
.g-email { padding: .3rem .6rem; border-radius: var(--r-sm); background: var(--paper-2); overflow-wrap: anywhere; user-select: all; }
.steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }

/* Premio de un niño (tablet y Administrar): íconos a color o una foto */
.prize-img { width: 82%; height: 82%; object-fit: contain; display: block; }
.prize-img.is-photo { width: 100%; height: 100%; object-fit: cover; }
.prize-top { display: flex; gap: 1.2rem; align-items: flex-start; }
.prize-preview {
  width: 148px; height: 148px; flex: none; border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center;
  background: var(--tint-honey); color: var(--tint-honey-ink); box-shadow: inset 0 0 0 3px var(--honey-fill);
}
.prize-search input { flex: 1; min-width: 0; }
.prize-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; margin-top: .4rem; }
.prize-grid.small { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.prize-tile {
  display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .6rem .3rem; height: 100%;
  border-radius: var(--r); border: 2px solid var(--line); background: var(--paper); font-weight: 400;
}
.prize-tile img { width: 48px; height: 48px; }
.prize-grid.small .prize-tile img { width: 44px; height: 44px; }
.prize-tile small { font-size: .78rem; font-weight: 500; line-height: 1.2; text-align: center; color: var(--ink); }
.prize-tile[aria-pressed="true"] { border-color: var(--honey-fill); background: var(--tint-honey); box-shadow: 0 0 0 2px var(--honey-fill); }
.prize-results { max-height: 260px; overflow: auto; padding: .2rem; border-radius: var(--r); background: var(--paper-2); }
.prize-results p { margin: .6rem; }
@media (max-width: 640px) {
  .prize-top { flex-direction: column; align-items: center; }
  .prize-top > .stack { width: 100%; }
}
.prize-btn { gap: .4rem; padding: .25rem .7rem .25rem .25rem; border-radius: 999px; font-size: .88rem; }
.prize-mini { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--tint-honey); color: var(--tint-honey-ink); }

/* Administrar → Premios */
.kid-checks { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.kid-check { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem .3rem .4rem; border-radius: 999px; background: var(--paper-2); cursor: pointer; }
.kid-check .avatar { color: #fff; }
.prize-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); margin-top: 1rem; }
.prize-card { gap: .9rem; }
.prize-card.ready { box-shadow: inset 0 0 0 3px var(--honey-fill); }
.pc-who { font-size: 1.1rem; font-weight: 600; }
.pc-who .avatar { color: #fff; }
.prize-card .kid-path { --ss: 26px; }
@media (max-width: 640px) {
  .prize-cards { grid-template-columns: 1fr; }
}

/* La estrella de los niños (sticker): borde miel, relleno claro, carita, cachetes y brillo */
.kstar { display: block; width: 100%; height: auto; overflow: visible; }
.kstar polygon { stroke-linejoin: round; }
.kstar .ks-edge { fill: var(--honey-fill); stroke: var(--honey-fill); stroke-width: 10; }
.kstar .ks-fill { fill: var(--star); stroke: var(--star); stroke-width: 3; }
.kstar .ks-shine { fill: none; stroke: var(--star-shine); stroke-width: 3.6; stroke-linecap: round; opacity: .85; }
.kstar .ks-eye { fill: var(--star-ink); }
.kstar .ks-smile { fill: none; stroke: var(--star-ink); stroke-width: 2.8; stroke-linecap: round; }
.kstar .ks-cheek { fill: var(--star-cheek); opacity: .45; }
.kstar.off .ks-slot { fill: color-mix(in srgb, var(--paper) 60%, transparent); stroke: var(--line-strong); stroke-width: 3.5; stroke-dasharray: 5 5; stroke-linecap: round; }

/* Tamaños fijos para la estrella dentro de botones y textos */
.ks-18, .ks-22, .ks-24, .ks-32 { display: inline-block; flex: none; vertical-align: middle; font-style: normal; }
.ks-18 { width: 18px; } .ks-22 { width: 22px; } .ks-24 { width: 26px; } .ks-32 { width: 34px; }

/* Un tono por grupo (fondo del ícono y su trazo), con el mismo contraste que los botones del inicio */
.g-proteinas  { --g-bg: var(--tint-clay); --g-ink: var(--tint-clay-ink); }
.g-lacteos    { --g-bg: var(--tint-sky); --g-ink: var(--tint-sky-ink); }
.g-verduras   { --g-bg: var(--green-soft); --g-ink: var(--green-ink); }
.g-frutas     { --g-bg: var(--tint-berry); --g-ink: var(--tint-berry-ink); }
.g-granos     { --g-bg: var(--tint-honey); --g-ink: var(--tint-honey-ink); }
.g-panaderia  { --g-bg: var(--tint-wheat); --g-ink: var(--tint-wheat-ink); }
.g-despensa   { --g-bg: var(--tint-lilac); --g-ink: var(--tint-lilac-ink); }
.g-congelados { --g-bg: var(--tint-teal); --g-ink: var(--tint-teal-ink); }
.g-sobras     { --g-bg: var(--tint-teal); --g-ink: var(--tint-teal-ink); }
.g-bebidas    { --g-bg: var(--tint-indigo); --g-ink: var(--tint-indigo-ink); }
.g-aseo       { --g-bg: var(--tint-stone); --g-ink: var(--tint-stone-ink); }
.g-otros      { --g-bg: var(--tint-stone); --g-ink: var(--tint-stone-ink); }

/* Administrar → Despensa: se lee primero, se edita con un toque */
.p-bar { display: flex; gap: .6rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.p-search { flex: 1; min-width: 14rem; display: flex; align-items: center; gap: .5rem; padding: 0 .9rem; border-radius: 999px; background: var(--paper); border: 1.5px solid var(--line-strong); color: var(--muted); }
.p-search input { border: 0; background: none; padding: .7rem 0; flex: 1; min-width: 0; }
.p-search input:focus-visible { outline: none; }
.p-search:focus-within { border-color: var(--green); }
.p-settings { width: 48px; height: 48px; padding: 0 !important; color: var(--muted); }
@media (max-width: 640px) { .p-search { flex-basis: 100%; } .p-bar > button:not(.p-settings) { flex: 1; } }

.p-attn { margin-bottom: 1rem; background: var(--tint-honey); border-color: transparent; }
.p-attn.calm { background: var(--green-mist); }
.p-attn h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; font-size: 1.1rem; color: var(--tint-honey-ink); }
.p-attn.calm h2 { color: var(--green-ink); margin-bottom: .2rem; }
.p-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.p-chip { display: inline-flex; align-items: baseline; gap: .45rem; padding: .45rem .9rem; border-radius: 999px; border: 0; background: var(--paper); font-weight: 600; }
.p-chip small { font-weight: 500; }
.p-chip.bad small { color: var(--berry); }
.p-chip.warn small { color: var(--tint-honey-ink); }

.p-groups { columns: 2 340px; column-gap: 1rem; }
.p-group { break-inside: avoid; margin-bottom: 1rem; padding: .9rem 1.1rem .6rem; }
.p-group h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .4rem; font-size: 1.1rem; }
.p-group h3 small { margin-left: auto; color: var(--muted); font-weight: 500; font-size: .88rem; }
.p-gic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--g-bg); color: var(--g-ink); flex: none; }
.p-line {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: .5rem; text-align: left;
  padding: .6rem .4rem; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; font-weight: 400;
}
.p-line:hover { background: var(--paper-2); border-color: var(--line); }
.p-name { font-weight: 500; }
.p-dots { border-bottom: 2px dotted var(--line-strong); transform: translateY(-.3em); }
.p-qty { font-weight: 600; color: var(--green-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-extra { grid-column: 1 / -1; color: var(--muted); margin-top: -.2rem; }
.p-line.soon .p-extra, .p-line.low .p-qty { color: var(--tint-honey-ink); }
.p-out { padding: .9rem 1.1rem; }
.p-out summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.p-out summary small { font-weight: 500; }
.p-out .p-qty { color: var(--muted); }

.p-toggle { display: flex; align-items: center; gap: .6rem; font-weight: 500; cursor: pointer; }
.p-toggle input { width: 1.3rem; height: 1.3rem; }
.p-sub { margin: -.4rem 0 0 1.9rem; }
.p-sub[hidden], .p-more [hidden] { display: none !important; }
.p-more summary { cursor: pointer; color: var(--green-ink); font-weight: 500; margin-bottom: .6rem; }
.p-more[open] { padding-bottom: .2rem; }

/* El camino de premios: estrellas y, en su sitio, cada premio (tablet y Administrar).
   --ss es el tamaño de la estrella; cada pantalla lo ajusta. */
.kid-path { --ss: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.kp-star { width: var(--ss); flex: none; }
.kp-star.new { animation: kp-stamp .55s calc(.3s + var(--d, 0s)) var(--ease-out) both; }
.kp-star.next { animation: kp-breathe 1.6s ease-in-out infinite; }
.kp-prize {
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: .1rem;
  width: calc(var(--ss) * 2); padding: .35rem .2rem .25rem !important; margin: 0 .2rem;
  border: 0 !important; border-radius: var(--r) !important; background: var(--paper) !important; color: var(--tint-honey-ink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--honey-fill) 45%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--tint-honey-ink) 60%, transparent);
}
.kp-art { width: calc(var(--ss) * 1.45); aspect-ratio: 1; display: grid; place-items: center; }
.kp-art .prize-img { width: 100%; height: 100%; }
.kp-art .prize-img.is-photo { border-radius: var(--r-sm); }
.kp-num { display: inline-flex; align-items: center; gap: .15rem; font-size: .88rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.kp-num .ks-18 { width: 16px; }
.kp-check {
  position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green); color: var(--on-green); box-shadow: 0 0 0 3px var(--paper);
}
.kp-prize.done { background: var(--paper-2) !important; box-shadow: none; }
.kp-prize.done .kp-art { opacity: .5; filter: grayscale(.4); }
.kp-prize.next { animation: kp-grow 1.8s ease-in-out infinite; box-shadow: 0 0 0 3px color-mix(in srgb, var(--honey-fill) 60%, transparent); }
.kp-prize.ready { background: var(--paper) !important; box-shadow: 0 0 0 4px var(--honey-fill), 0 12px 26px -12px var(--honey-fill); animation: kp-bounce 1s ease-in-out infinite; }
@keyframes kp-stamp { 0% { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.25) rotate(8deg); } }
@keyframes kp-breathe { 50% { transform: scale(1.08); } }
@keyframes kp-grow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes kp-bounce { 0%, 100% { transform: scale(1) rotate(0); } 25% { transform: scale(1.16) rotate(-4deg); } 75% { transform: scale(1.16) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .kp-star.new, .kp-star.next, .kp-prize.next, .kp-prize.ready { animation: none; } }

/* La lista de premios de un niño: estrella, dibujo, nombre y estado */
.prize-rows { list-style: none; margin: 0; padding: 0; }
.prize-rows li { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; }
.prize-rows li + li { border-top: 1px solid var(--line); }
.pr-art { width: 44px; height: 44px; flex: none; border-radius: var(--r-sm); overflow: hidden; display: grid; place-items: center; background: var(--tint-honey); color: var(--tint-honey-ink); }
.pr-num { display: inline-flex; align-items: center; gap: .2rem; min-width: 3.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-name { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.pr-name small { display: block; color: var(--muted); font-weight: 400; }
.prize-rows li.ready .pr-name small { color: var(--tint-honey-ink); font-weight: 600; }
.prize-rows li.done .pr-art { opacity: .55; }
.quick-stars button { padding: .4rem .8rem; border-radius: 999px; }
.quick-stars button[aria-pressed="true"] { border-color: var(--green); background: var(--green-mist); color: var(--green-ink); }


/* Entrar con usuario y contraseña */
.login-card { display: grid; gap: .8rem; text-align: left; }
.login-card .pin-emoji, .login-card h2 { text-align: center; }
.login-card h2 { margin: 0 0 .4rem; }
.login-card .pin-error { min-height: 1.3rem; }
.login-card button { justify-content: center; display: flex; align-items: center; gap: .4rem; }
.login-card p { margin: 0; text-align: center; }