/* =========================================================================
   NutriPro Clinical — Sistema de diseño
   ========================================================================= */

/* ---------- Tokens ---------- */
:root{
  --bg:#f6f7f9;
  --bg-elev:#ffffff;
  --bg-sunken:#f1f3f6;
  --bg-hover:#f0f3f7;
  --sidebar:#0f2733;
  --sidebar-2:#0b1d26;
  --sidebar-fg:#c3d4dd;

  --fg:#111a21;
  --fg-soft:#4b6274;
  --fg-mute:#7c8fa0;
  --line:#e3e7ec;
  --line-soft:#eef1f5;

  --brand:#0e8f7e;
  --brand-2:#0b7466;
  --brand-soft:#e2f4f1;
  --accent:#2f6fed;
  --accent-soft:#e6eefd;

  --ok:#128a5b;      --ok-soft:#e2f5eb;
  --warn:#b3740a;    --warn-soft:#fdf1dd;
  --danger:#c0392b;  --danger-soft:#fbe9e7;
  --info:#2a6fa8;    --info-soft:#e5f0f9;
  --purple:#6b4bb5;  --purple-soft:#eee9fa;

  --prot:#e0603f; --carb:#3f7fe0; --fat:#e0a83f; --fib:#4aa06a; --alc:#8e6bc7;

  --r-sm:8px; --r:11px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --sh-1:0 1px 3px rgba(16,32,44,.05);
  --sh-2:0 8px 24px rgba(16,32,44,.08);
  --sh-3:0 28px 70px rgba(16,32,44,.18);
  --ff:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --ff-mono:"Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --sidebar-w:264px;
}
[data-theme="dark"]{
  --bg:#0d1519;
  --bg-elev:#131e24;
  --bg-sunken:#0a1114;
  --bg-hover:#1a2830;
  --sidebar:#08141a;
  --sidebar-2:#050e12;
  --sidebar-fg:#8fa8b4;

  --fg:#e6eef2;
  --fg-soft:#a9bcc7;
  --fg-mute:#758b97;
  --line:#22333c;
  --line-soft:#1a282f;

  --brand:#2bbfa8; --brand-2:#1f9c89; --brand-soft:#10312e;
  --accent:#5b93ff; --accent-soft:#132441;

  --ok:#39c98a;     --ok-soft:#0f2e22;
  --warn:#e0a33c;   --warn-soft:#33260e;
  --danger:#f0705f; --danger-soft:#361814;
  --info:#5aabe8;   --info-soft:#0f2735;
  --purple:#a58ce8; --purple-soft:#221a3a;

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 4px 14px rgba(0,0,0,.45);
  --sh-3:0 20px 50px rgba(0,0,0,.6);
}
@supports (font-variation-settings:normal){
  :root{ --ff:"Inter var","Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif }
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--ff);background:var(--bg);color:var(--fg);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{margin:0;font-weight:700;line-height:1.25;letter-spacing:-.02em}
p{margin:0 0 .6rem}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--fg-mute)}

/* ---------- Layout ---------- */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100vh;overflow:hidden}
.app.collapsed{--sidebar-w:68px}

.sidebar{
  background:linear-gradient(180deg,var(--sidebar) 0%,var(--sidebar-2) 100%);
  color:var(--sidebar-fg);display:flex;flex-direction:column;overflow:hidden;
}
.brand{display:flex;align-items:center;gap:11px;padding:18px 18px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.brand .logo{
  width:36px;height:36px;flex:0 0 36px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand) 0%,#16b39b 100%);color:#fff;font-weight:750;font-size:15px;letter-spacing:-.02em;
  box-shadow:0 6px 16px rgba(14,143,126,.35)
}
.brand .txt{overflow:hidden;white-space:nowrap}
.brand .txt b{display:block;color:#fff;font-size:15px;letter-spacing:-.02em}
.brand .txt span{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#7fa3b1}
.app.collapsed .brand .txt{display:none}

.nav{flex:1;overflow-y:auto;padding:12px 10px 20px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-color:transparent}
.nav-group{margin:14px 0 6px;padding:0 10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#5d7c8a;font-weight:700}
.app.collapsed .nav-group{opacity:0;height:8px;margin:6px 0}
.nav a{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:11px;color:var(--sidebar-fg);
  font-size:13.5px;font-weight:500;margin-bottom:2px;transition:background .15s,color .15s;white-space:nowrap;
}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.nav a.active{background:linear-gradient(90deg,rgba(43,191,168,.24),rgba(43,191,168,.06));color:#fff;box-shadow:inset 2px 0 0 var(--brand);font-weight:620}
.nav a .ic{width:19px;flex:0 0 19px;text-align:center;font-size:15px;opacity:.9}
.app.collapsed .nav a span.lbl{display:none}
.app.collapsed .nav a{justify-content:center;padding:10px 0}
.side-foot{padding:10px;border-top:1px solid rgba(255,255,255,.07);display:flex;gap:6px}
.side-foot button{
  flex:1;background:rgba(255,255,255,.06);border:0;color:var(--sidebar-fg);padding:8px;border-radius:8px;
  cursor:pointer;font-size:12px;transition:.13s
}
.side-foot button:hover{background:rgba(255,255,255,.14);color:#fff}

.main{display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.topbar{
  display:flex;align-items:center;gap:14px;padding:0 22px;height:60px;flex:0 0 60px;
  background:var(--bg-elev);border-bottom:1px solid var(--line);z-index:5
}
.topbar h1{font-size:17px;font-weight:660}
.topbar .crumb{font-size:11.5px;color:var(--fg-mute);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.topbar .sp{flex:1}
.content{flex:1;overflow-y:auto;padding:22px;scroll-behavior:smooth}
.content>.wrap{max-width:1500px;margin:0 auto}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);
  background:var(--bg-elev);color:var(--fg);padding:8px 14px;border-radius:var(--r);cursor:pointer;
  font-size:13px;font-weight:590;transition:.16s cubic-bezier(.2,.8,.2,1);white-space:nowrap;box-shadow:none
}
.btn:hover{background:var(--bg-hover);border-color:var(--fg-mute);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.primary{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);border-color:var(--brand);color:#fff;box-shadow:0 3px 12px rgba(14,143,126,.28)}
.btn.primary:hover{filter:brightness(1.06);box-shadow:0 6px 18px rgba(14,143,126,.38);transform:translateY(-1px)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--bg-hover);transform:none}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:var(--r-sm)}
.btn.xs{padding:3px 8px;font-size:11px;border-radius:7px}
.btn.lg{padding:11px 20px;font-size:14.5px}
.btn.block{width:100%}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- Tarjetas ---------- */
.card{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.card+.card{margin-top:16px}
.card-h{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.card-h h3{font-size:14.5px;font-weight:640}
.card-h .sub{font-size:12px;color:var(--fg-mute);font-weight:400}
.card-h .sp{flex:1}
.card-b{padding:18px}
.card-b.tight{padding:12px}
.card-b.flush{padding:0}
.card-f{padding:12px 18px;border-top:1px solid var(--line-soft);background:var(--bg-sunken)}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.g-3-2{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
@media(max-width:1250px){.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}.g-2-1,.g-1-2,.g-3-2{grid-template-columns:1fr}}
@media(max-width:900px){.g2,.g3{grid-template-columns:1fr}.app{grid-template-columns:0 1fr}}

/* ---------- KPI ---------- */
.kpi{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 17px;box-shadow:var(--sh-1);position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--brand)}
.kpi.a::after{background:var(--accent)} .kpi.w::after{background:var(--warn)}
.kpi.d::after{background:var(--danger)} .kpi.p::after{background:var(--purple)} .kpi.o::after{background:var(--ok)}
.kpi .k-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-mute);font-weight:680}
.kpi .k-val{font-size:26px;font-weight:700;letter-spacing:-.03em;margin-top:3px;line-height:1.1}
.kpi .k-val small{font-size:13px;font-weight:600;color:var(--fg-soft);letter-spacing:0}
.kpi .k-sub{font-size:11.5px;color:var(--fg-mute);margin-top:3px}

/* ---------- Formularios ---------- */
.field{margin-bottom:13px}
.field>label,.lbl-t{display:block;font-size:11.5px;font-weight:660;color:var(--fg-soft);margin-bottom:5px;letter-spacing:.02em}
.field .hint{font-size:11px;color:var(--fg-mute);margin-top:4px}
.inp,select.inp,textarea.inp{
  width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-elev);
  transition:.16s;font-size:13.5px;outline:none
}
.inp:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.inp:disabled{background:var(--bg-sunken);color:var(--fg-mute)}
textarea.inp{resize:vertical;min-height:74px;line-height:1.55}
select.inp{cursor:pointer}
.inp-g{display:flex;align-items:stretch}
.inp-g .inp{border-radius:var(--r) 0 0 var(--r)}
.inp-g .unit{display:grid;place-items:center;padding:0 10px;border:1px solid var(--line);border-left:0;border-radius:0 var(--r) var(--r) 0;background:var(--bg-sunken);font-size:12px;color:var(--fg-mute);font-weight:600}
.frow{display:grid;gap:13px}
.frow.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.frow.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.frow.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:800px){.frow.c3,.frow.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}

.check{display:flex;align-items:flex-start;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:13px;transition:.12s}
.check:hover{background:var(--bg-hover)}
.check input{margin-top:2px;accent-color:var(--brand);width:15px;height:15px;cursor:pointer;flex:0 0 15px}
.chip-pick{display:flex;flex-wrap:wrap;gap:7px}
.chip-pick label{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--line);border-radius:99px;
  cursor:pointer;font-size:12.5px;background:var(--bg-elev);transition:.13s;user-select:none
}
.chip-pick label:hover{border-color:var(--brand)}
.chip-pick input{display:none}
.chip-pick label.on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 2px 8px rgba(14,143,126,.25)}

.switch{position:relative;display:inline-block;width:40px;height:22px;flex:0 0 40px}
.switch input{opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;background:var(--line);border-radius:99px;transition:.2s;cursor:pointer}
.switch .sl::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked+.sl{background:var(--brand)}
.switch input:checked+.sl::before{transform:translateX(18px)}

/* ---------- Tablas ---------- */
.tbl-wrap{overflow:auto;max-width:100%}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{
  text-align:left;padding:9px 12px;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--fg-mute);font-weight:700;background:var(--bg-sunken);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:2;white-space:nowrap
}
table.tbl th.sortable{cursor:pointer;user-select:none}
table.tbl th.sortable:hover{color:var(--fg)}
table.tbl td{padding:9px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.tbl tbody tr{transition:background .1s}
table.tbl tbody tr:hover{background:var(--bg-hover)}
table.tbl tbody tr.clickable{cursor:pointer}
table.tbl td.num,table.tbl th.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--ff-mono);font-size:12.3px}
table.tbl tfoot td{font-weight:700;background:var(--bg-sunken);border-top:2px solid var(--line)}
table.tbl.compact td,table.tbl.compact th{padding:6px 9px}

/* ---------- Badges ---------- */
.bdg{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:660;letter-spacing:.01em;white-space:nowrap;line-height:1.6}
.bdg.ok{background:var(--ok-soft);color:var(--ok)}
.bdg.warn{background:var(--warn-soft);color:var(--warn)}
.bdg.danger{background:var(--danger-soft);color:var(--danger)}
.bdg.info{background:var(--info-soft);color:var(--info)}
.bdg.brand{background:var(--brand-soft);color:var(--brand-2)}
.bdg.purple{background:var(--purple-soft);color:var(--purple)}
.bdg.mute{background:var(--bg-sunken);color:var(--fg-mute)}
.bdg.out{background:transparent;border:1px solid var(--line);color:var(--fg-soft)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 8px}

/* ---------- Barras ---------- */
.bar{height:8px;background:var(--bg-sunken);border-radius:99px;overflow:hidden;position:relative}
.bar>i{display:block;height:100%;border-radius:99px;background:var(--brand);transition:width .45s cubic-bezier(.4,0,.2,1)}
.bar.thin{height:5px}
.bar.thick{height:12px}
.macro-bar{display:flex;height:11px;border-radius:99px;overflow:hidden;background:var(--bg-sunken)}
.macro-bar>i{display:block;height:100%;transition:width .4s}
.mb-p{background:var(--prot)} .mb-c{background:var(--carb)} .mb-f{background:var(--fat)} .mb-a{background:var(--alc)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--fg-soft);margin-top:8px}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;padding:0 2px}
.tabs button{
  background:none;border:0;padding:10px 14px;cursor:pointer;font-size:13px;font-weight:580;color:var(--fg-mute);
  border-bottom:2px solid transparent;transition:.14s;white-space:nowrap;margin-bottom:-1px
}
.tabs button:hover{color:var(--fg);background:var(--bg-hover)}
.tabs button.active{color:var(--brand);border-bottom-color:var(--brand)}
.tabs.pill{border:0;background:var(--bg-sunken);padding:4px;border-radius:11px;gap:3px;display:inline-flex}
.tabs.pill button{border:0;border-radius:8px;padding:6px 13px;margin:0}
.tabs.pill button.active{background:var(--bg-elev);color:var(--fg);box-shadow:var(--sh-1)}

/* ---------- Alertas ---------- */
.alert{display:flex;gap:11px;padding:12px 15px;border-radius:11px;font-size:13px;border:1px solid transparent;line-height:1.55}
.alert .ai{font-size:16px;line-height:1.3;flex:0 0 auto}
.alert.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 25%,transparent);color:var(--ok)}
.alert.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 25%,transparent);color:var(--warn)}
.alert.danger{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 25%,transparent);color:var(--danger)}
.alert.info{background:var(--info-soft);border-color:color-mix(in srgb,var(--info) 25%,transparent);color:var(--info)}
.alert b{font-weight:700}
.alert+.alert{margin-top:9px}
.alert .body{flex:1;min-width:0}

/* ---------- Modal ---------- */
.backdrop{position:fixed;inset:0;background:rgba(8,18,24,.55);backdrop-filter:blur(3px);z-index:100;display:grid;place-items:center;padding:24px;animation:fade .15s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--bg-elev);border-radius:var(--r-xl);box-shadow:var(--sh-3);width:min(760px,100%);max-height:88vh;display:flex;flex-direction:column;animation:pop .18s cubic-bezier(.2,.9,.3,1.2);border:1px solid var(--line)}
.modal.wide{width:min(1180px,100%)}
.modal.slim{width:min(480px,100%)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal-h{display:flex;align-items:center;gap:12px;padding:17px 22px;border-bottom:1px solid var(--line)}
.modal-h h3{font-size:16px}
.modal-h .sp{flex:1}
.modal-b{padding:22px;overflow-y:auto;flex:1}
.modal-f{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;background:var(--bg-sunken);border-radius:0 0 var(--r-xl) var(--r-xl)}
.x-btn{background:none;border:0;font-size:20px;color:var(--fg-mute);cursor:pointer;line-height:1;padding:4px 8px;border-radius:7px}
.x-btn:hover{background:var(--bg-hover);color:var(--fg)}

/* ---------- Toast ---------- */
.toasts{position:fixed;bottom:22px;right:22px;z-index:200;display:flex;flex-direction:column;gap:9px;max-width:380px}
.toast{
  background:var(--bg-elev);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:11px;
  padding:12px 15px;box-shadow:var(--sh-2);font-size:13px;animation:slidein .22s cubic-bezier(.2,.9,.3,1.1);display:flex;gap:10px
}
.toast.err{border-left-color:var(--danger)} .toast.warn{border-left-color:var(--warn)} .toast.info{border-left-color:var(--accent)}
@keyframes slidein{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

/* ---------- Utilidades ---------- */
.muted{color:var(--fg-mute)} .soft{color:var(--fg-soft)}
.t-ok{color:var(--ok)} .t-warn{color:var(--warn)} .t-dan{color:var(--danger)} .t-brand{color:var(--brand)} .t-info{color:var(--info)}
.xs{font-size:11px} .sm{font-size:12.3px} .lg{font-size:16px} .xl{font-size:20px}
.b{font-weight:700} .sb{font-weight:600} .up{text-transform:uppercase;letter-spacing:.07em}
.mono{font-family:var(--ff-mono);font-variant-numeric:tabular-nums}
.center{text-align:center} .right{text-align:right}
.mt0{margin-top:0}.mt1{margin-top:6px}.mt2{margin-top:12px}.mt3{margin-top:18px}.mt4{margin-top:26px}
.mb0{margin-bottom:0}.mb1{margin-bottom:6px}.mb2{margin-bottom:12px}.mb3{margin-bottom:18px}
.flex{display:flex;gap:10px}.flex.c{align-items:center}.flex.b{justify-content:space-between}.flex.w{flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:10px}
.sp{flex:1}
.hr{height:1px;background:var(--line-soft);border:0;margin:16px 0}
.nowrap{white-space:nowrap}
.hidden{display:none !important}
.pointer{cursor:pointer}

.empty{text-align:center;padding:46px 20px;color:var(--fg-mute)}
.empty .ico{font-size:40px;opacity:.4;margin-bottom:10px}
.empty h4{font-size:15px;color:var(--fg-soft);margin-bottom:5px}

.avatar{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:14px;
  color:#fff;flex:0 0 38px;letter-spacing:-.02em;box-shadow:0 3px 10px rgba(16,32,44,.16)
}
.avatar.sm{width:30px;height:30px;flex:0 0 30px;font-size:12px;border-radius:10px}
.avatar.lg{width:56px;height:56px;flex:0 0 56px;font-size:20px;border-radius:18px}

.list-row{display:flex;align-items:center;gap:12px;padding:11px 15px;border-bottom:1px solid var(--line-soft);transition:.12s}
.list-row:last-child{border-bottom:0}
.list-row:hover{background:var(--bg-hover)}
.list-row.click{cursor:pointer}

/* ---------- Dominio ---------- */
.meal{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-elev)}
.meal+.meal{margin-top:13px}
.meal-h{display:flex;align-items:center;gap:11px;padding:11px 15px;background:var(--bg-sunken);border-bottom:1px solid var(--line-soft)}
.meal-h .mi{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-soft),color-mix(in srgb,var(--brand) 16%,var(--brand-soft)));color:var(--brand-2);font-size:16px;flex:0 0 32px}
.meal-h b{font-size:13.5px}
.meal-h .kc{font-size:11.5px;color:var(--fg-mute);font-family:var(--ff-mono)}
.meal-items{padding:2px 0}
.food-row{display:flex;align-items:center;gap:10px;padding:7px 15px;font-size:13px;border-bottom:1px solid var(--line-soft)}
.food-row:last-child{border-bottom:0}
.food-row .q{font-family:var(--ff-mono);font-size:12px;color:var(--fg-soft);min-width:78px;text-align:right;flex:0 0 auto}
.food-row .n{flex:1;min-width:0}
.food-row .acts{display:flex;gap:3px;opacity:0;transition:.13s}
.food-row:hover .acts{opacity:1}

.ring{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-linecap:round}
.ring .bg{stroke:var(--bg-sunken)}
.ringbox{position:relative;display:inline-grid;place-items:center}
.ringbox .txt{position:absolute;text-align:center;line-height:1.15}
.ringbox .txt b{font-size:19px;display:block;letter-spacing:-.02em}
.ringbox .txt span{font-size:10px;color:var(--fg-mute);text-transform:uppercase;letter-spacing:.06em}

.gauge{display:flex;align-items:center;gap:10px}
.gauge .track{flex:1;height:7px;border-radius:99px;background:var(--bg-sunken);position:relative;overflow:hidden}
.gauge .track>i{position:absolute;inset:0 auto 0 0;border-radius:99px}
.gauge .v{font-family:var(--ff-mono);font-size:11.5px;min-width:70px;text-align:right;color:var(--fg-soft)}

.lab-row{display:grid;grid-template-columns:minmax(150px,1.4fr) 92px 1fr 130px;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-soft)}
@media(max-width:860px){.lab-row{grid-template-columns:1fr 80px;row-gap:4px}}
.range-vis{position:relative;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--danger) 0%,var(--warn) 14%,var(--ok) 32%,var(--ok) 68%,var(--warn) 86%,var(--danger) 100%);opacity:.85}
.range-vis .pin{position:absolute;top:-5px;width:3px;height:16px;background:var(--fg);border-radius:2px;box-shadow:0 0 0 2px var(--bg-elev)}

.theory h2{font-size:19px;margin:26px 0 10px;padding-bottom:7px;border-bottom:2px solid var(--brand-soft);color:var(--brand-2)}
.theory h3{font-size:15.5px;margin:20px 0 7px;color:var(--fg)}
.theory h4{font-size:13.5px;margin:14px 0 5px;color:var(--fg-soft);text-transform:uppercase;letter-spacing:.05em}
.theory p{margin:0 0 11px;line-height:1.72;color:var(--fg-soft);font-size:13.7px}
.theory ul,.theory ol{margin:0 0 13px;padding-left:22px;color:var(--fg-soft);line-height:1.72;font-size:13.7px}
.theory li{margin-bottom:5px}
.theory li::marker{color:var(--brand)}
.theory strong{color:var(--fg);font-weight:650}
.theory blockquote{margin:14px 0;padding:12px 17px;background:var(--brand-soft);border-left:3px solid var(--brand);border-radius:0 10px 10px 0;font-size:13.3px;color:var(--fg-soft)}
.theory .formula{
  background:var(--bg-sunken);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:12px 0;
  font-family:var(--ff-mono);font-size:12.6px;line-height:1.85;overflow-x:auto;color:var(--fg)
}
.theory table{width:100%;border-collapse:collapse;margin:13px 0;font-size:12.8px}
.theory table th{background:var(--bg-sunken);padding:8px 11px;text-align:left;border:1px solid var(--line);font-weight:660;font-size:11.5px}
.theory table td{padding:7px 11px;border:1px solid var(--line-soft);color:var(--fg-soft)}
.toc{position:sticky;top:0;max-height:calc(100vh - 130px);overflow-y:auto}
.toc a{display:block;padding:6px 11px;border-radius:8px;font-size:12.6px;color:var(--fg-soft);border-left:2px solid transparent}
.toc a:hover{background:var(--bg-hover);text-decoration:none;color:var(--fg)}
.toc a.active{background:var(--brand-soft);color:var(--brand-2);border-left-color:var(--brand);font-weight:600}

.search-box{position:relative;flex:1;max-width:440px}
.search-box .inp{padding-left:34px}
.search-box .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--fg-mute);font-size:14px;pointer-events:none}

.chart-svg{width:100%;height:auto;display:block;overflow:visible}
.chart-svg .grid-l{stroke:var(--line-soft);stroke-width:1}
.chart-svg .axis-t{fill:var(--fg-mute);font-size:10px;font-family:var(--ff)}
.chart-svg .ln{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.chart-svg .pt{stroke:var(--bg-elev);stroke-width:2}

.tag-cloud{display:flex;flex-wrap:wrap;gap:6px}
.tag{padding:3px 9px;background:var(--bg-sunken);border-radius:7px;font-size:11.5px;color:var(--fg-soft);border:1px solid var(--line-soft)}
.tag.rm{cursor:pointer}
.tag.rm:hover{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}

.split-pane{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px}
@media(max-width:1150px){.split-pane{grid-template-columns:1fr}}

.week-grid{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:9px;overflow-x:auto;padding-bottom:6px}
.day-col{background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;overflow:hidden;min-width:150px}
.day-col .dh{padding:8px 10px;background:var(--bg-sunken);border-bottom:1px solid var(--line-soft);text-align:center}
.day-col .dh b{font-size:12px;display:block}
.day-col .dh span{font-size:10.5px;color:var(--fg-mute);font-family:var(--ff-mono)}
.day-col .dm{padding:7px 9px;border-bottom:1px solid var(--line-soft);font-size:11.4px}
.day-col .dm:last-child{border-bottom:0}
.day-col .dm .mt{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-mute);font-weight:700;margin-bottom:3px}
.day-col .dm .fi{color:var(--fg-soft);line-height:1.45;margin-bottom:1px}

/* ---------- Impresión ---------- */
@media print{
  .no-print,.sidebar,.topbar{display:none !important}
  .app{display:block;height:auto;overflow:visible}
  .content{overflow:visible;padding:0}
  body{background:#fff;font-size:11pt}
  .card{break-inside:avoid;box-shadow:none;border-color:#ccc}
  .meal{break-inside:avoid}
  @page{margin:16mm 14mm}
}
