/* Pantalla de la casa — referencia: nevera Samsung Family Hub.
   Inicio: la foto de la familia a pantalla completa, hora grande, widgets blancos y bandeja de apps.
   Pantallas internas: título grande arriba, tarjetas blancas de esquinas amplias. */

body.hub {
  font-size: 18px;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
body.hub input, body.hub textarea { -webkit-user-select: text; user-select: text; font-size: 1.1rem; padding: .8rem 1rem; border-radius: var(--r); }
.hub main { max-width: none; padding: 0; margin: 0; }
.hub button { border-radius: 999px; padding: .75rem 1.25rem; }
body.hub:not(.at-home) main { max-width: 1180px; margin: 0 auto; padding: 1.4rem 1.6rem 2.5rem; }

/* ---------------------------------------------------------------- inicio: foto de fondo */

.stage { display: none; position: fixed; inset: 0; z-index: 0; background: #1d5e3f url(/static/wallpaper.svg) center / cover no-repeat; }
body.at-home .stage { display: block; }
body.at-home main { position: relative; z-index: 1; }
.stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.6s var(--ease-out);
}
.stage img.on { opacity: 1; }
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .12) 45%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(0deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .25) 22%, rgba(0, 0, 0, 0) 40%);
}

.home {
  position: relative; z-index: 1; height: 100dvh; color: #fff;
  display: grid; grid-template-columns: 1fr minmax(360px, 440px); grid-template-rows: minmax(0, 1fr) auto;
  gap: 1.2rem 1.6rem; padding: 1.6rem 1.8rem 1.4rem;
}

/* Columna izquierda: hora, saludo y avisos sobre la foto */
/* Nunca se sale de su fila: si no cabe, el «Ojo con esto» se encoge (y se desplaza por dentro) */
.left { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 1rem; min-height: 0; overflow: hidden; }
.left > * { flex: none; }
.left > .ojo { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.time-block { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.clock { font-weight: 300; font-size: 6.2rem; line-height: .95; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.clock .ampm { font-size: .3em; font-weight: 500; letter-spacing: 0; margin-left: .3em; }
.hello { font-size: 2.4rem; font-weight: 600; letter-spacing: -.02em; margin: .5rem 0 0; color: #fff; }
.today-line { font-size: 1.3rem; font-weight: 400; margin-top: .25rem; opacity: .95; }
.photo-caption { margin-top: auto; font-size: .95rem; opacity: .9; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.photo-caption:empty { display: none; }
.left .ojo { margin-top: auto; max-width: 560px; }
.photo-caption:not(:empty) + .ojo { margin-top: 0; }

.invite {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .7rem; padding: .6rem .7rem .6rem 1rem !important;
  background: color-mix(in srgb, var(--paper) 94%, transparent) !important; color: var(--ink) !important; border: 0 !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); font-weight: 400;
}
.invite .i { color: var(--green); }
.invite .go { background: var(--green); color: var(--on-green); border-radius: 999px; padding: .4rem .9rem; font-weight: 500; }

/* Tarjetas del día: la columna derecha, de arriba abajo (con los botones forman una L invertida).
   Se estiran para llenar el alto; si no caben, cada una se encoge y desplaza solo su contenido. */
.widgets {
  grid-column: 2; grid-row: 1 / -1; display: flex; flex-direction: column; gap: 1rem; align-self: stretch;
  max-height: 100%; min-height: 0; overflow: hidden; border-radius: var(--r-dialog);
}
.widget {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: color-mix(in srgb, var(--paper) 94%, transparent); color: var(--ink);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-radius: var(--r-dialog); padding: 1.1rem 1.25rem 1.2rem;
  box-shadow: 0 12px 32px -18px rgba(0, 0, 0, .55);
}
/* En el inicio el aviso sale arriba a la derecha, sobre los widgets: no tapa la hora ni el botón de «Oye casa». */
body.at-home #toast { top: 1.4rem; bottom: auto; left: auto; right: 1.6rem; transform: translateY(-8px); max-width: min(34rem, calc(100vw - 2rem)); }
body.at-home #toast.show { transform: translateY(0); }
.w-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .55rem; }
.w-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; margin: 0 -.4rem; padding: 0 .4rem; }
.w-body::-webkit-scrollbar { display: none; }
.w-head h2 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.w-head small { color: var(--muted); font-size: .88rem; }
.w-title { display: flex; align-items: center; gap: .55rem; color: var(--ink); }
.w-title .i { color: var(--green); }
.w-more { margin-top: .6rem; }
.w-more button { padding: .55rem 1rem; font-size: .95rem; }
.empty-note { color: var(--muted); padding: .4rem 0; margin: 0; }

/* "Hoy en la mesa": una línea por comida */
.w-link {
  display: inline-flex; align-items: center; gap: .1rem; flex: none; padding: .35rem .4rem .35rem .75rem !important;
  border: 0 !important; background: transparent !important; color: var(--green-ink) !important; font-weight: 500; font-size: .88rem;
}
.w-link:hover { background: var(--green-mist) !important; }
.w-title small { color: var(--muted); font-size: .88rem; font-weight: 400; margin-left: .2rem; }
.meal-row {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: .7rem;
  padding: .55rem .5rem; border-radius: var(--r-sm);
}
.meal-row + .meal-row { border-top: 1px solid var(--line); border-radius: 0; }
.meal-row:hover { background: var(--green-mist); }
.meal-row:focus-visible { outline: 2px solid var(--green); }
.meal-row .m-ic { flex: none; color: var(--muted); display: grid; }
.meal-row .m-txt { flex: 1; min-width: 0; display: grid; }
.meal-row .m-name { font-size: inherit; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meal-row .m-ok { color: var(--green-ink); display: grid; flex: none; }
.meal-row .m-miss { flex: none; font-size: .88rem; font-weight: 500; padding: .2rem .65rem; border-radius: 999px; background: var(--terra-soft); color: var(--terra); white-space: nowrap; }
.meal-row .m-done { flex: none; font-size: .88rem; color: var(--muted); }
.meal-row.done .m-name { color: var(--muted); text-decoration: line-through; }

/* Tareas */
.chore { display: flex; align-items: center; gap: .85rem; padding: .55rem 0; }
.chore + .chore { border-top: 1px solid var(--line); }
.chore .emo { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green-ink); }
.chore .txt { flex: 1; min-width: 0; line-height: 1.3; }
.chore .txt strong { display: block; font-size: 1.1rem; font-weight: 500; overflow-wrap: anywhere; }
.chore .txt > span { color: var(--muted); font-size: .88rem; }
.chore .txt .avatar { color: #fff; margin: 0 .1rem; }
.chore .txt .late { color: var(--terra); font-weight: 500; }
.tick-round {
  width: 56px; height: 56px; padding: 0 !important; flex: none;
  background: var(--paper) !important; color: var(--green) !important; border: 2px solid var(--green) !important;
}
.chore.done .txt strong { color: var(--muted); text-decoration: line-through; }
.chore.done .emo { background: var(--paper-2); color: var(--muted); }
.chore.done .tick-round { background: var(--green) !important; color: var(--on-green) !important; }
/* En la tarjeta del inicio, el botón de marcar es más pequeño para que cada tarea ocupe menos alto */
.widget .chore { padding: .4rem 0; }
.widget .tick-round { width: 44px; height: 44px; border-width: 2px !important; }
.widget .tick-round .i { width: 22px; height: 22px; }
.widget .chore .emo { width: 38px; height: 38px; }
.widget .chore .emo .i { width: 24px; height: 24px; }

/* "Ojo con esto" */
.labels { display: flex; flex-wrap: wrap; gap: .5rem; }
.label-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px; font-size: .95rem; font-weight: 500; background: var(--honey-soft); color: var(--honey); }
.label-tag.bad { background: var(--berry-soft); color: var(--berry); }
.label-tag.low { background: var(--terra-soft); color: var(--terra); }
.label-tag.more { background: var(--paper-2); color: var(--muted); }
.ojo .w-title .i { color: var(--honey); }

/* Botones principales (del diseño anterior), sobre la foto */
.actions {
  grid-column: 1; grid-row: 2; display: grid; gap: .8rem;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* dos filas de 4, hasta donde empiezan las tarjetas */
}
.act {
  display: flex; align-items: center; gap: .9rem; min-height: 84px; padding: .9rem 1.1rem !important;
  border-radius: var(--r-lg) !important; text-align: left; border: 0 !important; position: relative; text-decoration: none;
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .6); transition: transform .08s, filter .15s;
}
.act:active { transform: scale(.98); }
.act:hover { filter: brightness(.97); }
.act .i { flex: none; }
.act .label { display: block; font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.act-chores { background: var(--green) !important; color: var(--on-green) !important; }
.act-list { background: var(--tint-honey) !important; color: var(--tint-honey-ink) !important; }
.act-cook { background: var(--tint-clay) !important; color: var(--tint-clay-ink) !important; }
.act-out { background: var(--green-soft) !important; color: var(--green-ink) !important; }
.act-photos { background: var(--tint-lilac) !important; color: var(--tint-lilac-ink) !important; }
.act-agenda { background: var(--tint-sky) !important; color: var(--tint-sky-ink) !important; }
.act-inv { background: var(--tint-teal) !important; color: var(--tint-teal-ink) !important; }
.act-inv.due::after {
  content: ""; position: absolute; top: .75rem; right: .8rem; width: 14px; height: 14px; border-radius: 50%;
  background: var(--alert); box-shadow: 0 0 0 3px var(--tint-teal);
}
.only-phone { display: none !important; }
.act-admin { justify-content: center; gap: .6rem; padding: 0 !important; background: color-mix(in srgb, var(--paper) 90%, transparent) !important; color: var(--tint-stone-ink) !important; }
/* En la tablet los botones van a la izquierda de las tarjetas: baldosas con el ícono arriba y el texto
   abajo, para que «Lista de compras» quepa en una línea aunque el botón sea angosto. */
@media (min-width: 761px) {
  .actions .act { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: .5rem; min-height: 104px; }
  .actions .act-admin { padding: .9rem 1.1rem !important; justify-content: space-between; }
}
.act .count {
  position: absolute; top: .6rem; right: .7rem; min-width: 1.9rem; height: 1.9rem; padding: 0 .45rem;
  border-radius: 999px; display: grid; place-items: center; font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--alert); color: #ffffff;
}

/* ---------------------------------------------------------------- pantallas internas */

.screen-head { display: flex; align-items: center; gap: 1rem; margin: .4rem 0 1.4rem; }
.screen-head h1 { font-size: 2.2rem; font-weight: 600; letter-spacing: -.02em; }
.back { width: 56px; height: 56px; padding: 0 !important; flex: none; background: var(--paper) !important; border-color: transparent !important; }
.bottom-bar {
  position: sticky; bottom: 0; padding: 1rem 0 .4rem; display: flex; gap: .8rem; flex-wrap: wrap;
  background: linear-gradient(transparent, var(--bg) 35%);
}
.big { font-size: 1.1rem !important; padding: 1rem 1.6rem !important; }

.sheet { background: var(--paper); border-radius: var(--r-lg); padding: .5rem 1.3rem; }
.sheet + .sheet { margin-top: 1rem; }
.sheet h3 { font-size: 1.1rem; font-weight: 600; color: var(--ink); margin: 1.1rem 0 .1rem; }
.item { display: flex; align-items: center; gap: .9rem; min-height: 4rem; padding: .45rem 0; }
.item + .item { border-top: 1px solid var(--line); }
.item .circle {
  width: 40px; height: 40px; padding: 0 !important; flex: none;
  border: 2px solid var(--line-strong) !important; background: var(--paper) !important; color: var(--on-green) !important;
}
.item.on .circle { background: var(--green) !important; border-color: var(--green) !important; }
.item .name { flex: 1; min-width: 0; font-size: 1.1rem; line-height: 1.25; overflow-wrap: anywhere; }
.item .name small { display: block; color: var(--muted); font-size: .88rem; }
.item.on .name { color: var(--muted); text-decoration: line-through; }
.item .qty { font-weight: 500; color: var(--green-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.item .rm { width: 44px; height: 44px; padding: 0 !important; border: 0 !important; background: none !important; color: var(--muted); }

.add-row { display: flex; gap: .7rem; margin-bottom: 1.1rem; }
.add-row input { flex: 1; border-color: transparent; background: var(--paper); }

.meal-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.meal-tabs button { background: var(--paper); border-color: transparent; font-size: 1rem; }
.meal-tabs button.on { background: var(--green); color: var(--on-green); }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.recipe-card {
  display: block; text-align: left; font-weight: 400; background: var(--paper) !important; padding: 1.2rem 1.3rem !important;
  border: 0 !important; border-radius: var(--r-lg) !important;
}
.recipe-card:hover { box-shadow: inset 0 0 0 2px var(--green); }
.recipe-card h3 { margin: 0 0 .5rem; font-size: 1.3rem; font-weight: 600; }
.recipe-card p { margin: .35rem 0 0; color: var(--muted); display: flex; gap: .4rem; align-items: center; }
.recipe-card .ok { color: var(--green-ink); font-weight: 500; }
.recipe-card .miss-txt { color: var(--terra); }

.servings { display: flex; align-items: center; gap: 1rem; font-size: 1.1rem; margin: -.4rem 0 1.2rem; flex-wrap: wrap; }
.servings button { width: 56px; height: 56px; padding: 0 !important; background: var(--paper); border-color: transparent; }
.servings strong { font-size: 2.2rem; font-weight: 500; min-width: 2.4rem; text-align: center; font-variant-numeric: tabular-nums; }
.servings .who { display: inline-flex; align-items: center; gap: .6rem; padding: .3rem .9rem .3rem .3rem; border-radius: 999px; background: var(--paper); }
.servings .who button { background: var(--paper-2); }
.cook-cols { display: grid; gap: 1rem; grid-template-columns: 1fr 1.3fr; align-items: start; }
.panel { background: var(--paper); border-radius: var(--r-lg); padding: 1.2rem 1.4rem; }
.panel-title { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 .4rem; }
.panel-title h2 { margin: 0; font-size: 1.6rem; }
.ing { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; }
.ing + .ing { border-top: 1px solid var(--line); }
.ing .name { flex: 1; min-width: 0; font-size: 1.3rem; line-height: 1.25; }
.ing .name small { display: block; color: var(--muted); font-size: .88rem; }
.ing .qty { font-weight: 500; font-size: 1.3rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: step; display: flex; gap: 1rem; font-size: 1.6rem; line-height: 1.5; margin-bottom: 1.1rem; }
.steps li::before {
  content: counter(step); flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-soft); color: var(--green-ink); font-weight: 600; font-size: 1rem;
}
.tip { background: var(--honey-soft); color: var(--honey); border-radius: 18px; padding: .8rem 1rem; display: flex; gap: .6rem; }
.chores-sheet .chore { padding: .8rem 0; }

/* ---------------------------------------------------------------- dentro de ventanas */

.hub dialog.m { font-size: 1.1rem; }
.hub .m-actions button { padding: .85rem 1.4rem; font-size: 1.1rem; }

.people { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.person {
  flex-direction: column; min-height: 132px; font-size: 1.1rem !important; border-radius: 24px !important;
  background: var(--paper-2) !important; border: 2px solid transparent !important;
}
.person .face { line-height: 1; display: grid; place-items: center; min-height: 64px; color: var(--green-ink); }
.person.turn { border-color: var(--green) !important; background: var(--green-mist) !important; }
.person .turn-tag { font-size: .78rem; color: var(--green-ink); font-weight: 500; }

.tiles { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: 46vh; overflow-y: auto; padding: 2px; }
.tile { min-height: 64px; font-size: 1rem !important; border-radius: 18px !important; background: var(--paper-2) !important; border-color: transparent !important; }
.tile.done { background: var(--green-soft) !important; color: var(--green-ink) !important; }
.search { position: relative; margin-bottom: .9rem; }
.search .i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search input { width: 100%; padding-left: 3rem !important; background: var(--paper-2); border-color: transparent; }

.shoot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
  min-height: 230px; border: 2px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--paper-2);
  cursor: pointer; text-align: center; font-size: 1.3rem; font-weight: 500; color: var(--green-ink);
  transition: border-color .15s, background .15s;
}
.shoot:hover { border-color: var(--green); background: var(--green-mist); }
.shoot small { font-weight: 400; font-size: .95rem; color: var(--muted); }
.thumbs { display: flex; gap: .7rem; flex-wrap: wrap; margin: .2rem 0 1rem; }
.thumbs img { width: 104px; height: 136px; object-fit: cover; border-radius: var(--r-sm); }
.receipt-head {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline;
  padding: .8rem 1rem; border-radius: var(--r); background: var(--paper-2); margin-bottom: .8rem; font-variant-numeric: tabular-nums;
}
.receipt-head strong { font-size: 1.1rem; font-weight: 600; }
.rline { display: grid; grid-template-columns: auto 1fr auto auto; gap: .6rem; align-items: center; padding: .55rem 0; }
.rline + .rline { border-top: 1px solid var(--line); }
.rline.off { opacity: .45; }
.rline .circle { width: 40px; height: 40px; padding: 0 !important; border: 2px solid var(--line-strong) !important; background: var(--paper) !important; color: var(--on-green) !important; }
.rline.on .circle { background: var(--green) !important; border-color: var(--green) !important; }
.rline .who { min-width: 0; }
.rline input.nm { width: 100%; font-size: 1.1rem; padding: .35rem .5rem; border-color: transparent; background: transparent; }
.rline input.nm:focus { border-color: var(--line); background: var(--paper); }
.rline .raw { display: block; font: .74rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; color: var(--muted); padding-left: .55rem; }
.rline .amt { display: flex; gap: .3rem; }
.rline .amt input { width: 5rem; padding: .4rem .5rem; font-size: 1rem; border-radius: 12px; }
.rline .price { font-weight: 500; min-width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.choices { display: grid; gap: .7rem; }
.choice {
  display: flex !important; align-items: center; gap: 1rem; text-align: left; justify-content: flex-start !important;
  padding: 1rem 1.2rem !important; border-radius: var(--r) !important; background: var(--paper-2) !important;
  border-color: transparent !important; color: var(--green-ink) !important; min-height: 84px;
}
.choice:hover { background: var(--green-mist) !important; }
.choice b { display: block; color: var(--ink); font-size: 1.1rem; font-weight: 600; }
.choice small { color: var(--muted); font-size: .95rem; }
.qr-box { display: grid; justify-items: center; gap: .6rem; text-align: left; }
.qr-box img { background: #fff; border-radius: var(--r); padding: 6px; box-shadow: 0 0 0 1px var(--line); }
.qr-steps { margin: .2rem 0 0; padding-left: 1.4rem; font-size: 1.1rem; line-height: 1.45; justify-self: stretch; }
.qr-status { display: flex; align-items: center; gap: .5rem; margin: .2rem 0 0; padding: .55rem .9rem; border-radius: 999px;
  background: var(--green-mist); color: var(--green-ink); font-weight: 500; }
.qr-warn { display: flex; gap: .5rem; margin: 0; padding: .7rem .9rem; border-radius: var(--r-sm); background: var(--honey-soft); color: var(--honey); }
.qr-url { text-align: center; margin: 0; word-break: break-all; }
.snap-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.snap-tabs { display: flex; gap: .4rem; margin-bottom: .5rem; }
.snap-tabs button { padding: .35rem .9rem !important; min-height: 0; border-radius: 999px !important; }
.snap-tabs button.on { background: var(--green) !important; color: var(--on-green) !important; border-color: var(--green) !important; }
.snap { position: relative; border-radius: 18px; overflow: hidden; background: #000; cursor: crosshair; touch-action: manipulation; }
.snap img { display: block; width: 100%; max-height: 56vh; object-fit: contain; user-select: none; }
.pin {
  position: absolute; transform: translate(-50%, -50%); width: 36px; height: 36px; min-height: 0; padding: 0 !important;
  border-radius: 50% !important; border: 3px solid #fff !important; background: var(--green) !important; color: #fff !important;
  font-weight: 700; font-size: .95rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); transition: transform .12s;
}
.pin.doubt { background: var(--honey-fill) !important; }
.pin.off { background: var(--muted) !important; opacity: .8; }
.pin.sel { transform: translate(-50%, -50%) scale(1.25); box-shadow: 0 0 0 4px rgba(255, 255, 255, .5), 0 2px 10px rgba(0, 0, 0, .5); z-index: 2; }
.snap-hint { margin: .45rem 0 0; }
.pin-edit {
  margin-top: .7rem; padding: .9rem 1rem; border-radius: 18px; background: var(--paper-2);
  display: grid; gap: .6rem; position: relative;
}
.pin-edit .pin-n {
  position: absolute; top: -12px; left: -8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green); color: #fff; font-weight: 700; border: 3px solid var(--paper);
}
.pin-amt { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.snap-list .rline { grid-template-columns: auto minmax(0, 1fr) auto; }
.rline.sel { background: var(--green-mist); border-radius: var(--r-sm); }
.nm-btn {
  all: unset; cursor: pointer; display: flex; align-items: center; gap: .55rem; font-size: 1.1rem; padding: .35rem .3rem; min-width: 0;
}
.nm-btn .nm-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nm-btn .nm-amt { margin-left: auto; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: .5rem; }
.nm-btn:focus-visible { outline: 2px solid var(--green); border-radius: var(--r-sm); }
.pin-edit input { width: 100%; min-width: 0; box-sizing: border-box; }
.pin-edit .field, .pin-amt > * { min-width: 0; }
.nm-btn .num {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700;
  background: var(--green-soft); color: var(--green-ink);
}
.rline.off .nm-btn .num { background: var(--paper-2); color: var(--muted); }
@media (max-width: 760px) { .snap-cols { grid-template-columns: 1fr; } }
.group-label { font-weight: 600; color: var(--muted); margin: 1.1rem 0 .2rem; font-size: .95rem; }

.gallery { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.gallery figure { margin: 0; position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-2); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery .rm {
  position: absolute; top: .4rem; right: .4rem; width: 40px; height: 40px; padding: 0 !important;
  background: rgba(0, 0, 0, .55) !important; color: #fff !important; border: 0 !important;
}
.gallery .add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; cursor: pointer;
  aspect-ratio: 4 / 3; border-radius: 18px; border: 2px dashed var(--line-strong); background: var(--paper-2);
  color: var(--green-ink); font-weight: 500; text-align: center; padding: .5rem;
}
.gallery .add:hover { border-color: var(--green); }

.loading { text-align: center; padding: 2.5rem 1rem; }
.loading .i { color: var(--green-ink); margin-bottom: .6rem; animation: breathe 1.6s ease-in-out infinite; }
.loading p { margin: .3rem 0; font-size: 1.1rem; }
@keyframes breathe { 50% { transform: scale(1.07); } }
.done-msg { text-align: center; padding: .5rem 0 1rem; }
.done-msg .mark { width: 88px; height: 88px; margin: 0 auto .9rem; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--on-green); animation: pop .35s var(--ease-out); }
.done-msg .mark.warn { background: var(--terra-soft); color: var(--terra); animation: none; }
.done-msg p { font-size: 1.1rem; margin: 0; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* ---------------------------------------------------------------- carga y error */

.skel-home { min-height: 100dvh; }
.state-block { text-align: center; padding: 3rem 1rem; background: var(--paper); border-radius: var(--r-lg); }
.state-block h2 { margin: .6rem 0 .3rem; }
.state-block p { color: var(--muted); margin: 0 0 1.2rem; }

/* ---------------------------------------------------------------- tamaños */

@media (max-width: 1000px) {
  .home { grid-template-columns: 1fr minmax(320px, 400px); }
  .clock { font-size: 5rem; }
  .cook-cols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .stage { position: absolute; height: 52vh; }
  .stage::after { background: linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .05) 60%); }
  .home { height: auto; min-height: 100dvh; display: flex; flex-direction: column; padding: 1rem; gap: 1rem; }
  .left { display: contents; }
  .time-block { order: 0; min-height: calc(52vh - 2rem); display: flex; flex-direction: column; justify-content: flex-end; }
  .invite { order: 1; }
  .actions { order: 2; }
  .widgets { order: 3; }
  .left .ojo { order: 4; margin-top: 0; max-width: none; }
  .only-phone { display: block !important; }
  .act-admin { gap: .6rem; }
  .clock { font-size: 4rem; }
  .hello { font-size: 1.6rem; }
  .today-line { font-size: 1rem; }
  .photo-caption { display: none; }
  .actions { grid-column: 1; grid-row: auto; grid-template-columns: 1fr 1fr; }
  .act { min-height: 84px; padding: .8rem !important; gap: .6rem; }
  .act-admin { min-height: 84px; }
  .widgets { grid-column: 1; grid-row: auto; max-height: none; overflow: visible; }
  .w-body { overflow: visible; }
  .widget { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .left .ojo { background: var(--paper); }
  body.hub:not(.at-home) main { padding: 1rem .9rem 2rem; }
  .screen-head h1 { font-size: 1.6rem; }
  .rline { grid-template-columns: auto 1fr; }
  .rline .amt, .rline .price { grid-column: 2; justify-self: start; }
}
/* Tablets acostadas bajitas (o con las barras del navegador): todo más compacto para caber sin scroll */
@media (min-width: 761px) and (max-height: 760px) {
  .home { gap: .8rem 1.2rem; padding: 1rem 1.2rem .9rem; }
  .left { gap: .6rem; }
  .clock { font-size: 5rem; }
  .hello { font-size: 1.6rem; margin-top: .3rem; }
  .today-line { font-size: 1.1rem; }
  .invite { padding: .4rem .5rem .4rem .8rem !important; }
  .actions { gap: .6rem; }
  .actions .act { min-height: 84px; padding: .7rem .9rem !important; gap: .3rem; }
  .actions .act-admin { padding: .7rem .9rem !important; }
  .widgets { gap: .7rem; }
  .widget { padding: .9rem 1rem 1rem; }
}
@media (min-width: 761px) and (max-height: 640px) {
  .clock { font-size: 4rem; }
  .today-line { font-size: 1rem; }
  .actions .act { min-height: 72px; }
  .act .label { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .stage img { transition: none; }
}

/* ---------------------------------------------------------------- voz */

.clock-row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.mic {
  display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem .7rem .95rem !important;
  background: var(--green) !important; color: var(--on-green) !important; border: 0 !important; font-weight: 600;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5);
}
.mic:hover { background: var(--green-hover) !important; }
.mic.on-photo { font-size: 1.1rem; padding: .85rem 1.4rem .85rem 1.1rem !important; text-shadow: none; }
.head-tools { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.handsfree { display: inline-flex; align-items: center; gap: .45rem; background: var(--paper) !important; border-color: transparent !important; }
.handsfree.on { background: var(--green-soft) !important; color: var(--green-ink) !important; box-shadow: inset 0 0 0 2px var(--green); }
.hf-hint { margin: -.6rem 0 1rem; color: var(--green-ink); }
.hf-hint[hidden] { display: none; }

.panel-title .step-nav { display: flex; align-items: center; gap: .4rem; font-size: .95rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.step-nav button { width: 44px; height: 44px; padding: 0 !important; background: var(--paper-2); border-color: transparent; }
.steps li { cursor: pointer; border-radius: 18px; padding: .5rem .6rem; margin-left: -.6rem; transition: background .2s var(--ease-out); }
.steps li.current { background: var(--green-mist); }
.steps li.current::before { background: var(--green); color: var(--on-green); }

.listen { text-align: center; padding: .3rem 0 .6rem; }
.mic-wave {
  width: 96px; height: 96px; margin: .4rem auto 1rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--green); color: var(--on-green); position: relative;
}
.mic-wave::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid var(--green);
  animation: ripple 1.4s var(--ease-out) infinite;
}
.mic-wave.idle { background: var(--paper-2); color: var(--muted); }
.mic-wave.idle::after { display: none; }
@keyframes ripple { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.heard { font-size: 1.3rem; font-weight: 500; margin: 0; min-height: 1.6em; }
.reply { font-size: 1.1rem; color: var(--green-ink); background: var(--green-mist); border-radius: 18px; padding: .8rem 1rem; margin: 1rem 0 0; }

#timers { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 150; display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; pointer-events: none; }
.timer-chip {
  pointer-events: auto; display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .5rem .45rem .95rem;
  border-radius: 999px; background: var(--ink); color: var(--paper); box-shadow: var(--float); font-weight: 500;
}
.timer-chip .t-left { font-variant-numeric: tabular-nums; font-size: 1.1rem; font-weight: 600; min-width: 3.2rem; }
.timer-chip .t-x { width: 36px; height: 36px; padding: 0 !important; background: rgba(255, 255, 255, .14) !important; color: inherit !important; border: 0 !important; }
body.at-home #toast { top: 4.4rem; }
.done-msg .mark.ring { background: var(--honey-fill); color: #1f1300; animation: shake .6s ease-in-out infinite; }
@keyframes shake { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }

@media (max-width: 760px) {
  .mic.on-photo { padding: .6rem 1rem .6rem .8rem !important; font-size: 1rem; }
  .screen-head { flex-wrap: wrap; }
  .head-tools { width: 100%; justify-content: flex-end; margin-top: -.4rem; }
  .handsfree span, .head-tools .mic span { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mic-wave::after, .done-msg .mark.ring { animation: none; }
}

/* Palabra de activación */
/* Escanear: junto a «Hablar», sobre la foto */
.scan-pill {
  display: inline-flex; align-items: center; gap: .5rem; font-size: 1.1rem; font-weight: 600;
  padding: .85rem 1.4rem .85rem 1.1rem !important; border: 0 !important; text-shadow: none;
  background: color-mix(in srgb, var(--paper) 94%, transparent) !important; color: var(--green-ink) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5);
}
.scan-pill:hover { background: var(--paper) !important; }
/* Sobre la foto, al lado del reloj: Hablar, Escanear y Logros, solo con su dibujo */
.round-acts { display: flex; align-items: center; gap: .8rem; }
.round-acts > button, .round-acts > .mic.on-photo { width: 64px; height: 64px; padding: 0 !important; justify-content: center; border-radius: 50% !important; }
.star-pill {
  display: inline-flex; align-items: center; border: 0 !important;
  background: color-mix(in srgb, var(--paper) 94%, transparent) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5);
}
.star-pill .kstar { width: 46px; transition: transform .2s var(--ease-out); }
.star-pill:hover .kstar { transform: scale(1.08) rotate(-6deg); }
.edit-round {
  width: 48px; height: 48px; padding: 0 !important; flex: none; border: 0 !important;
  background: var(--paper-2) !important; color: var(--muted) !important;
}
@media (max-width: 760px) {
  .scan-pill { font-size: 1rem; padding: .6rem 1rem .6rem .8rem !important; }
  .round-acts > button, .round-acts > .mic.on-photo { width: 52px; height: 52px; padding: 0 !important; }
  .star-pill .kstar { width: 38px; }
  body.at-home #toast { top: auto; bottom: 1.4rem; right: 1rem; left: 1rem; max-width: none; text-align: center; }
}

/* Horario de cada tarea (pantalla «Tareas de la casa») */
.chore .txt .when { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; color: var(--muted); font-size: .95rem; margin-top: .15rem; }

/* Agenda de la familia */
.ev-row { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: .8rem; width: 100%; padding: .55rem 0; }
.ev-row:focus-visible { outline: 2px solid var(--green); border-radius: 12px; }
.widget .ev-row + .ev-row { border-top: 1px solid var(--line); }
.hub .home-ev {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: .05rem; width: 100%; min-width: 0;
  padding: .3rem 0 .3rem .75rem; border-left: 3px solid var(--c, var(--green));
}
.home-ev + .home-ev { margin-top: .35rem; }
.home-ev:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.home-ev strong { font-weight: 600; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-ev span { font-size: .9rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.home-ev span b { font-weight: 600; color: var(--ink); }
.home-ev[data-cat="salud"] { --c: var(--tint-berry-ink); }
.home-ev[data-cat="colegio"] { --c: var(--tint-sky-ink); }
.home-ev[data-cat="cumpleaños"] { --c: var(--tint-lilac-ink); }
.home-ev[data-cat="pagos"] { --c: var(--tint-honey-ink); }
.home-ev[data-cat="otro"] { --c: var(--tint-stone-ink); }
.ev-ic, .ev-mark { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.ev-mark { width: 88px; height: 88px; }
.ev-txt { display: grid; gap: .1rem; min-width: 0; }
.ev-txt strong { font-weight: 600; font-size: 1.1rem; overflow-wrap: anywhere; }
.ev-txt > span { color: var(--muted); display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.ev-txt .avatar { color: #fff; }
.ev-txt .late { color: var(--berry); font-weight: 500; }
.ev-day { margin-bottom: 1rem; }
.ev-day h2 { font-size: 1.3rem; margin: 0 0 .4rem; }
.ev-day h2 small { color: var(--muted); font-weight: 400; font-size: .95rem; margin-left: .4rem; }
.ev-line { display: flex; align-items: center; gap: .8rem; }
.ev-line + .ev-line { border-top: 1px solid var(--line); }
.cat-salud, .done-msg .mark.cat-salud { background: var(--tint-berry); color: var(--tint-berry-ink); }
.cat-colegio, .done-msg .mark.cat-colegio { background: var(--tint-sky); color: var(--tint-sky-ink); }
.cat-cumple, .done-msg .mark.cat-cumple { background: var(--tint-lilac); color: var(--tint-lilac-ink); }
.cat-pagos, .done-msg .mark.cat-pagos { background: var(--tint-honey); color: var(--tint-honey-ink); }
.cat-familia, .done-msg .mark.cat-familia { background: var(--green-soft); color: var(--green-ink); }
.cat-otro, .done-msg .mark.cat-otro { background: var(--tint-stone); color: var(--tint-stone-ink); }
#evf .seg label > span { display: inline-flex; align-items: center; gap: .35rem; }
#evf .g-note { display: flex; align-items: center; gap: .4rem; margin: 0; }
.ev-line.is-done .ev-txt strong { text-decoration: line-through; color: var(--muted); }

/* La agenda como calendario: mes (con el día elegido al lado), semana o lista */
.cal-bar { margin-bottom: 1rem; }
.cal-tools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cal-seg { display: flex; gap: .3rem; padding: .3rem; border-radius: 999px; background: var(--paper); }
.cal-seg button {
  min-height: 46px; padding: .4rem 1.1rem !important; border: 0 !important; border-radius: 999px;
  background: transparent !important; color: var(--muted) !important; font-weight: 500;
}
.cal-seg button.on { background: var(--green) !important; color: var(--on-green) !important; }
.g-chip {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 46px; border-radius: 999px;
  background: var(--paper) !important; border-color: transparent !important; color: var(--muted); font-weight: 500; font-size: .95rem;
}
.g-chip.bad { color: var(--tint-berry-ink); background: var(--tint-berry) !important; }

.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: 1rem; align-items: start; }
.cal-month {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(var(--weeks), minmax(6.4rem, 1fr));
  gap: 4px; background: var(--paper); border-radius: var(--r-lg); padding: .6rem; touch-action: pan-y;
  min-height: calc(100vh - 16rem);
}
.cal-wd { font-size: .88rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .2rem .45rem .35rem; }
.hub .cal-cell {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: .3rem .3rem .4rem; border-radius: var(--r-sm); background: var(--paper-2);
}
.cal-cell:hover { box-shadow: inset 0 0 0 2px var(--line-strong); }
.cal-cell:focus-visible { outline: 3px solid color-mix(in srgb, var(--green) 45%, transparent); }
.cal-cell.sel { box-shadow: inset 0 0 0 2px var(--green); background: var(--green-mist); }
.cal-cell.out { background: transparent; }
.cal-cell.out .cal-num, .cal-cell.past:not(.sel) .cal-num { color: var(--muted); }
.cal-cell.out .cal-ev { opacity: .6; }
.cal-num {
  align-self: flex-start; min-width: 1.9rem; height: 1.9rem; padding: 0 .3rem; border-radius: 999px; display: grid; place-items: center;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.cal-cell.today .cal-num { background: var(--green); color: var(--on-green); }
.cal-ev {
  display: block; font-size: .82rem; line-height: 1.3; padding: .12rem .4rem; border-radius: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500;
}
.cal-ev.timed { padding-left: .2rem; color: var(--ink); font-weight: 400; }
.cal-ev.timed i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .3rem; vertical-align: .05em; background: currentColor; }
.cal-ev.timed i.cat-salud { background: var(--tint-berry-ink); }
.cal-ev.timed i.cat-colegio { background: var(--tint-sky-ink); }
.cal-ev.timed i.cat-cumple { background: var(--tint-lilac-ink); }
.cal-ev.timed i.cat-pagos { background: var(--tint-honey-ink); }
.cal-ev.timed i.cat-familia { background: var(--green); }
.cal-ev.timed i.cat-otro { background: var(--tint-stone-ink); }
.cal-ev.timed b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-ev.done { text-decoration: line-through; opacity: .55; }
.cal-more { font-size: .8rem; color: var(--muted); padding: 0 .4rem; }
.cal-dots { display: none; }

.cal-side { padding: 1rem; position: sticky; top: 1rem; }
.cal-side-head, .cal-col-head { display: flex; align-items: center; gap: .6rem; }
.cal-side-head { justify-content: space-between; margin-bottom: .3rem; }
.cal-side-head h2 { font-size: 1.4rem; font-weight: 600; margin: 0; display: grid; }
.cal-side-head h2 small { color: var(--muted); font-weight: 400; font-size: 1rem; }
.cal-side-head .round, .cal-col-head .round {
  flex: none; width: 48px; height: 48px; padding: 0 !important; border: 0 !important; border-radius: 50%;
  background: var(--green-soft) !important; color: var(--green-ink) !important;
}
.cal-side { display: grid; gap: .5rem; }
.day-ev {
  --c: var(--green); display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: start; gap: .7rem;
  padding: .7rem .8rem .7rem .9rem; border-radius: var(--r-sm); background: var(--paper-2); box-shadow: inset 4px 0 0 var(--c);
}
.day-ev[data-cat="salud"] { --c: var(--tint-berry-ink); }
.day-ev[data-cat="colegio"] { --c: var(--tint-sky-ink); }
.day-ev[data-cat="cumpleaños"] { --c: var(--tint-lilac-ink); }
.day-ev[data-cat="pagos"] { --c: var(--tint-honey-ink); }
.day-ev[data-cat="otro"] { --c: var(--tint-stone-ink); }
.de-time { display: grid; justify-items: start; line-height: 1.15; padding-top: .1rem; font-variant-numeric: tabular-nums; }
.de-time b { font-size: 1.1rem; font-weight: 600; }
.de-time small { font-size: .8rem; color: var(--muted); }
.hub .de-body { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: .25rem; min-width: 0; }
.de-body:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.de-body strong { font-size: 1.05rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.de-meta { display: flex; flex-wrap: wrap; gap: .15rem .7rem; font-size: .88rem; color: var(--muted); }
.de-meta > span { display: inline-flex; align-items: center; gap: .3rem; }
.de-meta .avatar { color: #fff; }
.hub .de-tick {
  width: 36px; height: 36px; margin-top: .5rem; padding: 0 !important; display: grid; place-items: center; border-radius: 50%;
  background: transparent !important; border: 2px solid var(--line-strong) !important; color: var(--muted) !important;
}
.hub .de-tick:hover { border-color: var(--green) !important; color: var(--green-ink) !important; }
.day-ev.done { opacity: .6; }
.day-ev.done strong { text-decoration: line-through; }

.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; align-items: stretch; }
.cal-col { background: var(--paper); border-radius: var(--r); padding: .6rem .5rem .8rem; min-height: calc(100vh - 16rem); display: flex; flex-direction: column; gap: .4rem; }
.cal-col.past { opacity: .6; }
.cal-col-head { justify-content: space-between; margin-bottom: .2rem; padding-left: .2rem; }
.cal-col-head h2 { font-size: 1rem; font-weight: 600; margin: 0; color: var(--muted); display: flex; align-items: center; gap: .3rem; }
.cal-col-head h2 .cal-num { color: var(--ink); font-size: 1.15rem; }
.cal-col.today .cal-num { background: var(--green); color: var(--on-green); }
.cal-col-head .round { width: 40px; height: 40px; }
.hub .cal-card {
  display: grid; gap: .15rem; justify-items: start; text-align: left; width: 100%; padding: .5rem .6rem !important;
  border: 0 !important; border-radius: var(--r-sm); font-weight: 400;
}
.cal-card small { font-size: .82rem; font-weight: 500; opacity: .9; font-variant-numeric: tabular-nums; }
.cal-card strong { font-size: .98rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.cal-card span { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; }
.cal-card .avatar { color: #fff; }
.cal-card.done strong { text-decoration: line-through; }
.cal-card.done { opacity: .6; }

@media (max-width: 1100px) {
  .cal-week { grid-template-columns: 1fr; }
  .cal-col { min-height: 0; }
}
@media (max-width: 900px) {
  .cal-wrap { grid-template-columns: 1fr; }
  .cal-side { position: static; }
  .cal-month { min-height: 0; grid-template-rows: auto repeat(var(--weeks), minmax(3.6rem, auto)); padding: .4rem; gap: 2px; }
  .cal-ev, .cal-more { display: none; }
  .cal-cell { align-items: center; }
  .cal-num { align-self: center; }
  .cal-dots { display: flex; gap: 3px; justify-content: center; }
  .cal-dots i { width: 6px; height: 6px; border-radius: 50%; }
  .cal-dots i.cat-salud { background: var(--tint-berry-ink); }
  .cal-dots i.cat-colegio { background: var(--tint-sky-ink); }
  .cal-dots i.cat-cumple { background: var(--tint-lilac-ink); }
  .cal-dots i.cat-pagos { background: var(--tint-honey-ink); }
  .cal-dots i.cat-familia { background: var(--green); }
  .cal-dots i.cat-otro { background: var(--tint-stone-ink); }
  .cal-tools { width: 100%; }
  .cal-seg { flex: 1; }
  .cal-seg button { flex: 1; }
}

/* ¿Qué hay en la casa? (revisar el inventario por grupos) */
.inv-intro { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin: -.4rem 0 1.3rem; }
.inv-intro p { margin: 0; font-size: 1.3rem; font-weight: 400; max-width: 36rem; }
.inv-progress { display: flex; align-items: center; gap: .9rem; min-width: min(100%, 22rem); }
.inv-progress .bar { flex: 1; height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; }
.inv-progress .bar span { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.inv-progress b { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; white-space: nowrap; color: var(--green-ink); font-variant-numeric: tabular-nums; }

.inv-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.inv-card {
  position: relative; display: flex !important; flex-direction: column; align-items: flex-start; gap: .25rem;
  min-height: 170px; padding: 1.2rem 1.25rem !important; text-align: left; font-weight: 400;
  background: var(--paper) !important; border: 0 !important; border-radius: var(--r-lg) !important; color: var(--ink) !important;
  transition: transform .08s, box-shadow .15s;
}
.inv-card:hover { box-shadow: inset 0 0 0 2px var(--g-ink); }
.inv-card:active { transform: scale(.98); }
.inv-ic { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; margin-bottom: .55rem; background: var(--g-bg); color: var(--g-ink); }
.inv-name { font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.inv-sub { color: var(--muted); font-size: 1rem; font-variant-numeric: tabular-nums; }
.inv-sub .gone { color: var(--berry); font-weight: 500; }
.inv-card.empty .inv-ic { background: var(--paper-2); color: var(--muted); }
.inv-card.empty .inv-name { color: var(--muted); }
.inv-card.seen { box-shadow: inset 0 0 0 2px var(--green); }
.inv-seen {
  position: absolute; top: .9rem; right: .9rem; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--green); color: var(--on-green);
}

.inv-help { margin: -.6rem 0 1.1rem; color: var(--muted); font-size: 1rem; max-width: 52rem; }
.inv-help b { color: var(--ink); font-weight: 500; }
.inv-sheet { padding: .3rem 1.1rem; }
.inv-row { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; }
.inv-row + .inv-row { border-top: 1px solid var(--line); }
.inv-what {
  all: unset; box-sizing: border-box; cursor: pointer; flex: 1; min-width: 0; display: grid; gap: .1rem;
  padding: .3rem .4rem; margin-left: -.4rem; border-radius: 12px;
}
.inv-what:hover { background: var(--paper-2); }
.inv-what:focus-visible { outline: 2px solid var(--green); }
.inv-what .nm { font-size: 1.3rem; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.inv-what .amt { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: 1rem; font-variant-numeric: tabular-nums; }
.inv-what .amt .i { opacity: .7; }
.inv-row.s-out .nm { color: var(--muted); }
.inv-row.s-out .amt { color: var(--berry); font-weight: 500; }
.inv-row.s-low .amt { color: var(--honey); font-weight: 500; }

/* Hay / Poco / Se acabó: tres botones grandes; el elegido se llena de su color */
.inv-seg { display: flex; flex: none; gap: .4rem; padding: .3rem; border-radius: 999px; background: var(--paper-2); }
.inv-seg button {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 52px; padding: .5rem 1.05rem !important; white-space: nowrap;
  border: 0 !important; background: transparent !important; color: var(--muted) !important; font-weight: 500; font-size: 1rem;
}
.inv-seg button:hover { background: var(--paper) !important; color: var(--ink) !important; }
.inv-seg .st-ok.on { background: var(--green) !important; color: var(--on-green) !important; }
.inv-seg .st-low.on { background: var(--honey-fill) !important; color: #1f1300 !important; }
.inv-seg .st-out.on { background: var(--berry) !important; color: var(--paper) !important; }

.inv-add {
  display: flex !important; align-items: center; justify-content: center; gap: .6rem; width: 100%; margin-top: 1rem;
  min-height: 64px; border: 2px dashed var(--line-strong) !important; background: transparent !important;
  border-radius: var(--r-lg) !important; color: var(--green-ink) !important; font-size: 1.1rem;
}
.inv-add:hover { border-color: var(--green) !important; background: var(--green-mist) !important; }
.inv-count { align-self: center; color: var(--muted); font-variant-numeric: tabular-nums; }

.inv-form { display: grid; gap: .9rem; }
.inv-form-amt { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.inv-form input, .inv-form select { width: 100%; box-sizing: border-box; }
.inv-kinds { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.inv-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.inv-kinds span { display: inline-block; padding: .6rem 1.1rem; border-radius: 999px; background: var(--paper-2); cursor: pointer; }
.inv-kinds input:checked + span { background: var(--green); color: var(--on-green); }
.inv-kinds input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }

@media (max-width: 760px) {
  .inv-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .inv-card { min-height: 140px; padding: 1rem !important; }
  .inv-ic { width: 56px; height: 56px; }
  .inv-name { font-size: 1.1rem; }
  .inv-row { flex-direction: column; align-items: stretch; gap: .5rem; }
  .inv-seg { justify-content: stretch; }
  .inv-seg button { flex: 1; justify-content: center; gap: .25rem; padding: .5rem .3rem !important; font-size: .88rem; }
}
#evf .seg .avatar { color: #fff; }

/* Menú de la semana (página propia, se entra desde «Hoy en la mesa») */
.menu-bar { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; flex-wrap: wrap; margin: -.4rem 0 1.2rem; }
.week-nav { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.week-nav strong { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.week-nav .round { width: 52px; height: 52px; padding: 0 !important; background: var(--paper) !important; border-color: transparent !important; }
.menu-tools { display: flex; gap: .6rem; flex-wrap: wrap; }
.menu-tools button { display: inline-flex; align-items: center; gap: .45rem; }
.menu-tools button:not(.primary), .week-nav #now { background: var(--paper) !important; border-color: transparent !important; }

.week { display: grid; gap: .9rem; }
.menu-day { background: var(--paper); border-radius: var(--r-lg); padding: .9rem 1.1rem 1.1rem; display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: start; }
.menu-day h2 { margin: .35rem 0 0; font-size: 1.3rem; font-weight: 600; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; }
.menu-day h2 small { color: var(--muted); font-weight: 400; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.menu-day.today { box-shadow: inset 0 0 0 2px var(--green); }
.menu-day.past { opacity: .6; }
.today-tag { font-size: .88rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; background: var(--green); color: var(--on-green); }
.slots { display: grid; gap: .8rem; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.slot { display: grid; gap: .4rem; align-content: start; }
.slot-meal { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.plate {
  display: grid !important; gap: .15rem; text-align: left; justify-items: start; justify-content: stretch; align-content: start; font-weight: 400; min-height: 84px;
  padding: .75rem .9rem !important; border-radius: var(--r) !important; background: var(--paper-2) !important; border: 0 !important; color: var(--ink) !important;
}
.plate:hover { box-shadow: inset 0 0 0 2px var(--green); }
.plate .p-name { font-size: 1rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.plate .p-state, .entry-state { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; color: var(--muted); }
.plate .p-state.ok, .entry-state.ok { color: var(--green-ink); }
.plate .p-state.miss, .entry-state.miss { color: var(--terra); }
.plate .p-who { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; color: var(--muted); }
.plate.done .p-name { text-decoration: line-through; color: var(--muted); }
.plate.add {
  display: flex !important; align-items: center; justify-content: center; align-content: center; gap: .4rem; color: var(--green-ink) !important;
  background: transparent !important; border: 2px dashed var(--line-strong) !important; font-weight: 500;
}
.entry-state { font-size: inherit; margin: .3rem 0 0; }
.entry-cook { width: 100%; justify-content: center; display: flex !important; align-items: center; gap: .5rem; margin-top: 1rem; }
/* Elegir receta para el menú: buscar, filtrar y una lista compacta */
.pick-tools { display: grid; gap: .6rem; margin-bottom: .6rem; }
.pick-tools .search { margin: 0; }
.pick-tools .who-chips { margin: 0; }
.pick-list { max-height: 52vh; overflow-y: auto; scrollbar-width: none; margin: 0 -.3rem; padding: 0 .3rem; }
.pick-list::-webkit-scrollbar { display: none; }
.pick-row {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: .8rem;
  padding: .65rem .5rem; border-radius: var(--r-sm);
}
.pick-row + .pick-row { border-top: 1px solid var(--line); border-radius: 0; }
.pick-row:hover { background: var(--green-mist); }
.pick-row:focus-visible { outline: 2px solid var(--green); }
.pick-row .pr-ic { flex: none; color: var(--green-ink); display: grid; }
.pick-row .pr-txt { flex: 1; min-width: 0; display: grid; }
.pick-row .pr-txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-row .pr-txt small { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-row small.ok { color: var(--green-ink); }
.pick-row small.miss { color: var(--terra); }
.ago {
  flex: none; display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600;
  padding: .2rem .6rem; border-radius: 999px; background: var(--paper-2); color: var(--muted); white-space: nowrap;
}
.ago.recent { background: var(--terra-soft); color: var(--terra); }
.ago.now { background: var(--green-soft); color: var(--green-ink); }
@media (max-width: 760px) {
  .menu-day { grid-template-columns: 1fr; gap: .5rem; }
  .slots { grid-template-columns: 1fr; }
  .menu-bar { margin-top: 0; }
}

/* Armar el menú (asistente de cuatro pasos) */
.wiz-steps { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.6rem 0 1.3rem; }
.wiz-step {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem 1rem .35rem .35rem !important;
  border-radius: 999px !important; background: var(--paper) !important; border-color: transparent !important; color: var(--muted) !important; font-weight: 500;
}
.wiz-step:disabled { opacity: 1; cursor: default; }
.wiz-step .n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.wiz-step.now { color: var(--ink) !important; box-shadow: inset 0 0 0 2px var(--green); }
.wiz-step.now .n { background: var(--green); color: var(--on-green); }
.wiz-step.done { color: var(--green-ink) !important; }
.wiz-step.done .n { background: var(--green-soft); color: var(--green-ink); }
.wiz-lead { margin: 0 0 1.2rem; font-size: 1.3rem; max-width: 52rem; }
.wiz-lead b { font-weight: 600; }
.wiz-sub { margin: 1.6rem 0 .8rem; font-size: 1.1rem; font-weight: 600; color: var(--muted); }
.wiz-help { margin: 0 0 .8rem; color: var(--muted); }

/* Paso 2: la semana en cuadrícula, un toque por comida */
.when {
  display: grid; grid-template-columns: minmax(6.5rem, auto) repeat(var(--n), minmax(0, 1fr)); gap: .5rem; align-items: stretch;
  background: var(--paper); border-radius: var(--r-lg); padding: .9rem 1rem;
}
.when-meal, .when-day {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 52px;
  background: transparent !important; border-color: transparent !important; font-weight: 600; color: var(--ink);
}
.when-meal { font-size: .95rem; }
.when-day { justify-content: flex-start; font-size: 1.1rem; }
.when-day small { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.when-cell {
  min-height: 64px; display: grid !important; place-items: center; align-content: center; gap: .1rem; padding: .3rem !important;
  border-radius: var(--r-sm) !important; border: 0 !important; background: var(--paper-2) !important; color: var(--on-green) !important;
}
.when-cell.on { background: var(--green) !important; }
.when-cell small { font-size: .78rem; font-weight: 600; }
.when-cell.on.fixed { background: var(--green-soft) !important; color: var(--green-ink) !important; }
.when-cell:disabled, .when-day:disabled { opacity: .35; }
.wiz-keep { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; font-size: 1.1rem; cursor: pointer; }
.wiz-keep input { width: 1.5rem; height: 1.5rem; accent-color: var(--green); }

/* Paso 3: el deslizador «De la casa ↔ Ideas nuevas» y los platos de la semana */
.mix { background: var(--paper); border-radius: var(--r-lg); padding: 1rem 1.3rem 1.1rem; margin-bottom: 1rem; display: grid; gap: .4rem; }
.mix-ends { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.1rem; font-weight: 600; }
.mix-ends span { display: inline-flex; align-items: center; gap: .4rem; }
.mix-ends span:first-child { color: var(--green-ink); }
.mix-ends span:last-child { color: var(--tint-lilac-ink); }
.mix input[type="range"] { width: 100%; height: 48px; margin: 0; accent-color: var(--green); cursor: pointer; }
.mix input[type="range"]:disabled { cursor: default; opacity: .45; }
.mix-ticks { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; }
.mix-ticks button {
  min-height: 44px; padding: .3rem !important; font-size: .88rem; font-weight: 500; line-height: 1.2;
  background: transparent !important; border-color: transparent !important; color: var(--muted);
}
.mix-ticks button.on { background: var(--green-soft) !important; color: var(--green-ink); font-weight: 600; }
.mix-note { margin: .3rem 0 0; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.mix-note b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mix.off p { margin: 0; display: flex; align-items: center; gap: .5rem; color: var(--muted); }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--line-strong); border-top-color: var(--green); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.dishes { display: grid; gap: .8rem; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.dishes > .dish { grid-column: var(--col); }
.dish {
  display: grid !important; gap: .2rem; align-content: start; justify-items: start; justify-content: stretch; text-align: left; min-height: 128px; font-weight: 400;
  padding: .8rem .95rem !important; border-radius: var(--r) !important; background: var(--paper-2) !important; border: 0 !important; color: var(--ink) !important;
}
button.dish:hover { box-shadow: inset 0 0 0 2px var(--green); }
.dish .d-top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .15rem; }
.dish .d-meal { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dish .d-name { font-size: 1.1rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.dish .d-name.muted { color: var(--muted); }
.dish .d-core { font-size: .88rem; color: var(--muted); }
.dish .d-state { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; }
.dish .d-state.ok { color: var(--green-ink); }
.dish .d-state.miss { color: var(--terra); }
.dish .d-again { font-size: .88rem; font-weight: 500; color: var(--terra); }
.dish .d-salad { width: 100%; display: flex; align-items: center; gap: .35rem; margin-top: .3rem; padding-top: .45rem; border-top: 1px dashed var(--line-strong); font-size: .95rem; color: var(--green-ink); }
.dish .d-lock { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 600; color: var(--muted); }
.dish.empty { background: transparent !important; box-shadow: inset 0 0 0 2px var(--line-strong); }
.dish.fixed { opacity: .7; }
.src { flex: none; display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--paper); color: var(--muted); }
.src.house { background: var(--green-soft); color: var(--green-ink); }
.src.ai { background: var(--tint-lilac); color: var(--tint-lilac-ink); }
.pick-h { display: flex; align-items: center; gap: .4rem; margin: 1rem 0 .3rem; font-size: 1.1rem; font-weight: 600; }
.pick-list.short { max-height: none; }
.pick-row.on { background: var(--green-mist); }
.pick-row.on .pr-ic { color: var(--green); }

/* ¿Les gustó? (después de cocinar una idea nueva) */
.liked-opts { display: grid; gap: .6rem; margin-top: 1rem; }
.liked-opts button { display: flex !important; align-items: center; justify-content: center; gap: .5rem; min-height: 64px; }

/* Paso 4: resumen antes de guardar */
.wiz-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.sum-tile { background: var(--paper); border-radius: var(--r-lg); padding: .9rem 1.1rem; display: grid; }
.sum-tile b { font-size: 2.2rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sum-tile span { color: var(--muted); }
.sum-tile.ai b { color: var(--tint-lilac-ink); }
.sum-tile.buy b { color: var(--terra); }
.wiz-note { padding: .2rem 1.3rem .9rem; }
.wiz-note h3 { display: flex; align-items: center; gap: .4rem; }
.wiz-note p { margin: .3rem 0 0; }
.wiz-note.warn h3 { color: var(--honey); }
.wiz-list { margin-top: 1rem; padding: .3rem 1.3rem; }
.wl-row { display: grid; grid-template-columns: 5rem 9rem 1fr; gap: .8rem; align-items: center; padding: .65rem 0; }
.wl-row + .wl-row { border-top: 1px solid var(--line); }
.wl-day { font-weight: 600; font-variant-numeric: tabular-nums; }
.wl-meal { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); }
.wl-dish { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-weight: 500; }
.wl-dish small { color: var(--muted); font-weight: 400; font-size: .95rem; }

@media (max-width: 760px) {
  .when { grid-template-columns: 4.2rem repeat(var(--n), minmax(0, 1fr)); padding: .6rem; gap: .35rem; }
  .when-meal { font-size: 0; }  /* en el celular, solo el ícono */
  .when-meal .i { width: 22px; height: 22px; }
  .when-day { font-size: 1rem; padding: 0 !important; }
  .wiz-step { font-size: 0; padding: .3rem !important; }
  .wiz-step .n { font-size: 1rem; }
  .wiz-step.now { font-size: 1rem; padding-right: 1rem !important; }
  .wiz-bar { flex-wrap: nowrap; }
  .wiz-bar .primary { flex: 1; justify-content: center; }
  .wiz-bar #w-back .lbl { display: none; }
  .mix-ticks button { font-size: .78rem; }
  .wiz-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dishes { grid-template-columns: 1fr; }
  .dishes > .dish { grid-column: auto; }
  .wl-row { grid-template-columns: 4rem 1fr; }
  .wl-meal { display: none; }
}
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* Tareas: filtrar por persona */
.who-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.4rem 0 1rem; }
.who-chip {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .4rem .6rem .4rem .9rem !important;
  background: var(--paper) !important; border: 2px solid transparent !important; color: var(--ink) !important; font-weight: 500;
}
.who-chip:has(.avatar) { padding-left: .45rem !important; }
.who-chip .avatar { color: #ffffff; }
.who-chip .n {
  min-width: 1.7rem; height: 1.7rem; padding: 0 .4rem; border-radius: 999px; display: grid; place-items: center;
  background: var(--paper-2); color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums;
}
.who-chip.on { border-color: var(--green) !important; background: var(--green-mist) !important; color: var(--green-ink) !important; }
.who-chip.on .n { background: var(--green); color: var(--on-green); }

/* ¿Qué falta?: primero la categoría, luego el producto */
.ro-groups { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); max-height: 46vh; overflow-y: auto; scrollbar-width: none; padding: 2px; }
.ro-group {
  display: flex !important; align-items: center; gap: .7rem; min-height: 64px; padding: .5rem .8rem .5rem .5rem !important;
  border-radius: var(--r) !important; background: var(--paper-2) !important; border: 0 !important; color: var(--ink) !important; text-align: left;
}
.ro-group:hover { box-shadow: inset 0 0 0 2px var(--g-ink); }
.ro-group .inv-ic { width: 46px; height: 46px; margin: 0; flex: none; }
.ro-group .nm { flex: 1; min-width: 0; font-weight: 500; }
.ro-group .n { flex: none; min-width: 1.7rem; height: 1.7rem; padding: 0 .4rem; border-radius: 999px; display: grid; place-items: center;
  background: var(--paper); color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.ro-group .n .i { color: var(--green-ink); }
.ro-crumb { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.ro-crumb .inv-ic { width: 38px; height: 38px; margin: 0; background: var(--g-bg); color: var(--g-ink); }
.ro-crumb b { font-weight: 600; }
.ro-back {
  display: inline-flex !important; align-items: center; gap: .3rem; padding: .45rem .9rem .45rem .6rem !important;
  background: var(--paper-2) !important; border: 0 !important; color: var(--ink) !important; font-weight: 500; margin-right: .3rem;
}

/* ---------------------------------------------------------------- logros de los niños
   Estrellas en miel (--honey-fill): la única pieza "dorada" de la app, para que se note que es un
   premio. Todo grande y con dibujos: lo usan niños que todavía no leen bien. */

.kids-btn { display: inline-flex; align-items: center; gap: .45rem; background: var(--paper) !important; border-color: transparent !important; font-weight: 600; }
.kids-btn .kstar { width: 100%; }
.kids-btn > .i { color: var(--tint-indigo-ink); }
.kids-btn.plain { width: 56px; height: 56px; padding: 0 !important; }
.kids-btn.plain .i { color: var(--muted); }
.star-chip {
  display: inline-flex; align-items: center; gap: .15rem; vertical-align: .12em; margin-left: .4rem;
  padding: .1rem .5rem .1rem .35rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
  background: var(--tint-honey); color: var(--tint-honey-ink);
}
.star-chip .i, .star-row .i, .kid-banner .kb-star .i { color: var(--honey-fill); }
.star-row { display: inline-flex; gap: 1px; vertical-align: -.2em; }
.star-row > span { width: calc(var(--s, 18px) + 4px); }
.stars-opt { display: inline-flex !important; align-items: center; gap: .4rem; }

.kid-banner {
  width: 100%; display: flex; align-items: center; gap: 1rem; justify-content: flex-start; text-align: left;
  margin: 0 0 1rem; padding: .8rem 1.2rem !important; border-radius: var(--r-lg) !important;
  background: var(--tint-honey) !important; color: var(--tint-honey-ink) !important; border: 0 !important;
}
.kid-banner .kb-star { display: inline-flex; align-items: center; gap: .35rem; font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kid-banner .kb-txt { flex: 1; min-width: 0; line-height: 1.3; }
.kid-banner .kb-txt strong { display: block; font-size: 1.1rem; }
.kid-banner .kb-txt span { font-size: .95rem; font-weight: 400; }

.kid-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
.kid-grid .kid-badges, .kid-grid .prize-panel { grid-column: 1 / -1; }
.kid-grid h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 1.3rem; font-weight: 600; margin: .2rem 0 .8rem; }
.kid-grid h3 small { font-size: .95rem; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.kid-grid h3:not(:first-child) { margin-top: 1.6rem; }

.kid-hero { display: flex; flex-direction: column; gap: .9rem; }
.kid-hero > p { margin: -.4rem 0 0; }
.kid-id { display: flex; align-items: center; gap: 1rem; }
.kid-id .avatar { color: #fff; font-weight: 600; }
.kid-id h2 { margin: 0; font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; }
.kid-id .lvl { display: inline-flex; align-items: center; gap: .35rem; margin-top: .2rem; padding: .2rem .7rem; border-radius: 999px; background: var(--tint-indigo); color: var(--tint-indigo-ink); font-size: .95rem; font-weight: 500; }
.kid-stars { display: flex; align-items: center; gap: .8rem; }
.kid-stars .big-star { width: 76px; display: grid; }
.kid-stars strong { display: block; font-size: 4rem; font-weight: 600; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kid-stars span { color: var(--muted); font-size: 1.1rem; }
.lvl-bar, .b-prog { display: block; height: 12px; border-radius: 999px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.lvl-bar > span, .b-prog > span { display: block; height: 100%; width: var(--to); border-radius: inherit; background: var(--tint-indigo-ink); }

/* El premio arriba de todo: camino de estrellas que termina en su dibujo o su foto */
.prize-panel { display: flex; flex-direction: column; gap: 1rem; background: var(--tint-honey); color: var(--tint-honey-ink); }
.prize-panel.ready { box-shadow: inset 0 0 0 3px var(--honey-fill); }
.prize-head { display: flex; align-items: center; gap: 1rem; }
.prize-head > div { flex: 1; min-width: 0; line-height: 1.25; }
.prize-head small { display: block; font-size: .95rem; font-weight: 500; }
.prize-head strong { font-size: 1.6rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.prize-panel .edit-round { background: color-mix(in srgb, var(--paper) 70%, transparent) !important; }
.prize-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.goal-note { margin: 0; font-size: 1.1rem; }
.prize-empty { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.prize-empty > div { flex: 1; min-width: 14rem; }
.prize-empty strong { font-size: 1.3rem; color: var(--ink); }
.claim-btn { animation: breathe 1.8s ease-in-out infinite; }
.last-claim { margin: 0; color: var(--tint-honey-ink) !important; }
.link-btn { background: none !important; border: 0 !important; padding: .2rem .4rem !important; color: inherit; text-decoration: underline; font-weight: 600; }

.kb-prize .prize-img, .prize-mini .prize-img { width: 88%; height: 88%; }

.cel-prize { width: 150px; height: 150px; border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center; background: var(--tint-honey); color: var(--tint-honey-ink); animation: star-in .8s var(--ease-out) both; }
.kid-banner .kb-prize { width: 48px; height: 48px; flex: none; border-radius: var(--r-sm); overflow: hidden; display: grid; place-items: center; background: var(--paper); }

.streak { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: var(--r-lg); background: var(--paper-2); color: var(--muted); }
.streak.on { background: var(--tint-clay); color: var(--tint-clay-ink); }
.streak strong { display: block; font-size: 1.1rem; color: var(--ink); }
.streak small { font-size: .95rem; }

/* Las tareas de hoy del niño: toda la fila se toca */
.kid-task {
  width: 100%; display: flex; align-items: center; gap: 1rem; justify-content: flex-start; text-align: left;
  padding: .7rem .8rem .7rem .7rem !important; margin-bottom: .6rem; min-height: 84px;
  border-radius: var(--r-lg) !important; background: var(--paper-2) !important; border: 2px solid transparent !important;
}
.kid-task:hover { border-color: var(--green) !important; }
.kid-task .kt-ic { width: 60px; height: 60px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green-ink); }
.kid-task .kt-name { flex: 1; min-width: 0; font-size: 1.3rem; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.kid-task .kt-name small { display: block; font-size: .88rem; font-weight: 400; color: var(--terra); }
.kid-task .kt-stars .i { color: var(--honey-fill); }
.kid-task .kt-check { width: 60px; height: 60px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--green); color: var(--green); background: var(--paper); }
.kid-task.done { background: var(--green-mist) !important; }
.kid-task.done .kt-name { color: var(--muted); text-decoration: line-through; }
.kid-task.done .kt-check { background: var(--green); color: var(--on-green); }

/* La semana como la tabla de stickers de la nevera */
.week-stickers { display: grid; grid-template-columns: repeat(7, 1fr); gap: .45rem; }
.wd { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.wd-name { font-size: .88rem; font-weight: 600; color: var(--muted); }
.wd.today .wd-name { color: var(--green-ink); }
.sticker {
  position: relative; width: 100%; max-width: 64px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 18px;
  background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--line);
}
.wd.today .sticker { box-shadow: inset 0 0 0 3px var(--green); }
.wd.future .sticker { background: none; opacity: .6; }
.wd.got .sticker { background: var(--tint-honey); box-shadow: none; transform: rotate(-6deg); }
.sticker .kstar { width: 76%; }
.wd.got:nth-child(even) .sticker { transform: rotate(5deg); }
.sticker b {
  position: absolute; right: -4px; bottom: -4px; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; font-size: .78rem; background: var(--tint-honey-ink); color: var(--paper);
}

/* Insignias: a color las ganadas; en gris, con candado y su avance, las que faltan */
.badges { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.badge-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; padding: 1rem .7rem; border-radius: var(--r-lg); background: var(--paper-2); color: var(--muted); }
.badge-card .b-ic { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); margin-bottom: .2rem; }
.badge-card strong { font-size: 1rem; font-weight: 600; line-height: 1.2; }
.badge-card small { font-size: .88rem; line-height: 1.25; }
.badge-card .b-prog { width: 80%; height: 8px; margin-top: .3rem; background: var(--paper); }
.badge-card .b-prog > span { background: var(--muted); }
.badge-card.earned { background: var(--tint); color: var(--tint-ink); }
.badge-card.earned strong { color: var(--ink); }
.badge-card.earned .b-ic { background: var(--tint-ink); color: var(--tint); box-shadow: 0 6px 14px -8px var(--tint-ink); }
.tint-honey { --tint: var(--tint-honey); --tint-ink: var(--tint-honey-ink); }
.tint-sky { --tint: var(--tint-sky); --tint-ink: var(--tint-sky-ink); }
.tint-lilac { --tint: var(--tint-lilac); --tint-ink: var(--tint-lilac-ink); }
.tint-teal { --tint: var(--tint-teal); --tint-ink: var(--tint-teal-ink); }
.tint-clay { --tint: var(--tint-clay); --tint-ink: var(--tint-clay-ink); }
.tint-berry { --tint: var(--tint-berry); --tint-ink: var(--tint-berry-ink); }
.tint-indigo { --tint: var(--tint-indigo); --tint-ink: var(--tint-indigo-ink); }
.tint-wheat { --tint: var(--tint-wheat); --tint-ink: var(--tint-wheat-ink); }

.kids-empty > .i { color: var(--honey-fill); }
.kids-empty p { max-width: 34rem; margin-inline: auto !important; }

/* Celebración al marcar una tarea */
.celebrate { text-align: center; padding: 0 0 .4rem; display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.celebrate h2 { margin: 0; font-size: 2.2rem; font-weight: 600; letter-spacing: -.02em; }
.celebrate > p { margin: 0; font-size: 1.1rem; }
.cel-star { position: relative; width: 116px; animation: star-in .8s var(--ease-out) both; }
.cel-star.gift { color: var(--tint-lilac-ink); filter: none; }
.cel-star .plus {
  position: absolute; right: -1.6rem; top: .2rem; padding: .15rem .6rem; border-radius: 999px; font-size: 1.3rem; font-weight: 700;
  background: var(--green); color: var(--on-green); animation: pop .4s .5s var(--ease-out) both;
}
@keyframes star-in { 0% { transform: scale(0) rotate(-180deg); } 60% { transform: scale(1.2) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }
.cel-goal { width: 100%; display: flex; flex-direction: column; gap: .8rem; text-align: left; padding: .9rem 1rem; border-radius: var(--r-lg); background: var(--tint-honey); color: var(--tint-honey-ink); }
.cel-goal strong { color: var(--ink); font-weight: 600; }
.cel-badge { width: 100%; display: flex; align-items: center; gap: .9rem; text-align: left; padding: .7rem 1rem; border-radius: var(--r-lg); background: var(--tint); color: var(--tint-ink); animation: pop .5s var(--d, .6s) var(--ease-out) both; }
.cel-badge .b-ic { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tint-ink); color: var(--tint); }
.cel-badge small { display: block; font-weight: 600; font-size: .88rem; text-transform: uppercase; letter-spacing: .06em; }
.cel-badge strong { font-size: 1.3rem; color: var(--ink); }
.cel-level, .cel-all { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: 1.1rem; color: var(--tint-indigo-ink); }
.cel-all { color: var(--green-ink); font-weight: 500; }

.confetti {
  position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; overflow: hidden; pointer-events: none; z-index: 1000;
}
.confetti i { position: absolute; top: -4vh; width: 12px; height: 18px; animation: fall linear both; }
@keyframes fall { to { transform: translate3d(var(--drift), 110vh, 0) rotate(var(--spin)); } }

/* Pantalla «Estrellas» de los niños: carita, barra de estrellas y el premio latiendo al final */
.sb-list { display: flex; flex-direction: column; gap: 1rem; }
.sb-row { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem 1.4rem; border-radius: var(--r-lg); background: var(--paper); }
.sb-row.ready { box-shadow: inset 0 0 0 3px var(--honey-fill); }
.sb-face { flex: none; }
.sb-face .avatar { color: #fff; font-weight: 600; }
.sb-track { flex: 1; min-width: 0; padding: .6rem !important; border: 0 !important; background: var(--paper-2) !important; border-radius: var(--r-lg) !important; }
.sb-row.ready .sb-track { background: color-mix(in srgb, var(--paper) 70%, transparent) !important; }

.sb-empty { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: 2.4rem; }
.sb-empty > span { width: 64px; }

.empty-star { display: block; width: 80px; margin: 0 auto; }
.sb-empty b { color: var(--ink); font-weight: 600; }

/* El camino en la pantalla de Estrellas (grande), en Logros y en la celebración (chico) */
.sb-row .kid-path { flex: 1; min-width: 0; --ss: 52px; gap: .4rem; }
.sb-list.solo .sb-row .kid-path { --ss: 64px; }
.prize-panel .kid-path { --ss: 34px; }
.cel-goal .kid-path { --ss: 24px; justify-content: center; }
@media (max-width: 760px) {
  .sb-row .kid-path, .sb-list.solo .sb-row .kid-path { --ss: 38px; flex-basis: 100%; justify-content: center; }
  .sb-row { justify-content: center; }
  .prize-panel .kid-path { --ss: 28px; }
}

/* Un solo niño: la misma fila (carita → estrellas → premio) en grande y centrada en la pantalla */
.sb-list.solo { padding-top: 8vh; }
.sb-list.solo .sb-row { gap: 1.6rem; padding: 2.4rem 1.8rem; }
.sb-list.solo .sb-track { padding: 1rem !important; }

.sb-hint { color: var(--muted); margin: 1rem .2rem 0; }

/* Las tareas de hoy debajo del camino: tarjetas grandes con dibujo, estrellas, voz y ✓ */
.sb-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; margin: -.2rem 0 .4rem; }
.sb-task {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
  padding: 1rem .8rem .9rem; border-radius: var(--r-lg); background: var(--paper); box-shadow: inset 0 0 0 2px var(--line);
}
.st-say {
  position: absolute; top: .5rem; left: .5rem; width: 56px; height: 56px; padding: 0 !important; border-radius: 50% !important;
  border: 0 !important; background: var(--tint-sky) !important; color: var(--tint-sky-ink) !important;
}
.st-ic { width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green-ink); }
.st-name { font-size: 1.1rem; font-weight: 600; line-height: 1.25; }
.st-stars { display: flex; justify-content: center; gap: .15rem; }
.st-stars i { width: 44px; font-style: normal; }
.st-done {
  width: 72px; height: 72px; padding: 0 !important; border-radius: 50% !important;
  border: 3px solid var(--green) !important; background: var(--paper) !important; color: var(--green) !important;
}
.sb-task.done { background: var(--green-mist); box-shadow: inset 0 0 0 2px var(--green); }
.sb-task.done .st-name { color: var(--muted); text-decoration: line-through; }
.sb-task.done .st-ic { background: var(--paper); }
.sb-task.done .st-done { background: var(--green) !important; color: var(--on-green) !important; }
.sb-free {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.2rem !important;
  border-radius: var(--r-lg) !important; border: 0 !important; background: var(--paper) !important; font-size: 1.3rem; font-weight: 600;
}
.sb-free .i:first-child { color: var(--honey-fill); }
.sb-list.solo + .sb-hint, .sb-list.solo { padding-top: 0; }
@media (max-width: 760px) {
  .sb-tasks { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .st-ic { width: 72px; height: 72px; }
  .st-say { width: 44px; height: 44px; }
  .st-stars i { width: 32px; }
  .st-done { width: 60px; height: 60px; }
}
@media (max-width: 760px) {
  .sb-row { flex-wrap: wrap; justify-content: center; padding: 1rem; }
  .sb-track { order: 3; flex-basis: 100%; }

}

/* Pregunta para adultos, ideas de premio y quiénes son niños */
.gate-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1rem; }
.gate-opts button { font-size: 1.6rem !important; font-weight: 600; min-height: 72px; font-variant-numeric: tabular-nums; }
.kid-toggles { display: flex; flex-direction: column; gap: .5rem; }
.kid-toggle { position: relative; display: flex; align-items: center; gap: .9rem; padding: .6rem .9rem; border-radius: var(--r-lg); background: var(--paper-2); cursor: pointer; font-size: 1.1rem; font-weight: 500; }
.kid-toggle .avatar { color: #fff; }
.kid-toggle > span:not(.avatar):not(.tg) { flex: 1; }
.kid-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.kid-toggle .tg { width: 56px; height: 32px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background .15s; flex: none; }
.kid-toggle .tg::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); transition: transform .15s var(--ease-out); }
.kid-toggle input:checked ~ .tg { background: var(--green); }
.kid-toggle input:checked ~ .tg::after { transform: translateX(24px); }
.kid-toggle:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--green) 45%, transparent); outline-offset: 2px; }

@media (max-width: 900px) {
  .kid-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {

  .prize-head strong { font-size: 1.3rem; }
  .kid-stars strong { font-size: 2.4rem; }
  .kid-task .kt-stars { display: none; }
  .kid-task .kt-ic, .kid-task .kt-check { width: 52px; height: 52px; }
  .kid-task .kt-name { font-size: 1.1rem; }
  .badges { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .cel-star .plus { right: -1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .claim-btn, .cel-star, .cel-star .plus, .cel-badge { animation: none; }
}

/* Sobras: lo que quedó hecho en la nevera o el congelador (tono frío, como los congelados) */
.meal-row .m-left, .src.sobra {
  flex: none; display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; font-weight: 500;
  padding: .2rem .65rem; border-radius: 999px; background: var(--tint-teal); color: var(--tint-teal-ink); white-space: nowrap;
}
.src.sobra { font-size: .78rem; font-weight: 600; padding: .15rem .6rem; gap: .25rem; }
.plate.sobra { background: var(--tint-teal) !important; min-height: 64px; }
.plate.sobra:hover { box-shadow: inset 0 0 0 2px var(--tint-teal-ink); }
.plate .p-state.sobra, .entry-state.sobra { color: var(--tint-teal-ink); }
.plate.add.slim { min-height: 52px; }
.dish .d-left { width: 100%; display: flex; align-items: center; gap: .35rem; margin-top: .3rem; padding-top: .45rem; border-top: 1px dashed var(--line-strong); font-size: .95rem; color: var(--tint-teal-ink); }
.dish .d-left small { color: var(--muted); }
.entry-left { width: 100%; justify-content: center; display: flex !important; align-items: center; gap: .5rem; margin-top: .6rem; }
.w-links { display: inline-flex; align-items: center; gap: .1rem; flex: none; }
.inv-seen.warn { background: var(--honey-fill); color: var(--ink); }
.lf-hint { margin: .5rem 0 0; font-size: .95rem; text-align: center; }
.sobra-note h3 { color: var(--tint-teal-ink); }
.sobra-note b { font-weight: 600; }

.left-sheet { padding: .3rem 1rem; margin-bottom: 1rem; }
.left-row {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 1rem;
  padding: .85rem .3rem; min-height: 76px;
}
.left-row + .left-row { border-top: 1px solid var(--line); }
.left-row:hover { background: var(--green-mist); }
.left-row:focus-visible { outline: 2px solid var(--green); border-radius: var(--r-sm); }
.lr-ic { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-teal); color: var(--tint-teal-ink); }
.lr-ic.nevera { background: var(--tint-sky); color: var(--tint-sky-ink); }
.lr-txt { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.lr-txt b { font-size: 1.2rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-txt small { color: var(--muted); font-size: .95rem; }