/* Diabeticarbs · cada ración de 10 g se dibuja como una ficha azafrán */
:root{
  --bg:#F3F6F4; --surface:#FFFFFF; --ink:#10302A; --muted:#5B6F69; --line:#DCE4E0;
  --accent:#0F5C4C; --accent-ink:#FFFFFF; --token:#E3A41C; --token-empty:#F1E6CB; --chip:#E6EEEA; --warn:#8A5A00; --warn-bg:#FFF4D9;
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"Figtree","Segoe UI",system-ui,sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--f-body)}
a{color:var(--accent)}
.wrap{max-width:1120px;margin:0 auto;padding-block:calc(20px + env(safe-area-inset-top,0px)) 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:grid;gap:20px}
.top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px}
.brand{font:800 28px/1 var(--f-display);letter-spacing:-.02em;margin:0;color:var(--ink);text-decoration:none}
.brand span{color:var(--token)}
.tag{color:var(--muted);margin:4px 0 0}
.rule{font:500 12px/1 var(--f-num);color:var(--accent);background:var(--chip);border-radius:999px;padding:6px 10px;white-space:nowrap}
.crumbs{font-size:13px;color:var(--muted)}
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:start}
@media (max-width:820px){.grid{grid-template-columns:minmax(0,1fr)}}
.col{display:grid;gap:20px;min-width:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:14px;min-width:0}
h2{font:600 13px/1.2 var(--f-body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0}

.searchrow{display:flex;gap:8px}
.search{position:relative;flex:1}
.search input,.ean input{width:100%;font:500 17px var(--f-body);color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:13px 14px 13px 42px}
.search input:focus,.ean input:focus{outline:none;border-color:var(--accent)}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--muted)}
.iconbtn{flex:none;width:50px;border:1.5px solid var(--line);background:var(--bg);border-radius:12px;cursor:pointer;color:var(--ink);display:grid;place-items:center}
.iconbtn svg{width:22px;height:22px;stroke:currentColor}
.ean{display:grid;gap:8px;background:var(--bg);border-radius:12px;padding:12px}
.ean form{display:flex;gap:8px}
.ean input{padding-left:14px;font-family:var(--f-num)}
.ean video{width:100%;max-height:260px;border-radius:10px;background:#000;object-fit:cover}
.ean .msg{font-size:13.5px;color:var(--muted);margin:0}
.groups{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line);padding-bottom:10px}
.chips,.presets{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:500 14px var(--f-body);border:0;background:var(--chip);color:var(--ink);padding:9px 14px;min-height:40px;border-radius:999px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.tab{font:600 13px var(--f-body);border:0;background:none;color:var(--muted);padding:6px 4px;cursor:pointer;border-bottom:2px solid transparent}
.tab[aria-pressed="true"]{color:var(--ink);border-color:var(--accent)}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--token);outline-offset:2px}

.list{list-style:none;margin:0;padding:0;display:grid;max-height:560px;overflow:auto}
.list li button{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:11px 6px;cursor:pointer;color:var(--ink);font:inherit}
.list li:first-child button{border-top:0}
.list li button:hover{background:var(--chip)}
.list li button[aria-current="true"]{background:var(--chip);box-shadow:inset 3px 0 0 var(--accent)}
.it-name{font-weight:600}
.it-sub{grid-column:1;color:var(--muted);font-size:13px}
.it-r{grid-row:1/3;grid-column:2;align-self:center;text-align:right;font:500 15px var(--f-num)}
.it-r small{display:block;font:400 11px var(--f-body);color:var(--muted)}
.empty{color:var(--muted);padding:12px 6px}

.ficha-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:baseline}
.ficha h1,.ficha h3{font:800 26px/1.1 var(--f-display);letter-spacing:-.01em;margin:0;text-wrap:balance}
.cat{font-size:13px;color:var(--muted)}
.big{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:flex-end}
.big .n{font:800 56px/.9 var(--f-display);letter-spacing:-.03em}
.big .n small{font:600 16px var(--f-body);letter-spacing:0;color:var(--muted);margin-left:4px}
.big .g{font:500 15px var(--f-num);color:var(--muted)}
.tokens{display:flex;flex-wrap:wrap;gap:5px;min-height:22px}
.tok{width:22px;height:22px;border-radius:6px;background:linear-gradient(90deg,var(--token) var(--p),var(--token-empty) var(--p))}
.porcion{display:grid;gap:8px}
.porcion-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.porcion input[type=range]{flex:1 1 200px;accent-color:var(--accent)}
.gram{display:flex;align-items:center;gap:6px;font:500 15px var(--f-num)}
.gram input{width:84px;font:500 15px var(--f-num);color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:8px;padding:6px 8px;text-align:right}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0}
.facts div{background:var(--bg);border-radius:10px;padding:10px 12px}
.facts dt{font-size:12px;color:var(--muted)}
.facts dd{margin:2px 0 0;font:500 18px var(--f-num)}
.src{font-size:12.5px;color:var(--muted);margin:0}
.note{font-size:13px;color:var(--warn);background:var(--warn-bg);border-radius:8px;padding:8px 10px;margin:0}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{font:600 16px var(--f-body);min-height:48px;background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:11px 16px;cursor:pointer;text-decoration:none;display:inline-block}
.btn.ghost{background:none;color:var(--accent);padding:6px 0}

.plato ul{list-style:none;margin:0;padding:0;display:grid}
.plato li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.plato li:first-child{border-top:0}
.plato .q{font:500 14px var(--f-num);text-align:right}
.plato .x{background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:6px}
.plato .x:hover{background:var(--chip);color:var(--ink)}
.total{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;border-top:2px solid var(--ink);padding-top:12px}
.total .n{font:800 34px/1 var(--f-display)}
.total .g{font:500 14px var(--f-num);color:var(--muted)}
.legal{font-size:12.5px;color:var(--muted);display:grid;gap:6px;max-width:80ch}
.legal p{margin:0}
.doc{max-width:72ch}
.doc h1{font:800 32px/1.1 var(--f-display);margin:0 0 8px}
.doc h2{margin-top:18px}
@media (prefers-reduced-motion:no-preference){.tok{transition:background .2s}}

/* ---------- portada simplificada ---------- */
body.home .wrap{padding-bottom:110px}
body.lock{overflow:hidden}
.hero{display:grid;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px}
.hero h1{font:800 clamp(24px,4.5vw,34px)/1.1 var(--f-display);letter-spacing:-.02em;margin:0;text-wrap:balance}
.hero .searchrow{flex-wrap:wrap}
.hero .search{flex:1 1 280px}
.hero .search input{font-size:18px;padding:16px 16px 16px 46px;border-radius:14px}
.scanbtn{flex:0 0 auto;display:flex;align-items:center;gap:8px;font:600 16px var(--f-body);color:var(--accent-ink);background:var(--accent);border:0;border-radius:14px;padding:0 18px;min-height:56px;cursor:pointer}
.scanbtn svg{width:24px;height:24px;stroke:currentColor}
.ean{background:var(--bg);border-radius:14px;padding:14px;gap:10px}
.ean form{flex-wrap:wrap}
.ean input{flex:1 1 200px;font-size:17px;padding:12px 14px}
.btn.big{font-size:17px;min-height:54px;padding:12px 20px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:14.5px}
.steps li{display:flex;align-items:center;gap:8px}
.steps b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--token);color:#3B2A00;font:700 13px var(--f-body)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:start}
.results{display:grid;gap:12px;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px}
.resbar{display:flex;justify-content:space-between;align-items:center;gap:10px}
.resbar h2{text-transform:none;letter-spacing:0;font:700 17px var(--f-body);color:var(--ink)}
.linkbtn{font:600 15px var(--f-body);color:var(--accent);background:none;border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer}
.filters{display:grid;gap:10px;background:var(--bg);border-radius:12px;padding:12px}
.chip.big{font-size:16px;padding:11px 18px;min-height:46px}
.list li button{padding:14px 8px}
.it-name{font-size:16px}
.sheet{position:sticky;top:16px;min-width:0}
.sheet-bar{display:none}
.placeholder{display:grid;gap:6px;padding:20px 4px;text-align:center;color:var(--muted)}
.placeholder h3{font:700 20px var(--f-body);color:var(--ink)}
.back{font:600 16px var(--f-body);color:var(--accent);background:none;border:0;padding:10px 4px;cursor:pointer;min-height:44px}
.platebar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:14px;
  width:min(560px,calc(100% - 32px));padding:12px 14px 12px 20px;border:0;border-radius:16px;background:var(--ink);color:#fff;font:600 16px var(--f-body);cursor:pointer;box-shadow:0 8px 24px rgba(16,48,42,.25)}
.platebar .pb-n{margin-left:auto;font-family:var(--f-num)}
.platebar .pb-n b{font:800 22px var(--f-display);color:var(--token);margin-right:4px}
.platebar .pb-go{background:rgba(255,255,255,.14);border-radius:10px;padding:8px 12px;font-size:14px}
.overlay{position:fixed;inset:0;z-index:40;background:rgba(16,48,42,.45);display:grid;align-items:end;justify-items:center;padding:16px}
.overlay[hidden]{display:none}
.overlay .plato{width:min(560px,100%);max-height:80vh;overflow:auto;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.sheet-head{display:flex;justify-content:space-between;align-items:center}
.sheet-head h2{text-transform:none;letter-spacing:0;font:800 22px var(--f-display);color:var(--ink)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:50;background:var(--accent);color:var(--accent-ink);font:600 15px var(--f-body);padding:12px 18px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.18);max-width:calc(100% - 32px)}
@media (max-width:899px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .sheet{position:fixed;inset:0;z-index:35;background:var(--bg);overflow:auto;padding:0 max(16px,env(safe-area-inset-right,0px)) 120px max(16px,env(safe-area-inset-left,0px));display:none}
  .sheet.open{display:block}
  .sheet-bar{display:block;position:sticky;top:0;background:var(--bg);padding-top:calc(8px + env(safe-area-inset-top,0px));z-index:1}
  .sheet .ficha{border-radius:16px}
  .list{max-height:none}
  .hero{padding:18px}
}

.ask{margin:4px 0 0;font:700 17px var(--f-body);color:var(--ink)}
.porcion{background:var(--warn-bg);border-radius:14px;padding:12px 14px}
.porcion .add{width:100%;margin-top:4px}
.range{margin:0;font-size:14.5px;color:var(--muted)}
.variants{border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.variants summary{cursor:pointer;font-weight:600;color:var(--accent);min-height:32px;display:flex;align-items:center}
.variants ul{list-style:none;margin:8px 0 0;padding:0;display:grid}
.variants li button{width:100%;display:flex;justify-content:space-between;gap:12px;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:10px 2px;font:inherit;color:var(--ink);cursor:pointer}
.variants li:first-child button{border-top:0}
.variants .q{font-family:var(--f-num);white-space:nowrap}
.vstatic li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.vstatic li:first-child{border-top:0}

/* iconos */
:root{--t-w-bg:#FBEBD0;--t-w-fg:#9A5B00;--t-g-bg:#DDF0E1;--t-g-fg:#24734A;--t-b-bg:#DFEBF7;--t-b-fg:#2C5F94;--t-r-bg:#FBE1DA;--t-r-fg:#B2442B;--t-c-bg:#EEE2D8;--t-c-fg:#6E4128;--t-o-bg:#FDE6CF;--t-o-fg:#B4580B;--t-n-bg:#E6EEEA;--t-n-fg:#0F5C4C}
.ico{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px}
.ico svg{width:60%;height:60%}
.ico.big{width:56px;height:56px;border-radius:14px}
.ico.sm{width:30px;height:30px;border-radius:8px}
.t-w{background:var(--t-w-bg);color:var(--t-w-fg)}.t-g{background:var(--t-g-bg);color:var(--t-g-fg)}.t-b{background:var(--t-b-bg);color:var(--t-b-fg)}
.t-r{background:var(--t-r-bg);color:var(--t-r-fg)}.t-c{background:var(--t-c-bg);color:var(--t-c-fg)}.t-o{background:var(--t-o-bg);color:var(--t-o-fg)}.t-n{background:var(--t-n-bg);color:var(--t-n-fg)}
.list li button{grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px;align-items:center}
.list li button .it-ico{grid-row:1/3;grid-column:1}
.list li button .it-name{grid-column:2}
.list li button .it-sub{grid-column:2}
.list li button .it-r{grid-column:3}
.ficha-top{align-items:center;justify-content:flex-start;gap:12px}
.ficha-top h3,.ficha-top h1{flex:1 1 200px}
.ficha-top .cat{flex-basis:100%}
.plato li{grid-template-columns:auto minmax(0,1fr) auto auto}

.search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.search input{padding-right:48px}
.hero .search input{padding-right:52px}
.qclear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:50%;background:var(--line);color:var(--ink);font:600 22px/1 var(--f-body);cursor:pointer;display:grid;place-items:center;padding:0}
.qclear:hover{background:var(--muted);color:#fff}