/* Epulora — sistema visual v2.
   Papel cálido + espresso + mantequilla, con tomate y hoja como acentos.
   Móvil primero. Modo claro/oscuro (sistema o elegido en el perfil). */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-var.woff2") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dmsans-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/caveat-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --bg: #FBF7F1;
  --bg-deep: #F4EDE2;
  --surface: #FFFFFF;
  --surface-2: #F8F3EC;
  --surface-3: #F0E8DC;
  --text: #2A1A12;
  --text-soft: #5B4538;
  --muted: #7A6353;
  --border: #EEE5D8;
  --border-strong: #DCCEBB;
  --brand: #F5CF4E;          /* mantequilla */
  --on-brand: #2A1A12;
  --brand-soft: #FBE8A6;
  --brand-wash: #FEF6DD;
  --brand-deep: #8A5F0B;     /* dorado legible sobre claro */
  --dark: #2E1D14;           /* espresso: botones y bloques oscuros */
  --on-dark: #FBF7F1;
  --accent: #DE5530;         /* tomate */
  --accent-soft: #FCE2D8;
  --ok: #3C7536;
  --ok-soft: #E5EFDF;
  --sage: #EAF2E3;
  --peach: #FDEAE0;
  --danger: #B63E30;
  --danger-soft: #FBE7E2;
  --warn: #8A5F0B;
  --warn-soft: #FDF0C9;
  --nav-bg: #2E1D14;
  --nav-fg: rgba(251, 247, 241, .64);
  --ring: color-mix(in srgb, var(--brand) 70%, transparent);

  --radius: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --shadow-xs: 0 1px 2px rgba(46, 29, 20, .05);
  --shadow: 0 1px 2px rgba(46, 29, 20, .04), 0 6px 18px -6px rgba(46, 29, 20, .10);
  --shadow-md: 0 2px 6px rgba(46, 29, 20, .05), 0 18px 40px -14px rgba(46, 29, 20, .22);
  --shadow-lg: 0 30px 60px -20px rgba(46, 29, 20, .35);

  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-hand: "Caveat", "Segoe Print", cursive;
  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17110D; --bg-deep: #1E1611; --surface: #221913; --surface-2: #2A2018; --surface-3: #33281F;
    --text: #F6EDE1; --text-soft: #DCCBB6; --muted: #B29C86; --border: #3A2D23; --border-strong: #4F3F31;
    --brand: #F5CF4E; --on-brand: #23160F; --brand-soft: #4A3B17; --brand-wash: #2B2316; --brand-deep: #F5CF4E;
    --dark: #F6EDE1; --on-dark: #1C140F; --accent: #F07A52; --accent-soft: #44241A;
    --ok: #8DC47C; --ok-soft: #1F2E1B; --sage: #1F2A1B; --peach: #34211A;
    --danger: #F08A7C; --danger-soft: #3E1F1A; --warn: #F5CF4E; --warn-soft: #372D16;
    --nav-bg: #2A2018; --nav-fg: rgba(246, 237, 225, .6);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px -6px rgba(0, 0, 0, .45);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, .3), 0 18px 40px -14px rgba(0, 0, 0, .6);
    --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17110D; --bg-deep: #1E1611; --surface: #221913; --surface-2: #2A2018; --surface-3: #33281F;
  --text: #F6EDE1; --text-soft: #DCCBB6; --muted: #B29C86; --border: #3A2D23; --border-strong: #4F3F31;
  --brand: #F5CF4E; --on-brand: #23160F; --brand-soft: #4A3B17; --brand-wash: #2B2316; --brand-deep: #F5CF4E;
  --dark: #F6EDE1; --on-dark: #1C140F; --accent: #F07A52; --accent-soft: #44241A;
  --ok: #8DC47C; --ok-soft: #1F2E1B; --sage: #1F2A1B; --peach: #34211A;
  --danger: #F08A7C; --danger-soft: #3E1F1A; --warn: #F5CF4E; --warn-soft: #372D16;
  --nav-bg: #2A2018; --nav-fg: rgba(246, 237, 225, .6);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px -6px rgba(0, 0, 0, .45);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .3), 0 18px 40px -14px rgba(0, 0, 0, .6);
  --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text); font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent; overflow-x: hidden; font-feature-settings: "ss01";
}
img { max-width: 100%; display: block; }
a { color: var(--brand-deep); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a.btn:hover, a.card:hover, .nav a:hover, a.chip:hover, a.stat:hover, a.qa:hover, .meal-card a:hover, a.avatar:hover, a.nav-user:hover { text-decoration: none; }
h1, h2, h3 { line-height: 1.12; margin: 0 0 .5rem; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.06rem; letter-spacing: -.01em; }
p { margin: 0 0 .75rem; }
::selection { background: var(--brand-soft); color: var(--text); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 10px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.xs { font-size: .78rem; }
.hand { font-family: var(--font-hand); font-size: 1.35rem; font-weight: 600; color: var(--text-soft); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; }
.dot { color: var(--accent); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Estructura ---------- */
.app { min-height: 100vh; }
.shell { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: calc(var(--nav-h) + var(--safe-b) + 34px); }
.main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 8px 16px 16px; outline: none; }
.view { animation: view-in .35s var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }
.boot { display: grid; place-items: center; min-height: 60vh; }

.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 6px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 8px 16px; min-height: 62px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.topbar.scrolled { border-bottom-color: var(--border); }
.topbar h1 { font-size: 1.55rem; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.025em; }
.topbar .icon-btn:first-child { margin-left: -8px; }
.topbar .actions { display: flex; gap: 2px; align-items: center; }

/* Barra inferior flotante (móvil): la pestaña activa se despliega con su nombre; a la derecha, el botón «+» */
.nav {
  position: fixed; left: 12px; right: 86px; bottom: calc(10px + var(--safe-b)); z-index: 30; height: var(--nav-h);
  display: flex; justify-content: space-between; align-items: center; gap: 2px; padding: 7px;
  background: var(--nav-bg); border-radius: 24px; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.nav a {
  position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px;
  color: var(--nav-fg); font-size: .8rem; font-weight: 700; letter-spacing: -.005em; border-radius: 18px;
  transition: flex-grow .4s var(--ease), background .25s, color .2s;
}
.nav a .ni { position: relative; display: grid; place-items: center; transition: transform .25s var(--ease); }
.nav a .icon { width: 22px; height: 22px; }
.nav a .nl { display: none; white-space: nowrap; overflow: hidden; }
.nav a.active { flex-grow: 2.4; background: var(--brand); color: #2A1A12; box-shadow: 0 6px 16px -6px rgba(245, 207, 78, .7); }
.nav a.active .nl { display: inline; animation: nav-label .35s var(--ease); }
@keyframes nav-label { from { opacity: 0; transform: translateX(-4px); } }
.nav a:active .ni { transform: scale(.88); }
@media (max-width: 959px) { .nav a:not(.active):hover { color: #FBF7F1; } }
.nb { position: absolute; top: -7px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-style: normal; font-size: .62rem; font-weight: 800; line-height: 1; border: 2px solid var(--nav-bg); }
.nb[hidden] { display: none; }
.nav a.active .nb { border-color: var(--brand); }
@media (min-width: 560px) { .nav { left: 50%; right: auto; width: 460px; transform: translateX(calc(-50% - 38px)); } }

.quick-fab { position: fixed; z-index: 31; right: 12px; bottom: calc(10px + var(--safe-b)); width: var(--nav-h); height: var(--nav-h); border-radius: 22px; border: 0;
  display: grid; place-items: center; cursor: pointer; background: var(--brand); color: #2A1A12;
  box-shadow: var(--shadow-lg), inset 0 -3px 0 rgba(0, 0, 0, .1); transition: transform .2s var(--ease), border-radius .3s var(--ease); }
.quick-fab .icon { width: 28px; height: 28px; stroke-width: 2.5; transition: transform .35s var(--ease); }
.quick-fab:active { transform: scale(.94); }
.quick-fab.open { z-index: 101; border-radius: 50%; }
.quick-fab.open .icon { transform: rotate(135deg); }
.quick-fab[hidden], .no-nav .quick-fab { display: none; }
@media (min-width: 560px) { .quick-fab { right: auto; left: 50%; transform: translateX(calc(230px - 38px + 12px)); } .quick-fab:active { transform: translateX(calc(230px - 38px + 12px)) scale(.94); } }
@media (min-width: 960px) { .quick-fab { display: none; } }
.quick-sheet .modal-body { padding-bottom: 92px; }
@media (min-width: 700px) { .quick-sheet .modal-body { padding-bottom: 22px; } }
.quick-grid-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 520px) { .quick-grid-sheet { grid-template-columns: repeat(3, 1fr); } }
.qs-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 14px; border-radius: 20px; border: 1px solid transparent; background: var(--surface); box-shadow: var(--shadow-xs); font: inherit; color: var(--text); text-align: left; cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s; animation: up .3s var(--ease) both; }
.qs-item:nth-child(2) { animation-delay: .03s; } .qs-item:nth-child(3) { animation-delay: .06s; } .qs-item:nth-child(4) { animation-delay: .09s; } .qs-item:nth-child(5) { animation-delay: .12s; } .qs-item:nth-child(6) { animation-delay: .15s; }
.qs-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.qs-item b { font-size: .98rem; }
.qs-item span:last-child { font-size: .76rem; color: var(--muted); line-height: 1.3; }
.qs-emoji { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .7); font-size: 1.4rem; margin-bottom: 8px; }
.qs-menu { background: var(--brand-wash); } .qs-shop { background: var(--peach); } .qs-fridge { background: var(--sage); } .qs-fill { background: var(--brand-wash); } .qs-inspire { background: color-mix(in srgb, #DCCBEC 45%, var(--surface)); }
:root[data-theme="dark"] .qs-emoji { background: rgba(255, 255, 255, .08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qs-emoji { background: rgba(255, 255, 255, .08); } }
.nav .brand, .nav .nav-user, .nav .nav-label, .nav .nav-admin { display: none; }
.nav[hidden] { display: none !important; }
.no-nav .shell { padding-bottom: 0; }
.no-nav .topbar { display: none; }
.no-nav .main { max-width: none; padding: 0; }

@media (min-width: 960px) {
  .app { display: grid; grid-template-columns: 252px minmax(0, 1fr); }
  .no-nav .app { display: block; }
  .shell { padding-bottom: 0; min-width: 0; }
  .nav {
    position: sticky; top: 0; left: auto; right: auto; bottom: auto; height: 100vh; border-radius: 0; box-shadow: none; max-width: none; margin: 0;
    flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 2px;
    padding: 22px 14px 18px; border-right: 1px solid var(--border); background: var(--bg-deep);
  }
  .nav .brand { display: flex; align-items: center; gap: 10px; padding: 2px 10px 26px; font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; letter-spacing: -.03em; color: var(--text); flex: none; height: auto; border-radius: 0; }
  .nav .brand img { width: 36px; height: 36px; border-radius: 11px; box-shadow: var(--shadow); }
  .nav .nav-label { display: block; padding: 0 14px 6px; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .nav .nav-admin { display: flex; }
  .nav .nav-gap { margin-top: 18px; }
  .nav a { flex: none; height: auto; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 7px 10px; font-size: .95rem; color: var(--text-soft); border-radius: 14px; }
  .nav a .ni { width: 34px; height: 34px; border-radius: 10px; }
  .nav a .nl { display: inline; }
  .nav a.active { flex-grow: 0; }
  .nav a.active .nl { animation: none; }
  .nav { width: auto; transform: none; }
  .nb { border-color: var(--bg-deep); }
  .nav a.active .nb { border-color: var(--brand); }
  .nav a:hover { background: var(--surface-3); color: var(--text); }
  .nav a.active, .nav a.active:hover { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
  .nav a.active .ni { background: var(--brand); color: #2A1A12; }
  .topbar .avatar { display: none; }
  .topbar:has(h1:empty):not(:has(.icon-btn)) { display: none; }
  .main:has(.home-head) { padding-top: 32px; }
  .nav .nav-user { display: flex; margin-top: auto; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
  .nav .nav-user.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
  .nav .nav-user b { display: block; font-size: .9rem; line-height: 1.2; }
  .nav .nav-user span.xs { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav .nav-user .grow { min-width: 0; }
  .main { padding: 12px 36px 40px; }
  .topbar { padding: 18px 28px 12px 36px; min-height: 76px; }
  .topbar h1 { font-size: 2rem; }
}

.offline-banner { background: var(--warn-soft); color: var(--warn); text-align: center; font-size: .85rem; font-weight: 600; padding: 6px 12px; }

/* ---------- Componentes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px;
  border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 650; font-size: .95rem; letter-spacing: -.01em; cursor: pointer; white-space: nowrap;
  transition: transform .12s var(--ease), background .2s, box-shadow .2s, border-color .2s; text-decoration: none;
}
.btn:hover { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--border-strong) 60%, var(--text)); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn.primary { background: var(--brand); border-color: transparent; color: var(--on-brand); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08); }
.btn.primary:hover { background: color-mix(in srgb, var(--brand) 88%, #000); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08), var(--shadow); }
.btn.accent, .btn.dark { background: var(--dark); border-color: transparent; color: var(--on-dark); }
.btn.accent:hover, .btn.dark:hover { background: color-mix(in srgb, var(--dark) 88%, var(--accent)); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--surface-3); }
.btn.danger { color: var(--danger); }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: .86rem; }
.btn.lg { min-height: 54px; padding: 0 26px; font-size: 1.02rem; }
.btn.block { width: 100%; }
.icon-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: transparent; color: var(--text); cursor: pointer; flex: none; transition: background .15s, transform .12s;
  font-size: 1.1rem; text-decoration: none;
}
.icon-btn:hover { background: var(--surface-3); }
.icon-btn:active { transform: scale(.92); }
.icon-btn.active { color: var(--accent); }
.icon-btn.active .icon { fill: currentColor; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card.pad { padding: 18px; }
.card.tint-brand { background: var(--brand); border-color: transparent; color: var(--on-brand); }
.card.tint-sage { background: var(--sage); border-color: transparent; box-shadow: none; }
.card.tint-peach { background: var(--peach); border-color: transparent; box-shadow: none; }
.card.tint-dark { background: #2E1D14; border-color: transparent; color: #FBF7F1; }
.card.tint-dark .muted { color: #D9C6B3; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.section { margin: 32px 0 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.section h2 { margin: 0; font-size: 1.5rem; }
.section > a, .section .small { white-space: nowrap; }
.section > a { display: inline-flex; align-items: center; gap: 2px; font-size: .88rem; }

/* «Eyebrow»: etiqueta pequeña sobre los títulos de sección */
.label-pill, .eyebrow {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 6px; background: none;
  color: var(--brand-deep); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.label-pill::before, .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.label-pill.dark { color: var(--text-soft); }
.label-pill.dark::before { background: var(--text); box-shadow: 0 0 0 3px var(--surface-3); }
.label-pill.green { color: var(--ok); }
.label-pill.green::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }

.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: var(--surface-3); color: var(--text-soft); border: 1px solid transparent; white-space: nowrap; line-height: 1.4;
}
.chip .icon { width: 1.05em; height: 1.05em; vertical-align: -.15em; }
.chip.green { background: var(--ok-soft); color: var(--ok); }
.chip.orange { background: var(--brand-soft); color: var(--on-brand); }
:root[data-theme="dark"] .chip.orange { color: var(--brand); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip.orange { color: var(--brand); } }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
a.chip { font-weight: 600; transition: background .15s; }
a.chip:hover { background: var(--brand-soft); }
a.chip.green:hover { background: color-mix(in srgb, var(--ok-soft) 70%, var(--ok)); color: var(--ok); }
.chip.allergen-warn { background: var(--accent-soft); color: var(--accent); }
.allergens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.allergens > div { flex-basis: 100%; }
.ing-list .emo { width: 1.7em; flex: none; text-align: center; font-size: 1.05rem; }
.step-title { display: block; font-family: var(--font-display); font-size: 1.04rem; margin-bottom: 2px; }
.cook-step-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--text-soft); margin-top: 6px; }
.cook-scene { width: min(220px, 58vw); height: min(186px, 44vw); margin: 8px auto 14px; display: grid; place-items: center; border-radius: 28px; background: var(--surface-2); overflow: hidden; }
.cook-scene svg { width: 100%; height: 100%; }
.cook-scene-fallback { font-size: 4rem; animation: cook-scene-float 1.8s ease-in-out infinite; }
.cook-scene.loaded .cook-scene-fallback { display: none; }
@keyframes cook-scene-float { 50% { transform: translateY(-8px) rotate(-5deg); } }
.chip.tag { background: var(--surface-3); color: var(--text-soft); font-size: .72rem; padding: 3px 9px; }
a.chip.tag:hover { background: var(--brand-soft); }
.cuisine-tile {
  flex: none; width: 156px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 14px 14px 16px;
  font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s;
}
.cuisine-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cuisine-tile .emoji {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; margin-bottom: 10px; font-size: 1.6rem;
  background: var(--brand-wash);
}
.cuisine-tile b { font-family: var(--font-display); font-size: 1.04rem; font-weight: 600; }
.cuisine-tile .xs:last-child { margin-top: 6px; color: var(--brand-deep); }
button.chip { cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; padding: 7px 14px; border-color: var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); transition: background .15s, color .15s, border-color .15s; }
button.chip:hover { border-color: var(--border-strong); }
button.chip.on { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.scroll-x { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-snap-type: x proximity; scroll-padding: 16px; }
.scroll-x > * { scroll-snap-align: start; }
.scroll-x::-webkit-scrollbar { display: none; }
@media (min-width: 960px) { .scroll-x { margin: 0 -36px; padding-left: 36px; padding-right: 36px; scroll-padding: 36px; } }

/* Formularios */
label.field { display: block; }
label.field > span { display: block; font-size: .82rem; font-weight: 600; color: var(--text-soft); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 10px 14px; min-height: 48px; transition: border-color .15s, box-shadow .15s;
}
select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A6353' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
textarea { min-height: 90px; resize: vertical; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--border-strong) 70%, var(--text)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-deep); box-shadow: 0 0 0 4px var(--ring); }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--ok); flex: none; padding: 0; }
input[type="range"] { padding: 0; min-height: 0; accent-color: var(--brand-deep); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.search { position: relative; }
.search .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input { padding-left: 46px; border-radius: 999px; background: var(--surface); min-height: 52px; border-color: var(--border); box-shadow: var(--shadow); }

/* ---------- Miniaturas de receta ---------- */
.thumb { width: 100%; background: var(--surface-3); display: grid; place-items: center; overflow: hidden; position: relative; }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.thumb .emoji {
  display: grid; place-items: center; width: 56%; max-width: 150px; aspect-ratio: 1; border-radius: 50%;
  font-size: 2.6rem; line-height: 1;
  background: radial-gradient(circle at 50% 50%, #FFFDF8 0 58%, #F5ECDD 59% 63%, #FFFCF5 64%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 12px 24px -8px rgba(46, 29, 20, .28);
}
.thumb[class*="cat-"]::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .55), transparent 60%); pointer-events: none; }
.thumb.cat-desayuno { background: linear-gradient(160deg, #FCEFC7, #F7DC93); }
.thumb.cat-principal { background: linear-gradient(160deg, #FCE4D8, #F6C6AE); }
.thumb.cat-ensalada, .thumb.cat-guarnicion { background: linear-gradient(160deg, #E7F1DE, #CFE3BE); }
.thumb.cat-sopa { background: linear-gradient(160deg, #FBE8B6, #F3D07E); }
.thumb.cat-postre { background: linear-gradient(160deg, #FBE3E8, #F2C3CF); }
.thumb.cat-snack, .thumb.cat-entrante { background: linear-gradient(160deg, #F0E7F6, #DCCBEC); }
.thumb.cat-bebida, .thumb.cat-salsa { background: linear-gradient(160deg, #E2EFF4, #C6DEE8); }
.thumb.cat-pasta, .thumb.cat-arroz, .thumb.cat-horno { background: linear-gradient(160deg, #FCE4D8, #F6C6AE); }
.thumb.cat-guiso, .thumb.cat-curry { background: linear-gradient(160deg, #FBE8B6, #F3D07E); }
.thumb.cat-bowl, .thumb.cat-salteado { background: linear-gradient(160deg, #E7F1DE, #CFE3BE); }
.thumb.cat-sandwich, .thumb.cat-tacos { background: linear-gradient(160deg, #F0E7F6, #DCCBEC); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .thumb[class*="cat-"] { filter: brightness(.6) saturate(.9); } }
:root[data-theme="dark"] .thumb[class*="cat-"] { filter: brightness(.6) saturate(.9); }

/* ---------- Tarjetas de receta ---------- */
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 14px; }
@media (min-width: 700px) { .recipe-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 28px 20px; } }
.rcard {
  position: relative; display: flex; flex-direction: column; color: inherit; font-weight: 400;
  background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible;
}
.rcard .thumb { aspect-ratio: 1 / 1; border-radius: 22px; box-shadow: var(--shadow); isolation: isolate; }
.rcard:hover .thumb img { transform: scale(1.04); }
.rcard:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rcard .body { padding: 10px 2px 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rcard h3 { font-size: 1.02rem; font-weight: 600; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rcard .body .chips { position: absolute; top: 10px; left: 10px; right: 52px; z-index: 2; }
.rcard .body .chips .chip { background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-xs); color: var(--text); font-size: .7rem; padding: 3px 9px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rcard .body .chips .chip.allergen-warn { color: var(--accent); }
.rcard .meta { display: flex; align-items: center; gap: 3px 10px; color: var(--muted); font-size: .78rem; font-weight: 500; white-space: nowrap; flex-wrap: wrap; }
.rcard .meta > span { display: inline-flex; align-items: center; gap: 3px; }
.rcard .meta .icon { width: 14px; height: 14px; vertical-align: 0; }
.price { color: var(--ok); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rcard .meta .price { margin-left: auto; }
.rcard .fav { position: absolute; top: 8px; right: 8px; z-index: 2; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); width: 36px; height: 36px; box-shadow: var(--shadow-xs); }
.rcard .fav .icon { width: 18px; height: 18px; }
.rc-media { position: relative; }
.rc-link { position: absolute; inset: 0; z-index: 1; border-radius: 22px; }
.rc-link:focus-visible { outline-offset: 4px; }
.rc-add { position: absolute; right: 8px; bottom: 8px; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--text); box-shadow: var(--shadow); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .15s var(--ease), background .15s; }
.rc-add .icon { width: 18px; height: 18px; }
.rc-add i { position: absolute; right: 3px; top: 1px; width: 15px; height: 15px; border-radius: 50%; background: var(--brand); color: #2A1A12; font-style: normal; font-weight: 800; font-size: 12px; line-height: 15px; text-align: center; }
.rc-add:hover { transform: scale(1.08); background: var(--brand); color: #2A1A12; }
.rc-add:hover i { background: #2A1A12; color: var(--brand); }
@media (hover: hover) and (min-width: 700px) { .rc-add { opacity: 0; } .rcard:hover .rc-add, .rc-add:focus-visible { opacity: 1; } }
.rail-item { width: 172px; flex: none; }
@media (min-width: 960px) { .rail-item { width: 200px; } }

.list { list-style: none; margin: 0; padding: 0; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.list-item:last-child { border-bottom: 0; }
li.list-item[data-k]:hover, li.list-item[data-ci]:hover { background: var(--surface-2); }
.mini-thumb { width: 54px; height: 54px; border-radius: 15px; flex: none; }
.mini-thumb .emoji { width: 76%; font-size: 1.2rem; box-shadow: 0 4px 10px -4px rgba(46, 29, 20, .3); }

/* ---------- Inicio ---------- */
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 18px; }
.home-head h1 { font-size: clamp(2rem, 7vw, 2.9rem); font-weight: 600; letter-spacing: -.035em; margin: 2px 0 10px; }
.home-head h1 em { font-style: italic; font-weight: 500; color: var(--brand-deep); }
.pill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px 5px 8px; font-size: .82rem; font-weight: 600; color: var(--text-soft); box-shadow: var(--shadow-xs); }
.pill .icon { color: var(--brand-deep); }
a.pill:hover { text-decoration: none; border-color: var(--border-strong); }
.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--dark); color: var(--on-dark); font-weight: 700; font-size: .9rem; letter-spacing: .02em; flex: none; border: 2px solid var(--surface); box-shadow: var(--shadow); }
.avatar.butter { background: var(--brand); color: #2A1A12; }

/* Comidas de hoy */
.today-rail { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 10px; scroll-snap-type: x mandatory; scroll-padding: 16px; }
.today-rail::-webkit-scrollbar { display: none; }
@media (min-width: 960px) { .today-rail { margin: 0; padding: 2px 0 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); overflow: visible; } }
.meal-card { position: relative; flex: none; width: min(78vw, 300px); aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; scroll-snap-align: start; box-shadow: var(--shadow-md); background: var(--surface-3); isolation: isolate; }
@media (min-width: 960px) { .meal-card { width: auto; aspect-ratio: 5 / 6; } }
.meal-card > .thumb { position: absolute; inset: 0; height: 100%; }
.meal-card > .thumb .emoji { width: 46%; transform: translateY(-18%); font-size: 3rem; }
.meal-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 12, 8, 0) 35%, rgba(20, 12, 8, .78) 100%); z-index: 1; pointer-events: none; }
.meal-card .slot-tag { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(255, 253, 248, .92); color: #2A1A12; border-radius: 999px; padding: 4px 11px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.meal-card .meal-info { position: absolute; left: 16px; right: 72px; bottom: 16px; z-index: 2; color: #FFF8EE; }
.meal-card .meal-info h3 { font-size: 1.28rem; margin: 0 0 4px; color: #FFF8EE; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meal-card .meal-info .xs { color: rgba(255, 248, 238, .82); font-weight: 500; }
.meal-card .meal-link { position: absolute; inset: 0; z-index: 3; }
.meal-card .meal-cook { position: absolute; right: 14px; bottom: 14px; z-index: 4; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #2A1A12; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .5); transition: transform .15s var(--ease); }
.meal-card .meal-cook:hover { transform: scale(1.07); }
.meal-card .meal-cook .icon { width: 20px; height: 20px; fill: currentColor; margin-left: 2px; }
.meal-card.kind-off, .meal-card.kind-custom, .meal-card.kind-leftover { aspect-ratio: auto; min-height: 160px; }

.empty-day { display: flex; align-items: center; gap: 18px; padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px dashed var(--border-strong); }
.empty-day .plates { display: flex; flex: none; }
.empty-day .plates span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-size: 1.5rem; background: radial-gradient(circle, #FFFDF8 0 58%, #F5ECDD 59% 64%, #FFFCF5 65%); box-shadow: 0 8px 16px -8px rgba(46, 29, 20, .35); }
.empty-day .plates span + span { margin-left: -14px; }
.empty-day .plates span:nth-child(2) { transform: translateY(-8px); }
@media (max-width: 520px) { .empty-day { flex-direction: column; text-align: center; } }

/* Cifras */
.stat { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: inherit; font-weight: 400; transition: transform .2s var(--ease), box-shadow .2s; min-width: 0; }
a.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat .k { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stat .v { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat .v small { font-family: var(--font); font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 2px; }
.stat .s { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .s.ok { color: var(--ok); font-weight: 600; }
.stat .s.over { color: var(--accent); font-weight: 600; }
.stat .bar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-top: 10px; }
.stat .bar > i { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.stat .bar.brand > i { background: var(--brand-deep); }
.stat .bar.over > i { background: var(--accent); }

.ai-box { background: var(--brand); border-color: transparent; color: var(--on-brand); }
.ai-box .muted { color: color-mix(in srgb, var(--on-brand) 72%, transparent); }
.ai-banner { display: flex; gap: 14px; align-items: center; margin-top: 14px; padding: 18px; border-radius: var(--radius); color: #2A1A12; font-weight: 400; background: linear-gradient(120deg, #F5CF4E, #F7DE85); box-shadow: var(--shadow); }
.ai-banner .muted { color: rgba(42, 26, 18, .72); }
.ai-banner .spark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: rgba(255, 255, 255, .55); font-size: 1.4rem; flex: none; }


/* Accesos rápidos */
.qa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
@media (max-width: 560px) { .qa-grid { grid-template-columns: 1fr; } }
.qa { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 22px; color: inherit; font: inherit; font-weight: 400; text-align: left; cursor: pointer; border: 1px solid transparent; transition: transform .2s var(--ease), box-shadow .2s; width: 100%; }
.qa:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.qa .qa-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: rgba(255, 255, 255, .7); font-size: 1.5rem; flex: none; }
.qa h3 { margin: 0 0 1px; font-size: 1.02rem; }
.qa .small { color: var(--text-soft); }
.qa.brand { background: var(--brand-wash); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.qa.sage { background: var(--sage); }
.qa.peach { background: var(--peach); }
:root[data-theme="dark"] .qa .qa-ic { background: rgba(255, 255, 255, .08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qa .qa-ic { background: rgba(255, 255, 255, .08); } }

/* ---------- Inicio v2: rejilla, «Ahora», avisos, nutrición, ideas, temporada, consejo ---------- */
.home-grid { display: flex; flex-direction: column; gap: 18px; }
.home-main, .home-aside { display: contents; }
.hb { min-width: 0; margin: 0; }
.hb > .section:first-child { margin-top: 6px; }
.hb-ai { margin-top: 0; }
@media (min-width: 1100px) {
  .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
  .home-main, .home-aside { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
  .home-aside { position: sticky; top: 24px; }
  .main:has(.home-grid) { max-width: 1280px; }
}

/* «Ahora»: lo próximo que toca */
.now-card { position: relative; overflow: hidden; min-height: 360px; border-radius: 30px; background: #2E1D14; color: #FFF8EE; box-shadow: var(--shadow-md); isolation: isolate; display: flex; align-items: flex-end; }
@media (min-width: 760px) { .now-card { min-height: 400px; } }
.now-bg { position: absolute !important; inset: 0; height: 100%; z-index: -2; }
.now-bg .emoji { position: absolute; top: 22px; right: 22px; width: 118px; font-size: 3.4rem; }
@media (min-width: 760px) { .now-bg .emoji { width: 170px; font-size: 4.6rem; top: 34px; right: 40px; } }
.now-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 12, 8, .05) 20%, rgba(20, 12, 8, .55) 55%, rgba(20, 12, 8, .9) 100%); }
.now-body { padding: 22px; width: 100%; }
@media (min-width: 760px) { .now-body { padding: 28px 30px; max-width: 640px; } }
.now-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 253, 248, .92); color: #2A1A12; font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.now-card h2 { margin: 12px 0 8px; color: #FFF8EE; font-size: clamp(1.8rem, 6vw, 2.6rem); letter-spacing: -.035em; line-height: 1.05; }
.now-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .9rem; color: rgba(255, 248, 238, .88); }
.now-meta span { display: inline-flex; align-items: center; gap: 5px; }
.now-meta .icon { width: 16px; height: 16px; }
.now-hint { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 8px 14px; border-radius: 14px; background: rgba(245, 207, 78, .18); color: #F9DC80; font-size: .88rem; font-weight: 600; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.now-hint .icon { width: 17px; height: 17px; }
.now-actions { margin-top: 16px; gap: 8px; }
.btn.glass { background: rgba(255, 255, 255, .14); color: #FFF8EE; border-color: rgba(255, 255, 255, .28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn.glass:hover { background: rgba(255, 255, 255, .22); }
.now-card.empty { flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 24px; min-height: 320px; background: radial-gradient(120% 90% at 100% 0%, rgba(245, 207, 78, .25), transparent 55%), #2E1D14; }
.now-card.empty::after { display: none; }
.now-card.empty p { color: rgba(255, 248, 238, .75); max-width: 40ch; margin: 0 0 16px; }
.now-empty-art { position: absolute; top: 22px; right: 18px; display: flex; }
.now-empty-art span { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; font-size: 2rem; background: radial-gradient(circle, #FFFDF8 0 58%, #EADFCB 59% 64%, #FFFCF5 65%); box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .6); }
.now-empty-art span + span { margin-left: -18px; }
.now-empty-art span:nth-child(2) { transform: translateY(16px); }



/* Cifras y nutrición */
.nt-row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 8px; font-size: .8rem; }
.nt-row > span:first-child { color: var(--text-soft); font-weight: 600; }
.nt-bar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.nt-bar i { display: block; height: 100%; border-radius: inherit; }
.nt-row b { font-variant-numeric: tabular-nums; font-size: .82rem; }
.nt-row b small { color: var(--muted); font-weight: 500; }

/* Ideas para mañana */
.idea-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; }
.idea-grid::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .idea-grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; } }
.idea-card { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 12px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.idea-img .thumb { aspect-ratio: 4 / 3; border-radius: 16px; }
.idea-body { padding: 0 6px; display: grid; gap: 2px; }
.idea-body a { color: inherit; }
.idea-body b { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.idea-body .icon { width: 13px; height: 13px; vertical-align: -2px; }
.idea-card .btn { margin: 2px 6px 0; }



/* Atajos */
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 640px) and (max-width: 1099px) { .quick-grid { grid-template-columns: repeat(4, 1fr); } }
.qk { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 650; font-size: .92rem; cursor: pointer; text-align: left; transition: transform .15s var(--ease), box-shadow .2s; }
.qk:hover { text-decoration: none; box-shadow: var(--shadow); transform: translateY(-1px); }
.qk span { font-size: 1.3rem; }
.qk.brand { background: var(--brand-wash); border-color: transparent; }
.qk.sage { background: var(--sage); border-color: transparent; }
.qk.peach { background: var(--peach); border-color: transparent; }

/* Compatibilidad con piezas antiguas de la portada */
.greeting { text-align: center; margin: 6px 0 16px; }
.greeting h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); font-weight: 600; letter-spacing: -.025em; margin: 0 0 8px; }
.ring-card { display: flex; align-items: center; gap: 16px; }
.ring { width: 96px; height: 96px; flex: none; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; }
.ring .val b { font-family: var(--font-display); font-size: 1.35rem; }
.ring .val span { font-size: .68rem; color: var(--muted); }
.ok-line { color: var(--ok); font-weight: 600; font-size: .86rem; display: flex; align-items: center; gap: 4px; }
.hero-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 20px; color: #FBF7F1; background: #2E1D14; border-radius: var(--radius); }
.hero-card h2 { color: #FBF7F1; }
.day-card { display: flex; align-items: stretch; overflow: hidden; color: inherit; font-weight: 400; }
.day-strip { width: 54px; flex: none; background: var(--brand); color: var(--on-brand); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.day-card .day-body { flex: 1; min-width: 0; padding: 10px 14px; }

/* ---------- Planificador ---------- */
.week-nav { display: flex; align-items: center; gap: 4px; margin: 4px auto 6px; max-width: 460px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px; box-shadow: var(--shadow); }
.week-nav .label { flex: 1; text-align: center; font-weight: 700; font-size: .95rem; }
.week-nav .label .muted { font-weight: 500; }
.planner-stats { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
@media (min-width: 760px) { .planner-stats { grid-template-columns: 1fr 1fr; align-items: start; } }
.planner-stats > * { margin: 0 !important; }
.planner-stats > :empty { display: none; }
.planner-stats details > summary::-webkit-details-marker { display: none; }
.planner-stats details[open] > summary .chev { transform: rotate(90deg); }
.chev { transition: transform .2s; color: var(--muted); }
.mini-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--brand-wash); color: var(--brand-deep); flex: none; font-size: 1.15rem; }
.mini-ic.ok { background: var(--ok-soft); color: var(--ok); }
.mini-ic.tomato { background: var(--accent-soft); color: var(--accent); }
.day { margin-bottom: 14px; overflow: hidden; scroll-margin-top: 140px; }
.day-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 10px; }
.day-head h3 { font-size: 1.15rem; margin: 0; text-transform: capitalize; }
.dh-date { display: grid; place-items: center; align-content: center; width: 48px; height: 52px; border-radius: 15px; background: var(--surface-2); flex: none; line-height: 1; }
.dh-date b { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; }
.dh-date small { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.day.today { border-color: transparent; box-shadow: 0 0 0 2px var(--brand), var(--shadow-md); }
.day.today .dh-date { background: var(--brand); color: #2A1A12; }
.day.today .dh-date small { color: rgba(42, 26, 18, .7); }
.day.today .day-head h3::after { content: "hoy"; margin-left: 8px; font-family: var(--font); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #2A1A12; background: var(--brand); padding: 3px 8px; border-radius: 999px; vertical-align: .25em; }
.day.past { opacity: .72; }
.day.compact { box-shadow: none; background: transparent; border-style: dashed; }
.day.compact .day-head { padding: 8px 12px; }
.day.compact .dh-date { width: 40px; height: 42px; }
.day.compact h3 { font-size: 1rem; }
.day.past:hover { opacity: 1; }
.day-head .kcal-bar { width: 64px; margin: 0; }
.kcal-bar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-top: 4px; width: 90px; }
.kcal-bar > i { display: block; height: 100%; background: var(--ok); border-radius: inherit; }
.kcal-bar.over > i { background: var(--accent); }
.slot { display: flex; align-items: stretch; gap: 10px; padding: 8px 12px 8px 14px; border-top: 1px solid var(--border); }
.slot-label { width: 76px; flex: none; font-size: .68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding-top: 14px; }
.slot-items { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.entry { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 16px; background: var(--surface-2); border: 1px solid transparent; min-width: 0; cursor: pointer; transition: border-color .15s, background .15s; }
.entry:hover { border-color: var(--border-strong); background: var(--surface); }
.entry .mini-thumb { width: 44px; height: 44px; border-radius: 12px; }
.entry .t { font-weight: 650; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry .s { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry.kind-off { background: var(--peach); }
.entry.kind-leftover { background: var(--sage); }
.entry.kind-custom .mini-thumb, .entry.kind-off .mini-thumb, .entry.kind-leftover .mini-thumb { background: transparent; }
.add-slot { border: 0; background: transparent; color: var(--muted); border-radius: 14px; min-height: 38px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 0 10px; transition: background .15s, color .15s; }
.add-slot::after { content: "Añadir"; }
.add-slot .icon { width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--surface-3); }
.add-slot:hover { color: var(--text); background: var(--brand-wash); }
.add-slot:hover .icon { background: var(--brand); color: #2A1A12; }
.slot-items .entry + .add-slot { min-height: 30px; }
.slot-items .entry + .add-slot::after { content: "Otro plato"; }
@media (min-width: 1200px) {
  .week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
  .week-grid .day { margin: 0; }
  .week-grid .slot { flex-direction: column; gap: 4px; padding: 8px; }
  .week-grid .slot-label { width: auto; padding: 0 4px; }
  .week-grid .entry { padding: 8px; }
  .week-grid .entry .mini-thumb { display: none; }
  .week-grid .entry .t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .week-grid .add-slot::after, .week-grid .slot-items .entry + .add-slot::after { content: ""; }
  .week-grid .add-slot { justify-content: center; }
  .week-grid .day-head { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 10px 10px; }
  .week-grid .day-head .grow { width: 100%; }
  .week-grid .day-head h3 { font-size: 1.02rem; }
  .week-grid .day.today .day-head h3::after { display: none; }
  .week-grid .kcal-bar { width: 100%; }
  .week-grid .dh-date { width: 100%; height: auto; padding: 8px 0 6px; grid-auto-flow: row; }
  .main:has(.week-grid) { max-width: 1600px; }
}
.nutri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.nutri b { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.nutri span { font-size: .74rem; color: var(--muted); }

/* ---------- Detalle de receta ---------- */
.hero { margin: -8px -16px 18px; position: relative; }
.hero .thumb { aspect-ratio: 4 / 3; max-height: 460px; border-radius: 0 0 32px 32px; }
.hero .thumb[class*="cat-"] { aspect-ratio: auto; height: 240px; }
.hero .thumb .emoji { width: 170px; font-size: 4.4rem; }
@media (min-width: 700px) { .hero { margin: 0 0 22px; } .hero .thumb { border-radius: 32px; aspect-ratio: 16 / 9; box-shadow: var(--shadow-md); } }
.recipe-title { font-size: clamp(1.9rem, 5.4vw, 2.6rem); font-weight: 600; letter-spacing: -.03em; margin-bottom: 10px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; margin: 16px 0; }
.facts > div { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 12px 6px; box-shadow: var(--shadow-xs); }
.facts div + div { border-left: 1px solid var(--border); }
.facts b { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
.facts span { font-size: .74rem; color: var(--muted); line-height: 1.25; display: block; margin-top: 2px; }
.cost-card { transition: box-shadow .2s, transform .2s var(--ease); }
.cost-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.servings { display: flex; align-items: center; gap: 2px; background: var(--surface-3); border-radius: 999px; padding: 3px; }
.servings b { min-width: 3.6em; text-align: center; font-size: .9rem; font-variant-numeric: tabular-nums; }
.servings .icon-btn { background: var(--surface); box-shadow: var(--shadow-xs); }
.ing-list li { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.ing-list li:last-child { border-bottom: 0; }
.ing-list .q { min-width: 76px; font-weight: 700; color: var(--text); order: 2; margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ing-list li > span:last-child { display: inline-block; }
.ing-list select { min-height: 36px; padding: 4px 34px 4px 12px; font-size: .84rem; border-radius: 999px; background-color: var(--surface-2); border-color: var(--border); }
.ing-list li > span:last-child::first-letter, .shop-item .name::first-letter { text-transform: uppercase; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: step; position: relative; padding: 4px 0 22px 52px; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 12px;
  display: grid; place-items: center; background: var(--dark); color: var(--on-dark); font-family: var(--font-display); font-weight: 600; font-size: 1rem;
}
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 42px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--border); }
.two-col { display: grid; gap: 24px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 380px 1fr; align-items: start; gap: 36px; } .two-col > :first-child { position: sticky; top: 92px; } }

/* ---------- Recetario v2 ---------- */
.rx-top { display: grid; gap: 12px; margin-bottom: 4px; }
.rx-search input { min-height: 56px; font-size: 1.02rem; padding-left: 50px; box-shadow: var(--shadow-md); border-color: transparent; }
.rx-search .icon { left: 18px; width: 22px; height: 22px; }
.cat-pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 6px; }
.cat-pills::-webkit-scrollbar { display: none; }
@media (min-width: 960px) { .cat-pills { margin: 0 -36px; padding: 4px 36px 6px; } }
.cat-pill { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 76px; padding: 10px 10px 9px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); font: inherit; font-size: .76rem; font-weight: 650; cursor: pointer; transition: transform .15s var(--ease), background .15s, border-color .15s, box-shadow .2s; }
.cat-pill span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-size: 1.35rem; background: var(--surface-2); transition: background .15s; }
.cat-pill:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.cat-pill.on { background: var(--dark); border-color: var(--dark); color: var(--on-dark); box-shadow: var(--shadow); }
.cat-pill.on span { background: var(--brand); }
.rx-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; }
.rx-filters::-webkit-scrollbar { display: none; }
.rx-filters .chip { flex: none; }
.rx-filters .chip .icon { width: 15px; height: 15px; }
@media (min-width: 960px) { .rx-filters { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }
.rx-active { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rx-active:empty { display: none; }
.chip.act { background: var(--brand-wash); border: 1px solid color-mix(in srgb, var(--brand) 50%, transparent); color: var(--text); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 650; padding: 6px 10px 6px 12px; }
.chip.act .icon { width: 14px; height: 14px; }
.chip.act:hover { background: var(--brand-soft); }
.rx-rail .section { margin-top: 28px; }
.cuisine-row .cuisine-tile { width: 150px; }
.rx-own-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 28px; padding: 20px; border-radius: 24px; background: var(--brand-wash); border: 1px dashed color-mix(in srgb, var(--brand-deep) 35%, transparent); }
.rx-own-cta h3 { margin: 0 0 2px; }
.rx-own-cta p { margin: 0; }
.roc-art { font-size: 2.4rem; }
.rx-results { margin-top: 8px; }
.rx-results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 30px 0 16px; }
.rx-results-head h2 { margin: 0; font-size: 1.5rem; }
.rx-sort select { width: auto; min-height: 40px; padding: 4px 36px 4px 14px; border-radius: 999px; font-size: .88rem; font-weight: 600; background-color: var(--surface); border-color: var(--border); }
.rx-more-wrap { text-align: center; margin: 20px 0 8px; }

/* ---------- Ficha de receta v2 ---------- */
.rd { position: relative; }
.rd-hero { position: relative; overflow: hidden; margin: -8px -16px 0; min-height: 380px; display: flex; align-items: flex-end; color: #FFF8EE; isolation: isolate; }
.rd-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 12, 8, 0) 30%, rgba(20, 12, 8, .5) 62%, rgba(20, 12, 8, .88) 100%); }
.rd-photo { position: absolute !important; inset: 0; height: 100%; z-index: -2; }
.rd-photo .emoji { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); width: 150px; font-size: 4.2rem; }
.rd-hero-body { padding: 0 18px 22px; width: 100%; }
.rd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.glass-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 253, 248, .18); border: 1px solid rgba(255, 255, 255, .25); color: #FFF8EE; font-size: .78rem; font-weight: 650; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
a.glass-chip:hover { background: rgba(255, 253, 248, .3); text-decoration: none; }
.glass-chip .icon { width: 14px; height: 14px; }
.rd-hero .recipe-title { color: #FFF8EE; margin: 0; font-size: clamp(2rem, 7.5vw, 3.2rem); line-height: 1.02; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
.rd-hero p { margin: 10px 0 0; color: rgba(255, 248, 238, .86); max-width: 60ch; font-size: .98rem; }
@media (min-width: 700px) {
  .rd-hero { margin: 0; border-radius: 32px; min-height: 460px; box-shadow: var(--shadow-md); }
  .rd-hero-body { padding: 0 34px 32px; }
}
.rd-facts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: -26px 8px 0; }
@media (min-width: 700px) { .rd-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: -34px 24px 0; } }
.rd-fact { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); font: inherit; color: inherit; text-align: left; min-width: 0; }
button.rd-fact { cursor: pointer; }
button.rd-fact:hover { border-color: var(--border-strong); }
.rf-ic { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--brand-wash); color: var(--brand-deep); font-weight: 700; }
.rf-ic.tomato { background: var(--accent-soft); color: var(--accent); }
.rf-ic .icon { width: 18px; height: 18px; }
.rd-fact b { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-fact > span:last-child { font-size: .72rem; color: var(--muted); line-height: 1.25; }
.rd-chips { margin-top: 16px; }
.rd-warn { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--accent-soft); color: var(--text); font-size: .9rem; }
.rd-warn .icon { color: var(--accent); flex: none; }
.rd-variants { margin-top: 16px; }
.rd-cta { display: none; gap: 10px; margin-top: 18px; }
.rd-cta .btn.lg { min-height: 52px; }
@media (min-width: 960px) { .rd-cta { display: flex; } }
.rd-fav.on { color: var(--accent); }
.rd-fav.on .icon { fill: currentColor; }
.rd-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 20px; }
@media (min-width: 960px) { .rd-layout { grid-template-columns: 380px minmax(0, 1fr); gap: 36px; align-items: start; margin-top: 26px; } .rd-side { position: sticky; top: 92px; } }
.rd-side { display: grid; gap: 12px; }
.rd-card { padding: 18px; }
.rd-card h3 { margin: 0 0 10px; }
.rd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rd-card-head h2 { margin: 0; font-size: 1.35rem; }
.ing-check { list-style: none; margin: 0 0 14px; padding: 0; }
.ing-check li { border-bottom: 1px solid var(--border); padding: 2px 0; }
.ing-check li:last-child { border-bottom: 0; }
.ing-check label { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; cursor: pointer; }
.ing-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--border-strong); background: var(--surface); flex: none; display: grid; place-items: center; margin-top: 1px; cursor: pointer; transition: background .15s, border-color .15s; }
.ing-check input[type="checkbox"]:checked { background: var(--ok); border-color: var(--ok); }
.ing-check input[type="checkbox"]:checked::after { content: ""; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.ing-check .emo { width: 1.6em; flex: none; text-align: center; font-size: 1.05rem; }
.ing-txt { flex: 1; min-width: 0; }
.ing-name { font-weight: 600; }
.ing-name::first-letter { text-transform: uppercase; }
.ing-check .q { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.ing-check li.have .ing-name, .ing-check li.have .q { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.ing-check select { margin: 0 0 8px 32px; width: calc(100% - 32px); min-height: 36px; padding: 4px 34px 4px 12px; font-size: .84rem; border-radius: 999px; background-color: var(--surface-2); border-color: var(--border); }
.rn-kcal { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.rn-kcal b { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; letter-spacing: -.03em; }
.rn-kcal span { font-size: .8rem; color: var(--muted); }
.rd-nutri .nt-row { margin-top: 6px; }
.rd-steps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rd-steps-head h2 { margin: 0; font-size: 1.6rem; }
.rd-steps li { padding-bottom: 26px; font-size: 1.02rem; line-height: 1.6; }
.rd-steps .step-text { display: block; }
.rd-cook-card { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 16px; border-radius: 22px; background: var(--dark); color: var(--on-dark); font-weight: 400; box-shadow: var(--shadow-md); }
.rd-cook-card:hover { text-decoration: none; transform: translateY(-1px); }
.rd-cook-card b { display: block; font-size: 1rem; }
.rd-cook-card .grow > span { display: block; font-size: .82rem; opacity: .75; }
.rcc-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--brand); color: #2A1A12; flex: none; }
.rcc-ic .icon { fill: currentColor; margin-left: 2px; }
.rd-similar:empty { display: none; }
.glass-chip[hidden] { display: none; }
.glass-chip[data-hero-rating] .icon { fill: #F2B632; stroke: #F2B632; }
.rd-review { margin-top: 16px; padding: 18px; display: grid; gap: 12px; }
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rv-head h2 { margin: 0 0 2px; font-size: 1.15rem; }
.rv-stars { display: flex; gap: 2px; }
.rv-star { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: none; color: var(--border-strong, #CFC6B8); cursor: pointer; transition: transform .12s, color .12s; }
.rv-star .icon { width: 26px; height: 26px; }
.rv-star:hover { transform: scale(1.12); }
.rv-star.on { color: #E3A21A; }
.rv-star.on .icon { fill: currentColor; }
.rd-review textarea { min-height: 64px; resize: vertical; }
.rv-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rd-actionbar { position: sticky; z-index: 25; bottom: calc(var(--nav-h) + var(--safe-b) + 18px); display: flex; align-items: center; gap: 8px; margin-top: 22px; padding: 8px; border-radius: 22px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--border); box-shadow: var(--shadow-lg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.rd-actionbar .btn { min-height: 46px; }
.rd-actionbar .icon-btn { background: var(--surface-2); }
@media (min-width: 960px) { .rd-actionbar { display: none; } }
@media print { .rd-hero { color: #000; min-height: 0; } .rd-hero::after, .rd-photo { display: none; } .rd-hero .recipe-title, .rd-hero p { color: #000; text-shadow: none; } .rd-facts { margin: 10px 0; } .glass-chip { color: #000; border-color: #ccc; } }

/* ---------- Compra v2 ---------- */
.shop-hero, .mp-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 20px; border-radius: 28px; background: #2E1D14; color: #FBF7F1; box-shadow: var(--shadow-md); }
.shop-hero::before, .mp-hero::before { content: ""; position: absolute; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(245, 207, 78, .2), transparent 65%); pointer-events: none; }
.shop-hero h2, .mp-hero h2 { margin: 3px 0 4px; color: #FBF7F1; font-size: 1.55rem; letter-spacing: -.03em; }
.shop-hero p, .mp-hero p { margin: 0 0 12px; color: rgba(251, 247, 241, .72); font-size: .88rem; }
.shop-hero p b { color: #F5CF4E; }
.shop-hero a { color: #F5CF4E; }
.shop-hero .alm-kicker, .mp-hero .alm-kicker { color: #F5CF4E; }
.sh-ring { position: relative; width: 92px; height: 92px; flex: none; }
.sh-ring svg { width: 100%; height: 100%; }
.sh-ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.sh-ring b { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; }
.sh-ring small { font-size: .66rem; color: rgba(251, 247, 241, .65); margin-top: 3px; }
.sh-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.to-fridge { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 12px 12px 16px; border-radius: 20px; background: var(--sage); }
.to-fridge > span:first-child { font-size: 1.6rem; }
.to-fridge b { display: block; font-size: .92rem; }
.to-fridge .grow > span { display: block; font-size: .78rem; color: var(--text-soft); line-height: 1.35; }
@media (max-width: 520px) { .to-fridge { flex-wrap: wrap; } .to-fridge .btn { width: 100%; } }
.shop-add, .fr-add { display: grid; gap: 10px; margin: 14px 0 18px; }
.shop-add-row { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.shop-add-row:focus-within { border-color: var(--brand-deep); box-shadow: 0 0 0 4px var(--ring), var(--shadow); }
.shop-add-row input { border: 0; background: transparent; min-height: 44px; padding: 0; box-shadow: none !important; }
.shop-add-row input:focus { outline: none; }
.sa-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-wash); color: var(--brand-deep); flex: none; }
.sa-ic .icon { width: 16px; height: 16px; }
.basics { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.basics::-webkit-scrollbar { display: none; }
.basics .chip { flex: none; }
@media (min-width: 960px) { .basics { flex-wrap: wrap; margin: 0; padding: 0; } }
.aisle-card { margin-bottom: 12px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); overflow: hidden; }
.aisle-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: default; }
.aisle-card.complete .aisle-head, .pantry-card .aisle-head { cursor: pointer; }
.aisle-card.complete .aisle-head:hover, .pantry-card .aisle-head:hover { background: var(--surface-2); }
.ah-emoji { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface-2); font-size: 1.25rem; flex: none; }
.aisle-head b { display: block; font-size: .98rem; }
.ah-sub { display: block; font-size: .76rem; color: var(--muted); }
.ah-done { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; color: var(--ok); }
.ah-done .icon { width: 14px; height: 14px; }
.ah-count { font-size: .78rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); }
.aisle-card.complete { background: var(--surface-2); box-shadow: none; }
.aisle-card.complete .ah-emoji { background: var(--ok-soft); }
.aisle-card .chev { color: var(--muted); transition: transform .2s; }
.aisle-head[aria-expanded="true"] .chev { transform: rotate(90deg); }
.aisle-items { border-top: 1px solid var(--border); }
.si { display: flex; align-items: center; gap: 4px; padding: 0 6px 0 0; transition: background .15s; }
.si + .si { border-top: 1px solid var(--border); }
.si:hover { background: var(--surface-2); }
.si-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 6px 12px 14px; cursor: pointer; }
.si-main input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); flex: none; display: grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s, transform .2s var(--ease); }
.si-main input[type="checkbox"]:hover { border-color: var(--ok); }
.si-main input[type="checkbox"]:checked { background: var(--ok); border-color: var(--ok); transform: scale(1.06); }
.si-main input[type="checkbox"]:checked::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.si-emoji { width: 1.6em; text-align: center; font-size: 1.15rem; flex: none; }
.si-text { min-width: 0; }
.si-text .name { display: block; font-weight: 600; }
.si-text .name::first-letter { text-transform: uppercase; }
.si-sub { display: block; font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-qty { flex: none; text-align: right; line-height: 1.25; font-variant-numeric: tabular-nums; }
.si-qty b { display: block; font-size: .86rem; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); }
.si-qty .price { display: block; font-size: .72rem; margin-top: 2px; padding-right: 4px; }
.si-edit { width: 34px; height: 34px; color: var(--muted); }
.si.checked .name { text-decoration: line-through; text-decoration-color: var(--muted); color: var(--muted); }
.si.checked .si-emoji, .si.checked .si-qty { opacity: .5; }
.si.pantry { opacity: .7; }
.store-mode .si-main { padding-top: 16px; padding-bottom: 16px; }
.store-mode .si-text .name { font-size: 1.08rem; }
.store-mode .si-main input[type="checkbox"] { width: 30px; height: 30px; }
.taken-row { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-bottom: 12px; padding: 10px; border-radius: 16px; border: 1px dashed var(--border-strong); background: transparent; color: var(--ok); font: inherit; font-size: .86rem; font-weight: 650; cursor: pointer; }
.taken-row .icon { width: 16px; height: 16px; }
.shop-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 4px; }
.shop-empty { text-align: center; padding: 34px 20px; border-radius: 28px; background: var(--surface); border: 1px dashed var(--border-strong); }
.shop-empty h2 { margin: 6px 0 6px; }
.shop-empty p { color: var(--muted); max-width: 40ch; margin: 0 auto 18px; }
.se-art { display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 10px; border-radius: 50%; font-size: 2.6rem; background: radial-gradient(circle, #FFFDF8 0 58%, #F5ECDD 59% 64%, #FFFCF5 65%); box-shadow: 0 14px 26px -12px rgba(46, 29, 20, .4); }

/* ---------- Nevera v2 ---------- */
.fr-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px; border-radius: 26px; background: linear-gradient(140deg, #E3F0F4, var(--surface) 70%); border: 1px solid var(--border); box-shadow: var(--shadow); }
:root[data-theme="dark"] .fr-hero { background: linear-gradient(140deg, #1B2A30, var(--surface) 70%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fr-hero { background: linear-gradient(140deg, #1B2A30, var(--surface) 70%); } }
.fr-stat { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.fr-stat b { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.fr-stat span { font-size: .72rem; color: var(--muted); font-weight: 600; text-align: center; }
.fr-stat.warn b { color: var(--accent); }
.fr-msg { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 4px 2px 0; font-size: .85rem; color: var(--text-soft); }
.fr-msg .icon { width: 17px; height: 17px; flex: none; color: var(--accent); }
.fr-group { margin-bottom: 18px; }
.fr-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 4px 10px; }
.fr-group-head h3 { margin: 0; font-size: 1.12rem; display: inline-flex; align-items: center; gap: 8px; }
.fr-group-head .count { font-family: var(--font); font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-soft); }
.fr-now .fr-group-head h3 { color: var(--accent); }
.fr-now .fr-group-head .count { background: var(--accent-soft); color: var(--accent); }
.fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fr-item { position: relative; }
.fr-main { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 14px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-xs); font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s, border-color .15s; min-height: 132px; }
.fr-main:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.fr-now .fr-main { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: linear-gradient(160deg, var(--accent-soft), var(--surface) 70%); }
.fr-emoji { font-size: 1.9rem; line-height: 1; margin-bottom: 6px; }
.fr-name { font-weight: 650; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 26px; }
.fr-name::first-letter { text-transform: uppercase; }
.fr-qty { font-size: .78rem; color: var(--muted); }
.fr-days { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding: 3px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--surface-3); color: var(--text-soft); }
.fr-days .icon { width: 13px; height: 13px; }
.fr-days.d-now { background: var(--accent); color: #fff; }
.fr-days.d-week { background: var(--warn-soft); color: var(--warn); }
.fr-days.d-later { background: var(--ok-soft); color: var(--ok); }
.fr-days.add { background: transparent; border: 1px dashed var(--border-strong); color: var(--muted); }
.fr-used { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.fr-used .icon { width: 16px; height: 16px; }
.fr-used:hover { background: var(--ok); border-color: var(--ok); color: #fff; }
.cook-what { margin-top: 26px; padding: 20px; border-radius: 28px; background: var(--brand-wash); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); display: grid; gap: 12px; }
.cw-head { display: flex; gap: 14px; align-items: flex-start; }
.cw-head h2 { margin: 2px 0 4px; font-size: 1.45rem; }
.cw-head p { margin: 0; }
.cw-art { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--surface); font-size: 1.8rem; flex: none; box-shadow: var(--shadow-xs); }
.cw-try { display: flex; gap: 8px; }
.cw-try .search { flex: 1; }
.cw-try .search input { min-height: 46px; box-shadow: none; }
[data-suggest] { margin-top: 16px; }
.fr-sug { position: relative; display: flex; flex-direction: column; gap: 6px; }
.fr-sug .match-badge { position: absolute; z-index: 4; display: grid; place-items: center; top: 10px; left: auto; right: 10px; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--text); font-size: .78rem; font-weight: 800; box-shadow: var(--shadow); border: 3px solid var(--brand); }
.fr-sug .match-badge.hi { border-color: var(--ok); color: var(--ok); }
.fr-sug .rcard .fav { right: 60px; }
.fr-sug-info { display: grid; gap: 4px; padding: 0 2px; }
.fr-sug-info .chip { justify-self: start; }
.fr-sug-info .chip .icon { width: 13px; height: 13px; }

/* ---------- Meal prep v2 ---------- */
.mp-hero { display: block; padding: 22px; }
.mp-hero h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
.mp-ranges { position: relative; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 4px -22px 8px; padding: 0 22px; }
.mp-ranges::-webkit-scrollbar { display: none; }
.mp-range { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 14px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); color: #FBF7F1; font: inherit; font-size: .86rem; font-weight: 650; cursor: pointer; }
.mp-range small { font-size: .7rem; font-weight: 500; opacity: .7; }
.mp-range.on { background: #F5CF4E; border-color: #F5CF4E; color: #2A1A12; }
.mp-custom { position: relative; margin: 4px 0 12px; }
.mp-custom summary { cursor: pointer; font-size: .82rem; color: #F5CF4E; font-weight: 650; }
.mp-custom .grid-2 { margin-top: 10px; }
.mp-custom label.field > span { color: rgba(251, 247, 241, .75); }
.mp-stats { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mp-stats:empty { display: none; }
@media (max-width: 520px) { .mp-stats { grid-template-columns: 1fr 1fr; } }
.mp-stats > div { padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .08); }
.mp-stats b { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: #F5CF4E; line-height: 1.15; }
.mp-stats span { font-size: .74rem; color: rgba(251, 247, 241, .7); }
.mp-ai { margin-top: 14px; }
.mp-step { margin-top: 18px; padding: 18px; border-radius: 26px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.mp-step-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.mp-step-head h2 { margin: 2px 0 2px; font-size: 1.3rem; }
.mp-step-head p { margin: 0; font-size: .86rem; color: var(--muted); }
.mp-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--dark); color: var(--brand); font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; flex: none; }
:root[data-theme="dark"] .mp-n { color: #2A1A12; background: var(--brand); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mp-n { color: #2A1A12; background: var(--brand); } }
.mp-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mp-r { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 18px; background: var(--surface-2); }
.mp-r .mini-thumb { width: 60px; height: 60px; border-radius: 16px; }
.mp-title { display: block; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.mp-bar { display: flex; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin: 8px 0 4px; }
.mp-bar i { display: block; height: 100%; }
.mp-bar .b-prep, .mp-legend .b-prep { background: var(--brand-deep); }
.mp-bar .b-cook, .mp-legend .b-cook { background: var(--accent); }
.mp-meals { margin-top: 6px; gap: 4px; }
.mp-meals .chip { font-size: .68rem; }
.mp-legend { display: flex; gap: 14px; margin-top: 10px; }
.mp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mp-legend i { width: 12px; height: 8px; border-radius: 4px; display: inline-block; }
.mp-check { margin: 0; }
.mp-check label { padding-left: 2px; }
.mp-ings { list-style: none; margin: 0; padding: 0; columns: 2 260px; column-gap: 24px; }
.mp-ings li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); break-inside: avoid; font-size: .9rem; }
.mp-ings .q { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-recipe { border-radius: 18px; background: var(--surface-2); margin-bottom: 8px; overflow: hidden; }
.mp-recipe summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; cursor: pointer; list-style: none; }
.mp-recipe summary::-webkit-details-marker { display: none; }
.mp-recipe summary .mini-thumb { width: 48px; height: 48px; border-radius: 12px; }
.mp-recipe summary b { display: block; }
.mp-recipe summary .chev { color: var(--muted); transition: transform .2s; }
.mp-recipe[open] summary .chev { transform: rotate(90deg); }
.mp-recipe-body { padding: 4px 16px 16px; display: grid; gap: 14px; }
@media (min-width: 900px) { .mp-recipe-body { grid-template-columns: 320px 1fr; align-items: start; } }
.mp-store { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.mp-store-item { display: grid; gap: 4px; padding: 14px; border-radius: 18px; background: var(--sage); }
.mp-store-item .chips { margin-top: 4px; }
.mp-store-item .chip { font-size: .68rem; background: rgba(255, 255, 255, .6); }
@media print { .shop-hero, .to-fridge, .mp-ranges, .mp-custom { display: none !important; } .mp-hero { background: none; color: #000; box-shadow: none; } .mp-hero h2, .mp-stats b, .mp-stats span { color: #000; } .mp-step { box-shadow: none; break-inside: avoid; } .si-edit { display: none; } }

/* ---------- Lista de la compra ---------- */
.aisle { margin-bottom: 18px; }
.aisle h3 { font-family: var(--font); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 8px 6px; }
.aisle > .card { padding: 4px 6px; display: flex; flex-direction: column; gap: 0; }
.shop-item { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 14px; background: transparent; transition: background .15s; }
.shop-item + .shop-item { box-shadow: 0 -1px 0 var(--border); }
.shop-item:hover { background: var(--surface-2); }
.shop-item label { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: pointer; }
.shop-item .name { font-weight: 600; display: inline-block; }
.shop-item .qty { color: var(--text-soft); font-size: .86rem; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.shop-item.checked .name { text-decoration: line-through; text-decoration-color: var(--muted); color: var(--muted); }
.shop-item.checked { opacity: .7; }
.shop-item.pantry { opacity: .6; }
.shop-item input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); cursor: pointer; display: grid; place-items: center; transition: background .15s, border-color .15s, transform .15s var(--ease); }
.shop-item input[type="checkbox"]:hover { border-color: var(--ok); }
.shop-item input[type="checkbox"]:checked { background: var(--ok); border-color: var(--ok); transform: scale(1.05); }
.shop-item input[type="checkbox"]:checked::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.progress { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--ok); border-radius: inherit; transition: width .4s var(--ease); }

/* ---------- Nevera ---------- */
.match { font-weight: 700; color: var(--ok); }
.days-left { font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.days-left .icon { width: 13px; height: 13px; vertical-align: 0; }
.days-left.soon { color: var(--accent); }
.days-left.past { color: var(--danger); }

/* ---------- Modal / hoja ---------- */
.backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(28, 16, 10, .48); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
.modal {
  background: var(--bg); width: 100%; max-width: 640px; max-height: 92vh; display: flex; flex-direction: column;
  border-radius: 28px 28px 0 0; box-shadow: var(--shadow-lg); animation: up .3s var(--ease); padding-bottom: var(--safe-b);
}
.modal::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 99px; background: var(--border-strong); margin: 8px auto 0; }
.modal-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px 22px; }
.modal-head h2 { flex: 1; margin: 0; font-size: 1.4rem; }
.modal-body { padding: 4px 22px 22px; overflow-y: auto; }
.modal-body .list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 22px; border-top: 1px solid var(--border); }
@media (min-width: 700px) { .backdrop { align-items: center; } .modal { border-radius: 28px; } .modal::before { display: none; } .modal-head { padding-top: 18px; } }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(40px); opacity: .4; } }

.toasts { position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 24px); transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
@media (min-width: 960px) { .toasts { bottom: 24px; } }
.toast { background: #2E1D14; color: #FBF7F1; padding: 12px 14px 12px 18px; border-radius: 18px; box-shadow: var(--shadow-lg); font-size: .92rem; font-weight: 500; animation: up .25s var(--ease); pointer-events: auto; display: flex; align-items: center; gap: 10px; }
.toast.error { background: var(--danger); color: #fff; }
.toast button { margin-left: auto; background: var(--brand); color: #2A1A12; border: 0; border-radius: 999px; padding: 6px 14px; font: inherit; font-weight: 700; cursor: pointer; }

.spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--brand-deep); animation: spin .8s linear infinite; }
.spinner.sm { width: 18px; height: 18px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; padding: 44px 16px; color: var(--muted); }
.empty .big { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; font-size: 2.4rem; background: radial-gradient(circle, #FFFDF8 0 58%, #F5ECDD 59% 64%, #FFFCF5 65%); box-shadow: 0 12px 24px -10px rgba(46, 29, 20, .35); }
.empty p { color: var(--text-soft); }
.skeleton { background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: var(--radius); }
@keyframes shimmer { to { background-position: -200% 0; } }
.ai-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 10px; text-align: center; }

/* ---------- Acceso (entrar / crear cuenta) ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 960px) { .auth-wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.auth-art { display: none; position: relative; overflow: hidden; background: #2E1D14; color: #FBF7F1; padding: 48px; flex-direction: column; justify-content: space-between; }
@media (min-width: 960px) { .auth-art { display: flex; } }
.auth-art .brand-row { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: #FBF7F1; }
.auth-art .brand-row img { width: 40px; height: 40px; border-radius: 12px; }
.auth-art h2 { font-size: clamp(2.2rem, 3.4vw, 3.2rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.04; color: #FBF7F1; max-width: 13ch; margin: 0 0 16px; }
.auth-art h2 em { color: #F5CF4E; font-weight: 500; }
.auth-art p { color: rgba(251, 247, 241, .72); max-width: 40ch; }
.auth-art ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.auth-art li { display: flex; gap: 10px; align-items: center; color: rgba(251, 247, 241, .88); font-weight: 500; }
.auth-art li span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(245, 207, 78, .14); color: #F5CF4E; flex: none; }
.auth-art .plates { position: absolute; right: -56px; top: 50%; transform: translateY(-50%); display: grid; gap: 18px; pointer-events: none; }
.auth-art > div:not(.plates) { position: relative; z-index: 1; max-width: min(40ch, calc(100% - 150px)); }
.auth-art .plates span { display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%; font-size: 4rem; background: radial-gradient(circle, #FFFDF8 0 58%, #EADFCB 59% 63%, #FFFCF5 64%); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .6); }
.auth-art .plates span:nth-child(2) { transform: translateX(-46px); }
.auth-art .art-foot { font-size: .82rem; color: rgba(251, 247, 241, .55); }
.auth-side { display: flex; flex-direction: column; justify-content: center; padding: calc(24px + env(safe-area-inset-top, 0px)) 20px 32px; }
.auth { width: 100%; max-width: 420px; margin: 0 auto; }
.auth-back { display: inline-flex; align-items: center; gap: 4px; font-size: .88rem; color: var(--text-soft); margin-bottom: 28px; }
.auth .logo { width: 64px; height: 64px; border-radius: 20px; margin: 0 0 16px; box-shadow: var(--shadow-md); }
.auth h1 { font-size: 2.3rem; font-weight: 600; letter-spacing: -.035em; margin-bottom: 6px; }
.auth .lede { color: var(--muted); margin-bottom: 22px; }
.auth .card { padding: 8px; border-radius: 26px; }
.auth form { padding: 10px 12px 14px; }
.auth .foot-note { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; margin-top: 18px; }
@media (min-width: 960px) { .auth .logo { display: none; } .auth-back { margin-bottom: 40px; } }
.auth .auth-pad { padding: 14px 12px; }
.link-btn { padding: 0; border: 0; background: none; color: var(--brand-deep); font: inherit; font-weight: 600; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn.small { font-size: .86rem; }
.link-btn:disabled { opacity: .6; cursor: default; }
.auth-forgot { display: flex; justify-content: flex-end; margin-top: -4px; }
.auth-forgot a, .auth-alt a { font-size: .88rem; font-weight: 600; color: var(--text-soft); }
.auth-alt { display: flex; justify-content: center; margin-top: 18px; }
.auth-alt a { display: inline-flex; align-items: center; gap: 4px; }
.auth-badge { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 22px; background: var(--brand-soft); color: var(--on-brand); box-shadow: var(--shadow-xs); }
.auth-badge .icon { width: 30px; height: 30px; }
.auth-badge.warn { background: var(--accent-soft); color: var(--accent); }
.auth .lede b { color: var(--text); word-break: break-all; }
.auth-tips { list-style: none; display: grid; gap: 8px; margin: 0 0 20px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-2); font-size: .9rem; color: var(--text-soft); }
.auth-tips li { display: flex; align-items: flex-start; gap: 8px; }
.auth-tips .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--muted); }
.auth-tips a { font-weight: 600; }
.auth-actions { display: grid; gap: 10px; }
.auth-loading { display: flex; align-items: center; gap: 12px; padding: 40px 0; color: var(--muted); }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 50px; }
.pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 12px; background: none; color: var(--muted); cursor: pointer; }
.pw-eye:hover { background: var(--surface-2); color: var(--text); }
.pw-eye[aria-pressed="true"] { color: var(--brand-deep); }
.pw-eye .icon { width: 20px; height: 20px; }
.pw-meter { display: flex; align-items: center; gap: 10px; margin-top: -6px; font-size: .8rem; color: var(--muted); }
.pw-meter i { flex: 1; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.pw-meter b { display: block; height: 100%; width: var(--w, 0%); background: var(--c, var(--danger)); border-radius: inherit; transition: width .25s, background .25s; }
.tabs { display: flex; background: var(--surface-3); border-radius: 999px; padding: 4px; margin-bottom: 4px; }
.tabs button { flex: 1; border: 0; background: transparent; padding: 10px; border-radius: 999px; font: inherit; font-weight: 700; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.tabs button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* ---------- Modo cocina ---------- */
.cook { position: fixed; inset: 0; z-index: 150; background: var(--bg); display: flex; flex-direction: column; }
.cook-top { display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; border-bottom: 1px solid var(--border); background: var(--surface); }
.cook-top .t { flex: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cook-progress { height: 4px; background: var(--surface-3); }
.cook-progress i { display: block; height: 100%; background: var(--brand-deep); transition: width .4s var(--ease); border-radius: 0 4px 4px 0; }
.cook-body { flex: 1; overflow-y: auto; padding: 28px 22px; display: flex; flex-direction: column; justify-content: center; max-width: 760px; margin: 0 auto; width: 100%; touch-action: pan-y; }
.cook-step-n { color: var(--brand-deep); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; }
.cook-text { font-size: clamp(1.5rem, 5vw, 2.3rem); line-height: 1.28; font-family: var(--font-display); font-weight: 500; margin: 12px 0 24px; letter-spacing: -.02em; }
.cook-swipe-hint { display: none; color: var(--muted); font-size: .78rem; text-align: center; margin-top: auto; padding-top: 18px; }
@media (pointer: coarse) { .cook-swipe-hint { display: block; } }
.cook-media { border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.cook-media iframe, .cook-media video { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.cook-foot { display: flex; gap: 10px; padding: 12px 16px calc(12px + var(--safe-b)); border-top: 1px solid var(--border); background: var(--surface); }
.cook-foot .btn { flex: 1; min-height: 58px; font-size: 1.05rem; border-radius: 20px; }
.timer { display: inline-flex; align-items: center; gap: 10px; background: var(--sage); color: var(--ok); border-radius: 999px; padding: 8px 8px 8px 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.timer.done { background: var(--accent-soft); color: var(--accent); animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.05); } }
.timers { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px; }
.mic-on { color: var(--accent) !important; animation: pulse 1.5s infinite; }

/* ---------- Suscripción ---------- */
.access-banner { display: flex; align-items: center; gap: 14px; margin: -4px 0 6px; padding: 14px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); color: inherit; font-weight: 400; box-shadow: var(--shadow); }
.access-banner:hover { text-decoration: none; border-color: var(--border-strong); }
.access-banner b { display: block; font-size: .96rem; }
.access-banner .small { color: var(--muted); }
.access-banner .ab-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--surface-3); flex: none; }
.access-banner.trial { background: linear-gradient(110deg, var(--brand-wash), var(--surface) 70%); border-color: color-mix(in srgb, var(--brand) 50%, transparent); }
.access-banner.trial .ab-ic { background: var(--brand); color: #2A1A12; }
.access-banner.warn { background: var(--accent-soft); border-color: transparent; }
.access-banner.warn .ab-ic { background: var(--accent); color: #fff; }
@media (max-width: 520px) { .access-banner .btn { display: none; } }

.billing { max-width: 720px; margin: 0 auto; }
.sub-hero { position: relative; overflow: hidden; padding: 26px 24px; border-radius: 28px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.sub-hero h2 { font-size: clamp(1.8rem, 6vw, 2.4rem); margin: 6px 0 8px; letter-spacing: -.035em; }
.sub-hero p { color: var(--text-soft); max-width: 46ch; }
.sub-hero.trial { background: linear-gradient(135deg, var(--brand-wash), var(--surface) 60%); }
.sub-hero.on { background: linear-gradient(135deg, var(--ok-soft), var(--surface) 65%); }
.sub-hero.on .eyebrow { color: var(--ok); }
.sub-hero.on .eyebrow::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.sub-hero.warn { background: linear-gradient(135deg, var(--accent-soft), var(--surface) 65%); }
.sub-hero.warn .eyebrow { color: var(--accent); }
.sub-hero.expired { background: #2E1D14; color: #FBF7F1; border-color: transparent; text-align: center; padding: 34px 24px; }
.sub-hero.expired h2 { color: #FBF7F1; }
.sub-hero.expired p { color: rgba(251, 247, 241, .75); margin: 0 auto; }
.sub-hero .lock-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: rgba(245, 207, 78, .16); color: #F5CF4E; }
.sub-hero .lock-ic .icon { width: 26px; height: 26px; }
.trial-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--brand) 22%, var(--surface-3)); overflow: hidden; margin-top: 14px; }
.trial-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--brand-deep); }

.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .plan-grid { grid-template-columns: 1fr; } }
.plan-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 18px 18px 16px; border-radius: 22px; background: var(--surface); border: 2px solid var(--border); font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .2s, transform .15s var(--ease); }
.plan-card:hover { border-color: var(--border-strong); }
.plan-card.on { border-color: var(--text); box-shadow: var(--shadow-md); }
.plan-card .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); margin-bottom: 10px; display: grid; place-items: center; }
.plan-card.on .radio { border-color: var(--text); }
.plan-card.on .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--text); }
.plan-card b { font-size: 1rem; }
.plan-card .price { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.plan-card .price small { font-family: var(--font); font-size: .85rem; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 2px; }
.plan-card .save { position: absolute; top: 14px; right: 14px; padding: 3px 9px; border-radius: 999px; background: var(--brand); color: #2A1A12; font-size: .72rem; font-weight: 700; }
.perks { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 6px; }
.perks li { display: flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: .92rem; }
.perks .icon { color: var(--ok); }
.pay-box { margin-top: 18px; padding: 18px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.pay-box .or { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--muted); font-size: .8rem; }
.pay-box .or::before, .pay-box .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.paypal-slot { min-height: 48px; }
.pay-note { display: block; margin: 12px 0 0; line-height: 1.5; }
.pay-note .icon { color: var(--ok); width: 14px; height: 14px; vertical-align: -2px; }
.profile-link { color: inherit; font-weight: 400; gap: 12px; }
.profile-link:hover { text-decoration: none; box-shadow: var(--shadow-md); }

/* ---------- Menú: semana y mes ---------- */
.plan-top { display: flex; justify-content: center; margin: 2px 0 14px; }
.view-switch { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface-3); gap: 2px; }
.view-switch a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; border-radius: 999px; color: var(--text-soft); font-size: .9rem; font-weight: 650; }
.view-switch a:hover { text-decoration: none; color: var(--text); }
.view-switch a.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.view-switch .icon { width: 17px; height: 17px; }
@media (min-width: 960px) { .plan-top { justify-content: flex-start; } }

.alm-kicker { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-deep); }
.alm-today { margin-left: 4px; }

/* Semana */
.week-hero { padding: 14px; border-radius: 26px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); margin-bottom: 12px; }
.wh-nav { display: flex; align-items: center; gap: 6px; }
.wh-label { flex: 1; text-align: center; min-width: 0; }
.wh-label h2 { margin: 2px 0 0; font-size: 1.55rem; letter-spacing: -.03em; }
.day-pills { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.dp { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px; border-radius: 16px; border: 0; background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; transition: background .15s, transform .15s var(--ease); min-width: 0; }
.dp:hover { background: var(--surface-3); }
.dp:active { transform: scale(.95); }
.dp small { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dp b { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.1; }
.dp .dots { display: flex; gap: 2px; height: 5px; }
.dp .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-deep); }
.dp.today { background: var(--dark); color: var(--on-dark); }
.dp.today small { color: var(--brand); }
.dp.today .dots i { background: var(--brand); }
.dp.past { opacity: .55; }
@media (min-width: 1200px) { .day-pills { display: none; } .week-hero { display: inline-flex; padding: 8px 10px; margin-right: 12px; } .wh-label h2 { font-size: 1.3rem; } }
.week-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
@media (max-width: 560px) {
  .week-stats { gap: 6px; }
  .week-stats .ws-tile { padding: 10px 10px 11px; border-radius: 16px; }
  .week-stats .ws-tile b { font-size: 1.22rem; }
  .week-stats .ws-tile .s { font-size: .7rem; line-height: 1.3; }
  .week-stats .ws-tile.over { grid-column: 1 / -1; order: 3; }
}
.ws-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); font: inherit; color: inherit; text-align: left; min-width: 0; }
button.ws-tile { cursor: pointer; }
button.ws-tile:hover:not(:disabled) { border-color: var(--border-strong); }
.ws-tile .k { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ws-tile .k .icon { width: 13px; height: 13px; flex: none; color: var(--t, var(--muted)); }
.ws-tile b { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ws-tile b small { font-family: var(--font); font-size: .75rem; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.ws-tile .s { font-size: .76rem; color: var(--muted); }
.ws-tile.over b, .ws-tile.over .s { color: var(--accent); }
.ws-bar { display: block; width: 100%; height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.ws-bar i { display: block; height: 100%; background: var(--t, var(--ok)); border-radius: inherit; }
.ws-bar.over i { background: var(--accent); }
.plan-actions { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 16px; padding: 2px 16px; }
.plan-actions::-webkit-scrollbar { display: none; }
.plan-actions .btn { flex: none; min-height: 42px; }
@media (min-width: 960px) { .plan-actions { margin: 0 0 16px; padding: 0; } }
.nutri-panel { margin-bottom: 14px; }
.nutri-panel[hidden] { display: none; }
@media (min-width: 1200px) {
  .main:has(.week-grid) .week-stats { display: inline-grid; grid-template-columns: repeat(3, 190px); vertical-align: top; }
}

/* Almanaque (mes) */
.alm-hero { position: relative; overflow: hidden; padding: 18px 16px 18px; border-radius: 28px; background: #2E1D14; color: #FBF7F1; box-shadow: var(--shadow-md); --alm-track: rgba(255, 255, 255, .12); }
.alm-hero::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; background: radial-gradient(circle, rgba(245, 207, 78, .22), transparent 62%); pointer-events: none; }
.alm-head { position: relative; display: flex; align-items: center; gap: 6px; }
.alm-head .icon-btn { color: #FBF7F1; background: rgba(255, 255, 255, .08); }
.alm-head .icon-btn:hover { background: rgba(255, 255, 255, .16); }
.alm-head .alm-today { background: #F5CF4E; color: #2A1A12; border-color: transparent; }
.alm-title { flex: 1; text-align: center; min-width: 0; }
.alm-title .alm-kicker { color: #F5CF4E; }
.alm-title h2 { margin: 2px 0 0; color: #FBF7F1; font-size: clamp(2.2rem, 9vw, 3.4rem); letter-spacing: -.045em; line-height: 1; font-weight: 600; }
.alm-deco { display: none; position: absolute; font-size: 2.1rem; opacity: .9; letter-spacing: -.2em; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.alm-stats { position: relative; display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px 14px; align-items: center; margin-top: 18px; }
.alm-ring { position: relative; width: 92px; height: 92px; grid-row: span 2; }
.alm-ring svg { width: 100%; height: 100%; }
.alm-ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; }
.alm-ring b { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; }
.alm-ring small { font-size: .62rem; color: rgba(251, 247, 241, .65); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.alm-stat { min-width: 0; }
.alm-stat b { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.alm-stat b small { font-size: .85rem; color: rgba(251, 247, 241, .55); font-weight: 500; }
.alm-stat span { display: block; font-size: .74rem; color: rgba(251, 247, 241, .65); line-height: 1.3; }
.alm-stat.over b { color: #F7A584; }
@media (min-width: 760px) {
  .alm-hero { padding: 22px 26px 24px; }
  .alm-stats { grid-template-columns: auto repeat(4, minmax(0, 1fr)); }
  .alm-ring { grid-row: auto; }
  .alm-deco { display: block; font-size: 3rem; right: 26px; top: 18px; }
  .alm-title { text-align: left; padding-left: 8px; order: 1; flex: none; }
  .alm-head { justify-content: flex-start; padding-right: 110px; }
  .alm-head .alm-today { order: 2; margin-left: 6px; }
}
.alm-actions { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 14px -16px 14px; padding: 2px 16px; }
.alm-actions::-webkit-scrollbar { display: none; }
.alm-actions .btn { flex: none; min-height: 42px; }
@media (min-width: 960px) { .alm-actions { margin: 16px 0; padding: 0; } }

.calendar { padding: 10px; border-radius: 26px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 4px 2px 8px; }
.cal-head span { text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
.cal-head span.weekend { color: var(--accent); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-day { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 66px; padding: 5px 4px 5px; border-radius: 14px; border: 1px solid transparent; background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: transform .15s var(--ease), box-shadow .2s, border-color .15s, background .15s; min-width: 0; }
.cal-day:hover { border-color: var(--border-strong); background: var(--surface); box-shadow: var(--shadow); transform: translateY(-1px); z-index: 1; }
.cal-day:focus-visible { z-index: 2; }
.cal-day.weekend { background: color-mix(in srgb, var(--peach) 55%, var(--surface-2)); }
.cal-day.out { opacity: .38; }
.cal-day.past:not(.today) { opacity: .62; }
.cal-day.out.past { opacity: .3; }
.cd-top { display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.cd-num { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: .98rem; font-variant-numeric: tabular-nums; }
.cal-day.holiday .cd-num { color: var(--accent); }
.cal-day.today { background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.cal-day.today .cd-num { background: var(--brand); color: #2A1A12; }
.cd-fest { font-size: .82rem; line-height: 1; }
.cd-fname { display: none; font-size: .64rem; font-weight: 700; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-plates { display: flex; align-items: center; padding-left: 2px; }
.cd-plate { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 2px solid var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.cd-plate + .cd-plate { margin-left: -8px; }
.cd-plate .emoji { width: 100%; font-size: .62rem; box-shadow: none; background: none; }
.cd-plate::before { display: none; }
.cd-more { font-size: .62rem; font-weight: 700; color: var(--muted); margin-left: 2px; }
.cd-title, .cd-meta { display: none; }
.cd-add { display: grid; place-items: center; margin-top: auto; height: 22px; border-radius: 10px; color: var(--border-strong); opacity: 0; transition: opacity .15s; }
.cd-add .icon { width: 16px; height: 16px; }
.cal-day:hover .cd-add { opacity: 1; color: var(--brand-deep); }
@media (min-width: 760px) {
  .calendar { padding: 14px; }
  .cal-grid { gap: 6px; }
  .cal-day { min-height: 118px; padding: 8px; gap: 4px; border-radius: 16px; }
  .cd-num { min-width: 28px; height: 28px; font-size: 1.05rem; }
  .cd-fest { font-size: 1rem; }
  .cd-fname { display: block; }
  .cd-plate { width: 28px; height: 28px; }
  .cd-plate + .cd-plate { margin-left: -8px; }
  .cd-plate .emoji { font-size: .9rem; }
  .cd-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .76rem; font-weight: 650; line-height: 1.25; margin-top: 2px; }
  .cd-meta { display: block; font-size: .66rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: auto; }
  .cd-add { height: 30px; }
}
@media (min-width: 1200px) { .cal-day { min-height: 132px; } .main:has(.calendar) { max-width: 1320px; } }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 6px 4px; font-size: .74rem; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .lg { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.cal-legend .lg.today { background: var(--brand); }
.cal-legend .lg.holiday { background: var(--accent); }
.cal-legend .lg.free { border: 1.5px dashed var(--border-strong); }

.alm-extra { display: grid; gap: 12px; margin-top: 14px; }
@media (min-width: 900px) { .alm-extra { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.pc-ic.ok { background: var(--ok-soft); color: var(--ok); }
.fest-list { list-style: none; padding: 0; margin: 12px 0 0; }
.fest-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.fest-list li:first-child { border-top: 0; }
.fest-date { display: grid; place-items: center; width: 44px; height: 48px; border-radius: 14px; background: var(--surface-2); flex: none; line-height: 1; }
.fest-date b { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.fest-date small { font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fest-emoji { font-size: 1.5rem; flex: none; }
.season-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-3); margin: 12px 0 10px; }
.season-tabs button { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: .82rem; font-weight: 650; color: var(--muted); cursor: pointer; }
.season-tabs button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }

/* Ficha del día */
.fest-callout { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--peach); margin-bottom: 12px; }
.fest-callout > span { font-size: 1.8rem; }
.fest-callout .small { color: var(--text-soft); }
.day-sheet { display: grid; gap: 4px; }
.ds-slot { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.ds-slot:first-child { border-top: 0; }
.ds-label { width: 74px; flex: none; padding-top: 10px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ds-items { flex: 1; display: grid; gap: 6px; min-width: 0; }
.ds-entry { display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.ds-entry .cd-plate { width: 40px; height: 40px; border: 0; border-radius: 11px; }
.ds-entry .cd-plate .emoji { font-size: 1rem; }
.ds-entry a { color: inherit; font-weight: 400; min-width: 0; }
.ds-entry a:hover { text-decoration: none; }
.ds-entry b { display: block; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-entry .icon-btn { width: 34px; height: 34px; color: var(--muted); }
.week-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
.wp { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--border); background: var(--surface); font: inherit; color: inherit; cursor: pointer; text-align: left; }
.wp span { font-size: .78rem; color: var(--muted); }
.wp.on { border-color: var(--text); box-shadow: var(--shadow); }
.wp:disabled { opacity: .45; cursor: not-allowed; }

@media print {
  .alm-hero { background: none; color: #000; box-shadow: none; padding: 0 0 10px; }
  .alm-hero::before, .alm-deco, .alm-head .icon-btn, .alm-stats { display: none; }
  .alm-title h2, .alm-title .alm-kicker { color: #000; }
  .alm-extra { display: none; }
  .calendar { box-shadow: none; border: 0; padding: 0; }
  .cal-day { min-height: 110px; background: none !important; border: 1px solid #ccc; opacity: 1 !important; }
  .cd-title, .cd-meta, .cd-fname { display: block; }
  .cd-plates, .cd-add { display: none; }
}

/* ---------- Perfil y hogar ---------- */
.avatar.xl { width: 68px; height: 68px; font-size: 1.5rem; background: var(--brand); color: #2A1A12; border: 3px solid rgba(255, 255, 255, .14); box-shadow: none; font-family: var(--font-display); }

.sub-strip { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); color: inherit; font-weight: 400; box-shadow: var(--shadow); transition: box-shadow .2s, transform .2s var(--ease); }
.sub-strip:hover { text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.sub-strip b { display: block; font-size: .95rem; }
.sub-strip .grow > span { display: block; font-size: .8rem; color: var(--muted); }
.sub-strip .ss-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; flex: none; background: var(--surface-3); }
.sub-strip .ss-ic .icon { width: 19px; height: 19px; }
.sub-strip .ss-cta { display: inline-flex; align-items: center; gap: 2px; font-size: .82rem; font-weight: 700; color: var(--brand-deep); white-space: nowrap; }
.sub-strip.brand .ss-ic { background: var(--brand); color: #2A1A12; }
.sub-strip.ok .ss-ic { background: var(--ok-soft); color: var(--ok); }
.sub-strip.tomato .ss-ic { background: var(--accent-soft); color: var(--accent); }
.sub-strip.dark .ss-ic { background: var(--dark); color: var(--on-dark); }

.pref-card { padding: 18px; }
.pref-card > * + * { margin-top: 14px; }
.pc-head { display: flex; gap: 12px; align-items: flex-start; }
.pc-head h3 { margin: 0; font-size: 1.12rem; }
.pc-head p { margin: 2px 0 0; font-size: .84rem; color: var(--muted); line-height: 1.4; }
.pc-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--brand-wash); color: var(--brand-deep); flex: none; }
.pc-ic .icon { width: 19px; height: 19px; }
.lbl { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.pm-title h2 { font-size: 1.7rem; margin: 4px 0 2px; }
.pm-title p { color: var(--muted); margin: 0; font-size: .92rem; }
@media (min-width: 1000px) { .pm-title { padding-top: 4px; } }

.house-name { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 16px; background: var(--surface-2); }
.house-name .lbl { margin-bottom: 2px; }
.house-name b { font-size: 1.02rem; overflow-wrap: anywhere; }
.members { list-style: none; padding: 0; display: grid; gap: 4px; }
.members li { display: flex; align-items: center; gap: 10px; padding: 6px 4px; font-weight: 600; }
.members .avatar.sm { width: 32px; height: 32px; }
.members .you { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-deep); background: var(--brand-wash); padding: 3px 8px; border-radius: 999px; }
.invite-ticket { display: flex; align-items: center; gap: 10px; padding: 14px 12px 14px 16px; border-radius: 18px; border: 1.5px dashed var(--border-strong); background: var(--surface); }
.invite-ticket .lbl { margin-bottom: 2px; }
.invite-ticket code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.35rem; font-weight: 700; letter-spacing: .14em; color: var(--text); }

.row-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); margin-left: -18px; margin-right: -18px; margin-bottom: -18px; }
.pref-card > .row-list:first-child { margin-top: -18px; border-top: 0; }
.row-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 18px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-weight: 600; font-size: .95rem; text-align: left; cursor: pointer; transition: background .15s; }
.row-btn:last-child { border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); }
.row-btn:hover { background: var(--surface-2); text-decoration: none; }
.row-btn > .icon:first-child { color: var(--muted); }
.row-btn > .icon:last-child { color: var(--border-strong); width: 18px; height: 18px; }
.row-btn.danger, .row-btn.danger > .icon:first-child { color: var(--danger); }
.row-btn.static { cursor: default; }
.row-btn.static:hover { background: transparent; }
.pref-card > a.row-btn { margin: 14px -18px -18px; width: calc(100% + 36px); border-top: 1px solid var(--border); border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); }

.field-row { display: flex; align-items: center; gap: 12px; }
.field-row b { display: block; font-size: .95rem; }
.field-row .grow > span { display: block; font-size: .8rem; color: var(--muted); }
.stepper { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--surface-3); flex: none; }
.stepper .icon-btn { width: 38px; height: 38px; background: var(--surface); box-shadow: var(--shadow-xs); }
.stepper output { min-width: 2.2em; text-align: center; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sub-field > .chips { gap: 7px; }

/* Chips de elección única (radio) */
.chips.choice label.chip { position: relative; cursor: pointer; font-size: .86rem; font-weight: 600; padding: 7px 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); transition: background .15s, color .15s, border-color .15s; }
.chips.choice label.chip:hover { border-color: var(--border-strong); }
.chips.choice label.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chips.choice label.chip:has(input:checked) { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.chips.choice label.chip:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: 2px; }
.chips.choice label.chip .icon { width: 16px; height: 16px; }
.allergen-chips button.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Interruptores */
.switches { display: grid; gap: 2px; border-radius: 16px; background: var(--surface-2); padding: 4px 14px; }
.switch-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; cursor: pointer; }
.switch-row + .switch-row { border-top: 1px solid var(--border); }
.switch-row b { display: block; font-size: .93rem; }
.switch-row .grow > span { display: block; font-size: .8rem; color: var(--muted); line-height: 1.35; }
input.switch { appearance: none; -webkit-appearance: none; position: relative; width: 48px; height: 28px; min-height: 0; padding: 0; border-radius: 999px; border: 0; background: var(--border-strong); cursor: pointer; flex: none; transition: background .2s; }
input.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--ease); }
input.switch:checked { background: var(--ok); }
input.switch:checked::after { transform: translateX(20px); }
input.switch:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; box-shadow: none; }

/* Campos con unidad */
.affix { position: relative; display: block; }
.affix input { padding-right: 52px; }
.affix i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: .82rem; font-weight: 600; color: var(--muted); pointer-events: none; }
.goals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 700px) { .goals { grid-template-columns: repeat(4, 1fr); } }
.goal { display: block; padding: 10px 10px 12px; border-radius: 16px; background: var(--surface-2); }
.goal > span:first-child { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px 4px; }
.goal input { background: var(--surface); font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .grid-2.g-stack { grid-template-columns: 1fr; } }


/* ---------- Panel de administración ---------- */
:root { --chart-bar: #A0700F; }
:root[data-theme="dark"] { --chart-bar: #B4871C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chart-bar: #B4871C; } }
.admin-grid-2 { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 900px) { .admin-grid-2 { grid-template-columns: 1fr 1fr; align-items: start; } }
.admin-grid-2 h3, .card > h3 { margin-bottom: 4px; }
.st { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; background: var(--surface-3); color: var(--text-soft); }
.st + .st { margin-left: 4px; }
.st .icon { width: 13px; height: 13px; }
.st-ok { background: var(--ok-soft); color: var(--ok); }
.st-brand { background: var(--brand-wash); color: var(--brand-deep); }
.st-warn { background: var(--warn-soft); color: var(--warn); }
.st-orange { background: var(--peach); color: var(--accent); }
.st-bad { background: var(--danger-soft); color: var(--danger); }
.st-dark { background: var(--dark); color: var(--on-dark); }
.st-off { background: var(--surface-3); color: var(--muted); }
.avatar.sm { width: 34px; height: 34px; font-size: .8rem; border-width: 0; box-shadow: none; background: var(--surface-3); color: var(--text); }

.copy-line { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.copy-line code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: .78rem; scrollbar-width: thin; }
pre.log { margin: 8px 0 12px; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: .78rem; white-space: pre-wrap; max-height: 180px; overflow: auto; }

/* Gráfico de barras (una serie) */
.bar-chart { position: relative; margin-top: 10px; }
.bar-chart svg { display: block; overflow: visible; }
.bar-chart .grid { stroke: var(--border); stroke-width: 1; }
.bar-chart .tick { fill: var(--muted); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.bar-chart .bar { fill: var(--chart-bar); transition: opacity .15s; }
.bar-chart svg:hover .bar:not(.on) { opacity: .45; }
.bar-chart .hit { fill: transparent; cursor: crosshair; }
.bar-chart .tip { position: absolute; transform: translate(-50%, -100%); pointer-events: none; background: var(--dark); color: var(--on-dark); padding: 6px 10px; border-radius: 10px; font-size: .78rem; white-space: nowrap; box-shadow: var(--shadow-md); display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.bar-chart .tip span { opacity: .75; font-size: .72rem; }
.bar-chart .tip[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Impresión (menú y lista en PDF) ---------- */
@media print {
  .nav, .topbar, .toasts, .no-print, .add-slot, .offline-banner { display: none !important; }
  .shell { padding: 0; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .main { max-width: none; padding: 0; }
  .print-only { display: block !important; }
  .week-grid { display: grid !important; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .entry { background: none; border: 0; padding: 2px 0; }
  .entry .mini-thumb { display: none; }
  .shop-item { padding: 4px 0; background: none; }
  .view { animation: none; }
}
.print-only { display: none; }

/* ---------- Bienvenida guiada ---------- */
.wz { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; max-width: 680px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 0; }
.wz-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wz-logo { width: 40px; height: 40px; border-radius: 13px; box-shadow: var(--shadow-xs); }
.wz-dots { display: flex; gap: 6px; flex: 1; max-width: 220px; }
.wz-dots i { flex: 1; height: 6px; border-radius: 99px; background: var(--surface-3); transition: background .3s; }
.wz-dots i.on { background: var(--brand); }
.wz-body { flex: 1; padding: 30px 0 24px; }
.wz-body.enter { animation: view-in .35s var(--ease) both; }
.wz-kicker { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-deep); margin-bottom: 10px; }
.wz h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); letter-spacing: -.035em; margin-bottom: 8px; }
.wz .lede { color: var(--muted); margin: 0 0 22px; max-width: 46ch; }
.wz-sub { font-family: inherit; font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); margin: 26px 0 10px; }
.wz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-chip { display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; border-radius: 999px; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; transition: background .15s, border-color .15s, transform .12s; }
.wz-chip:active { transform: scale(.96); }
.wz-chip.on { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.wz-people { display: flex; align-items: center; justify-content: center; gap: 26px; margin: 18px 0 6px; }
.wz-round { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; box-shadow: var(--shadow-xs); }
.wz-round:disabled { opacity: .35; cursor: default; }
.wz-round .icon { width: 24px; height: 24px; }
.wz-count { display: grid; justify-items: center; min-width: 110px; }
.wz-count b { font-family: var(--font-display); font-size: 4.2rem; line-height: 1; letter-spacing: -.05em; }
.wz-count span { color: var(--muted); font-weight: 600; }
.wz-faces { display: flex; justify-content: center; align-items: center; min-height: 44px; margin-bottom: 4px; }
.wz-faces span { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -8px; border-radius: 50%; background: var(--brand-wash); border: 2px solid var(--bg, #FBF7F1); font-size: 1.3rem; }
.wz-faces.bump span:last-of-type { animation: up .3s var(--ease) both; }
.wz-faces em { margin-left: 6px; font-style: normal; font-weight: 700; color: var(--muted); }
.wz-field { margin-top: 22px; }
.wz-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 520px) { .wz-options { grid-template-columns: 1fr; } }
.wz-option { display: grid; justify-items: start; gap: 2px; padding: 16px; border-radius: var(--radius-md); border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.wz-option .wo-emoji { font-size: 1.7rem; margin-bottom: 6px; }
.wz-option b { font-size: 1.05rem; }
.wz-option > span:last-child { font-size: .86rem; color: var(--muted); }
.wz-option.on { border-color: var(--dark); box-shadow: 0 0 0 2px var(--dark) inset; background: var(--brand-wash); }
@media (max-width: 520px) { .wz-option { grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; } .wz-option .wo-emoji { grid-row: span 2; margin: 0; } }
.wz-toggle { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-2); cursor: pointer; }
.wz-toggle input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--dark); flex: none; }
.wz-toggle b { display: block; }
.wz-toggle span span { font-size: .88rem; color: var(--muted); }
.wz-foot { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 10px; padding: 14px 0 calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--bg) 70%, transparent); }
.wz-foot .btn.primary { flex: 1; max-width: 340px; margin-left: auto; }
.wz-center { justify-content: center; align-items: center; text-align: center; }
.wz-center .lede { margin-inline: auto; }
.wz-cooking { display: flex; gap: 14px; margin-bottom: 26px; }
.wz-cooking span { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; font-size: 2.2rem; background: radial-gradient(circle, #FFFDF8 0 58%, #EADFCB 59% 63%, #FFFCF5 64%); box-shadow: var(--shadow-md); animation: wz-bounce 1.1s var(--ease) infinite; }
.wz-cooking span:nth-child(2) { animation-delay: .15s; }
.wz-cooking span:nth-child(3) { animation-delay: .3s; }
@keyframes wz-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-16px); } }
.wz-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.wz-day { padding: 14px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); animation: up .4s var(--ease) both; }
.wz-day:nth-child(2) { animation-delay: 40ms; } .wz-day:nth-child(3) { animation-delay: 80ms; } .wz-day:nth-child(4) { animation-delay: 120ms; }
.wz-day:nth-child(5) { animation-delay: 160ms; } .wz-day:nth-child(6) { animation-delay: 200ms; } .wz-day:nth-child(7) { animation-delay: 240ms; }
.wz-day.today { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.wz-day h3 { font-family: inherit; font-size: .95rem; font-weight: 700; text-transform: capitalize; margin: 0 0 8px; }
.wz-day h3 span { font-weight: 500; color: var(--muted); text-transform: none; }
.wz-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wz-day li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; line-height: 1.25; }
.wz-day li small { display: block; font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.wz-thumb { width: 44px !important; height: 44px; flex: none; border-radius: 12px; }
.wz-thumb .emoji { font-size: 1.3rem; }
.wz-emo { display: grid; place-items: center; background: var(--surface-2); font-size: 1.3rem; }
.terms-check { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; line-height: 1.45; color: var(--text-soft); cursor: pointer; }
.terms-check input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--dark); }
.terms-check a { color: var(--brand-deep); font-weight: 600; }
.pay-box .terms-check { margin-bottom: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.terms-check.shake { animation: shake .45s; outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.switch-row.static { cursor: default; }
.push-kinds { display: flex; flex-direction: column; margin: 0 0 6px 14px; padding-left: 14px; border-left: 2px solid var(--border); }
.push-kinds[hidden] { display: none; }
.push-kinds .btn { margin-top: 8px; }
.meal-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.meal-times .field input { font-variant-numeric: tabular-nums; }
.gift-note { margin: -8px 0 18px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--brand-wash); border: 1px solid var(--brand); font-weight: 600; font-size: .9rem; }
.billing-extras { margin-top: 18px; }
.billing-extras h3 { margin: 0 0 4px; }
.promo-form { display: flex; gap: 8px; }
.promo-form input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.invite-card { background: linear-gradient(135deg, var(--brand-wash), var(--surface)); }
.copy-line code { word-break: break-all; }
/* Importar receta: vista previa */
.imp-prev { display: grid; gap: 12px; }
.ip-photo { position: relative; display: grid; place-items: center; height: 190px; margin: -4px -4px 2px; overflow: hidden; border-radius: 20px; background: linear-gradient(135deg, var(--brand-wash), var(--peach)); }
.ip-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: view-in .4s var(--ease); }
.ip-ph { font-size: 44px; opacity: .6; }
.ip-site { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 20px); padding: 4px 10px; border-radius: 999px; background: rgba(28, 16, 10, .62); color: #FBF7F1; font-size: .74rem; font-weight: 700; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-site .icon { width: 13px; height: 13px; }
.ip-title { margin: 0; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.02em; }
.ip-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .8rem; font-weight: 700; color: var(--text-soft); }
.ip-chip .icon { width: 14px; height: 14px; }
.ip-chip.cuisine { background: var(--brand-wash); border-color: color-mix(in srgb, var(--brand) 50%, transparent); color: var(--text); }
.ip-chip.green { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.ip-why { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--brand-wash) 70%, var(--surface)); font-size: .84rem; color: var(--text-soft); }
.ip-why .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--brand-deep); }
.ip-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ip-counts div { display: grid; justify-items: center; gap: 1px; padding: 10px 6px; border-radius: 14px; background: var(--surface-2); }
.ip-counts b { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.1; }
.ip-counts span { font-size: .74rem; color: var(--muted); }
.ip-may, .ip-dup { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 14px; font-size: .84rem; }
.ip-may { background: var(--accent-soft); color: var(--accent); }
.ip-dup { background: var(--sky, var(--surface-2)); color: var(--text-soft); }
.ip-may .icon, .ip-dup .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.ip-dup a { font-weight: 700; }
.ip-warn { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ip-warn li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-size: .84rem; font-weight: 600; }
.ip-warn .icon { flex: none; width: 15px; height: 15px; }
.ip-ok { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); font-size: .86rem; font-weight: 700; }
.ip-via { margin: 0; text-align: center; }
.imp-text { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.imp-text summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--text-soft); }
/* Arrastrar y soltar */
[data-entry], .cal-day.planned { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
[data-entry] img, .cal-day.planned img { -webkit-user-drag: none; }
.drag-ghost { position: fixed; top: 0; left: 0; z-index: 1000; pointer-events: none; margin: 0; opacity: .95; box-shadow: var(--shadow-lg); border-radius: var(--radius-sm); background: var(--surface); transition: none; }
.dragging { opacity: .35; }
.drag-armed { transform: scale(.98); transition: transform .35s; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; }
.slot.drop-target .slot-items, .cal-day.drop-target { outline: 2px dashed var(--brand-deep); outline-offset: 3px; border-radius: var(--radius-sm); background: var(--brand-wash); }
.entry.swap-target { box-shadow: 0 0 0 2px var(--accent) inset; }
.drag-hint { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: .82rem; color: var(--muted); }
.drag-hint[hidden] { display: none; }
.drag-hint .icon { width: 16px; height: 16px; }
@media (pointer: fine) { [data-entry] { cursor: grab; } }
.gen-custom { margin-top: 14px; }
.gen-custom summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--text-soft); }
.scan-btn { margin: 10px 0 2px; }
.scan-box { position: relative; overflow: hidden; border-radius: var(--radius-md); background: #000; aspect-ratio: 4 / 3; }
.scan-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; inset: 28% 12%; border: 3px solid var(--brand); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.scan-frame::after { content: ''; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; background: var(--accent); animation: scan 1.6s ease-in-out infinite; }
@keyframes scan { 0%, 100% { transform: translateY(-28px); } 50% { transform: translateY(28px); } }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--surface-2); }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: .82rem; font-weight: 600; color: var(--text-soft); cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }

/* ---------- Panel de administración v3: barra lateral propia, tablas y fichas ---------- */
:root {
  --a-k1: #3C7536; --a-k2: #E2AE1C; --a-k3: #A9C99A; --a-k4: #DCCEBB;
  --av0: #FBE8A6; --av0-fg: #6B4A08; --av1: #FCE2D8; --av1-fg: #9A3A1E; --av2: #E5EFDF; --av2-fg: #2F5E2A;
  --av3: #E2EFF4; --av3-fg: #285466; --av4: #F0E7F6; --av4-fg: #5D3C78; --av5: #F0E8DC; --av5-fg: #5B4538;
}
:root[data-theme="dark"] {
  --a-k1: #8DC47C; --a-k2: #F5CF4E; --a-k3: #4E6F44; --a-k4: #4F3F31;
  --av0: #4A3B17; --av0-fg: #F5CF4E; --av1: #44241A; --av1-fg: #F4A487; --av2: #1F2E1B; --av2-fg: #A6D496;
  --av3: #1B2C33; --av3-fg: #93C6DA; --av4: #2E2238; --av4-fg: #C9A9E2; --av5: #33281F; --av5-fg: #DCCBB6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --a-k1: #8DC47C; --a-k2: #F5CF4E; --a-k3: #4E6F44; --a-k4: #4F3F31;
    --av0: #4A3B17; --av0-fg: #F5CF4E; --av1: #44241A; --av1-fg: #F4A487; --av2: #1F2E1B; --av2-fg: #A6D496;
    --av3: #1B2C33; --av3-fg: #93C6DA; --av4: #2E2238; --av4-fg: #C9A9E2; --av5: #33281F; --av5-fg: #DCCBB6;
  }
}

/* Marco: en el panel la barra lateral muestra sus secciones; en el móvil, pestañas arriba. */
.admin-mode .main { max-width: 1280px; }
.nav .nav-back, .nav .brand-tag { display: none; }
@media (max-width: 959px) {
  .admin-mode .nav { display: none; }
  .admin-mode .shell { padding-bottom: calc(24px + var(--safe-b)); }
}
@media (min-width: 960px) {
  .nav .brand-tag { display: inline-block; margin-left: 2px; padding: 4px 8px; border-radius: 999px; background: var(--dark); color: var(--on-dark); font: 700 .6rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; font-style: normal; }
  .nav .nav-back { display: flex; margin: -14px 0 2px; font-size: .86rem; color: var(--muted); }
  .nav .nav-back .ni { background: transparent; }
  .nav .nav-back .icon { width: 18px; height: 18px; }
  .admin-mode .nav .nav-gap { margin-top: 14px; }
  .nav .nav-sec .a-count { margin-left: auto; }
  .nav .nav-sec.active .a-count { background: var(--accent); }
}
.a-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font: 800 .68rem/1 var(--font); font-style: normal; font-variant-numeric: tabular-nums; }
.a-count[hidden] { display: none; }

.a-mtabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -2px -16px 16px; padding: 2px 16px 6px; }
.a-mtabs::-webkit-scrollbar { display: none; }
.a-mtabs a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); font-size: .86rem; font-weight: 650; }
.a-mtabs a:hover { text-decoration: none; color: var(--text); }
.a-mtabs a.on { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.a-mtabs .icon { width: 16px; height: 16px; }
.a-mtabs .a-count { min-width: 18px; height: 18px; font-size: .62rem; padding: 0 5px; }
@media (min-width: 960px) { .a-mtabs { display: none; } }

.a-panel { container: apanel / inline-size; }
.a-card, .a-table { container: acard / inline-size; }

/* Piezas comunes */
.a-card { padding: 18px 20px; min-width: 0; border-radius: var(--radius-md); }
.a-card.a-flush { padding: 0; }
.a-card.a-flush > .a-card-h { padding: 16px 18px 6px; margin: 0; }
.a-card h3 { margin: 0; font-size: 1.02rem; }
.a-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.a-card-h p { margin: 2px 0 0; font-size: .8rem; color: var(--muted); }
.a-link { display: inline-flex; align-items: center; gap: 2px; font-size: .84rem; white-space: nowrap; }
.a-link .icon { width: 15px; height: 15px; }
.a-sub { margin: 20px 0 10px; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.a-label { margin: 14px 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.a-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; letter-spacing: .02em; padding: 1px 6px; border-radius: 6px; background: var(--surface-3); color: var(--text-soft); white-space: nowrap; }
.a-code.lg { font-size: .9rem; font-weight: 700; letter-spacing: .06em; color: var(--text); padding: 3px 8px; }
.a-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.a-pills .st + .st { margin-left: 0; }
.a-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 16px; color: var(--muted); text-align: center; }
.a-empty .icon { width: 28px; height: 28px; opacity: .55; }
.a-empty p { margin: 0; font-size: .9rem; }
.a-more { text-align: center; margin: 14px 0 4px; font-size: .82rem; color: var(--muted); }
.a-more:empty { display: none; }
.a-meter { display: block; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.a-meter i { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.a-meter.sm { width: 84px; height: 4px; margin: 5px 0 3px; }

.a-av { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: .76rem; font-weight: 750; letter-spacing: .02em; }
.a-av.sm { width: 30px; height: 30px; font-size: .68rem; }
.a-av.xl { width: 72px; height: 72px; font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; }
.a-av.home { border-radius: 12px; }
.a-av.home .icon { width: 18px; height: 18px; }
.a-av.t0 { background: var(--av0); color: var(--av0-fg); } .a-av.t1 { background: var(--av1); color: var(--av1-fg); }
.a-av.t2 { background: var(--av2); color: var(--av2-fg); } .a-av.t3 { background: var(--av3); color: var(--av3-fg); }
.a-av.t4 { background: var(--av4); color: var(--av4-fg); } .a-av.t5 { background: var(--av5); color: var(--av5-fg); }

/* Resumen */
.a-hello { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 16px; }
.a-hello p { margin: 0; color: var(--muted); font-size: .92rem; }
.a-hello b { color: var(--text); }
.a-hello span { display: inline-block; }
.a-hello span::first-letter { text-transform: uppercase; }

.a-alerts { margin-bottom: 16px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; }
.a-alerts > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 18px 10px; }
.a-alerts h3 { margin: 0; font-size: 1rem; }
.a-alerts > header span { font-size: .78rem; font-weight: 600; color: var(--muted); }
.a-alert { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--border); color: var(--text); font-weight: 400; }
.a-alert:hover { background: var(--surface-2); text-decoration: none; }
.a-alert.lv-bad::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--danger); }
.a-alert-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface-3); color: var(--text-soft); }
.a-alert-ic .icon { width: 19px; height: 19px; }
.a-alert.lv-bad .a-alert-ic { background: var(--danger-soft); color: var(--danger); }
.a-alert.lv-warn .a-alert-ic { background: var(--warn-soft); color: var(--warn); }
.a-alert-tx { flex: 1; min-width: 0; }
.a-alert-tx b { display: block; font-size: .94rem; line-height: 1.3; }
.a-alert-tx span { display: block; margin-top: 1px; font-size: .82rem; line-height: 1.4; color: var(--muted); }
.a-alert-cta { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: .84rem; font-weight: 650; color: var(--brand-deep); white-space: nowrap; }
.a-alert-cta .icon { width: 16px; height: 16px; }
@media (max-width: 640px) { .a-alert-cta { font-size: 0; } .a-alert-cta .icon { width: 18px; height: 18px; color: var(--muted); } }
.a-allgood { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--ok-soft); color: var(--text-soft); font-size: .9rem; }
.a-allgood .icon { flex: none; color: var(--ok); }
.a-allgood b { color: var(--ok); }

.a-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container apanel (min-width: 820px) { .a-kpis { grid-template-columns: 1.25fr 1fr 1fr 1fr; } }
.a-kpi { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 148px; padding: 16px 18px 18px; overflow: hidden; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.a-kpi .k { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.a-kpi .v { font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1.1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.a-kpi .v small { margin-left: 3px; font-family: var(--font); font-size: .86rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.a-kpi .s { font-size: .8rem; line-height: 1.4; color: var(--muted); }
.a-kpi.a-hero { border-color: transparent; background: #2E1D14 radial-gradient(120% 100% at 100% 0%, rgba(245, 207, 78, .2), transparent 55%); color: #FBF7F1; }
.a-kpi.a-hero .k, .a-kpi.a-hero .s, .a-kpi.a-hero .v small { color: rgba(251, 247, 241, .7); }
.a-kpi.a-hero .v { font-size: 2.3rem; color: #F5CF4E; }
.a-kpi:has(.a-spark) { padding-bottom: 50px; }
.a-kpi .a-meter { margin-top: auto; }
.a-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 42px; }
.a-spark .ln { fill: none; stroke: var(--chart-bar); stroke-width: 1.75; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.a-spark .ar { fill: color-mix(in srgb, var(--chart-bar) 12%, transparent); }
.a-delta { display: inline-block; margin-right: 2px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-soft); font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.a-delta.up { background: var(--ok-soft); color: var(--ok); }
.a-delta.down { background: var(--danger-soft); color: var(--danger); }
@media (max-width: 420px) { .a-kpi { min-height: 0; padding: 14px; } .a-kpi .v { font-size: 1.6rem; } .a-kpi.a-hero .v { font-size: 1.8rem; } }

.a-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 12px 0 16px; overflow: hidden; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); }
@container apanel (min-width: 620px) { .a-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.a-strip > div { margin: -1px 0 0 -1px; padding: 12px 16px; border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
.a-strip dt { font-size: .78rem; color: var(--muted); }
.a-strip dd { margin: 2px 0 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.a-strip dd small { margin-left: 5px; font-size: .78rem; font-weight: 500; color: var(--muted); }
.a-strip .bad dd { color: var(--danger); }

.a-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@container apanel (min-width: 700px) {
  .a-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .a-grid > * { grid-column: span 6; }
  .a-grid > .c3 { grid-column: span 3; }
}
@container apanel (min-width: 980px) {
  .a-grid > .c4 { grid-column: span 4; }
  .a-grid > .c2 { grid-column: span 2; }
}
.a-card .bar-chart { margin-top: 0; }

.a-stack { display: flex; gap: 3px; height: 14px; overflow: hidden; border-radius: 7px; background: var(--surface-3); }
.a-stack i { display: block; min-width: 6px; }
.a-k1 { background: var(--a-k1); } .a-k2 { background: var(--a-k2); } .a-k3 { background: var(--a-k3); } .a-k4 { background: var(--a-k4); }
.a-legend { list-style: none; margin: 12px 0 0; padding: 0; }
.a-legend li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: .88rem; color: var(--text-soft); }
.a-legend .grow { min-width: 0; }
.a-legend b { color: var(--text); font-variant-numeric: tabular-nums; }
.a-legend small { width: 38px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.a-key { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.a-split + .a-split { margin-top: 14px; }
.a-split-l { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: .84rem; color: var(--text-soft); }
.a-split-l b { margin-left: 3px; color: var(--text); font-variant-numeric: tabular-nums; }
.a-split-bar { height: 8px; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--chart-bar) 28%, var(--surface-3)); }
.a-split-bar:empty { background: var(--surface-3); }
.a-split-bar i { display: block; height: 100%; background: var(--chart-bar); }

.a-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.a-funnel li { display: grid; grid-template-columns: 26px minmax(130px, 1fr) minmax(0, 2fr) 44px 44px; gap: 12px; align-items: center; }
.a-fn-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); color: var(--text-soft); font-size: .76rem; font-weight: 700; }
.a-fn-label b { display: block; font-size: .9rem; line-height: 1.25; }
.a-fn-label small { display: block; font-size: .74rem; line-height: 1.3; color: var(--muted); }
.a-fn-bar { position: relative; height: 30px; overflow: hidden; border-radius: 9px; background: var(--surface-2); }
.a-fn-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--brand); }
.a-fn-count { text-align: right; font-size: 1rem; font-variant-numeric: tabular-nums; }
.a-fn-pct { text-align: right; font-size: .82rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
@container acard (max-width: 560px) {
  .a-funnel { gap: 14px; }
  .a-funnel li { grid-template-columns: 26px minmax(0, 1fr) auto 40px; row-gap: 6px; }
  .a-fn-n { grid-row: 1; grid-column: 1; }
  .a-fn-label { grid-row: 1; grid-column: 2; }
  .a-fn-count { grid-row: 1; grid-column: 3; }
  .a-fn-pct { grid-row: 1; grid-column: 4; }
  .a-fn-bar { grid-row: 2; grid-column: 2 / -1; height: 10px; }
}
.a-fn-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.a-fn-foot p { flex: 1 1 260px; margin: 0; font-size: .86rem; color: var(--text-soft); }
.a-sources { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.a-sources li { display: flex; align-items: baseline; gap: 5px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); font-size: .8rem; }
.a-sources span, .a-sources small { color: var(--muted); }

.a-usage { list-style: none; margin: 0; padding: 0; }
.a-usage li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.a-usage li:first-child { padding-top: 0; border-top: 0; }
.a-usage .icon { flex: none; width: 18px; height: 18px; color: var(--muted); }
.a-usage span { flex: 1; min-width: 0; font-size: .9rem; }
.a-usage small { display: block; font-size: .74rem; color: var(--muted); }
.a-usage b { font-size: 1.02rem; font-variant-numeric: tabular-nums; }

.a-mini { display: flex; flex-direction: column; padding: 0 8px 8px; }
.a-mini-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 9px 10px; border-radius: 12px; color: inherit; font-weight: 400; }
a.a-mini-row:hover { background: var(--surface-2); text-decoration: none; }
.a-mini-row a { color: inherit; }
.a-mini-row .grow { min-width: 0; }
.a-mini-row .grow > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-mini-row b { font-size: .92rem; }
.a-mini-row small { font-size: .78rem; color: var(--muted); }
.a-mini-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.a-money { color: var(--ok); font-variant-numeric: tabular-nums; }
.a-money.off { color: var(--muted); font-weight: 500; text-decoration: line-through; }
.a-pay-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.a-pay-ic.ok { background: var(--ok-soft); color: var(--ok); }
.a-pay-ic.bad { background: var(--danger-soft); color: var(--danger); }
.a-pay-ic .icon { width: 16px; height: 16px; stroke-width: 2.5; }

/* Listados: herramientas, pestañas con números y tablas */
.a-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.a-search { min-width: 220px; }
.a-search input { min-height: 46px; box-shadow: none; }
.a-select { width: auto; min-height: 46px; border-radius: 999px; }
.a-select.block { width: 100%; border-radius: var(--radius-sm); }
.a-tabs { display: flex; gap: 2px; margin: 0 0 14px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.a-tabs::-webkit-scrollbar { display: none; }
.a-tabs button { flex: none; display: inline-flex; align-items: center; gap: 7px; margin-bottom: -1px; padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: .88rem; font-weight: 650; color: var(--muted); white-space: nowrap; cursor: pointer; }
.a-tabs button:hover { color: var(--text); }
.a-tabs button.on { color: var(--text); border-bottom-color: var(--text); }
.a-tabs em { padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-soft); font-style: normal; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.a-tabs button.on em { background: var(--dark); color: var(--on-dark); }

.a-table { overflow: hidden; border-radius: var(--radius-md); }
.a-th { display: none; }
.a-tr { display: grid; align-items: center; gap: 4px 12px; min-width: 0; padding: 12px 16px; border-top: 1px solid var(--border); color: inherit; font-size: .9rem; font-weight: 400; }
[data-list] > .a-tr:first-child, .a-th + .a-tr { border-top: 0; }
a.a-tr:hover { background: var(--surface-2); text-decoration: none; }
.a-tr a { color: inherit; }
.a-tr small { display: block; font-size: .76rem; color: var(--muted); }
.a-tr small.bad { color: var(--danger); font-weight: 600; }
.a-tr.is-off { opacity: .55; }
.a-who { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; font-weight: 400; }
.a-who:hover { text-decoration: none; }
.a-who .grow, .a-who-tx { min-width: 0; }
.a-who .grow > *, .a-who-tx > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-who b, .a-who-tx b { font-size: .92rem; }
.a-tr .c-date, .a-tr .c-seen, .a-tr .c-use, .a-tr .c-members, .a-tr .c-house, .a-tr .c-concept { color: var(--text-soft); font-size: .86rem; min-width: 0; }
.a-tr .c-date, .a-tr .c-seen { font-variant-numeric: tabular-nums; }
.a-tr .c-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.a-tr .c-status .st + .st { margin-left: 0; }
.a-tr .c-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.a-tr .c-amount { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.a-tr .c-amount.off { color: var(--muted); font-weight: 500; text-decoration: line-through; }
.a-tr .c-plan b { font-weight: 600; }
.a-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--border-strong); vertical-align: 1px; }
.a-dot.on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.a-dot.mid { background: color-mix(in srgb, var(--ok) 55%, var(--border-strong)); }

/* Tablas en el móvil: cada fila es una tarjetita */
@container acard (max-width: 639px) {
  .a-tr.users { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who status" "house seen"; }
  .a-tr.users .a-who { grid-area: who; } .a-tr.users .c-status { grid-area: status; justify-content: flex-end; }
  .a-tr.users .c-house { grid-area: house; padding-left: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
  .a-tr.users .c-seen { grid-area: seen; text-align: right; font-size: .8rem; }
  .a-tr.users .c-date, .a-tr.homes .c-date { display: none; }
  .a-tr.homes { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who status" "use members"; }
  .a-tr.homes .a-who { grid-area: who; } .a-tr.homes .c-status { grid-area: status; }
  .a-tr.homes .c-use { grid-area: use; padding-left: 48px; font-size: .8rem; } .a-tr.homes .c-members { grid-area: members; text-align: right; font-size: .8rem; }
  .a-tr.subs { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who status" "plan plan" "date actions"; }
  .a-tr.subs .a-who { grid-area: who; } .a-tr.subs .c-status { grid-area: status; justify-content: flex-end; }
  .a-tr.subs .c-plan { grid-area: plan; padding-left: 48px; } .a-tr.subs .c-date { grid-area: date; padding-left: 48px; font-size: .8rem; }
  .a-tr.subs .c-actions { grid-area: actions; }
  .a-tr.subs .c-plan small, .a-tr.subs .c-date small { display: inline; margin-left: 6px; }
  .a-tr.pays { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "ic who amount" "ic concept date"; row-gap: 2px; }
  .a-tr.pays .a-pay-ic { grid-area: ic; align-self: start; } .a-tr.pays .a-who-tx { grid-area: who; } .a-tr.pays .a-who-tx small { display: none; }
  .a-tr.pays .c-concept { grid-area: concept; font-size: .8rem; } .a-tr.pays .c-concept small { display: none; }
  .a-tr.pays .c-amount { grid-area: amount; } .a-tr.pays .c-date { grid-area: date; text-align: right; font-size: .76rem; }
  .a-tr.promos { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "code status" "days uses" "actions actions"; row-gap: 8px; }
  .a-tr.promos .c-code { grid-area: code; } .a-tr.promos .c-status { grid-area: status; justify-content: flex-end; }
  .a-tr.promos .c-days { grid-area: days; font-size: .84rem; } .a-tr.promos .c-uses { grid-area: uses; text-align: right; }
  .a-tr.promos .c-uses .a-meter { margin-left: auto; }
  .a-tr.promos .c-actions { grid-area: actions; justify-content: flex-start; }
}
@container acard (min-width: 640px) {
  .a-th { display: grid; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .a-th .r { text-align: right; }
  .a-th.users, .a-tr.users { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1fr); }
  .a-th.homes, .a-tr.homes { grid-template-columns: minmax(0, 2fr) minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr); }
  .a-th.subs, .a-tr.subs { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(110px, auto); }
  .a-th.pays, .a-tr.pays { grid-template-columns: 34px minmax(0, 1.4fr) minmax(0, 1.5fr) minmax(0, .9fr) minmax(80px, auto); }
  .a-th.promos, .a-tr.promos { grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
}

/* Ficha de usuario */
.a-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; margin-bottom: 14px; padding: 22px; border-radius: var(--radius-md); }
.a-profile-id { flex: 1 1 240px; min-width: 0; }
.a-profile h2 { margin: 0; font-size: 1.5rem; letter-spacing: -.03em; }
.a-profile-mail { display: flex; align-items: center; gap: 2px; min-width: 0; margin: 1px 0 8px; color: var(--text-soft); font-size: .92rem; }
.a-profile-mail span { overflow: hidden; text-overflow: ellipsis; }
.a-profile-mail .icon-btn { width: 32px; height: 32px; }
.a-profile-mail .icon { width: 15px; height: 15px; }
.a-facts { flex: 1 1 380px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0; }
@container apanel (min-width: 760px) { .a-profile > .a-facts { grid-template-columns: repeat(4, auto); justify-content: end; } }
.a-facts dt { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.a-facts dd { margin: 2px 0 0; font-size: .92rem; font-weight: 600; }
.a-facts dd.bad { color: var(--danger); }
.a-facts.sm { margin: 14px 0 12px; padding-top: 14px; border-top: 1px solid var(--border); grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
@container apanel (max-width: 520px) {
  .a-profile { gap: 14px 16px; padding: 18px; }
  .a-profile .a-av.xl { width: 56px; height: 56px; font-size: 1.2rem; }
  .a-profile-id { flex-basis: 170px; }
  .a-profile h2 { font-size: 1.3rem; }
  .a-subnow-top { flex-wrap: wrap; }
  .a-price { font-size: 1.3rem; }
}
.a-detail { display: grid; gap: 14px; }
@container apanel (min-width: 860px) { .a-detail { grid-template-columns: minmax(0, 1.65fr) minmax(290px, 1fr); align-items: start; } }
.a-detail-main, .a-detail-side { display: grid; gap: 14px; min-width: 0; }
.a-subnow { padding: 16px; border-radius: 16px; background: var(--surface-2); }
.a-subnow-top { display: flex; align-items: center; gap: 12px; }
.a-subnow-top .grow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.a-subnow-top b { font-size: 1.05rem; }
.a-subnow-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--brand); color: #2A1A12; }
.a-price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.a-price small { font-family: var(--font); font-size: .82rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.a-none { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; border: 1px dashed var(--border-strong); color: var(--text-soft); font-size: .9rem; }
.a-none .icon { flex: none; color: var(--muted); }
.a-older { margin-top: 12px; }
.a-older summary { padding: 4px 0; font-size: .86rem; font-weight: 650; color: var(--text-soft); cursor: pointer; }
.a-older-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); font-size: .9rem; }
.a-older-row .grow { min-width: 0; }
.a-older-row small { display: block; font-size: .78rem; color: var(--muted); }
.a-tl { list-style: none; margin: 0 0 6px; padding: 0; }
.a-tl li { position: relative; display: flex; align-items: flex-start; gap: 12px; padding-bottom: 16px; }
.a-tl li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--border); }
.a-tl-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); color: var(--text-soft); }
.a-tl-ic .icon { width: 15px; height: 15px; }
.a-tl li.ok .a-tl-ic { background: var(--ok-soft); color: var(--ok); }
.a-tl li.bad .a-tl-ic { background: var(--danger-soft); color: var(--danger); }
.a-tl li.brand .a-tl-ic { background: var(--brand); color: #2A1A12; }
.a-tl .grow { min-width: 0; padding-top: 5px; }
.a-tl b { display: block; font-size: .9rem; font-weight: 600; line-height: 1.3; }
.a-tl small { display: block; font-size: .78rem; color: var(--muted); }
.a-tl time { flex: none; padding-top: 6px; font-size: .76rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.a-acts { display: flex; flex-direction: column; margin: 8px -10px -8px; }
.a-act { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; transition: background .15s; }
.a-act:hover { background: var(--surface-2); }
.a-act:disabled { opacity: .5; cursor: not-allowed; }
.a-act > .icon { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--surface-3); color: var(--text-soft); }
.a-act b { display: block; font-size: .9rem; font-weight: 650; }
.a-act small { display: block; font-size: .76rem; color: var(--muted); }
.a-act.danger, .a-act.danger > .icon { color: var(--danger); }
.a-act.danger > .icon { background: var(--danger-soft); }
.a-danger { border-color: color-mix(in srgb, var(--danger) 28%, var(--border)); }
.a-danger h3 { color: var(--danger); }
.a-members { display: flex; flex-direction: column; margin: 0 -10px; }
.a-members a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; color: inherit; font-weight: 400; }
.a-members a:hover { background: var(--surface-2); text-decoration: none; }
.a-members a.me { background: var(--surface-2); }
.a-members .grow { min-width: 0; }
.a-members .grow > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-members b { font-size: .88rem; }
.a-members small { font-size: .76rem; color: var(--muted); }
.a-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 0 0; }
.a-nums div { padding: 8px 4px; border-radius: 12px; background: var(--surface-2); text-align: center; }
.a-nums dt { font-size: .7rem; color: var(--muted); }
.a-nums dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Pagos y promociones */
.a-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.a-stat { padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); min-width: 0; }
.a-stat span { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); }
.a-stat b { display: block; margin: 2px 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.a-stat small { font-size: .78rem; color: var(--muted); }
.a-stat.bad b { color: var(--danger); }
@container apanel (max-width: 520px) {
  .a-stats { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .a-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 12px 14px; }
  .a-stat b { grid-column: 2; grid-row: 1 / 3; margin: 0; font-size: 1.4rem; }
}
.a-two { display: grid; gap: 14px; }
@container apanel (min-width: 900px) { .a-two { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; } }
.a-two-side { display: grid; gap: 14px; min-width: 0; }
.a-form { display: grid; gap: 12px; }
.a-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.a-code-in { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.a-code-in::placeholder { font-family: var(--font); font-weight: 400; letter-spacing: 0; text-transform: none; }
.a-tr.promos .c-code small { margin-top: 4px; }
.a-tr .c-uses b small { display: inline; font-weight: 500; }

/* Recetario */
.a-help { max-width: 72ch; margin: -4px 0 14px; font-size: .82rem; color: var(--muted); }
.a-recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
@media (max-width: 520px) { .a-recipes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.a-rec { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); transition: box-shadow .2s, transform .2s var(--ease); }
.a-rec:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.a-rec-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.a-rec-img .thumb { height: 100%; }
.a-rec-img .thumb .emoji { font-size: 2rem; }
.a-rec.is-hidden .a-rec-img { filter: grayscale(.85) opacity(.6); }
.a-rec-flag { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 999px; background: var(--dark); color: var(--on-dark); font-size: .72rem; font-weight: 700; }
.a-rec-body { flex: 1; min-width: 0; padding: 10px 12px 4px; }
.a-rec-body b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .9rem; line-height: 1.3; }
.a-rec-body small { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: .76rem; color: var(--muted); }
.a-rec-body small .icon { width: 13px; height: 13px; vertical-align: -2px; }
.a-rec-acts { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px 10px; }
.a-rec-acts .btn { flex: 1; min-height: 32px; padding: 0 8px; font-size: .8rem; gap: 5px; }
.a-rec-acts .btn .icon { width: 14px; height: 14px; }

/* Ajustes */
.a-settings { display: grid; gap: 14px; }
.a-toc { display: none; flex-direction: column; gap: 2px; }
@container apanel (min-width: 900px) {
  .a-settings { grid-template-columns: 190px minmax(0, 1fr); align-items: start; }
  .a-toc { display: flex; position: sticky; top: 96px; }
}
.a-toc button { padding: 8px 12px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: .88rem; font-weight: 600; color: var(--text-soft); text-align: left; cursor: pointer; }
.a-toc button:hover { background: var(--surface-3); color: var(--text); }
.a-settings-body { display: grid; gap: 14px; min-width: 0; }
.a-settings-body > [id] { scroll-margin-top: 92px; }
.a-flash { animation: a-flash 1.4s var(--ease); }
@keyframes a-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--brand), var(--shadow); } }
.a-checks { list-style: none; margin: 0 -10px -8px; padding: 0; }
@container acard (min-width: 640px) { .a-checks { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6px; } }
.a-checks button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.a-checks button:hover { background: var(--surface-2); }
.a-checks button > .icon { flex: none; width: 16px; height: 16px; color: var(--border-strong); }
.a-checks .grow { min-width: 0; }
.a-checks b { display: block; font-size: .9rem; }
.a-checks small { display: block; font-size: .78rem; color: var(--muted); }
.a-check { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.a-check .icon { width: 14px; height: 14px; stroke-width: 3; }
.a-check.lv-ok { background: var(--ok-soft); color: var(--ok); }
.a-check.lv-warn { background: var(--warn-soft); color: var(--warn); }
.a-check.lv-bad { background: var(--danger-soft); color: var(--danger); }
.a-check.lv-off { background: var(--surface-3); color: var(--muted); }
.a-check.lv-info { background: var(--brand-wash); color: var(--brand-deep); }
.a-inline-warn { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); font-size: .86rem; }
.a-inline-warn .icon { flex: none; margin-top: 1px; color: var(--accent); }
.a-narrow { max-width: 320px; }
.a-plans { display: grid; gap: 12px; }
@container acard (min-width: 600px) { .a-plans { grid-template-columns: 1fr 1fr; } }
.a-plan { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 14px 16px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); }
.a-plan legend { padding: 0 6px; font-size: .88rem; font-weight: 700; }
.a-check-line { display: flex; align-items: center; gap: 8px; font-size: .88rem; cursor: pointer; }
.a-check-line input { width: 18px; height: 18px; min-height: 0; accent-color: var(--dark); }
.a-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.a-form-foot p { flex: 1 1 240px; margin: 0; }
.a-providers { display: grid; gap: 12px; }
@container acard (min-width: 640px) { .a-providers { grid-template-columns: 1fr 1fr; } }
.a-provider { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.a-provider p { margin: 0; }
.a-provider > * { min-width: 0; }
.a-provider-h { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.a-provider .copy-line { background: var(--surface); }
.a-provider .btn { justify-self: start; }
.a-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-bottom: 14px; }
.a-counts div { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.a-counts b { display: block; font-family: var(--font-display); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.a-counts span { display: block; font-size: .76rem; line-height: 1.25; color: var(--muted); }
.a-card > p.small:first-of-type { margin-top: 0; }

/* Lista de la compra: envase y precio del supermercado elegido en cada línea */
.si { flex-wrap: wrap; }
.si.flash { animation: si-flash 1.6s var(--ease); }
@keyframes si-flash { 0%, 35% { background: var(--brand-wash); box-shadow: inset 3px 0 0 var(--brand); } }
.si-note { display: block; font-size: .7rem; color: var(--muted); padding-right: 4px; margin-top: 2px; }
.si-prod { flex: 0 0 calc(100% - 98px); display: flex; align-items: center; gap: 8px; min-width: 0; margin: -8px 10px 10px 88px; font-size: .76rem; color: var(--text-soft); }
.si-prod-store { flex: none; padding: 2px 8px; border-radius: 6px; background: var(--brand-wash); color: var(--brand-deep); font-weight: 700; font-size: .7rem; }
.si-prod-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.si-prod em { flex: none; margin-left: auto; font-style: normal; font-weight: 700; color: var(--text); }
.si.checked .si-prod { opacity: .5; }
@media (max-width: 520px) { .si-prod { margin-left: 52px; flex-basis: calc(100% - 62px); } }
.store-bar, .store-pick { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.store-pick { width: 100%; font: inherit; color: var(--text); text-align: left; cursor: pointer; border-style: dashed; }
.store-pick:hover { border-color: var(--brand); background: var(--brand-wash); }
.store-bar b, .store-pick b { display: block; font-size: .92rem; }
.store-bar .grow > span, .store-pick .grow > span { display: block; font-size: .78rem; color: var(--muted); }
.sb-ic, .store-pick > .icon:first-child { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--brand-wash); color: var(--brand-deep); }
.store-pick > .icon:first-child { padding: 9px; }
.store-pick > .icon:last-child { color: var(--muted); }
.sb-ic .icon { width: 19px; height: 19px; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.store-opt { padding: 14px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-weight: 650; color: var(--text); cursor: pointer; }
.store-opt:hover { border-color: var(--border-strong); }
.store-opt.on { border-color: var(--brand); background: var(--brand-wash); box-shadow: 0 0 0 2px var(--brand-soft); }

/* Nevera por secciones */
.fr-soon { margin: 0 0 16px; padding: 14px; border-radius: 22px; background: linear-gradient(150deg, var(--accent-soft), var(--surface) 75%); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.fr-soon h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 1rem; color: var(--accent); }
.fr-soon h3 .icon { width: 17px; height: 17px; }
.fr-soon-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-soon-item { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: .86rem; color: var(--text); cursor: pointer; }
.fr-soon-item:hover { border-color: var(--accent); }
.fr-soon-item b { font-weight: 650; }
.fr-soon-item small { font-size: .74rem; font-weight: 700; color: var(--accent); }
.fr-zones { position: sticky; top: calc(62px + env(safe-area-inset-top, 0px)); z-index: 5; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 8px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fr-zones::-webkit-scrollbar { display: none; }
@media (min-width: 960px) { .fr-zones { top: 76px; margin: 0 0 14px; padding: 8px 0; } }
.fr-zones button { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: .88rem; font-weight: 650; color: var(--text-soft); cursor: pointer; }
.fr-zones button:hover { color: var(--text); border-color: var(--border-strong); }
.fr-zones button.on { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.fr-zones em { font-style: normal; font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-soft); }
.fr-zones button.on em { background: rgba(255, 255, 255, .18); color: inherit; }
.fr-zone { margin-bottom: 8px; }
.fr-zone-title { display: flex; align-items: center; gap: 8px; margin: 18px 4px 10px; font-size: 1.2rem; }
.fr-zone:first-child .fr-zone-title { margin-top: 4px; }
.fr-zone-empty { padding: 28px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--border-strong); border-radius: 20px; margin-bottom: 18px; }
.fr-sec { margin-bottom: 10px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); overflow: hidden; }
.fr-sec-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.fr-sec-head:hover { background: var(--surface-2); }
.fr-sec-emoji { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface-2); font-size: 1.25rem; flex: none; }
.fr-sec-head b { display: block; font-size: .98rem; }
.fr-sec-warn { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; color: var(--accent); }
.fr-sec-warn .icon { width: 13px; height: 13px; }
.fr-sec-count { font-size: .76rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-soft); }
.fr-sec-head .chev .icon { width: 18px; height: 18px; color: var(--muted); transform: rotate(90deg); transition: transform .2s var(--ease); }
.fr-sec.closed .fr-sec-head .chev .icon { transform: none; }
.fr-sec .fr-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; padding: 2px 12px 12px; }
.fr-sec .fr-main { flex-direction: row; align-items: center; gap: 12px; min-height: 0; padding: 10px 46px 10px 12px; border-radius: 16px; box-shadow: none; background: var(--surface-2); border-color: transparent; }
.fr-sec .fr-main:hover { transform: none; background: var(--surface); border-color: var(--border-strong); }
.fr-sec .fr-emoji { margin: 0; font-size: 1.5rem; flex: none; }
.fr-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fr-sec .fr-name { -webkit-line-clamp: 1; padding-right: 0; }
.fr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.fr-sec .fr-days { margin-top: 0; padding: 1px 7px; font-size: .7rem; }
.fr-sec .fr-qty { font-size: .76rem; }
.fr-sec .fr-used { top: 50%; transform: translateY(-50%); right: 8px; width: 30px; height: 30px; }
.fr-item.u-now .fr-main { background: var(--accent-soft); }

/* Ficha de receta: otras formas de cocinarla */
.rd-methods { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 4px 0 14px; padding-bottom: 2px; }
.rd-methods::-webkit-scrollbar { display: none; }
.rd-methods button { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: .88rem; font-weight: 650; color: var(--text-soft); cursor: pointer; white-space: nowrap; }
.rd-methods button:hover { border-color: var(--border-strong); color: var(--text); }
.rd-methods button.on { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.rd-method-note { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; color: var(--text-soft); }
.rd-method-note .icon { width: 16px; height: 16px; color: var(--muted); }

/* ---------- Bienvenida personalizada v2: escena ilustrada por pregunta ---------- */
.ob2 { --a: #F5CF4E; --a2: #FEF6DD; --ad: #8A5F0B; position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; padding: 0 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--a2) 92%, var(--bg)) 0, var(--bg) 52%); transition: background .5s; }
.acc-butter { --a: #F5CF4E; --a2: #FEF3CF; --ad: #8A5F0B; }
.acc-tomato { --a: #DE5530; --a2: #FCE2D8; --ad: #A33A1C; }
.acc-peach { --a: #E8875A; --a2: #FDE8DC; --ad: #A5512A; }
.acc-sage { --a: #6E9B5E; --a2: #E5EFDF; --ad: #3C6B30; }
.acc-sky { --a: #4F8FB8; --a2: #E0EEF6; --ad: #2B6286; }
.acc-lilac { --a: #8B6BB1; --a2: #EFE7F7; --ad: #5E4384; }
.acc-mint { --a: #3FA28A; --a2: #DDF3EC; --ad: #22705D; }
:root[data-theme="dark"] .ob2 { --a2: color-mix(in srgb, var(--a) 22%, #17110D); --ad: var(--a); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ob2 { --a2: color-mix(in srgb, var(--a) 22%, #17110D); --ad: var(--a); } }

.ob2-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; margin: 0 -20px; padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 8px; transition: background .25s, box-shadow .25s; }
.ob2-scrolled .ob2-top { background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--border); }
.ob2-logo { width: 36px; height: 36px; border-radius: 11px; box-shadow: var(--shadow); flex: none; }
.ob2-back { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text); box-shadow: var(--shadow-xs); cursor: pointer; transition: transform .15s var(--ease); }
.ob2-back:active { transform: scale(.9); }
.ob2-segs { flex: 1; display: flex; gap: 4px; }
.ob2-segs i { flex: 1; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; position: relative; }
.ob2-segs i.done { background: var(--dark); }
.ob2-segs i.now::after { content: ""; position: absolute; inset: 0; background: var(--dark); border-radius: inherit; transform-origin: left; animation: ob2-seg .6s var(--ease) both; }
@keyframes ob2-seg { from { transform: scaleX(0); } to { transform: scaleX(.55); } }
.ob2-skip { flex: none; border: 0; background: none; font: inherit; font-size: .86rem; font-weight: 650; color: var(--muted); cursor: pointer; padding: 8px 2px; }

/* Escena */
.ob2-stage { position: relative; display: grid; place-items: center; min-height: clamp(200px, 32vh, 290px); margin: 4px -20px 0; padding: 6px 20px 30px; overflow: hidden; }
.ob2-blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .55; pointer-events: none; animation: ob2-blob 9s ease-in-out infinite; animation-delay: var(--t, 0s); }
.ob2-blob.b1 { width: 240px; height: 240px; left: -40px; top: -30px; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--a) 55%, transparent), transparent 70%); }
.ob2-blob.b2 { width: 280px; height: 280px; right: -60px; bottom: -80px; background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--a) 40%, transparent), transparent 70%); animation-direction: reverse; }
@keyframes ob2-blob { 50% { transform: translate(18px, 14px) scale(1.08); } }
.ob2-art { position: relative; width: min(100%, 390px); }
.ob2-art.big { width: min(100%, 300px); margin: 0 auto; }
.art-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 24px rgba(46, 29, 20, .14)); }
.ob2.enter .ob2-art { animation: ob2-art-in .6s var(--ease) both; }
@keyframes ob2-art-in { from { opacity: 0; transform: translateY(18px) scale(.92); } }

/* Hoja con la pregunta */
.ob2-sheet { position: relative; z-index: 2; flex: 1; margin: -22px -20px 0; padding: 24px 20px 10px; border-radius: 30px 30px 0 0; background: var(--bg); box-shadow: 0 -12px 30px -18px rgba(46, 29, 20, .25); }
.ob2.enter .ob2-sheet > * { animation: ob2-up .5s var(--ease) both; }
.ob2.enter.back .ob2-sheet > * { animation-name: ob2-down; }
.ob2.enter .ob2-sheet > :nth-child(2) { animation-delay: .04s; }
.ob2.enter .ob2-sheet > :nth-child(3) { animation-delay: .08s; }
.ob2.enter .ob2-sheet > :nth-child(n+4) { animation-delay: .12s; }
@keyframes ob2-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes ob2-down { from { opacity: 0; transform: translateY(-12px); } }
.ob2-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--a2); color: var(--ad); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ob2-sheet h1 { margin: 12px 0 8px; font-size: clamp(1.75rem, 6.6vw, 2.35rem); line-height: 1.08; letter-spacing: -.035em; }
.ob2-sheet h1 em { font-style: normal; position: relative; white-space: nowrap; }
.ob2-sheet h1 em::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: .05em; height: .32em; border-radius: 6px; background: var(--a); opacity: .55; z-index: -1; transform-origin: left; animation: ob2-mark .7s .35s var(--ease) both; }
@keyframes ob2-mark { from { transform: scaleX(0); } }
.ob2-sheet .lede { margin: 0 0 18px; color: var(--text-soft); font-size: 1rem; }
.ob2-sub { margin: 20px 0 10px; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ob2-sum { margin: 14px 2px 0; font-size: .92rem; color: var(--text-soft); }
.ob2-tip { margin: 12px 0 0; padding: 11px 14px; border-radius: 14px; background: var(--warn-soft); color: var(--warn); font-size: .88rem; font-weight: 600; }
.ob2-field { margin-top: 18px; }

/* Portada */
.ob2-perks { display: flex; flex-wrap: wrap; gap: 8px; }
.ob2-perks span { padding: 9px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: .9rem; font-weight: 650; box-shadow: var(--shadow-xs); }
.ob2.enter .ob2-perks span { animation: ob2-pop .45s var(--ease) both; animation-delay: calc(.25s + var(--i) * .07s); }
@keyframes ob2-pop { from { opacity: 0; transform: scale(.7); } }

/* Pie con el botón principal */
.ob2-foot { position: sticky; bottom: 0; z-index: 4; display: flex; gap: 10px; margin: 0 -20px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--bg) 70%, transparent); }
.ob2-cta { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 0 8px 0 24px; border: 0; border-radius: 999px; background: var(--dark); color: var(--on-dark); font: inherit; font-size: 1.05rem; font-weight: 750; cursor: pointer;
  box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--dark) 70%, transparent); transition: transform .15s var(--ease), opacity .2s; }
.ob2-cta:active { transform: scale(.97); }
.ob2-cta:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.ob2-cta-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--a); color: #2A1A12; }
.ob2-cta:not(:disabled) .ob2-cta-ic { animation: ob2-nudge 2.4s ease-in-out infinite; }
@keyframes ob2-nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(4px); } 90% { transform: translateX(-1px); } }
.ob2-foot.two .btn { flex: none; min-height: 58px; }

/* Tarjetas (objetivos, tiempo, origen) */
.ob2-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ob2-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 112px; padding: 14px; border-radius: 22px; border: 2px solid transparent; background: var(--surface); box-shadow: var(--shadow-xs); font: inherit; color: var(--text); text-align: left; cursor: pointer;
  transition: transform .15s var(--ease), border-color .2s, background .2s, box-shadow .2s; }
.ob2-tile:hover { box-shadow: var(--shadow); }
.ob2-tile:active { transform: scale(.96); }
.ob2-tile-emoji { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--a2); font-size: 1.55rem; margin-bottom: auto; transition: transform .3s var(--ease); }
.ob2-tile b { font-size: .95rem; line-height: 1.2; }
.ob2-tile small { font-size: .78rem; color: var(--muted); }
.ob2-check { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-strong); color: transparent; transition: background .2s, border-color .2s; }
.ob2-check .icon { width: 13px; height: 13px; stroke-width: 3.2; }
.ob2-tile.on { border-color: var(--dark); background: color-mix(in srgb, var(--a2) 70%, var(--surface)); }
.ob2-tile.on .ob2-check { background: var(--dark); border-color: var(--dark); color: var(--on-dark); animation: ob2-pop .3s var(--ease); }
.ob2-tile.on .ob2-tile-emoji { transform: rotate(-8deg) scale(1.08); background: var(--a); }
.ob2.enter .ob2-tile { animation: ob2-up .45s var(--ease) both; animation-delay: calc(.1s + var(--i) * .045s); }

/* Chips */
.ob2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob2-chip { display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; border-radius: 999px; border: 0; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border); font: inherit; font-size: .93rem; font-weight: 650; color: var(--text); cursor: pointer; transition: transform .15s var(--ease), background .2s, color .2s; }
.ob2-chip .e { font-size: 1.1rem; transition: transform .3s var(--ease); }
.ob2-chip:active { transform: scale(.93); }
.ob2-chip.on { background: var(--dark); color: var(--on-dark); box-shadow: 0 8px 16px -10px var(--dark); }
.ob2-chip.on .e { transform: scale(1.18) rotate(-6deg); }
.ob2-chips.small .ob2-chip { padding: 8px 12px; font-size: .86rem; }
.ob2.enter .ob2-chip { animation: ob2-pop .4s var(--ease) both; animation-delay: calc(.1s + var(--i) * .025s); }

/* Personas */
.ob2-stepper { display: flex; align-items: center; justify-content: center; gap: 30px; margin: 4px 0 12px; }
.ob2-round { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; border: 0; background: var(--a); color: #2A1A12; cursor: pointer; box-shadow: 0 10px 20px -10px var(--a); transition: transform .12s var(--ease); }
.ob2-round:active { transform: scale(.88); }
.ob2-round:disabled { opacity: .35; cursor: default; box-shadow: none; }
.ob2-round .icon { width: 26px; height: 26px; stroke-width: 2.6; }
.ob2-count { display: flex; flex-direction: column; align-items: center; min-width: 96px; }
.ob2-count b { font-family: var(--font-display); font-size: 4.6rem; line-height: 1; letter-spacing: -.05em; }
.ob2-count b.tick { animation: ob2-tick .35s var(--ease); }
@keyframes ob2-tick { from { transform: translateY(-14px) scale(.8); opacity: 0; } }
.ob2-count span { color: var(--muted); font-weight: 650; }

/* Interruptor */
.ob2-switch { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-xs); cursor: pointer; }
.ob2-switch .e { font-size: 1.5rem; flex: none; }
.ob2-switch b { display: block; font-size: .95rem; }
.ob2-switch small { display: block; font-size: .8rem; color: var(--muted); line-height: 1.35; }
.ob2-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ob2-switch i { flex: none; position: relative; width: 52px; height: 32px; border-radius: 16px; background: var(--surface-3); transition: background .25s; }
.ob2-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .3s var(--ease); }
.ob2-switch input:checked + i { background: var(--a); }
.ob2-switch input:checked + i::after { transform: translateX(20px); }
.ob2-switch input:focus-visible + i { outline: 3px solid var(--ring); outline-offset: 2px; }

/* Días */
.ob2-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.ob2-days button { aspect-ratio: 1; max-width: 52px; justify-self: center; width: 100%; border-radius: 50%; border: 0; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border); font: inherit; font-weight: 800; font-size: 1.02rem; color: var(--muted); cursor: pointer; transition: transform .15s var(--ease), background .2s, color .2s; }
.ob2-days button:active { transform: scale(.88); }
.ob2-days button.on { background: var(--a); color: #2A1A12; box-shadow: 0 8px 16px -10px var(--a); }
.ob2.enter .ob2-days button { animation: ob2-pop .4s var(--ease) both; animation-delay: calc(.1s + var(--i) * .04s); }

/* Presupuesto */
.ob2-budget { display: flex; flex-direction: column; align-items: center; padding: 6px 4px 0; }
.ob2-budget.off { opacity: .6; }
.ob2-money { font-family: var(--font-display); font-size: 4.6rem; font-weight: 600; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.ob2-money small { font-size: 1.7rem; margin-left: 4px; vertical-align: top; color: var(--ad); }
.ob2-money-sub { margin: 8px 0 18px; padding: 5px 12px; border-radius: 999px; background: var(--a2); color: var(--ad); font-size: .9rem; font-weight: 650; }
.ob2-budget input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; min-height: 0; padding: 0; border: 0; border-radius: 6px; box-shadow: none; cursor: pointer;
  background: linear-gradient(90deg, var(--a) 0 var(--pct, 50%), var(--surface-3) var(--pct, 50%)); }
.ob2-budget input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: var(--dark); border: 5px solid var(--a); box-shadow: 0 6px 14px -4px rgba(46, 29, 20, .5); }
.ob2-budget input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--dark); border: 5px solid var(--a); }
.ob2-range-labels { display: flex; justify-content: space-between; width: 100%; margin-top: 8px; font-size: .78rem; color: var(--muted); font-weight: 650; }

/* Supermercados */
.ob2-stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ob2-store { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 20px; border: 2px solid transparent; background: var(--surface); box-shadow: var(--shadow-xs); font: inherit; color: var(--text); text-align: left; cursor: pointer; transition: transform .15s var(--ease), border-color .2s, background .2s; }
.ob2-store:active { transform: scale(.96); }
.ob2-store .m { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--c); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; transition: transform .3s var(--ease); }
.ob2-store b { font-size: .95rem; line-height: 1.2; }
.ob2-store.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--surface)); }
.ob2-store.on .m { transform: rotate(-8deg) scale(1.08); }
.ob2-store.any { grid-column: 1 / -1; }
.ob2-store.any .m { background: var(--surface-3); color: var(--text); }
.ob2.enter .ob2-store { animation: ob2-up .45s var(--ease) both; animation-delay: calc(.08s + var(--i) * .035s); }

/* Cocina */
.ob2-meter { position: relative; height: 40px; margin-top: 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-xs); overflow: hidden; }
.ob2-meter i { position: absolute; inset: 0 auto 0 0; background: var(--a2); border-right: 3px solid var(--a); transition: width .5s var(--ease); }
.ob2-meter span { position: relative; display: flex; align-items: center; height: 100%; padding: 0 14px; font-size: .88rem; color: var(--text-soft); }
.ob2-meter b { margin-right: 4px; color: var(--text); }
.step-kitchen .ob2-stage { min-height: 0; padding-bottom: 34px; }
.step-kitchen .ob2-art { width: min(100%, 460px); }
.art-kitchen { position: relative; }
.art-ap { transition: filter .3s, opacity .3s; }
.art-ap:not(.on) { filter: grayscale(1) brightness(1.15); opacity: .38; }
.art-hot { position: absolute; display: block; padding: 0; border: 0; border-radius: 14px; background: transparent; cursor: pointer; transition: background .2s, box-shadow .2s; }
.art-hot:hover, .art-hot:focus-visible { background: rgba(255, 255, 255, .25); box-shadow: 0 0 0 2px var(--a); outline: none; }
.art-hot-check { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--dark); color: var(--on-dark); font-size: .72rem; font-weight: 900; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--ease); }
.art-hot.on .art-hot-check { opacity: 1; transform: none; }

/* Objetivos, gustos, dieta: emojis en órbita alrededor de un plato */
.art-orbit { position: relative; width: 250px; height: 220px; margin: 0 auto; }
.art-plate { position: absolute; left: 50%; top: 50%; width: 118px; height: 118px; margin: -59px 0 0 -59px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #FFFDF8 0 55%, #F2E6D4 56% 62%, #FFFCF5 63%); box-shadow: 0 18px 30px -14px rgba(46, 29, 20, .4); }
.art-plate span { font-size: 3rem; animation: ob2-bob 3s ease-in-out infinite; animation-delay: var(--t, 0s); }
@keyframes ob2-bob { 50% { transform: translateY(-5px) rotate(4deg); } }
.art-orbit-item { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; animation: ob2-orbit 26s linear infinite; animation-delay: calc(var(--t, 0s) - var(--i) / var(--n) * 26s); }
.art-orbit-item b { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--surface); box-shadow: 0 8px 16px -8px rgba(46, 29, 20, .35); font-size: 1.6rem; font-weight: 400; }
.art-orbit-item.is-blank b { background: transparent; box-shadow: none; border: 2px dashed color-mix(in srgb, var(--text) 18%, transparent); color: transparent; }
@keyframes ob2-orbit { from { transform: rotate(0deg) translateX(100px) rotate(0deg); } to { transform: rotate(360deg) translateX(100px) rotate(-360deg); } }

/* Portada: móvil con la semana */
.art-phone-wrap { position: relative; width: 230px; height: 250px; margin: 0 auto; }
.art-phone { position: absolute; left: 50%; top: 4px; width: 172px; margin-left: -86px; padding: 12px 10px 12px; border-radius: 28px; background: var(--dark); box-shadow: 0 26px 40px -18px rgba(46, 29, 20, .55); transform: rotate(-5deg); animation: ob2-phone 6s ease-in-out infinite; animation-delay: var(--t, 0s); }
@keyframes ob2-phone { 50% { transform: rotate(-3deg) translateY(-6px); } }
.art-phone > * { background: #FFFDF8; }
.art-phone-top { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px 10px; border-radius: 16px 16px 6px 6px; background: #2E1D14 !important; color: #FBF7F1; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.art-phone-top b { font-family: var(--font-display); font-size: .82rem; }
.art-phone-top span { font-size: .56rem; opacity: .75; }
.art-phone-top i { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .15); margin-top: 4px; position: relative; overflow: hidden; }
.art-phone-top i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: #F5CF4E; border-radius: inherit; }
.art-phone-row { display: flex; align-items: center; gap: 6px; padding: 6px 7px; margin-top: 4px; border-radius: 9px; color: #2E1D14; }
.ob2.enter .art-phone-row { animation: ob2-up .5s var(--ease) both; animation-delay: calc(.35s + var(--i) * .12s); }
.art-phone-day { font-size: .52rem; font-weight: 800; color: #9C8774; width: 8px; }
.art-phone-thumb { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #FBE8A6; font-size: .8rem; }
.art-phone-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.art-phone-txt b { font-size: .55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
.art-phone-txt i { height: 3px; width: 46px; border-radius: 2px; background: #EFE4D4; }
.art-phone-cta { margin-top: 6px; padding: 7px; border-radius: 10px; background: #F5CF4E !important; color: #2E1D14; font-size: .56rem; font-weight: 800; text-align: center; }
.art-float { position: absolute; font-size: 2rem; filter: drop-shadow(0 8px 10px rgba(46, 29, 20, .25)); animation: ob2-float 5s ease-in-out infinite; animation-delay: calc(var(--t, 0s) - var(--k, 0) * 1s); }
.art-float.f0 { left: -6px; top: 20px; --k: 0; } .art-float.f1 { right: -4px; top: 0; --k: 1; } .art-float.f2 { left: 2px; bottom: 30px; --k: 2; }
.art-float.f3 { right: -10px; bottom: 60px; --k: 3; } .art-float.f4 { left: 30px; top: -10px; font-size: 1.5rem; --k: 4; } .art-float.f5 { right: 24px; bottom: -4px; font-size: 1.6rem; --k: 5; }
@keyframes ob2-float { 50% { transform: translateY(-10px) rotate(8deg); } }

/* Mesa, calendario, temporizador, cesta, súper */
.art-seat.new { animation: ob2-seat .5s var(--ease) both; }
@keyframes ob2-seat { from { transform: scale(0); } 70% { transform: scale(1.12); } }
.ob2.enter .art-seat { animation: ob2-seat .5s var(--ease) both; animation-delay: calc(.2s + var(--i) * .06s); }
.ob2.enter .art-cal-day { animation: ob2-up .45s var(--ease) both; animation-delay: calc(.15s + var(--i) * .05s); }
.art-cal-day.on rect { animation: ob2-glow .5s var(--ease); }
@keyframes ob2-glow { from { opacity: .4; } }
.art-timer-arc { animation: ob2-arc .9s var(--ease) both; }
@keyframes ob2-arc { from { stroke-dashoffset: 440; } }
.ob2.enter .art-item { animation: ob2-drop .5s var(--ease) both; animation-delay: calc(.25s + var(--i) * .07s); }
@keyframes ob2-drop { from { opacity: 0; transform: translateY(-40px); } }
.ob2.enter .art-sign { transform-origin: 180px 14px; animation: ob2-swing 1.2s var(--ease) both; }
@keyframes ob2-swing { 0% { transform: rotate(-10deg); } 40% { transform: rotate(6deg); } 70% { transform: rotate(-3deg); } }

/* Creando la semana: olla con vapor */
.ob2-building { justify-content: center; text-align: center; padding-bottom: 40px; }
.ob2-building h1 { margin: 8px 0 6px; font-size: 2rem; letter-spacing: -.03em; }
.ob2-building .lede { color: var(--text-soft); margin: 0 0 20px; }
.art-pot { position: relative; }
.art-drop { position: absolute; left: calc(32% + var(--i) * 7%); top: -10px; font-size: 1.7rem; animation: ob2-into 2.4s ease-in infinite; animation-delay: calc(var(--i) * .4s); opacity: 0; }
@keyframes ob2-into { 0% { opacity: 0; transform: translateY(-20px) rotate(0); } 15% { opacity: 1; } 70% { opacity: 1; transform: translateY(80px) rotate(160deg); } 85%, 100% { opacity: 0; transform: translateY(96px) rotate(200deg) scale(.6); } }
.art-steam { stroke-dasharray: 60; animation: ob2-steam 2.2s ease-in-out infinite; }
.art-steam.s1 { animation-delay: .5s; } .art-steam.s2 { animation-delay: 1s; }
@keyframes ob2-steam { 0% { stroke-dashoffset: 60; opacity: 0; } 40% { opacity: .9; } 100% { stroke-dashoffset: -60; opacity: 0; } }
.art-flame { animation: ob2-flame .6s ease-in-out infinite alternate; transform-origin: 150px 186px; }
@keyframes ob2-flame { to { transform: scaleY(1.25); } }
.ob2-checks { list-style: none; margin: 0 auto; padding: 6px 18px; width: 100%; max-width: 420px; text-align: left; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.ob2-checks li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); color: var(--muted); font-weight: 650; transition: color .3s; }
.ob2-checks li:first-child { border-top: 0; }
.ob2-checks .c { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-strong); color: transparent; transition: background .3s, border-color .3s, color .3s; }
.ob2-checks .c .icon { width: 15px; height: 15px; stroke-width: 3; }
.ob2-checks li.done { color: var(--text); }
.ob2-checks li.done .c { background: var(--a); border-color: var(--a); color: #2A1A12; animation: ob2-pop .35s var(--ease); }

/* Resultado */
.ob2-result { padding-top: calc(16px + env(safe-area-inset-top, 0px)); overflow: hidden; }
.ob2-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 10; overflow: hidden; }
.ob2-confetti i { position: absolute; left: var(--x); top: -20px; width: calc(10px * var(--s)); height: calc(16px * var(--s)); border-radius: 3px; background: var(--c); transform: rotate(var(--r)); animation: ob2-confetti 2.6s cubic-bezier(.2, .6, .4, 1) both; animation-delay: var(--d); }
@keyframes ob2-confetti { to { transform: translateY(105vh) rotate(calc(var(--r) + 540deg)); opacity: .9; } }
.ob2-result-head { text-align: center; padding: 10px 0 4px; }
.ob2-medal { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--a); font-size: 2.6rem; box-shadow: 0 16px 30px -14px var(--a); animation: ob2-medal .7s var(--ease) both; }
@keyframes ob2-medal { from { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.1) rotate(6deg); } }
.ob2-result h1 { margin: 14px 0 6px; font-size: clamp(1.7rem, 6.4vw, 2.3rem); letter-spacing: -.035em; line-height: 1.1; }
.ob2-result .lede { margin: 0; color: var(--text-soft); }
.ob2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0 12px; }
.ob2-stats > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-xs); text-align: center; animation: ob2-up .5s var(--ease) both; animation-delay: calc(.3s + var(--i) * .1s); }
.ob2-stats span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--a2); font-size: 1.25rem; }
.ob2-stats b { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ob2-stats small { font-size: .74rem; color: var(--muted); line-height: 1.25; }
.ob2-bar { display: block; width: 80%; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 2px; }
.ob2-bar em { display: block; height: 100%; border-radius: inherit; background: var(--ok); animation: ob2-grow 1s .5s var(--ease) both; transform-origin: left; }
@keyframes ob2-grow { from { transform: scaleX(0); } }
.ob2-store-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-xs); animation: ob2-up .5s .6s var(--ease) both; }
.ob2-store-card .m { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--c); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.ob2-store-card b { display: block; }
.ob2-store-card small { display: block; font-size: .8rem; color: var(--muted); }
.ob2-pill { flex: none; display: flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 14px; background: var(--ok-soft); color: var(--ok); font-weight: 800; font-size: 1.05rem; }
.ob2-pill small { font-size: .66rem; font-weight: 700; }
.ob2-tagline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ob2-tagline span { padding: 6px 11px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-xs); font-size: .8rem; font-weight: 650; color: var(--text-soft); }
.ob2-week { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px 10px; }
.ob2-week::-webkit-scrollbar { display: none; }
.ob2-day { flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; padding: 14px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-xs); animation: ob2-up .5s var(--ease) both; animation-delay: calc(.7s + var(--i) * .06s); }
.ob2-day.today { box-shadow: 0 0 0 2px var(--a), var(--shadow); }
.ob2-day h3 { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 10px; font-size: 1rem; text-transform: capitalize; }
.ob2-day h3 span { font-family: var(--font); font-size: .78rem; font-weight: 600; color: var(--muted); text-transform: none; }
.ob2-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ob2-day li { display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 600; line-height: 1.25; }
.ob2-day li small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ob2-free { margin: 6px 0; color: var(--muted); font-size: .86rem; }
.ob2-next { list-style: none; margin: 18px 0 0; padding: 0; }
.ob2-next li { display: flex; gap: 14px; padding: 0 0 16px; position: relative; }
.ob2-next li:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 46px; bottom: 4px; width: 2px; background: var(--border); }
.ob2-next li > span:first-child { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--a2); font-size: 1.2rem; }
.ob2-next b { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ad); }
.ob2-next li span:last-child { font-size: .92rem; color: var(--text-soft); padding-top: 4px; }

/* Escritorio: la escena a la izquierda, la pregunta a la derecha */
@media (min-width: 900px) {
  .ob2:not(.ob2-building):not(.ob2-result) { display: grid; max-width: none; margin: 0; padding: 0; grid-template-columns: minmax(0, 1.1fr) minmax(420px, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "stage top" "stage sheet" "stage foot"; }
  .ob2:not(.ob2-building):not(.ob2-result) .ob2-stage { grid-area: stage; position: sticky; top: 0; height: 100vh; margin: 0; padding: 40px; border-radius: 0 40px 40px 0; background: linear-gradient(160deg, var(--a2), color-mix(in srgb, var(--a2) 40%, var(--bg))); }
  .ob2:not(.ob2-building):not(.ob2-result) .ob2-art { width: min(80%, 520px); }
  .step-kitchen .ob2-art { width: min(92%, 620px) !important; }
  .ob2:not(.ob2-building):not(.ob2-result) .ob2-top { grid-area: top; margin: 0; padding: 28px 56px 8px; }
  .ob2:not(.ob2-building):not(.ob2-result) .ob2-sheet { grid-area: sheet; margin: 0; padding: 26px 56px 12px; border-radius: 0; background: transparent; box-shadow: none; max-width: 640px; }
  .ob2:not(.ob2-building):not(.ob2-result) .ob2-foot { grid-area: foot; margin: 0; padding: 14px 56px 30px; max-width: 640px; }
  .ob2-blob.b1 { width: 380px; height: 380px; } .ob2-blob.b2 { width: 440px; height: 440px; }
  .art-orbit { transform: scale(1.35); }
  .art-phone-wrap { transform: scale(1.3); }
  .ob2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ob2-tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ob2-result, .ob2-building { max-width: 760px; }
  .ob2-week { margin: 0; padding: 2px 0 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); overflow: visible; }
  .ob2-day { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .art-orbit-item { animation: none; transform: rotate(calc(var(--i) / var(--n) * 360deg)) translateX(100px) rotate(calc(var(--i) / var(--n) * -360deg)); }
  .ob2-confetti { display: none; }
}

/* ---------- Cabecera común y menú de la cuenta ---------- */
/* Todas las pantallas: [volver o marca] título · acciones de la pantalla · foto que abre el menú */
.tb-brand { display: flex; align-items: center; gap: 9px; flex: none; font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; letter-spacing: -.03em; color: var(--text); }
.tb-brand img { width: 34px; height: 34px; border-radius: 11px; box-shadow: var(--shadow); }
.tb-me { flex: none; position: relative; display: grid; place-items: center; width: 46px; height: 46px; margin: 0 -4px 0 2px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tb-face { position: relative; display: grid; flex: none; }
.tb-me .avatar { width: 38px; height: 38px; font-size: .84rem; border: 0; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--brand) 75%, transparent); transition: transform .2s var(--ease), box-shadow .2s; }
.tb-me:hover .avatar { transform: scale(1.05); }
.tb-me:active .avatar { transform: scale(.92); }
.tb-me.open .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--dark); }
.tb-me:focus-visible { outline: none; }
.tb-me:focus-visible .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--ring); }
.tb-dot { position: absolute; top: -2px; right: -2px; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); border: 2.5px solid var(--bg); animation: tb-dot 2.4s ease-in-out infinite; }
.tb-dot[hidden] { display: none; }
@keyframes tb-dot { 50% { transform: scale(1.18); } }
@media (max-width: 420px) { .topbar:has(> [data-act="__back"]) h1 { font-size: 1.4rem; } }
button.nav-user { font: inherit; text-align: left; cursor: pointer; width: 100%; }
.nav-user .tb-dot { border-color: var(--surface); }
@media (min-width: 960px) {
  .tb-me, .tb-brand { display: none; }
  .nav button.nav-user { transition: border-color .2s, box-shadow .2s, background .2s; }
  .nav button.nav-user:hover { background: var(--surface); border-color: var(--border-strong); }
  .nav button.nav-user > .icon { color: var(--muted); }
  .nav button.nav-user[aria-expanded="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
}

/* Desplegable */
.um-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(28, 16, 10, .2); animation: fade .2s; }
.um-scrim.out { opacity: 0; transition: opacity .15s; }
.um { position: fixed; z-index: 91; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 8px; border-radius: 26px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); transform-origin: top right; animation: um-in .3s var(--ease); }
.um.up { transform-origin: bottom left; animation-name: um-in-up; }
.um.out { animation: um-out .16s ease-in forwards; }
@keyframes um-in { from { opacity: 0; transform: scale(.88) translateY(-8px); } }
@keyframes um-in-up { from { opacity: 0; transform: scale(.88) translateY(8px); } }
@keyframes um-out { to { opacity: 0; transform: scale(.95); } }
@keyframes um-tile { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.um a:focus-visible, .um button:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }

.um-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 12px; border-radius: 20px; color: #FBF7F1; overflow: hidden;
  background: radial-gradient(120% 160% at 100% 0, rgba(245, 207, 78, .42), transparent 55%), radial-gradient(90% 120% at 0 100%, rgba(222, 85, 48, .28), transparent 60%), #2E1D14; }
.um-head .avatar.xl { width: 52px; height: 52px; font-size: 1.15rem; }
.um-who { flex: 1; min-width: 0; display: grid; gap: 1px; }
.um-who b { font-family: var(--font-display); font-size: 1.18rem; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-who span { font-size: .8rem; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-chev { width: 16px; height: 16px; flex: none; color: var(--muted); }
.um-head .um-chev { color: rgba(251, 247, 241, .6); }

.um-home { display: flex; align-items: center; gap: 10px; padding: 12px 4px 10px 6px; }
.um-home-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--text); }
.um-faces { display: flex; flex: none; }
.um-faces i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); color: var(--text); font-style: normal; font-size: .66rem; font-weight: 800; border: 2px solid var(--surface); }
.um-faces i + i { margin-left: -9px; }
.um-faces i.me { background: var(--brand); color: #2A1A12; }
.um-home-txt { min-width: 0; display: grid; line-height: 1.3; }
.um-home-txt b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-home-txt span { font-size: .76rem; color: var(--muted); }
.um-invite { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px 0 9px; border-radius: 16px; border: 0; background: var(--brand-wash); color: var(--brand-deep); font: inherit; font-size: .8rem; font-weight: 750; cursor: pointer; transition: transform .15s var(--ease); }
.um-invite:active { transform: scale(.94); }
.um-invite .icon { width: 15px; height: 15px; stroke-width: 2.6; }

.um-plan { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; font-size: .85rem; font-weight: 650; }
.um-plan .icon { width: 18px; height: 18px; flex: none; }
.um-plan.info { background: var(--brand-wash); color: var(--brand-deep); }
.um-plan.ok { background: var(--ok-soft); color: var(--ok); }
.um-plan.warn { background: var(--warn-soft); color: var(--warn); }
.um-plan.bad { background: var(--danger-soft); color: var(--danger); }
.um-plan-go { flex: none; font-size: .76rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

.um-label { display: block; padding: 14px 8px 8px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.um-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.um-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 10px 11px; border-radius: 18px; background: var(--tile-bg); color: var(--text); animation: um-tile .34s var(--ease) both; animation-delay: calc(60ms + var(--i) * 30ms); transition: transform .15s var(--ease); }
.um-tile:hover { transform: translateY(-2px); }
.um-tile:active { transform: scale(.95); }
.um-tile span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--tile-ic); color: var(--tile-fg); box-shadow: 0 6px 12px -6px var(--tile-ic); }
.um-tile span .icon { width: 19px; height: 19px; }
.um-tile b { font-size: .8rem; line-height: 1.2; font-weight: 700; }
.t-butter { --tile-bg: #FEF6DD; --tile-ic: #F5CF4E; --tile-fg: #2A1A12; }
.t-peach { --tile-bg: #FDEAE0; --tile-ic: #E8875A; --tile-fg: #fff; }
.t-tomato { --tile-bg: #FCE2D8; --tile-ic: #DE5530; --tile-fg: #fff; }
.t-sage { --tile-bg: #E5EFDF; --tile-ic: #6E9B5E; --tile-fg: #fff; }
.t-sky { --tile-bg: #E0EEF6; --tile-ic: #4F8FB8; --tile-fg: #fff; }
.t-lilac { --tile-bg: #EFE7F7; --tile-ic: #8B6BB1; --tile-fg: #fff; }
:root[data-theme="dark"] .um-tile { --tile-bg: color-mix(in srgb, var(--tile-ic) 16%, var(--surface)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .um-tile { --tile-bg: color-mix(in srgb, var(--tile-ic) 16%, var(--surface)); } }

.um-list { display: grid; gap: 1px; padding: 4px; border-radius: 20px; background: var(--surface-2); }
.um-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 6px 10px 6px 6px; border: 0; border-radius: 15px; background: none; color: var(--text); font: inherit; font-size: .92rem; font-weight: 600; text-align: left; cursor: pointer; transition: background .15s; }
.um-row:hover { background: var(--surface); }
.um-row.static { cursor: default; }
.um-row.static:hover { background: none; }
.um-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; background: var(--surface); color: var(--text-soft); box-shadow: var(--shadow-xs); }
.um-ic .icon { width: 18px; height: 18px; }
.um-row.danger, .um-row.danger .um-ic { color: var(--danger); }
.um-seg { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-3); }
.um-seg button { display: grid; place-items: center; width: 34px; height: 30px; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.um-seg button .icon { width: 16px; height: 16px; }
.um-seg button[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }
.um-foot { margin: 12px 0 4px; text-align: center; font-size: .74rem; color: var(--muted); }
.um-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }


@media (prefers-reduced-motion: reduce) {
  .um, .um.up, .um.out, .um-tile, .tb-dot { animation: none; }
}

/* ---------- Inicio: el día en la mesa, la semana de un vistazo e ideas ---------- */
.hm-date { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--muted); }
.hm-date .icon { width: 16px; height: 16px; color: var(--brand-deep); }
.hm-head h1 { margin-bottom: 6px; }
.hm-mood { margin: 0; color: var(--text-soft); font-size: 1rem; }

/* Móvil: una sola columna en este orden (en escritorio, columna principal + lateral) */
.hm .hb-hero { order: 1; } .hm .hb-quick { order: 2; } .hm .hb-today { order: 3; } .hm .hb-alerts { order: 4; } .hm .hb-missing { order: 5; }
.hm .hb-stats { order: 6; } .hm .hb-week { order: 7; } .hm .hb-ideas { order: 8; } .hm .hb-ai { order: 9; } .hm .hb-season { order: 10; }
.hm .hb-fest { order: 11; } .hm .hb-tip { order: 12; } .hm .hb-favs { order: 13; } .hm .hb-pro { order: 14; }

.hm-card { display: block; padding: 16px; border-radius: 26px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); color: var(--text); }
.hm-card-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.hm .k { display: block; font-size: .69rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-deep); }
.hm-card-head h3 { margin: 3px 0 0; font-family: var(--font-display); font-size: 1.22rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.hm-card-head > a { display: inline-flex; align-items: center; gap: 2px; flex: none; font-size: .84rem; font-weight: 700; color: var(--brand-deep); }
.hm-card-head > a .icon { width: 15px; height: 15px; }

/* Accesos rápidos */
.hm-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hm-q { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px 11px; border: 0; border-radius: 22px; background: var(--q-bg); color: var(--text); font: inherit; text-align: center; cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s; }
.hm-q:hover { box-shadow: var(--shadow); }
.hm-q:active { transform: scale(.94); }
.hm-q-ic { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; background: var(--surface); font-size: 1.45rem; box-shadow: 0 8px 16px -10px rgba(46, 29, 20, .45); transition: transform .3s var(--ease); }
.hm-q:hover .hm-q-ic { transform: rotate(-8deg) scale(1.06); }
.hm-q-ic em { position: absolute; top: -6px; right: -9px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: #fff; font-style: normal; font-size: .64rem; font-weight: 800; border: 2px solid var(--q-bg); }
.hm-q b { font-size: .76rem; font-weight: 700; line-height: 1.15; }
.q-butter { --q-bg: var(--brand-wash); }
.q-sage { --q-bg: var(--sage); }
.q-peach { --q-bg: var(--peach); }
.q-sky { --q-bg: color-mix(in srgb, #4F8FB8 15%, var(--surface)); }
@media (min-width: 760px) {
  .hm-q { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px; text-align: left; }
  .hm-q b { font-size: .92rem; }
}

/* Hoy en la mesa: línea de tiempo */
.hm-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hm-tl a { display: flex; align-items: center; gap: 12px; padding: 7px 8px 7px 6px; border-radius: 18px; color: var(--text); transition: background .15s; }
.hm-tl a:hover { background: var(--surface-2); }
.hm-tl-time { width: 40px; flex: none; font-size: .8rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.hm-tl-pic { position: relative; flex: none; }
.hm-tl-pic .thumb { width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 6px 12px -8px rgba(46, 29, 20, .5); }
.hm-tl li + li .hm-tl-pic::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); height: 12px; border-left: 2px dotted var(--border-strong); }
.hm-tl-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.hm-tl-txt small { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hm-tl-txt b { font-size: .96rem; font-weight: 650; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hm-tl-ok { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.hm-tl-ok .icon { width: 15px; height: 15px; stroke-width: 3; }
.hm-tl li.done .hm-tl-pic, .hm-tl li.done .hm-tl-txt b { opacity: .55; }
.hm-tl li.next a { background: var(--brand-wash); }
.hm-tl li.next .hm-tl-time, .hm-tl li.next small { color: var(--brand-deep); }
.hm-tl li.next .hm-tl-pic .thumb { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--brand); }
.hm-tl-pic .thumb .emoji, .hm-wd-pic .thumb .emoji { width: auto; font-size: 1.35rem; background: none; box-shadow: none; }

/* Tu semana */
.hm-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.hm-wd { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 9px 0 10px; border-radius: 20px; color: var(--text); transition: background .15s; animation: hm-pop .45s var(--ease) both; animation-delay: calc(var(--i) * 40ms); }
.hm-wd:hover { background: var(--surface-2); }
.hm-wd small { font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.hm-wd b { font-size: 1rem; font-weight: 750; line-height: 1; }
.hm-wd-pic { display: grid; place-items: center; width: 38px; height: 38px; margin-top: 3px; border-radius: 50%; border: 2px dashed var(--border-strong); color: var(--muted); overflow: hidden; }
.hm-wd-pic .icon { width: 15px; height: 15px; }
.hm-wd-pic:has(.thumb) { border: 0; box-shadow: 0 5px 12px -6px rgba(46, 29, 20, .55); }
.hm-wd-pic .thumb { width: 100%; height: 100%; }
.hm-wd-dots { display: flex; gap: 3px; height: 5px; }
.hm-wd-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); }
.hm-wd-dots i.on { background: var(--ok); }
.hm-wd.today { background: var(--dark); color: var(--on-dark); box-shadow: 0 10px 20px -12px rgba(46, 29, 20, .7); }
.hm-wd.today small { color: var(--brand); }
.hm-wd.today .hm-wd-pic { border-color: color-mix(in srgb, var(--on-dark) 35%, transparent); color: var(--on-dark); }
.hm-wd.today .hm-wd-dots i { background: color-mix(in srgb, var(--on-dark) 25%, transparent); }
.hm-wd.today .hm-wd-dots i.on { background: var(--brand); }
.hm-wd.past { opacity: .5; }
.hm-week-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: .86rem; color: var(--text-soft); }
.hm-week-foot b { color: var(--text); }
.hm-bar { flex: 0 0 100%; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.hm-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ok), #9CCB86); transform-origin: left; animation: hm-grow 1s .2s var(--ease) both; }
@keyframes hm-grow { from { transform: scaleX(0); } }
@keyframes hm-pop { from { opacity: 0; transform: translateY(8px) scale(.95); } }

/* De un vistazo: compra, presupuesto y calorías */
.hm-rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.hm-ring { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 8px; border-radius: 18px; text-align: center; color: var(--text); transition: background .15s; }
.hm-ring:hover { background: var(--surface-2); }
.hm-ring-g { position: relative; display: grid; place-items: center; margin-bottom: 6px; }
.hm-ring-g > span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-soft); }
.hm-ring-g > span .icon { width: 22px; height: 22px; }
.hm-ring-g .hm-ring-eur { font-size: 1.25rem; font-weight: 800; }
.hm-ring-g svg circle:last-child { animation: hm-ring 1.1s .15s var(--ease) both; }
@keyframes hm-ring { from { stroke-dasharray: 0 400; } }
.hm-ring b { font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.hm-ring small { font-size: .72rem; line-height: 1.25; color: var(--muted); }
.hm-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.hm-macros span { display: grid; gap: 5px; font-size: .74rem; font-weight: 600; color: var(--muted); }
.hm-macros i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(var(--c), var(--c)) 0 0 / var(--w) 100% no-repeat, var(--surface-3); }
.hm-macros b { margin-top: -3px; font-size: .88rem; color: var(--text); }
.hm-macros b small { font-weight: 600; color: var(--muted); }

/* Úsalo pronto */
.hm-use { background: linear-gradient(165deg, var(--peach), var(--surface) 75%); border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }
.hm-use .k { color: var(--accent); }
.hm-foods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hm-food { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-xs); }
.hm-food i { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface-2); font-style: normal; font-size: 1.3rem; }
.hm-food b { font-size: .84rem; font-weight: 650; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-food em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--muted); }
.hm-food.warn em { color: var(--warn); }
.hm-food.bad em { color: var(--danger); }
.hm-use-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: .86rem; font-weight: 750; color: var(--accent); }
.hm-use-cta .icon { width: 15px; height: 15px; }
.hm-strip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.hm-strip-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 14px; background: var(--brand-wash); color: var(--brand-deep); }
.hm-strip .grow { display: grid; gap: 1px; }
.hm-strip .grow b { font-size: .92rem; }
.hm-strip .grow span { font-size: .8rem; color: var(--muted); }
.hm-strip > .icon { width: 16px; height: 16px; color: var(--muted); flex: none; }

/* De temporada */
.hm-season { position: relative; overflow: hidden; padding: 20px 0 18px; border-radius: 28px; background: radial-gradient(130% 90% at 100% 0, color-mix(in srgb, #6E9B5E 24%, transparent), transparent 62%), var(--sage); }
.hm-season-top { display: flex; align-items: flex-start; gap: 12px; padding: 0 18px; }
.hm-season .k { color: var(--ok); }
.hm-season h2 { margin: 4px 0; font-size: clamp(1.9rem, 7vw, 2.5rem); letter-spacing: -.035em; line-height: 1; }
.hm-season p { margin: 0; font-size: .92rem; color: var(--text-soft); }
.hm-season-art { flex: none; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--surface), var(--surface-2)); box-shadow: 0 18px 30px -16px rgba(60, 107, 48, .7); animation: hm-float 5s ease-in-out infinite; }
.hm-season-art span { font-size: 3.1rem; transform: rotate(-10deg); }
@keyframes hm-float { 50% { transform: translateY(-6px) rotate(4deg); } }
.hm-season-chips { display: flex; gap: 6px; overflow-x: auto; padding: 14px 18px 2px; scrollbar-width: none; }
.hm-season-chips::-webkit-scrollbar { display: none; }
.hm-season-chips a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: .84rem; font-weight: 650; box-shadow: var(--shadow-xs); transition: transform .15s var(--ease); }
.hm-season-chips a:active { transform: scale(.95); }
.hm-season-chips a i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sage); font-style: normal; font-size: .95rem; }
.hm-season .hm-season-rx { margin: 0; padding: 16px 18px 4px; scroll-padding: 18px; }
.hm-season-btn { margin: 10px 18px 0; }
.hm-rail-item { width: 168px; flex: none; }

/* Fecha señalada */
.hm-fest { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.hm-cal { flex: none; width: 58px; overflow: hidden; border-radius: 14px; text-align: center; background: var(--surface); box-shadow: 0 8px 16px -10px rgba(46, 29, 20, .5), 0 0 0 1px var(--border); transform: rotate(-3deg); }
.hm-cal small { display: block; padding: 3px 0; background: var(--accent); color: #fff; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hm-cal b { display: block; padding: 5px 0 7px; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.hm-fest .grow { display: grid; gap: 2px; min-width: 0; }
.hm-fest .k { color: var(--accent); }
.hm-fest .grow > b { font-size: 1rem; }
.hm-fest-idea { font-size: .8rem; line-height: 1.35; color: var(--muted); }
.hm-fest > .icon { width: 16px; height: 16px; flex: none; color: var(--muted); }

/* Consejo del día: una nota pegada con cinta */
.hm-note { position: relative; margin: 8px 4px 0; padding: 20px 18px 18px; border-radius: 4px 20px 20px 20px; background: #FFF3BF; color: #3A2A10; box-shadow: 0 16px 26px -18px rgba(138, 95, 11, .6); transform: rotate(-1.2deg); }
.hm-note::before { content: ""; position: absolute; top: -10px; left: 50%; width: 76px; height: 22px; transform: translateX(-50%) rotate(2.5deg); border-radius: 3px; background: rgba(255, 255, 255, .6); box-shadow: 0 1px 3px rgba(46, 29, 20, .12); }
.hm-note .k { color: #8A5F0B; }
.hm-note b { display: block; margin: 4px 44px 6px 0; font-family: var(--font-hand); font-size: 1.75rem; font-weight: 600; line-height: 1.05; color: #3A2A10; }
.hm-note p { margin: 0; font-size: .9rem; line-height: 1.45; color: #5B4538; }
.hm-note-emoji { position: absolute; top: 14px; right: 16px; font-size: 2rem; transform: rotate(10deg); }
:root[data-theme="dark"] .hm-note { background: #3A3016; color: var(--text); }
:root[data-theme="dark"] .hm-note::before { background: rgba(255, 255, 255, .14); }
:root[data-theme="dark"] .hm-note .k, :root[data-theme="dark"] .hm-note b { color: var(--brand); }
:root[data-theme="dark"] .hm-note p { color: var(--text-soft); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hm-note { background: #3A3016; color: var(--text); }
  :root:not([data-theme="light"]) .hm-note::before { background: rgba(255, 255, 255, .14); }
  :root:not([data-theme="light"]) .hm-note .k, :root:not([data-theme="light"]) .hm-note b { color: var(--brand); }
  :root:not([data-theme="light"]) .hm-note p { color: var(--text-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .hm-wd, .hm-bar i, .hm-ring-g svg circle:last-child, .hm-season-art { animation: none; }
}

/* ---------- Recetario: portada, receta del día, antojos y cocinas del mundo ---------- */
.rx-hero { position: relative; isolation: isolate; overflow: hidden; padding: 20px 16px 16px; border-radius: 28px;
  background: radial-gradient(120% 120% at 100% 0, rgba(245, 207, 78, .5), transparent 55%), radial-gradient(90% 110% at 0 100%, rgba(232, 135, 90, .22), transparent 60%), var(--brand-wash); }
.rx-hero-k { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-deep); }
.rx-hero-t { max-width: 15ch; margin: 6px 0 16px; font-size: clamp(1.75rem, 7vw, 2.5rem); letter-spacing: -.035em; line-height: 1.04; }
.rx-hero-t em { font-style: italic; font-weight: 500; color: var(--brand-deep); }
.rx-hero .rx-search input { box-shadow: 0 16px 30px -18px rgba(138, 95, 11, .6); }
.rx-hero-deco { position: absolute; z-index: -1; font-size: 2rem; animation: hm-float 6s ease-in-out infinite; }
.rx-hero-deco.d1 { top: 14px; right: 18px; }
.rx-hero-deco.d2 { top: 64px; right: 66px; font-size: 1.45rem; animation-delay: -2s; }
.rx-hero-deco.d3 { top: 8px; right: 104px; font-size: 1.25rem; opacity: .75; animation-delay: -4s; }
.rx-hero-deco.d4 { top: 76px; right: 12px; font-size: 1.7rem; animation-delay: -1s; }
@media (min-width: 760px) {
  .rx-hero { padding: 30px 30px 24px; }
  .rx-hero-t { max-width: none; }
  .rx-hero .rx-search { max-width: 620px; }
  .rx-hero-deco { font-size: 2.8rem; }
  .rx-hero-deco.d1 { top: 22px; right: 40px; } .rx-hero-deco.d2 { top: 92px; right: 150px; font-size: 2rem; }
  .rx-hero-deco.d3 { top: 18px; right: 230px; font-size: 1.7rem; } .rx-hero-deco.d4 { top: 110px; right: 46px; font-size: 2.4rem; }
}

/* Categorías en burbujas de colores */
.cat-pill { min-width: 70px; gap: 6px; padding: 4px 2px 2px; border: 0; border-radius: 0; background: none; color: var(--text-soft); box-shadow: none; }
.cat-pill span { width: 58px; height: 58px; font-size: 1.6rem; background: var(--cp, var(--surface-2)); transition: transform .25s var(--ease), box-shadow .2s, background .15s; }
.cat-pill:hover { transform: none; }
.cat-pill:hover span { transform: translateY(-2px) rotate(-6deg); }
.cat-pill.on { background: none; color: var(--text); font-weight: 800; box-shadow: none; }
.cat-pill.on span { background: var(--brand); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--dark); }
.cat-pill:nth-child(6n+2) { --cp: color-mix(in srgb, #E8875A 20%, var(--surface)); }
.cat-pill:nth-child(6n+3) { --cp: color-mix(in srgb, #6E9B5E 20%, var(--surface)); }
.cat-pill:nth-child(6n+4) { --cp: color-mix(in srgb, #F5CF4E 30%, var(--surface)); }
.cat-pill:nth-child(6n+5) { --cp: color-mix(in srgb, #4F8FB8 18%, var(--surface)); }
.cat-pill:nth-child(6n) { --cp: color-mix(in srgb, #8B6BB1 18%, var(--surface)); }
.cat-pill:nth-child(6n+1) { --cp: color-mix(in srgb, #DE5530 15%, var(--surface)); }

/* La receta del día */
.rx-day { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 340px; margin-top: 22px; border-radius: 30px; background: #2E1D14; color: #FFF8EE; box-shadow: var(--shadow-md); }
.rx-day-bg { position: absolute !important; inset: 0; height: 100%; z-index: -2; }
.rx-day::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(20, 12, 8, 0) 28%, rgba(20, 12, 8, .55) 58%, rgba(20, 12, 8, .92)); }
.rx-day-link { position: absolute; inset: 0; z-index: 0; }
.rx-day:hover .rx-day-bg img { transform: scale(1.04); }
.rx-day-body { position: relative; z-index: 1; width: 100%; padding: 20px; pointer-events: none; }
.rx-day-body a, .rx-day-body button { pointer-events: auto; }
.rx-day-tag { display: inline-flex; padding: 5px 12px; border-radius: 999px; background: var(--brand); color: #2A1A12; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.rx-day h2 { max-width: 22ch; margin: 10px 0 8px; color: #FFF8EE; font-size: clamp(1.6rem, 6vw, 2.3rem); letter-spacing: -.03em; line-height: 1.08; }
.rx-day-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .88rem; color: rgba(255, 248, 238, .86); }
.rx-day-meta span { display: inline-flex; align-items: center; gap: 5px; }
.rx-day-meta .icon { width: 16px; height: 16px; }
.rx-day-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
@media (min-width: 760px) { .rx-day { min-height: 380px; } .rx-day-body { padding: 28px 30px; } }

/* Antojos */
.rx-moods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .rx-moods { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.rx-mood { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 132px; padding: 14px; border: 0; border-radius: 24px; background: var(--m-bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s; animation: hm-pop .45s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.rx-mood:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.rx-mood:active { transform: scale(.97); }
.rx-mood b { max-width: 80%; font-family: var(--font-display); font-size: 1.14rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.12; }
.rx-mood > span:last-child { max-width: 68%; font-size: .78rem; line-height: 1.3; color: var(--text-soft); }
.rx-mood-e { position: absolute; right: -8px; bottom: -12px; font-size: 3.7rem; transform: rotate(-12deg); filter: drop-shadow(0 10px 12px rgba(46, 29, 20, .22)); transition: transform .35s var(--ease); }
.rx-mood:hover .rx-mood-e { transform: rotate(0) scale(1.08); }
.m-tomato { --m-bg: color-mix(in srgb, #DE5530 16%, var(--surface)); }
.m-sage { --m-bg: color-mix(in srgb, #6E9B5E 20%, var(--surface)); }
.m-sky { --m-bg: color-mix(in srgb, #4F8FB8 17%, var(--surface)); }
.m-butter { --m-bg: color-mix(in srgb, #F5CF4E 32%, var(--surface)); }

/* Cocinas del mundo, cada una con su color */
.cuisine-row .cuisine-tile { width: 158px; }
.cuisine-tile { position: relative; overflow: hidden; border: 0; border-radius: 24px; padding: 14px; box-shadow: var(--shadow-xs);
  background: linear-gradient(165deg, color-mix(in srgb, var(--hue, #F5CF4E) 28%, var(--surface)), color-mix(in srgb, var(--hue, #F5CF4E) 9%, var(--surface))); }
.cuisine-tile .emoji { width: 56px; height: 56px; border-radius: 50%; font-size: 1.8rem; background: var(--surface); box-shadow: 0 12px 20px -14px var(--hue, #8A5F0B); transition: transform .3s var(--ease); }
.cuisine-tile:hover .emoji { transform: rotate(-10deg) scale(1.06); }
.cuisine-tile b { font-size: 1.1rem; }
.cuisine-tile .xs.muted { color: var(--text-soft); line-height: 1.3; }
.cuisine-tile .xs:last-child { margin-top: 10px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 75%, transparent); color: var(--text); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .rx-hero-deco, .rx-mood { animation: none; }
}

/* ---------- Panel · Precios del súper ---------- */
.ap { display: grid; gap: 16px; max-width: 920px; }
.ap-status .a-facts.sm { margin-top: 0; padding-top: 0; border-top: 0; }
.ap-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: ap; }
.ap-steps li { position: relative; display: grid; gap: 4px; justify-items: start; padding: 2px 0 2px 46px; counter-increment: ap; }
.ap-steps li::before { content: counter(ap); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: var(--brand); color: #2A1A12; font-weight: 800; font-size: .9rem; }
.ap-steps li + li { padding-top: 14px; border-top: 1px dashed var(--border); }
.ap-steps li + li::before { top: 14px; }
.ap-steps li > span { font-size: .88rem; line-height: 1.5; color: var(--text-soft); }
.ap-steps .btn { margin-top: 6px; }
.ap-file { position: relative; overflow: hidden; cursor: pointer; }
.ap-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.ap-file:focus-within { outline: 3px solid var(--ring); outline-offset: 2px; }
.ap-preview { border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); box-shadow: 0 0 0 3px var(--brand-wash); }
.ap-preview .a-counts { margin-bottom: 14px; }
.ap-preview .a-counts .bad b { color: var(--danger); }
.ap-warn { margin-bottom: 14px; }
.ap-warn > div { display: grid; gap: 4px; }
.ap-warn p { margin: 0; }
.ap-list { margin: 0 -20px 14px; border-top: 1px solid var(--border); max-height: 460px; overflow: auto; }
.ap-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--border); }
.ap-name { min-width: 0; }
.ap-name b { display: block; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-name small { display: block; font-size: .76rem; color: var(--muted); }
.ap-price { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-price s { color: var(--muted); font-size: .84rem; }
.ap-price b { font-size: .95rem; }
.ap-pct { justify-self: end; font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.ap-pct.up { color: var(--danger); }
.ap-pct.down { color: var(--ok); }
.ap-more { margin: 10px 20px; }
.ap-errors { margin-bottom: 14px; padding: 10px 14px; border-radius: 14px; background: var(--danger-soft); font-size: .86rem; }
.ap-errors summary { cursor: pointer; font-weight: 700; color: var(--danger); }
.ap-errors ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 3px; }
@media (max-width: 560px) { .ap-row { grid-template-columns: minmax(0, 1fr) auto; } .ap-pct { grid-column: 2; grid-row: 1; align-self: start; } .ap-price { grid-column: 1 / -1; } .ap-list { margin: 0 -16px 14px; } .ap-row { padding: 10px 16px; } }

/* ---------- Filas desplazables: borde difuminado y flechas suaves cuando hay más ---------- */
.hs { position: relative; min-width: 0; }
.hs > :first-child { --hs-f: 44px; transition: -webkit-mask-position .2s; }
.hs.hs-r > :first-child { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--hs-f)); mask-image: linear-gradient(to left, transparent 0, #000 var(--hs-f)); }
.hs.hs-l > :first-child { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--hs-f)); mask-image: linear-gradient(to right, transparent 0, #000 var(--hs-f)); }
.hs.hs-l.hs-r > :first-child { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--hs-f), #000 calc(100% - var(--hs-f)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--hs-f), #000 calc(100% - var(--hs-f)), transparent 100%); }
.hs.hs-sm > :first-child { --hs-f: 34px; }

.hs-btn { position: absolute; z-index: 8; top: var(--hs-y, 50%); width: 38px; height: 38px; margin-top: -19px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--surface) 72%, transparent); color: var(--text); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: 0 8px 18px -8px rgba(46, 29, 20, .45), 0 0 0 1px color-mix(in srgb, var(--border-strong) 55%, transparent);
  opacity: 0; visibility: hidden; transform: scale(.7); transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s, background .15s; -webkit-tap-highlight-color: transparent; }
.hs-btn.l { left: calc(var(--hs-x0, 0px) + 8px); }
.hs-btn.r { right: calc(var(--hs-x1, 0px) + 8px); }
.hs-btn .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.hs.hs-l > .hs-btn.l, .hs.hs-r > .hs-btn.r { opacity: .92; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease), visibility 0s, background .15s; }
.hs-btn:hover { opacity: 1 !important; background: var(--surface); }
.hs-btn:active { transform: scale(.88) !important; }
.hs.hs-sm .hs-btn { width: 30px; height: 30px; margin-top: -15px; }
.hs.hs-sm .hs-btn .icon { width: 15px; height: 15px; }
.hs.hs-hint > .hs-btn.r { animation: hs-nudge .9s var(--ease) 2; }
@keyframes hs-nudge { 0%, 100% { translate: 0 0; } 45% { translate: 5px 0; } 70% { translate: -2px 0; } }
/* Con ratón, las flechas se notan más al pasar por encima de la fila */
@media (hover: hover) {
  .hs.hs-l > .hs-btn.l, .hs.hs-r > .hs-btn.r { opacity: .78; }
  .hs:hover > .hs-btn.l, .hs:hover > .hs-btn.r { opacity: .96; }
}
@media (prefers-reduced-motion: reduce) { .hs.hs-hint > .hs-btn.r { animation: none; } }
@media print { .hs-btn { display: none !important; } .hs > :first-child { -webkit-mask-image: none !important; mask-image: none !important; } }

/* ---------- Epulora Gratis / Premium ----------
   Corona en lo que es Premium, ventana «Hazte Premium», pantalla de las secciones Premium,
   página de suscripción con comparativa y el mensaje «Premium hace Epulora gratis para todos». */
:root { --gold-1: #FFF1BF; --gold-2: #F5CF4E; --gold-3: #E3A92B; --gold-ink: #3A2508; --esp-1: #4A2E1F; --esp-2: #2E1D14; --esp-3: #1F130D; }
.pro-tag { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 8px 2px 6px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3)); color: var(--gold-ink); font: 700 .66rem/1.5 var(--font); letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 2px 6px -2px rgba(227, 169, 43, .6); white-space: nowrap; }
.pro-tag .icon { width: 12px; height: 12px; stroke-width: 2.4; }
.pro-tag.sm { padding: 0; width: 20px; height: 20px; justify-content: center; }
.btn .pro-tag { margin-left: 2px; }
.list-item .pro-tag { margin-left: auto; }

.pm-back { z-index: 140; background: rgba(20, 11, 7, .58); }
.pm-back.out { animation: fade .22s reverse forwards; }
.pm-sheet { position: relative; width: 100%; max-width: 460px; max-height: min(94vh, 94dvh); display: flex; flex-direction: column; overflow: hidden; border-radius: 30px 30px 0 0; background: var(--surface); box-shadow: var(--shadow-lg); animation: pm-up .5s var(--ease); }
@media (min-width: 700px) { .pm-sheet { border-radius: 30px; } }
@keyframes pm-up { from { transform: translateY(60px); opacity: 0; } }
.pm-back.out .pm-sheet { animation: pm-up .22s reverse forwards; }
.pm-x { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #FBF7F1; cursor: pointer; }
.pm-x:hover { background: rgba(255, 255, 255, .22); }
.pm-hero { position: relative; isolation: isolate; overflow: hidden; flex: none; padding: 34px 26px 26px; text-align: center; color: #FBF7F1; background: radial-gradient(130% 100% at 50% 0%, var(--esp-1) 0%, var(--esp-2) 58%, var(--esp-3) 100%); }
.pm-hero h2 { margin: 8px auto 8px; max-width: 18ch; color: #FFF8E6; font-size: clamp(1.55rem, 6vw, 1.9rem); line-height: 1.12; letter-spacing: -.03em; }
.pm-hero p { margin: 0 auto; max-width: 38ch; color: rgba(251, 247, 241, .78); font-size: .93rem; line-height: 1.5; }
.pm-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-2); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.pm-kicker .icon { width: 14px; height: 14px; }
.pm-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(34px); opacity: .55; pointer-events: none; }
.pm-orb.o1 { width: 220px; height: 220px; top: -90px; left: -60px; background: #F5CF4E; animation: pm-drift 9s ease-in-out infinite; }
.pm-orb.o2 { width: 200px; height: 200px; bottom: -110px; right: -50px; background: #DE5530; opacity: .4; animation: pm-drift 11s ease-in-out infinite reverse; }
.tone-sage .pm-orb.o2 { background: #6FA35F; }
.tone-sky .pm-orb.o2 { background: #5B8FD6; }
.tone-lilac .pm-orb.o2 { background: #9B7BD9; }
.tone-peach .pm-orb.o2 { background: #F08A5D; }
@keyframes pm-drift { 50% { transform: translate(26px, 18px) scale(1.12); } }
.pm-spark { position: absolute; z-index: -1; color: var(--gold-2); font-size: 18px; line-height: 1; animation: pm-twinkle 2.8s ease-in-out infinite; pointer-events: none; }
.pm-spark.k1 { top: 26px; left: 16%; }
.pm-spark.k2 { top: 64px; right: 14%; font-size: 13px; animation-delay: .9s; }
.pm-spark.k3 { bottom: 34px; left: 10%; font-size: 15px; animation-delay: 1.6s; }
@keyframes pm-twinkle { 0%, 100% { opacity: .2; transform: scale(.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(25deg); } }
.pm-medal { position: relative; display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 14px; border-radius: 50%; background: radial-gradient(circle at 32% 26%, var(--gold-1), var(--gold-2) 46%, var(--gold-3) 100%); box-shadow: 0 0 0 8px rgba(245, 207, 78, .13), 0 0 0 18px rgba(245, 207, 78, .06), 0 20px 44px -12px rgba(245, 207, 78, .65); animation: pm-medal-in .8s var(--ease) both; }
.pm-medal::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 46%, transparent 60%); background-size: 260% 100%; animation: pm-shine 3.6s ease-in-out 1s infinite; pointer-events: none; }
.pm-medal.big { width: 124px; height: 124px; }
.pm-emoji { font-size: 40px; line-height: 1; filter: drop-shadow(0 3px 4px rgba(58, 37, 8, .25)); }
.pm-medal.big .pm-emoji { font-size: 58px; }
.pm-crown { position: absolute; top: -12px; right: -8px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--esp-2); color: var(--gold-2); border: 2px solid var(--gold-2); transform: rotate(14deg); animation: pm-bob 2.6s ease-in-out infinite; }
.pm-crown .icon { width: 18px; height: 18px; stroke-width: 2.2; }
.pm-medal.big .pm-crown { width: 42px; height: 42px; }
@keyframes pm-medal-in { from { transform: scale(.4) rotate(-20deg); opacity: 0; } 70% { transform: scale(1.06); } }
@keyframes pm-shine { 0%, 60% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
@keyframes pm-bob { 50% { transform: rotate(4deg) translateY(-4px); } }
.pm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px 6px; }
@media (max-height: 820px) { .pm-hero { padding: 26px 22px 20px; } .pm-hero .pm-medal { width: 70px; height: 70px; margin-bottom: 10px; } .pm-hero .pm-emoji { font-size: 32px; } .pm-hero p { font-size: .88rem; } .pm-body { min-height: 150px; } }
.pm-label { margin: 0 0 8px; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pm-perks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.pm-perks li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 16px; background: var(--surface-2); font-size: .9rem; animation: ob2-up .5s var(--ease) both; animation-delay: calc(var(--i) * 45ms + .15s); }
.pm-perks li > span:nth-child(2) { flex: 1; min-width: 0; }
.pm-perks li > .icon { color: var(--ok); flex: none; }
.pm-perks .pm-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 12px; background: var(--surface); font-size: 18px; box-shadow: var(--shadow-xs); }
.pm-perks li.on { background: linear-gradient(110deg, var(--brand-wash), var(--surface-2)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold-2) 70%, transparent); }
.pm-perks li.on em { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--gold-2); color: var(--gold-ink); font-size: .66rem; font-style: normal; font-weight: 700; }
.pm-foot { flex: none; display: grid; gap: 6px; padding: 12px 20px calc(16px + var(--safe-b)); border-top: 1px solid var(--border); background: var(--surface); }
.pm-fine { margin: 2px 0 0; text-align: center; }
.btn.pm-cta { position: relative; isolation: isolate; overflow: hidden; border: 0; background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 40%, var(--gold-3) 100%); color: var(--gold-ink); font-weight: 700; box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 12px 26px -10px rgba(227, 169, 43, .85); }
.btn.pm-cta:hover { filter: brightness(1.04); text-decoration: none; }
.btn.pm-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%); background-size: 250% 100%; animation: pm-shine 3.2s ease-in-out infinite; pointer-events: none; }
.btn.pm-cta .icon { width: 18px; height: 18px; }
.pm-price { font-weight: 500; opacity: .8; }

/* Mensaje: Premium hace Epulora gratis para todos */
.pm-love { position: relative; display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 16px 18px; border-radius: 20px; background: linear-gradient(120deg, var(--peach), var(--brand-wash)); border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); text-align: left; }
.pm-love p { margin: 0; color: var(--text-soft); font-size: .88rem; line-height: 1.5; }
.pm-love p b { color: var(--text); }
.pm-love.compact { padding: 12px 14px; gap: 12px; }
.pm-love.compact p { font-size: .82rem; }
.pm-heart { position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--surface); font-size: 22px; box-shadow: var(--shadow-xs); animation: pm-beat 2.4s ease-in-out infinite; }
.pm-heart i { position: absolute; bottom: 60%; left: 50%; width: 8px; height: 8px; background: var(--accent); opacity: 0; transform: rotate(45deg); border-radius: 2px 0 2px 2px; animation: pm-float-heart 3.6s ease-out infinite; }
.pm-heart i::before, .pm-heart i::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: inherit; }
.pm-heart i::before { left: -4px; top: 0; }
.pm-heart i::after { left: 0; top: -4px; }
.pm-heart i:nth-child(2) { animation-delay: 1.2s; margin-left: -10px; background: var(--gold-3); }
.pm-heart i:nth-child(3) { animation-delay: 2.4s; margin-left: 8px; }
@keyframes pm-beat { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 28% { transform: scale(1.04); } }
@keyframes pm-float-heart { 0% { opacity: 0; transform: translate(0, 0) rotate(45deg) scale(.4); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(0, -38px) rotate(45deg) scale(.9); } }

/* Pantalla de una sección Premium */
.pm-gate { max-width: 560px; margin: 0 auto; padding: 8px 4px 28px; text-align: center; animation: view-in .35s var(--ease); }
.pm-gate-art { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; height: 230px; margin-bottom: 18px; border-radius: 30px; background: radial-gradient(120% 110% at 50% 0%, var(--esp-1), var(--esp-2) 60%, var(--esp-3)); box-shadow: var(--shadow-md); }
.pm-gate-art .pm-medal { margin: 0; }
.pm-gate .pm-kicker { color: var(--brand-deep); }
.pm-gate h2 { margin: 6px auto 8px; max-width: 20ch; font-size: clamp(1.7rem, 6vw, 2.3rem); letter-spacing: -.035em; line-height: 1.1; }
.pm-gate-text { margin: 0 auto 20px; max-width: 46ch; color: var(--text-soft); }
.pm-gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 22px; }
@media (max-width: 520px) { .pm-gate-actions .btn { width: 100%; } }

/* Página de suscripción */
.bl { max-width: 760px; margin: 0 auto; }
.bl-hero { position: relative; isolation: isolate; overflow: hidden; padding: 30px 26px 26px; border-radius: 30px; color: #FBF7F1; background: radial-gradient(130% 120% at 0% 0%, var(--esp-1), var(--esp-2) 55%, var(--esp-3)); box-shadow: var(--shadow-md); }
.bl-hero h2 { margin: 8px 0 8px; max-width: 18ch; color: #FFF8E6; font-size: clamp(1.8rem, 6.5vw, 2.6rem); line-height: 1.06; letter-spacing: -.04em; }
.bl-hero h2 em { font-style: normal; color: var(--gold-2); }
.bl-hero p { margin: 0; max-width: 46ch; color: rgba(251, 247, 241, .8); }
.bl-hero .pm-orb.o1 { left: auto; right: -70px; top: -100px; }
.bl-hero .pm-medal { position: absolute; top: 22px; right: 22px; width: 64px; height: 64px; margin: 0; }
.bl-hero .pm-medal .pm-emoji { font-size: 28px; }
.bl-hero .pm-medal .pm-crown { width: 28px; height: 28px; }
.bl-hero .pm-medal .pm-crown .icon { width: 15px; height: 15px; }
.bl-hero .pm-kicker, .bl-hero h2, .bl-hero > p { padding-right: 76px; }
@media (min-width: 560px) {
  .bl-hero .pm-kicker, .bl-hero h2, .bl-hero > p { padding-right: 100px; }
  .bl-hero .pm-medal { width: 84px; height: 84px; }
  .bl-hero .pm-medal .pm-emoji { font-size: 36px; }
}
.bl-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bl-hero .btn.ghost { color: #FBF7F1; border-color: rgba(251, 247, 241, .3); background: rgba(255, 255, 255, .06); }
.bl-hero .trial-bar { background: rgba(255, 255, 255, .14); max-width: 380px; }
.bl-hero .trial-bar > i { background: linear-gradient(90deg, var(--gold-2), var(--gold-3)); }
.bl-hero .chip { background: rgba(255, 255, 255, .1); color: #FBF7F1; border-color: transparent; }
.bl-hero.warn { background: radial-gradient(130% 120% at 0% 0%, #6A2A1C, #3B1A12 60%, #24110C); }
.bl-hero .bl-meta { margin-top: 12px; font-size: .9rem; color: rgba(251, 247, 241, .86); }
.bl-section { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 30px 0 14px; }
.bl-section h2 { margin: 4px 0 0; font-size: clamp(1.4rem, 5vw, 1.8rem); letter-spacing: -.03em; }

.bl-vs { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 88px 96px; border-radius: 26px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; }
@media (min-width: 600px) { .bl-vs { grid-template-columns: minmax(0, 1fr) 150px 150px; } }
.bl-vs > div { display: flex; align-items: center; min-width: 0; padding: 11px 12px; border-top: 1px solid var(--border); font-size: .88rem; }
.bl-vs > .vs-h { border-top: 0; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; padding: 16px 8px 12px; text-align: center; }
.bl-vs > .vs-h.first { align-items: flex-start; text-align: left; padding-left: 16px; }
.bl-vs .vs-h b { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -.02em; }
.bl-vs .vs-h small { color: var(--muted); font-size: .74rem; }
.bl-vs .vs-name { gap: 10px; padding-left: 16px; }
.bl-vs .vs-name .vs-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--surface-2); color: var(--text-soft); }
.bl-vs .vs-name .vs-ic .icon { width: 16px; height: 16px; }
.bl-vs .vs-name > span:last-child { min-width: 0; }
.bl-vs .vs-name small { display: block; color: var(--muted); font-size: .74rem; line-height: 1.35; }
.bl-vs .vs-free, .bl-vs .vs-pro { justify-content: center; text-align: center; font-size: .76rem; color: var(--muted); line-height: 1.3; }
.bl-vs .vs-yes { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.bl-vs .vs-yes .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.bl-vs .vs-no { color: var(--border-strong); }
.bl-vs .vs-no .icon { width: 18px; height: 18px; }
.bl-vs .vs-pro { background: color-mix(in srgb, var(--gold-2) 9%, var(--surface)); }
.bl-vs .vs-pro .vs-yes { background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); color: var(--gold-ink); }
.bl-vs > .vs-h.pro { background: linear-gradient(180deg, var(--esp-2), var(--esp-1)); color: #FFF8E6; }
.bl-vs > .vs-h.pro small { color: var(--gold-2); }
.bl-vs > .vs-h.pro .pro-tag { margin-bottom: 4px; }
.bl-vs .vs-sep { grid-column: 1 / -1; padding: 9px 16px 7px; background: var(--surface-2); color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.bl-vs .vs-sep.pro-sep { gap: 6px; background: linear-gradient(90deg, var(--brand-wash), var(--surface-2)); color: var(--brand-deep); }
.bl-vs .vs-sep .icon { width: 14px; height: 14px; }

.bl-plans { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 420px) { .bl-plans { grid-template-columns: 1fr; } }
.bl-plans .plan-card.on { border-color: var(--gold-3); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-2) 30%, transparent), var(--shadow-md); }
.bl-plans .plan-card.on .radio { border-color: var(--gold-3); }
.bl-plans .plan-card.on .radio::after { background: var(--gold-3); }
.bl-plans .plan-card .save { background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); color: var(--gold-ink); }
.bl .pay-box { margin-top: 14px; }
.bl .pm-love { margin-top: 18px; }
.bl-free-note { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--sage); color: var(--text-soft); font-size: .86rem; }
.bl-free-note .icon { color: var(--ok); flex: none; }

/* Banner Premium en inicio (plan gratis) */
.pm-banner { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; color: #FBF7F1; background: radial-gradient(130% 140% at 0% 0%, var(--esp-1), var(--esp-2) 60%, var(--esp-3)); box-shadow: var(--shadow-md); font-weight: 400; transition: transform .2s var(--ease); }
.pm-banner:hover { text-decoration: none; transform: translateY(-1px); }
.pm-banner .pm-orb.o1 { width: 140px; height: 140px; top: -70px; left: auto; right: -30px; }
.pm-banner .pm-medal { width: 48px; height: 48px; margin: 0; flex: none; box-shadow: 0 0 0 5px rgba(245, 207, 78, .14); }
.pm-banner .pm-medal .pm-emoji { font-size: 22px; }
.pm-banner .pm-medal .pm-crown { width: 22px; height: 22px; top: -8px; right: -6px; border-width: 1.5px; }
.pm-banner .pm-medal .pm-crown .icon { width: 12px; height: 12px; }
.pm-banner b { display: block; color: #FFF8E6; font-size: .98rem; }
.pm-banner .grow > span { display: block; color: rgba(251, 247, 241, .76); font-size: .82rem; }
.pm-banner > .icon { color: var(--gold-2); flex: none; }

/* Aviso dentro del menú para semanas fuera del plan gratis */
.pm-week-lock { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 14px 16px; border-radius: 20px; background: linear-gradient(110deg, var(--brand-wash), var(--surface) 75%); border: 1px solid color-mix(in srgb, var(--gold-2) 50%, transparent); }
.pm-week-lock b { display: block; }
.pm-week-lock .grow > span { display: block; color: var(--muted); font-size: .84rem; }
.pm-week-lock .pm-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); color: var(--gold-ink); }
@media (max-width: 520px) { .pm-week-lock { flex-wrap: wrap; } .pm-week-lock .btn { width: 100%; } }

/* Plan en el menú de la cuenta */
.um-plan.pro { background: linear-gradient(110deg, var(--esp-2), var(--esp-1)); color: #FFF8E6; border-color: transparent; }
.um-plan.pro .icon { color: var(--gold-2); }
.um-plan.free { background: linear-gradient(110deg, var(--brand-wash), var(--surface-2)); }

.um-tile { position: relative; }
.fill-left { font-weight: 500; opacity: .78; }
.fill-left .pro-tag { margin-left: 2px; }
.qs-item b .pro-tag { margin-left: 2px; }
.view-switch a .pro-tag { margin-left: 2px; }
.um-crown { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); color: var(--gold-ink); }
.um-crown .icon { width: 12px; height: 12px; stroke-width: 2.4; }
.um-plan .grow { min-width: 0; }
.um-plan-love { display: block; margin-top: 1px; font-size: .72rem; font-weight: 500; color: rgba(255, 248, 230, .78); }
.um-plan.free { color: var(--text); border: 1px solid color-mix(in srgb, var(--gold-2) 45%, transparent); }
.um-plan.free .um-plan-go { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); color: var(--gold-ink); text-decoration: none; }
.um-plan.free .um-plan-go .icon { width: 13px; height: 13px; color: var(--gold-ink); }
.um-plan.pro .um-plan-go { color: var(--gold-2); }
/* Panel → Ajustes → Gratis y Premium */
.a-free-grid { display: grid; gap: 8px; margin: 12px 0 14px; }
@container acard (min-width: 640px) { .a-free-grid { grid-template-columns: 1fr 1fr; } }
.a-free-opt { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.a-free-opt input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--gold-3); }
.a-free-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--surface); color: var(--text-soft); }
.a-free-ic .icon { width: 17px; height: 17px; }
.a-free-opt .grow { min-width: 0; }
.a-free-opt b { display: block; font-size: .9rem; }
.a-free-opt small { display: block; margin-top: 1px; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.a-free-tag { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); color: var(--gold-ink); font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.a-free-tag .icon { width: 12px; height: 12px; stroke-width: 2.4; }
.a-free-opt:has(input:checked) { border-color: color-mix(in srgb, var(--gold-2) 60%, transparent); background: linear-gradient(110deg, var(--brand-wash), var(--surface-2)); }
.a-free-opt:not(:has(input:checked)) .a-free-tag { visibility: hidden; }
.a-free-limits { display: grid; gap: 12px; }
@container acard (min-width: 600px) { .a-free-limits { grid-template-columns: 1fr 1fr; } }
.a-free-limits .field small { display: block; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .pm-orb, .pm-spark, .pm-medal, .pm-medal::after, .pm-crown, .btn.pm-cta::after, .pm-heart, .pm-heart i, .pm-perks li, .pm-sheet { animation: none !important; }
}
@media print { .pro-tag, .pm-banner, .pm-week-lock { display: none !important; } }

/* ---------- Perfil: panel con resumen y un apartado por página ---------- */
:root { --sky: #2F6DA6; --teal: #1E7A6E; --plum: #7F4A9C; --rose: #B0446B; --orange: #B85A14; }
:root[data-theme="dark"] { --sky: #8DBBE6; --teal: #79CFC2; --plum: #CDA6DD; --rose: #EE9AB7; --orange: #F2A766; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sky: #8DBBE6; --teal: #79CFC2; --plum: #CDA6DD; --rose: #EE9AB7; --orange: #F2A766; } }
.tn-butter { --t: var(--brand-deep); }
.tn-tomato { --t: var(--accent); }
.tn-sage { --t: var(--ok); }
.tn-sky { --t: var(--sky); }
.tn-peach { --t: var(--orange); }
.tn-teal { --t: var(--teal); }
.tn-plum { --t: var(--plum); }
.tn-rose { --t: var(--rose); }
.tile-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; flex: none; color: var(--t, var(--brand-deep)); background: color-mix(in srgb, var(--t, var(--brand)) 14%, var(--surface)); }
.tile-ic .icon { width: 20px; height: 20px; }
.tile-ic.lg { width: 56px; height: 56px; border-radius: 18px; }
.tile-ic.lg .icon { width: 26px; height: 26px; }

.ph { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.ph-side, .ph-main { display: grid; gap: 12px; align-content: start; min-width: 0; }
@media (min-width: 1100px) { .ph { grid-template-columns: 340px minmax(0, 1fr); gap: 26px; align-items: start; } }

/* Ficha */
.ph-hero { position: relative; overflow: hidden; isolation: isolate; padding: 20px; border-radius: 28px; color: #FBF7F1; box-shadow: var(--shadow-md);
  background: radial-gradient(120% 110% at 100% 0%, rgba(245, 207, 78, .30), transparent 52%), radial-gradient(90% 110% at 0% 115%, rgba(222, 85, 48, .30), transparent 58%), #2E1D14; }
.ph-hero::after { content: ""; position: absolute; z-index: -1; right: -74px; top: -96px; width: 230px; height: 230px; border-radius: 50%; border: 16px solid rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 26px rgba(255, 255, 255, .025); pointer-events: none; }
:root[data-theme="dark"] .ph-hero { border: 1px solid #3A2D23; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ph-hero { border: 1px solid #3A2D23; } }
.ph-id { display: flex; align-items: center; gap: 14px; }
.ph-avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; flex: none; background: linear-gradient(145deg, #FAE08A, #F5CF4E 48%, #E3B033); color: #2A1A12; font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; box-shadow: 0 0 0 4px rgba(245, 207, 78, .16), 0 10px 22px -8px rgba(0, 0, 0, .55); }
.ph-id h2 { margin: 0; color: #FBF7F1; font-size: 1.45rem; line-height: 1.15; overflow-wrap: anywhere; }
.ph-id p { margin: 3px 0 0; color: rgba(251, 247, 241, .66); font-size: .86rem; overflow-wrap: anywhere; }
.ph-id .icon-btn { align-self: flex-start; color: #FBF7F1; background: rgba(255, 255, 255, .08); }
.ph-id .icon-btn:hover { background: rgba(255, 255, 255, .16); }
.ph-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.ph-tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 5px 12px 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .09); color: #FBF7F1; font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.ph-tag:hover { background: rgba(255, 255, 255, .16); text-decoration: none; }
.ph-tag .icon { width: 15px; height: 15px; flex: none; color: #F5CF4E; }
.ph-tag.gold { background: #F5CF4E; color: #2A1A12; }
.ph-tag.gold .icon { color: #2A1A12; }
.ph-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "next go" "meter meter"; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08); color: #FBF7F1; transition: background .2s; }
a.ph-progress:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.ph-progress > .icon { grid-area: go; width: 18px; height: 18px; color: #F5CF4E; transition: transform .2s var(--ease); }
a.ph-progress:hover > .icon { transform: translateX(3px); }
.ph-meter { grid-area: meter; display: block; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.ph-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #F5CF4E, #F08A5D); }
.ph-next { grid-area: next; min-width: 0; }
.ph-next b { display: block; font-size: .92rem; }
.ph-next span { display: block; font-size: .8rem; color: rgba(251, 247, 241, .72); }
.ph-progress.done { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ok next"; }
.ph-ok { grid-area: ok; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #8DC47C; color: #17110D; }
.ph-ok .icon { width: 18px; height: 18px; }

/* Vuestra casa (en el panel) */
.ph-house { padding: 6px 6px 14px; }
.phh-top { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; color: inherit; }
.phh-top:hover { background: var(--surface-2); text-decoration: none; }
.phh-top b { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.phh-k { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.phh-top > .icon:last-child { width: 18px; height: 18px; color: var(--border-strong); }
.phh-people { display: flex; align-items: center; gap: 12px; padding: 4px 12px 14px; font-weight: 600; font-size: .93rem; }
.phh-people .grow > span { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); }
.av-stack { display: flex; padding-left: 8px; flex: none; }
.av-stack .avatar { width: 34px; height: 34px; margin-left: -8px; font-size: .76rem; }
.av-stack .avatar.more { background: var(--surface-3); color: var(--text); }
.phh-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px; }
.phh-actions .btn { flex: 1 1 auto; }

/* Tarjetas de ajustes */
.ph-title h2 { font-size: 1.6rem; margin: 4px 0 2px; }
.ph-title p { margin: 0; color: var(--muted); font-size: .9rem; max-width: 56ch; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ph-tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 3px; min-height: 152px; padding: 14px 14px 13px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); color: var(--text); font-weight: 400; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.ph-tile::before { content: ""; position: absolute; z-index: -1; right: -38px; top: -38px; width: 116px; height: 116px; border-radius: 50%; background: color-mix(in srgb, var(--t) 9%, transparent); transition: transform .4s var(--ease); }
.ph-tile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--t) 35%, var(--border)); }
.ph-tile:hover::before { transform: scale(1.3); }
.ph-tile:active { transform: scale(.98); }
.ph-tile .tile-ic { margin-bottom: auto; }
.ph-tile b { margin-top: 14px; font-size: .95rem; line-height: 1.2; }
.pt-sum { font-size: .8rem; line-height: 1.3; color: var(--text-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pt-sum.soft { color: var(--muted); -webkit-line-clamp: 1; }
.pt-go { position: absolute; top: 14px; right: 12px; color: var(--border-strong); transition: transform .2s var(--ease), color .2s; }
.pt-go .icon { width: 18px; height: 18px; }
.ph-tile:hover .pt-go { color: var(--t); transform: translateX(2px); }
.pt-dot { position: absolute; top: 10px; left: 46px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.ph-account { margin-top: 6px; }

/* Un apartado */
.ps { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.ps-nav { display: none; }
@media (min-width: 1000px) {
  .ps { grid-template-columns: 240px minmax(0, 720px); gap: 30px; align-items: start; }
  .ps-nav { display: grid; gap: 2px; position: sticky; top: 84px; }
}
.ps-link { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 14px; color: var(--text-soft); font-size: .88rem; font-weight: 600; line-height: 1.2; }
.ps-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.ps-link .tile-ic { width: 32px; height: 32px; border-radius: 10px; }
.ps-link .tile-ic .icon { width: 16px; height: 16px; }
.ps-link.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.ps-link:first-child { gap: 6px; margin-bottom: 8px; padding-left: 8px; color: var(--muted); font-size: .84rem; }
.ps-link:first-child .icon { width: 16px; height: 16px; }
.ps-main { display: grid; gap: 14px; min-width: 0; }
.ps-intro { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-start; gap: 14px; padding: 20px; border-radius: 26px; background: color-mix(in srgb, var(--t) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--t) 18%, var(--border)); }
.ps-intro::after { content: ""; position: absolute; z-index: -1; right: -60px; top: -70px; width: 190px; height: 190px; border-radius: 50%; background: color-mix(in srgb, var(--t) 10%, transparent); }
.ps-intro .tile-ic.lg { background: var(--t); color: var(--surface); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--t) 80%, transparent); }
.ps-intro h2 { margin: 0; font-size: 1.5rem; line-height: 1.15; }
.ps-intro p { margin: 4px 0 0; color: var(--text-soft); font-size: .9rem; line-height: 1.45; max-width: 52ch; }
.ps-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 4px 11px 4px 8px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-xs); color: var(--muted); font-size: .76rem; font-weight: 600; transition: color .2s; }
.ps-status .icon { width: 14px; height: 14px; }
.ps-status[data-status="dirty"], .ps-status[data-status="saving"] { color: var(--brand-deep); }
.ps-status[data-status="saving"] .icon { animation: spin 1s linear infinite; }
.ps-status[data-status="saved"] { color: var(--ok); }
.ps-status[data-status="saved"] .icon { animation: chip-pop .4s var(--ease); }
.ps-status[data-status="error"] { color: var(--danger); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ps-body .pref-card > .row-list:last-child, .ps-body .pref-card > .row-btn:last-child { margin-bottom: -18px; }
.ps-foot { display: grid; gap: 10px; margin-top: 4px; }
.ps-next { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 18px; border-radius: 20px; border: 1.5px dashed color-mix(in srgb, var(--t) 40%, var(--border)); color: var(--text); font-weight: 400; transition: background .2s; }
.ps-next:hover { background: color-mix(in srgb, var(--t) 7%, var(--surface)); text-decoration: none; }
.ps-next .grow > span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ps-next b { font-size: 1rem; }

/* Detalles de los apartados */
.big-chips .chip { padding: 10px 18px; font-size: .95rem; }
.chip.pop, output.pop { animation: chip-pop .35s var(--ease); }
@keyframes chip-pop { 40% { transform: scale(1.1); } }
.goal > span:first-child { display: flex; align-items: center; gap: 6px; }
.goal > span:first-child::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--g, var(--brand)); }
.goal.g-kcal { --g: var(--accent); }
.goal.g-prot { --g: var(--sky); }
.goal.g-carb { --g: var(--brand); }
.goal.g-fat { --g: var(--orange); }
.theme-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tp-opt { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 8px 11px; border-radius: 18px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; text-align: center; transition: border-color .15s, box-shadow .15s; }
.tp-opt:hover { border-color: var(--border-strong); }
.tp-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tp-opt:has(input:checked) { border-color: var(--dark); box-shadow: inset 0 0 0 1px var(--dark); }
.tp-opt:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: 2px; }
.tp-art { position: relative; display: block; width: 100%; height: 62px; margin-bottom: 6px; border-radius: 12px; overflow: hidden; background: #FBF7F1; border: 1px solid rgba(46, 29, 20, .1); }
.tp-art i { position: absolute; display: block; border-radius: 5px; }
.tp-art i:nth-child(1) { left: 8px; top: 8px; width: 42%; height: 7px; background: #2E1D14; }
.tp-art i:nth-child(2) { left: 8px; right: 8px; top: 21px; height: 17px; background: #fff; box-shadow: 0 1px 3px rgba(46, 29, 20, .15); }
.tp-art i:nth-child(3) { left: 8px; bottom: 8px; width: 34%; height: 9px; border-radius: 99px; background: #F5CF4E; }
.tp-dark .tp-art { background: #17110D; border-color: rgba(255, 255, 255, .08); }
.tp-dark .tp-art i:nth-child(1) { background: #F6EDE1; }
.tp-dark .tp-art i:nth-child(2) { background: #2A2018; box-shadow: none; }
.tp-auto .tp-art { background: linear-gradient(115deg, #FBF7F1 50%, #17110D 50%); }
.tp-auto .tp-art i:nth-child(2) { background: linear-gradient(115deg, #fff 50%, #2A2018 50%); }
.tp-l { display: inline-flex; align-items: center; gap: 5px; font-size: .88rem; font-weight: 700; }
.tp-l .icon { width: 15px; height: 15px; }
.tp-d { font-size: .74rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .ph-tile, .ph-tile::before, .chip.pop, output.pop, .ps-status .icon { transition: none; animation: none; }
}
.day-chips { display: grid; grid-template-columns: repeat(7, minmax(0, 46px)); gap: 6px; }
.day-chips .chip { justify-content: center; aspect-ratio: 1; padding: 0; border-radius: 50%; font-weight: 700; }
@media (min-width: 1100px) {
  .ph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; column-gap: 14px; row-gap: 2px; min-height: 0; padding: 16px 40px 16px 16px; }
  .ph-tile .tile-ic { grid-row: 1 / span 3; align-self: center; margin: 0; }
  .ph-tile b { margin-top: 0; }
  .pt-go { top: 50%; transform: translateY(-50%); }
  .ph-tile:hover .pt-go { transform: translate(2px, -50%); }
  .pt-dot { top: 12px; left: 50px; }
}

/* Botones a todo el ancho: si el texto no cabe, salta de línea en vez de desbordar la pantalla */
.btn.block { white-space: normal; text-align: center; }
@media (max-width: 420px) {
  .bl-vs { grid-template-columns: minmax(0, 1fr) 68px 80px; }
  .bl-vs > div { padding: 10px 8px; }
  .bl-vs .vs-name, .bl-vs > .vs-h.first { padding-left: 14px; }
  .bl-vs .vs-name .vs-ic { display: none; }
  .bl-vs .vs-h small { font-size: .68rem; }
}

/* ---------- Precios de ingredientes ---------- */
.pr-wrap { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; }
.pr-hero { --t: var(--teal); position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-start; gap: 14px; padding: 20px; border-radius: 26px; background: color-mix(in srgb, var(--t) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--t) 18%, var(--border)); }
.pr-hero::after { content: ""; position: absolute; z-index: -1; right: -60px; top: -70px; width: 190px; height: 190px; border-radius: 50%; background: color-mix(in srgb, var(--t) 10%, transparent); }
.pr-hero .tile-ic.lg { background: var(--t); color: var(--surface); }
.pr-hero h2 { margin: 0; font-size: 1.45rem; line-height: 1.15; }
.pr-hero p { margin: 4px 0 0; color: var(--text-soft); font-size: .9rem; line-height: 1.45; }
.pr-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pr-stats:empty { display: none; }
.pr-chip { padding: 4px 10px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-xs); font-size: .76rem; font-weight: 700; color: var(--text-soft); }
.pr-chip.warn { background: var(--warn-soft); color: var(--warn); }
.pr-chip.ok { background: var(--ok-soft); color: var(--ok); }
.pr-store { display: grid; gap: 12px; padding: 14px 16px 16px; }
.pr-store-top { display: flex; align-items: center; gap: 12px; }
.pr-store-top b { display: block; font-size: 1rem; }
.pr-store-top .grow > span { display: block; font-size: .8rem; color: var(--muted); }
.pr-store p { margin: 0; line-height: 1.45; }
.pr-sec h3 { display: flex; align-items: center; gap: 8px; margin: 10px 4px 4px; font-size: 1.05rem; }
.pr-sec h3 em { font-style: normal; font-family: var(--font); font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-soft); }
.pr-sec.warn h3 em { background: var(--warn-soft); color: var(--warn); }
.pr-sec > p { margin: 0 4px 8px; font-size: .82rem; color: var(--muted); }
.pr-sec > .card { margin-top: 8px; overflow: hidden; }
.pr-row { cursor: pointer; transition: background .15s; }
.pr-row:hover, .pr-row:focus-visible { background: var(--surface-2); outline: none; }
.pr-row .grow { min-width: 0; }
.pr-row b { display: block; font-weight: 650; }
.pr-sub { display: block; font-size: .76rem; color: var(--muted); }
.pr-row .price small { font-size: .72rem; font-weight: 600; color: var(--muted); }
.pr-row > .icon:last-child { width: 16px; height: 16px; flex: none; color: var(--border-strong); }
.pr-more { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 4px; padding: 14px 16px; border-radius: 20px; border: 1.5px dashed var(--border-strong); background: transparent; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.pr-more:hover { background: var(--surface); }
.pr-more b { display: block; }
.pr-more .grow > span { display: block; font-size: .8rem; color: var(--muted); }
.pr-more > .icon { width: 20px; height: 20px; color: var(--muted); flex: none; }
@media (max-width: 560px) {
  .fr-sec .fr-grid { gap: 6px; padding: 0 10px 10px; }
  .fr-sec .fr-main { gap: 10px; padding: 8px 44px 8px 10px; }
  .fr-sec .fr-emoji { font-size: 1.35rem; }
}

/* Logotipo dibujado «epulora»: el trazo toma el color del texto y la «o» (el plato) va en tomate, o en mantequilla en oscuro */
.wordmark { display: block; height: 1.2em; width: auto; flex: none; overflow: visible; }
.wordmark .wm-o { stroke: var(--accent); }
:root[data-theme="dark"] .wordmark .wm-o, .auth-art .wordmark .wm-o { stroke: var(--brand); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wordmark .wm-o { stroke: var(--brand); } }