/* Comidas Gordis — v3 "Vidrio y color".
   Minimalista como los apps del iPhone, con color alegre y superficies de vidrio (translúcidas, con desenfoque).
   Siempre claro (también con el celular en modo oscuro). Naranja claro de acento; cada comida tiene su color.
   Celular primero: una columna y una barra flotante abajo; desde 900px, barra flotante al costado y dos columnas. */

/* ===== Tokens ===== */
:root {
  color-scheme: light only;
  /* Fondo y vidrio */
  --bg: #f3f3f7;
  --glass: rgba(255, 255, 255, .64);
  --glass-hi: rgba(255, 255, 255, .86);
  --glass-line: rgba(255, 255, 255, .75);
  --glass-blur: blur(22px) saturate(170%);
  --surface: #ffffff;
  --fill: rgba(118, 118, 128, .12);     /* controles grises, como en iOS */
  --fill-2: rgba(118, 118, 128, .07);
  /* Acento: naranja claro */
  --acc: #ff8a3d;
  --acc-2: #f26a1f;                    /* fin del degradé de los botones */
  --acc-text: #c2530c;                 /* naranja para texto (4,6:1 sobre blanco) */
  --acc-soft: #ffeadb;
  /* Texto y líneas */
  --ink: #1c1c1e;
  --muted: #66666e;
  --line: rgba(60, 60, 67, .12);
  --line-strong: #c7c7cc;
  /* Estados */
  --ok: #138a4c; --ok-soft: #dcf5e7;
  --warn: #8a5a00; --warn-soft: #fff4cc;
  --danger: #d1342f; --danger-soft: #ffe1df;
  --disabled: #c7c7cc;
  --on: #ffffff;
  /* Cada comida: color fuerte, suave y degradé */
  --m0: #f5ae00; --m0-soft: #fff3c9; --m0-g: linear-gradient(150deg, #fff6d6, #ffe08a);
  --m1: #20a464; --m1-soft: #daf4e5; --m1-g: linear-gradient(150deg, #e3f8eb, #aee8c6);
  --m2: #f0507a; --m2-soft: #ffe1e9; --m2-g: linear-gradient(150deg, #ffe9ef, #ffbfd0);
  --m3: #5a63f0; --m3-soft: #e3e5ff; --m3-g: linear-gradient(150deg, #eceeff, #c3c8ff);
  /* Personas de la casa (hasta 4) */
  --ele: #2f74f0; --ele-soft: #dde8fe; --ela: #e0407a; --ela-soft: #fde0ea;
  --p3: #16955a; --p3-soft: #d8f3e4; --p4: #8b55f0; --p4-soft: #ece2fe;
  /* Opciones de la semana */
  --t-aho: #0e9a91; --t-aho-soft: #d5f3f0; --t-eco: #20a464; --t-eco-soft: #daf4e5;
  --t-int: #e09000; --t-int-soft: #fff0c7; --t-pre: #ef5a4f; --t-pre-soft: #ffe0dd;
  /* Ilustraciones */
  --il-ink: #3a3a44; --il-plate: #ffffff; --il-shadow: rgba(40, 40, 80, .10); --il-milk: #fff7e6; --il-white: #fffdf8;
  --il-grain: #fbeccd; --il-grain2: #f6d08a; --il-crumb: #fbe9c4; --il-bread: #eeb064; --il-cheese: #ffd24d;
  --il-leaf: #6fcf72; --il-olive: #7c9a2e; --il-olive-leaf: #9cc98a; --il-tomato: #ff5a43; --il-orange: #ff9a3d; --il-yolk: #ffc21f;
  --il-meat: #cf7a46; --il-meat2: #f0a08a; --il-fish: #ffe6d1; --il-salmon: #ff9a7a; --il-nut: #c98a50; --il-plum: #b04e8c;
  --il-herb: #3fae4f; --il-rimc: var(--line-strong);

  /* Tipografía: la del sistema (San Francisco en el iPhone), Inter en el resto */
  --f-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --fs-title: 34px; --fs-day: 24px; --fs-sec: 21px; --fs-meal: 17px;
  --fs-body: 16px; --fs-small: 14px; --fs-meta: 13px; --fs-label: 12px;
  /* Espacios, radios, sombras, medidas */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 28px; --s7: 40px;
  --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;
  --hl: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .55);
  --shadow-1: 0 1px 2px rgba(20, 20, 50, .04), 0 6px 20px -10px rgba(20, 20, 60, .16);
  --shadow-2: 0 2px 6px rgba(20, 20, 50, .06), 0 18px 40px -14px rgba(20, 20, 60, .28);
  --gutter: 16px; --col: 620px; --wide: 1160px; --nav-h: 64px; --rail: 88px;
  --t-fast: .15s; --t-med: .26s; --ease: cubic-bezier(.2, .9, .3, 1);
  --focus: 0 0 0 2px #fff, 0 0 0 4px var(--acc);
}

/* ===== Base ===== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.45; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; }
/* Manchas de color de fondo: le dan algo para mostrar al vidrio. */
body::after { content: ""; position: fixed; inset: -10vh -10vw; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vmax 34vmax at 8% 4%, rgba(255, 170, 110, .42), transparent 70%),
    radial-gradient(34vmax 30vmax at 96% 12%, rgba(255, 214, 90, .36), transparent 70%),
    radial-gradient(38vmax 34vmax at 4% 62%, rgba(120, 220, 170, .30), transparent 70%),
    radial-gradient(40vmax 36vmax at 100% 86%, rgba(150, 160, 255, .30), transparent 70%),
    radial-gradient(30vmax 26vmax at 50% 100%, rgba(255, 140, 180, .24), transparent 70%); }
body.lock { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; letter-spacing: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
h1, h2, h3 { margin: 0; text-wrap: balance; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
p { text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.tiny { font-size: var(--fs-meta); }
.disp, .sec { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.02em; }
.sec { font-size: var(--fs-sec); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Vidrio: translúcido, con desenfoque y un brillo fino arriba. */
.card, .form, .weekbox, .rings, .list, .weeks, details.more, .tl-c, .alert, .wkbar, .pricedate {
  background: linear-gradient(160deg, var(--glass-hi), var(--glass));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line); border-radius: var(--r-lg); box-shadow: var(--hl), var(--shadow-1); }

/* ===== Estructura ===== */
.shell { max-width: var(--col); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); padding-bottom: calc(var(--nav-h) + 40px + env(safe-area-inset-bottom, 0px)); }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: end; justify-content: space-between; gap: var(--s3); padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--gutter) 10px; margin-inline: calc(-1 * var(--gutter));
 }
/* El fondo de la barra de arriba ocupa todo el ancho, aunque el contenido quede centrado. */
.topbar::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1; background: linear-gradient(180deg, rgba(243, 243, 247, .92), rgba(243, 243, 247, .7)); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
.tt { display: grid; gap: 0; min-width: 0; }
.topbar h1 { font-family: var(--f-display); font-size: var(--fs-title); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.brand { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: var(--fs-label); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.brand .marca { width: 18px; height: 18px; }
.marca { width: 32px; height: 32px; color: var(--acc); flex: none; }
.marca-c { fill: var(--m2); }
.sync { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: 650; color: var(--muted); padding: 6px 11px; border-radius: var(--r-pill); margin-bottom: 6px;
  background: var(--glass-hi); border: 1px solid var(--glass-line); box-shadow: var(--hl), var(--shadow-1); }
.sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.sync.on i { background: var(--ok); }
.sync.sube i { background: var(--ok); opacity: .45; }
.sync.espera { color: var(--warn); } .sync.espera i { background: #e0a100; }
.sync.err { color: #b3302a; } .sync.err i { background: #d64541; }
button.sync { font: inherit; font-size: var(--fs-label); font-weight: 650; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.sync:active { transform: scale(.96); }
.sync svg { width: 12px; height: 12px; margin-left: 1px; opacity: .55; }
.sync.girando svg, .ptr.girando svg { animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
html { overscroll-behavior-y: contain; }
.ptr { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 60; transform: translate(-50%, -64px); opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); font-size: var(--fs-label); font-weight: 650; color: var(--muted);
  background: rgba(255, 255, 255, .97); border: 1px solid var(--glass-line); box-shadow: var(--hl), var(--shadow-2); transition: opacity .15s; }
.ptr.ver { opacity: 1; }
.ptr.listo, .ptr.girando { color: var(--acc); }
.ptr.girando { transform: translate(-50%, 0); transition: transform .2s var(--ease), opacity .15s; }
.ptr svg { width: 16px; height: 16px; }
main { display: grid; gap: var(--s5); padding-top: var(--s2); }
.view { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.col-a, .col-b { display: grid; gap: var(--s4); align-content: start; min-width: 0; }

/* ===== Navegación: una cápsula de vidrio flotando ===== */
.tabbar { position: fixed; z-index: 25; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: min(440px, calc(100% - 24px));
  border-radius: 32px; background: linear-gradient(160deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .58)); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .8); box-shadow: var(--hl), 0 10px 30px -8px rgba(20, 20, 60, .28); }
.tabbar .in { display: grid; grid-template-columns: repeat(5, 1fr); height: var(--nav-h); padding: 6px; gap: 2px; }
.tabbar button { background: none; border: 0; border-radius: 26px; display: grid; justify-items: center; align-content: center; gap: 2px; font-size: 10.5px; font-weight: 650; color: #55555c; position: relative; transition: background-color var(--t-fast), color var(--t-fast); }
.tabbar svg { width: 23px; height: 23px; stroke-width: 1.9; }
.tabbar button[aria-selected="true"] { color: var(--acc-text); background: rgba(255, 138, 61, .16); }
.tabbar button[aria-selected="true"] svg { stroke-width: 2.2; }
.tabbar button:focus-visible { box-shadow: inset 0 0 0 2px var(--acc); }
.badge { position: absolute; top: 3px; left: calc(50% + 8px); min-width: 18px; height: 18px; border-radius: 9px; background: var(--danger); color: var(--on); font-size: 10.5px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; border: 2px solid #fff; }

/* ===== Botones y controles ===== */
.btn { border: 1px solid var(--glass-line); background: var(--glass-hi); color: var(--ink); padding: 10px 18px; border-radius: var(--r-pill); font-weight: 650; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; min-height: 46px; box-shadow: var(--hl), var(--shadow-1); transition: transform var(--t-fast), filter var(--t-fast); }
.btn:hover { filter: brightness(.98); }
.btn:active { transform: scale(.98); }
.btn.primary, .btn.tomato { background: linear-gradient(160deg, var(--acc), var(--acc-2)); border-color: transparent; color: var(--on); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px -8px rgba(242, 106, 31, .7); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--acc-text); }
.btn.ghost:hover { background: var(--fill-2); }
.btn.sm { min-height: 38px; padding: 6px 14px; font-size: 14px; }
.btn[disabled] { opacity: .4; cursor: default; }
.btn svg { width: 18px; height: 18px; }
.iconbtn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--fill); display: grid; place-items: center; color: var(--ink); flex: none; }
.iconbtn svg { width: 17px; height: 17px; }
.iconbtn[disabled] { opacity: .3; }
.lnk { background: none; border: 0; padding: 8px 0; color: var(--acc-text); font-weight: 650; font-size: 15px; min-height: 36px; }
.lnk:hover { text-decoration: underline; text-underline-offset: 3px; }
.row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.grow { flex: 1; }

.card { padding: var(--s4); }
.card > b:first-child { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
/* Control segmentado de iOS */
.seg { display: flex; background: var(--fill); border-radius: 12px; padding: 2px; gap: 2px; }
.seg button { flex: 1; border: 0; background: none; padding: 6px 8px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--ink); min-height: 36px; transition: background-color var(--t-fast), color var(--t-fast); }
.seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .04); font-weight: 700; }
.seg button[disabled] { opacity: .35; }
.seg.tiers button { font-size: 12.5px; padding: 6px 2px; }
.seg.tiers button[aria-pressed="true"].t-ahorro { background: var(--t-aho); color: var(--on); }
.seg.tiers button[aria-pressed="true"].t-economico { background: var(--t-eco); color: var(--on); }
.seg.tiers button[aria-pressed="true"].t-intermedio { background: var(--t-int); color: #3d2700; }
.seg.tiers button[aria-pressed="true"].t-premium { background: var(--t-pre); color: var(--on); }
.meter { height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--acc), var(--acc-2)); }

/* Etiquetas */
.tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 650; }
.tag.batch { background: var(--m1-soft); color: var(--ok); }
.tag.frz { background: var(--ele-soft); color: #1d5ed6; }
.tag.af { background: var(--m0-soft); color: var(--warn); }
.tag.swp { background: var(--m2-soft); color: #b8224f; }
.dish .iconbtn.cambiar { box-shadow: var(--shadow-1); color: var(--ink); align-self: start; }
.dish .iconbtn.cambiar svg { width: 16px; height: 16px; }
.tag.sim { background: var(--m1-soft); color: var(--ok); vertical-align: 2px; }
.tag.sim.lejos { background: var(--line); color: var(--muted); }
.tag.now { background: var(--acc); color: var(--on); }
.wkchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill); font-size: var(--fs-meta); font-weight: 650; white-space: nowrap; }
.wkchip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.wkchip.t-ahorro { background: var(--t-aho-soft); color: #08736c; } .wkchip.t-economico { background: var(--t-eco-soft); color: var(--ok); }
.wkchip.t-intermedio { background: var(--t-int-soft); color: var(--warn); } .wkchip.t-premium { background: var(--t-pre-soft); color: #b3302a; }

/* Color de cada persona y de cada comida */
.ele { --pc: var(--ele); --pcs: var(--ele-soft); } .ela { --pc: var(--ela); --pcs: var(--ela-soft); }
.p3 { --pc: var(--p3); --pcs: var(--p3-soft); } .p4 { --pc: var(--p4); --pcs: var(--p4-soft); }
.k0 { --mc: var(--m0); --ms: var(--m0-soft); --mg: var(--m0-g); }
.k1 { --mc: var(--m1); --ms: var(--m1-soft); --mg: var(--m1-g); }
.k2 { --mc: var(--m2); --ms: var(--m2-soft); --mg: var(--m2-g); }
.k3 { --mc: var(--m3); --ms: var(--m3-soft); --mg: var(--m3-g); }

/* ===== Hoy ===== */
.dayhead { display: flex; align-items: end; justify-content: space-between; gap: var(--s3); }
.hola { margin: 0; font-size: 15px; color: var(--muted); }
.dayhead h2 { font-size: var(--fs-day); font-weight: 750; }
.dayhead .wkchip { margin-bottom: 2px; }
/* Cuenta regresiva antes de empezar */
.hero { position: relative; overflow: hidden; border-radius: var(--r-xl); background: linear-gradient(140deg, #ffe0c7, #ffc9d8 60%, #e3d9ff); padding: var(--s5) var(--s4) var(--s4); display: grid; gap: var(--s3); box-shadow: var(--hl), var(--shadow-1); }
.hero .tile { position: absolute; top: -30px; right: -40px; width: 200px; height: 200px; background: #fff; opacity: .5; -webkit-mask-size: 66px 66px; mask-size: 66px 66px; }
.hero > *:not(.tile) { position: relative; }
.hero .n { font-size: 54px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ink); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hero .n small { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: #4a3c44; }
.hero p { margin: 0; }
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: s; background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .7); }
.steps3 li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr auto; gap: var(--s3); align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); min-height: 56px; }
.steps3 li:first-child { border-top: 0; }
.steps3 li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; background: var(--acc); color: var(--on); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.steps3 li.past { opacity: .5; }
.steps3 b { display: block; font-weight: 650; } .steps3 span { font-size: var(--fs-meta); color: var(--muted); }
.steps3 button { background: var(--ink); color: var(--on); border: 0; border-radius: var(--r-pill); padding: 7px 14px; font-weight: 650; font-size: 13.5px; min-height: 36px; }

/* Semana: navegación y tira de días en una cápsula */
.weekbox { padding: 8px; display: grid; gap: 6px; }
.wknav { flex-wrap: nowrap; padding: 0 2px; }
.wknav > div { display: grid; text-align: center; line-height: 1.25; }
.wknav b { font-weight: 700; font-size: 15px; }
.wknav .iconbtn { width: 34px; height: 34px; background: transparent; color: var(--acc-text); }
.strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.strip button { border: 0; background: none; border-radius: 16px; padding: 6px 0 5px; display: grid; justify-items: center; gap: 2px; min-height: 64px; transition: background-color var(--t-fast); }
.strip .w { font-size: 11px; color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: .02em; }
.strip .d { font-size: 18px; font-weight: 700; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.strip .dots { display: flex; gap: 2px; height: 5px; }
.strip .dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }
.strip .dots i:nth-child(1).on { background: var(--m0); } .strip .dots i:nth-child(2).on { background: var(--m1); }
.strip .dots i:nth-child(3).on { background: var(--m2); } .strip .dots i:nth-child(4).on { background: var(--m3); }
.strip button.hoy .w, .strip button.hoy .d { color: var(--acc-text); }
.strip button[aria-pressed="true"] .d { background: linear-gradient(160deg, var(--acc), var(--acc-2)); color: var(--on); box-shadow: 0 6px 14px -6px rgba(242, 106, 31, .8); }
.strip button:hover:not([aria-pressed="true"]) { background: var(--fill-2); }

/* Avisos: como notificaciones del iPhone */
.alerts { display: grid; gap: var(--s2); }
.alert { display: grid; grid-template-columns: 38px 1fr auto; gap: var(--s3); align-items: center; padding: 10px 12px; font-size: 14.5px; line-height: 1.35; border-radius: 20px; }
.alert .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--on); }
.alert .ic svg { width: 19px; height: 19px; }
.alert.compras .ic { background: linear-gradient(160deg, var(--acc), var(--acc-2)); }
.alert.cocina .ic { background: linear-gradient(160deg, #3ccf82, #1a9a58); }
.alert.freezer .ic, .alert.prep .ic { background: linear-gradient(160deg, #6aa2ff, #2f6bf0); }

/* Anillos del día */
.rings { padding: var(--s4); display: grid; gap: var(--s4); }
.ptit { font-size: 17px; font-weight: 700; }
.rings .fine { margin: -4px 0 0; }
.ring { display: grid; grid-template-columns: 92px 1fr; gap: var(--s4); align-items: center; }
.ring svg { width: 92px; height: 92px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.ring .tr { stroke: var(--pcs); }
.ring .a1 { stroke: var(--pc); transition: stroke-dasharray .5s var(--ease); }
.ring .t2 { stroke: var(--acc-soft); }
.ring .a2 { stroke: var(--acc); transition: stroke-dasharray .5s var(--ease); }
.rtx { display: grid; gap: 1px; min-width: 0; font-size: var(--fs-meta); }
.rtx .who { font-weight: 700; color: var(--pc); font-size: 14px; }
.rtx b { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.rtx b small { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.rtx .p { color: var(--acc-text); font-weight: 650; }

/* Línea del tiempo del día */
.timeline { display: grid; gap: 12px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 55px; top: 22px; bottom: 22px; width: 2px; border-radius: 1px; background: linear-gradient(180deg, var(--m0), var(--m1), var(--m2), var(--m3)); opacity: .35; }
.tl { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; position: relative; }
.tl-h { padding: 16px 2px 0 0; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--muted); position: relative; }
.tl-h::after { content: ""; position: absolute; left: 56px; top: 19px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--mc); box-shadow: 0 0 0 3px var(--bg); }
.tl-c { padding: 12px; display: grid; gap: 10px; min-width: 0; }
.tl .open { all: unset; cursor: pointer; display: grid; grid-template-columns: 76px 1fr; gap: var(--s3); align-items: center; border-radius: var(--r-md); }
.tl .open:focus-visible { box-shadow: var(--focus); }
.pic { display: grid; place-items: center; aspect-ratio: 1; border-radius: 20px; background: var(--mg, var(--m1-g)); padding: 5px; --il-rimc: var(--mc); }
.pic .ilus { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(30, 30, 70, .12)); }
.ilus { transition: transform var(--t-med) var(--ease); }
.tl .open:hover .ilus, .rect:hover .ilus { transform: rotate(-8deg) scale(1.04); }
.tx { display: grid; gap: 3px; min-width: 0; }
.kind { font-size: var(--fs-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mc); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.k0 .kind { color: #a26b00; }
.nowtag { background: var(--acc); color: var(--on); padding: 2px 8px; border-radius: var(--r-pill); letter-spacing: .02em; }
.mt { font-size: var(--fs-meal); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-meta); color: var(--muted); align-items: center; }
.eat { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.eatbtn { border: 0; background: var(--fill); border-radius: var(--r-pill); padding: 3px 12px 3px 3px; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 650; color: var(--ink); min-height: 36px; transition: background-color var(--t-fast), color var(--t-fast); }
.eatbtn i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12.5px; font-weight: 800; background: #fff; color: var(--pc); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.eatbtn.on { background: var(--pc); color: var(--on); }
.eatbtn.on i { background: rgba(255, 255, 255, .25); color: var(--on); box-shadow: none; }
.eat .lnk { margin-left: auto; }
.tl.comido:not(.big) .open { opacity: .55; }
/* La comida de ahora: grande, con su color */
.tl.big .tl-c { background: var(--mg); border-color: rgba(255, 255, 255, .8); padding: 14px; box-shadow: var(--hl), var(--shadow-2); }
.tl.big .open { grid-template-columns: 1fr; gap: var(--s2); }
.tl.big .pic { background: rgba(255, 255, 255, .5); width: min(220px, 70%); justify-self: center; border-radius: 50%; padding: 8px; }
.tl.big .kind { color: var(--ink); }
.tl.big .mt { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.tl.big .meta { color: #4a4a52; }
.tl.big .tl-h { padding-right: 8px; }
.tl.big .eatbtn { background: rgba(255, 255, 255, .7); }
.tl.big .eatbtn.on { background: var(--pc); }
.tl.big .tl-h::after { width: 16px; height: 16px; margin-left: -8px; top: 17px; box-shadow: 0 0 0 3px var(--bg), 0 0 0 7px color-mix(in srgb, var(--mc) 25%, transparent); }
.nowline { position: relative; height: 20px; margin: -6px 0; }
.nowline::before { content: ""; position: absolute; left: 56px; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--acc); border-radius: 1px; }
.nowline::after { content: ""; position: absolute; left: 50px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 3px var(--bg); }
.nowline span { position: absolute; left: 72px; top: 50%; transform: translateY(-50%); background: var(--acc); color: var(--on); font-size: 11.5px; font-weight: 750; padding: 2px 9px; border-radius: var(--r-pill); box-shadow: 0 0 0 3px var(--bg); }

/* Ilustraciones (ilustra.js) */
.il-l { stroke: var(--il-ink); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
path.il-l:not([fill]) { fill: none; }
.il-rim { stroke: var(--il-rimc); stroke-opacity: .55; stroke-width: 1.6; }
.il-soft { stroke-opacity: .35; }
.il-shine { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .9; }

/* ===== Hoja (receta / cambio) ===== */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(20, 20, 40, .28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade var(--t-med) ease; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 93vh; max-height: 93dvh; background: rgba(248, 248, 251, .93); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border-radius: 30px 30px 0 0; display: grid; grid-template-rows: auto 1fr; animation: up .3s var(--ease); max-width: var(--col); margin: 0 auto; box-shadow: var(--shadow-2); overflow: hidden; }
.sheet .grip { display: grid; justify-items: center; padding: 8px 0 4px; background: var(--mg, var(--m1-g)); }
.sheet .grip i { width: 38px; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .18); }
.sheet .scroll { overflow-y: auto; overscroll-behavior: contain; padding: 0 max(var(--gutter), env(safe-area-inset-left, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--s5); align-content: start; }
.sheet-art { background: var(--mg, var(--m1-g)); margin: 0 calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))); padding: 2px 0 20px; display: grid; place-items: center; --il-rimc: var(--mc); }
.sheet-art .ilus { width: 210px; height: 210px; display: block; filter: drop-shadow(0 10px 14px rgba(30, 30, 70, .16)); }
.sheet .hd { display: flex; justify-content: space-between; align-items: start; gap: var(--s3); }
.sheet .hd > div { display: grid; gap: 4px; }
.sheet .hd .iconbtn { width: 34px; height: 34px; }
.kick { font-size: var(--fs-label); letter-spacing: .05em; text-transform: uppercase; font-weight: 750; color: var(--mc, var(--acc-text)); }
.sheet.k0 .kick { color: #a26b00; }
.sheet h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.sheet h3.sec { font-size: 20px; margin-bottom: calc(-1 * var(--s3)); }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.macros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); }
.macros div { display: grid; gap: 1px; font-size: var(--fs-meta); color: var(--muted); background: var(--pcs); border-radius: var(--r-md); padding: 12px 14px; }
.macros .who { font-weight: 700; color: var(--pc); font-size: 13.5px; }
.macros b { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.ingt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.ingt th:first-child { border-top-left-radius: var(--r-md); } .ingt th:last-child { border-top-right-radius: var(--r-md); }
.ingt th, .ingt td { padding: 11px 14px; text-align: right; border-bottom: 1px solid var(--line); vertical-align: top; }
.ingt tr:last-child td { border-bottom: 0; }
.ingt th:first-child, .ingt td:first-child { text-align: left; }
.ingt th { font-size: var(--fs-label); font-weight: 700; color: var(--muted); letter-spacing: .03em; text-transform: uppercase; background: var(--fill-2); }
.ingt th[class] { color: var(--pc); }
.ingt td small { display: block; color: var(--muted); font-size: 12.5px; }
.ingt td.q { padding-left: var(--s2); white-space: nowrap; font-weight: 700; }
.ingt th small { display: block; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.ingt.consem td.q:not(.sem) { font-weight: 500; color: var(--muted); }
.ingt th.sem { color: var(--acc-text); background: var(--acc-soft); }
.ingt td.sem { font-weight: 800; background: color-mix(in srgb, var(--acc) 10%, #fff); }
.semrec { margin: 0 0 8px; font-size: 14.5px; font-weight: 600; }
@media (max-width: 420px) { .ingt.consem th, .ingt.consem td { padding: 10px 9px; } }
ol.how { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); counter-reset: p; }
ol.how li { counter-increment: p; display: grid; grid-template-columns: 30px 1fr; gap: var(--s3); }
ol.how li::before { content: counter(p); width: 28px; height: 28px; border-radius: 50%; background: var(--mc, var(--acc)); color: var(--on); display: grid; place-items: center; font-weight: 750; font-size: 13.5px; }
.sheet.k0 ol.how li::before { color: #3d2700; }
.tip { background: var(--m0-soft); border-radius: var(--r-md); padding: 12px 14px; font-size: 15px; }
.alts { display: grid; gap: var(--s2); }
.alt { background: #fff; border-radius: var(--r-md); padding: var(--s3); display: grid; gap: var(--s2); box-shadow: var(--shadow-1); }
.alt b { font-weight: 700; font-size: 16px; }
.alt .d { font-size: var(--fs-meta); color: var(--muted); }
.cheaper { color: var(--ok); font-weight: 700; } .pricier { color: var(--danger); font-weight: 700; }

/* ===== Plan ===== */
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.key { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--muted); }
.key i { width: 10px; height: 10px; border-radius: 3px; }
.total { display: grid; gap: var(--s3); }
.total .big { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 4px var(--s3); }
.total .big > span { white-space: nowrap; text-align: right; }
.total .big b { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; display: block; margin-top: 2px; }
.total .sub { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--fs-meta); color: var(--muted); }
.month { display: grid; gap: var(--s3); }
.month h3 { font-size: 19px; font-weight: 750; }
.g7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.g7 .dh { text-align: center; font-size: 11px; color: var(--muted); font-weight: 650; text-transform: uppercase; }
.cd { border: 0; background: transparent; border-radius: 12px; aspect-ratio: 1 / 1; max-width: 100%; min-height: 40px; display: grid; grid-template-rows: 1fr auto; justify-items: center; padding: 5px 0; font-size: 14.5px; font-weight: 650; position: relative; }
.cd.out { opacity: .28; }
.cd.t-ahorro { background: var(--t-aho-soft); } .cd.t-economico { background: var(--t-eco-soft); } .cd.t-intermedio { background: var(--t-int-soft); } .cd.t-premium { background: var(--t-pre-soft); }
.cd.hoy { background: linear-gradient(160deg, var(--acc), var(--acc-2)); color: var(--on); }
.cd.hoy .mk i { box-shadow: 0 0 0 1.5px #fff; }
.cd .mk { display: flex; gap: 3px; height: 6px; }
.cd .mk i { width: 6px; height: 6px; border-radius: 50%; }
.cd .mk i.c { background: var(--acc-2); } .cd .mk i.k { background: var(--m1); }
/* Semanas: lista agrupada, cada fila se abre al tocarla */
.weeks { display: grid; overflow: hidden; padding: 0; }
.week { border-top: 1px solid var(--line); }
.week:first-child { border-top: 0; }
.week .h { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 6px 1fr auto 18px; gap: var(--s3); align-items: center; padding: 13px 14px; min-height: 62px; }
.week .h:focus-visible { box-shadow: inset 0 0 0 2px var(--acc); }
.week .h:hover { background: var(--fill-2); }
.week .tb { width: 6px; height: 34px; border-radius: 3px; }
.tb.t-ahorro { background: var(--t-aho); } .tb.t-economico { background: var(--t-eco); } .tb.t-intermedio { background: var(--t-int); } .tb.t-premium { background: var(--t-pre); }
.week .h > span:nth-child(2) { display: grid; min-width: 0; }
.week .h b { font-size: 16px; font-weight: 700; }
.week .sub { font-size: var(--fs-meta); color: var(--muted); }
.week .price { font-weight: 750; font-size: 16px; }
.week .chev { color: var(--line-strong); display: grid; transition: transform var(--t-fast); }
.week .chev svg { width: 16px; height: 16px; }
.week.open .chev { transform: rotate(90deg); color: var(--acc-text); }
.week.open { background: rgba(255, 255, 255, .5); }
.wbody { display: grid; gap: var(--s3); padding: 0 14px 14px 32px; }
.wbody .lnk { justify-self: start; }
.shopday { display: flex; gap: var(--s3); align-items: center; font-size: var(--fs-meta); color: var(--muted); }
.shopday .seg { flex: 1; } .shopday .seg button { min-height: 34px; padding: 5px 6px; font-size: 13px; }
.kv { display: flex; justify-content: space-between; gap: var(--s3); padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--muted); }
.kv span:last-child { text-align: right; }

/* ===== Compras ===== */
.wkbar { display: grid; grid-template-columns: 40px 1fr 40px; gap: var(--s3); align-items: center; text-align: center; padding: 8px; border-radius: var(--r-pill); }
.wkbar b { font-size: 16px; font-weight: 700; display: block; line-height: 1.2; }
.wkbar span { font-size: var(--fs-meta); color: var(--muted); }
.wkbar .iconbtn { background: transparent; color: var(--acc-text); }
.sumc { display: grid; grid-template-columns: 96px 1fr; gap: var(--s4); align-items: center; }
.pring { position: relative; width: 96px; height: 96px; }
.pring svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.pring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.pring .tr { stroke: var(--acc-soft); } .pring .a1 { stroke: var(--acc); transition: stroke-dasharray .5s var(--ease); }
.pring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 11.5px; color: var(--muted); line-height: 1.1; }
.pring > span b { font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
.sumtx { display: grid; gap: 2px; min-width: 0; }
.sumtx > b { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
/* Atajos: tres botones grandes de color */
.atajos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.atajo { border: 0; border-radius: var(--r-lg); padding: 14px 12px 12px; display: grid; gap: 2px; align-content: start; justify-items: start; text-align: left; color: var(--on); text-decoration: none; min-height: 104px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--shadow-1); transition: transform var(--t-fast); }
.atajo:active { transform: scale(.97); }
.atajo svg { width: 26px; height: 26px; margin-bottom: auto; padding-bottom: 8px; box-sizing: content-box; }
.atajo b { font-size: 15px; font-weight: 750; line-height: 1.2; }
.atajo small { font-size: 11.5px; opacity: .92; line-height: 1.25; }
.atajo.a1 { background: linear-gradient(160deg, #ff9a4d, #ef5f17); }
.atajo.a2 { background: linear-gradient(160deg, #5b9bff, #2d62e8); }
.atajo.a3 { background: linear-gradient(160deg, #3fd187, #149553); }
.pricedate { display: flex; gap: 10px; align-items: start; font-size: var(--fs-meta); color: var(--muted); line-height: 1.45; padding: 10px 12px; border-radius: var(--r-md); }
.pricedate svg { width: 16px; height: 16px; flex: none; color: var(--acc-text); margin-top: 1px; }
.card.ahorro { display: grid; gap: 4px; background: linear-gradient(150deg, #e3f8eb, #c4eed6); }
.card.ahorro b { font-size: 18px; font-weight: 750; color: #0d6b3a; }
.card.ahorro .muted { color: #355e47; }
.aisle { display: grid; gap: var(--s2); }
.aisle h3 { font-size: 20px; font-weight: 750; display: flex; justify-content: space-between; align-items: baseline; padding: var(--s2) 4px 0; }
.aisle h3 .num { font-size: var(--fs-small); font-weight: 650; color: var(--muted); letter-spacing: 0; }
.list { display: grid; overflow: hidden; }
.it { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid var(--line); }
.it:last-child { border-bottom: 0; }
.it > label { display: grid; grid-template-columns: 26px 1fr auto; gap: var(--s3); align-items: start; padding: 13px 0 13px 14px; cursor: pointer; min-height: 60px; min-width: 0; }
/* Círculos para tildar, como en Recordatorios */
.it > label input, .mrow input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); margin: 0; display: grid; place-items: center; background: #fff; transition: background-color var(--t-fast), border-color var(--t-fast); }
.it > label input:checked, .mrow input:checked { background: var(--acc); border-color: var(--acc); }
.it > label input:checked::after { content: ""; width: 5px; height: 10px; border: solid var(--on); border-width: 0 2.4px 2.4px 0; transform: rotate(45deg) translate(-1px, -1px); }
.it > label input:focus-visible, .mrow input:focus-visible { box-shadow: var(--focus); }
.it .nm { min-width: 0; }
.it .nm b { font-weight: 600; display: block; font-size: 15px; line-height: 1.35; }
.it .nm small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.it .nm .cq { display: block; margin-top: 2px; color: var(--ink-2, #3a3a3c); }
.it .nm .cq b, .it.done .nm .cq b { display: inline; font-size: inherit; font-weight: 700; text-decoration: none; }
.it .nm .cq.rs { color: var(--muted); }
.it .pr { text-align: right; font-weight: 700; font-size: 15px; white-space: nowrap; }
.it .pr small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.it.done .nm b { text-decoration: line-through; text-decoration-color: var(--disabled); color: var(--muted); }
.it.done .pr { color: var(--muted); }
.it .acts { display: flex; flex-direction: column; align-self: stretch; justify-content: center; padding-right: 4px; }
.it .home { border: 0; background: none; width: 40px; height: 40px; display: grid; place-items: center; color: #8e8e93; border-radius: 50%; }
.it .home:hover { background: var(--fill-2); color: var(--acc-text); }
.it .home svg { width: 18px; height: 18px; }
.it .home.on { color: #1d5ed6; background: var(--ele-soft); }
.it .cmp { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.it .cmp a { color: inherit; text-decoration: none; }
.it .cmp a.barato { color: var(--ok); font-weight: 700; }
.it .sup { display: inline-block; margin-right: 4px; padding: 0 7px; border-radius: var(--r-pill); background: var(--ele-soft); color: #1d5ed6; font-weight: 700; font-size: 11.5px; }
.form.otroed { grid-column: 1 / -1; margin: 0 12px 12px; grid-template-columns: 1fr; background: var(--fill-2); border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.otroed .muted { margin: 0; }
.sups { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.sups label { position: relative; display: block; cursor: pointer; }
.sups input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sups span { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; border-radius: var(--r-pill); background: #fff; font-weight: 650; font-size: 14px; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.sups input:checked + span { background: var(--acc); color: var(--on); box-shadow: none; }
.sups input:focus-visible + span { box-shadow: var(--focus); }
.otroed .row .btn { flex: 1; }
.cantform .row { align-items: end; }
.cantform .row label { flex: 1; min-width: 0; }
details.more { padding: var(--s3) var(--s4); }
details.more summary { cursor: pointer; font-weight: 650; font-size: 15px; min-height: 36px; display: flex; align-items: center; color: var(--acc-text); }
details.more ul { margin: 6px 0 4px; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: var(--r-pill); background: var(--fill); font-size: 13px; }
.chip button { border: 0; background: #fff; border-radius: var(--r-pill); padding: 5px 10px; font-size: 12.5px; font-weight: 650; color: var(--acc-text); }
.copybox { width: 100%; min-height: 160px; font: 13px/1.45 var(--f-body); background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3); }

/* Modo súper: filas grandes para tocar con una mano. */
.market { position: fixed; inset: 0; z-index: 45; background: var(--bg); display: grid; grid-template-rows: auto 1fr; padding-top: env(safe-area-inset-top, 0px); }
.market .mh { display: grid; gap: var(--s3); padding: var(--s4) max(var(--gutter), env(safe-area-inset-right, 0px)) var(--s4) max(var(--gutter), env(safe-area-inset-left, 0px)); background: linear-gradient(150deg, #ffe6d2, #ffd2c0); }
.market .mh .row { justify-content: space-between; flex-wrap: nowrap; max-width: var(--col); width: 100%; margin: 0 auto; }
.market .mh .meter { max-width: var(--col); width: 100%; margin: 0 auto; background: rgba(255, 255, 255, .7); height: 10px; border-radius: 5px; }
.market .mh b { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; }
.market .ml { overflow-y: auto; padding: var(--s2) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px)); display: block; max-width: var(--col); width: 100%; margin: 0 auto; }
.market h3 { font-size: 20px; font-weight: 750; margin: var(--s5) 0 var(--s2); }
.mrow { display: grid; grid-template-columns: 40px 1fr; gap: var(--s4); align-items: center; min-height: 72px; padding: var(--s3) var(--s4); background: #fff; border-radius: var(--r-md); margin-bottom: 6px; cursor: pointer; box-shadow: var(--shadow-1); }
.mrow input { width: 34px; height: 34px; border-width: 2.5px; margin: 0; }
.mrow input:checked::after { content: ""; width: 8px; height: 15px; border: solid var(--on); border-width: 0 2.8px 2.8px 0; transform: rotate(45deg) translate(-1px, -2px); }
.mrow b { font-size: 18px; font-weight: 650; display: block; line-height: 1.25; } .mrow small { color: var(--muted); font-size: 14px; }
.mrow.done { background: transparent; box-shadow: none; }
.mrow.done b { text-decoration: line-through; text-decoration-color: var(--disabled); color: var(--muted); }
.qty { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: var(--r-pill); background: var(--acc); color: var(--on); font-size: 15px; font-weight: 750; margin-right: 8px; vertical-align: 2px; }

/* ===== Cocina ===== */
.dish { display: grid; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--line); }
.dish:first-of-type { border-top: 0; padding-top: 0; }
.dish .dh { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--s4); align-items: center; }
.dish .pic { border-radius: 50%; padding: 6px; }
.dish h3 { font-size: 18px; font-weight: 750; }
.dish ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 14.5px; }
.dish ul li::marker { color: var(--acc); }
.dish .lnk { justify-self: start; }
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.rule { font-size: var(--fs-meta); color: #46464d; line-height: 1.45; border-radius: var(--r-md); padding: var(--s3); background: var(--m1-g); }
.rule:nth-child(2) { background: var(--m3-g); } .rule:nth-child(3) { background: var(--m2-g); } .rule:nth-child(4) { background: var(--m0-g); }
.rule b { display: block; font-size: 14.5px; font-weight: 750; color: var(--ink); margin-bottom: 2px; }
.grouph { font-size: 21px; font-weight: 750; letter-spacing: -0.02em; padding: var(--s2) 4px; }
.grouph .muted { font-size: 15px; font-weight: 600; }
/* Recetario: una grilla de platos ilustrados */
.recgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
.rect { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-rows: auto auto 1fr auto; gap: 3px; padding: 8px 8px 10px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .78); border: 1px solid var(--glass-line); box-shadow: var(--hl), var(--shadow-1); min-width: 0; }
.rect:focus-visible { box-shadow: var(--focus); }
.rect .pic { border-radius: 16px; margin-bottom: 4px; padding: 8px; }
.rect b { font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; padding: 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rect .d { font-size: 12px; color: var(--muted); padding: 0 4px; }
.rect .p { font-size: 14px; font-weight: 750; padding: 0 4px; }

/* ===== Formularios ===== */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); padding: var(--s4); }
.form label { display: grid; gap: 5px; font-size: var(--fs-meta); font-weight: 650; color: var(--muted); }
.form label.full { grid-column: 1 / -1; }
.form input, .form select, .swapw select { font: inherit; font-size: 17px; padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: var(--fill); color: var(--ink); width: 100%; min-height: 48px; }
.form select, .swapw select { font-size: 15px; }
.form input:focus-visible, .form select:focus-visible, .swapw select:focus-visible { box-shadow: 0 0 0 3px rgba(255, 138, 61, .45); border-radius: var(--r-sm); background: #fff; }
.form .btn { grid-column: 1 / -1; }
.swapw { display: grid; gap: var(--s3); padding: var(--s3); border-radius: var(--r-md); background: var(--fill-2); }
.swapw label { display: grid; gap: 5px; font-size: var(--fs-meta); font-weight: 650; color: var(--muted); }
.swapw .row .btn { flex: 1; }

/* ===== Progreso y gastos ===== */
.wcard { display: grid; gap: var(--s2); }
.wcard .h { display: flex; justify-content: space-between; align-items: baseline; }
.wcard .h b { font-weight: 700; color: var(--pc); }
.wcard .kg { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; }
.wcard .kg small { font-size: var(--fs-meta); font-weight: 650; margin-left: 6px; color: var(--muted); letter-spacing: 0; }
.pname { font-size: 18px; font-weight: 750; color: var(--pc); }
.card.perfil { display: grid; gap: 8px; }
.perfil .ph { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.perfil .av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 18px; font-weight: 800; background: var(--pc); color: var(--on); box-shadow: 0 8px 18px -10px var(--pc); flex: none; }
.chart { width: 100%; height: auto; display: block; }
.chart .goal { stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .8; }
.chart .gl { stroke: var(--line); } .chart .ax { fill: var(--muted); font-size: 10.5px; font-family: var(--f-body); }
.bars { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; align-items: end; height: 110px; }
.bars div { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; text-align: center; }
.bars i { align-self: end; background: linear-gradient(180deg, var(--acc), var(--m2)); border-radius: 6px 6px 3px 3px; display: block; min-height: 3px; }
.bars i.empty { background: var(--fill); }
.bars small { font-size: 10.5px; color: var(--muted); }
.slider { display: grid; gap: 6px; font-size: 14.5px; font-weight: 650; }
.slider input { width: 100%; accent-color: var(--pc); min-height: 32px; }
ul.tips { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; color: var(--muted); }
ul.tips li::marker { color: var(--acc); }
.fine { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.stats .card:first-child { background: linear-gradient(150deg, #ffe6d2, #ffd0bd); }
.stats .card + .card { background: linear-gradient(150deg, #eceeff, #d3d7ff); }
.stat { display: grid; gap: 2px; }
.stat b { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; }
.gweeks { display: grid; gap: 0; padding-block: 4px; }
.gw { display: grid; gap: 6px; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.gw:last-child { border-bottom: 0; }
.gw .h { display: flex; justify-content: space-between; gap: var(--s3); }
.gbar { position: relative; height: 8px; border-radius: 4px; background: var(--fill-2); overflow: hidden; }
.gbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.gbar i.plan { background: #d3d7ff; }
.gbar i.real { background: linear-gradient(90deg, var(--acc), var(--acc-2)); }

/* ===== Entrada, perfil y códigos ===== */
.login { min-height: 82vh; display: grid; place-content: center; gap: var(--s4); text-align: center; max-width: 420px; margin: 0 auto; padding: var(--s6) var(--gutter) var(--s5); }
.login .logo { width: 96px; height: 96px; margin: 0 auto; display: grid; place-items: center; border-radius: 28px; background: linear-gradient(150deg, #ffa25a, #f2601c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 30px -12px rgba(242, 96, 28, .7); }
.login .logo .marca { width: 60px; height: 60px; color: #fff; }
.login .logo .marca-c { fill: #ffe08a; }
.login .logo.ele, .login .logo.ela, .login .logo.p3, .login .logo.p4 { background: var(--pc); box-shadow: 0 14px 30px -14px var(--pc); }
.login h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
.login .form { text-align: left; }
.lgbtns { display: grid; gap: var(--s2); }
.lglinks { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--s4); }
.codrow { grid-column: 1 / -1; display: grid; gap: var(--s2); padding: var(--s3); border-radius: var(--r-md); background: var(--fill-2); }
.codrow b.num { font-size: 18px; font-weight: 750; letter-spacing: .06em; }
#cod-in { text-transform: uppercase; letter-spacing: .1em; text-align: center; font-weight: 700; font-size: 20px; }

/* Número de versión: chiquito, al final de Progreso y en la entrada. */
.ver { margin: 0; text-align: center; font-size: 11.5px; color: #8e8e93; letter-spacing: .02em; }

/* ===== Avisos ===== */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 24px + env(safe-area-inset-bottom, 0px)); z-index: 50; background: rgba(28, 28, 30, .86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--on); padding: 11px 18px; border-radius: var(--r-pill); font-weight: 600; font-size: 14.5px; box-shadow: var(--shadow-2); max-width: calc(100vw - 32px); width: max-content; text-align: center; animation: toastin .32s var(--ease); }
@keyframes toastin { from { opacity: 0; transform: translateX(-50%) scale(.94); } }

/* En el celular las comidas van primero y los anillos después. */
@media (max-width: 899px) {
  .view.hoy .col-a { display: contents; }
  .view.hoy .col-b { order: 1; }
  .view.hoy .rings { order: 2; }
}

/* ===== Celulares chicos ===== */
@media (max-width: 380px) {
  :root { --gutter: 12px; --fs-title: 30px; --fs-day: 21px; }
  .tl { grid-template-columns: 42px 1fr; column-gap: 14px; }
  .timeline::before { left: 48px; } .tl-h::after { left: 49px; } .nowline::before { left: 49px; } .nowline::after { left: 43px; } .nowline span { left: 64px; }
  .tl .open { grid-template-columns: 64px 1fr; }
  .atajo { padding: 12px 10px 10px; min-height: 84px; } .atajo small { display: none; }
  .ring { grid-template-columns: 80px 1fr; } .ring svg { width: 80px; height: 80px; }
  .total .big b { font-size: 34px; } .sumtx > b { font-size: 30px; }
}

/* ===== Pantallas medianas ===== */
@media (min-width: 600px) {
  :root { --gutter: 28px; --fs-title: 38px; --fs-day: 26px; }
  .rings { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .rings .ptit, .rings .fine { grid-column: 1 / -1; }
  .tl .open { grid-template-columns: 92px 1fr; gap: var(--s4); }
  .mt { font-size: 18px; }
  .tl.big .mt { font-size: 26px; }
  .tl.big .open { grid-template-columns: 200px 1fr; gap: var(--s5); align-items: center; }
  .tl.big .pic { width: 200px; }
  .cd { aspect-ratio: auto; min-height: 52px; }
  .rules { grid-template-columns: repeat(4, 1fr); }
  .recgrid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Escritorio: barra flotante al costado y dos columnas ===== */
@media (min-width: 900px) {
  .tabbar { left: 16px; top: 50%; bottom: auto; transform: translateY(-50%); width: var(--rail); border-radius: 30px; }
  .tabbar .in { height: auto; grid-template-columns: 1fr; gap: 6px; padding: 10px 8px; }
  .tabbar button { min-height: 64px; border-radius: 22px; font-size: 11.5px; }
  .shell { max-width: calc(var(--wide) + var(--rail)); padding-left: calc(var(--rail) + 56px); padding-right: 44px; padding-bottom: var(--s7); }
  .topbar { padding: var(--s5) 0 var(--s3); margin-inline: 0; position: static; }
  .topbar::before { display: none; }
  .topbar h1 { font-size: 40px; }
  .view.hoy, .view.plan, .view.compras { grid-template-columns: minmax(330px, 400px) 1fr; column-gap: 36px; align-items: start; }
  .view.hoy .col-a, .view.plan .col-a, .view.compras .col-a { position: sticky; top: 20px; }
  .view.gastos, .view.cocina, .view.progreso, .view.cuenta { max-width: 860px; }
  .view.cocina:has(.recgrid) { max-width: none; }
  .recgrid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .tl .open { grid-template-columns: 108px 1fr; }
  .tl.big .open { grid-template-columns: 240px 1fr; }
  .tl.big .pic { width: 240px; }
  .mt { font-size: 19px; }
  .sheet { max-width: 720px; bottom: auto; top: 50%; transform: translateY(-50%); border-radius: 30px; max-height: 88vh; animation: fade var(--t-med) ease; }
  .sheet .grip { height: 16px; } .sheet .grip i { display: none; }
  .toast { bottom: var(--s5); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== Semana vacía y primer ingreso (2.2.0) ===== */
:root { --t-vac: #8e8e96; --t-vac-soft: #ececf1; }
.seg.tiers button[aria-pressed="true"].t-vacio { background: var(--t-vac); color: var(--on); }
.wkchip.t-vacio { background: var(--t-vac-soft); color: #55555c; }
.cd.t-vacio { background: var(--t-vac-soft); }
.tb.t-vacio { background: var(--t-vac); }
.tl.vacio .tl-h::after { background: transparent; box-shadow: 0 0 0 2px var(--mc), 0 0 0 5px var(--bg); }
.addm { all: unset; cursor: pointer; display: grid; grid-template-columns: 44px 1fr; gap: var(--s3); align-items: center; padding: 12px; border-radius: var(--r-md); border: 1.5px dashed color-mix(in srgb, var(--mc) 55%, transparent); background: rgba(255, 255, 255, .45); }
.addm:focus-visible { box-shadow: var(--focus); }
.addm .plus { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 600; color: var(--on); background: var(--mc); }
.addm b { display: block; font-size: var(--fs-meal); }
.addm small { color: var(--muted); font-size: var(--fs-meta); }
.vaciac { display: grid; gap: var(--s2); justify-items: start; margin-bottom: var(--s3); }
.vaciac p { margin: 0; }
.card.repc { display: grid; gap: 6px; margin-bottom: var(--s3); background: linear-gradient(150deg, #fff4dc, #ffe6c2); }
.card.repc p { margin: 0; }
.repform { margin-bottom: var(--s3); }
.login.onb { place-content: start center; padding-top: var(--s7); }
.onbopts { display: grid; gap: var(--s2); text-align: left; }
.onbopt { all: unset; cursor: pointer; display: grid; grid-template-columns: 22px 1fr; gap: var(--s3); align-items: start; padding: var(--s4); border-radius: var(--r-lg); background: var(--glass-hi); box-shadow: var(--hl), var(--shadow-1); }
.onbopt:focus-visible { box-shadow: var(--focus); }
.onbopt b { display: block; font-size: 17px; margin-bottom: 4px; }
.onbopt small { color: var(--muted); font-size: var(--fs-small); line-height: 1.4; display: block; }
.onbopt .rb { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); margin-top: 2px; box-sizing: border-box; }
.onbopt.on { box-shadow: inset 0 0 0 2px var(--acc), var(--shadow-1); }
.onbopt.on .rb { border: 6px solid var(--acc); }
.onbopt .tag.rec { background: var(--acc-soft); color: var(--acc-text); vertical-align: 2px; margin-left: 4px; }
.onbest { display: grid; gap: var(--s2); padding: 0 var(--s2) var(--s2); }
.onbest .seg button { font-size: 13.5px; }
.onbli { text-align: left; margin: 0; padding: var(--s4) var(--s4) var(--s4) 34px; display: grid; gap: var(--s2); font-size: var(--fs-small); line-height: 1.45; }
.tourscrim { position: fixed; inset: 0; z-index: 44; background: rgba(20, 20, 40, .22); animation: fade var(--t-med) ease; }
body.touring .tabbar { z-index: 45; pointer-events: none; }
.tabbar button.tourpick { color: var(--acc-text); background: rgba(255, 138, 61, .22); box-shadow: inset 0 0 0 2px var(--acc); }
.tourc { position: fixed; z-index: 46; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom, 0px)); width: min(440px, calc(100% - 24px)); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); border-radius: var(--r-xl); padding: var(--s5); display: grid; gap: var(--s3); box-shadow: var(--hl), var(--shadow-2); animation: tourin .3s var(--ease); max-height: calc(100dvh - var(--nav-h) - 60px); overflow-y: auto; }
.tourc .kick { font-size: var(--fs-label); font-weight: 700; color: var(--acc-text); text-transform: uppercase; letter-spacing: .05em; }
.tourc h2 { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.tourc h2 svg { width: 26px; height: 26px; color: var(--acc); }
.tourc p { margin: 0; line-height: 1.45; }
.tourad { display: grid; gap: var(--s2); }
.tourad > div { display: grid; grid-template-columns: 64px 1fr; gap: var(--s2); font-size: var(--fs-small); padding: 10px 12px; border-radius: var(--r-md); background: var(--fill-2); }
.tourad > div:first-child { background: var(--ok-soft); } .tourad > div:last-child { background: var(--danger-soft); }
.tourad b { font-weight: 750; }
.tourc .dots { display: flex; gap: 6px; }
.tourc .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.tourc .dots i.on { background: var(--acc); width: 18px; border-radius: 4px; }
@media (min-width: 900px) { .tourc { bottom: 28px; left: calc(50% + 60px); } body.touring .tabbar { z-index: 45; } }
@keyframes tourin { from { opacity: 0; transform: translate(-50%, 30px); } }
.seg.wrap { flex-wrap: wrap; }
.seg.wrap button { flex: 1 1 28%; min-width: 0; }
/* Plan: un solo lugar para cambiar todas las semanas */
.elist { display: grid; gap: 6px; }
.erow { all: unset; cursor: pointer; display: grid; grid-template-columns: 6px 1fr auto; gap: var(--s3); align-items: center; padding: 10px 12px; border-radius: var(--r-md); background: var(--fill-2); }
.erow:focus-visible { box-shadow: var(--focus); }
.erow .tb { width: 6px; align-self: stretch; border-radius: 3px; }
.erow b { display: block; font-size: 15.5px; font-weight: 700; }
.erow small { display: block; color: var(--muted); font-size: var(--fs-meta); line-height: 1.35; margin-top: 2px; }
.erow .price { text-align: right; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.erow .price small { font-weight: 500; margin: 0; }
.erow.on { background: #fff; box-shadow: inset 0 0 0 2px var(--acc), var(--shadow-1); }
.erow .tag.rec { background: var(--acc-soft); color: var(--acc-text); vertical-align: 1px; margin-left: 4px; font-size: 11px; }
.tb.t-mix { background: linear-gradient(var(--t-eco), var(--t-int), var(--t-pre)); }
.aviso { background: var(--warn-soft); color: var(--warn); border-radius: var(--r-sm); padding: 8px 12px; margin: 0; text-align: left; }
.aviso[hidden] { display: none; }
.shopday .seg { min-width: 0; } .shopday .seg button { min-width: 0; padding-inline: 2px; font-size: 13px; }
.card.avprecios { display: grid; gap: 6px; background: linear-gradient(150deg, #fff4dc, #ffe6c2); }
.card.avprecios p { margin: 0; color: #5c4320; }
.card.avprecios .btn { justify-self: start; margin-top: 4px; }
.invmsg { white-space: pre-wrap; margin: var(--s2) 0 0; padding: var(--s3); border-radius: var(--r-md); background: rgba(255, 255, 255, .7); line-height: 1.45; }

/* Alergias e intolerancias */
.tag.alg { background: var(--danger-soft); color: #a3221e; }
.aviso.alg { background: var(--danger-soft); color: #a3221e; }
.sheet .aviso.alg, .sheet .aviso.etiq { margin: 12px 0; }
.form fieldset.full { grid-column: 1 / -1; }
span.alg { color: #a3221e; font-weight: 650; }
.ingt tr.alg td:first-child { color: #a3221e; }
.ingt tr.alg td:first-child::before { content: "⚠ "; }
fieldset.algs { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
fieldset.algs legend { font-size: var(--fs-meta); font-weight: 650; color: var(--muted); padding: 0; margin-bottom: 8px; }
.algchk { display: flex; flex-wrap: wrap; gap: 6px; }
.form .algchk label { display: inline-flex; align-items: center; gap: 0; font-size: 14px; color: var(--ink); cursor: pointer; }
.algchk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.algchk span { padding: 8px 13px; border-radius: var(--r-pill); background: var(--fill); }
.algchk input:checked + span { background: var(--danger-soft); color: #a3221e; box-shadow: inset 0 0 0 1.5px #e9908c; }
.algchk input:checked + span::before { content: "✓ "; }
.algchk input:focus-visible + span { box-shadow: 0 0 0 3px rgba(255, 138, 61, .45); }

/* Alimentación (2.7.0): vegano y vegetariano, un menú por forma de comer */
.tag.vg { background: var(--m1-soft); color: var(--ok); }
.tag.vt { background: var(--m0-soft); color: var(--warn); }
.metac { display: grid; gap: 8px; }
.metac .seg button { font-size: 13px; padding-inline: 4px; }
.metac .form { background: none; border: 0; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.perfil .seg button { font-size: 13px; padding-inline: 4px; }
.menusel { margin-bottom: 10px; }
.menusel button { font-size: 13px; }
.menusc { display: grid; gap: 6px; }
.ocultos { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.menuh { margin: 14px 0 6px; }

/* ===== Imprimir (menú de la semana y recetas, hoja A4) =====
   Las hojas se arman en #print (fuera de #root) sólo al tocar "Imprimir"; en pantalla no se ven.
   Medidas en mm para que cada hoja sea exactamente una A4 (@page va en app.js: apaisada para el menú). */
.btn.imp { gap: 8px; } .btn.imp svg { width: 18px; height: 18px; }
.btn.imp:not(.sm) { width: 100%; margin-top: 18px; }
.impw { display: grid; gap: 6px; margin-top: 4px; }
.sheet .hd > .hdb { display: flex; gap: 8px; flex: none; }
#print { display: none; }
/* PDF en iPhone: las hojas se dibujan fuera de la pantalla (html2canvas necesita que se vean) y un aviso muestra el avance. */
#print.gen { display: block; position: absolute; left: -10000px; top: 0; width: max-content; pointer-events: none; }
.pdf-scrim { z-index: 60; }
.pdfw { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(340px, calc(100vw - 32px)); background: rgba(248, 248, 251, .97); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--glass-line); border-radius: 26px; box-shadow: var(--shadow-2); padding: 24px 20px 14px; display: grid; gap: 10px; text-align: center; justify-items: center; }
.pdfw h3 { font-size: 19px; } .pdfw p { margin: 0 0 4px; }
.pdfw .btn { width: 100%; justify-content: center; }
.pdf-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, var(--acc), var(--acc-2)); color: var(--on); }
.pdf-ico svg { width: 26px; height: 26px; } .pdf-ico.spin svg { animation: pdfpul 1.1s ease-in-out infinite; }
@keyframes pdfpul { 50% { transform: scale(.82); opacity: .6; } }
.pdf-bar { width: 100%; height: 6px; border-radius: 3px; background: var(--fill-2); overflow: hidden; } .pdf-bar i { display: block; height: 100%; background: var(--acc); transition: width .2s; }
@media print {
  body.imp > *:not(#print) { display: none !important; }
  html, body.imp { background: #fff !important; margin: 0; overflow: visible !important; height: auto !important; }
  body.imp::before, body.imp::after { display: none !important; }
  body.imp #print { display: block; }
}
#print, #print * { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-sizing: border-box; }
#print { color: var(--ink); font-family: var(--f-body); }
.hoja { width: 210mm; height: 296.5mm; padding: 13mm 14mm 11mm; overflow: hidden; position: relative; display: flex; flex-direction: column; gap: 5mm; background: #fff; break-after: page; page-break-after: always; }
#print.apaisado .hoja { width: 297mm; height: 209.5mm; padding: 10mm 11mm 8mm; gap: 4mm; }
.hoja:last-child { break-after: auto; page-break-after: auto; }
.hoja::before { content: ""; position: absolute; inset: 0 0 auto; height: 4.5mm; background: linear-gradient(90deg, var(--m0), var(--acc), var(--m2), var(--m3), var(--m1)); }
.hoja .brand { display: inline-flex; align-items: center; gap: 2mm; font-weight: 700; font-size: 10pt; color: var(--acc-text); white-space: nowrap; }
.hoja .marca { width: 7mm; height: 7mm; color: var(--acc); } .hoja .marca-c { fill: #d0603a; }
.p-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 6mm; }
.p-kick { font-size: 9.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.hoja h1 { font-family: var(--f-display); font-size: 24pt; line-height: 1.1; margin: 1.5mm 0 0; letter-spacing: -.01em; }
.hoja h2 { font-size: 14pt; margin: 0 0 3mm; text-transform: uppercase; letter-spacing: .06em; }
/* Menú: 7 días en columnas, una fila por comida con su color */
.p-grid { width: 100%; flex: 1; border-collapse: separate; border-spacing: 1.6mm; table-layout: fixed; margin: -1.6mm; width: calc(100% + 3.2mm); }
.p-grid thead th { font-size: 9pt; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: left; padding: 0 1mm 1mm; height: 9mm; }
.p-grid thead th b { display: block; color: var(--ink); font-size: 10.5pt; letter-spacing: .02em; }
.p-grid thead th.hoy b { color: var(--acc-text); }
.p-grid thead th span { font-size: 9pt; }
.p-grid tbody th { width: 24mm; text-align: left; vertical-align: middle; padding: 2mm; border-radius: 3mm; background: var(--mc); color: #fff; }
.p-grid tbody tr.k0 th { color: #3d2700; }
.p-grid tbody th b { display: block; font-size: 10.5pt; }
.p-grid tbody th span { font-size: 9pt; opacity: .9; }
.p-grid td { vertical-align: top; background: var(--mg); border-radius: 3mm; padding: 2mm; font-size: 8.6pt; line-height: 1.22; overflow: hidden; }
.p-grid td .pic { display: block; width: 13mm; height: 13mm; margin-bottom: 1mm; }
.p-grid td .pic .ilus, .p-rec .pic .ilus { width: 100%; height: 100%; display: block; }
.p-grid td b { display: block; font-weight: 600; }
.p-grid td small { display: inline-block; margin-top: 1mm; font-size: 7.5pt; font-weight: 700; color: #1f4f9c; background: rgba(255, 255, 255, .75); border-radius: 2mm; padding: .4mm 1.4mm; }
.p-grid td.vac { background: var(--fill-2); color: var(--muted); text-align: center; vertical-align: middle; font-size: 12pt; }
.p-ft { display: flex; gap: 8mm; font-size: 10pt; color: var(--muted); }
.p-ft span { display: inline-flex; align-items: center; gap: 2mm; } .p-ft i { width: 3mm; height: 3mm; border-radius: 50%; background: var(--acc-2); } .p-ft i.k { background: var(--m1); }
/* Receta: encabezado con el dibujo, ingredientes a la izquierda y pasos a la derecha */
.hoja.rec .p-hd { background: var(--mg); border-radius: 6mm; padding: 7mm 8mm; align-items: center; margin-top: 2mm; }
.hoja.rec .p-hd .pic { width: 58mm; height: 58mm; flex: none; }
.hoja.rec .p-hd .pic .ilus { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2mm 3mm rgba(30, 30, 70, .16)); }
.hoja.rec .p-kick { color: var(--ink); opacity: .7; }
.hoja.rec h1 { font-size: 32pt; }
.p-meta { margin-top: 4mm; font-size: 13pt; color: var(--ink); opacity: .8; }
.p-cols { display: grid; grid-template-columns: 74mm 1fr; gap: 9mm; align-items: start; }
.p-ing { background: var(--ms); border-radius: 5mm; padding: 6mm; }
.p-para { margin: -2mm 0 3mm; font-size: 11pt; color: var(--muted); }
.p-ing ul { list-style: none; margin: 0; padding: 0; }
.p-ing li { display: flex; justify-content: space-between; gap: 3mm; padding: 2.6mm 0; border-bottom: .3mm solid rgba(0, 0, 0, .08); font-size: 12.5pt; line-height: 1.25; }
.p-ing li:last-child { border-bottom: 0; } .p-ing li b { white-space: nowrap; }
.p-ing li.alg span { color: var(--danger); font-weight: 600; }
.p-how ol { margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.p-how li { counter-increment: paso; position: relative; padding: 0 0 6mm 13mm; font-size: 14pt; line-height: 1.45; }
.p-how li::before { content: counter(paso); position: absolute; left: 0; top: -.3mm; width: 9mm; height: 9mm; border-radius: 50%; background: var(--mc); color: #fff; font-weight: 800; font-size: 13pt; display: grid; place-items: center; }
.hoja.k0 .p-how li::before { color: #3d2700; }
.p-how .tip { margin-top: 2mm; background: var(--acc-soft); border-radius: 4mm; padding: 5mm 6mm; font-size: 12.5pt; line-height: 1.4; }
.hoja .aviso.alg { margin: 0; font-size: 10pt; }
.p-etiq { margin: 0; font-size: 8.5pt; color: var(--muted); }
.p-pie { display: flex; justify-content: flex-end; }
.p-notas { flex: 1; min-height: 0; border-radius: 5mm; border: .4mm dashed var(--line-strong); padding: 4mm 6mm; background: repeating-linear-gradient(transparent 0 9mm, var(--line) 9mm calc(9mm + .3mm)); background-origin: content-box; background-clip: content-box; }
.p-notas b { display: block; font-size: 10pt; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: #fff; }
.hoja .tag { font-size: 11pt; }

/* Comida extra (botón "+", 2.22.0) */
.iconbtn.sm { width: 32px; height: 32px; background: #fff; font-size: 18px; font-weight: 700; color: var(--acc-text); }
.pill { border: 0; background: var(--fill); border-radius: var(--r-pill); padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--ink); }
.pill.on { background: var(--acc-soft); color: var(--acc-text); }

.mastabs button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.mastabs svg { width: 16px; height: 16px; }
.masrow { display: flex; gap: var(--s3); align-items: flex-start; flex-wrap: wrap; }
.masrow > label { display: grid; gap: 4px; font-weight: 700; font-size: 15px; }
.masrow input[type="time"], .masq, .masit input { font: inherit; border: 0; background: var(--fill); border-radius: 12px; padding: 9px 12px; color: var(--ink); min-height: 40px; }
.masrow .grow { flex: 1; min-width: 200px; }
.masq { width: 100%; box-sizing: border-box; }
.maslist .alt { grid-template-columns: 1fr auto; align-items: center; }
.maslist .alt[hidden] { display: none; }
.masplato { display: grid; gap: 8px; }
.masplato label:not(.chk) { display: grid; gap: 4px; }
.masplato #mas-n { font: inherit; border: 0; background: var(--fill); border-radius: 12px; padding: 9px 12px; min-height: 40px; color: var(--ink); }
.masit { display: flex; align-items: center; gap: 8px; }
.masit input { width: 76px; text-align: right; padding: 7px 8px; min-height: 36px; }
.picx { display: grid; place-items: center; width: 100%; height: 100%; color: var(--mc); }
.picx svg { width: 44%; height: 44%; }
.tag.tuyo { background: var(--fill); color: var(--muted); text-transform: none; letter-spacing: 0; }
.tl.sorteado .tl-c > .open { cursor: default; }

/* Formulario de perfil: el dato que falta o está mal */
.form label.mal { color: var(--danger); }
.form label.mal input, .form label.mal select { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.pf-err { display: block; color: var(--danger); font-weight: 600; font-size: 13px; margin-top: 4px; }
p.pf-err { margin: 0; text-align: center; }

/* ===== Sorteo (2.19.0) ===== */
/* El dado flotante, arriba a la derecha, debajo de la barra de arriba. */
.fabsor { position: fixed; z-index: 24; right: max(14px, env(safe-area-inset-right, 0px)); top: calc(env(safe-area-inset-top, 0px) + 78px); width: 50px; height: 50px; border-radius: 50%; border: 0; display: grid; place-items: center; color: var(--on); background: linear-gradient(160deg, var(--acc), var(--acc-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 22px -8px rgba(242, 106, 31, .75); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--t-fast); }
.fabsor svg { width: 26px; height: 26px; }
.fabsor:active { transform: scale(.92) rotate(-12deg); }
.fabsor:focus-visible { box-shadow: var(--focus); }
@media (min-width: 900px) { .fabsor { top: 30px; right: 18px; width: 52px; height: 52px; } .topbar { padding-right: 56px; } }
.sor-q { display: grid; gap: 2px; }
.sor-q .chips { margin-top: 6px; }
.sor-res { display: grid; gap: var(--s3); background: var(--mg, var(--m1-g)); border-radius: var(--r-lg, 24px); padding: 16px; }
.sor-res h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; }
.sor-art { width: min(200px, 60%); justify-self: center; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .5); padding: 8px; }
.sor-art .ilus { width: 100%; height: 100%; display: block; }
.sor-res .macros div { background: rgba(255, 255, 255, .6); }
.tag.sor { background: var(--acc-soft); color: var(--acc-text); gap: 4px; text-transform: none; letter-spacing: 0; }
.tag.sor svg { width: 13px; height: 13px; }
.tl.sorteado .tl-c { border: 1.5px dashed color-mix(in srgb, var(--mc) 45%, transparent); border-radius: var(--r-lg, 24px); }
.tl.sorteado.nocomido .open { opacity: .45; }
.sor-eats { display: grid; gap: 6px; }
.sor-eat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sor-eat .who { font-weight: 700; font-size: 13.5px; color: var(--pc); min-width: 56px; }
.sor-eat .seg { flex: 1; max-width: 320px; }
.sor-eat .seg button[aria-pressed="true"]:first-child { background: var(--pc); color: var(--on); }
/* En el celular, lo de arriba a la derecha de la Hoy deja lugar al dado. */
@media (max-width: 899px) { .dayhead .hola { padding-right: 58px; } }
.sor-acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }

/* Legal y excluir la cuenta (2.21.0) */
.chk { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-weight: 500; font-size: 15px; line-height: 1.35; cursor: pointer; }
.chk input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--acc); }
.chk.mal { color: var(--danger); }
.legalchk { display: grid; gap: 6px; text-align: left; }
.legalav { display: grid; gap: 10px; border-color: var(--acc); }
.legalpg { display: grid; gap: var(--s3); max-width: 720px; margin: 0 auto; padding: var(--s4) var(--gutter); }
.legalbar { display: flex; }
.legaldoc { text-align: left; line-height: 1.5; }
.legaldoc h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; }
.legaldoc h2 { font-size: 17px; font-weight: 700; margin: 18px 0 6px; }
.legaldoc p, .legaldoc li { font-size: 15px; margin: 0 0 8px; }
.legaldoc ul { margin: 0 0 8px; padding-left: 20px; }
mark.ph { background: var(--danger-soft); color: var(--danger); border-radius: 4px; padding: 0 3px; font-weight: 650; }
/* Días que cubre el menú (2.25.0): casillas de los días y día libre en la tira de la semana. */
.diaschk input:checked + span { background: var(--acc-soft, #ffe6d3); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--acc, #ff8a3d); }
.strip button.libre { opacity: .5; }
.form .dlegend { padding: 0; margin-bottom: 6px; font-size: var(--fs-meta); font-weight: 650; color: var(--muted); }
/* En casa (2.29.0): filas sin casilla y la pestaña de Compras sin quedar debajo del botón "+". */
.it > .nm.grow { padding: 13px 0 13px 14px; min-height: 60px; }
.it .pr.muted { color: var(--muted); font-weight: 600; }
@media (max-width: 899px) { .view.compras > .col-a > .seg:first-child { margin-right: 58px; } }
/* Súper de hoy (2.31.0) */
.card.merc { display: grid; gap: 8px; }
.card.merc .seg { margin: 0; }
.it .cq.enm { color: #0d6b3a; }
.it .cq.enm a { color: inherit; font-weight: 650; }
.it .cq.enm.no, .mrow .cq.enm.no { color: var(--muted); font-style: italic; }
.mrow .cq.enm { display: block; color: #0d6b3a; }

/* Ticket por foto y ajuste de los tápers (2.33.0) */
.tkcard .row { align-items: center; gap: var(--s3); flex-wrap: nowrap; }
.tkcard .grow { display: grid; gap: 2px; }
.tkic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--acc-soft, #ffe7d6); color: var(--acc, #ef5f17); flex: none; }
.tkic svg { width: 22px; height: 22px; }
.tkbody { display: grid; gap: 12px; margin-top: 10px; }
.tkfoto { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.tkfoto svg { width: 20px; height: 20px; }
.tkfoto input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.tkconsejos { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.tkleyendo { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 24px 0; }
.tkbar { width: 100%; height: 8px; border-radius: 99px; background: rgba(0, 0, 0, .08); overflow: hidden; }
.tkbar i { display: block; height: 100%; background: var(--acc, #ef5f17); border-radius: 99px; transition: width .3s; }
.tkbar.anda i { animation: tkanda 1.4s ease-in-out infinite; }
@keyframes tkanda { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .tkbar.anda i { animation: none; width: 100% !important; opacity: .5; } }
.tktot { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tklist { display: grid; gap: 10px; }
.tki { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .7); box-shadow: var(--shadow-1); }
.tki.off { background: rgba(255, 255, 255, .45); }
.tki .tkt { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-family: ui-monospace, Menlo, monospace; }
.tki select, .tki input { width: 100%; min-width: 0; }
.tki .tkin { gap: 8px; flex-wrap: nowrap; }
.tki .tkin label { display: grid; gap: 2px; font-size: 12px; }
.tki .cq, .tki p { margin: 0; }
.tki > .lnk { justify-self: start; }
.tkfuera { color: var(--warn); }
.tkrz { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--ok-soft); color: var(--ok); }
.tkrz span { flex: 1 1 160px; font-weight: 600; }
.aviso.ok { background: var(--ok-soft); color: var(--ok); }
.tksug { display: grid; gap: 10px; }
.sugaj { display: grid; gap: 6px; }
.sugaj p { margin: 0; }
.ajact { display: grid; gap: 6px; }
.ajact .row { align-items: center; }
small.aj { color: var(--ok); font-weight: 600; margin-left: 4px; }
.tkdq { font-weight: 700; color: var(--warn); }
.lnk.tkign { color: var(--muted, #777); font-weight: 500; font-size: 13px; }
.tkfueras .tklist { margin-top: 8px; }
.tkfueras summary { font-weight: 600; }
/* Para qué platos es cada cosa de la lista (2.34.0) */
.it .nm .cq.para, .mrow .cq.para { display: flex; gap: 5px; align-items: flex-start; margin-top: 3px; color: #8a4a12; }
.cq.para svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.it .nm .cq.para b, .mrow .cq.para b { font-weight: 650; text-decoration: none; display: inline; font-size: inherit; }

/* ===== 3.0.0: revisión de diseño (menos cartones, lo principal primero) ===== */
/* El "+" va en la barra de arriba, al lado de la pílula, y ya no tapa el primer cartón. */
.tbr { display: flex; align-items: center; gap: 8px; flex: none; }
.topbar .fabsor { position: static; width: 42px; height: 42px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px -6px rgba(242, 106, 31, .7); }
.topbar .fabsor svg { width: 22px; height: 22px; }
@media (min-width: 900px) { .topbar { padding-right: var(--gutter); } .topbar .fabsor { width: 46px; height: 46px; } }
@media (max-width: 899px) { .view.compras > .col-a > .seg:first-child { margin-right: 0; } }
/* Hoy: anillos chicos arriba, botón de cambiar el día, la pregunta de las compras en una franja. */
.dayhead .diabtn { background: var(--glass-hi); box-shadow: var(--shadow-1); color: var(--acc-text); }
.minirings { display: flex; flex-wrap: wrap; gap: 8px; }
.mring { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: var(--r-pill); background: var(--glass-hi); box-shadow: var(--shadow-1); text-decoration: none; color: var(--ink); }
.mring svg { width: 34px; height: 34px; transform: rotate(-90deg); }
.mring circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.mring .tr { stroke: var(--pcs); } .mring .a1 { stroke: var(--pc); } .mring .t2 { stroke: var(--acc-soft); } .mring .a2 { stroke: var(--acc); }
.mring span { display: grid; line-height: 1.15; } .mring b { font-size: 13px; color: var(--pc); } .mring small { font-size: 12px; color: var(--muted); }
.repbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--acc-soft); font-size: 14.5px; font-weight: 600; }
.repbar .grow { min-width: 160px; }
.eatbtn:not(.on) i { box-shadow: inset 0 0 0 2px var(--pc); }
/* Plan: un resumen arriba, semanas con la tira de los 7 días, "Más de esta semana" y el calendario sólo si se pide. */
.plansum { display: grid; gap: 10px; }
.plansum .btn { justify-self: start; }
.psum { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; }
.psum span.grow { display: grid; gap: 2px; } .psum b { font-size: 15px; } .psum small { color: var(--muted); font-size: 13px; }
.psum .chev, .ahline .chev, .sech .chev, .dish .dh .chev { color: var(--line-strong); display: grid; transition: transform var(--t-fast); }
.psum .chev svg, .ahline .chev svg, .sech .chev svg, .dish .dh .chev svg { width: 16px; height: 16px; }
.card.month { display: grid; gap: 10px; }
.calseg { margin: 0; }
.week .h { grid-template-rows: auto auto; }
.week .tira { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: -2px; }
.week .tira > span { display: grid; justify-items: center; font-size: 12.5px; font-weight: 650; color: var(--ink); padding: 2px 0; border-radius: 8px; }
.week .tira > span small { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.week .tira > span.hoy { background: var(--acc-soft); color: var(--acc-text); }
.week .tira > span.libre { opacity: .45; }
.week .tira > span > i { display: flex; gap: 2px; height: 5px; margin-top: 1px; }
.week .tira i i { width: 5px; height: 5px; border-radius: 50%; display: block; }
.week .tira i.c { background: var(--acc-2); } .week .tira i.k { background: var(--m1); }
.wrecs .chips { margin-top: 6px; }
.wrecs .chip { border: 0; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.chip.k0 { background: var(--m0-soft); } .chip.k1 { background: var(--m1-soft); } .chip.k2 { background: var(--m2-soft, #ffe3ec); } .chip.k3 { background: var(--m3-soft); }
.wmas { justify-self: start; }
.wmasb { display: grid; gap: 10px; padding: 10px 0 0; border-top: 1px solid var(--line); }
/* Compras: el total con el súper de hoy y el ahorro adentro; una barra de acciones; ítems cerrados. */
.sumc { grid-template-columns: 1fr; }
.sumrow { display: grid; grid-template-columns: 96px 1fr; gap: var(--s4); align-items: center; }
.mercrow { display: grid; gap: 4px; }
.mercrow .seg button { min-height: 32px; font-size: 13.5px; }
.ahline { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-md); background: var(--m1-soft); color: #0d6b3a; font-weight: 700; font-size: 14px; }
.ahline[aria-expanded="true"] .chev { transform: rotate(90deg); }
.acbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; }
.acbar > button, .acbar > a { border: 0; border-radius: var(--r-md); background: var(--glass-hi); box-shadow: var(--shadow-1); display: grid; justify-items: center; gap: 3px; padding: 10px 4px 8px; font-size: 12.5px; font-weight: 650; color: var(--ink); text-decoration: none; cursor: pointer; }
.acbar > button:first-child { background: linear-gradient(160deg, var(--acc), var(--acc-2)); color: var(--on); }
.acbar svg { width: 22px; height: 22px; }
details.info { font-size: 14px; }
details.info summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; min-height: 36px; list-style: none; }
details.info summary::-webkit-details-marker { display: none; }
details.info summary svg { width: 18px; height: 18px; }
details.info p { margin: 4px 0 8px; color: var(--muted); }
.avprecios.corto { display: grid; gap: 8px; }
.avprecios.corto summary { cursor: pointer; list-style: none; } .avprecios.corto summary::-webkit-details-marker { display: none; }
.avprecios.corto .btn { justify-self: start; }
.aisle > h3 { padding: 0; }
.sech { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 8px; padding: 4px 2px; }
.sech > span:first-child { flex: 1; }
.sech[aria-expanded="true"] .chev { transform: rotate(90deg); }
.aisle.cerrada { opacity: .85; }
.it .itopen svg { transition: transform var(--t-fast); }
.it .itopen[aria-expanded="true"] svg { transform: rotate(90deg); }
.it.abierto { background: rgba(255, 255, 255, .55); }
.itacts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px 52px; }
.itacts .btn.on { background: var(--ele-soft); color: #1d5ed6; border-color: transparent; }
.it .cmp a.barato { text-decoration: none; }
details.basicos { display: grid; }
details.basicos > summary { cursor: pointer; display: flex; align-items: baseline; gap: 8px; justify-content: space-between; font-weight: 700; font-size: 17px; padding: 4px 2px 8px; }
/* Cocina: resumen del día, platos cerrados y "Empezar a cocinar". */
.cocsum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 12px; }
.dish .dh { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 72px 1fr auto; gap: var(--s4); align-items: center; width: 100%; }
.dish .dh .pic svg { width: 100%; height: auto; }
.dish .dh[aria-expanded="true"] .chev { transform: rotate(90deg); }
.dish.cerrado { gap: 6px; }
.dish .row .btn svg { width: 16px; height: 16px; }
.cocnav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; }
/* Perfil: las otras personas como ficha cerrada. */
details.pficha > summary { color: var(--ink); }
details.pficha .card { margin-top: 8px; box-shadow: none; }
/* Gastos: semanas sin compras en una línea. */
.gw.vacias { padding-top: 10px; }
/* Ítem cerrado: "Para: ..." en dos líneas como mucho. */
.it:not(.abierto) .nm .cq.para > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 3.0.1: plato de Cocina más compacto (nombre, veces y heladera/freezer en el mismo bloque, al lado del dibujo). */
.dish .dh { grid-template-columns: 56px 1fr auto; gap: 12px; }
.dish .dtx { display: grid; gap: 3px; min-width: 0; }
.dish .dh h3 { font-size: 16px; line-height: 1.25; }
.dish .dmeta { font-size: 12.5px; font-weight: 650; color: var(--muted); }
.dish .dtags { display: flex; flex-wrap: wrap; gap: 4px; }
.dish .dtags .tag { font-size: 11px; padding: 1px 7px; }
.dish .dh .pic { padding: 3px; }

/* ===== Valoraciones (0.3.3): estrellas chicas, del tamaño del texto ===== */
.stars { display: inline-flex; align-items: center; gap: 0; --st: #f2a516; }
.stars button { all: unset; box-sizing: border-box; cursor: pointer; width: 30px; height: 32px; display: grid; place-items: center; font-size: 19px; line-height: 1; color: rgba(60, 60, 67, .22); border-radius: 8px; transition: color var(--t-fast), transform var(--t-fast); }
.stars button.on { color: var(--st); }
.stars button:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.stars button:active { transform: scale(.88); }
.stars.ver i { font-style: normal; font-size: 15px; color: rgba(60, 60, 67, .22); letter-spacing: 1px; }
.stars.ver i.on { color: var(--st); }
.qtal { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13.5px; color: var(--muted); margin-top: -4px; }
.nchip { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: #b07200; font-variant-numeric: tabular-nums; }
.nchip.baja { color: var(--muted); }
.rect .pic { position: relative; }
.rect .nchip { position: absolute; right: 6px; bottom: 6px; font-size: 12px; padding: 2px 7px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .9); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.rect.baja { opacity: .6; }
.notasrec { display: grid; gap: 2px; margin: 4px 0 10px; }
.nfila { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.nfila .who { min-width: 64px; color: var(--muted); font-weight: 600; }
.nfuera { margin: 4px 0 0; }
.notabar { margin: 0; }
.notabar .pic { width: 40px; height: 40px; border-radius: 12px; overflow: hidden; flex: none; }
.notabar .pic svg { width: 100%; height: 100%; display: block; }
.notabar .grow { flex: 1 1 180px; }
details.nogustan > summary { color: var(--ink); gap: 6px; }
.ngrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.ngrow .lnk { text-align: left; }
/* Ticket: cada línea va a un producto de la lista (0.3.4) */
.tkliga { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 2px; }
.tkliga select { flex: 1 1 180px; min-width: 0; }
.tkflecha { font-weight: 700; color: var(--acc, #ef5f17); font-size: 18px; line-height: 1; }
.tkya { color: var(--ok, #2e7d32); font-weight: 600; }
.tkdeshacer { display: flex; gap: 8px; flex-wrap: wrap; }