/* North · estructura de la app (menú lateral, barra inferior, acceso, Ajustes) */
:root{--side-w:232px;--bnav-h:62px}
body.app .secsw{display:none!important}
body.locked{overflow:hidden}

/* acceso */
.auth{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px 16px;background:var(--bg,#F6F7F5);overflow:auto}
.auth[hidden]{display:none!important}
.auth-card{width:100%;max-width:380px;background:var(--surface,#fff);border:1px solid var(--line,#E2E6E1);border-radius:20px;padding:28px 24px;box-shadow:0 10px 40px rgba(20,32,46,.08);text-align:center}
.auth-card img{border-radius:14px;display:block;margin:0 auto 10px}
.auth-card h1{margin:0;font:700 28px/1.1 var(--font-display,inherit);letter-spacing:-.01em}
.auth-sub{margin:6px 0 20px;color:var(--ink-2,#5B6670);font-size:14px}
.auth-card form{display:grid;gap:6px;text-align:left}
.auth-card label{font-size:13px;font-weight:700;color:var(--ink-2,#5B6670);margin-top:6px}
.auth-card input{width:100%;box-sizing:border-box;padding:12px 13px;border:1px solid var(--line,#D5DAD3);border-radius:12px;background:var(--bg,#fff);font-size:16px}
.auth-card .btn{margin-top:14px;padding:12px;font-size:15px;justify-content:center}
.auth-links{display:grid;gap:4px;margin-top:14px}
.auth-links button{border:0;background:none;color:var(--primary,#2C6CAA);font-weight:600;font-size:14px;padding:6px;cursor:pointer}
.auth-msg{min-height:20px;margin:12px 0 0;font-size:14px;color:#B3261E}
.auth-msg.ok{color:var(--ink-2,#5B6670)}

/* menú lateral (escritorio) */
.side{display:none}
@media (min-width:900px){
  body.app{padding-left:calc(var(--side-w) + 28px)!important}
  .side{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:var(--side-w);z-index:20;
    background:var(--surface);border-right:1px solid var(--line);padding:18px 12px;box-sizing:border-box;overflow-y:auto}
  .side-brand{display:flex;align-items:center;gap:10px;padding:2px 8px 18px}
  .side-brand img{border-radius:10px}
  .side-brand b{display:block;font:700 18px/1.1 var(--font-display,inherit)}
  .side-brand span{display:block;font-size:12px;color:var(--ink-2);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .side nav{display:grid;gap:2px}
  .si{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;padding:10px 12px;border-radius:10px;font-weight:600;font-size:14.5px;color:var(--ink-2);cursor:pointer;text-align:left}
  .si svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .si:hover{background:var(--surface-2);color:var(--ink)}
  .si[aria-current]{background:var(--band);color:var(--band-ink)}
  .ssub{display:none;padding:4px 0 8px 42px}
  .sgrp.open .ssub{display:grid;gap:1px}
  .ssub button{border:0;background:none;text-align:left;padding:7px 10px;border-radius:8px;font-size:13.5px;color:var(--ink-2);cursor:pointer}
  .ssub button:hover{color:var(--ink);background:var(--surface-2)}
  .ssub button[aria-current]{color:var(--ink);font-weight:700;background:var(--surface-2)}
  body.app .top .tabs{display:none}
  body.app .top{padding-bottom:16px}
}

/* barra inferior (móvil) */
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:25;display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--surface);border-top:1px solid var(--line);padding:6px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))}
.bnav button{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;color:var(--ink-2);font-size:11px;font-weight:600;padding:5px 2px;border-radius:10px;cursor:pointer;min-width:0}
.bnav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bnav button[aria-current]{color:var(--band-ink);background:color-mix(in srgb,var(--band) 70%,transparent)}
@media (min-width:900px){.bnav{display:none}}
@media (max-width:899px){
  body.app{padding-bottom:calc(var(--bnav-h) + 40px + env(safe-area-inset-bottom,0px))!important}
  body.app .fab{bottom:calc(var(--bnav-h) + 14px + env(safe-area-inset-bottom,0px))}
  body.app .toast{bottom:calc(var(--bnav-h) + 14px + env(safe-area-inset-bottom,0px))}
}

/* Inicio */
#sec-ini .wrap,#sec-aju .wrap{padding-top:16px}
.ini-h{background:var(--band);color:var(--band-ink);border-radius:16px;padding:18px 20px}
.ini-h h1{margin:0;font:700 26px/1.15 var(--font-display,inherit);letter-spacing:-.01em}
.ini-h p{margin:4px 0 0;opacity:.85;font-weight:600}

/* Ajustes */
.aj-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.aj-row input{flex:1 1 220px;min-width:0}
.aj-grid{display:grid;gap:10px;margin-top:10px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.aj-grid label{display:grid;gap:4px;font-weight:700;font-size:13px}
.aj-grid label small{font-weight:500;color:var(--ink-2)}
#sec-aju input,#sec-aju select{box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:15px;width:100%}
.aj-acc{display:grid;grid-template-columns:1fr 130px auto;gap:8px;margin-top:8px;align-items:center}
@media (max-width:520px){.aj-acc{grid-template-columns:1fr 110px}.aj-acc .btn{grid-column:1/-1}}
.aj-hello{background:var(--band);color:var(--band-ink)}
.aj-hello .hint{color:inherit;opacity:.85}
#sec-aju .btn.danger{color:#B3261E}
#sec-aju label.btn{cursor:pointer}
#sec-aju .card.aj-hello{background:var(--band);color:var(--band-ink);border-color:transparent}
.aj-grid>div{align-self:end}

.aj-copy{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:8px;align-items:center;margin-top:8px}
.aj-copy span{font-size:13px;font-weight:700;color:var(--ink-2)}
.aj-copy code{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;overflow-wrap:anywhere}
.aj-fresh{background:var(--surface-2);border-radius:12px;padding:12px 14px;margin-top:6px}
.aj-steps{margin:10px 0 0;padding-left:20px;font-size:14px;line-height:1.55}
.aj-steps code{background:var(--surface);padding:1px 5px;border-radius:5px}
.aj-key{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;flex-wrap:wrap}

/* Asistente */
.as-card{display:flex;flex-direction:column;gap:10px}
.as-log{display:flex;flex-direction:column;gap:10px;max-height:min(60vh,620px);overflow-y:auto;padding:4px 2px}
.as-m{max-width:88%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.as-m p{margin:0 0 6px}.as-m p:last-child{margin:0}.as-m ul{margin:4px 0 6px;padding-left:18px}.as-m li{margin:2px 0}
.as-m .as-h{font-weight:700;margin-top:6px}
.as-u{align-self:flex-end;background:var(--primary);color:var(--primary-ink);border-bottom-right-radius:4px;white-space:pre-wrap}
.as-a{align-self:flex-start;background:var(--surface-2);color:var(--ink);border-bottom-left-radius:4px;position:relative}
.as-err{background:#FBE4E1;color:#A12A1C}
.as-img{display:block;font-size:12px;opacity:.85;margin-bottom:2px}
.as-copy{display:block;margin-top:6px;border:0;background:none;color:var(--accent-text);font-size:12px;font-weight:700;padding:0;cursor:pointer}
.as-typing{display:flex;gap:4px;padding:14px}.as-typing span{width:7px;height:7px;border-radius:50%;background:var(--ink-2);animation:asb 1s infinite ease-in-out}
.as-typing span:nth-child(2){animation-delay:.15s}.as-typing span:nth-child(3){animation-delay:.3s}
@keyframes asb{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.as-typing span{animation:none;opacity:.6}}
.as-empty h2{margin:4px 0 6px}.as-empty p{margin:0 0 4px;color:var(--ink-2)}.as-empty ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:14px;line-height:1.6}
.as-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.as-chips::-webkit-scrollbar{display:none}
.as-chip{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer}
.as-chip:hover{background:var(--surface-2)}
.as-pend{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}
.as-form{display:flex;align-items:flex-end;gap:8px}
.as-form textarea{flex:1;min-width:0;resize:none;border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--bg);font-size:16px;line-height:1.4;max-height:160px}
.as-ico{flex:none;width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink-2);cursor:pointer}
.as-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.as-ico.on{background:#FBE4E1;color:#A12A1C;border-color:transparent}
.as-form .btn{height:42px}
.as-note{margin:0;font-size:12px}
@media (max-width:899px){.bnav button span{font-size:10px}}

.ini-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
body.app .ini-h .ini-ask{background:var(--band-ink);color:var(--soft-ink);border-color:transparent;font-weight:700}

/* Avisos */
.av-dev{margin:8px 0 4px}
.av-ok{color:#2F6B4A;font-weight:700}
.av-form{display:grid;gap:2px;margin-top:6px}
.av-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.av-sw{display:flex;gap:10px;align-items:flex-start;cursor:pointer;flex:1 1 220px;min-width:0}
.av-sw input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--primary)}
.av-sw b{display:block;font-size:15px}.av-sw small{display:block;color:var(--ink-2);font-size:13px}
.av-ctl{display:flex;gap:8px;align-items:center}
#sec-aju .av-ctl input[type=time],#sec-aju .av-ctl select{width:auto;min-width:96px}
.res-body{font-size:15px;line-height:1.5}.res-body p{margin:0 0 6px}.res-body ul{margin:2px 0 8px;padding-left:18px}.res-body .as-h{font-weight:700;margin-top:8px}
.av-sw>span{flex:1;min-width:0;white-space:normal}.av-row{min-width:0}
#sec-aju .av-sw input[type=checkbox]{width:20px;height:20px;padding:0;flex:none}

/* Burbuja del asistente */
.asb{position:fixed;z-index:45;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(var(--bnav-h) + 16px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;border:0;background:var(--primary);color:var(--primary-ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(20,32,46,.28)}
.asb svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.asb:active{transform:scale(.96)}
body.locked .asb,body.mode-asi .asb{display:none}
body.asp-on .asb{background:var(--ink)}
@media (min-width:900px){.asb{bottom:24px;right:24px}}
body.app .fab{right:calc(max(16px,env(safe-area-inset-right,0px)) + 68px)}
@media (min-width:900px){body.app .fab{right:92px;bottom:28px}}
.asp{position:fixed;inset:0;z-index:50;background:rgba(20,26,30,.35);display:flex;align-items:flex-end;justify-content:flex-end}
.asp[hidden]{display:none!important}
.asp-in{width:100%;height:calc(100% - env(safe-area-inset-top,0px) - 12px);display:flex}
.asp-in .as-card{flex:1;margin:0;border-radius:18px 18px 0 0;display:flex;flex-direction:column;min-height:0;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.asp-in .as-log{flex:1;max-height:none;min-height:0}
@media (min-width:900px){
  .asp{background:transparent;pointer-events:none;padding:0 24px 92px 0}
  .asp-in{pointer-events:auto;width:420px;height:min(680px,calc(100vh - 120px))}
  .asp-in .as-card{border-radius:18px;box-shadow:0 12px 40px rgba(20,32,46,.25)}
}
.as-hbtn{display:flex;gap:6px;align-items:center}
.as-x{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:15px;cursor:pointer}
body.asp-on{overflow:hidden}
@media (min-width:900px){body.asp-on{overflow:auto}}

.asb-e{font-size:30px;line-height:1;transform:translateY(1px)}
.asb{background:var(--surface);border:2px solid var(--primary)}
body.asp-on .asb{background:var(--soft)}

/* Salud: plan */
.sact{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;font-size:13px;background:var(--surface-2);border-radius:8px;padding:5px 8px;margin:4px 0}
.sfijo{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin-top:8px}
.sfrow{display:flex;gap:6px;align-items:center;font-weight:700;font-size:13px}.sfrow>span{width:22px;flex:none}.sfrow select,.sfrow input{flex:1;min-width:0}
.sfrow select,.sfrow input{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:14px}
