/* Layout: barra superior translúcida · barra lateral de pacientes (estilo macOS) · área de trabajo con pestañas por etapa de la consulta */
:root{
  /* Paleta de otoño */
  --bg:#FAF6F0; --surface:#FFFFFF; --surface-2:#F4EDE4; --fg:#2B2118; --muted:#7A6A5C; --line:#EADFD3;
  --accent:#C2562B; --accent-ink:#FFFFFF; --accent-soft:#F6E3D9;
  --mustard:#D9A441; --olive:#6B7B3A; --brown:#8A5A3B; --burgundy:#8C2F39;
  /* Usos */
  --prot:var(--brown); --lip:#B98420; --hc:var(--burgundy);
  --ok:var(--olive); --ok-soft:#ECEFDC; --warn:#9A6B12; --warn-soft:#F8EDD4; --bad:var(--burgundy); --bad-soft:#F5E0E1;
  --bar:rgba(250,246,240,.78); --side:rgba(244,237,228,.6);
  --shadow:0 1px 2px rgba(43,33,24,.04),0 4px 18px rgba(43,33,24,.05);
  --shadow-sm:0 1px 2px rgba(43,33,24,.08),0 1px 1px rgba(43,33,24,.04);
  --f-display:-apple-system,"SF Pro Display",system-ui,sans-serif;
  --f-body:-apple-system,"SF Pro Text",system-ui,sans-serif;
  --f-data:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --r:14px; --r-sm:10px;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#1E1712; --surface:#2A211A; --surface-2:#342920; --fg:#F2E8DC; --muted:#B3A391; --line:#3F3328;
  --accent:#E07A4F; --accent-ink:#1E1712; --accent-soft:#4A2D20;
  --mustard:#E6BC62; --olive:#A3B46A; --brown:#C9946E; --burgundy:#E07B85;
  --lip:var(--mustard); --warn:var(--mustard);
  --ok-soft:#33361F; --warn-soft:#41331A; --bad-soft:#47252A;
  --bar:rgba(30,23,18,.74); --side:rgba(42,33,26,.55);
  --shadow:0 1px 2px rgba(0,0,0,.25),0 6px 20px rgba(0,0,0,.18);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.015em}
h2{font-size:1.12rem;font-weight:600}
h3{font-size:1rem;font-weight:600}
.num,td.n,input[type=number]{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-data)}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.55;cursor:default}
input,select,textarea{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;width:100%;min-width:0;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
textarea{resize:vertical;min-height:70px}
input[readonly]{background:var(--surface-2)}
label{display:flex;flex-direction:column;gap:5px;font-size:.82rem;color:var(--muted);min-width:0}
label > span.lb{font-size:.76rem;font-weight:600;letter-spacing:.01em}

/* Barra superior translúcida */
.top{position:sticky;top:0;z-index:5;background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line);
  padding-top:max(10px,env(safe-area-inset-top,0px));padding-bottom:10px;
  padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:10px;margin-right:auto;min-width:0}
.brand h1{font-size:1.15rem;font-weight:700;white-space:nowrap}
.brand .who{color:var(--muted);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:500;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.bad{background:var(--bad-soft);color:var(--bad)}
.btn{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:var(--r-sm);padding:7px 14px;font-weight:600;font-size:.86rem;box-shadow:var(--shadow-sm);transition:background .15s,filter .15s,transform .1s;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:scale(.98)}
.btn.pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.pri:hover{filter:brightness(1.06)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--accent);box-shadow:none}
.btn.ghost:hover{background:var(--accent-soft)}
.btn.danger{color:var(--bad)}
.btn.sm{padding:4px 10px;font-size:.8rem;border-radius:8px}

/* Estructura */
.wrap{display:grid;grid-template-columns:272px minmax(0,1fr);gap:22px;
  padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));padding-top:18px;padding-bottom:calc(48px + env(safe-area-inset-bottom,0px));max-width:1480px;margin:0 auto}
aside{min-width:0}
/* Barra lateral estilo macOS */
.side{position:sticky;top:76px;display:flex;flex-direction:column;gap:10px;background:var(--side);border:1px solid var(--line);border-radius:var(--r);padding:14px 10px}
.side-head{padding:0 4px}
.side-head h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.plist{display:flex;flex-direction:column;gap:1px;max-height:calc(100vh - 330px);overflow:auto;margin:0 -2px;padding:0 2px}
.pitem{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;border:0;background:transparent;color:var(--fg);padding:7px 10px;border-radius:8px;width:100%;transition:background .12s}
.pitem:hover{background:var(--surface-2)}
.pitem.on{background:var(--accent);color:var(--accent-ink)}
.pitem.on small{color:inherit;opacity:.85}
.pitem b{font-size:.9rem;font-weight:600}
.pitem small{color:var(--muted);font-size:.74rem}
.side .empty{color:var(--muted);font-size:.84rem;padding:12px;border:1px dashed var(--line);border-radius:var(--r-sm);line-height:1.4}
.side-foot{display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--line);padding:10px 4px 0}
.side-foot .note{font-size:.74rem;color:var(--muted);width:100%;margin:4px 0 0;line-height:1.4}

main{min-width:0;display:flex;flex-direction:column;gap:16px}
/* Pestañas como control segmentado */
.tabs{display:flex;gap:2px;overflow-x:auto;background:var(--surface-2);border-radius:12px;padding:3px;scrollbar-width:none;width:fit-content;max-width:100%}
.tabs::-webkit-scrollbar{display:none}
.tab{border:0;background:transparent;padding:7px 14px;color:var(--muted);font-weight:600;font-size:.86rem;border-radius:9px;white-space:nowrap;transition:background .15s,color .15s}
.tab:hover{color:var(--fg)}
.tab .step{font-family:var(--f-data);font-size:.72rem;margin-right:6px;opacity:.6}
.tab.on{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)}
.pane{display:flex;flex-direction:column;gap:16px;animation:paneIn .24s ease-out}
@keyframes paneIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0;box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-h h2{margin-right:auto}
.hint{font-size:.8rem;color:var(--muted)}
p.hint{margin:0;line-height:1.45}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.cols2{display:grid;gap:14px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.unit{display:flex;gap:6px}
.unit input{flex:1}
.unit select{width:auto;flex:0 0 auto}

.tiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tile{background:var(--surface-2);border-radius:12px;padding:11px 13px;display:flex;flex-direction:column;gap:3px;min-width:0}
.tile .k{font-size:.72rem;color:var(--muted);font-weight:600}
.tile .v{font-family:var(--f-display);font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tile .v small{font-size:.74rem;color:var(--muted);font-weight:400;font-family:var(--f-body)}
.tile .s{font-size:.76rem;color:var(--muted)}
.chip{display:inline-block;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--surface);color:var(--muted);width:fit-content}
.chip.ok{background:var(--ok-soft);color:var(--ok)} .chip.warn{background:var(--warn-soft);color:var(--warn)} .chip.bad{background:var(--bad-soft);color:var(--bad)}

.goals{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.goal{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 12px;text-align:left;display:flex;flex-direction:column;gap:3px;color:var(--fg);transition:border-color .15s,background .15s}
.goal:hover{border-color:var(--accent)}
.goal b{font-size:.9rem;font-weight:600}
.goal span{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.goal.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.vet{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.vet .big{font-family:var(--f-display);font-size:2.7rem;font-weight:700;line-height:1;color:var(--accent);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.vet .big small{font-size:1rem;color:var(--muted);font-family:var(--f-body);font-weight:400;letter-spacing:0}
/* Deslizador limpio */
.slider{display:flex;gap:12px;align-items:center}
.slider input[type=number]{width:90px}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:22px;padding:0;border:0;background:transparent;box-shadow:none;--p:50%}
input[type=range]:focus{box-shadow:none}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) var(--p),var(--line) var(--p))}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line)}
input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:#fff;border:.5px solid rgba(0,0,0,.06);box-shadow:0 1px 4px rgba(0,0,0,.22)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:.5px solid rgba(0,0,0,.06);box-shadow:0 1px 4px rgba(0,0,0,.22)}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--accent-soft),0 1px 4px rgba(0,0,0,.22)}
/* Control segmentado iOS */
.seg{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:2px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;color:var(--muted);padding:6px 12px;font-size:.84rem;font-weight:600;border-radius:8px;transition:background .15s,color .15s;font-variant-numeric:tabular-nums}
.seg button:hover{color:var(--fg)}
.seg button.on{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)}

.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.88rem}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:.74rem;color:var(--muted);background:var(--surface-2);font-weight:600;white-space:nowrap}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tr.grp td{background:var(--surface-2);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding-block:6px}
tr.tot td{font-weight:600;background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
td input[type=number]{width:74px;padding:4px 7px;text-align:right;border-radius:7px}
.p{color:var(--prot)} .l{color:var(--lip)} .c{color:var(--hc)}
.bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--surface-2);gap:2px}
.bar i{display:block;height:100%}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.legend b{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}

.meals{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.meal{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.meal-h{display:flex;align-items:baseline;gap:8px}
.meal-h h3{margin-right:auto}
.meal-h .mono{font-size:.8rem;color:var(--muted)}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 8px;padding:9px 0;border-top:1px solid var(--line)}
.item:first-of-type{border-top:0}
.item .g{font-size:.72rem;letter-spacing:.02em;color:var(--muted);font-weight:600;grid-column:1/-1;display:flex;gap:6px;align-items:center}
.item .g .x{margin-left:auto}
.item .row{display:flex;gap:6px;align-items:center;grid-column:1/-1;min-width:0}
.item .row select{flex:1}
.item .row input{width:64px;flex:0 0 auto;text-align:right;padding:5px 7px}
.item .por{grid-column:1/-1;font-size:.84rem}
.item .por b{font-weight:600;font-variant-numeric:tabular-nums}
.meal textarea{min-height:44px;font-size:.85rem}

.banner{border:1px solid var(--line);background:var(--warn-soft);color:var(--fg);border-radius:12px;padding:10px 14px;font-size:.86rem;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.banner b{color:var(--warn)}
.banner.soft{background:var(--surface);box-shadow:var(--shadow-sm);font-size:.82rem;color:var(--muted)}
.banner.soft .x{margin-left:auto}
.toast{position:fixed;left:50%;transform:translate(-50%,8px);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:rgba(43,33,24,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#FAF6F0;padding:10px 18px;border-radius:12px;font-size:.86rem;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 8px 24px rgba(0,0,0,.18);max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.hist-chart svg{width:100%;height:auto;display:block}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:4px 12px;font-size:.8rem;font-weight:600}
.filters button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.prof-logo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.prof-logo .ph{width:88px;height:88px;border-radius:14px;border:1px dashed var(--line);background:var(--surface-2);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--muted);font-size:.74rem;text-align:center}
.prof-logo .ph img{max-width:100%;max-height:100%;object-fit:contain}
.side-toggle{display:none}
@media (max-width:900px){
  .wrap{grid-template-columns:minmax(0,1fr);gap:16px}
  .side{position:static}
  .plist{max-height:260px}
  .side-toggle{display:inline-flex}
  aside.closed .side > :not(.side-head){display:none}
  aside.closed .side{padding-block:10px}
  .cols2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  body{font-size:14.5px}
  .top{gap:8px;position:static}
  .brand{width:100%;margin-right:0}
  .brand .who{max-width:none;flex:1}
  .top .btn{padding:6px 11px;font-size:.82rem}
  .card{padding:16px;border-radius:12px}
  .vet .big{font-size:2.2rem}
  .tab{padding:7px 11px}
}
/* cuenta y sincronización */
.cuenta-paso{display:flex;flex-direction:column;gap:12px}
.cuenta-paso[hidden]{display:none}
.cuenta-acc{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cuenta-err{font-size:.8rem;color:var(--bad)}
.cuenta-err:empty{display:none}
.cuenta-cod{width:9ch;font-size:1.15rem;letter-spacing:.12em;text-align:center;font-variant-numeric:tabular-nums}
.cuenta-qr{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cuenta-qr .ph{width:172px;height:172px;border-radius:14px;background:#fff;padding:8px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.cuenta-qr .ph img{width:100%;height:100%}
.cuenta-qr code{font-size:.82rem;word-break:break-all;user-select:all;color:var(--fg)}
#storePill{cursor:default}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}