/* Bocado — app móvil de una columna: cabecera con marca, contenido por pestañas y barra de pestañas fija abajo */
:root{
  --bg:#0b0b0c; --card:#17171a; --fg:#f2f2f3; --muted:#a1a1aa; --line:#2a2a2f;
  --accent:#ef4444; --accent-strong:#f87171; --accent-soft:#3b1416; --on-accent:#0b0b0c;
  --m-p:#a78bfa; --m-h:#38bdf8; --m-g:#34d399; --gold:#facc15;
  --burn:#ef4444; --burn-strong:#f87171; --burn-soft:#3b1416; --net:#f2f2f3; --prot:#a78bfa;
  /* fuera de objetivo y exceso: ámbar, para no confundirlo con el rojo de la marca */
  --warn:#fb923c; --warn-strong:#fb923c; --warn-soft:#3a2210; --over:#fbbf24; --good:#34d399;
  color-scheme:dark;
  --display:"Unbounded",ui-rounded,system-ui,sans-serif;
  --body:"Figtree",ui-sans-serif,system-ui,sans-serif;
  --mono:"Figtree",ui-sans-serif,system-ui,sans-serif;
  --bar-h:64px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.45;-webkit-tap-highlight-color:transparent}
.wrap{max-width:560px;margin:0 auto;
  padding-top:12px;padding-bottom:calc(var(--bar-h) + 32px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:flex;flex-direction:column;gap:14px}
.tabview{display:flex;flex-direction:column;gap:14px}
h2{font-family:var(--display);font-weight:700;font-size:1rem;margin:0;letter-spacing:-.01em}
.label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:16px}

/* Cabecera de marca */
.brand{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:4px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.03em}
.logo svg{width:34px;height:34px;flex:none}
.brand .sub{font-size:.8rem;color:var(--muted);text-align:right;line-height:1.25}

/* Barra de pestañas inferior */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--card);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
.tabbar nav{max-width:560px;margin:0 auto;display:flex;height:var(--bar-h)}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:var(--muted);font:inherit;font-size:.74rem;font-weight:600;cursor:pointer;position:relative}
.tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabbar button[aria-selected="true"]{color:var(--accent-strong)}
.tabbar button[aria-selected="true"]::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}

/* Segmentos */
.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:4px;gap:4px}
.seg button{flex:1;font:inherit;font-weight:700;border:0;background:transparent;color:var(--muted);min-height:44px;border-radius:12px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent-strong);color:var(--on-accent)}
.seg button.ex[aria-pressed="true"]{background:var(--burn-strong);color:var(--on-accent)}

/* Navegación de días */
.daynav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.daynav .lbl{font:inherit;font-family:var(--display);font-weight:700;font-size:1rem;background:none;border:0;color:var(--fg);cursor:pointer;padding:8px;border-radius:10px;min-height:44px}
.iconbtn{font:inherit;font-size:1.3rem;width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer}
.iconbtn:disabled{visibility:hidden}

/* Resumen */
.summary{display:flex;flex-direction:column;align-items:center;gap:14px}
.ring{position:relative;width:min(200px,62vw);aspect-ratio:1;max-width:100%}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ring .big{font-family:var(--display);font-weight:800;font-size:2.3rem;line-height:1;letter-spacing:-.03em}
.ring .small{font-size:.78rem;color:var(--muted);margin-top:6px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
.stat{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--bg);border-radius:14px;padding:10px 4px;min-width:0}
.stat b{font-family:var(--display);font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums}
.stat .label{font-size:.64rem;letter-spacing:.05em;white-space:nowrap}
.dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:0}
.goalrow{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;font:inherit;font-size:.88rem;color:var(--muted);background:none;border:0;cursor:pointer;padding:6px 10px;border-radius:10px;min-height:40px;text-align:center}
.goalrow b{color:var(--accent-strong)}
.plan{display:flex;flex-direction:column;gap:12px}
.planres{background:var(--bg);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.planres .eq{display:flex;justify-content:space-between;gap:8px;font-size:.92rem;font-variant-numeric:tabular-nums}
.planres .eq span:last-child{white-space:nowrap}
.planres .tot{border-top:1px solid var(--line);padding-top:8px;margin-top:2px;font-weight:700}
.planres .tot b{font-family:var(--display);font-size:1.25rem;color:var(--accent-strong)}
.health summary{font-weight:700;min-height:28px;display:flex;align-items:center;cursor:pointer}
.hb{display:flex;flex-direction:column;gap:10px;padding-top:10px;font-size:.9rem}
.hb p{margin:0}
.urlrow{display:flex;gap:8px;align-items:center;background:var(--bg);border-radius:12px;padding:8px 8px 8px 12px}
.urlrow code{flex:1;min-width:0;overflow-wrap:anywhere;font-size:.8rem;user-select:all}
.hb code{font-size:.8rem}
#bmr summary{font-weight:700;font-size:.92rem;min-height:40px;display:flex;align-items:center;cursor:pointer}
#bmr .row,#bmr .field{margin-bottom:10px}
.bmrres{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}
.bmrres b{font-family:var(--display);color:var(--fg);font-size:1.1rem}
.goal-in{width:92px;font:inherit;font-size:16px;font-weight:700;text-align:center;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:6px 8px}

/* Macros y micros */
.macros{display:flex;flex-direction:column;gap:12px}
.mac-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mac-h .muted{font-size:.8rem}
.macbar{display:flex;gap:2px;height:12px;border-radius:6px;overflow:hidden}
.macbar span{min-width:2px}
.macs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.macs > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.macs b{font-family:var(--display);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums}
.macs .muted{font-size:.8rem}
.macros details summary{font-weight:700;font-size:.92rem;min-height:36px;display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;border-top:1px solid var(--line);padding-top:10px}
.macros details summary::-webkit-details-marker{display:none}
.macros details summary::after{content:"▾";color:var(--muted);transition:transform .2s}
.macros details[open] summary::after{transform:rotate(180deg)}
.micros{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.mi-t{display:flex;justify-content:space-between;gap:8px;font-size:.9rem}
.mi-t .muted{font-size:.8rem}
.mb{height:6px;border-radius:3px;background:var(--bg);overflow:hidden;margin-top:4px}
.mb span{display:block;height:100%;border-radius:3px}
.note{font-size:.78rem;margin:10px 0 0}

.wrow{display:flex;gap:8px;align-items:center}
.wrow input{flex:1;min-width:0}
form.wrow{flex-direction:row}
.protgoal{display:flex;flex-direction:column;gap:2px;font:inherit;font-size:.9rem;background:none;border:0;padding:0;text-align:left;color:inherit}
button.protgoal{color:var(--muted);cursor:pointer;min-height:36px}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cgrid label{display:flex;flex-direction:column;gap:3px;min-width:0}
.cgrid input{padding:8px;min-height:42px}

.wq{padding:14px 16px}
.wq-row{display:flex;align-items:center;gap:10px}
.wq-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.wq-val{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em}
.wq-sub{font-size:.8rem}
.wq-spark{background:none;border:0;padding:0;width:100px;height:34px;cursor:pointer;flex:none}
.wq-spark svg{width:100%;height:100%;display:block}
.wq-edit{display:flex;flex-direction:column;gap:8px}
.wq-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.stepper{flex:1;display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:4px;min-width:0}
.stepper button{flex:none;width:44px;height:44px;border-radius:11px;border:0;background:var(--card);color:var(--fg);font-size:1.4rem;font-weight:700;cursor:pointer;touch-action:manipulation;user-select:none}
.stepper input{flex:1;min-width:0;border:0;background:transparent;text-align:center;font-family:var(--display);font-weight:800;font-size:1.3rem;padding:0;min-height:44px}
.stepper input:focus-visible{outline:none}
.stepper:focus-within{outline:2px solid var(--accent);outline-offset:1px}
#wqSave{min-height:54px;padding:8px 18px}

/* Asistente de inicio */
.ob{position:fixed;inset:0;z-index:40;background:var(--bg);overflow-y:auto;
  padding-top:max(20px,env(safe-area-inset-top,0px));padding-bottom:max(20px,env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.ob-card{max-width:480px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;gap:18px}
.ob-logo{font-size:1.2rem}
.ob-logo svg{width:30px;height:30px}
.ob-dots{display:flex;gap:6px}
.ob-dots span{flex:1;height:4px;border-radius:2px;background:var(--line)}
.ob-dots span.on,.ob-dots span.done{background:var(--accent)}
.ob-body{display:flex;flex-direction:column;gap:14px;flex:1}
.ob-body p{margin:0}
.ob-h{font-size:1.45rem;line-height:1.2;text-wrap:balance}
.ob-list{margin:0;padding-left:20px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;font:inherit;color:var(--fg);background:var(--card);border:2px solid var(--line);border-radius:16px;padding:14px 16px;cursor:pointer}
.opt span{font-size:.86rem;color:var(--muted)}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.ob-big{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px}
.ob-big b{font-family:var(--display);font-weight:800;font-size:2.2rem;letter-spacing:-.03em;color:var(--accent-strong)}
.ob-err{margin:0;color:var(--over);font-weight:600;min-height:1.2em}
.ob-nav{display:flex;gap:10px}
.ob-nav .btn{flex:1}
.ob-nav .btn:last-child{flex:2}

/* Escáner */
.scanrow{flex-wrap:nowrap}
.scanrow .btn{flex:1;min-width:0;padding-inline:10px;font-size:.92rem}
.scanov{position:fixed;inset:0;z-index:45;background:#000;color:#fff}
.scanov video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scanframe{position:absolute;left:12%;right:12%;top:38%;height:22%;border:3px solid #fff;border-radius:18px;box-shadow:0 0 0 100vmax rgb(0 0 0 / .45)}
.scanbar{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:16px max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.scanbar p{margin:0;font-weight:600;text-shadow:0 1px 4px #000}
.scanbar .btn{min-width:180px}

/* Foto con IA */
.linkbtn{font:inherit;font-size:.86rem;font-weight:600;background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;padding:4px;align-self:center;min-height:36px}
.aitext{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent-soft);color:var(--accent-strong);text-align:left}
.aitext svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.aitext span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-ico{width:64px;height:64px;border-radius:14px;flex:none;background:var(--accent-soft);color:var(--accent-strong);display:grid;place-items:center}
.ai-ico svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.aibtn{display:flex;align-items:center;justify-content:center;gap:8px;border-style:dashed;border-width:2px;color:var(--accent-strong)}
.aibtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.aipanel{display:flex;flex-direction:column;gap:12px}
.ai-head{display:flex;gap:12px;align-items:center}
.ai-head img{width:64px;height:64px;object-fit:cover;border-radius:14px;flex:none;background:var(--bg)}
.ai-head .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ai-head .t b{font-family:var(--display);font-size:.95rem}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;vertical-align:-2px;margin-right:6px}
@media (prefers-reduced-motion:no-preference){.spin{animation:sp 0.8s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}}
.ai-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ai-row{display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;align-items:center;background:var(--bg);border-radius:14px;padding:8px 10px}
.ai-row input[type=checkbox]{width:22px;height:22px;min-height:0;accent-color:var(--accent-strong)}
.ai-row .nm{min-width:0;overflow-wrap:anywhere;font-weight:600}
.ai-row .nm small{display:block;font-weight:400;color:var(--muted);font-size:.78rem}
.ai-row .gr{display:flex;align-items:center;gap:4px}
.ai-row .gr input{width:72px;min-height:40px;padding:6px 8px;text-align:right;background:var(--card)}
.ai-row.off{opacity:.45}
.ai-tot{display:flex;justify-content:space-between;font-weight:700}
.ai-tot b{font-family:var(--display);color:var(--accent-strong)}

/* Balance del día */
.bal{width:100%;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.bal-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pill{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.85rem;padding:6px 12px;border-radius:99px;background:var(--bg);color:var(--fg)}
.pill.def{background:var(--accent-soft)}
.pill.sup{background:color-mix(in srgb,var(--m-p) 18%,var(--card))}
.bal-link{white-space:nowrap;font:inherit;font-size:.85rem;font-weight:700;color:var(--accent-strong);background:none;border:0;padding:8px 0 8px 8px;cursor:pointer}
.bal-eq{display:grid;grid-template-columns:1fr auto 1fr auto 1.15fr;align-items:end;gap:4px;text-align:center}
.bal-eq > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.bal-eq b{font-family:var(--display);font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums}
.bal-eq .res{background:var(--bg);border-radius:12px;padding:6px 4px}
.bal-eq .res b{font-size:1.15rem}
.bal-eq .op{color:var(--muted);font-weight:700;padding-bottom:4px}
.bal-msg{margin:0;font-size:.9rem;text-align:center;color:var(--muted)}
.bal-msg b{color:var(--fg)}
.srcq{display:flex;flex-direction:column;gap:8px}
.goal-sum{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:32px}
.goal-sum::-webkit-details-marker{display:none}
.goal-sum::after{content:"▾";color:var(--muted)}
#goalBox[open] .goal-sum::after{transform:rotate(180deg)}
.goal-sum > span{display:flex;flex-direction:column}
.goal-sum .muted{font-size:.85rem}
.plan-body{padding-top:12px}
.wnote{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--accent-soft);border-radius:14px;padding:10px 12px;font-size:.88rem}

/* Progreso: leyenda, detalle, tablas */
.lg{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:600}
.legend{gap:8px 14px}
.dc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.dc-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;font-size:.88rem}
.dc-grid .r{display:flex;justify-content:space-between;gap:8px}
.dc-grid .r span{color:var(--muted)}
.daycard{align-items:flex-end}
.wq-due{border:2px solid var(--accent)}
.wq-due #wqHint{color:var(--accent-strong);font-weight:700}
.wk tr.wk-alert td{white-space:normal;color:var(--warn-strong);font-weight:600;font-family:var(--body);text-align:left}
.wk tr.wk-none td{color:var(--muted);font-style:italic}
.sttab td:nth-child(2){padding-right:10px}
.stbar{height:10px;border-radius:5px;background:var(--bg);overflow:hidden}
.stbar span{display:block;height:100%;border-radius:5px}

/* Botón de una función Pro aún no disponible */
.ibtn.pro{position:relative;opacity:.75}
.ibtn.pro::after{content:"PRO";position:absolute;top:-4px;right:-6px;font:800 .5rem/1 var(--body);letter-spacing:.04em;background:var(--accent);color:var(--on-accent);padding:2px 3px;border-radius:4px}
/* Repetir · Recetas · De ayer: etiqueta y chips en la misma línea (la mitad de alto) */
#recentWrap,#recipeWrap,#copyWrap{display:flex;align-items:center;gap:10px;min-width:0}
#recentWrap>.label,#recipeWrap>.label,#copyWrap>.label{flex:none;width:58px;margin:0}
#recentWrap>.chips,#recipeWrap>.chips,#copyWrap>.chips{flex:1;min-width:0}
#recipeWrap.none .chip{background:none;border:1px dashed var(--line);color:var(--muted)}
/* ===== Limpieza e interacción ===== */
.hdr-gap{flex:1}
.streak{display:inline-flex;align-items:center;gap:5px;font:inherit;font-weight:700;background:var(--burn-soft);color:var(--burn-strong);border:0;border-radius:99px;padding:7px 12px 7px 9px;cursor:pointer}
.streak svg{width:18px;height:18px;fill:var(--burn);stroke:none}
.streak b{font-family:var(--display);font-size:1rem}
.streak span{font-size:.8rem;font-weight:600}
.addcard{gap:12px}
.searchrow{display:flex;gap:8px;align-items:stretch}
.searchf{flex:1;position:relative}
.searchf input{padding-left:42px;min-height:52px;font-size:17px;border-radius:16px}
.sicon{position:absolute;left:13px;top:15px;width:22px;height:22px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.ibtn{flex:none;width:52px;height:52px;border-radius:16px;border:1px solid var(--line);background:var(--bg);color:var(--accent-strong);display:grid;place-items:center;cursor:pointer}
.ibtn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.addmore{display:flex;flex-direction:column;gap:12px}
.qtyrow input{font-size:18px;font-weight:700}
.mealchips{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px}
.mealchips::-webkit-scrollbar{display:none}
.mealchips button{flex:1 0 auto;font:inherit;font-size:.85rem;font-weight:600;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:12px;padding:9px 10px;cursor:pointer;white-space:nowrap}
.mealchips button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.quick{display:flex;flex-direction:column;gap:10px}
.quick .label{margin-bottom:6px}
.chips.hscroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.hscroll::-webkit-scrollbar{display:none}
.hscroll .chip{flex:none}
.rhead .btn{white-space:nowrap;flex:none}
.sheet-bottom .totals{grid-template-columns:repeat(4,1fr);padding:8px 4px;gap:4px}
.sheet-bottom .totals .label{font-size:.6rem}
.sheet-bottom .totals b{font-size:.95rem}
body.sheet-open .tabbar{display:none}
.rhead{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rhead p{margin:2px 0 0;font-size:.88rem}
.rcard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:12px 12px 12px 16px;display:flex;flex-direction:column;gap:10px}
.rrow{display:flex;align-items:center;gap:10px}
.rmain{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.rmain .rn{flex:1;min-width:0}
.rmain .rn b{display:block;font-family:var(--display);font-size:.98rem;font-weight:700;overflow-wrap:anywhere}
.rmain .rn small{color:var(--muted);font-size:.8rem}
.rk{text-align:right;flex:none}
.rk b{display:block;font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1}
.rk small{color:var(--muted);font-size:.72rem}
.radd{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--accent-strong);color:var(--on-accent);font-size:1.5rem;font-weight:700;cursor:pointer;line-height:1}
.mbar{display:flex;gap:2px;height:6px;border-radius:3px;overflow:hidden}
.rdet{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:10px;font-size:.88rem}
.sheet{position:fixed;inset:0;z-index:35;background:var(--bg);overflow-y:auto;display:flex;flex-direction:column;gap:12px;
  padding-top:max(12px,env(safe-area-inset-top,0px));padding-bottom:0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sheet > *{width:100%;max-width:560px;margin-left:auto;margin-right:auto}
.sheet-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;position:sticky;top:0;background:var(--bg);padding-block:6px;z-index:2}
.sheet-top h2{text-align:center}
.sheet-bottom{position:sticky;bottom:0;margin-top:auto;background:var(--bg);display:flex;flex-direction:column;gap:10px;padding-top:10px;padding-bottom:max(16px,env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.btn,.chip,.ibtn,.radd,.mealchips button,.seg button,.tabbar button,.streak{transition:transform .12s ease}
.btn:active,.chip:active,.ibtn:active,.radd:active,.mealchips button:active,.seg button:active,.streak:active{transform:scale(.95)}
.fx{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.burst{position:fixed;transform:translate(-50%,0);font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--accent-strong);text-shadow:0 2px 10px var(--card);white-space:nowrap}
.cf{position:fixed;width:9px;height:14px;border-radius:2px;opacity:0}
@media (prefers-reduced-motion:no-preference){
  .burst{animation:burst 1s ease-out forwards}
  @keyframes burst{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-60px) scale(1)}}
  .cf{animation:cf 1.3s cubic-bezier(.2,.7,.4,1) forwards}
  @keyframes cf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 60vh)) rotate(var(--r))}}
  .flash{animation:flash 1.2s ease-out}
  @keyframes flash{0%{background:var(--accent-soft)}100%{background:transparent}}
  .tabview.enter{animation:enter .22s ease-out}
  @keyframes enter{from{opacity:0;transform:translateY(6px)}}
  .ring.pop{animation:pop .4s ease-out}
  @keyframes pop{40%{transform:scale(1.04)}}
}

/* Aviso de la app propia: instalar / nueva versión */
/* Gasto: tarjetas y hoja inferior */
.gcard{padding:14px}
.gbig{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 2px 10px}
.gbig .label{display:block}
.gbig b{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.03em;color:var(--burn-strong)}
.gbig .eat{text-align:right}
.gbig .eat b{color:var(--accent-strong)}
.gtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gtile{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;font:inherit;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px;cursor:pointer;min-width:0;transition:transform .12s ease}
.gtile:active{transform:scale(.96)}
.gtile svg{width:26px;height:26px;fill:none;stroke:var(--burn-strong);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.gtile .gt-t{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.gtile b{font-family:var(--display);font-weight:700;font-size:1.05rem;overflow-wrap:anywhere}
.gtile b.add{color:var(--accent-strong)}
.gtile small{font-size:.74rem;color:var(--muted);line-height:1.25}
.gtile.off{opacity:.55}
.bs{position:fixed;inset:0;z-index:38}
.bs-back{position:absolute;inset:0;background:rgb(0 0 0 / .45)}
.bs-panel{position:absolute;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;background:var(--card);border-radius:24px 24px 0 0;max-height:88%;overflow-y:auto;
  padding:6px max(18px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px))}
.bs-top{display:flex;justify-content:center;position:relative;height:30px;align-items:center}
.bs-grab{width:40px;height:5px;border-radius:3px;background:var(--line)}
.bs-x{position:absolute;right:-6px;top:0;width:40px;height:40px;border:0;background:none;color:var(--muted);font-size:1.6rem;cursor:pointer}
.bsform{display:flex;flex-direction:column;gap:12px}
.bsform h2{font-size:1.2rem}
.bs-help{margin:0;font-size:.9rem}
.bsform input{font-size:20px;font-weight:700;min-height:56px}
@media (prefers-reduced-motion:no-preference){.bs-panel{animation:bsup .25s ease-out}@keyframes bsup{from{transform:translateY(40%);opacity:.5}}}


.chk{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;cursor:pointer}
.chk input{width:22px;height:22px;min-height:0;flex:none;margin-top:1px;accent-color:var(--accent-strong)}
.chk small{display:block}

.gtiles.two{grid-template-columns:1fr 1fr}

/* Actividad: un número protagonista y el desglose plegado */
.gbig1{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:4px 0 6px}
.gbig1 b{font-family:var(--display);font-weight:800;font-size:2.4rem;letter-spacing:-.03em;color:var(--accent-strong);line-height:1.1}
.gbig1 small{font-size:.88rem}
#planRes details.more>summary{text-align:center}
.gtile{position:relative}
.gtile::after{content:"›";position:absolute;top:8px;right:12px;color:var(--muted);font-size:1.1rem}
.gtile b small{font-size:.7em;font-weight:600;color:var(--muted)}
.gtile b{white-space:nowrap}
/* Gym */
.gview{display:flex;flex-direction:column;gap:14px}
.tiles.g2{grid-template-columns:1fr 1fr}
#gymView .tile .label{font-size:.75rem}
#gymWk,#gymPrN{color:var(--burn-strong)}
.gsets{display:flex;flex-direction:column;gap:8px}
.gset-h,.gset{display:grid;grid-template-columns:18px 1fr 1fr 34px;gap:5px;align-items:center}
.gset-h span{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center}
.gset > b{font-size:.85rem;color:var(--muted);text-align:center}
.gset .stepper{gap:2px;padding:3px}
.gset .stepper button{width:28px;height:40px;font-size:1.2rem}
.bsform .gset .stepper input{font-size:1rem;min-height:40px}
.gset .del{width:34px;height:40px}
.chip.b[aria-pressed="true"]{background:var(--burn-strong);color:var(--on-accent)}
.pr{font-style:normal;font-size:.66rem;font-weight:700;letter-spacing:.04em;background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold);padding:2px 7px;border-radius:99px;margin-left:6px}
.gname{display:flex;gap:6px;align-items:center}.gname input{flex:1;min-width:0}.gpick{display:flex;flex-direction:column;gap:10px}
.gbody{display:flex;flex-direction:column;gap:inherit}
#gymChips,#gymSS,#gymGrp{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
#gymGrp{position:sticky;top:env(safe-area-inset-top,0px);z-index:4;background:var(--bg);padding-block:6px;margin-block:-6px}
.grp-h{margin:12px 0 2px;font-size:.72rem}.grp-h:first-of-type{margin-top:4px}
#gymChips .chip,#gymSS .chip,#gymGrp .chip{flex:none;max-width:70vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ggrid .chip{border-radius:14px;min-height:48px;justify-content:center;text-align:center}
.glib{max-height:46vh;overflow:auto;overscroll-behavior:contain}
.glib li{grid-template-columns:1fr;min-height:48px}
.glib li.gback .name,.glib li.gnewli .name{font-weight:700;color:var(--burn-strong)}
.geq{font-size:.75rem;color:var(--muted);font-weight:400}
.gnew{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px dashed var(--line);border-radius:14px}
ul.list li.ss{box-shadow:inset 4px 0 0 var(--burn-strong)}
.ssb{font-style:normal;font-size:.68rem;font-weight:800;background:var(--burn-strong);color:var(--on-accent);padding:2px 6px;border-radius:6px;margin-right:6px}
.gymkc{display:flex;flex-direction:column;gap:8px}
.gymkc .stepper.mins{align-self:flex-start}
.tiles.g3{grid-template-columns:repeat(3,1fr)}
#gwTiles b{color:var(--burn-strong)}
.gwgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.gwgrid i{aspect-ratio:1;border-radius:6px;background:var(--line)}
.gwgrid i.l1{background:var(--burn);opacity:.35}.gwgrid i.l2{background:var(--burn);opacity:.65}.gwgrid i.l3{background:var(--burn)}
#gwTiles .label{font-size:.68rem}
.gwgrid i.now{outline:2px solid var(--fg);outline-offset:1px}
/* Sobrecarga: nivel, barra y avisos */
.ghero{gap:10px}
.gh-row{display:flex;align-items:center;gap:14px}
.gh-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gh-main b{font-family:var(--display);font-size:1.05rem}
.lvl{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--burn-soft);color:var(--burn-strong);font-family:var(--display);font-weight:800;font-size:1.4rem}
.gh-how summary{cursor:pointer;font-size:.88rem;font-weight:600;color:var(--muted)}
.gh-how ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:.86rem}
.gh-how li{display:flex;justify-content:space-between;gap:10px}
.gh-how li b{color:var(--burn-strong);white-space:nowrap}
.tier{font-style:normal;font-size:.66rem;font-weight:700;letter-spacing:.03em;padding:2px 7px;border-radius:99px;margin-left:4px;white-space:nowrap;border:0;background:color-mix(in srgb,var(--t,var(--muted)) 16%,transparent);color:var(--t,var(--muted));vertical-align:middle}
.pbar{height:6px;margin-top:6px}.pbar span{background:var(--burn)}
.pbar.mant span{background:var(--accent)}.pbar.desc span{background:var(--m-h)}.pbar.full span{background:var(--burn-strong)}
.gsug{display:flex;flex-direction:column;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.gsug-h{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.gsug .btn{align-self:flex-start;margin-top:4px}
.galert{margin-bottom:8px}
@media (prefers-reduced-motion:no-preference){.pbar span{transition:width .4s ease}.lvl.up{animation:pop .5s ease-out}}
.watchlink{display:flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:.88rem;font-weight:600;color:var(--muted);background:none;border:1px dashed var(--line);border-radius:14px;padding:11px;cursor:pointer}
.watchlink b{color:var(--fg)}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.acts button{font:inherit;font-size:.86rem;font-weight:600;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:14px;padding:12px 4px;cursor:pointer;transition:transform .12s ease}
.acts button:active{transform:scale(.95)}
.acts button[aria-pressed="true"]{background:var(--burn-strong);color:var(--on-accent);border-color:var(--burn-strong)}
.int-help{margin:-4px 0 0;font-size:.82rem}
.stepper.mins{flex:none}
.exres{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--burn-soft);border-radius:18px;padding:14px;text-align:center}
.exres > span{font-size:.85rem;font-weight:600}
.exres div{display:flex;align-items:baseline;justify-content:center;gap:6px}
.exres input{width:140px;border:0;background:transparent;text-align:center;font-family:var(--display);font-weight:800;font-size:2.2rem;color:var(--burn-strong);min-height:0;padding:0}
.exres input:focus-visible{outline:2px solid var(--burn);border-radius:10px}
.exres div span{font-weight:700;color:var(--burn-strong)}

.sgoal{display:flex;flex-direction:column;gap:8px;background:var(--bg);border-radius:16px;padding:12px}
.sgoal > span{display:flex;flex-direction:column}
.sgoal small{font-size:.8rem}
.sgoal .stepper{background:var(--card)}
.bmrres{flex-direction:column;align-items:flex-start}

.restres{background:var(--accent-soft)}
.restres b{font-family:var(--display);font-weight:800;font-size:2.2rem;color:var(--accent-strong)}
.restres div span{color:var(--accent-strong);font-weight:700}

.eq.calib span:first-child{display:flex;flex-direction:column}
.eq.calib small{font-size:.76rem;color:var(--muted);font-weight:400}

.kgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kgrid .r{display:flex;flex-direction:column;gap:2px;background:var(--bg);border-radius:12px;padding:10px 12px}
.kgrid .r span{font-size:.78rem;color:var(--muted)}
.kgrid .r b{font-family:var(--display);font-size:1.1rem}

/* Racha y récords: una línea bajo el nivel, en vez de dos tarjetas */
.gstats{display:flex;gap:18px;justify-content:center;color:var(--muted);font-size:.92rem;margin-top:-4px}
.gstats b{color:var(--fg);font-weight:800}
.gstats .due{color:var(--warn)}.gstats .due b{color:var(--warn)}
.gstats .due::after{content:" · entrena esta semana";font-size:.8rem}
details.recs>summary{list-style:none;cursor:pointer}
details.recs>summary::-webkit-details-marker{display:none}
details.recs>summary h2::after{content:"›";display:inline-block;margin-left:8px;color:var(--muted);transition:transform .2s}
details.recs[open]>summary h2::after{transform:rotate(90deg)}
.gstats.zero{display:none}
/* Formularios */
form{display:flex;flex-direction:column;gap:12px}
form > .field{flex:none}
.row{display:flex;gap:8px;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:5px;flex:1 1 120px;min-width:0;position:relative}
.field:has(select.unit){flex:1 1 230px}
input,select{font:inherit;font-size:16px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px;width:100%;min-width:0;min-height:48px}
select.unit{flex:0 0 140px;width:140px}
input:focus-visible,select:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sugg{position:absolute;top:100%;left:0;right:0;z-index:5;background:var(--card);border:1px solid var(--line);border-radius:14px;margin-top:4px;max-height:300px;overflow:auto;box-shadow:0 14px 34px rgb(0 0 0 / .2)}
.sugg button{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:48px;text-align:left;background:none;border:0;border-top:1px solid var(--line);color:var(--fg);font:inherit;padding:10px 14px;cursor:pointer}
.sugg button:first-child{border-top:0}
.sugg button:hover,.sugg button.on{background:var(--accent-soft)}
.sugg span{color:var(--muted);font-size:.8rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.tag{font-style:normal;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--accent-soft);color:var(--fg);padding:2px 6px;border-radius:6px;margin-left:6px}
.preview{font-size:.88rem;color:var(--muted);min-height:1.3em}
.preview b{color:var(--fg)}
.btn{font:inherit;font-weight:700;border:0;border-radius:14px;min-height:50px;padding:12px 16px;cursor:pointer;background:var(--accent-strong);color:var(--on-accent)}
.btn.burn{background:var(--burn-strong)}
.btn.small{min-height:40px;padding:8px 14px;font-size:.9rem;border-radius:12px}
.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.danger{background:var(--accent-strong);color:var(--on-accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:.9rem;font-weight:500;background:var(--accent-soft);color:var(--fg);border:0;border-radius:99px;min-height:38px;padding:7px 14px;cursor:pointer}
.chip.b{background:var(--burn-soft)}
.chip small{color:var(--muted);margin-left:5px}
.chip[aria-pressed="true"] small{color:inherit;opacity:.7}

/* Listas */
.meal{display:flex;flex-direction:column;gap:8px}
.meal-h{display:flex;justify-content:space-between;align-items:baseline;padding-inline:4px}
.meal-h span{font-size:.88rem;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600}
ul.list{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
ul.list li{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:8px 6px 8px 14px;border-top:1px solid var(--line);min-height:58px}
ul.list li:first-child{border-top:0}
.name{min-width:0;overflow-wrap:anywhere;background:none;border:0;padding:4px 0;font:inherit;color:inherit;text-align:left;cursor:pointer;font-weight:500}
.name .q{color:var(--muted);font-size:.82rem;font-weight:400}
.k{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.k small{display:block;color:var(--muted);font-weight:500;font-size:.72rem;white-space:nowrap}
.k.b{color:var(--burn-strong)}
.del{background:none;border:0;color:var(--muted);font-size:1.35rem;cursor:pointer;width:44px;height:44px;border-radius:12px}
.del:hover{color:var(--over)}
ul.list li.editing{grid-template-columns:1fr;padding-right:14px}
.edit-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.edit-row input{width:120px;flex:0 0 auto}
.empty{text-align:center;color:var(--muted);padding:24px 16px;background:var(--card);border:1px dashed var(--line);border-radius:18px;display:flex;flex-direction:column;gap:12px;align-items:center}
.foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:.8rem;padding-inline:4px}
.confirm{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Recetas */
.intro{display:flex;flex-direction:column;gap:12px}
.intro p{margin:0;color:var(--muted)}
.recipe{display:flex;flex-direction:column;gap:10px}
.recipe-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.recipe-top h3{font-family:var(--display);font-weight:700;font-size:1rem;margin:0 0 4px;overflow-wrap:anywhere;letter-spacing:-.01em}
.recipe .kc{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1;text-align:right;white-space:nowrap}
.recipe .kc small{display:block;font-family:var(--body);font-weight:500;font-size:.72rem;color:var(--muted);margin-top:4px}
.ings{font-size:.86rem;color:var(--muted)}
.totals{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center;background:var(--bg);border-radius:14px;padding:12px 6px}
.totals b{display:block;font-family:var(--display);font-size:1rem}
.totals .muted{font-size:.75rem}
@media (max-width:400px){.totals{grid-template-columns:repeat(2,1fr)}}

/* Progreso */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.tile b{font-family:var(--display);font-weight:800;font-size:1.45rem;line-height:1.1;letter-spacing:-.02em}
.tile .u{font-size:.78rem;color:var(--muted)}
@media (min-width:540px){.tiles{grid-template-columns:repeat(4,1fr)}}
.legend{display:flex;flex-wrap:wrap;gap:6px}
.legend button{font:inherit;font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:99px;min-height:36px;padding:6px 12px;cursor:pointer}
.legend button[aria-pressed="false"]{opacity:.45;text-decoration:line-through}
.sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.sw.line{height:3px;border-radius:2px}
.sw.dash{height:0;border-top:2px dashed var(--muted);border-radius:0;width:14px}
.chartbox{position:relative;width:100%}
.chartbox svg{display:block;width:100%;height:auto;touch-action:pan-y}
.tip{position:absolute;top:6px;pointer-events:none;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 10px;font-size:.84rem;box-shadow:0 10px 26px rgb(0 0 0 / .2);min-width:160px;z-index:3}
.tip .t{font-weight:700;margin-bottom:4px}
.tip div.r{display:flex;justify-content:space-between;gap:12px}
.tip div.r b{font-variant-numeric:tabular-nums}
.daycard{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.daycard .t{font-family:var(--display);font-weight:700;font-size:.95rem}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
td{font-variant-numeric:tabular-nums}
details summary{cursor:pointer;font-weight:700;min-height:28px}

@media (prefers-reduced-motion:no-preference){#arc,#arcB{transition:stroke-dashoffset .5s ease}}

/* ===== Toast: aviso flotante con icono (ok · warn · win · info) ===== */
.toast{position:fixed;left:50%;bottom:calc(var(--bar-h) + 12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 32px);
  background:#232327;color:var(--fg);border:1px solid var(--line);border-radius:16px;padding:8px 10px;font-weight:600;font-size:.92rem;line-height:1.3;
  box-shadow:0 12px 32px rgb(0 0 0 / .5),0 2px 6px rgb(0 0 0 / .3)}
.toast:has(.t-undo){padding-right:4px}
.t-ic{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:.82rem;font-weight:800;background:var(--s);color:var(--c)}
.t-msg{min-width:0}
.toast.t-ok{--c:var(--good);--s:color-mix(in srgb,var(--good) 18%,transparent)}
.toast.t-warn{--c:var(--warn);--s:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
.toast.t-win{--c:var(--gold);--s:color-mix(in srgb,var(--gold) 20%,transparent);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.toast.t-info{--c:var(--m-h);--s:color-mix(in srgb,var(--m-h) 18%,transparent)}
.t-undo{flex:none;font:inherit;font-weight:700;font-size:.88rem;color:var(--accent-strong);background:none;border:0;border-left:1px solid var(--line);padding:8px 10px 8px 12px;min-height:40px;cursor:pointer}
@media (prefers-reduced-motion:no-preference){
  .toast{animation:tin .32s cubic-bezier(.2,.9,.3,1.2)}
  .toast.out{animation:tout .18s ease-in forwards}
  @keyframes tin{from{opacity:0;transform:translate(-50%,16px) scale(.96)}}
  @keyframes tout{to{opacity:0;transform:translate(-50%,8px)}}}

/* ===== Avisos en tarjeta: un solo componente (info · warn · good) ===== */
.aviso{--c:var(--accent);--s:var(--accent-soft);--ic:"i";display:grid;grid-template-columns:28px 1fr;gap:2px 10px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--c);border-radius:16px;padding:12px 14px;font-size:.9rem;line-height:1.4}
.aviso::before{content:var(--ic);grid-row:span 3;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--s);color:var(--c);font-weight:800;font-size:.9rem}
.aviso>*{grid-column:2}
.aviso b{font-weight:700}
.aviso .row,.aviso>.btn{margin-top:6px;justify-self:start}
.aviso .row{display:flex;gap:8px}
.aviso.info{--c:var(--m-h);--s:color-mix(in srgb,var(--m-h) 18%,transparent);--ic:"↓"}
.aviso.warn{--c:var(--warn);--s:var(--warn-soft);--ic:"!"}
.aviso.good{--c:var(--good);--s:color-mix(in srgb,var(--good) 18%,transparent);--ic:"✓"}
@media (prefers-reduced-motion:no-preference){.aviso{animation:enter .25s ease-out}}

/* Errores de formulario */
.ferr{color:var(--warn);font-weight:600}
.ferr::before{content:"! ";font-weight:800}
#saveWarn,#appBar{margin-bottom:14px}
#appBar.upd{--c:var(--good);--s:color-mix(in srgb,var(--good) 18%,transparent);--ic:"↻"}
/* Detalle plegable dentro de una tarjeta ("Ver cálculo") */
details.more>summary{cursor:pointer;color:var(--muted);font-size:.85rem;font-weight:600;padding:2px 0}
details.more[open]>summary{margin-bottom:8px}
#stepsCard.empty1 td{color:var(--muted);font-size:.9rem;padding:4px 0;border:0}