:root {
  --bg: #fff6ec; --card: #ffffff; --text: #3b2a20; --muted: #8a7466; --line: #f0e0d0;
  --accent: #f26b3a; --accent-ink: #ffffff; --accent-soft: #ffe6d9; --danger: #d6453d;
  --today: #5aa469;
  --s-desayuno: #f6b73c; --s-comida: #f26b3a; --s-merienda: #e5688f; --s-cena: #6c7ae0; --s-otro: #3fa7a0;
  --p0: #e8743b; --p1: #5b7be0; --p2: #3f9b6a; --p3: #c553a8; --p4: #b8892a; --p5: #7a5fc4;
  --shadow: 0 2px 10px rgba(120, 70, 30, .10);
  --radius: 18px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:root[data-theme="dark"] {
  --bg: #1d1613; --card: #2a201b; --text: #f7ebe0; --muted: #b59f90; --line: #3d2f27;
  --accent: #ff8a5c; --accent-ink: #2a1408; --accent-soft: #46291d; --danger: #ff7a70; --today: #7bc78a;
  --shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1d1613; --card: #2a201b; --text: #f7ebe0; --muted: #b59f90; --line: #3d2f27;
    --accent: #ff8a5c; --accent-ink: #2a1408; --accent-soft: #46291d; --danger: #ff7a70; --today: #7bc78a;
    --shadow: 0 2px 10px rgba(0, 0, 0, .35);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.4; min-height: 100vh; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Auth */
.auth { max-width: 420px; margin: 0 auto; padding: 32px 16px calc(32px + env(safe-area-inset-bottom)); }
.brand { text-align: center; margin-bottom: 20px; }
.brand .logo { font-size: 56px; line-height: 1; }
.brand h1 { margin: 8px 0 2px; font-size: 1.8rem; }
.brand p { margin: 0; color: var(--muted); }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--accent-soft); padding: 5px; border-radius: 14px; margin-bottom: 16px; }
.tabs button { border: 0; background: transparent; padding: 10px; border-radius: 10px; font-weight: 600; color: var(--muted); }
.tabs button[aria-selected="true"] { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
label { display: block; font-weight: 600; font-size: .9rem; margin: 12px 0 4px; }
.hint { color: var(--muted); font-size: .85rem; margin: 4px 0 0; font-weight: 400; }
input, select, textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; padding: 12px 18px; font-weight: 700; background: var(--accent); color: var(--accent-ink); }
.btn.block { width: 100%; margin-top: 18px; }
.btn.ghost { background: var(--accent-soft); color: var(--text); }
.btn.danger { background: transparent; color: var(--danger); border: 2px solid var(--danger); }
.btn:disabled { opacity: .6; cursor: wait; }
.error { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); border-radius: 12px; padding: 10px 12px; margin-top: 14px; font-weight: 600; }
.error:empty { display: none; }

/* Cabecera */
.topbar { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: calc(10px + env(safe-area-inset-top)) 16px 10px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.topbar .title { font-weight: 800; font-size: 1.15rem; flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.iconbtn { border: 0; background: var(--card); box-shadow: var(--shadow); border-radius: 12px; width: 42px; height: 42px; display: inline-grid; place-items: center; }
.main { max-width: 1100px; margin: 0 auto; padding: 14px 16px 24px; }
.content { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.invite { display: flex; align-items: center; gap: 10px; background: var(--accent-soft); border-radius: 14px; padding: 10px 14px; margin-bottom: 14px; flex-wrap: wrap; }
.invite code { font-weight: 800; letter-spacing: .12em; font-size: 1.05rem; }
.invite small { color: var(--muted); flex: 1 1 200px; }
.weeknav { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.weeknav .label { flex: 1; text-align: center; font-weight: 800; }
.weeknav .label small { display: block; font-weight: 500; color: var(--muted); }

/* Semana */
.week { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.day { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; border: 2px solid transparent; }
.day.today { border-color: var(--today); }
.day h2 { margin: 0 0 8px; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; text-transform: capitalize; }
.badge { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; background: var(--today); color: #fff; padding: 2px 8px; border-radius: 99px; }
.slot { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: start; padding: 8px 0; border-top: 1px dashed var(--line); }
.slot:first-of-type { border-top: 0; }
.slot-ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 1.1rem; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); }
.slot-name { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; padding-top: 2px; }
.slot-body { min-width: 0; }
.chips { display: flex; flex-direction: column; gap: 5px; margin-top: 3px; }
.chip { text-align: left; border: 0; background: color-mix(in srgb, var(--c) 14%, transparent); border-radius: 12px; padding: 8px 10px; display: flex; gap: 8px; align-items: flex-start; width: 100%; overflow-wrap: anywhere; }
.chip .e { font-size: 1.2rem; line-height: 1.2; }
.empty { color: var(--muted); font-size: .9rem; padding: 4px 0; }
.addbtn { border: 2px dashed var(--line); background: transparent; color: var(--muted); width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; }
.addbtn:hover { border-color: var(--accent); color: var(--accent); }

/* Diálogo */
dialog { border: 0; border-radius: 22px; padding: 0; width: min(440px, calc(100vw - 24px)); background: var(--card); color: var(--text); box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
dialog::backdrop { background: rgba(30, 15, 5, .5); }
dialog form { padding: 20px; }
dialog h3 { margin: 0 0 4px; }
.emojis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.emojis button { border: 2px solid var(--line); background: var(--bg); border-radius: 10px; width: 40px; height: 40px; font-size: 1.3rem; }
.emojis button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px; }
.actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.actions .grow { flex: 1; }
.toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 99px; font-weight: 600; z-index: 20; }
.loading { text-align: center; color: var(--muted); padding: 40px 0; font-size: 2rem; }
@media (prefers-reduced-motion: no-preference) { .chip, .btn, .addbtn { transition: transform .1s; } .chip:active, .btn:active { transform: scale(.98); } }

/* Navegación inferior */
.bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--card); border-top: 1px solid var(--line); padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(120, 70, 30, .08); }
.bottomnav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 14px; text-decoration: none; color: var(--muted); font-size: .75rem; font-weight: 700; }
.bottomnav a .icon { width: 1.5rem; height: 1.5rem; }
.bottomnav a.on { color: var(--accent); background: var(--accent-soft); }
@media (min-width: 700px) { .bottomnav { max-width: 520px; margin: 0 auto; left: 50%; right: auto; width: 100%; transform: translateX(-50%); border-radius: 20px 20px 0 0; border: 1px solid var(--line); } }

.cap { display: inline-block; }
.cap::first-letter { text-transform: uppercase; }
.seg { max-width: 220px; margin: 0 0 14px auto; }
.seg button { min-height: 40px; }
.ghostbtn { border: 0; background: transparent; color: var(--muted); width: 38px; height: 38px; border-radius: 10px; display: inline-grid; place-items: center; flex: none; }
.ghostbtn:hover { color: var(--danger); background: var(--accent-soft); }
.btn.small { padding: 6px 12px; font-size: .8rem; margin-left: auto; border-radius: 99px; }

/* Lo que como */
.logslots { display: grid; gap: 12px; max-width: 640px; margin: 0 auto; }
.logslot { padding: 12px 14px; border-left: 5px solid var(--c); }
.logslot-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.logslot-head h2 { margin: 0; flex: 1; font-size: 1rem; }
.logslot .empty { padding: 4px 0 6px 44px; }
.logitem, .fromMenu { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); width: 100%; text-align: left; }
.logitem .txt, .fromMenu .txt, .shopitem .txt { display: flex; flex-direction: column; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.logitem small, .fromMenu small, .shopitem small { color: var(--muted); font-size: .75rem; font-weight: 600; }
.logitem.mine small { color: var(--p); }
.logitem .e, .fromMenu .e { font-size: 1.35rem; width: 1.6rem; text-align: center; flex: none; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--p); color: #fff; font-weight: 800; font-size: .85rem; display: inline-grid; place-items: center; flex: none; }
.fromMenu { background: transparent; border: 0; border-top: 1px dashed var(--line); color: var(--text); padding: 10px 0; }
.fromMenu > .icon, .fromMenu > span:first-child { color: var(--today); }
.fromMenu small { color: var(--today); }
.fromMenu:disabled { opacity: .5; }

/* Compra */
.addform { max-width: 640px; margin: 0 auto 12px; padding: 12px; display: grid; gap: 8px; }
.addrow { display: flex; gap: 8px; }
.addrow input { flex: 1; min-width: 0; }
.addrow2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px; }
.addrow2 select { padding-left: 10px; padding-right: 6px; text-overflow: ellipsis; }
.addform .btn { padding: 0 16px; border-radius: 12px; }
.shoplist { display: grid; gap: 12px; max-width: 640px; margin: 0 auto; }
.shopgroup { padding: 8px 14px 6px; }
.shopgroup h2 { display: flex; align-items: center; gap: 8px; font-size: .95rem; margin: 6px 0; }
.shopgroup .count { font-size: .75rem; background: var(--accent-soft); color: var(--muted); border-radius: 99px; padding: 1px 8px; font-weight: 700; }
.shopgroup.doneg .count { margin-right: 0; }
.shopitem { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px dashed var(--line); min-height: 52px; }
.shopitem .check { width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid var(--accent); background: transparent; color: var(--accent-ink); display: inline-grid; place-items: center; flex: none; padding: 0; }
.shopitem.done .check { background: var(--today); border-color: var(--today); }
.shopitem .nm { font-weight: 600; }
.shopitem .qty { margin-left: 8px; color: var(--muted); font-weight: 600; font-size: .85rem; background: var(--bg); padding: 1px 8px; border-radius: 99px; }
.shopitem.done .nm { text-decoration: line-through; }
.shopitem.done { opacity: .6; }
.doneg { background: transparent; box-shadow: none; border: 2px dashed var(--line); }
.emptystate { text-align: center; color: var(--muted); padding: 30px 10px; }
.emptystate .big { font-size: 3rem; }

/* Sensación tras comer (privada) */
.logentry { border-top: 1px dashed var(--line); }
.logentry > .logitem { border-top: 0; }
.feel { padding: 0 0 10px 40px; }
.feel-q { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.feel-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.feel-btn { min-height: 54px; border: 2px solid var(--line); background: var(--bg); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-weight: 700; font-size: .85rem; padding: 4px; }
.feel-btn .e { font-size: 1.35rem; line-height: 1.1; }
.feel-btn.bien { --f: var(--today); }
.feel-btn.regular { --f: var(--s-desayuno); }
.feel-btn.mal { --f: var(--danger); }
.feel-btn[aria-pressed="true"] { border-color: var(--f); background: color-mix(in srgb, var(--f) 20%, var(--card)); }
.feel-levels:has([aria-pressed="true"]) .feel-btn[aria-pressed="false"] { opacity: .65; }
.feel-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 6px; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.linkbtn { border: 0; background: none; color: var(--accent); font-weight: 700; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; font-size: .85rem; }
.feel-details { margin-top: 8px; display: grid; gap: 8px; }
.feel-details textarea { resize: vertical; min-height: 60px; padding: 10px 12px; }
.feel-details .error { margin-top: 0; }
.feel-details .actions { margin-top: 0; gap: 6px; }
.btn.small-h { padding: 9px 14px; }
.toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.toggles button { border: 2px solid var(--line); background: var(--bg); border-radius: 99px; padding: 7px 12px; font-size: .85rem; font-weight: 600; min-height: 38px; }
.toggles button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.toggles button[aria-pressed="true"]::before { content: "✓ "; }

/* Etiquetas de dieta */
.dtags { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 1px; }
.dtag { --t: var(--today); display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 700; line-height: 1.2; padding: 2px 8px 2px 6px; border-radius: 99px; background: color-mix(in srgb, var(--t) 18%, transparent); color: var(--text); white-space: nowrap; }
.dtag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--t); }
.dtag.baja-histamina, .dt-baja-histamina { --t: var(--s-cena); }
.dtag.bajo-fodmap, .dt-bajo-fodmap { --t: var(--today); }
.chip .ctxt { display: flex; flex-direction: column; min-width: 0; }
.field { margin: 12px 0 4px; }
.flabel { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.dietfilter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.dietfilter button { border: 2px solid var(--line); background: var(--card); box-shadow: var(--shadow); border-radius: 99px; padding: 8px 14px; font-size: .85rem; font-weight: 700; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.dietfilter button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--t); }
.dietfilter button[aria-pressed="true"] { border-color: var(--t); background: color-mix(in srgb, var(--t) 20%, var(--card)); }
.dietfilter button[aria-pressed="true"]::before { content: "✓"; width: auto; height: auto; background: none; color: var(--t); font-weight: 900; }
.filterinfo { color: var(--muted); font-size: .85rem; margin: -4px 0 10px; }
.filterinfo:empty { display: none; }
.toggles button[class^="dt-"][aria-pressed="true"] { border-color: var(--t); background: color-mix(in srgb, var(--t) 20%, var(--card)); }