@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/inter-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/inter-600.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/inter-700.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/fraunces-600.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/fraunces-700.woff2) format("woff2")}
/* CocinaFlow — diseño. Estilo "true-black flat" (elevación por luminosidad, sin bordes ni sombras en tarjetas).
   Cara propia: fondo cálido de cocina, el verde lima solo sobre datos (cantidades), botón primario por inversión. */
:root {
  color-scheme: dark;
  --ground: #0d0c0b;
  --surface: #171513;
  --raised: #25221f;
  --rule: #1f1c1a;
  --control: #4a4541;
  --text: #ffffff;
  --muted: #b9b4ae;
  --faint: #98938d;
  --accent: #c6f24e;
  --negative: #ff6b7e;
  --warning: #e5a93b;
  --pill-warning-bg: #2b2414; --pill-warning-ink: #e9b74f;
  --pill-ok-bg: #222a10; --pill-ok-ink: #c6f24e;
  --pill-neutral-bg: #25221f; --pill-neutral-ink: #ffffff;
  --radius-card: 20px;
  --gap: 14px;
  --pad: 28px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #060606; color: var(--text); font: 400 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }
.num, .tn { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 18px; height: 18px; flex: none; }
.ico.sm { width: 14px; height: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- barra de revisión (no es parte de la app) ---------- */
.review { height: 48px; display: flex; align-items: center; gap: 16px; padding: 0 18px; background: #060606; color: var(--muted); font-size: 12px; }
.review strong { color: #fff; font-weight: 600; font-size: 13px; }
.review .grow { flex: 1; }
.seg { display: inline-flex; background: #151515; border-radius: 999px; padding: 3px; }
.seg button { height: 28px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 12px; font-weight: 500; }
.seg button[aria-pressed="true"] { background: #fff; color: #000; }
.stage { height: calc(100% - 48px); display: flex; justify-content: center; align-items: flex-start; background: #060606; }
.stage.is-mobile { align-items: center; }
.stage.is-mobile .app { width: 390px; height: min(844px, 100%); border-radius: 36px; box-shadow: 0 0 0 10px #1a1a1a; }
.app { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 232px minmax(0, 1fr); background: var(--ground); overflow: hidden; container: app / inline-size; }

/* ---------- barra lateral ---------- */
.sb { display: flex; flex-direction: column; gap: 22px; padding: 22px 14px 18px; background: var(--ground); border-right: 1px solid var(--rule); overflow: auto; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px; height: 36px; }
.brand .logo { width: 34px; height: 34px; }
.brand b { font: 700 20px var(--serif); letter-spacing: -.01em; }
.grp { display: flex; flex-direction: column; gap: 2px; }
.grp h2 { padding: 0 12px 6px; font-size: 12px; font-weight: 500; color: var(--faint); }
.nv { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; border-radius: 10px; color: #bbb; font-weight: 500; }
.nv:hover { background: var(--surface); color: var(--text); }
.nv[aria-current="page"] { color: var(--text); }
.nv .cnt { margin-left: auto; color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.sb .me { margin-top: auto; display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 14px; background: var(--surface); }
.av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #2f3a1a; color: #dff59a; font-weight: 600; font-size: 13px; flex: none; }
.me b { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; }
.me small { color: var(--faint); font-size: 12px; }

/* ---------- columna principal ---------- */
.col { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.tb { height: 64px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 var(--pad); border-bottom: 1px solid var(--rule); }
.tb .mk { display: none; }
.search { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; background: var(--surface); border-radius: 999px; color: var(--faint); }
.search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--text); }
.search:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.search input::placeholder { color: var(--faint); }
.tb .sw { margin-left: auto; display: flex; align-items: center; gap: 12px; padding-left: 16px; height: 100%; border-left: 1px solid var(--rule); color: var(--muted); font-size: 13px; }
.tb .sw b { color: var(--text); font-weight: 500; }
main { flex: 1; min-height: 0; overflow: auto; padding: 24px var(--pad) 48px; scrollbar-color: #2b2724 transparent; }
.view { display: flex; flex-direction: column; gap: 22px; max-width: 1280px; margin: 0 auto; }

/* ---------- piezas ---------- */
.ttl { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ttl h1 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.ttl p { color: var(--muted); margin-top: 2px; }
.sec { display: flex; flex-direction: column; gap: 12px; }
.sec > .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sec h2 { font-size: 16px; font-weight: 600; }
.lnk { color: var(--text); font-weight: 500; font-size: 13px; text-decoration: underline; text-decoration-color: #5b5650; text-underline-offset: 4px; min-height: 32px; display: inline-flex; align-items: center; }
.lnk:hover { text-decoration-color: var(--text); }
.card { background: var(--surface); border-radius: var(--radius-card); }
.pad { padding: 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 40px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--control); background: transparent; color: var(--text); font-weight: 500; white-space: nowrap; }
.btn:hover { border-color: var(--text); }
.btn.pri { background: #fff; color: #000; border-color: var(--text); font-weight: 600; }
.btn.pri:hover { background: #e8e8e8; }
.btn.blk { width: 100%; }
.btn.back { align-self: flex-start; height: 36px; padding: 0 16px 0 12px; background: var(--surface); border-color: transparent; }
.ib { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(13, 12, 11, .72); color: var(--text); }
.ib:hover { background: #000; }
.ib[aria-pressed="true"] { color: var(--negative); }
.ib[aria-pressed="true"] .ico { fill: currentColor; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill.warn { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }
.pill.ok { background: var(--pill-ok-bg); color: var(--pill-ok-ink); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.tabs button, .tabs a { position: relative; height: 42px; padding: 0; background: none; border: 0; color: var(--faint); font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; }
.tabs [aria-selected="true"], .tabs .on { color: var(--text); }
.tabs [aria-selected="true"]::after, .tabs .on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #fff; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: 12px; }
.warn-box { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--pill-warning-bg); color: var(--pill-warning-ink); font-size: 13px; }
.warn-box .ico { margin-top: 1px; }
.info-box { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--raised); color: var(--muted); font-size: 13px; }

/* ---------- ilustraciones ---------- */
.art { position: relative; overflow: hidden; background: var(--raised); }
.art svg { width: 100%; height: 100%; }
.r16x10 { aspect-ratio: 16 / 10; }

/* ---------- tarjetas de receta ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: var(--gap); }
.rc { position: relative; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-card); overflow: hidden; }
.rc .art { aspect-ratio: 16 / 10; }
.rc .ib { position: absolute; top: 10px; right: 10px; }
.rc .bd { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.rc h3 { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; }
.rc h3 a::after { content: ""; position: absolute; inset: 0; }
.rc .ib { z-index: 2; }
.rc .mt { display: flex; gap: 16px; color: var(--muted); font-size: 13px; margin-top: auto; }
.rc .mt span { display: inline-flex; align-items: center; gap: 6px; }
.rc:hover { background: #1d1a18; }
.rc .tag { color: var(--faint); font-size: 12px; }

/* ---------- inicio ---------- */
.home { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.today { grid-column: span 8; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: hidden; }
.today .art { min-height: 300px; }
.today .tx { padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.today h2 { font: 700 30px/1.12 var(--serif); letter-spacing: -.015em; }
.today .mt { display: flex; gap: 18px; color: var(--muted); }
.today .mt span { display: inline-flex; gap: 7px; align-items: center; }
.today .go { margin-top: auto; display: flex; gap: 10px; }
.batch { grid-column: span 4; display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.batch h2 { font-size: 16px; font-weight: 600; }
.cont { grid-column: span 5; }
.cats { grid-column: span 7; }
.step { display: flex; align-items: center; gap: 10px; }
.stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.stepper button { height: 44px; border-radius: 14px; border: 0; background: var(--raised); color: var(--text); display: grid; place-items: center; }
.stepper button:hover { background: #302c28; }
.stepper input { height: 44px; width: 100%; text-align: center; font-size: 24px; font-weight: 600; background: #0d0c0b; border: 0; border-radius: 14px; color: var(--text); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--raised); color: #ddd; font-weight: 500; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { background: #302c28; }
.chip[aria-pressed="true"] { background: #fff; color: #000; }
.qty { display: flex; flex-direction: column; }
.qrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.qrow:first-child { border-top: 0; }
.qrow .nm { color: var(--muted); }
.qrow b { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.qrow .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--raised); overflow: hidden; }
.qrow .bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .25s ease; }
.tot { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--raised); }
.tot small { color: var(--muted); font-size: 12px; }
.tot b { font-size: 28px; font-weight: 600; color: var(--accent); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.prog { height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .25s ease; }
.cont .in { display: flex; gap: 16px; padding: 14px; align-items: center; }
.cont .in .art { width: 96px; height: 96px; border-radius: 14px; flex: none; }
.cont .in .tx { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cont .in h3 { font-size: 15px; font-weight: 600; }
.lst { display: flex; flex-direction: column; }
.lst a, .lst .li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 20px; border-top: 1px solid var(--rule); }
.lst a:first-child, .lst .li:first-child { border-top: 0; }
.lst a:hover { background: #1d1a18; }
.lst .r { margin-left: auto; color: var(--faint); display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }

/* ---------- listados ---------- */
.bar2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sort { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.sort select { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--control); background: transparent; color: var(--text); font: inherit; }
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--rule); min-height: 76px; }
.row:first-child { border-top: 0; }
.row:hover { background: #1d1a18; }
.row .art { width: 52px; height: 52px; border-radius: 12px; }
.row .nm { font-weight: 600; font-size: 15px; display: block; }
.row .sub { color: var(--faint); font-size: 13px; }
.row .rg { display: flex; align-items: center; gap: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.row .rg .col2 { text-align: right; min-width: 70px; }
.row .rg small { display: block; color: var(--faint); font-size: 12px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 44px 20px; text-align: center; color: var(--muted); }
.empty .ico { width: 32px; height: 32px; color: var(--faint); }

/* ---------- detalle de receta ---------- */
.det { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.det > .main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hero { position: relative; border-radius: 24px; overflow: hidden; background: var(--raised); aspect-ratio: 730 / 330; }
.hero .acts { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; }
.head { display: flex; flex-direction: column; gap: 10px; }
.head h1 { font: 700 32px/1.12 var(--serif); letter-spacing: -.015em; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.fact { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--surface); }
.fact small { color: var(--faint); font-size: 12px; }
.fact b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 8px; }
.fact b .ico { color: var(--muted); }
.ing { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 20px 10px 12px; border-top: 1px solid var(--rule); min-height: 72px; }
.ing:first-child { border-top: 0; }
a.ing:hover { background: #1d1a18; }
.ing .art { width: 52px; height: 52px; border-radius: 12px; }
.ing .nm { font-weight: 600; font-size: 15px; display: block; }
.ing .nt { color: var(--faint); font-size: 12px; }
.ing .q { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ing .q b { color: var(--accent); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ing .q small { color: var(--faint); font-size: 12px; }
.more { display: flex; justify-content: center; padding: 14px; border-top: 1px solid var(--rule); }
.rail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 16px; padding: 22px; }
.rail h2 { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.rail .lbl { color: var(--muted); font-size: 13px; }
.steps-prev { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.steps-prev li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.nutri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 6px 20px; }
.nutri .li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--rule); }
.nutri .li:nth-child(-n+2) { border-top: 0; }
.nutri .li:nth-child(odd) { padding-right: 18px; } .nutri .li:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--rule); }
.nutri .li span { color: var(--muted); display: inline-flex; gap: 10px; align-items: center; }
.nutri .li b { font-variant-numeric: tabular-nums; font-weight: 600; }
.tip { display: flex; gap: 14px; padding: 18px 20px; }
.tip .ico { color: var(--accent); width: 20px; height: 20px; margin-top: 1px; }
.tip h3 { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.tip p { color: var(--muted); }

/* ---------- pasos ---------- */
.cook { display: flex; flex-direction: column; gap: 18px; max-width: 820px; margin: 0 auto; width: 100%; }
.cook .top { display: flex; flex-direction: column; gap: 12px; }
.cook .top h1 { font: 700 26px/1.15 var(--serif); }
.pr { display: flex; align-items: center; gap: 14px; }
.pr .prog { flex: 1; }
.pr span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; padding: 14px; align-items: stretch; transition: opacity .2s; }
.st .art { border-radius: 14px; min-height: 140px; }
.st .tx { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 4px 6px 4px 0; }
.st .tx p { font-size: 15px; line-height: 1.5; }
.st .hd { display: flex; align-items: center; gap: 10px; }
.st .done { margin-top: auto; }
.st.is-done { opacity: .62; }
.st.is-done .tx p { text-decoration: line-through; text-decoration-color: #77716a; }
.st.is-done .n { background: var(--accent); color: var(--ink); }
.end { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.end .ico { color: var(--accent); width: 22px; height: 22px; }

/* ---------- ingrediente ---------- */
.ih { display: flex; align-items: center; gap: 22px; padding: 22px; }
.ih .art { width: 120px; height: 120px; border-radius: 20px; flex: none; }
.ih h1 { font: 700 30px/1.12 var(--serif); }
.ih .tx { display: flex; flex-direction: column; gap: 8px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; }
.kpis > div + div { border-left: 1px solid var(--rule); }
.kpis small { color: var(--muted); font-size: 12px; }
.kpis b { font-size: 24px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpis b span { font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 4px; }
.tbl { display: flex; flex-direction: column; padding: 4px 20px; }
.tbl .li { display: flex; justify-content: space-between; padding: 13px 0; border-top: 1px solid var(--rule); gap: 12px; }
.tbl .li:first-child { border-top: 0; }
.tbl .li span { color: var(--muted); }
.tbl .li b { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- alérgenos ---------- */
.al { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.al button { height: 48px; padding: 0 16px; border-radius: 14px; border: 0; background: var(--surface); color: var(--text); display: flex; align-items: center; gap: 10px; font-weight: 500; text-align: left; }
.al button:hover { background: #1d1a18; }
.al button[aria-pressed="true"] { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }
.al button .ico { color: var(--faint); }
.al button[aria-pressed="true"] .ico { color: currentColor; }

/* ---------- perfil / login ---------- */
.me2 { display: flex; align-items: center; gap: 18px; padding: 22px; }
.me2 .av { width: 64px; height: 64px; font-size: 22px; }
.me2 h2 { font-size: 18px; font-weight: 600; }
.login { grid-column: 1 / -1; display: grid; place-items: center; padding: 24px; background: var(--ground); height: 100%; overflow: auto; }
.login form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; padding: 32px 28px; background: var(--surface); border-radius: 28px; }
.login h1 { font: 700 30px var(--serif); display: flex; align-items: center; gap: 12px; }
.login h1 .logo { width: 42px; height: 42px; border-radius: 13px; }
.fld { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 13px; }
.fld input { height: 46px; padding: 0 14px; background: #0d0c0b; border: 1px solid transparent; border-radius: 14px; color: var(--text); }
.fld input:focus { outline: 0; border-color: var(--text); }

/* ---------- navegación inferior (móvil) y hoja ---------- */
.bn { display: none; }
.sheet-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); z-index: 30; display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 440px; background: var(--surface); border-radius: 28px 28px 0 0; padding: 22px 22px 28px; display: flex; flex-direction: column; gap: 16px; }
.sheet .hd { display: flex; align-items: center; justify-content: space-between; }
.sheet h2 { font-size: 16px; font-weight: 600; }
@media (min-width: 901px) { .sheet-bg { align-items: center; } .sheet { border-radius: 28px; } }
.toast { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 10px 18px; background: #fff; color: #000; border-radius: 999px; font-weight: 500; z-index: 40; }

/* ---------- ancho medio ---------- */
@container app (max-width: 1240px) {
  .det { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .today { grid-column: span 12; }
  .batch { grid-column: span 12; }
  .cont, .cats { grid-column: span 12; }
}

/* ---------- móvil: mismo código, el contenedor decide ---------- */
@container app (max-width: 900px) {
  .col { grid-column: 1 / -1; }
  .sb { display: none; }
  :root { --pad: 16px; }
  .tb { height: 56px; gap: 12px; }
  .tb .mk { display: flex; align-items: center; gap: 10px; font: 700 18px var(--serif); }
  .tb .mk .logo { width: 30px; height: 30px; }
  .tb .sw { display: none; }
  .tb .search { max-width: none; }
  .tb.has-mk .search { display: none; }
  .tb .sbtn { display: grid; }
  main { padding: 16px var(--pad) 120px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rc .bd { padding: 12px; }
  .rc h3 { font-size: 14px; }
  .rc .mt { gap: 10px; font-size: 12px; flex-wrap: wrap; }
  .today { grid-template-columns: minmax(0, 1fr); }
  .today .art { min-height: 0; aspect-ratio: 16 / 10; }
  .today .tx { padding: 18px; }
  .today h2 { font-size: 24px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hero { aspect-ratio: 16 / 11; border-radius: 20px; }
  .head h1 { font-size: 26px; }
  .nutri { grid-template-columns: minmax(0, 1fr); }
  .nutri .li:nth-child(n) { padding: 13px 0; border-left: 0; border-top: 1px solid var(--rule); }
  .nutri .li:first-child { border-top: 0; }
  .two { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; padding: 10px 14px; }
  .row .rg .hide-m { display: none; }
  .st { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
  .ih { flex-direction: row; padding: 16px; gap: 16px; }
  .ih .art { width: 88px; height: 88px; }
  .ih h1 { font-size: 24px; }
  .ing { padding-right: 14px; }
  .bn { display: grid; grid-template-columns: 1fr 1fr 76px 1fr 1fr; align-items: end; position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; height: 76px; padding: 0 8px 10px; background: var(--ground); border-top: 1px solid var(--rule); }
  .bn a, .bn .fab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 56px; color: #bbb; font-size: 11px; font-weight: 500; background: none; border: 0; }
  .bn a[aria-current="page"] { color: var(--text); }
  .bn .fab { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: #fff; color: #000; }
  .bn .fab .ico { width: 24px; height: 24px; }
  .sheet-bg { align-items: flex-end; }
  .sheet { border-radius: 28px 28px 0 0; padding-bottom: 36px; }
  .toast { bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* iconos de ingredientes (imagen con fondo transparente sobre baldosa elevada) */
.art.ico .sp { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: 1000% 1000%; }
.ih .art.ico { background: var(--raised); }

@media (max-width: 520px) { .review > span:not(.grow) { display: none; } }
.search { min-width: 0; } .search input { min-width: 0; width: 100%; }
/* ============ CAPA PREMIUM ============
   Cocina de noche: fondo espresso con focos de luz de azafrán y pimentón, superficies con relieve,
   botones con volumen, cantidades en oro. Títulos en Fraunces (serif de carácter), datos en Inter. */
:root { --radius-card: 22px; --serif: "Fraunces", Georgia, serif; --gold-1: var(--g1); --gold-2: var(--g2); --gold-3: var(--g3); --accent: var(--g2); }
html, body { background: #050403; color: var(--text); }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.review { background: #050403; }
.seg { background: var(--w1); box-shadow: var(--edge); }
.seg button[aria-pressed="true"] { background: linear-gradient(180deg, var(--g1), var(--g2)); color: var(--ink); }
.stage { background: #050403; }
.stage.is-mobile .app { box-shadow: 0 0 0 10px #17110e, 0 0 0 11px rgba(255, 220, 170, .12), 0 40px 90px -20px rgba(var(--a-glow), .25); }

/* fondo con focos de luz */
.app {
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(var(--a-rgb), var(--l1)), transparent 62%),
    radial-gradient(760px 520px at 104% 4%, rgba(var(--a-glow2), .14), transparent 60%),
    radial-gradient(900px 640px at 62% 118%, rgba(var(--a-rgb), .10), transparent 62%),
    var(--ground);
}
.sb { background: linear-gradient(180deg, var(--sb1), var(--sb2)); border-right: 1px solid var(--rule); backdrop-filter: blur(14px); }
.tb { border-bottom: 1px solid var(--rule); background: linear-gradient(180deg, rgba(255, 220, 170, .035), transparent); }
main { scrollbar-color: var(--b1) transparent; }

/* marca */
.logo { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; flex: none; color: var(--ink);
  background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 40%, var(--gold-3) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 5px rgba(var(--a-deep), .35), 0 0 0 1px rgba(var(--a-rgb), .35), 0 8px 22px -4px rgba(var(--a-glow), .55); }
.logo .ico { width: 20px; height: 20px; stroke-width: 2.2; }
.brand b, .tb .mk, .login h1 { font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; }
.brand b { font-size: 21px; background: linear-gradient(180deg, #fff6e2, #f4d7a4); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* navegación */
.grp h2 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.nv { height: 38px; color: var(--muted); transition: background .18s, color .18s, box-shadow .18s; }
.nv:hover { background: rgba(var(--ln), .07); color: var(--text); }
.nv[aria-current="page"] { color: var(--text); background: linear-gradient(90deg, rgba(var(--a-rgb), .24), rgba(var(--a-rgb), .04)); box-shadow: inset 2px 0 0 var(--gold-2), inset 0 1px 0 rgba(var(--ln), .08); }
.nv[aria-current="page"] .ico { color: var(--atx2); filter: drop-shadow(0 0 6px rgba(var(--a-rgb), .6)); }
.sb .me { background: var(--card-bg); box-shadow: var(--edge), var(--lift); }
.av { background: linear-gradient(150deg, var(--g1), var(--g3)); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 12px -2px rgba(var(--a-glow), .5); }

/* buscador */
.search { background: linear-gradient(180deg, var(--w1), var(--w2)); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(var(--ln), .07), 0 1px 0 rgba(var(--ln), .06); }
.search:focus-within { outline: 0; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), 0 0 0 1.5px var(--gold-2), 0 0 24px -2px rgba(var(--a-rgb), .45); }
.tb .sw b { color: var(--atx); }

/* títulos */
.ttl h1 { font: 700 30px/1.1 var(--serif); letter-spacing: -.015em; }
.sec h2 { font: 700 19px/1.2 var(--serif); letter-spacing: -.005em; }
.today h2, .head h1, .ih h1, .cook .top h1 { font-family: var(--serif); font-weight: 700; }
.head h1 { font-size: 36px; background: linear-gradient(180deg, #fffaf0 10%, #f3d9aa 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lnk { color: var(--atx); text-decoration-color: rgba(var(--a-rgb), .4); }
.lnk:hover { text-decoration-color: var(--atx2); }

/* tarjetas con relieve */
.card, .fact, .rc, .login form, .sheet { background: var(--card-bg); box-shadow: var(--edge), var(--lift); }
.rc { transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s; }
.rc:hover { background: var(--card-bg); transform: translateY(-4px); box-shadow: var(--edge), 0 30px 46px -22px rgba(0, 0, 0, .9), 0 0 0 1px rgba(var(--a-rgb), .28), 0 0 38px -8px rgba(var(--a-glow), .38); }
.rc .bd { gap: 10px; }
.rc .tag { color: var(--atx2); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.rc h3 { font: 700 17px/1.25 var(--serif); }
.rc .mt { color: var(--muted); }
.eur, .eur .ico { color: var(--atx2); }
.rows .row:hover, a.ing:hover, .lst a:hover { background: linear-gradient(90deg, rgba(var(--a-rgb), .09), transparent); }
.rows .row, .ing, .lst a, .lst .li, .qrow, .tbl .li, .more { border-top-color: var(--rule); }

/* botones con volumen */
.btn { height: 42px; color: var(--text); border: 0; background: linear-gradient(180deg, var(--b1) 0%, var(--b2) 100%);
  box-shadow: inset 0 1px 0 rgba(var(--ln), .18), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 0 0 1px rgba(var(--ln), .13), 0 6px 14px -6px rgba(0, 0, 0, .8);
  transition: transform .12s, box-shadow .12s, filter .15s; }
.btn:hover { border: 0; filter: brightness(1.12); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 0 0 1px rgba(var(--ln), .1); }
.btn.pri { position: relative; overflow: hidden; color: var(--ink); font-weight: 700; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); border: 0;
  background: linear-gradient(180deg, var(--g1) 0%, var(--g2) 42%, var(--g3) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -3px 0 rgba(var(--a-deep), .45), 0 0 0 1px rgba(var(--a-rgb), .55), 0 10px 22px -6px rgba(var(--a-glow), .6), 0 0 34px -6px rgba(var(--a-glow), .5); }
.btn.pri::before { content: ""; position: absolute; left: 6%; right: 6%; top: 1px; height: 46%; border-radius: 999px 999px 40% 40%; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); pointer-events: none; }
.btn.pri:hover { background: linear-gradient(180deg, var(--g1) 0%, var(--g2) 42%, var(--g3) 100%); filter: none; transform: translateY(-1px); }
.btn.pri:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(var(--a-deep), .5), 0 0 0 1px rgba(var(--a-rgb), .5), 0 4px 10px -4px rgba(var(--a-glow), .5); }
.btn.back { background: linear-gradient(180deg, var(--b1), var(--b2)); }
.btn.done[aria-pressed="true"] { color: #86e8bb; }
.ib { color: #fff; background: rgba(14, 9, 7, .62); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(var(--ln), .2), 0 0 0 1px rgba(var(--ln), .15), 0 8px 18px -6px rgba(0, 0, 0, .8); transition: transform .12s, background .15s; }
.ib:hover { background: rgba(14, 9, 7, .85); transform: scale(1.06); }
.ib[aria-pressed="true"] { color: var(--negative); box-shadow: inset 0 1px 0 rgba(var(--ln), .2), 0 0 0 1px rgba(255, 93, 115, .5), 0 0 22px -2px rgba(255, 93, 115, .6); }

/* chips, stepper */
.stepper button { background: linear-gradient(180deg, var(--b1), var(--b2)); box-shadow: inset 0 1px 0 rgba(var(--ln), .18), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 0 0 1px rgba(var(--ln), .12), 0 6px 12px -6px #000; transition: transform .1s, filter .15s; }
.stepper button:hover { background: linear-gradient(180deg, var(--b1), var(--b2)); filter: brightness(1.1); }
.stepper button:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .55); }
.stepper input { background: linear-gradient(180deg, var(--w1), var(--w2)); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(var(--ln), .07); font-family: var(--serif); font-weight: 700; font-size: 26px; color: var(--atx); }
.chip { background: linear-gradient(180deg, var(--b1), var(--b2)); color: var(--muted); box-shadow: inset 0 1px 0 rgba(var(--ln), .14), 0 0 0 1px rgba(var(--ln), .1); transition: transform .1s, color .15s; }
.chip:hover { background: linear-gradient(180deg, var(--b1), var(--b2)); color: var(--text); }
.chip[aria-pressed="true"] { color: var(--ink); font-weight: 700; background: linear-gradient(180deg, var(--g1), var(--g2) 50%, var(--g3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 1px rgba(var(--a-rgb), .5), 0 6px 16px -4px rgba(var(--a-glow), .6); }

/* cantidades: el protagonista, en oro con brillo */
.qrow b, .ing .q b, .st .qv { background: linear-gradient(180deg, var(--g1), var(--g2) 60%, var(--g3)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 9px rgba(var(--a-rgb), .38)); font-weight: 700; }
.qrow .bar { height: 6px; background: rgba(0, 0, 0, .4); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.qrow .bar i, .prog i { background: linear-gradient(90deg, var(--g3), var(--g2) 70%, var(--g1)); box-shadow: 0 0 12px rgba(var(--a-rgb), .7); border-radius: 3px; }
.prog { height: 8px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7); }
.tot { background: linear-gradient(160deg, rgba(var(--a-rgb), .16), rgba(var(--a-glow), .07) 70%); box-shadow: inset 0 1px 0 rgba(var(--ln), .12), inset 0 0 0 1px rgba(var(--a-rgb), .2); }
.tot b { font: 700 32px/1.1 var(--serif); background: linear-gradient(180deg, var(--g1), var(--g2) 65%, var(--g3)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(var(--a-rgb), .4)); }
.tot.cost b { font-size: 26px; }
.tot small { color: var(--muted); }

/* pills y avisos */
.pill { background: var(--pill-neutral-bg); box-shadow: inset 0 1px 0 rgba(var(--ln), .1); height: 26px; }
.pill.warn { box-shadow: inset 0 0 0 1px rgba(255, 130, 90, .3), 0 0 16px -4px rgba(255, 100, 60, .35); }
.pill.ok { box-shadow: inset 0 0 0 1px rgba(110, 220, 170, .28); }
.warn-box { background: linear-gradient(160deg, rgba(255, 110, 70, .17), rgba(255, 110, 70, .07)); box-shadow: inset 0 0 0 1px rgba(255, 130, 90, .28); }
.info-box { background: rgba(var(--ln), .06); box-shadow: inset 0 0 0 1px rgba(var(--ln), .07); }
.tabs [aria-selected="true"], .tabs .on { color: var(--atx); }
.tabs [aria-selected="true"]::after, .tabs .on::after { height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--gold-3), var(--gold-2), var(--gold-1)); box-shadow: 0 0 14px rgba(var(--a-rgb), .8); }

/* imágenes de plato: luz y viñeta */
.art { background: var(--raised); }
.rc .art::after, .hero .art::after, .today .art::after, .cont .art::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 28% -5%, rgba(255, 244, 220, .20), transparent 55%), linear-gradient(to top, rgba(12, 6, 3, .55), transparent 42%); }
.hero { box-shadow: var(--edge), 0 36px 70px -30px rgba(var(--a-glow), .38), 0 20px 36px -20px #000; border-radius: 26px; }
.today { box-shadow: var(--edge), 0 36px 70px -34px rgba(var(--a-glow), .35), var(--lift); }
.today .tx { background: radial-gradient(420px 260px at 100% 0%, rgba(var(--a-rgb), .13), transparent 70%); }
.today h2 { font-size: 34px; }
.today .pill { background: linear-gradient(180deg, var(--g1), var(--g2)); color: var(--ink); font-weight: 700; box-shadow: 0 0 20px -2px rgba(var(--a-rgb), .6); }
.fact b { font-family: var(--serif); font-weight: 700; font-size: 18px; }
.fact b .ico { color: var(--atx2); }
.fact { box-shadow: var(--edge), 0 12px 22px -14px #000; }

/* baldosa de ingrediente: foco de luz detrás del icono */
.art.ico { background: radial-gradient(circle at 50% 34%, var(--t1) 0%, var(--t2) 52%, var(--t3) 100%); box-shadow: inset 0 1px 0 rgba(var(--ln), .22), inset 0 0 0 1px rgba(var(--ln), .08), 0 8px 16px -8px #000; }
.art.ico .sp { filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .55)); transform: scale(1.08); }
.ini { display: grid; place-items: center; width: 100%; height: 100%; font: 700 24px var(--serif); color: var(--atx); text-shadow: 0 0 14px rgba(var(--a-rgb), .6); }
.ih .art.ico { background: radial-gradient(circle at 50% 34%, var(--t1) 0%, var(--t2) 55%, var(--t3) 100%); border-radius: 26px; }
.ih .ini { font-size: 54px; }
.ih h1 { font-size: 34px; }
.ih { background: var(--card-bg), radial-gradient(500px 240px at 0% 0%, rgba(var(--a-rgb), .12), transparent 70%); }

/* cocinar (lista de ingredientes) */
.st { grid-template-columns: 84px minmax(0, 1fr); align-items: center; }
.st .art.ico { min-height: 0; aspect-ratio: 1; width: 84px; border-radius: 20px; align-self: center; }
.st .hd { justify-content: space-between; width: 100%; }
.st .nm { font: 700 18px var(--serif); }
.st .qv { font-size: 20px; }
.st .tx { gap: 6px; }
.st.is-done { opacity: .7; }
.st.is-done .nm { text-decoration: line-through; text-decoration-color: rgba(var(--ln), .4); }
.elab { font-size: 16px; line-height: 1.65; color: var(--text); max-width: 62ch; }
.steps-prev { gap: 18px; }
.rac { text-align: right; font-weight: 500 !important; max-width: 60%; }
.kpis b { font: 700 30px/1.1 var(--serif); }
.kpis b span { font-family: var(--font); }
.end .ico, .tip .ico { color: var(--atx2); }

/* alérgenos */
.al button { background: var(--card-bg); box-shadow: var(--edge), 0 8px 16px -10px #000; transition: transform .12s, box-shadow .15s; }
.al button:hover { background: var(--card-bg); transform: translateY(-2px); }
.al button[aria-pressed="true"] { background: linear-gradient(160deg, rgba(255, 110, 70, .28), rgba(255, 110, 70, .1)); color: #ffc0a8; box-shadow: inset 0 0 0 1px rgba(255, 130, 90, .5), 0 0 24px -4px rgba(255, 100, 60, .5); }

/* acceso y hoja inferior */
.login { background: radial-gradient(700px 420px at 50% 0%, rgba(var(--a-rgb), .22), transparent 66%), radial-gradient(600px 400px at 90% 100%, rgba(var(--a-glow2), .16), transparent 66%), var(--ground); }
.login form { border-radius: 30px; box-shadow: var(--edge), 0 40px 80px -30px #000, 0 0 70px -20px rgba(var(--a-glow), .3); }
.login h1 { font-size: 32px; }
.fld input { background: linear-gradient(180deg, var(--w1), var(--w2)); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(var(--ln), .08); border: 0; }
.fld input:focus { box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7), 0 0 0 1.5px var(--gold-2), 0 0 22px -2px rgba(var(--a-rgb), .45); }
.sheet-bg { background: rgba(8, 4, 2, .66); backdrop-filter: blur(6px); }
.toast { background: linear-gradient(180deg, var(--g1), var(--g2)); color: var(--ink); font-weight: 700; box-shadow: 0 14px 30px -8px rgba(var(--a-glow), .6); }
.bn { background: linear-gradient(180deg, var(--bn1), var(--bn2)); border-top: 1px solid var(--rule); backdrop-filter: blur(16px); box-shadow: 0 -18px 30px -20px #000; }
.bn a, .bn .fab { color: var(--muted); }
.bn a[aria-current="page"] { color: var(--atx); }
.bn a[aria-current="page"] .ico { filter: drop-shadow(0 0 7px rgba(var(--a-rgb), .7)); }
.bn .fab { color: var(--ink); background: linear-gradient(180deg, var(--g1), var(--g2) 45%, var(--g3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -3px 0 rgba(var(--a-deep), .4), 0 0 0 1px rgba(var(--a-rgb), .55), 0 10px 24px -4px rgba(var(--a-glow), .65), 0 0 40px -4px rgba(var(--a-glow), .5); }

/* una entrada orquestada al cambiar de pantalla */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view { animation: rise .38s cubic-bezier(.2, .7, .2, 1) both; }
@container app (max-width: 900px) {
  .head h1 { font-size: 28px; }
  .today h2 { font-size: 26px; }
  .ttl h1 { font-size: 26px; }
  .st { grid-template-columns: 72px minmax(0, 1fr); }
  .st .art.ico { width: 72px; }
}
.st .art.ico { height: 84px; min-height: 84px; flex: none; }
.st .art.ico .sp { transform: none; }
.qv.na, .qrow b.na { background: none; color: var(--faint); filter: none; font-weight: 600; font-size: 16px; -webkit-text-fill-color: var(--faint); }
.rc .tag { letter-spacing: .04em; text-transform: none; font-size: 12px; }
@container app (max-width: 900px) { .st .art.ico { height: 72px; min-height: 72px; } }
.st .qv{white-space:nowrap;flex:none}.st .nm{min-width:0}

.sheet .ib { color: var(--text); }
.review { --text: #fff; }
.review { --muted: #b9b4ae; }
/* ============ TEMAS Y COLORES ============
   data-tema = oscuro | claro      data-acc = amarillo | azul | verde | rojo | marron
   Los colores de acción (botones, chips, barras) son los MISMOS en claro y oscuro: solo cambian superficies y texto. */
:root, :root[data-tema="oscuro"] {
  color-scheme: dark;
  --ground: #0b0807; --surface: #1c1613; --raised: #2c231e;
  --text: #fbf3e6; --muted: #cdbca8; --faint: #9d8e7e;
  --ln: 255, 232, 200;
  --rule: rgba(var(--ln), .08); --control: rgba(var(--ln), .2);
  --card-bg: linear-gradient(158deg, #2b221d 0%, #1d1613 55%, #171110 100%);
  --edge: inset 0 1px 0 rgba(var(--ln), .09), inset 0 0 0 1px rgba(var(--ln), .05);
  --lift: 0 24px 40px -22px rgba(0, 0, 0, .85), 0 4px 10px -4px rgba(0, 0, 0, .5);
  --b1: #3a2e27; --b2: #261d18; --w1: #0d0908; --w2: #17100d;
  --sb1: rgba(34, 24, 18, .72); --sb2: rgba(14, 10, 8, .55); --bn1: rgba(30, 21, 16, .92); --bn2: rgba(11, 8, 7, .96);
  --t1: #5a463a; --t2: #35271f; --t3: #1d1511;
  --l1: .20; --ta: .38;
  --atx: var(--g1); --atx2: var(--g2);
  --pill-warning-bg: rgba(255, 110, 70, .15); --pill-warning-ink: #ffa98a;
  --pill-ok-bg: rgba(110, 220, 170, .13); --pill-ok-ink: #86e8bb;
  --pill-neutral-bg: rgba(var(--ln), .09); --pill-neutral-ink: var(--text);
  --negative: #ff5d73;
  --qt1: var(--g1); --qt2: var(--g2); --qt3: var(--g3);
}
:root[data-tema="claro"] {
  color-scheme: light;
  --ground: #f7f0e6; --surface: #fffaf2; --raised: #efe3d2;
  --text: #2b1d12; --muted: #5a4733; --faint: #6c5845;
  --ln: 80, 52, 24;
  --rule: rgba(var(--ln), .12); --control: rgba(var(--ln), .3);
  --card-bg: linear-gradient(158deg, #fffefb 0%, #fdf6eb 55%, #f7ecdc 100%);
  --edge: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(var(--ln), .09);
  --lift: 0 20px 30px -20px rgba(110, 66, 20, .38), 0 3px 8px -4px rgba(110, 66, 20, .22);
  --b1: #fffaf0; --b2: #efdfc8; --w1: #e8d9c3; --w2: #f6ecdd;
  --sb1: rgba(255, 252, 246, .82); --sb2: rgba(247, 236, 220, .7); --bn1: rgba(255, 252, 246, .94); --bn2: rgba(247, 236, 220, .98);
  --t1: #fff7ea; --t2: #f0dfc6; --t3: #dcc29c;
  --l1: .17; --ta: 0;
  --atx: var(--gd); --atx2: var(--gd);
  --pill-warning-bg: rgba(220, 80, 40, .12); --pill-warning-ink: #b23a14;
  --pill-ok-bg: rgba(30, 150, 90, .13); --pill-ok-ink: #14753f;
  --negative: #d02a45;
  --qt1: var(--gd); --qt2: var(--gd); --qt3: var(--gd);
}
/* colores de acción */
:root, :root[data-acc="amarillo"] { --g1: #ffe9a8; --g2: #ffc24d; --g3: #f08c14; --gd: #8f4e00; --ink: #2a1600; --a-rgb: 255, 176, 46; --a-glow: 255, 140, 20; --a-glow2: 255, 80, 45; --a-deep: 160, 70, 0; }
:root[data-acc="azul"]     { --g1: #c4e2ff; --g2: #5eaaff; --g3: #1f6fe0; --gd: #0f4cad; --ink: #04163a; --a-rgb: 70, 150, 255; --a-glow: 40, 110, 235; --a-glow2: 120, 80, 255; --a-deep: 10, 50, 140; }
:root[data-acc="verde"]    { --g1: #c8f6d3; --g2: #50d27b; --g3: #1f9a4d; --gd: #0f6a33; --ink: #02240f; --a-rgb: 60, 200, 110; --a-glow: 30, 160, 80; --a-glow2: 150, 210, 40; --a-deep: 10, 90, 40; }
:root[data-acc="rojo"]     { --g1: #ffc7c7; --g2: #ff6b6b; --g3: #d62f3a; --gd: #a31a28; --ink: #3a0208; --a-rgb: 255, 95, 100; --a-glow: 225, 45, 60; --a-glow2: 255, 130, 60; --a-deep: 120, 10, 25; }
:root[data-acc="marron"]   { --g1: #ecd2b4; --g2: #c58f5e; --g3: #8f5733; --gd: #6b3d20; --ink: #1f1007; --a-rgb: 196, 140, 90; --a-glow: 150, 95, 55; --a-glow2: 200, 120, 70; --a-deep: 70, 35, 10; }

/* texto de cantidades y totales: degradado en oscuro, color sólido en claro */
.qrow b, .ing .q b, .st .qv, .tot b { background: linear-gradient(180deg, var(--qt1), var(--qt2) 60%, var(--qt3)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 9px rgba(var(--a-rgb), var(--ta))); }
.brand b { background: linear-gradient(180deg, var(--text), var(--muted)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.head h1 { background: linear-gradient(180deg, var(--text) 20%, var(--muted) 130%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qv.na { background: none; -webkit-text-fill-color: var(--faint); filter: none; }

/* ajustes del tema claro */
:root[data-tema="claro"] .app { background:
  radial-gradient(900px 520px at 8% -8%, rgba(var(--a-rgb), .2), transparent 62%),
  radial-gradient(760px 520px at 104% 4%, rgba(var(--a-glow2), .1), transparent 60%),
  var(--ground); }
:root[data-tema="claro"] .rc .art::after, :root[data-tema="claro"] .hero .art::after, :root[data-tema="claro"] .today .art::after { opacity: .7; }
:root[data-tema="claro"] .art.ico { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(var(--ln), .1), 0 8px 14px -8px rgba(110, 66, 20, .45); }
:root[data-tema="claro"] .art.ico .sp { filter: drop-shadow(0 5px 5px rgba(80, 40, 10, .35)); }
:root[data-tema="claro"] .btn { box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(var(--ln), .14), 0 0 0 1px rgba(var(--ln), .16), 0 6px 12px -6px rgba(110, 66, 20, .4); }
:root[data-tema="claro"] .btn.pri { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -3px 0 rgba(var(--a-deep), .45), 0 0 0 1px rgba(var(--a-rgb), .6), 0 10px 20px -6px rgba(var(--a-glow), .55); }
:root[data-tema="claro"] .stepper input, :root[data-tema="claro"] .search, :root[data-tema="claro"] .fld input { box-shadow: inset 0 2px 5px rgba(110, 66, 20, .22), inset 0 0 0 1px rgba(var(--ln), .1); }
:root[data-tema="claro"] .chip, :root[data-tema="claro"] .stepper button { box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(var(--ln), .12), 0 0 0 1px rgba(var(--ln), .14), 0 5px 10px -6px rgba(110, 66, 20, .4); }
:root[data-tema="claro"] .chip[aria-pressed="true"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 1px rgba(var(--a-rgb), .6), 0 6px 14px -4px rgba(var(--a-glow), .55); }
:root[data-tema="claro"] .nv[aria-current="page"] { color: var(--text); background: linear-gradient(90deg, rgba(var(--a-rgb), .26), rgba(var(--a-rgb), .04)); }
:root[data-tema="claro"] .nv[aria-current="page"] .ico { filter: none; }
:root[data-tema="claro"] .bn a[aria-current="page"] .ico { filter: none; }
:root[data-tema="claro"] .tot { background: linear-gradient(160deg, rgba(var(--a-rgb), .2), rgba(var(--a-glow2), .06) 70%); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(var(--a-rgb), .35); }
:root[data-tema="claro"] .qrow .bar, :root[data-tema="claro"] .prog { background: rgba(var(--ln), .14); box-shadow: inset 0 1px 2px rgba(var(--ln), .25); }
:root[data-tema="claro"] .qrow .bar i, :root[data-tema="claro"] .prog i { box-shadow: 0 0 8px rgba(var(--a-rgb), .55); }
:root[data-tema="claro"] .sheet-bg { background: rgba(60, 36, 12, .38); }
:root[data-tema="claro"] .pill.warn { color: var(--pill-warning-ink); }
:root[data-tema="claro"] .warn-box { background: linear-gradient(160deg, rgba(220, 80, 40, .14), rgba(220, 80, 40, .06)); box-shadow: inset 0 0 0 1px rgba(200, 70, 30, .3); color: var(--text); }
:root[data-tema="claro"] .info-box { background: rgba(var(--ln), .06); }
:root[data-tema="claro"] .al button[aria-pressed="true"] { color: #9a2f10; }
:root[data-tema="claro"] .login { background: radial-gradient(700px 420px at 50% 0%, rgba(var(--a-rgb), .28), transparent 66%), radial-gradient(600px 400px at 90% 100%, rgba(var(--a-glow2), .12), transparent 66%), var(--ground); }
:root[data-tema="claro"] .rc:hover { box-shadow: var(--edge), 0 26px 36px -22px rgba(110, 66, 20, .5), 0 0 0 1px rgba(var(--a-rgb), .55); }
:root[data-tema="claro"] .ini { text-shadow: none; }
:root[data-tema="claro"] .st.is-done .nm { text-decoration-color: rgba(var(--ln), .5); }

/* ---- rueda de ajustes y cambio de tema ---- */
.tools { display: flex; align-items: center; gap: 8px; margin-left: 12px; flex: none; }
.tool { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; color: var(--text); background: linear-gradient(180deg, var(--b1), var(--b2)); box-shadow: inset 0 1px 0 rgba(var(--ln), .18), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 0 0 1px rgba(var(--ln), .14), 0 6px 12px -6px rgba(0, 0, 0, .5); transition: transform .12s, filter .15s; cursor: pointer; }
.tool:hover { filter: brightness(1.08); transform: translateY(-1px); }
.tool:active { transform: translateY(1px); }
.tool .ico { width: 19px; height: 19px; }
.tool.gear:hover .ico { transform: rotate(60deg); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.set .hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.set h2 { font: 700 22px var(--serif); }
.set h3 { font: 600 13px var(--font); color: var(--muted); margin: 22px 0 12px; }
.sw5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; color: var(--muted); font-size: 12px; font-weight: 500; padding: 4px 0; cursor: pointer; }
.swatch i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, var(--s1), var(--s2) 55%, var(--s3)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -4px 6px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .18), 0 8px 16px -6px var(--s2); color: #fff; transition: transform .12s; }
.swatch i .ico { opacity: 0; width: 22px; height: 22px; stroke-width: 3; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.swatch:hover i { transform: translateY(-2px); }
.swatch[aria-pressed="true"] { color: var(--text); font-weight: 700; }
.swatch[aria-pressed="true"] i { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -4px 6px rgba(0, 0, 0, .28), 0 0 0 3px var(--ground), 0 0 0 5px var(--s2), 0 10px 20px -6px var(--s2); }
.swatch[aria-pressed="true"] i .ico { opacity: 1; }
.seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border-radius: 14px; border: 0; color: var(--text); font-weight: 600; cursor: pointer; background: linear-gradient(180deg, var(--b1), var(--b2)); box-shadow: inset 0 1px 0 rgba(var(--ln), .16), 0 0 0 1px rgba(var(--ln), .14); }
.opt[aria-pressed="true"] { color: var(--ink); background: linear-gradient(180deg, var(--g1), var(--g2) 50%, var(--g3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -3px 0 rgba(var(--a-deep), .4), 0 0 0 1px rgba(var(--a-rgb), .55), 0 8px 18px -6px rgba(var(--a-glow), .6); }
.set .note { margin-top: 18px; color: var(--faint); font-size: 12px; }
.sheet.set { max-width: 440px; }

/* ---- logo e identidad ---- */
img.logo { width: 42px; height: 42px; object-fit: contain; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .35)); flex: none; }
.brand img.logo { width: 46px; height: 46px; margin: -4px 0; }
.tb .mk img.logo { width: 36px; height: 36px; }
.login h1 img.logo { width: 92px; height: 92px; margin: 0 auto 6px; }
.login h1 { flex-direction: column; text-align: center; }

/* ---- pantalla de carga: aparece el logo y se disuelve ---- */
#splash { position: absolute; inset: 0; z-index: 90; display: grid; place-items: center; align-content: center; gap: 18px; background:
  radial-gradient(520px 420px at 50% 42%, rgba(var(--a-rgb), .26), transparent 70%),
  radial-gradient(900px 600px at 80% 110%, rgba(var(--a-glow2), .14), transparent 65%), var(--ground);
  transition: opacity .8s ease, filter .8s ease, transform .8s ease; }
#splash img { width: min(46vmin, 300px); height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)) drop-shadow(0 0 40px rgba(var(--a-rgb), .35)); animation: splashIn .9s cubic-bezier(.2, .8, .2, 1) both; }
#splash b { font: 700 26px var(--serif); color: var(--text); letter-spacing: -.01em; animation: splashIn .9s .25s cubic-bezier(.2, .8, .2, 1) both; }
#splash .bar { width: 120px; height: 4px; border-radius: 4px; background: rgba(var(--ln), .16); overflow: hidden; animation: splashIn .6s .4s both; }
#splash .bar i { display: block; height: 100%; width: 40%; border-radius: 4px; background: linear-gradient(90deg, var(--g3), var(--g2), var(--g1)); box-shadow: 0 0 12px rgba(var(--a-rgb), .8); animation: splashBar 1.1s ease-in-out infinite; }
#splash.out { opacity: 0; filter: blur(18px); transform: scale(1.12); pointer-events: none; }
@keyframes splashIn { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes splashBar { 0% { transform: translateX(-110%); } 100% { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) {
  #splash img, #splash b, #splash .bar, #splash .bar i { animation: none; }
  #splash { transition: opacity .3s; } #splash.out { filter: none; transform: none; }
  .view { animation: none; }
}
@container app (max-width: 900px) { .tools { margin-left: 6px; gap: 6px; } .tool { width: 38px; height: 38px; } }
.brand img.logo { width: 58px; height: 58px; margin: -8px -4px -8px -6px; }
.tb .mk img.logo { width: 40px; height: 40px; }
.review { --faint: #98938d; --text: #fff; }
.review .seg { background: #120d0b; }

/* ---- buscador de móvil: lupa que despliega un campo tipo bocadillo ---- */
.tb { position: relative; z-index: 20; }
.sbtn { display: none; }
:root { --bub: #2b221d; }
:root[data-tema="claro"] { --bub: #fffefb; }
@container app (max-width: 900px) {
  .tb .tools { margin-left: auto; }
  .sbtn { display: grid; }
  .tb .search { display: none; }
  .tb.open .search { display: flex; position: absolute; left: 12px; right: 12px; top: calc(100% + 12px); z-index: 40; height: 54px; max-width: none; padding: 0 18px; border-radius: 18px; color: var(--muted); background: var(--card-bg); box-shadow: var(--edge), 0 24px 40px -16px rgba(0, 0, 0, .6), 0 0 0 1.5px rgba(var(--a-rgb), .55), 0 0 30px -6px rgba(var(--a-rgb), .45); animation: bub .24s cubic-bezier(.2, .9, .25, 1.1) both; transform-origin: calc(100% - 118px) -10px; }
  .tb.open .search::before { content: ""; position: absolute; top: -8px; right: 108px; width: 14px; height: 14px; transform: rotate(45deg); background: var(--bub); border-top: 1.5px solid rgba(var(--a-rgb), .55); border-left: 1.5px solid rgba(var(--a-rgb), .55); border-radius: 3px 0 0 0; }
  .tb.open .search input { font-size: 16px; color: var(--text); }
  .tb.open .sbtn { color: var(--ink); background: linear-gradient(180deg, var(--g1), var(--g2) 55%, var(--g3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 1px rgba(var(--a-rgb), .55), 0 6px 14px -4px rgba(var(--a-glow), .6); }
}
@keyframes bub { from { opacity: 0; transform: translateY(-8px) scale(.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tb.open .search { animation: none; } }

/* ---- crear menú ---- */
.mline { display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.mh { display: flex; align-items: center; gap: 14px; }
.mh .art { width: 64px; height: 64px; flex: none; border-radius: 16px; overflow: hidden; }
.mn { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mn a { font: 700 18px/1.25 var(--serif); }
.ib2 { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer; color: var(--negative); background: linear-gradient(180deg, var(--b1), var(--b2)); box-shadow: inset 0 1px 0 rgba(var(--ln), .16), 0 0 0 1px rgba(var(--ln), .14), 0 6px 12px -6px rgba(0, 0, 0, .5); transition: transform .12s, box-shadow .15s; }
.ib2:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(var(--ln), .16), 0 0 0 1px var(--negative), 0 0 20px -4px var(--negative); }
.mrow { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 18px; align-items: center; }
.mrow .stepper { grid-template-columns: 44px minmax(0, 1fr) 44px; }
.mrow .stepper input { font-size: 22px; }
.mc { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.mc small { color: var(--muted); }
.mc b { font: 700 22px var(--serif); color: var(--atx2); }
.mbody { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.mrows .qrow { padding: 8px 0; }
.mline .btn { align-self: center; }
.add { height: 52px; }
.mtotal { display: flex; flex-direction: column; gap: 16px; }
.mtt { display: grid; gap: 12px; }
.mh3 { font: 600 13px var(--font); color: var(--muted); margin-top: 6px; }
.mlist .ing { padding: 10px 0; }
.mlist .ing .art { width: 44px; height: 44px; }
.rail .tot { margin: 0; }
.pk { max-width: 480px; }
.pklist { display: flex; flex-direction: column; gap: 8px; max-height: min(52vh, 420px); overflow: auto; padding: 2px; }
.prow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 16px; color: var(--text); cursor: pointer; background: linear-gradient(180deg, var(--b1), var(--b2)); box-shadow: inset 0 1px 0 rgba(var(--ln), .14), 0 0 0 1px rgba(var(--ln), .12); transition: transform .12s, box-shadow .15s; }
.prow:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(var(--ln), .14), 0 0 0 1px rgba(var(--a-rgb), .5), 0 8px 18px -8px rgba(var(--a-glow), .5); }
.prow .art { width: 48px; height: 48px; flex: none; border-radius: 12px; overflow: hidden; }
.prow span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.prow small { color: var(--muted); }
.prow .ico { color: var(--atx2); }
.pk .search { max-width: none; }
@container app (max-width: 900px) {
  .mrow { grid-template-columns: 1fr 1fr; gap: 12px; }
  .mline { padding: 16px; }
}
:root[data-tema="claro"] .btn.done[aria-pressed="true"] { color: var(--pill-ok-ink); }
:root[data-tema="claro"] .btn.done[aria-pressed="true"] .ico { color: var(--pill-ok-ink); }
.pk .search { height: 50px; min-height: 50px; flex: none; padding: 0 16px; max-width: none; } .pk .pklist { flex: 0 1 auto; min-height: 0; }

/* ---------- versión real: sin barra de revisión, ocupa toda la pantalla ---------- */
html, body { height: 100%; }
.review { display: none !important; }
.stage { position: relative; height: 100vh; height: 100dvh; height: var(--vvh, 100dvh); }
html, body { height: var(--vvh, 100%); }   /* misma altura visible que la app: la página no corre, pero SIGUE pudiendo estirarse para recargar */
#splash { position: fixed; }
.art img.ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.noph { width: 100%; height: 100%; min-height: 100%; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, rgba(var(--a-rgb), .18), transparent 70%), var(--raised); }
.noph img { width: 38%; max-width: 72px; height: auto; opacity: .6; filter: grayscale(.2); }
.more { display: flex; justify-content: center; padding: 18px 0 6px; }
.sp { background-image: url(../img/atlas.webp); }

/* ---------- iconos de alérgenos (hoja 7×2) ---------- */
.alsp { display: inline-block; flex: none; width: 22px; height: 22px; margin-right: 6px; vertical-align: -6px; background: url(../img/alergenos.webp) no-repeat; background-size: 700% 200%; }
.alsp.lg { width: 38px; height: 38px; margin: 0; vertical-align: middle; }
.pill .alsp { width: 20px; height: 20px; margin-right: 6px; vertical-align: -5px; }

/* ---------- barras de desplazamiento: finas y con el color del tema ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(var(--a-rgb), .75) rgba(var(--ln), .08); }
main { scrollbar-width: thin; scrollbar-color: rgba(var(--a-rgb), .75) rgba(var(--ln), .08); }

/* la pantalla ocupa el alto del dispositivo y SOLO el contenido se desplaza */
.app { grid-template-rows: minmax(0, 1fr); }
.col { min-height: 0; }

/* ---------- desplegable propio (mismo estilo que el resto) ---------- */
.sort { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); }
.dd { position: relative; }
.ddb { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 18px; border-radius: 999px; border: 0; color: var(--text); font: 500 14px var(--font); cursor: pointer;
  background: var(--b1); box-shadow: var(--edge), 0 8px 16px -10px #000; }
.ddb .ico { transition: transform .15s; }
.dd.open .ddb .ico { transform: rotate(180deg); }
.ddl { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 100%; width: max-content; margin: 0; padding: 6px; list-style: none; border-radius: 18px;
  background: var(--card-bg); box-shadow: var(--edge), 0 24px 48px -16px #000, 0 0 0 1px rgba(var(--ln), .12); }
.ddl button { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; height: 42px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font: 500 14px var(--font); cursor: pointer; text-align: left; }
.ddl button:hover { background: rgba(var(--a-rgb), .16); }
.ddl [aria-selected="true"] button { color: var(--atx); background: rgba(var(--a-rgb), .12); }

/* ---------- menú de ajustes estilo iPhone: filas con interruptor On/Off ---------- */
.sheet.set { max-height: min(88dvh, 760px); }
.sheet.set .sbody { overflow-y: auto; min-height: 0; flex: 1 1 auto; padding-right: 4px; margin-right: -4px; overscroll-behavior: contain; }
.sheet.set .hd { flex: none; margin-bottom: 8px; }
.sheet.set > .btn { flex: none; }
.grp2 { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: rgba(var(--ln), .06); box-shadow: inset 0 0 0 1px rgba(var(--ln), .08); }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 54px; padding: 0 16px; font-weight: 500; }
.srow + .srow { border-top: 1px solid rgba(var(--ln), .1); }
.srow > span { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.tgl { position: relative; flex: none; width: 52px; height: 32px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(var(--ln), .26); transition: background .2s; }
.tgl::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, .4); transition: transform .2s cubic-bezier(.3, .8, .3, 1); }
.tgl[aria-checked="true"] { background: linear-gradient(180deg, var(--g1), var(--g2) 55%, var(--g3)); box-shadow: 0 0 14px -2px rgba(var(--a-rgb), .5); }
.tgl[aria-checked="true"]::after { transform: translateX(20px); }
.tgl:focus-visible { outline: 2px solid var(--atx); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .tgl, .tgl::after { transition: none; } }

/* ---------- sugerencias de búsqueda mientras se escribe ---------- */
.search { position: relative; }
.sug { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 60; max-height: min(60dvh, 460px); overflow-y: auto; padding: 8px; border-radius: 20px; background: var(--card-bg);
  box-shadow: var(--edge), 0 28px 56px -18px #000, 0 0 0 1px rgba(var(--ln), .12); }
.sg { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; color: var(--text); text-decoration: none; }
.sg:hover, .sg:focus-visible { background: rgba(var(--a-rgb), .16); outline: 0; }
.sg .art { width: 46px; height: 46px; flex: none; border-radius: 12px; overflow: hidden; }
.sgt { display: flex; flex-direction: column; min-width: 0; }
.sgt b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgt small { color: var(--muted); }
.sgall { display: flex; justify-content: center; margin-top: 6px; padding: 12px; border-radius: 14px; color: var(--atx); font-weight: 600; text-decoration: none; background: rgba(var(--a-rgb), .1); }
.sgn0 { margin: 0; padding: 14px; color: var(--muted); }

/* Banner del plato: la foto entera (sin recortar), centrada, sobre un fondo desenfocado de sí misma */
.hero.hp { height: auto; aspect-ratio: 1 / 1; max-height: min(78vh, 820px); background: var(--raised); }
.hero.hp::before { content: ""; position: absolute; inset: -30px; background: var(--hb) center / cover no-repeat; filter: blur(28px) saturate(1.15); opacity: .75; transform: scale(1.1); }
.hero.hp .art { position: absolute; inset: 0; background: transparent; }
.hero.hp .art img.ph { object-fit: contain; object-position: center; cursor: zoom-in; position: relative; }

body.lbopen { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.97); display: grid; place-items: center; padding: 64px 16px 24px; }
.lb figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 100%; max-height: 100%; }
.lb img { max-width: 100%; max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); width: auto; height: auto; object-fit: contain; border-radius: 14px; }
.lb figcaption { color: #fff; font: 600 20px/1.3 var(--serif, Fraunces, serif); text-align: center; padding: 0 8px; }
.lb .lbx { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.14); color: #fff; }

/* ===== trabajos, notas, guardar menú ===== */
.ib2.ed { color: var(--text); }
.ib2.ed:hover { box-shadow: inset 0 1px 0 rgba(var(--ln), .16), 0 0 0 1px rgba(var(--a-rgb), .8), 0 0 20px -4px rgba(var(--a-rgb), .6); }
.tj { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; margin-bottom: 14px; }
.tjm { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.tjm b { font-size: 18px; overflow-wrap: anywhere; }
.tjb { display: flex; align-items: center; gap: 10px; flex: none; }
.nt { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.nt form { display: flex; flex-direction: column; gap: 14px; }
.nt h2 { margin: 0; }
.inp { width: 100%; box-sizing: border-box; padding: 13px 16px; border-radius: 14px; border: 0; color: var(--text); font: inherit; background: var(--raised); box-shadow: inset 0 0 0 1px rgba(var(--ln), .16); outline: none; resize: vertical; }
.inp:focus, #ntn:focus { box-shadow: inset 0 0 0 2px rgba(var(--a-rgb), .85); }
#ntn { width: 100%; box-sizing: border-box; padding: 13px 16px; border-radius: 14px; border: 0; color: var(--text); font: inherit; background: var(--raised); box-shadow: inset 0 0 0 1px rgba(var(--ln), .16); outline: none; }
.tpos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tpo { position: relative; cursor: pointer; }
.tpo input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tpo span { display: flex; flex-direction: column; gap: 3px; padding: 13px 14px; border-radius: 14px; background: var(--raised); box-shadow: inset 0 0 0 1px rgba(var(--ln), .16); }
.tpo small { color: var(--muted, inherit); opacity: .75; font-size: 12.5px; }
.tpo input:checked + span { box-shadow: inset 0 0 0 2px rgba(var(--a-rgb), .9); background: rgba(var(--a-rgb), .12); }
.tpo input:focus-visible + span { outline: 2px solid rgba(var(--a-rgb), .9); outline-offset: 2px; }
.tact { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 18px; }
.chips.wk { margin-bottom: 14px; flex-wrap: wrap; }
.chips.wk small { opacity: .7; }
.tdia { padding: 14px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.tdh { display: flex; align-items: center; justify-content: space-between; }
.tdh h3 { margin: 0; font-size: 18px; }
.tdh .ib2 { color: var(--text); width: 38px; height: 38px; }
.tmc { border-radius: 14px; padding: 12px 14px; background: var(--raised); box-shadow: inset 0 0 0 1px rgba(var(--ln), .12); display: flex; flex-direction: column; gap: 8px; }
.tmt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tmb { display: flex; gap: 8px; flex: none; }
.tmb .ib2 { width: 38px; height: 38px; }
.tml { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tml li { display: flex; justify-content: space-between; gap: 12px; }
.tml a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.tml small { opacity: .65; flex: none; }
.macc { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.info-box.act { margin-bottom: 14px; }
.nbtn { align-self: flex-start; margin-top: 14px; }
.nota { padding: 16px 18px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.nota.res { opacity: .72; }
.nh { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.nh a { color: inherit; text-decoration: none; }
.nx { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.nf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.nfb { display: flex; gap: 8px; align-items: center; }
.nfb .ib2 { width: 38px; height: 38px; }
.sheet.cf { padding: 22px; gap: 16px; display: flex; flex-direction: column; max-height: none; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sbody h3 { margin: 18px 0 10px; }
.sbody .chips { flex-wrap: wrap; }
a.tool { text-decoration: none; }
/* PC y tablet: la foto ocupa todo el ancho del banner, sin deformarse, centrada también en vertical (se recorta por igual arriba y abajo; entera al tocarla) */
@media (min-width: 821px) {
  .hero.hp { aspect-ratio: auto; height: clamp(320px, 54vh, 580px); max-height: none; }
  .hero.hp::before { display: none; }
  .hero.hp .art img.ph { object-fit: cover; object-position: 50% 50%; }
}

.chips.avm { margin: 18px 0 20px; flex-wrap: wrap; }

.gen { display: flex; gap: 10px; align-items: center; }
.gen .inp { flex: 1; min-width: 0; }
.cred { margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 0 0 2px rgba(var(--a-rgb), .8); }
.cred p { margin: 0; line-height: 1.7; }
.cred code { font-size: 17px; padding: 2px 8px; border-radius: 8px; background: var(--raised); user-select: all; }
.nt form .lbl, .login form .lbl { margin-top: 2px; }
.tj { flex-wrap: wrap; }
.tjm { flex: 1 1 180px; }
.tjb { flex: 0 1 auto; min-width: 0; max-width: 100%; flex-wrap: wrap; }

/* App instalada en Android (pantalla completa): Chrome dibuja bajo la barra del sistema (atrás/inicio/recientes).
   Se pide viewport-fit=cover y se reserva ese alto con env(safe-area-inset-bottom): el menú de abajo sube,
   los paneles también, y el contenido deja hueco para que no quede nada escondido. En web normal el inset es 0. */
:root { --sab: env(safe-area-inset-bottom, 0px); }
@container app (max-width: 900px) {
  .bn { height: calc(76px + var(--sab)); padding-bottom: calc(10px + var(--sab)); }
  main { padding-bottom: calc(120px + var(--sab)); }
  .sheet { padding-bottom: calc(36px + var(--sab)); }
  .toast { bottom: calc(96px + var(--sab)); }
  .lb figcaption { margin-bottom: var(--sab); }
}

/* ---------- edición de recetas e ingredientes ---------- */
.edbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(var(--a-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--a-rgb), .5); font-size: 14px; line-height: 1.4; }
.edbar .ico { flex: none; }
.edf { display: flex; flex-direction: column; gap: 14px; }
.edf h2 { margin: 0; }
.edf .lbl { margin-top: 4px; }
.edf .lbl small { margin-left: 8px; font-weight: 400; }
.edf select.inp { appearance: auto; }
.inp.ta { min-height: 92px; resize: vertical; line-height: 1.45; font-family: inherit; }
.inp.ta.big { min-height: 180px; }
.edl { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: rgba(var(--ln), .05); box-shadow: inset 0 0 0 1px rgba(var(--ln), .12); }
.edl1 { display: flex; gap: 10px; align-items: center; }
.edl1 .inp { flex: 1; min-width: 0; }
.edl2 { display: grid; grid-template-columns: minmax(0, 1fr) 92px auto; gap: 10px; align-items: center; }
.edx { flex: none; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; }
.chk { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; line-height: 1.35; }
.chk input { width: 20px; height: 20px; flex: none; accent-color: rgb(var(--a-rgb, 245 165 36)); cursor: pointer; }
.hero .acts .ib.save, .acts2 .ib.save { background: rgba(var(--a-rgb), .95); color: #1a1208; }
.acts2 { margin-left: auto; display: flex; gap: 8px; align-self: flex-start; }
.tj .chk { margin: 12px 0 2px; }
@media (max-width: 520px) { .edl2 { grid-template-columns: minmax(0, 1fr) 84px; } .edl2 .chk { grid-column: 1 / -1; } }
.hero.he { aspect-ratio: auto; height: 200px; min-height: 0; }
.hero.he .art, .hero.he img.ph { height: 100%; }

/* aviso de versión nueva */
.upd { position: fixed; z-index: 300; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 14px; justify-content: space-between; padding: 12px 14px 12px 18px; border-radius: 18px; background: var(--surface, #1c1512); color: var(--text); box-shadow: 0 0 0 2px rgba(var(--a-rgb), .85), 0 18px 40px -12px rgba(0, 0, 0, .7); font-size: 14.5px; line-height: 1.35; }
.upd .btn { flex: none; }
.ver { text-align: center; margin: 4px 0 14px; }

/* fila de iniciales en Ingredientes */
.tabs.abc { gap: 4px; margin-top: 10px; }
.tabs.abc a { min-width: 40px; justify-content: center; padding: 0 6px; }
.abcb { display: none; }
@container app (max-width: 900px) {
  .abcb { display: inline-flex; margin-top: 12px; }
  .tabs.abc { display: none; flex-wrap: wrap; overflow: visible; gap: 8px; border-bottom: 0; margin-top: 12px; }
  .tabs.abc.open { display: flex; }
  .tabs.abc a { min-width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 12px; border: 1px solid var(--control); }
  .tabs.abc a.on { border-color: transparent; background: rgba(var(--a-rgb), .22); }
  .tabs.abc .on::after { display: none; }
}
.abcb[aria-expanded="true"] svg { transform: rotate(180deg); }

/* flechas redondas de las categorías */
.tabw { position: relative; }
.tabw .ta { position: absolute; top: 4px; z-index: 3; display: none; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--control); background: var(--card-bg, var(--ground)); color: var(--text); box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .5); cursor: pointer; }
.tabw .ta.l { left: -4px; }
.tabw .ta.l svg { transform: rotate(180deg); }
.tabw .ta.r { right: -4px; }
.tabw.hl .ta.l, .tabw.hr .ta.r { display: inline-flex; }
@media (hover: none) and (pointer: coarse) { .tabw .ta, .tabw.hl .ta.l, .tabw.hr .ta.r { display: none; } }   /* en pantallas táctiles se desliza con el dedo */

/* anticopia: sin selección, sin menú de mantener pulsado, sin arrastrar imágenes; se permite en campos, en la contraseña temporal y en modo edición */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, select, .cred, .cred code, body.edmode, body.edmode * { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img, svg, a { -webkit-user-drag: none; user-drag: none; }
img { pointer-events: auto; }
@media print { html, body { display: none !important; } }

/* desplegable de orden: regiones debajo, con scroll si son muchas */
.ddl { max-height: min(60dvh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.ddh { padding: 12px 14px 6px; font-size: 12.5px; font-weight: 600; color: var(--faint); }
.ddh:not(:first-child) { margin-top: 6px; border-top: 1px solid var(--rule); }

/* aviso: hay un orden o una región elegidos distintos de A-Z → halo de luz que GIRA alrededor del botón (se ve el movimiento siempre, también con «reducir animaciones» del móvil) */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ddb.filt { position: relative; isolation: isolate; box-shadow: 0 0 0 1px rgba(var(--a-rgb), .6), 0 0 14px 2px rgba(var(--a-rgb), .35); }
.ddb.filt::before, .ddb.filt::after { content: ""; position: absolute; z-index: -1; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0deg, transparent 150deg, rgba(var(--a-rgb), .25) 215deg, rgba(var(--a-rgb), 1) 300deg, #fff 345deg, transparent 360deg);
  animation: giraHalo 1.6s linear infinite; }
.ddb.filt::before { inset: -3px; padding: 3px; }
.ddb.filt::after { inset: -4px; padding: 4px; filter: blur(7px); opacity: .95; }
.ddb.filt::before, .ddb.filt::after { -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@keyframes giraHalo { to { --ang: 360deg; } }

/* pantalla de cocinar: «Mise en place» sobre la lista de ingredientes, separado del panel de elaboración */
.cook .top .mise { margin: 26px 0 0; font: 700 24px/1.2 var(--serif); }

/* edición: «Coste por ración» y su importe, separados */
.edf .li { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 10px 0 14px; }
.edf .li b { font-variant-numeric: tabular-nums; font-weight: 600; }

/* notas como post-its sujetos con chincheta roja: una encima de otra; deslizar o flechas para pasar */
.nsec { margin-top: 28px; }
.deck { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 520px; margin: 0 auto; }
.postits { position: relative; width: 100%; height: 250px; outline: none; touch-action: pan-y; user-select: none; }
.pit, .pit * { touch-action: pan-y; }
.postits:focus-visible { outline: 2px solid rgba(var(--a-rgb), .8); outline-offset: 8px; border-radius: 10px; }
.pit { position: absolute; inset: 14px 14px 6px; display: flex; flex-direction: column; gap: 8px; padding: 26px 20px 14px; border-radius: 4px 4px 14px 4px; color: #3a2f00;
  background: linear-gradient(180deg, #fff08a 0%, #ffe45c 100%); box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .4) inset;
  transform-origin: 50% 12%; transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .25s; will-change: transform; z-index: calc(20 - var(--k)); cursor: grab;
  transform: translate(calc(var(--k) * 7px), calc(var(--k) * 6px)) rotate(var(--r)); }
.pit[data-p="prev"] { transform: translateX(-130%) rotate(-14deg); opacity: 0; pointer-events: none; }
.pit[data-p="next"], .pit[data-p="far"] { pointer-events: none; }
.pit[data-p="far"] { opacity: 0; }
.pit:nth-child(even) { background: linear-gradient(180deg, #fff3a0 0%, #ffe970 100%); }
.pit .pt { font: 700 13px/1.2 var(--font); letter-spacing: .02em; color: #6b5800; }
.pit p { margin: 0; flex: 1; min-height: 0; overflow-y: auto; font: 500 17px/1.4 "Segoe Print", "Bradley Hand", "Comic Sans MS", var(--font); white-space: pre-wrap; overflow-wrap: anywhere; color: #3a2f00; }
.pit .pf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pit small { color: #6b5800; font-size: 12.5px; }
.pit .pdel { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(120, 90, 0, .14); color: #8a1c1c; cursor: pointer; }
.pin { position: absolute; top: -10px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #ff8a8a 0 12%, #e02424 38%, #8f0f0f 100%); box-shadow: 0 6px 8px -2px rgba(0, 0, 0, .55), 0 0 0 1px rgba(80, 0, 0, .35); }
.pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 3px; height: 7px; margin-left: -1.5px; background: linear-gradient(#999, #555); border-radius: 0 0 2px 2px; opacity: .0; }
.pctl { display: flex; align-items: center; gap: 14px; }
.pcnt { min-width: 64px; text-align: center; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ta2 { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--control); background: var(--card-bg, var(--ground)); color: var(--text); cursor: pointer; }
.ta2:not(.r) svg { transform: rotate(180deg); }
@media (hover: none) and (pointer: coarse) { .ta2 { display: none; } }
@media (prefers-reduced-motion: reduce) { .pit { transition: none; } }

/* Recordarme en este dispositivo */
.rec { display: flex; align-items: center; gap: 12px; margin: 18px 2px 20px; min-height: 44px; cursor: pointer; color: var(--text-2, inherit); }
.rec input { width: 22px; height: 22px; flex: none; accent-color: rgb(var(--a-rgb, 245 165 36)); cursor: pointer; }