/* Presupuesto 360 — cabina financiera personal.
   Layout: riel Maestro fijo a la izquierda (arriba en móvil) + lienzo de paneles Esclavos;
   navegación inferior en celular. Oscuro por defecto, claro completo. */
:root{
  color-scheme: dark;
  --bg:#0e1417; --panel:#151d21; --panel-2:#1b252a; --line:#26333a; --line-2:#31414a;
  --fg:#e9eff1; --fg-2:#a9b7bd; --fg-3:#76878f;
  --accent-b:var(--acc-d); --accent-ink:var(--acc-d-ink); --accent-soft-b:var(--acc-d-soft);
  --ok-b:#3fbf7f; --warn-b:#e8a33d; --crit-b:#ef5a5a; --info-b:#6fa8dc;
  --ok-soft:rgba(63,191,127,.14); --warn-soft:rgba(232,163,61,.15); --crit-soft:rgba(239,90,90,.15);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#9085e9;
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --f-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:"Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-num:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r:14px; --r-sm:9px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --bg:#f3f5f4; --panel:#ffffff; --panel-2:#f1f4f3; --line:#e0e6e4; --line-2:#cfd8d5;
    --fg:#132024; --fg-2:#4a5a60; --fg-3:#6f8087;
    --accent-b:var(--acc-l); --accent-ink:var(--acc-l-ink); --accent-soft-b:var(--acc-l-soft);
    --ok-b:#177a4a; --warn-b:#9a5c00; --crit-b:#c93636; --info-b:#2f6fa8;
    --ok-soft:rgba(29,138,85,.10); --warn-soft:rgba(179,107,0,.11); --crit-soft:rgba(201,54,54,.10);
    --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#4a3aa7;
    --shadow:0 12px 40px rgba(20,40,40,.14);
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#f3f5f4; --panel:#ffffff; --panel-2:#f1f4f3; --line:#e0e6e4; --line-2:#cfd8d5;
  --fg:#132024; --fg-2:#4a5a60; --fg-3:#6f8087;
  --accent-b:var(--acc-l); --accent-ink:var(--acc-l-ink); --accent-soft-b:var(--acc-l-soft);
  --ok-b:#177a4a; --warn-b:#9a5c00; --crit-b:#c93636; --info-b:#2f6fa8;
  --ok-soft:rgba(29,138,85,.10); --warn-soft:rgba(179,107,0,.11); --crit-soft:rgba(201,54,54,.10);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#4a3aa7;
  --shadow:0 12px 40px rgba(20,40,40,.14);
}

/* Temas de acento (cambiador en Apariencia). Cada uno trae su tono para oscuro (-d) y claro (-l),
   con contraste AA del texto sobre el acento. Los colores de estado (verde/ámbar/rojo) y de las series
   de los gráficos no cambian: su significado debe ser el mismo en cualquier tema. */
:root{
  --acc-d:#f27ba5; --acc-d-ink:#1a0d13; --acc-d-soft:rgba(242,123,165,.14);
  --acc-l:#c2346b; --acc-l-ink:#ffffff; --acc-l-soft:rgba(194,52,107,.10);
}
:root[data-accent="indigo"]{ --acc-d:#9aa2ff; --acc-d-ink:#0d1030; --acc-d-soft:rgba(154,162,255,.15); --acc-l:#4650d4; --acc-l-ink:#ffffff; --acc-l-soft:rgba(70,80,212,.10) }
:root[data-accent="azul"]{ --acc-d:#62b0ff; --acc-d-ink:#03172c; --acc-d-soft:rgba(98,176,255,.15); --acc-l:#1b67c4; --acc-l-ink:#ffffff; --acc-l-soft:rgba(27,103,196,.10) }
:root[data-accent="turquesa"]{ --acc-d:#43d3c9; --acc-d-ink:#031b19; --acc-d-soft:rgba(67,211,201,.14); --acc-l:#0b7f78; --acc-l-ink:#ffffff; --acc-l-soft:rgba(11,127,120,.10) }
:root[data-accent="violeta"]{ --acc-d:#bd96ff; --acc-d-ink:#1a0d33; --acc-d-soft:rgba(189,150,255,.15); --acc-l:#7439d1; --acc-l-ink:#ffffff; --acc-l-soft:rgba(116,57,209,.10) }
:root[data-accent="cobre"]{ --acc-d:#f0a071; --acc-d-ink:#2a1206; --acc-d-soft:rgba(240,160,113,.15); --acc-l:#a8501f; --acc-l-ink:#ffffff; --acc-l-soft:rgba(168,80,31,.10) }
:root[data-accent="grafito"]{ --acc-d:#dfe6e8; --acc-d-ink:#101719; --acc-d-soft:rgba(223,230,232,.12); --acc-l:#26343a; --acc-l-ink:#ffffff; --acc-l-soft:rgba(38,52,58,.08) }

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.muted{color:var(--fg-2)} .faint{color:var(--fg-3)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---------- estructura ---------- */
.app{display:grid;grid-template-columns:304px minmax(0,1fr);min-height:100%}
.rail{position:sticky;top:0;height:100vh;overflow:auto;border-right:1px solid var(--line);background:var(--panel);
  padding:20px 18px 24px;display:flex;flex-direction:column;gap:18px}
.main{min-width:0;padding-block:18px 60px;padding-inline:24px}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;
  font:700 15px var(--f-display)}
.brand h1{white-space:nowrap;font:700 18px/1.1 var(--f-display);margin:0;letter-spacing:-.02em}
.brand small{display:block;color:var(--fg-3);font-size:12px}
.live{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-2)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--fg-3)}
.live.on i{background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,191,127,.6)}70%{box-shadow:0 0 0 7px rgba(63,191,127,0)}100%{box-shadow:0 0 0 0 rgba(63,191,127,0)}}

.lbl{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--fg-3);font-weight:600;margin:0 0 8px}
.horizons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.hz{border:1px solid var(--line);background:var(--panel-2);border-radius:var(--r-sm);padding:8px 4px;cursor:pointer;font-size:13px;
  font-weight:600;color:var(--fg-2);transition:.15s}
.hz:hover{border-color:var(--line-2);color:var(--fg)}
.hz[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.period{display:flex;align-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:4px}
.period b{flex:1;text-align:center;font:600 14px var(--f-display)}
.iconbtn{border:0;background:transparent;width:32px;height:32px;border-radius:8px;cursor:pointer;color:var(--fg-2);font-size:16px}
.iconbtn:hover{background:var(--line);color:var(--fg)}
.field{display:flex;flex-direction:column;gap:6px}
.input,select.input{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;outline:0}
.input:focus{border-color:var(--accent)}
.progress-time{height:4px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:6px}
.progress-time span{display:block;height:100%;background:var(--fg-3)}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--fg-3)}
.chip-status{display:flex;justify-content:space-between;gap:6px}
.chip-status b{font-weight:600;color:var(--fg-2)}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 18px;overflow-x:auto;scrollbar-width:none}
.tab{border:0;background:none;padding:10px 14px;cursor:pointer;color:var(--fg-2);font-weight:600;border-bottom:2px solid transparent;white-space:nowrap;
  display:inline-flex;gap:6px;align-items:center}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-size:11px;display:inline-grid;place-items:center}
.badge:empty{display:none}

.grid{display:grid;gap:16px;align-items:start;grid-template-columns:repeat(12,minmax(0,1fr))}
.c12{grid-column:span 12}.c8{grid-column:span 8}.c7{grid-column:span 7}.c6{grid-column:span 6}.c5{grid-column:span 5}.c4{grid-column:span 4}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;min-width:0;transition:box-shadow .4s}
.panel.flash{box-shadow:0 0 0 2px var(--accent-soft),0 0 0 1px var(--accent) inset}
.ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 12px}
.ph h2{font:650 15px var(--f-display);margin:0;letter-spacing:-.01em}
.ph .link{font-size:13px;background:none;border:0;color:var(--accent);cursor:pointer;padding:0}
.empty{color:var(--fg-3);font-size:14px;padding:18px 0;text-align:center}

/* KPI */
.kpis{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:16px}
.kpi-main .big{font:700 34px/1.05 var(--f-num);letter-spacing:-.03em}
.kpi-main .of{color:var(--fg-3);font:500 15px var(--f-num)}
.meter{position:relative;height:12px;background:var(--line);border-radius:7px;margin:14px 0 8px;overflow:visible}
.meter .fill{height:100%;border-radius:7px;transition:width .5s cubic-bezier(.2,.8,.2,1),background .3s}
.meter .pace{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--fg);border-radius:2px;transition:left .5s}
.meter .pace::after{content:"ritmo";position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--fg-3)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;font-size:12px;font-weight:650}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.verde{color:var(--ok);background:var(--ok-soft)} .pill.amarillo{color:var(--warn);background:var(--warn-soft)}
.pill.rojo{color:var(--crit);background:var(--crit-soft)} .pill.gris,.pill.info{color:var(--fg-2);background:var(--line)}
.kpi .v{white-space:nowrap;font:650 22px/1.2 var(--f-num);letter-spacing:-.02em;margin-top:4px}
.kpi .s{font-size:13px;color:var(--fg-2);margin-top:4px}
.pos{color:var(--ok)} .neg{color:var(--crit)}

/* alertas */
.alerts{display:flex;flex-direction:column;gap:6px}
.alert{display:grid;grid-template-columns:4px 1fr auto;gap:12px;align-items:center;padding:9px 10px 9px 0;border-radius:var(--r-sm);cursor:pointer;
  background:transparent;border:0;text-align:left;width:100%}
.alert:hover{background:var(--panel-2)}
.alert .bar{align-self:stretch;border-radius:4px;background:var(--fg-3)}
.alert.rojo .bar{background:var(--crit)} .alert.amarillo .bar{background:var(--warn)} .alert.info .bar{background:var(--info)}
.alert b{font-weight:600;font-size:14px;display:block} .alert span{font-size:13px;color:var(--fg-2)}
.alert .go{color:var(--fg-3)}

/* charts */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{fill:var(--fg-3);font:11px var(--f-body)}
.chart .grid-l{stroke:var(--line);stroke-width:1}
.chart-wrap{position:relative}
.tip{position:absolute;pointer-events:none;background:var(--panel-2);border:1px solid var(--line-2);border-radius:10px;padding:8px 10px;font-size:12px;
  box-shadow:var(--shadow);white-space:nowrap;transform:translate(-50%,-110%);opacity:0;transition:opacity .12s;z-index:3}
.tip.on{opacity:1}
.tip b{font-family:var(--f-num)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--fg-2);margin-top:8px}
.legend i{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:5px}
.legend i.dash{background:repeating-linear-gradient(90deg,var(--fg-3) 0 4px,transparent 4px 7px)}

/* barras por categoría */
.cbars{display:flex;flex-direction:column;gap:10px}
.cbar{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,2fr) auto;gap:10px;align-items:center;cursor:pointer;border:0;background:none;padding:2px 0;text-align:left}
.cbar .nm{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track{position:relative;height:10px;background:var(--line);border-radius:5px}
.track .f{position:absolute;inset:0 auto 0 0;border-radius:5px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.track .lim{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--fg-2)}
.cbar .pc{font:600 12.5px var(--f-num);min-width:46px;text-align:right}
.cbar:hover .nm{color:var(--accent)}

/* árbol */
.tree{display:flex;flex-direction:column;gap:10px}
.node{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.node>.row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 12px;cursor:pointer;background:var(--panel-2);border:0;width:100%;text-align:left}
.node.nat>.row .t{font:650 14.5px var(--f-display)}
.caret{transition:transform .2s;color:var(--fg-3);display:inline-block}
.open>.row .caret{transform:rotate(90deg)}
.kids{display:none;padding:6px 8px 8px 22px}
.open>.kids{display:block}
.cat{border:0;border-left:2px solid var(--line);border-radius:0;margin:4px 0}
.cat>.row{background:transparent;padding:8px 10px}
.cat.focus{border-left-color:var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0}
.meta{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.mini{width:90px;height:6px;background:var(--line);border-radius:4px;overflow:hidden}
.mini span{display:block;height:100%}
.sw{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:8px;vertical-align:-1px}
.tx{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:10px;padding:7px 8px;border-radius:8px;font-size:13.5px;cursor:pointer;border:0;background:none;width:100%;text-align:left}
.tx:hover{background:var(--panel-2)}
.tx .d{color:var(--fg-3);font:12px var(--f-num)}
.tx .ds{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{font-size:10.5px;padding:1px 6px;border-radius:5px;background:var(--line);color:var(--fg-2);margin-left:6px;font-weight:600}
.tag.p{background:var(--warn-soft);color:var(--warn)}

/* programados */
.habs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.hab{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;cursor:pointer;background:var(--panel-2);text-align:left;display:flex;flex-direction:column;gap:8px;position:relative}
.hab:hover{border-color:var(--line-2)}
.hab::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--ok)}
.hab.amarillo::before{background:var(--warn)} .hab.rojo::before{background:var(--crit)}
.hab .top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.hab h3{margin:0;font:600 14px/1.3 var(--f-body)}
.hab .sub{font-size:12px;color:var(--fg-3)}
.health{height:6px;background:var(--line);border-radius:4px;overflow:hidden}
.health span{display:block;height:100%;transition:width .4s}
.hab .foot{display:flex;justify-content:space-between;font-size:12.5px;color:var(--fg-2)}
.list-compact{display:flex;flex-direction:column}
.lc{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--line);cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;text-align:left;width:100%}
.lc:last-child{border-bottom:0}
.dot{width:9px;height:9px;border-radius:50%}
.dot.verde{background:var(--ok)}.dot.amarillo{background:var(--warn)}.dot.rojo{background:var(--crit)}

/* bandeja */
.pend{display:flex;flex-direction:column;gap:10px}
.pi{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--panel-2);transition:opacity .3s, transform .3s}
.pi.out{opacity:0;transform:translateX(30px)}
.pi .l1{display:flex;justify-content:space-between;gap:10px}
.pi .conf{font-size:12px;color:var(--fg-3)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line-2);background:var(--panel);border-radius:999px;padding:5px 11px;font-size:13px;cursor:pointer}
.chip.sel{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.btn{border:1px solid var(--line-2);background:var(--panel);padding:8px 14px;border-radius:10px;cursor:pointer;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--fg-3)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:var(--ok-ink,#06130c)}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:8px}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ingesta */
.phone{border:1px solid var(--line);border-radius:22px;background:var(--panel-2);display:flex;flex-direction:column;height:560px;overflow:hidden}
.phone-h{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center}
.phone-h .av{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:700}
.chat{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.b{max-width:84%;padding:8px 12px;border-radius:14px;font-size:14px;white-space:pre-wrap;word-wrap:break-word}
.b.me{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:4px}
.b.bot{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:4px}
.b small{display:block;opacity:.7;font-size:11px;margin-top:3px}
.trace{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.trace span{font:11px var(--f-num);padding:2px 6px;border-radius:5px;background:var(--line);color:var(--fg-2)}
.compose{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.compose select{width:auto}
.drop{display:block;border:1.5px dashed var(--line-2);border-radius:var(--r);padding:26px 16px;text-align:center;cursor:pointer;transition:.2s}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13.5px}
.kv dt{color:var(--fg-3)} .kv dd{margin:0}
.steps{display:flex;flex-direction:column;gap:6px}
.step{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:start;font-size:13px;padding:6px 0;border-bottom:1px dashed var(--line)}
.step:last-child{border-bottom:0}
.step .n{width:22px;height:22px;border-radius:50%;background:var(--line);display:grid;place-items:center;font:600 11px var(--f-num)}
.step.ok .n{background:var(--ok-soft);color:var(--ok)}

/* tabla */
.tbl-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:13.5px}
table.t th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-3);font-weight:600;padding:8px;border-bottom:1px solid var(--line)}
table.t td{padding:8px;border-bottom:1px solid var(--line)}
table.t td.r,table.t th.r{text-align:right}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s;z-index:20}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(480px,100%);background:var(--panel);border-left:1px solid var(--line);z-index:21;
  transform:translateX(100%);transition:transform .25s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer.on{transform:none}
.drawer-h{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.drawer-h h3{margin:0;font:650 17px var(--f-display)}
.drawer-b{padding:16px 18px;overflow:auto;display:flex;flex-direction:column;gap:16px}
.phva{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.phva div{border:1px solid var(--line);border-radius:10px;padding:10px;font-size:13px}
.phva b{display:block;font:600 11px var(--f-body);text-transform:uppercase;letter-spacing:.08em;color:var(--fg-3);margin-bottom:4px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form .full{grid-column:1/-1}

#toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--fg);color:var(--bg);padding:9px 16px;border-radius:999px;
  font-size:14px;font-weight:600;opacity:0;transition:.25s;z-index:40;pointer-events:none;max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
.bottom-nav{display:none}
.demo-banner{font-size:12px;color:var(--warn);background:var(--warn-soft);border-radius:8px;padding:6px 10px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .kpis{grid-template-columns:1fr 1fr}
  .kpi-main{grid-column:1/-1}
  .c8,.c7,.c6,.c5,.c4{grid-column:span 12}
}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{position:sticky;top:0;height:auto;z-index:10;border-right:0;border-bottom:1px solid var(--line);padding:10px 16px 12px;gap:10px;
    overflow:visible;padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .rail .desk{display:none}
  .horizons{display:flex;gap:6px}
  .hz{flex:0 0 auto;padding:7px 12px}
  .rail-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .rail .lbl{display:none}
  .main{padding-inline:16px;padding-block:14px 110px}
  .tabs{display:none}
  .bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;background:var(--panel);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom,0px);z-index:15}
  .bottom-nav button{border:0;background:none;padding:9px 2px 8px;font-size:11px;color:var(--fg-3);display:flex;flex-direction:column;align-items:center;gap:2px;position:relative}
  .bottom-nav button svg{width:22px;height:22px}
  .bottom-nav button[aria-selected="true"]{color:var(--accent)}
  .bottom-nav .badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:17px;height:17px;font-size:10px}
  .kpi-main .big{font-size:28px}
  .kpis>.kpi:last-child{grid-column:1/-1}
  .phone{height:520px}
  .form{grid-template-columns:1fr}
}
@media (min-width:901px){ .rail-row{display:flex;flex-direction:column;gap:14px} .mob{display:none} }

/* ---------- v2.1: acciones reversibles, historial, categorías ---------- */
#toast{display:flex;align-items:center;gap:6px}
#toast.acts{pointer-events:auto;padding:6px 6px 6px 16px}
#toast button{border:0;background:transparent;color:var(--bg);font-weight:700;font-size:14px;padding:6px 10px;border-radius:999px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#toast button:hover{background:rgba(127,127,127,.22)}
.act.rev{opacity:.6}
.act .tag{margin-left:0}
.hfil{display:grid;grid-template-columns:2fr repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.hfil .input{padding:7px 9px;font-size:13.5px}
.hdate{display:flex;flex-direction:column;gap:2px;font-size:11px}
.hlista{display:flex;flex-direction:column}
.hsep{font:600 11px var(--f-body);text-transform:uppercase;letter-spacing:.08em;color:var(--fg-3);padding:12px 8px 4px;border-bottom:1px solid var(--line)}
.hrow{grid-template-columns:62px minmax(0,1fr) auto;border-bottom:1px solid var(--line);border-radius:0}
.hrow .ds{white-space:normal}
.hmeta{display:block;font-size:12px;color:var(--fg-3);margin-top:1px}
.rango{display:flex;gap:4px;margin-top:4px}
.rango .input{padding:4px 6px;font-size:12px;min-width:0}
.bacts{display:flex;gap:6px;margin-top:6px}
.bacts button{border:1px solid var(--line-2);background:var(--panel-2);border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;color:var(--fg)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.pi.lote:has(input:not(:checked)){opacity:.55}
.fab{display:none}
@media (max-width:1180px){ .hfil{grid-template-columns:1fr 1fr} .hfil #hq{grid-column:1/-1} }
@media (max-width:900px){
  .fab{display:grid;place-items:center;position:fixed;right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));width:54px;height:54px;border-radius:18px;border:0;
    background:var(--accent);color:var(--accent-ink);font-size:28px;line-height:1;box-shadow:var(--shadow);z-index:16;cursor:pointer}
  .hrow{grid-template-columns:52px minmax(0,1fr) auto}
}

.hz-s{display:none}
.hlista.agrupado .hrow{grid-template-columns:minmax(0,1fr) auto}
.hlista.agrupado .hrow .d{display:none}
.hfil{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.hfil #hq{grid-column:1/-1}
#presT [data-m]{min-width:92px;width:110px}
#presT select{min-width:120px;max-width:150px}
#presT .rango{max-width:230px}
#presT td,#presT th{padding:7px 6px}

/* ---------- v2.2: slider universal (reemplaza las listas desplegables) ----------
   Fila de opciones deslizable: flechas ‹ ›, rueda del mouse, arrastre, teclado y bordes que se desvanecen
   cuando hay más opciones. La <select> original sigue en el DOM (oculta) como fuente del valor. */
.sld{position:relative;display:flex;align-items:center;min-width:0;max-width:100%;gap:4px}
.sld-track{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;min-width:0;flex:1;padding:2px;
  scroll-snap-type:x proximity;overscroll-behavior-x:contain;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fi,0px),#000 calc(100% - var(--fd,0px)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--fi,0px),#000 calc(100% - var(--fd,0px)),transparent 100%)}
.sld-track::-webkit-scrollbar{display:none}
.sld-track.arrastre{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.sld.ini .sld-track{--fi:22px} .sld.fin .sld-track{--fd:22px}
.sld-op{flex:0 0 auto;scroll-snap-align:center;border:1px solid var(--line);background:var(--panel-2);color:var(--fg-2);border-radius:999px;
  padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s;user-select:none}
.sld-op:hover{border-color:var(--line-2);color:var(--fg)}
.sld-op[aria-checked="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sld-op:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sld-arr{position:relative;flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--fg-2);
  display:grid;place-items:center;cursor:pointer;font-size:14px;line-height:1;padding:0;transition:opacity .15s}
.sld-arr:hover{color:var(--fg);border-color:var(--line-2)}
.sld-arr::before{content:"";position:absolute;inset:-4px}   /* 3.19: se ve de 20 px, se toca en 28 px (mínimo táctil 24 px) */
.sld-arr[disabled]{opacity:0;pointer-events:none}
.sld:not(.desborda) .sld-arr{display:none}
.sld.dis{opacity:.5;pointer-events:none}
.sld.sm .sld-op{padding:4px 10px;font-size:12.5px}
.sld.sm .sld-arr{width:20px;height:20px;font-size:13px}
select.input.sld-src{display:none!important}
#presT .sld{width:230px}
.hfil .sld{grid-column:1/-1}
.hfil{grid-template-columns:1fr}
/* horizontes: en el riel ancho se ven los 9 (cuadrícula); apilado, es slider */
.sld-hz .sld-arr{display:none}
@media (max-width:900px){
  .sld-hz.desborda .sld-arr{display:grid}
  .sld-hz .horizons{display:flex;overflow-x:auto;scrollbar-width:none;gap:6px}
  .sld-hz .hz{flex:0 0 auto;padding:7px 14px;scroll-snap-align:center}
}
@media (min-width:901px){ .sld-hz .horizons{display:grid;grid-template-columns:repeat(3,1fr);-webkit-mask-image:none;mask-image:none;overflow:visible;cursor:default;padding:0} }
.compose{flex-wrap:wrap}.compose .sld{flex:1 1 100%}
.field,.form>*,.drawer-b>*,.pi>*,.l1>*{min-width:0}
.drawer-b{overflow-x:hidden}

/* ---------- v2.3: apariencia ---------- */
.theme-btn{border:1px solid var(--line);background:var(--panel-2);width:30px;height:30px;border-radius:9px;cursor:pointer;display:grid;place-items:center;color:var(--fg-2);padding:0;flex:0 0 auto}
.theme-btn:hover{color:var(--fg);border-color:var(--line-2)}
.theme-btn i{width:14px;height:14px;border-radius:50%;background:conic-gradient(var(--accent) 0 50%,var(--fg-3) 50% 100%)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.sw-op{border:1px solid var(--line);background:var(--panel-2);border-radius:12px;padding:10px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--fg-2)}
.sw-op:hover{border-color:var(--line-2);color:var(--fg)}
.sw-op[aria-checked="true"]{border-color:var(--fg);color:var(--fg);box-shadow:0 0 0 1px var(--fg) inset}
.sw-op .dot2{width:26px;height:26px;border-radius:50%;display:block;border:2px solid var(--panel)}
.tema-preview{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border:1px dashed var(--line-2);border-radius:12px;padding:10px}
.brand{min-width:0}.brand>div{min-width:0}
.rail{overflow-x:hidden}
@media (min-width:901px){ .brand .live>span{display:none} .brand h1{font-size:17px} }

/* ---------- v2.4: primeros pasos ---------- */
.pasos-barra{height:6px;background:var(--line);border-radius:4px;overflow:hidden}
.pasos-barra span{display:block;height:100%;background:var(--accent);transition:width .4s}
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.pasos li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:var(--panel-2)}
.pasos li.ok{opacity:.72}
.pasos .chk{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;font-size:12px;font-weight:700}
.pasos li.ok .chk{background:var(--ok);border-color:var(--ok);color:var(--ok-ink,#06130c)}
.guia{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.55}
code.cp{font-family:var(--f-num);font-size:12.5px;background:var(--panel-2);border:1px solid var(--line);padding:1px 6px;border-radius:6px;word-break:break-all;user-select:all}

/* ---------- v2.5: cola de extractos ---------- */
.cola-opc{display:grid;gap:10px;margin:12px 0 8px}
.chk-row{display:grid;grid-template-columns:20px 1fr;gap:8px;font-size:13.5px;align-items:start;cursor:pointer}
.chk-row input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent)}
.cola-lista{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow:auto}
.cola-item{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:start;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--panel-2)}
.cola-item .ci-n{font-weight:600;font-size:13.5px;word-break:break-all}
.cola-item .ci-e{font-weight:700;color:var(--fg-3)}
.cola-item.ok .ci-e{color:var(--ok)} .cola-item.error .ci-e{color:var(--crit)} .cola-item.procesando .ci-e{color:var(--accent);animation:pulse 1s infinite}
.cola-item .sld{margin-top:6px}
.ctas{display:flex;flex-direction:column;gap:8px}
.cta-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.6fr);gap:6px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--panel-2)}
.cta-row [data-ca]{grid-column:1/2} .cta-row>span{justify-self:end}
.cta-row .input{padding:6px 8px;font-size:13px}

/* ---------- v2.5: guía interactiva ---------- */
.rutas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.ruta{border:1px solid var(--line);background:var(--panel-2);border-radius:12px;padding:10px 12px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:3px;color:var(--fg)}
.ruta span{font-size:12px;color:var(--fg-3)}
.ruta.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:var(--accent-soft)}
.mini-prog{display:block;height:4px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:4px}
.mini-prog span{display:block;height:100%;background:var(--accent)}
.g-pasos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.g-pasos li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:start;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel-2)}
.g-pasos li p{margin:4px 0 0;font-size:13.5px;color:var(--fg-2)}
.g-pasos li.ok{opacity:.7}
.g-chk{width:32px;height:32px;border-radius:50%;border:2px solid var(--line-2);background:var(--panel);font:700 13px var(--f-num);cursor:pointer;color:var(--fg-2)}
.g-pasos li.ok .g-chk{background:var(--ok);border-color:var(--ok);color:var(--ok-ink,#06130c)}
.g-por{font-size:12.5px!important;color:var(--fg-3)!important}
.g-por span{font-weight:700;color:var(--fg-2)}
.prioridades{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.prioridades li{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--panel-2);font-size:13.5px}
.prioridades .n{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:700 12px var(--f-num)}
.p-res{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--panel-2)}
#tourHole{position:fixed;z-index:60;border-radius:12px;pointer-events:none;box-shadow:0 0 0 9999px rgba(5,10,12,.62);outline:2px solid var(--accent);transition:all .25s ease}
#tourTip{position:fixed;z-index:61;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);transition:top .25s,left .25s}
#tourTip p{margin:6px 0 0;font-size:13.5px;line-height:1.5}
#tourTip .tt-h{display:flex;justify-content:space-between;align-items:center;font-size:12px}
#tourTip .tt-t{font:650 16px var(--f-display);display:block;margin-top:2px}
body.touring .fab{z-index:1}

/* =====================================================================================
   v3.0 · Sistema de diseño premium
   Capa de producto sobre los tokens existentes: más aire, jerarquía tipográfica de vista, superficies con
   elevación sutil y un SISTEMA DE COLOR SEMÁNTICO en cuatro grupos reservados:
     1 · Marca ......... --accent (elegible en Apariencia) y la tinta del texto.
     2 · Estado ........ verde / ámbar / rojo / azul-info. Solo significan estado: nunca decoran.
     3 · Fases ......... Definir · Objetivo · Análisis · Decisión · Ejecución (flujo de decisiones y metas).
     4 · Tipos de dato . naturalezas (Fijo/Variable/Inversión/Deuda) y tipos de meta (Necesidad/Deseo/Hábito/Actividad).
   En el análisis de decisiones: Pros = verde, Contras = naranja/rojo, línea de tiempo 10-10-10 = azul.
   ===================================================================================== */
:root{
  /* aprobado 3 oct 2026: fases = rampa índigo (avance), tipos = tonos propios fuera de los semáforos */
  --ph1-b:#e0dbff; --ph2-b:#c6bbff; --ph3-b:#ad9cff; --ph4-b:#9683ff; --ph5-b:#8a72ff;
  --pro:var(--ok); --contra-b:#f08a4b; --tiempo:var(--info);
  --t-necesidad-b:#2bb3a3; --t-deseo-b:#d68be8; --t-habito-b:#a3d14c; --t-actividad-b:#4cc3e0;
  --elev-1:0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.25);
  --elev-2:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.28);
  --ring-track:var(--line);
}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){
  --ph1-b:#6c5ce0; --ph2-b:#5d4bd6; --ph3-b:#4f3cc4; --ph4-b:#4230ae; --ph5-b:#362596;
  --contra-b:#c4561a; --tiempo:var(--info); --t-necesidad-b:#0b7a6e; --t-deseo-b:#9440b8; --t-habito-b:#557a10; --t-actividad-b:#0a7891;
  --elev-1:0 1px 2px rgba(20,40,40,.06); --elev-2:0 10px 28px rgba(20,40,40,.10);
}}
:root[data-theme="light"]{
  --ph1-b:#6c5ce0; --ph2-b:#5d4bd6; --ph3-b:#4f3cc4; --ph4-b:#4230ae; --ph5-b:#362596;
  --contra-b:#c4561a; --tiempo:var(--info); --t-necesidad-b:#0b7a6e; --t-deseo-b:#9440b8; --t-habito-b:#557a10; --t-actividad-b:#0a7891;
  --elev-1:0 1px 2px rgba(20,40,40,.06); --elev-2:0 10px 28px rgba(20,40,40,.10);
}

/* superficies */
.panel{box-shadow:var(--elev-1);border-radius:16px}
.panel:hover{border-color:var(--line-2)}
.ph h2{font-size:15.5px}
h1,h2,h3{text-wrap:balance}
.btn{transition:transform .08s ease, background .15s, border-color .15s}
.btn:active{transform:translateY(1px)}
.btn.pri{box-shadow:0 1px 0 rgba(255,255,255,.18) inset}

/* cabecera de vista */
.vh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:2px 0 16px}
.vh h1{font:700 26px/1.1 var(--f-display);letter-spacing:-.025em;margin:0}
.vh p{margin:6px 0 0;color:var(--fg-2);font-size:14px;max-width:68ch}
.vh .eyebrow{font:600 11px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:6px;display:block}

/* pestañas con ícono (escritorio) */
.tab svg{width:16px;height:16px;opacity:.75}
.tab[aria-selected="true"] svg{opacity:1;color:var(--accent)}

/* control segmentado */
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);flex-wrap:wrap;max-width:100%}
.seg button{border:0;background:none;padding:7px 12px;border-radius:9px;font-weight:600;font-size:13px;color:var(--fg-2);cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--fg);box-shadow:var(--elev-1)}
.seg .n{font:600 11px var(--f-num);padding:1px 6px;border-radius:8px;background:var(--line);color:var(--fg-2)}
.seg button[aria-pressed="true"] .n{background:var(--accent-soft);color:var(--accent)}

/* tiras de indicadores */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--elev-1);min-width:0}
.stat .k{font:600 11px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.stat .v{font:650 22px/1.2 var(--f-num);letter-spacing:-.02em;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .s{font-size:12.5px;color:var(--fg-2);margin-top:2px}

/* chips de tipo (grupo 4) y fases (grupo 3) */
.tchip{display:inline-flex;align-items:center;gap:5px;font:600 11.5px var(--f-body);padding:2px 9px 2px 7px;border-radius:999px;
  color:var(--c,var(--fg-2));background:color-mix(in srgb,var(--c,var(--fg-3)) 14%,transparent)}
.tchip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tchip[data-t="Necesidad"]{--c:var(--t-necesidad)} .tchip[data-t="Deseo"]{--c:var(--t-deseo)}
.tchip[data-t="Hábito"]{--c:var(--t-habito)} .tchip[data-t="Actividad"]{--c:var(--t-actividad)}
.tchip.usd{--c:var(--info)} .tchip.ent{--c:var(--fg-2)}
.tchip.p3{--c:var(--crit)} .tchip.p2{--c:var(--warn)} .tchip.p1{--c:var(--fg-3)}

/* anillo de progreso */
.ring{--p:0;--c:var(--accent);width:var(--sz,64px);height:var(--sz,64px);border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:conic-gradient(var(--c) calc(var(--p)*1%),var(--ring-track) 0)}
.ring>span{width:calc(100% - 12px);height:calc(100% - 12px);border-radius:50%;background:var(--panel);display:grid;place-items:center;
  font:650 13px var(--f-num)}

/* estado vacío */
.vacio{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:28px 12px;color:var(--fg-2)}
.vacio svg{width:34px;height:34px;color:var(--fg-3)}
.vacio b{color:var(--fg);font:650 15px var(--f-display)}
.vacio p{margin:0;font-size:13.5px;max-width:46ch}

/* ---------- HÁBITOS (tracker) ---------- */
.habitos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.hcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--elev-1);min-width:0}
.hcard .top{display:flex;gap:12px;align-items:center}
.hcard h3{margin:0;font:650 15px var(--f-display)}
.hcard .sub{font-size:12.5px;color:var(--fg-3)}
.racha{display:inline-flex;align-items:center;gap:4px;font:650 12.5px var(--f-num);color:var(--warn)}
.racha svg{width:14px;height:14px}
.semana{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.semana span{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--fg-3)}
.semana i{width:100%;aspect-ratio:1;max-width:30px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);display:block}
.semana i.ok{background:var(--t-habito);border-color:var(--t-habito)}
.semana i.parcial{background:color-mix(in srgb,var(--t-habito) 35%,transparent);border-color:color-mix(in srgb,var(--t-habito) 50%,transparent)}
.semana i.libre{border-style:dashed;opacity:.5}
.semana span.hoy{color:var(--fg);font-weight:700}
.checkin{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.checkin .big{flex:1 1 auto;justify-content:center;padding:10px 14px}
.checkin .big.hecho{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.heat{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;max-width:100%}
.heat i{aspect-ratio:1;border-radius:3px;background:var(--panel-2);display:block;min-width:6px}
.heat i[data-n="1"]{background:color-mix(in srgb,var(--t-habito) 30%,var(--panel-2))}
.heat i[data-n="2"]{background:color-mix(in srgb,var(--t-habito) 60%,var(--panel-2))}
.heat i[data-n="3"]{background:var(--t-habito)}
.heat-wrap{overflow-x:auto}

/* ---------- METAS (tablero por estado) ---------- */
.kan{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:14px;overflow-x:auto;padding-bottom:6px}
.kcol{background:var(--panel-2);border:1px solid var(--line);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:10px;min-width:0;min-height:120px}
.kcol>header{display:flex;justify-content:space-between;align-items:center;padding:2px 4px}
.kcol>header b{font:650 13.5px var(--f-display);display:flex;align-items:center;gap:7px}
.kcol>header b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.kcol[data-e="Idea"]{--c:var(--ph1)} .kcol[data-e="Planeado"]{--c:var(--ph2)} .kcol[data-e="Ahorrando"]{--c:var(--ph3)} .kcol[data-e="Logrado"]{--c:var(--ph5)}
.kcol.over{outline:2px dashed var(--accent);outline-offset:-4px}
.meta{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 12px;display:flex;flex-direction:column;gap:8px;cursor:pointer;text-align:left;box-shadow:var(--elev-1)}
.meta:hover{border-color:var(--line-2)}
.meta[draggable="true"]{cursor:grab}
.meta .l1{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.meta b{font-weight:650;font-size:14px}
.meta .barra{height:6px;border-radius:4px;background:var(--line);overflow:hidden}
.meta .barra span{display:block;height:100%;background:var(--c,var(--accent))}
.meta .pie{display:flex;justify-content:space-between;font-size:12px;color:var(--fg-2);gap:6px;flex-wrap:wrap}
.plan3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.plan3 .field textarea{min-height:64px;resize:vertical}
.checklist{display:flex;flex-direction:column;gap:6px}
.checklist label{display:grid;grid-template-columns:20px 1fr 28px;gap:8px;align-items:center;font-size:14px}
.checklist input[type=checkbox]{width:18px;height:18px;accent-color:var(--ok)}

/* ---------- DECIDIR ---------- */
.stepper{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;counter-reset:paso}
.stepper button{border:0;background:none;padding:0;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px;color:var(--fg-3);font:600 12.5px var(--f-body);min-width:0}
.stepper button::before{content:"";height:5px;border-radius:4px;background:var(--line)}
.stepper button.hecho::before,.stepper button[aria-current="step"]::before{background:var(--c)}
.stepper button[aria-current="step"]{color:var(--fg)}
.stepper button:nth-child(1){--c:var(--ph1)} .stepper button:nth-child(2){--c:var(--ph2)} .stepper button:nth-child(3){--c:var(--ph3)}
.stepper button:nth-child(4){--c:var(--ph4)} .stepper button:nth-child(5){--c:var(--ph5)}
.fase{border-left:3px solid var(--c);padding-left:14px;display:flex;flex-direction:column;gap:10px}
.fase[data-f="1"]{--c:var(--ph1)} .fase[data-f="2"]{--c:var(--ph2)} .fase[data-f="3"]{--c:var(--ph3)} .fase[data-f="4"]{--c:var(--ph4)} .fase[data-f="5"]{--c:var(--ph5)}
.fase>h3{margin:0;font:650 16px var(--f-display);display:flex;gap:8px;align-items:center}
.fase>h3 small{font:600 11px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--c)}
.ctx{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.ctx div{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-width:0}
.ctx span{display:block;font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.06em}
.ctx b{font:650 15px var(--f-num)}
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
@media (min-width:901px){.opciones:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
.opc{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0;box-shadow:var(--elev-1)}
.opc.reco{border-color:var(--ph4);box-shadow:0 0 0 1px var(--ph4) inset,var(--elev-2)}
.opc.eleg{outline:2px solid var(--accent);outline-offset:2px}
.opc header{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.opc h4{margin:0;font:650 15px var(--f-display)}
.reco-tag{font:700 10.5px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ph4)}
.pc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px}
.pc li{display:grid;grid-template-columns:14px 1fr auto;gap:6px;align-items:start}
.pc li::before{content:"+";font-weight:800;color:var(--pro)}
.pc.contra li::before{content:"−";color:var(--contra)}
.peso{font:600 11px var(--f-num);color:var(--fg-3)}
.score{display:flex;align-items:center;gap:10px}
.score .bar{flex:1;height:8px;border-radius:5px;background:var(--line);overflow:hidden;display:flex}
.score .bar span{height:100%}
.score b{font:700 18px var(--f-num)}
details.acc{border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
details.acc>summary{cursor:pointer;padding:8px 10px;font:600 13px var(--f-body);list-style:none;display:flex;justify-content:space-between;gap:8px}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::after{content:"▸";color:var(--fg-3);transition:transform .2s}
details.acc[open]>summary::after{transform:rotate(90deg)}
details.acc>div{padding:2px 10px 10px;font-size:13px;color:var(--fg-2)}
.t10{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;position:relative}
.t10 div{border-top:3px solid var(--tiempo);padding-top:6px;min-width:0}
.t10 b{display:block;font:650 11.5px var(--f-num);color:var(--tiempo)}
.reco-box{border:1px solid color-mix(in srgb,var(--ph4) 45%,var(--line));background:color-mix(in srgb,var(--ph4) 8%,var(--panel));border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.reco-box .eyebrow{font:700 11px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ph4)}
.reco-box b.big{font:700 19px var(--f-display)}
.estado-dec{display:inline-flex;align-items:center;gap:6px;font:650 12px var(--f-body);padding:3px 10px;border-radius:999px;background:var(--line);color:var(--fg-2)}
.estado-dec[data-e="Pendiente aprobación"]{background:var(--warn-soft);color:var(--warn)}
.estado-dec[data-e="Ejecutada"],.estado-dec[data-e="Aprobada"]{background:var(--ok-soft);color:var(--ok)}
.editable-list{display:flex;flex-direction:column;gap:6px}
.editable-list .row{display:grid;grid-template-columns:1fr 92px 30px;gap:6px;align-items:center}

/* ---------- AUDITORÍA ---------- */
.grupo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel-2)}
.grupo .gn{font:650 14px var(--f-body);text-transform:capitalize}
.grupo .gd{font-size:12px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grupo .acc2{display:flex;gap:6px;align-items:center;grid-column:1/-1;flex-wrap:wrap}
.grupo .acc2 select{max-width:100%}
.lista-g{display:flex;flex-direction:column;gap:8px}
.alcance{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;color:var(--fg-2)}
.alcance input{accent-color:var(--accent)}
.desf{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.desf span{font-size:12px;padding:2px 8px;border-radius:7px;background:var(--panel);border:1px solid var(--line)}

/* ---------- extractos ---------- */
.imp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:13px}
.imp-row:last-child{border-bottom:0}
.imp-row b{font-weight:600;word-break:break-all}
.cuadre{font:650 11.5px var(--f-body);padding:2px 8px;border-radius:999px}
.cuadre.ok{background:var(--ok-soft);color:var(--ok)} .cuadre.diferencia{background:var(--crit-soft);color:var(--crit)} .cuadre.no_aplica{background:var(--line);color:var(--fg-3)}
.drop-op{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}

/* sistema de color (Apariencia) */
.paleta{display:flex;flex-direction:column;gap:10px}
.paleta .g{display:grid;grid-template-columns:120px 1fr;gap:8px;align-items:center;font-size:12.5px}
.paleta .g b{font-weight:650}
.paleta .sws{display:flex;gap:6px;flex-wrap:wrap}
.paleta .sws span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--fg-2)}
.paleta .sws i{width:14px;height:14px;border-radius:4px;display:inline-block}

/* asistente en Resumen */
.asist{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.asist .ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--ph4) 16%,transparent);color:var(--ph4)}
.asist .ico svg{width:24px;height:24px}

@media (max-width:900px){
  .vh h1{font-size:22px}
  .stepper{grid-template-columns:repeat(5,minmax(48px,1fr));font-size:11px}
  .plan3{grid-template-columns:1fr}
  .kan{grid-template-columns:repeat(4,minmax(220px,82vw))}
  .t10{grid-template-columns:1fr}
  .paleta .g{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: no-preference){
  .hcard,.meta,.opc,.grupo{transition:border-color .15s, transform .15s}
  .meta:hover,.opc:hover{transform:translateY(-1px)}
}

/* v3.0 · pulido final */
.mapa-habitos{display:grid;gap:10px;margin-top:18px}
.mapa-habitos .fila{display:grid;grid-template-columns:150px minmax(0,1fr) 54px;gap:12px;align-items:center}
.mapa-habitos .fila b{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapa-habitos .heat{grid-template-rows:none;grid-auto-flow:row;grid-template-columns:repeat(84,minmax(4px,1fr));gap:2px}
.mapa-habitos .heat i{aspect-ratio:auto;height:16px;min-width:0;border-radius:2px}
.mapa-habitos .pctl{font:600 12px var(--f-num);text-align:right;color:var(--fg-2)}
.mapa-ley{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--fg-3);justify-content:flex-end}
.mapa-ley i{width:12px;height:12px;border-radius:2px;display:inline-block;background:var(--panel-2)}
@media (max-width:900px){
  .mapa-habitos .fila{grid-template-columns:minmax(0,1fr) 44px}
  .mapa-habitos .fila .heat{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(42,minmax(3px,1fr))}
  .mapa-habitos .fila .heat i:nth-child(-n+42){display:none}
  .pi .row-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
  .pi .row-actions .btn.ok{grid-column:1/-1}
  .pi .row-actions .alcance{grid-column:1/-1;font-size:12px}
  .pi .row-actions .btn{justify-content:center}
  .main{padding-block:14px 150px}
}
/* barra de pestañas: 10 secciones caben en 1280 px; debajo, desplazable con borde difuminado */
.tabs{gap:0;mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:24px}
.tab{padding:10px 11px;font-size:13.5px;display:inline-flex;align-items:center;gap:6px}
@media (max-width:1280px){.tab svg{display:none}.tab{padding:10px 9px}}

/* ======================================================================
   Panel maestro contraíble (escritorio): 304 px ⇄ riel de 76 px con los
   valores activos. Un toque en un icono abre el panel flotante sobre la
   página (sin mover el contenido) y se cierra al elegir; el pasador lo fija.
   ====================================================================== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rail-panel{display:contents}
.rail-mini{display:none}
.rail-toggle{display:none}
@media (min-width:901px){
  .app{transition:grid-template-columns .32s cubic-bezier(.2,.8,.2,1)}
  .rail-toggle{display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);
    background:var(--panel-2);color:var(--fg-2);cursor:pointer;padding:0;transition:color .15s,border-color .15s,background .15s}
  .rail-toggle:hover{color:var(--fg);border-color:var(--line-2)}
  .rail-toggle svg,.rail-mini svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .rail-toggle:focus-visible,.rail-mini button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  body.rail-col .app{grid-template-columns:76px minmax(0,1fr)}
  body.rail-col .rail{padding:16px 10px 18px;gap:12px;align-items:center;overflow:visible}
  body.rail-col .brand{flex-direction:column;gap:10px}
  body.rail-col .brand>div:not(.brand-mark),body.rail-col .brand .live,body.rail-col .brand .rail-toggle{display:none}
  body.rail-col .rail-panel{display:none}
  body.rail-col .rail-mini{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;flex:1;animation:railIn .28s ease both}

  .rail-mini .rm-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:58px;padding:9px 2px 7px;
    border:1px solid transparent;border-radius:12px;background:none;color:var(--fg-2);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
  .rail-mini .rm-btn:hover{background:var(--panel-2);color:var(--fg);border-color:var(--line)}
  .rail-mini .rm-btn[aria-expanded="true"]{background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
  .mini-v{font:650 10.5px/1.15 var(--f-body,inherit);max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.01em}
  .rm-btn.activo .mini-v{color:var(--accent)}
  .rm-btn.activo::after{content:"";position:absolute;top:6px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--panel)}

  .mini-per{display:grid;grid-template-columns:16px minmax(0,1fr) 16px;align-items:center;width:62px;padding:6px 0 7px;border-radius:12px;
    background:var(--panel-2);border:1px solid var(--line)}
  .mini-arr{border:0;background:none;color:var(--fg-3);font-size:15px;line-height:1;cursor:pointer;padding:6px 0;border-radius:6px}
  .mini-arr:hover{color:var(--fg);background:var(--line)}
  .mini-lbl{border:0;background:none;padding:0;cursor:pointer;color:var(--fg);font:700 11.5px/1.15 var(--f-display);text-align:center;white-space:pre-line}
  .mini-time{grid-column:1/-1;height:3px;margin:6px 8px 0;background:var(--line);border-radius:3px;overflow:hidden}
  .mini-time i{display:block;height:100%;background:var(--accent)}
  .mini-sep{width:28px;height:1px;background:var(--line);margin:4px 0}
  .mini-estado{display:flex;flex-direction:column;align-items:center;gap:3px;font:600 10px var(--f-num);color:var(--fg-3)}
  .mini-estado i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
  .rail-mini .expandir{margin-top:auto;color:var(--fg-3)}

  /* panel flotante (peek) */
  body.rail-col.rail-peek .rail{position:fixed;left:0;top:0;bottom:0;width:304px;height:100vh;z-index:40;padding:20px 18px 24px;gap:18px;
    align-items:stretch;overflow:auto;box-shadow:0 24px 60px -12px rgba(0,0,0,.35),0 0 0 1px var(--line);animation:peekIn .26s cubic-bezier(.2,.8,.2,1) both}
  body.rail-col.rail-peek .brand{flex-direction:row}
  body.rail-col.rail-peek .brand>div:not(.brand-mark),body.rail-col.rail-peek .brand .rail-toggle{display:block}
  body.rail-col.rail-peek .brand .rail-toggle{display:grid}
  body.rail-col.rail-peek .rail-panel{display:contents}
  body.rail-col.rail-peek .rail-mini{display:none}
  body.rail-col.rail-peek::after{content:"";position:fixed;inset:0;z-index:39;background:color-mix(in srgb,var(--bg) 35%,transparent);backdrop-filter:blur(1.5px);animation:fadeIn .2s both}
  .rail .foco{border-radius:12px;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent),0 0 0 8px color-mix(in srgb,var(--accent) 10%,transparent);
    transition:box-shadow .3s}
  @keyframes railIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
  @keyframes peekIn{from{transform:translateX(-24px);opacity:.4}to{transform:none;opacity:1}}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){ .app,.rail-mini,.rail{transition:none!important;animation:none!important} }
@media (min-width:901px){ .main{grid-column:2} body.rail-col.rail-peek .brand .live{display:inline-flex} }
.brand-mark{flex:0 0 auto;font-size:13.5px;letter-spacing:-.03em}
@media (min-width:901px){
  .brand{position:relative}
  .brand .live{position:absolute;left:27px;top:-3px;margin:0!important;padding:2px;border-radius:50%;background:var(--panel)}
  .brand .live i{width:8px;height:8px}
  .brand h1{overflow:hidden;text-overflow:ellipsis}
  body.rail-col:not(.rail-peek) .brand .live{display:inline-flex;left:calc(50% + 10px);top:-3px}
}
@media (min-width:901px){ .brand{gap:8px} .brand h1{font-size:16px} .brand>div:not(.brand-mark){flex:1} }


/* ======================================================================
   Paletas de ESTADO (Apariencia → Colores de estado). Solo cambian bien /
   atención / problema / info (y contras, que son riesgo). Marca, fases y
   tipos de dato no cambian. Clásica = valores base del archivo.
   ====================================================================== */
:root{ --ok-ink:#06130c; --ok-soft:color-mix(in srgb,var(--ok) 14%,transparent); --warn-soft:color-mix(in srgb,var(--warn) 15%,transparent);
  --crit-soft:color-mix(in srgb,var(--crit) 15%,transparent) }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --ok-ink:#ffffff } }
:root[data-theme="light"]{ --ok-ink:#ffffff }
/* Apta para daltonismo (Okabe-Ito): verde azulado · amarillo-naranja · bermellón · azul */
:root[data-estados="daltonico"]{ --ok-b:#29c4a0; --warn-b:#f0b43c; --crit-b:#f07a45; --info-b:#6db8f0; --contra-b:#f59a6a }
@media (prefers-color-scheme: light){ :root[data-estados="daltonico"]:not([data-theme="dark"]){ --ok-b:#00805c; --warn-b:#966000; --crit-b:#b8460a; --info-b:#0a63a0; --contra-b:#b04a12 } }
:root[data-estados="daltonico"][data-theme="light"]{ --ok-b:#00805c; --warn-b:#966000; --crit-b:#b8460a; --info-b:#0a63a0; --contra-b:#b04a12 }
/* Suave: los mismos significados con menos saturación */
:root[data-estados="suave"]{ --ok-b:#6fbf98; --warn-b:#d9b062; --crit-b:#d98080; --info-b:#8fb3d6; --contra-b:#dc9a76 }
@media (prefers-color-scheme: light){ :root[data-estados="suave"]:not([data-theme="dark"]){ --ok-b:#3b7f5d; --warn-b:#8f6a1f; --crit-b:#a24646; --info-b:#46698f; --contra-b:#9d5b37 } }
:root[data-estados="suave"][data-theme="light"]{ --ok-b:#3b7f5d; --warn-b:#8f6a1f; --crit-b:#a24646; --info-b:#46698f; --contra-b:#9d5b37 }
/* Alto contraste: más saturación y luminosidad para pantallas al sol o vista cansada */
:root[data-estados="intenso"]{ --ok-b:#4ade80; --warn-b:#fbbf24; --crit-b:#ff5c5c; --info-b:#60b4ff; --contra-b:#ff8f4a }
@media (prefers-color-scheme: light){ :root[data-estados="intenso"]:not([data-theme="dark"]){ --ok-b:#0f7a3f; --warn-b:#8a5a00; --crit-b:#b3121b; --info-b:#0b5cad; --contra-b:#b84300 } }
:root[data-estados="intenso"][data-theme="light"]{ --ok-b:#0f7a3f; --warn-b:#8a5a00; --crit-b:#b3121b; --info-b:#0b5cad; --contra-b:#b84300 }
.pal-op{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--panel-2);
  border-radius:12px;padding:10px 12px;cursor:pointer;color:var(--fg)}
.pal-op:hover{border-color:var(--line-2)}
.pal-op[aria-checked="true"]{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg) inset}
.pal-op .pts{display:flex;gap:4px}.pal-op .pts i{width:14px;height:14px;border-radius:50%;display:block}
.pal-op small{grid-column:2;color:var(--fg-3);font-size:12px}
.paletas{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}

/* Paletas de FASES y de TIPOS DE DATO (Apariencia). La predeterminada es la aprobada (Índigo / Propios). */
:root[data-fases="oceano"]{ --ph1-b:#c8f1f0; --ph2-b:#96e0e3; --ph3-b:#63c9d6; --ph4-b:#3eaecb; --ph5-b:#2a93bf }
@media (prefers-color-scheme: light){ :root[data-fases="oceano"]:not([data-theme="dark"]){ --ph1-b:#237f85; --ph2-b:#1f7f8e; --ph3-b:#186e86; --ph4-b:#135d7c; --ph5-b:#0f4c70 } }
:root[data-fases="oceano"][data-theme="light"]{ --ph1-b:#237f85; --ph2-b:#1f7f8e; --ph3-b:#186e86; --ph4-b:#135d7c; --ph5-b:#0f4c70 }
:root[data-fases="grafito"]{ --ph1-b:#e6eaec; --ph2-b:#c3cbcf; --ph3-b:#a3aeb4; --ph4-b:#8796a0; --ph5-b:#7b8d97 }
@media (prefers-color-scheme: light){ :root[data-fases="grafito"]:not([data-theme="dark"]){ --ph1-b:#627279; --ph2-b:#5e6e75; --ph3-b:#4d5c63; --ph4-b:#3c4a51; --ph5-b:#2c393f } }
:root[data-fases="grafito"][data-theme="light"]{ --ph1-b:#627279; --ph2-b:#5e6e75; --ph3-b:#4d5c63; --ph4-b:#3c4a51; --ph5-b:#2c393f }
:root[data-tipos="tierra"]{ --t-necesidad-b:#5fb3a8; --t-deseo-b:#c08bb8; --t-habito-b:#b5b85a; --t-actividad-b:#7fa8c9 }
@media (prefers-color-scheme: light){ :root[data-tipos="tierra"]:not([data-theme="dark"]){ --t-necesidad-b:#2f7a70; --t-deseo-b:#8a4d82; --t-habito-b:#6e7020; --t-actividad-b:#3d6b8f } }
:root[data-tipos="tierra"][data-theme="light"]{ --t-necesidad-b:#2f7a70; --t-deseo-b:#8a4d82; --t-habito-b:#6e7020; --t-actividad-b:#3d6b8f }
:root[data-tipos="pastel"]{ --t-necesidad-b:#8fe0d4; --t-deseo-b:#ecb8f5; --t-habito-b:#cfe89a; --t-actividad-b:#9fe0f0 }
@media (prefers-color-scheme: light){ :root[data-tipos="pastel"]:not([data-theme="dark"]){ --t-necesidad-b:#2f7d75; --t-deseo-b:#8f55a6; --t-habito-b:#5c7428; --t-actividad-b:#2e7a8f } }
:root[data-tipos="pastel"][data-theme="light"]{ --t-necesidad-b:#2f7d75; --t-deseo-b:#8f55a6; --t-habito-b:#5c7428; --t-actividad-b:#2e7a8f }
.pal-op .pts.rampa{gap:0}.pal-op .pts.rampa i{border-radius:0;width:12px}.pal-op .pts.rampa i:first-child{border-radius:7px 0 0 7px}.pal-op .pts.rampa i:last-child{border-radius:0 7px 7px 0}
.step-prev{display:inline-flex;gap:3px;align-items:center}.step-prev i{width:18px;height:6px;border-radius:3px;display:block}
.pal-op{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px 11px}
.pal-op b{font-size:13.5px;line-height:1.2}
.pal-op small{font-size:11.5px;line-height:1.35}
.paletas{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}

/* ======================================================================
   Intensidad del color (Apariencia): cada grupo se ajusta de sutil a intenso
   por separado — tema (acento), estados, fases y tipos. Las paletas definen
   los valores base (--accent-b, --ok-b, --ph1-b, --t-deseo-b…); aquí se
   escala solo el croma en OKLCH. La luminosidad no cambia, así que el
   contraste se mantiene. Factor: 0,45 muy sutil · 1 normal · 1,4 muy intenso.
   ====================================================================== */
:root{ --sat-acento:1; --sat-estados:1; --sat-fases:1; --sat-tipos:1;
  --accent:var(--accent-b); --accent-soft:var(--accent-soft-b);
  --ok:var(--ok-b); --warn:var(--warn-b); --crit:var(--crit-b); --info:var(--info-b); --contra:var(--contra-b);
  --ph1:var(--ph1-b); --ph2:var(--ph2-b); --ph3:var(--ph3-b); --ph4:var(--ph4-b); --ph5:var(--ph5-b);
  --t-necesidad:var(--t-necesidad-b); --t-deseo:var(--t-deseo-b); --t-habito:var(--t-habito-b); --t-actividad:var(--t-actividad-b) }
@supports (color: oklch(from red l c h)){ :root{
  --accent:oklch(from var(--accent-b) l calc(c * var(--sat-acento)) h);
  --accent-soft:color-mix(in srgb,var(--accent) 13%,transparent);
  --ok:oklch(from var(--ok-b) l calc(c * var(--sat-estados)) h); --warn:oklch(from var(--warn-b) l calc(c * var(--sat-estados)) h);
  --crit:oklch(from var(--crit-b) l calc(c * var(--sat-estados)) h); --info:oklch(from var(--info-b) l calc(c * var(--sat-estados)) h);
  --contra:oklch(from var(--contra-b) l calc(c * var(--sat-estados)) h);
  --ph1:oklch(from var(--ph1-b) l calc(c * var(--sat-fases)) h); --ph2:oklch(from var(--ph2-b) l calc(c * var(--sat-fases)) h);
  --ph3:oklch(from var(--ph3-b) l calc(c * var(--sat-fases)) h); --ph4:oklch(from var(--ph4-b) l calc(c * var(--sat-fases)) h);
  --ph5:oklch(from var(--ph5-b) l calc(c * var(--sat-fases)) h);
  --t-necesidad:oklch(from var(--t-necesidad-b) l calc(c * var(--sat-tipos)) h); --t-deseo:oklch(from var(--t-deseo-b) l calc(c * var(--sat-tipos)) h);
  --t-habito:oklch(from var(--t-habito-b) l calc(c * var(--sat-tipos)) h); --t-actividad:oklch(from var(--t-actividad-b) l calc(c * var(--sat-tipos)) h) } }
.intens{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:12.5px;color:var(--fg-2)}
.intens input{width:100%;accent-color:var(--accent)}
.intens-val{grid-column:1/-1;font-size:12px;color:var(--fg-3);margin-top:-4px}

/* control de intensidad por grupo */
.intens-g{display:flex;flex-direction:column;gap:12px}
.int-row{display:grid;grid-template-columns:74px minmax(0,1fr) 86px;gap:10px;align-items:center}
.int-row .nm{font-size:13px;font-weight:650}
.int-row .nv{font-size:12px;color:var(--fg-2);text-align:right}
.int-row .muestra{grid-column:2/3;display:flex;gap:4px;margin-top:-6px}
.int-row .muestra i{width:16px;height:10px;border-radius:3px;display:block}
.int-rng{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:999px;background:var(--trk);outline-offset:4px;cursor:pointer;margin:0}
.int-rng::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--panel);border:3px solid var(--fg);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.int-rng::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--panel);border:3px solid var(--fg)}
.int-rapido{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:480px){ .int-row{grid-template-columns:62px minmax(0,1fr) 72px} }
.int-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px dashed var(--line-2);border-radius:12px}
.paletas+.int-row,.swatches+.int-row{margin-top:12px}
.int-row{grid-template-columns:74px minmax(0,1fr) 112px}
.int-row .nv{white-space:nowrap;font-size:11.5px}

/* Más paletas (agregadas 4 oct 2026). Las anteriores quedan como «Predeterminadas». */
:root[data-estados="tierra"]{ --ok-b:#8cc084; --warn-b:#e0b25a; --crit-b:#e58a6f; --info-b:#8fb0c9; --contra-b:#e8a58a }
@media (prefers-color-scheme: light){ :root[data-estados="tierra"]:not([data-theme="dark"]){ --ok-b:#3f7a37; --warn-b:#87600f; --crit-b:#ad452b; --info-b:#3a6585; --contra-b:#a24f30 } }
:root[data-estados="tierra"][data-theme="light"]{ --ok-b:#3f7a37; --warn-b:#87600f; --crit-b:#ad452b; --info-b:#3a6585; --contra-b:#a24f30 }
:root[data-estados="neon"]{ --ok-b:#39e58c; --warn-b:#ffd23f; --crit-b:#ff5a76; --info-b:#3fc1ff; --contra-b:#ff8f5a }
@media (prefers-color-scheme: light){ :root[data-estados="neon"]:not([data-theme="dark"]){ --ok-b:#0a7a43; --warn-b:#835c00; --crit-b:#c1123a; --info-b:#0565a6; --contra-b:#b84300 } }
:root[data-estados="neon"][data-theme="light"]{ --ok-b:#0a7a43; --warn-b:#835c00; --crit-b:#c1123a; --info-b:#0565a6; --contra-b:#b84300 }
:root[data-fases="ciruela"]{ --ph1-b:#f1d6ee; --ph2-b:#e2b3dd; --ph3-b:#d18fcb; --ph4-b:#c27abc; --ph5-b:#b76bb1 }
@media (prefers-color-scheme: light){ :root[data-fases="ciruela"]:not([data-theme="dark"]){ --ph1-b:#9a4893; --ph2-b:#8a3d84; --ph3-b:#763173; --ph4-b:#622661; --ph5-b:#4f1c4f } }
:root[data-fases="ciruela"][data-theme="light"]{ --ph1-b:#9a4893; --ph2-b:#8a3d84; --ph3-b:#763173; --ph4-b:#622661; --ph5-b:#4f1c4f }
:root[data-fases="cobre"]{ --ph1-b:#f2dcc9; --ph2-b:#e5bd9b; --ph3-b:#d79d70; --ph4-b:#cd8a58; --ph5-b:#c47d4a }
@media (prefers-color-scheme: light){ :root[data-fases="cobre"]:not([data-theme="dark"]){ --ph1-b:#97582b; --ph2-b:#8a4d24; --ph3-b:#77411d; --ph4-b:#643517; --ph5-b:#522a11 } }
:root[data-fases="cobre"][data-theme="light"]{ --ph1-b:#97582b; --ph2-b:#8a4d24; --ph3-b:#77411d; --ph4-b:#643517; --ph5-b:#522a11 }
:root[data-tipos="vivos"]{ --t-necesidad-b:#00c2a8; --t-deseo-b:#ff6fcf; --t-habito-b:#b8e600; --t-actividad-b:#26c6ff }
@media (prefers-color-scheme: light){ :root[data-tipos="vivos"]:not([data-theme="dark"]){ --t-necesidad-b:#00786a; --t-deseo-b:#ad237d; --t-habito-b:#566d00; --t-actividad-b:#00709a } }
:root[data-tipos="vivos"][data-theme="light"]{ --t-necesidad-b:#00786a; --t-deseo-b:#ad237d; --t-habito-b:#566d00; --t-actividad-b:#00709a }
:root[data-tipos="mar"]{ --t-necesidad-b:#4fb3d9; --t-deseo-b:#e08fa3; --t-habito-b:#9fc66b; --t-actividad-b:#c7a76b }
@media (prefers-color-scheme: light){ :root[data-tipos="mar"]:not([data-theme="dark"]){ --t-necesidad-b:#1d6c8c; --t-deseo-b:#a5455c; --t-habito-b:#4d6d20; --t-actividad-b:#77591f } }
:root[data-tipos="mar"][data-theme="light"]{ --t-necesidad-b:#1d6c8c; --t-deseo-b:#a5455c; --t-habito-b:#4d6d20; --t-actividad-b:#77591f }
.pal-sub{grid-column:1/-1;font-size:11px;font-weight:650;color:var(--fg-3);margin:4px 0 -2px;letter-spacing:.02em}
.conjuntos{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.conj-op{display:flex;flex-direction:column;gap:7px;align-items:flex-start;text-align:left;border:1px solid var(--line);background:var(--panel-2);border-radius:12px;padding:10px 11px;cursor:pointer;color:var(--fg)}
.conj-op:hover{border-color:var(--line-2)} .conj-op[aria-checked="true"]{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg) inset}
.conj-op .tira{display:flex;gap:3px;width:100%} .conj-op .tira i{flex:1;height:14px;border-radius:3px;display:block}
.conj-op b{font-size:13.5px} .conj-op small{font-size:11.5px;color:var(--fg-3);line-height:1.35}
.sin-servidor{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(4px)}
.ss-card{max-width:460px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.ss-card h2{margin:4px 0 0;font:700 19px var(--f-display)} .ss-card p{margin:0;color:var(--fg-2)}

/* ======================================================================
   Logo = acceso al panel maestro · cajón lateral en teléfono · barra inferior deslizable
   ====================================================================== */
button.brand-mark{border:0;padding:0;cursor:pointer;position:relative;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s}
button.brand-mark:hover{transform:scale(1.06);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
button.brand-mark:active{transform:scale(.96)}
button.brand-mark:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.brand-mark.mini{width:22px;height:22px;border-radius:7px;font-size:9px}
.rail-chip{display:none}
.rail-drawer{display:none}

@media (max-width:900px){
  /* barra superior compacta: logo + nombre + estado + tira de periodo/cuenta */
  .rail #railPanel{display:none}
  .rail .rail-toggle{display:none}
  button.brand-mark::after{content:"";position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;
    background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376878f' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 8h14M5 12h14M5 16h14'/%3E%3C/svg%3E") center/8px no-repeat;
    box-shadow:0 0 0 1.5px var(--line-2)}
  .rail-chip{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;gap:4px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:3px}
  .rail-chip .rc-arr{border:0;background:none;color:var(--fg-3);font-size:17px;height:32px;border-radius:9px;cursor:pointer}
  .rail-chip .rc-arr:active{background:var(--line)}
  .rail-chip .rc-main{display:flex;align-items:center;justify-content:center;gap:6px;border:0;background:none;color:var(--fg);font:650 13.5px var(--f-body);
    min-width:0;height:32px;border-radius:9px;cursor:pointer;padding:0 6px}
  .rail-chip .rc-main span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rail-chip .rc-main svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--fg-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .rail-chip .rc-main:active{background:var(--line)}

  /* cajón lateral con el panel completo */
  .rail-drawer{display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;width:min(340px,88vw);z-index:46;background:var(--panel);
    border-right:1px solid var(--line);box-shadow:var(--shadow);transform:translateX(-104%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
    padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .rail-drawer.on{transform:none}
  .rd-h{display:grid;grid-template-columns:34px minmax(0,1fr) 32px;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
  .rd-h b{display:block;font:700 16px var(--f-display)} .rd-h small{display:block;color:var(--fg-3);font-size:12px}
  .rd-b{flex:1;overflow:auto;padding:16px}
  .rd-b .rail-panel{display:flex;flex-direction:column;gap:18px}
  .rd-b .lbl{display:block}
  .rd-b .desk{display:block}
  .rd-b .rail-foot.desk{display:flex}
  .rd-b .rail-row{display:flex;flex-direction:column;gap:14px}
  .rd-b .sld-hz .horizons{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;-webkit-mask-image:none;mask-image:none;padding:0;cursor:default}
  .rd-b .sld-hz .sld-arr{display:none!important}
  .rd-b .hz{padding:10px 4px}
  .rd-b .rail-foot{margin-top:6px}
  .scrim.rail{z-index:45}

  /* barra inferior: franja deslizable + «Más» fijo; flechas casi imperceptibles */
  .bottom-nav{display:grid;grid-template-columns:minmax(0,1fr) 66px;align-items:stretch}
  .bn-sld{position:relative;min-width:0}
  .bn-track{display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain;height:100%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fi,0px),#000 calc(100% - var(--fd,0px)),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 var(--fi,0px),#000 calc(100% - var(--fd,0px)),transparent 100%)}
  .bn-track::-webkit-scrollbar{display:none}
  .bottom-nav.ini .bn-track{--fi:26px} .bottom-nav.fin .bn-track{--fd:26px}
  .bn-track button{flex:0 0 auto;min-width:70px;scroll-snap-align:center}
  .bottom-nav .bn-arr{position:absolute;top:0;bottom:0;width:16px;border:0;background:none;color:var(--fg-3);font-size:13px;line-height:1;padding:0;z-index:2;
    opacity:0;pointer-events:none;transition:opacity .2s}
  .bottom-nav .bn-arr.izq{left:0} .bottom-nav .bn-arr.der{right:0}
  .bottom-nav.ini .bn-arr.izq,.bottom-nav.fin .bn-arr.der{opacity:.28;pointer-events:auto}
  .bottom-nav .bn-arr:active{opacity:.6!important}
  .bottom-nav .bn-mas{border:0;border-left:1px solid var(--line);background:var(--panel);padding:9px 2px 8px;font-size:11px;color:var(--fg-3);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
  .bottom-nav .bn-mas svg{width:22px;height:22px}
  .bottom-nav .bn-mas[aria-expanded="true"]{color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){ .rail-drawer{transition:none} }

/* Conexiones */
.cx{display:flex;flex-direction:column;gap:18px}
.cx-sec{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--panel-2)}
.cx-h{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.cx-h h3{margin:0;font:700 16px var(--f-display)}
.cx-pasos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.cx-paso{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px}
.cx-paso>div{min-width:0;display:flex;flex-direction:column;gap:8px}
.cx-paso p{margin:0;font-size:13.5px;color:var(--fg-2)} .cx-paso b{font-size:14px}
.cx-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--f-num);border:2px solid var(--line-2);color:var(--fg-2)}
.cx-paso.ok .cx-n{background:var(--ok);border-color:var(--ok);color:var(--ok-ink)}
.cx-copy{display:flex;gap:6px;align-items:center;min-width:0} .cx-copy code{flex:1;min-width:0;padding:6px 8px}
.cx-agentes{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
.cx-agentes>div{display:grid;grid-template-columns:10px minmax(0,1fr);gap:2px 8px;align-items:center;font-size:13px}
.cx-agentes small{grid-column:2;color:var(--fg-3);font-size:11.5px}
.cx-resumen{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.cx-mini{display:grid;grid-template-columns:10px minmax(0,1fr);gap:2px 8px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--panel-2);border-radius:12px;padding:10px 12px;cursor:pointer;color:var(--fg)}
.cx-mini:hover{border-color:var(--line-2)} .cx-mini small{grid-column:2;color:var(--fg-3);font-size:12px}
.rf-btn{display:flex;flex-direction:column;gap:6px;border:1px solid transparent;background:none;border-radius:10px;padding:8px;margin:0 -8px;text-align:left;cursor:pointer;color:inherit;font:inherit;width:calc(100% + 16px)}
.rf-btn:hover{border-color:var(--line);background:var(--panel-2)}
.rf-btn b.on{color:var(--ok)}
.rf-cta{font-size:12px;color:var(--accent);font-weight:650}

/* Aviso de demostración: sobrio y proporcionado; en el riel plegado se reduce a una insignia «Demo» */
.demo-banner{display:flex;gap:8px;align-items:flex-start;font:500 11.5px/1.4 var(--f-body);color:var(--fg-2);
  background:color-mix(in srgb,var(--warn) 7%,var(--panel));border:1px solid color-mix(in srgb,var(--warn) 22%,var(--line));
  border-left:3px solid var(--warn);border-radius:9px;padding:7px 10px}
.demo-banner[hidden]{display:none}
.demo-banner svg{width:14px;height:14px;flex:0 0 auto;margin-top:1px;fill:none;stroke:var(--warn);stroke-width:2;stroke-linecap:round}
.demo-banner .db-corto{display:none}
@media (min-width:901px){
  body.rail-col:not(.rail-peek) .demo-banner{flex-direction:column;align-items:center;gap:3px;width:58px;padding:6px 2px;border-left-width:1px;border-radius:10px;
    font:700 9.5px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--warn);cursor:help}
  body.rail-col:not(.rail-peek) .demo-banner .db-largo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body.rail-col:not(.rail-peek) .demo-banner .db-corto{display:block}
  body.rail-col:not(.rail-peek) .demo-banner svg{width:13px;height:13px;margin:0}
  /* «Abrir» anclado abajo: siempre en el mismo lugar, como el logo arriba */
  body.rail-col:not(.rail-peek) .rail-mini{padding-bottom:78px}
  body.rail-col:not(.rail-peek) .rail-mini .expandir{position:fixed;left:9px;bottom:calc(16px + env(safe-area-inset-bottom,0px));margin:0;z-index:5;
    width:58px;background:var(--panel);border:1px solid var(--line);color:var(--fg-2)}
  body.rail-col:not(.rail-peek) .rail-mini .expandir:hover{color:var(--fg);border-color:var(--line-2);background:var(--panel-2)}
}
@media (max-width:900px){ .demo-banner{padding:5px 9px;font-size:11px} }

/* Botón único de abrir/contraer: abajo a la izquierda, mismo lugar con el panel abierto, plegado o flotante */
.rail-btn{display:none}
@media (min-width:901px){
  .rail-toggle,.rail-mini .expandir{display:none!important}
  .rail-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:fixed;left:9px;bottom:calc(14px + env(safe-area-inset-bottom,0px));
    width:58px;height:54px;z-index:41;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--fg-2);cursor:pointer;
    font:650 10.5px/1 var(--f-body);letter-spacing:.01em;box-shadow:var(--elev-1);transition:color .15s,border-color .15s,background .15s}
  .rail-btn:hover{color:var(--fg);border-color:var(--line-2);background:var(--panel-2)}
  .rail-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .rail-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .rail-btn .fl{transform-box:fill-box;transform-origin:center;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .rail-btn.abre .fl{transform:rotate(180deg)}
  .rail{padding-bottom:84px}                                 /* el pie de estado nunca queda debajo del botón */
  body.rail-col:not(.rail-peek) .rail{padding-bottom:84px}
  body.rail-col:not(.rail-peek) .rail-mini{padding-bottom:0}
  body.rail-col.rail-peek .rail{padding-bottom:84px}
}

/* Pie del panel = franja fija abajo: [botón 48 px] [5 líneas compactas]. Nada se tapa, a cualquier alto de ventana. */
@media (min-width:901px){
  .rail{padding-bottom:0}
  body.rail-col.rail-peek .rail{padding-bottom:0}
  .rail-btn{left:14px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:48px;height:48px;border-radius:13px;gap:2px;font-size:9.5px}
  .rail-btn svg{width:16px;height:16px}
  .rail-foot{position:sticky;bottom:0;z-index:3;margin:auto -18px 0;padding:8px 14px calc(12px + env(safe-area-inset-bottom,0px)) 72px;
    min-height:calc(72px + env(safe-area-inset-bottom,0px));background:var(--panel);border-top:1px solid var(--line);gap:0;justify-content:flex-end}
  .rail-foot .rf-btn{margin:0;width:100%;padding:4px 6px;gap:1px;border-radius:9px}
  .rail-foot .chip-status{font-size:11px;line-height:15px;gap:6px}
  .rail-foot .chip-status span{color:var(--fg-3);white-space:nowrap}
  .rail-foot .chip-status b{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .rail-foot .rf-cta{font-size:11px;line-height:15px;margin-top:1px}
  /* plegado: el contenido termina antes del botón */
  body.rail-col:not(.rail-peek) .rail{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:901px){
  .rail>*,.rail .rail-panel>*{flex-shrink:0}               /* el panel se desplaza; nunca aplasta el pie ni los controles */
  .rail-btn{font-size:9px;letter-spacing:0}
}
/* logo dentro del cajón: botón para contraer (sin el indicador de menú del logo principal) */
@media (max-width:900px){ .rd-h button.brand-mark::after{content:none} .rd-h button.brand-mark{width:34px;height:34px} }
.traslado{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.traslado>div{display:flex;flex-direction:column;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel-2)}
.traslado p{margin:0;font-size:13px}
.cx-qr{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center}
.cx-qr .qr{background:#fff;border-radius:12px;padding:6px;width:150px;height:150px}
.cx-qr .qr svg{width:100%;height:100%;display:block}
@media (max-width:480px){ .cx-qr{grid-template-columns:1fr} .cx-qr .qr{margin:0 auto} }
.tr-conf{border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line));background:color-mix(in srgb,var(--warn) 7%,var(--panel));border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;width:100%}

/* ======================================================================
   Clasificador en cascada (3.0.3): reglas siempre, IA cuando hace falta.
   Colores por origen de la categoría — Reglas · IA · Tú · Por revisar —
   iguales en la barra, el diagrama, la marca «IA» y la Bandeja.
   ====================================================================== */
:root{ --o-regla:var(--s1); --o-ia:var(--s4); --o-usuario:var(--s3); --o-revision:var(--warn) }
.o-ia{display:inline-flex;align-items:center;font:700 10px/1 var(--f-body);letter-spacing:.04em;padding:3px 6px;border-radius:5px;margin-left:6px;
  color:var(--o-ia);background:color-mix(in srgb,var(--o-ia) 15%,transparent);border:1px solid color-mix(in srgb,var(--o-ia) 35%,transparent);vertical-align:1px}
.ia-sug{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:10px;font-size:13.5px;
  background:color-mix(in srgb,var(--o-ia) 8%,var(--panel));border:1px dashed color-mix(in srgb,var(--o-ia) 45%,transparent)}
.ia-sug .o-ia{margin-left:0}
.ia-sug>span:nth-child(2){flex:1;min-width:0}
.ia-linea{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.ia-linea .o-ia{margin-left:0}

.clf{display:flex;flex-direction:column;gap:16px}
.clf-lema{margin:0 0 8px;font-size:13.5px}
.clf-barra{display:flex;height:12px;border-radius:999px;overflow:hidden;gap:2px;background:var(--panel-2)}
.clf-barra i{display:block;min-width:4px}
.clf-ley{display:flex;gap:6px 16px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--fg-2)}
.clf-ley span{display:inline-flex;align-items:center;gap:6px}
.clf-ley i{width:10px;height:10px;border-radius:3px;display:block}
.b-regla{background:var(--o-regla)} .b-ia{background:var(--o-ia)} .b-usuario{background:var(--o-usuario)} .b-revision{background:var(--o-revision)}
.clf-vacio{margin:0;font-size:13px}

.clf-flujo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.clf-paso{position:relative;min-width:0}
.clf-paso:not(:last-child)::after{content:"";position:absolute;top:50%;right:-17px;width:12px;height:12px;border-top:2px solid var(--line-2);border-right:2px solid var(--line-2);
  transform:translateY(-50%) rotate(45deg);transition:border-color .2s}
.clf-nodo{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;cursor:pointer;
  padding:10px 12px 12px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);color:var(--fg);transition:border-color .2s,background .2s,opacity .2s,transform .2s}
.clf-nodo:hover{border-color:var(--line-2)}
.clf-nodo b{font-weight:650;font-size:13.5px}
.clf-n{font:700 11px/1 var(--f-num);color:var(--fg-3);margin-bottom:4px}
.clf-v{font:650 20px/1.15 var(--f-num);letter-spacing:-.01em}
.clf-nodo small{font-size:11.5px;color:var(--fg-2);line-height:1.3}
.clf-paso[data-paso="reglas"] .clf-n,.clf-paso[data-paso="segura"] .clf-n{color:var(--o-regla)}
.clf-paso[data-paso="ia"] .clf-n{color:var(--o-ia)}
.clf-paso[data-paso="tu"] .clf-n{color:var(--o-revision)}
.clf-paso[data-paso="aprende"] .clf-n{color:var(--o-usuario)}
.clf-paso.sel .clf-nodo{border-color:var(--accent);background:var(--panel);box-shadow:0 0 0 1px var(--accent) inset}
.clf-paso.off .clf-nodo{border-style:dashed;opacity:.62}
.clf-paso.off .clf-v{font-size:15px}
.clf-paso.c-ruta .clf-nodo{border-color:var(--fg-2);background:var(--panel)}
.clf-paso.c-ruta:not(:last-child)::after{border-color:var(--fg-2)}
.clf-paso.c-salto .clf-nodo{opacity:.38}
.clf-paso.c-fin .clf-nodo{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.clf-det{font-size:13.5px;color:var(--fg-2);padding:10px 12px;border-radius:10px;background:var(--panel-2);border-left:3px solid var(--accent);max-width:78ch}

.clf-prueba{display:flex;flex-direction:column;gap:6px}
.clf-prueba-f{display:flex;gap:8px}
.clf-prueba-f .input{flex:1;min-width:0}
.clf-res{margin:2px 0 0;font-size:13.5px;max-width:80ch}

.clf-ctl{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.8fr);gap:16px 20px;padding-top:14px;border-top:1px solid var(--line)}
.clf-ctl>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.clf-ctl .seg button[disabled]{opacity:.45;cursor:not-allowed}
.clf-ctl .seg button[aria-checked="true"]{background:var(--panel);color:var(--fg);box-shadow:var(--elev-1)}
.clf-ctl small{font-size:12px}
.clf-ctl .off{opacity:.55}
.clf-rng{display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:10px;align-items:center}
.clf-rng input{width:100%;accent-color:var(--o-ia)}
.clf-rng output{font-size:13px;text-align:right}
.clf-ctl #clfTope{max-width:140px}

@media (max-width:900px){
  .clf-ctl{grid-template-columns:1fr 1fr} .clf-ctl-modo{grid-column:1/-1}
}
@media (max-width:640px){
  .clf-flujo{grid-template-columns:1fr;gap:14px}
  .clf-paso:not(:last-child)::after{top:auto;bottom:-12px;right:auto;left:22px;width:9px;height:9px;transform:rotate(135deg)}
  .clf-nodo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"n b v" "n s v";align-items:center;column-gap:10px;padding:10px 12px}
  .clf-n{grid-area:n;margin:0} .clf-nodo b{grid-area:b} .clf-nodo small{grid-area:s} .clf-v{grid-area:v;font-size:17px}
  .clf-ctl{grid-template-columns:1fr}
  .clf-prueba-f{flex-direction:column}
}
@media (prefers-reduced-motion: reduce){ .clf-nodo,.clf-paso::after{transition:none} }

/* Guías de Conexiones (3.1.0): enlaces directos, avisos y bloque de seguridad */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cx-enlaces{display:flex;gap:6px 14px;flex-wrap:wrap}
.cx-ir{display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:600;color:var(--accent);text-decoration:none;
  padding:5px 10px;border-radius:8px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);background:var(--accent-soft)}
.cx-ir:hover{text-decoration:underline}
.cx-ir:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cx-aviso{font-size:13px;color:var(--fg-2);padding:10px 12px;border-radius:10px;background:var(--warn-soft);border-left:3px solid var(--warn);display:flex;flex-direction:column;gap:8px}
.cx-aviso .row-actions{align-items:center}
.cx-ok{padding:12px;border-radius:10px;background:var(--ok-soft);border-left:3px solid var(--ok);display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.cx-seg summary{font-size:13px;font-weight:600}
.cx-seg ul{margin:0;padding:0 12px 10px 28px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--fg-2)}
.cx-seg li .cx-ir{padding:2px 8px;font-size:12px;margin-left:4px}
.cx-demo{margin:0 0 4px;font-size:12.5px;padding:8px 10px;border-radius:9px;background:var(--panel-2);border:1px dashed var(--line-2);color:var(--fg-2)}
.cx-sec .link{border:0;background:none;padding:0;color:var(--accent);font-weight:600;cursor:pointer;font-size:inherit}
.cx-simple{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line)}
.cx-simple p{margin:0;font-size:13.5px} .cx-simple small{font-size:12.5px}
.cx-dev{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:10px;border:1px dashed var(--line-2);font-size:13px}
.cx-dev p{margin:0;color:var(--fg-2)}

/* Selector de periodo 3×3 (3.2.5): se abre al tocar el periodo, con el panel abierto o plegado */
.period .per-lbl{flex:1;min-width:0;border:0;background:none;color:var(--fg);cursor:pointer;font:600 14px var(--f-display);
  padding:6px 4px;border-radius:7px;user-select:none;-webkit-user-select:none;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.period .per-lbl::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.55;flex:none}
.period .per-lbl:hover,.period .per-lbl[aria-expanded="true"]{background:var(--panel)}
.period .per-lbl:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mini-lbl{user-select:none;-webkit-user-select:none}
.mini-lbl[aria-expanded="true"]{color:var(--accent)}
.perpick{position:fixed;z-index:50;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow);
  padding:10px;display:flex;flex-direction:column;gap:8px;animation:ppIn .14s both}
@keyframes ppIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pp-h{display:grid;grid-template-columns:32px minmax(0,1fr) 32px;align-items:center;gap:6px}
.pp-t{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}
.pp-t b{font:650 13px var(--f-display)} .pp-t small{font-size:11.5px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pp-c{position:relative;border:1px solid var(--line);background:var(--panel-2);border-radius:var(--r-sm);padding:8px 4px;cursor:pointer;color:var(--fg-2);
  display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;user-select:none;-webkit-user-select:none}
.pp-c b{font:650 13.5px var(--f-display);color:var(--fg);white-space:nowrap}
.pp-c small{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pp-c:hover{border-color:var(--line-2)}
.pp-c.fut{opacity:.62}
.pp-c.hoy::after{content:"";position:absolute;top:5px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.pp-c.sel{background:var(--accent);border-color:var(--accent);opacity:1}
.pp-c.sel b,.pp-c.sel small{color:var(--accent-ink)}
.pp-c.sel.hoy::after{background:var(--accent-ink)}
.pp-c:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pp-hoy{align-self:center;border:0;background:none;color:var(--accent);font-weight:600;font-size:12.5px;cursor:pointer;padding:2px 6px}
@media (prefers-reduced-motion: reduce){ .perpick{animation:none} }

/* 3.2.6 · aterrizaje en la sección destino */
.panel.destacar{animation:destacar 1.8s ease-out}
tr.destacar>td{animation:destacarFila 1.8s ease-out}
@keyframes destacar{0%,35%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
@keyframes destacarFila{0%,35%{background:color-mix(in srgb,var(--accent) 14%,transparent)}100%{background:transparent}}
.panel h2[tabindex="-1"]:focus{outline:none}
html{scroll-padding-top:12px}

/* 3.3.0 · Texto, Audio y Foto en el simulador */
.compose .adj{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1 1 100%;min-width:0}
.compose .adj[hidden]{display:none}
.compose #mtexto{flex:1 1 220px;min-width:0}
.adj-nota{flex:1 1 100%;margin:0;font-size:12.5px;color:var(--fg-3);line-height:1.4}
.adj-nota:empty{display:none}
.adj-nota.aviso{color:var(--warn-b)}
.btn.rec .pt{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--crit-b);margin-right:7px;vertical-align:1px}
.btn.rec.on{border-color:var(--crit-b);color:var(--crit-b)}
.btn.rec.on .pt{border-radius:2px;animation:latido 1s ease-in-out infinite}
@keyframes latido{50%{opacity:.35}}
.compose .nivel{flex:0 1 120px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.compose .nivel i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform .08s linear}
.adj-prev{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.adj-prev img{width:64px;height:64px;object-fit:cover;border-radius:8px;display:block}
.adj-prev audio{height:36px;max-width:min(260px,58vw)}
.b .b-img{display:block;max-width:220px;max-height:240px;width:100%;object-fit:cover;border-radius:10px;margin:-2px 0 6px}
.b .b-aud{display:block;max-width:240px;height:36px;margin:-2px 0 6px}

/* 4.0 · D1 · Copia cifrada en tu Google Drive */
.copia-intro{margin:-4px 0 14px;font-size:13.5px;max-width:72ch}
.copia-pasos{max-width:760px}
.copia-form{display:flex;flex-direction:column;gap:10px;max-width:460px}
.copia-form .field{display:flex;flex-direction:column;gap:4px}
.copia-clave{display:flex;gap:6px;align-items:center}.copia-clave .input{flex:1;min-width:0}
.copia-fz{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fg-3)}
.copia-fz .barra{flex:0 0 90px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.copia-fz .barra i{display:block;height:100%;width:0;border-radius:3px;transition:width .2s,background .2s}
.copia-fz[data-f="débil"] .barra i{width:33%;background:var(--crit-b)}
.copia-fz[data-f="aceptable"] .barra i{width:66%;background:var(--warn-b)}
.copia-fz[data-f="fuerte"] .barra i{width:100%;background:var(--ok-b)}
.copia-fz[data-f="débil"] .t{color:var(--crit-b)}.copia-fz[data-f="fuerte"] .t{color:var(--ok-b)}
.copia-check{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--fg-2);line-height:1.4}
.copia-check input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:var(--accent)}
.copia-msg{margin:0;font-size:13px;color:var(--crit-b)}.copia-msg:empty{display:none}
.copia-estado{display:flex;gap:14px;align-items:center;padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--ok-soft)}
.copia-estado.atr{background:var(--warn-soft)}.copia-estado.mal{background:var(--crit-soft)}
.copia-ico{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:var(--ok-b)}
.copia-estado.atr .copia-ico{background:var(--warn-b)}.copia-estado.mal .copia-ico{background:var(--crit-b)}
.copia-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px 18px;margin:0;flex:1;min-width:0}
.copia-kv dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-3)}
.copia-kv dd{margin:2px 0 0;font-weight:600;font-size:14.5px}
.copia-err{margin-top:12px}
.copia-acc{margin:14px 0 8px;flex-wrap:wrap;align-items:center}
.copia-off{color:var(--fg-3)!important;margin-left:auto}
.copia-conf{margin:4px 0 10px}
.copia-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.copia-lista li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.copia-lista li>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.copia-lista .faint{font-size:12.5px}
.copia-rest{padding:12px;margin:4px 0 8px;border-radius:10px;background:var(--panel-2,var(--line));max-width:none}
@media (max-width:560px){.copia-estado{align-items:flex-start}.copia-off{margin-left:0}}
/* Base para todos los botones con aspecto de enlace (antes solo tenían estilo dentro de .ph y .cx-sec) */
.link{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;font:inherit;font-weight:600;text-align:left;border-radius:4px}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.link:disabled{color:var(--fg-3);cursor:default;text-decoration:none}
.copia-clave{position:relative}.copia-clave .input{padding-right:40px}
.copia-clave .iconbtn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px}

/* 4.0 · B1 · Patrimonio y saldos por cuenta */
.pat{margin-top:16px}
.pat-intro{margin:-4px 0 12px;font-size:13.5px;max-width:72ch}
.pat-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.5fr) minmax(240px,1.1fr);gap:20px;align-items:start}
.pat-neto{display:flex;flex-direction:column;gap:6px;min-width:0}
.pat-neto .big{font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.pat-var{font-size:13px;font-weight:600;color:var(--fg-2)}.pat-var.sube{color:var(--ok-b)}.pat-var.baja{color:var(--crit-b)}
.pat-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;gap:2px;background:var(--line);margin:6px 0 2px}
.pat-bar i{display:block;min-width:2px}.pat-bar .a,.pat-kv i.a{background:var(--s3)}.pat-bar .d,.pat-kv i.d{background:var(--crit-b)}
.pat-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px 12px;margin:4px 0 0}
.pat-kv dt{font-size:11.5px;color:var(--fg-3);display:flex;align-items:center;gap:5px}
.pat-kv dt i{width:8px;height:8px;border-radius:2px;display:inline-block}
.pat-kv dd{margin:2px 0 0;font-weight:600;font-size:14px}
.pat-chart{min-width:0}.pat-chart .chart-wrap{position:relative}
.pat-ctas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-height:260px;overflow:auto}
.pat-ctas li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 4px;border-bottom:1px solid var(--line)}
.pat-ctas li:last-child{border-bottom:0}
.pat-ctas li.sel{background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:8px}
.pat-ctas li.fuera{opacity:.6}
.pat-ctas .n{display:flex;flex-direction:column;min-width:0}.pat-ctas .n b{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pat-ctas small{font-size:11.5px;color:var(--fg-3)}.pat-ctas .warn{color:var(--warn-b);font-weight:600}
.pat-ctas .v{font-weight:600;font-size:13.5px;text-align:right}
.num.neg,.v.neg{color:var(--crit-b)}
.pat-pie{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px}
.pat-ini{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.pat-ini .row-actions{grid-column:1/-1;align-items:center}
.pat-ini-f{display:flex;flex-direction:column;gap:4px;font-size:13.5px;font-weight:600}
.pat-ini-f small{display:block;font-weight:400;color:var(--fg-3);font-size:11.5px}
@media (max-width:1100px){.pat-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pat-ctas{grid-column:1/-1}}
@media (max-width:640px){.pat-grid{grid-template-columns:minmax(0,1fr)}.pat-ctas{max-height:none}}
.cta-saldo{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;border-top:1px dashed var(--line);padding-top:6px;margin-top:2px}
.cta-s-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.cta-s-top .lbl{font-size:11px}.cta-s-top b{font-size:14px}.cta-s-top small{font-size:11.5px}
.cta-cuadre{margin:0;font-size:12.5px;padding:8px 10px;border-radius:8px;background:var(--warn-soft);color:var(--fg-2)}
.cta-s-ed{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.cta-s-ed[hidden]{display:none}
.cta-s-ed label{display:flex;flex-direction:column;gap:3px}
.cta-s-ed .row-actions{grid-column:1/-1;flex-wrap:wrap;align-items:center}
.cta-pat{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--fg-2)}
.cta-pat input{accent-color:var(--accent)}

/* 4.0 · A1 · Recibos */
.rec{display:flex;gap:12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.rec-th{flex:none;width:72px;height:72px;padding:0;border:0;border-radius:10px;overflow:hidden;cursor:zoom-in;background:var(--line)}
.rec-th img{width:100%;height:100%;object-fit:cover;display:block}
.rec-i{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13.5px}.rec-i .faint{font-size:12px}
.rec-i .row-actions{gap:14px;margin-top:4px}
.rec-vacio{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;width:100%;font-size:13px;color:var(--fg-3)}
.clip{font-size:12px;margin-left:4px;opacity:.8}
.clip-btn{border:0;background:none;cursor:zoom-in;padding:0 4px;font-size:13px}
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.82);display:grid;place-items:center;padding:24px;cursor:zoom-out;animation:ppIn .15s ease-out}
.lightbox img{max-width:min(96vw,900px);max-height:88vh;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5);cursor:default;background:#fff}
.lb-x{position:absolute;top:max(14px,env(safe-area-inset-top,0px));right:14px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:18px;cursor:pointer}
.lb-x:focus-visible{outline:2px solid #fff}

/* 4.0 · B2 · Tarjetas de crédito */
.tc-res{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 18px;margin:-2px 0 14px;padding:12px 14px;border-radius:12px;background:var(--panel-2)}
.tc-res>div{display:flex;flex-direction:column;gap:2px;min-width:0}.tc-res b{font-size:16px}
.tc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:14px}
.tc{border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px;background:var(--panel);min-width:0}
.tc header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tc header h3{margin:0;font-size:15.5px;flex:1;min-width:0}.tc-ico{font-size:18px}
.tc-ed{flex-basis:100%;font-size:12.5px;font-weight:500!important;color:var(--fg-3)!important}
.tc-cfg,.tc-saldo{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px 10px;align-items:end}
.tc-cfg p,.tc-saldo p{grid-column:1/-1;margin:0;font-size:13px}
.tc-cfg label,.tc-saldo label{display:flex;flex-direction:column;gap:3px}
.tc-cfg .row-actions{grid-column:1/-1;align-items:center}
.tc-cfg-ed{padding:10px;border-radius:10px;background:var(--panel-2)}
.tc-pago{display:flex;flex-direction:column;gap:3px;padding:12px;border-radius:10px;background:var(--panel-2);border-left:4px solid var(--line-2)}
.tc-pago.pronto{border-left-color:var(--warn-b);background:var(--warn-soft)}.tc-pago.vencido{border-left-color:var(--crit-b);background:var(--crit-soft)}
.tc-pago.pagado{border-left-color:var(--ok-b);background:var(--ok-soft)}
.tc-monto{font-size:24px;font-weight:700;letter-spacing:-.01em}.tc-pago span{font-size:13px}.tc-pago .faint{font-size:12px}
.tc-ok{color:var(--ok-b)}
.tc-cupo-t{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:13px}
.meter.sm{height:8px;margin:10px 0 4px}.meter.sm .pace::after{content:"30 %"}
.meter.xs{height:6px;margin:4px 0}
.tc-ciclo{margin:0;font-size:12.5px;color:var(--fg-2)}
.tc-cuotas{border-top:1px solid var(--line);padding-top:10px}
.tc-cuotas-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px}.tc-cuotas-h .faint{font-size:12px;flex:1}
.tc-cuotas ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.tc-cuotas li.fin{opacity:.55}
.tc-q-t{display:flex;justify-content:space-between;gap:8px;font-size:13.5px}
.tc-q-s{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px}.tc-q-s .row-actions{gap:12px;margin-left:auto}
.tc-prev{font-size:13.5px;padding:10px 12px;border-radius:10px;background:var(--panel-2)}.tc-prev:empty{display:none}
.tc-pago .tc-monto{font-size:26px;font-weight:700;line-height:1.15}
.meter .pace::after{white-space:nowrap}

/* 4.0 · A1+ · Lector de recibos */
.lr-pasos{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.lr-pasos li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 10px;align-items:center;color:var(--fg-3);font-size:14px}
.lr-pasos li small{grid-column:2;font-size:12px;color:var(--fg-3)}.lr-pasos li small:empty{display:none}
.lr-n{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);display:inline-block;box-sizing:border-box}
.lr-pasos li.on{color:var(--fg)}.lr-pasos li.on .lr-n{border-color:var(--accent);border-top-color:transparent;animation:giro .8s linear infinite}
.lr-pasos li.ok{color:var(--fg)}.lr-pasos li.ok .lr-n{border-color:var(--ok-b);background:var(--ok-b);position:relative}
.lr-pasos li.ok .lr-n::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700}
.lr-pasos li.mal .lr-n{border-color:var(--warn-b)}
@keyframes giro{to{transform:rotate(360deg)}}
.lr-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.lr-foto{flex:none;width:96px;height:128px;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:zoom-in;background:var(--line)}
.lr-foto img{width:100%;height:100%;object-fit:cover;display:block}
.lr-res{display:flex;flex-direction:column;gap:4px;min-width:0}.lr-res .pill{align-self:flex-start}
.lr-total{font-size:26px;font-weight:700;line-height:1.15}
.lr-chips{margin-top:4px}.lr-chips .chip{cursor:default;font-size:12px;padding:3px 9px}
.lr-hist{margin:0 0 12px;font-size:13px;padding:9px 12px;border-radius:10px;background:var(--panel-2)}
.lr-co{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 12px;display:flex;flex-direction:column;gap:8px}
.lr-co legend{font-weight:600;font-size:13.5px;padding:0 4px}
.lr-co label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:13.5px}
.lr-co label span{display:flex;flex-direction:column}.lr-co small{color:var(--fg-3);font-size:12px}
.lr-co input{margin-top:3px;accent-color:var(--accent)}
.lr-form .field.leido .lbl::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok-b);margin-left:6px;vertical-align:1px}
.lr-items summary{font-size:13px;font-weight:600}.lr-items table{margin:6px 0 0}
.rec-l{font-size:11.5px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
@media (prefers-reduced-motion:reduce){.lr-pasos li.on .lr-n{animation:none;border-top-color:var(--accent)}}

/* 4.0 · B3 · ¿Te alcanza? */
.alc{margin-top:16px}
.seg.sm button{padding:5px 10px;font-size:12.5px}.seg button[aria-checked="true"]{background:var(--panel);color:var(--fg);box-shadow:var(--elev-1)}
.alc-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(260px,1.2fr) minmax(0,1.4fr);gap:20px;align-items:start}
.alc-res{padding:14px;border-radius:12px;border-left:4px solid var(--ok-b);background:var(--ok-soft);display:flex;flex-direction:column;gap:8px}
.alc-res.amarillo{border-left-color:var(--warn-b);background:var(--warn-soft)}.alc-res.rojo{border-left-color:var(--crit-b);background:var(--crit-soft)}
.alc-frase{margin:0;font-size:16px;line-height:1.4}.alc-frase b{font-size:18px}
.alc-tip{margin:0;font-size:13px;color:var(--fg-2)}
.alc-cascada{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.alc-cascada li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(40px,1fr) auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.alc-cascada .t{display:flex;flex-direction:column;min-width:0}.alc-cascada .t b{font-size:13.5px;font-weight:600}.alc-cascada small{font-size:11.5px;color:var(--fg-3)}
.alc-cascada .alc-bar{display:block;height:8px;background:var(--line);border-radius:4px;overflow:hidden}.alc-cascada .alc-bar i{display:block;height:100%;border-radius:4px}
.alc-cascada .alc-bar i.pos{background:var(--ok-b)}.alc-cascada .alc-bar i.neg{background:var(--s2)}
.alc-cascada .v{font-weight:600;font-size:13.5px;text-align:right;white-space:nowrap}
.alc-cascada li.tot{border-bottom:0;border-top:2px solid var(--fg-3);margin-top:2px}.alc-cascada li.tot .v{font-size:15px}
.alc-chart{min-width:0}.alc-chart .chart-wrap{position:relative}
@media (max-width:1100px){.alc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.alc-chart{grid-column:1/-1}}
@media (max-width:640px){.alc-grid{grid-template-columns:minmax(0,1fr)}}
.alc-chart .legend i.pt{width:9px;height:9px;border-radius:50%}
.alc-cascada li{grid-template-columns:minmax(0,1.5fr) minmax(40px,80px) 112px}

/* 4.0 · A2 · Cierre de mes */
.ci-banner{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 16px;padding:14px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));
  background:color-mix(in srgb,var(--accent) 8%,var(--panel));cursor:pointer;text-align:left;font:inherit;color:inherit}
.ci-banner:hover{background:color-mix(in srgb,var(--accent) 13%,var(--panel))}.ci-banner>span:nth-child(2){display:flex;flex-direction:column;flex:1;min-width:0}
.ci-banner small{color:var(--fg-2);font-size:13px}.ci-banner .go{font-size:20px;color:var(--accent)}
.ci-ico{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-weight:700}
.ci-pasos{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ci-pasos li{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;color:var(--fg-3);text-align:center}
.ci-pasos li span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line-2);font-weight:700;font-size:12px}
.ci-pasos li.on{color:var(--fg);font-weight:600}.ci-pasos li.on span{border-color:var(--accent);color:var(--accent)}
.ci-pasos li.ok span{background:var(--ok-b);border-color:var(--ok-b);color:#fff}
.ci-cuerpo{min-height:200px}
.ci-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ci-kpis>div{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:10px;background:var(--panel-2)}.ci-kpis b{font-size:17px}
.ci-d{font-size:12px;font-weight:600;color:var(--fg-3)}.ci-d.bien{color:var(--ok-b)}.ci-d.mal{color:var(--crit-b)}
.ci-vs{font-size:12px;margin:6px 0 10px}.ci-sem .chip{cursor:default;gap:6px}.ci-sem .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.ci-lista{list-style:none;margin:0;padding:0}.ci-lista li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.ci-lista small{grid-column:1/-1;font-size:12px}.ci-ok{color:var(--ok-b);font-weight:600;margin:10px 0}.ci-pat{margin:12px 0 0;font-size:13.5px}
.ci-sug{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ci-sug li{display:grid;grid-template-columns:minmax(0,1fr) 60px;gap:6px 12px;padding:12px;border:1px solid var(--line);border-radius:12px}
.ci-sug-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ci-sug-h input{accent-color:var(--accent);width:16px;height:16px}
.ci-sug p{grid-column:1/2;margin:0;font-size:12.5px}
.ci-mini{grid-column:2;grid-row:1/3;position:relative;display:flex;align-items:flex-end;gap:4px;height:44px;border-bottom:1px solid var(--line-2)}
.ci-mini i{flex:1;background:var(--s1);border-radius:3px 3px 0 0;min-height:2px}.ci-mini i.mal{background:var(--crit-b)}
.ci-mini .lim{position:absolute;left:-2px;right:-2px;border-top:2px dashed var(--fg-2)}
.ci-monto{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:13.5px}.ci-monto .input{max-width:150px}
.ci-nav{margin-top:18px;justify-content:flex-end}
@media (max-width:520px){.ci-kpis{grid-template-columns:1fr}}
.pat-conc{margin-top:12px}.pat-conc summary{font-size:13px;font-weight:600}.pat-conc .alc-cascada li{grid-template-columns:minmax(0,1fr) 0 120px}

/* Metas: el tablero cabe en la pantalla (2×2 cuando no alcanzan 4 columnas) y la tarjeta ya no hereda el centrado de otra clase .meta */
.kan{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));overflow-x:visible}
.kan .meta{align-items:stretch;justify-content:flex-start;width:100%}
.kan .meta .barra{width:100%}
@media (max-width:640px){.kan{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(230px,82vw);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
  .kan .kcol{scroll-snap-align:start}}
.kan{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px) and (min-width:641px){.kan{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.kan{grid-template-columns:none}}

/* 4.0 · C1 Recordatorios */
.theme-btn.bell{position:relative}.theme-btn.bell svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bell-n{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--warn-b);color:#fff;font-size:10.5px;font-weight:700;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--panel)}
.bell-n.rojo{background:var(--crit-b)}
.rc-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:6px}
.rc-top>div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.rc-top b{font-size:18px}
.rc-g{display:flex;align-items:center;gap:6px;margin:14px 0 6px}
.rc-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rc-it{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:4px 10px;align-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.rc-it.venc{border-color:var(--crit-b);background:var(--crit-soft)}
.rc-ic{font-size:18px;line-height:1.2}
.rc-tx{display:flex;flex-direction:column;min-width:0}.rc-tx b{font-weight:600;font-size:14px}.rc-tx small{color:var(--fg-2);font-size:12.5px}
.rc-m{font-weight:600;white-space:nowrap}
.rc-acc{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rc-notif{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-top:14px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:10px;font-size:13px}
.rc-nota{font-size:12.5px;margin:12px 0 0}

/* L1 · App en el celular */
.demo-banner.local{cursor:pointer;color:var(--fg-2);background:color-mix(in srgb,var(--ok-b) 8%,var(--panel));border-color:color-mix(in srgb,var(--ok-b) 25%,var(--line));border-left-color:var(--ok-b)}
body.rail-col:not(.rail-peek) .demo-banner.local{color:var(--ok-b)}
.demo-banner.local svg{stroke:var(--ok-b)}
.cel .kv{margin:12px 0 0}
.cel-imp .rc-top{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:12px}

/* L2 · Sincronización */
.cel-sync{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.cel-sync h4{margin:0 0 6px;font-size:14px;display:flex;gap:8px;align-items:center}
.cel-sync-f{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cel-sync-f .input{flex:1 1 240px;min-width:0}

/* 4.0 · C2 Anomalías */
.anom{margin-top:16px}
.an-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.an-it{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:4px 10px;align-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.an-it.rojo{border-color:color-mix(in srgb,var(--crit-b) 45%,var(--line));background:color-mix(in srgb,var(--crit-b) 6%,var(--panel))}
.an-it .dot{margin-top:6px}
.an-tx{display:flex;flex-direction:column;min-width:0;gap:2px}.an-tx b{font-weight:600;font-size:14px}.an-tx small{color:var(--fg-2);font-size:12.5px}.an-f{font-size:11.5px}
.an-m{font-weight:600;white-space:nowrap}
.an-acc{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* 4.0 · A3 Rastro de decisiones */
.rastro{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.rastro-h{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}.rastro-h .faint{font-size:12.5px}
.rastro-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rastro-l li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.rastro-l li>div{display:flex;flex-direction:column;gap:3px;min-width:0}.rastro-l b{font-weight:600;font-size:13.5px}.rastro-l small{font-size:12.5px}
.rastro-m{display:flex;gap:4px;margin-top:2px}.rastro-m i{width:16px;height:10px;border-radius:3px;background:var(--ok-b)}.rastro-m i.mal{background:var(--crit-b)}.rastro-m i.curso{opacity:.55}
.rastro-b{position:relative;display:block;height:8px;border-radius:4px;background:var(--line);overflow:visible;max-width:280px;margin-top:3px}
.rastro-b>span{display:block;height:100%;border-radius:4px;background:var(--ok-b)}.rastro-b em{position:absolute;top:-3px;width:2px;height:14px;background:var(--fg-2)}
.dec-link{font-size:12px}

/* 4.0 · C3 Informe del mes */
#informe{position:fixed;inset:0;z-index:80;background:var(--bg);overflow:auto;padding:0 16px 32px}
body.con-informe{overflow:hidden}
.inf-bar{position:sticky;top:0;z-index:1;display:flex;gap:8px;align-items:center;padding:calc(10px + env(safe-area-inset-top,0px)) 0 10px;background:var(--bg);border-bottom:1px solid var(--line);margin-bottom:16px}
.inf-bar b{font-size:15px;text-transform:capitalize;min-width:120px;text-align:center}
.inf-hoja{max-width:860px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:22px}
.inf-h h1{margin:4px 0 2px;font:700 28px/1.15 var(--f-display, inherit)}.inf-eye{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.inf-hoja h2{font-size:15px;margin:0 0 8px}.inf-n{font-size:12.5px;margin:0 0 8px}
.inf-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.inf-kpis>div{display:flex;flex-direction:column;gap:2px;padding:12px;border:1px solid var(--line);border-radius:10px}
.inf-kpis b{font-size:20px}.inf-kpis small{font-size:12px}.inf-d{font-size:11.5px;color:var(--fg-3)}.inf-d.bien{color:var(--ok-b)}.inf-d.mal{color:var(--crit-b)}
.inf-svg{width:100%;height:auto;display:block}.inf-t{font-size:12px;fill:var(--fg-2)}
.inf-tab{margin-top:10px;font-size:13px}
.inf-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.inf-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.inf-l li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.inf-l li .faint{font-size:12px}.inf-big{font-size:24px;font-weight:700;margin:0}
.inf-f{font-size:11.5px;border-top:1px solid var(--line);padding-top:10px}
@media (max-width:640px){.inf-svg,.inf-hoja .inf-n{display:none}.inf-tab{font-size:12px}.inf-tab th,.inf-tab td{padding:6px 4px}
  .inf-hoja{padding:16px}.inf-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.inf-2{grid-template-columns:minmax(0,1fr)}.inf-l li{grid-template-columns:minmax(0,1fr) auto}.inf-l li .faint{display:none}}
@media print{
  body.con-informe>*:not(#informe){display:none!important}
  html,body{background:#fff!important}
  #informe{position:static;overflow:visible;padding:0;background:#fff}
  .inf-bar{display:none}
  .inf-hoja{border:0;border-radius:0;max-width:none;padding:0;background:#fff;color:#111}
  .inf-svg,.inf-kpis,.inf-2>section,.inf-l li,.inf-tab tr{break-inside:avoid}.inf-hoja h2{break-after:avoid}
  .inf-hoja .faint,.inf-d,.inf-eye,.inf-f{color:#555!important}.inf-t{fill:#333}.inf-svg .trk{fill:#e8e8e8}.inf-svg .lim{fill:#111}
  .inf-kpis>div,.inf-l li,.inf-tab td,.inf-tab th,.inf-f{border-color:#ddd!important}
  @page{margin:14mm}
}

/* 4.0 · D2 Cola sin conexión */
.live.cola{color:var(--warn-b);font-weight:600}.live.cola i{background:var(--warn-b);animation:none}
@media (min-width:901px){.brand .live.cola>span{display:inline}}

/* 4.0 · L4 buzón de WhatsApp */
.bz-pasos li { margin-bottom: 8px; }
.bz-v { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0; }
.bz-v code { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; font-size: 11.5px; padding: 4px 6px; border-radius: 6px; background: var(--bg-2, rgba(127,127,127,.08)); }
.bz-v .faint { font-size: 12px; min-width: 110px; }
.bz-ia { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; font-size: 13px; line-height: 1.45; }
.bz-ia input { margin-top: 3px; }
.cel-bz { font-size: 12.5px; margin-top: 8px; }

/* 3.18.1 · Cuadro de registro: siempre marcado con el color del tema (aquí se escribe); con el foco cambia de color
   (borde del color del texto + halo del tema) para indicar que ya puedes escribir. */
.compose #mtexto{border:2px solid var(--accent);background:var(--panel);padding:8px 10px;transition:border-color .15s,box-shadow .15s}
.compose #mtexto::placeholder{color:var(--fg-3)}
.compose #mtexto:focus,.compose #mtexto:focus-visible{border-color:var(--fg);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent);outline:0}
.compose.destacar{animation:destacar 1.2s ease-out;border-radius:12px}
#capEspacio{height:0}
.ult-resp{display:none}
@media (max-width:900px){
  /* Con el cuadro arriba, la última respuesta se ve justo debajo (el chat queda fuera de la vista) */
  .ult-resp:not(:empty){display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 10px 10px;padding:8px 10px;border-radius:12px;
    background:var(--panel);border:1px solid var(--line);font-size:12.5px;line-height:1.4;color:var(--fg-2)}
  .ult-resp .ur-t{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
  .ult-resp .ur-a{display:flex;gap:10px;margin-left:auto}
  .ult-resp button{border:0;background:none;color:var(--accent);font:inherit;font-weight:600;padding:2px 0;cursor:pointer}
  /* El simulador crece con su contenido: el chat tiene su propio alto y el cuadro, el botón y la respuesta nunca se recortan */
  .phone{height:auto}
  .phone .chat{flex:none;height:min(52vh,420px);height:min(52svh,420px)}
}
/* «Enviar» va siempre al lado del cuadro, también en pantallas angostas */
.compose #mtexto{flex:1 1 120px}

/* 3.19 · Slider contextual de sugerencias bajo «Enviar»: una fila compacta con flechas ‹ › */
.sug{display:flex;align-items:center;gap:4px;padding:0 6px 10px;min-width:0}
.sug[hidden]{display:none}
.sug-track{display:flex;gap:6px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;flex:1 1 auto;min-width:0;padding:2px 2px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%)}
.sug-track::-webkit-scrollbar{display:none}
.sug-chip{flex:0 0 auto;white-space:nowrap;font-size:12.5px;padding:5px 11px}
.sug-chip.gen{border-style:dashed;color:var(--fg-2)}
.sug-arr{position:relative;flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--fg-2);
  display:grid;place-items:center;font-size:14px;line-height:1;padding:0;cursor:pointer}
.sug-arr::before{content:"";position:absolute;inset:-4px}           /* zona táctil de 28 px aunque se vea de 20 px */
.sug-arr:disabled{opacity:.3;cursor:default}

/* 3.19 · Registro manual: monto angosto (28 %) y categoría ancha (72 %), también en el celular */
#manual.form{grid-template-columns:minmax(0,28fr) minmax(0,72fr)}
#manual .sld{min-width:0;width:100%}
/* 3.19 · Tabletas (901–1180 px): el simulador crece con su contenido y el chat tiene su propio alto (igual que el celular) */
@media (min-width:901px) and (max-width:1180px){
  .phone{height:auto}
  .phone .chat{flex:none;height:min(52vh,460px);height:min(52svh,460px)}
}

/* 3.19 · Semáforo de conexiones junto a la ✕ del cajón «Lo que vence» */
#drawer .drawer-h{gap:8px}
.sem-cx{display:inline-flex;align-items:center;gap:6px;margin-left:auto;border:1px solid var(--line);background:var(--panel-2);color:var(--fg-2);
  border-radius:999px;padding:4px 10px 4px 8px;font:600 12px/1 var(--f-body,inherit);cursor:pointer;white-space:nowrap}
.sem-cx i{width:9px;height:9px;border-radius:50%;background:var(--fg-3)}
.sem-cx.verde i{background:var(--ok);box-shadow:0 0 6px var(--ok)} .sem-cx.amarillo i{background:var(--warn);box-shadow:0 0 6px var(--warn)}
.sem-cx.rojo i{background:var(--crit);box-shadow:0 0 6px var(--crit)} .sem-cx.rojo{border-color:var(--crit);color:var(--crit)}
.sem-cx.cargando i{animation:pulse 1s infinite}
#semDet{margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.sem-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sem-lista li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:10px;align-items:center}
.sem-lista b{display:block;font-size:13.5px} .sem-lista small{display:block;color:var(--fg-2);font-size:12px;overflow-wrap:anywhere}
.sem-p{width:10px;height:10px;border-radius:50%;background:var(--fg-3)}
.sem-p.verde{background:var(--ok)} .sem-p.amarillo{background:var(--warn)} .sem-p.rojo{background:var(--crit)}
#recBtn[data-cx="rojo"]::after{content:"";position:absolute;left:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;background:var(--crit);box-shadow:0 0 0 2px var(--panel)}

/* 3.19 · Bloqueo con PIN: pantalla opaca (no deja ver nada detrás) */
body.bloqueada{overflow:hidden}
#bloqueo{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;padding:24px 16px;
  padding-top:calc(24px + env(safe-area-inset-top,0px));padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.blq{width:min(340px,100%);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.blq h2{margin:4px 0 0;font-size:19px;text-wrap:balance} .blq p{margin:0}
.blq-ic{width:56px;height:56px;border-radius:16px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:18px}
.blq-pin{text-align:center;font-size:24px;letter-spacing:.4em;max-width:220px;border:2px solid var(--accent)}
.blq-pin:focus{border-color:var(--fg);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent);outline:0}
.blq .btn{min-width:180px} .blq-msg{min-height:1.2em;color:var(--crit);font-size:13px}
#blqAyuda{display:flex;flex-direction:column;gap:8px;font-size:12.5px}
.pin-f{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px;align-items:center;margin:6px 0;max-width:460px}
/* 3.19 · aviso único cuando el servidor del PC no responde */
#srvCaido{position:fixed;z-index:95;top:calc(8px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:min(680px,calc(100% - 24px));
  display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-radius:12px;background:linear-gradient(var(--crit-soft),var(--crit-soft)),var(--panel);color:var(--fg);border:1px solid var(--crit);box-shadow:var(--elev-2);font-size:14px}
#srvCaido>span:nth-child(2){flex:1;min-width:0}
#srvCaido .srv-dot{width:10px;height:10px;border-radius:50%;background:var(--crit);flex:none;animation:srvP 1.4s ease-in-out infinite}
@keyframes srvP{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){#srvCaido .srv-dot{animation:none}}
/* 3.19 · tarjetas de Conexiones plegables */
.cx-tg{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:inherit;border-radius:8px;padding:2px 4px;margin:-2px -4px}
.cx-tg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cx-chev{display:inline-block;width:14px;transition:transform .18s;color:var(--fg-3);font-size:18px;line-height:1}
.cx-tg[aria-expanded="true"] .cx-chev{transform:rotate(90deg)}
.cx-sec.pleg{padding-bottom:12px}
.cx-cuerpo{display:flex;flex-direction:column;gap:12px}
/* 3.19 · pestañas fijas arriba en el PC (no se esconden al desplazar) */
@media (min-width:901px){
  .tabs{position:sticky;top:0;z-index:12;background:var(--bg);margin-top:-18px;padding-top:10px;box-shadow:0 1px 0 var(--line)}
}
.tab-ord{flex:none;align-self:center;margin-left:6px;border:0;background:transparent;color:var(--fg-3);font-size:15px;line-height:1;padding:6px 8px;border-radius:8px;cursor:pointer;opacity:.55}
.tab-ord:hover,.tab-ord:focus-visible{opacity:1;background:var(--panel-2);color:var(--fg)}
/* orden de pestañas */
.ot-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.ot-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ot-lista li{display:grid;grid-template-columns:24px 1fr 36px 36px;align-items:center;gap:6px;padding:4px 6px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.ot-n{color:var(--fg-3);font-size:12px;text-align:center}
.ot-t{font-weight:600;font-size:14px;min-width:0}
.ot-b{height:32px;border:1px solid var(--line);background:var(--panel);color:var(--fg);border-radius:8px;cursor:pointer;font-size:15px}
.ot-b:disabled{opacity:.3;cursor:default}
.ot-b:not(:disabled):hover{border-color:var(--accent)}
/* 3.19 · PIN recuperable */
.pin-rec{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;max-width:520px}
.pin-rec-f{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.rec-cod{border:1px dashed var(--accent);border-radius:12px;padding:12px;background:var(--accent-soft)}
.rec-num{font:700 20px/1.2 var(--f-num, ui-monospace),ui-monospace,monospace;letter-spacing:.12em;user-select:all}
#blqAyuda .input{text-align:center}
#blqAyuda details{text-align:left}
.lr-apr{margin:6px 0 0;font-size:13px;color:var(--fg-2)}
/* 3.19 · minigráfico del seguimiento de decisiones */
.spark{margin:6px 0 0;display:flex;flex-direction:column;gap:2px;max-width:100%}
.spark svg{max-width:100%;height:auto;overflow:visible}
.spark .sp-gasto{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.spark .sp-pres{fill:none;stroke:var(--fg-3);stroke-width:1.5;stroke-dasharray:4 3}
.spark .sp-antes{fill:var(--panel-2)}
.spark .sp-dec{stroke:var(--fg-3);stroke-width:1;stroke-dasharray:2 2}
.spark .sp-p{fill:var(--accent);stroke:var(--panel);stroke-width:2}
.spark .sp-p.mal{fill:var(--crit)}
.spark .sp-p.antes{opacity:.55}
.spark .sp-t{font-size:10px;fill:var(--fg-3)}
.spark figcaption{font-size:11.5px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.sp-k{display:inline-block;width:14px;height:0;border-top:2px solid var(--accent)}
.sp-k.p{border-top:1.5px dashed var(--fg-3);margin-left:6px}
/* 3.19 · Bandeja agrupada por comercio */
.pgrp{border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}
.pgrp>summary{list-style:none;display:grid;grid-template-columns:34px minmax(0,1fr) auto 16px;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;border-radius:14px}
.pgrp>summary::-webkit-details-marker{display:none}
.pgrp>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pg-n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--fg);font-weight:700;font-size:13px}
.pg-t{display:flex;flex-direction:column;min-width:0}
.pg-t b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pg-t small{font-size:12px}
.pg-m{font-weight:600;white-space:nowrap}
.pg-chev{color:var(--fg-3);transition:transform .18s;font-size:18px;line-height:1}
.pgrp[open] .pg-chev{transform:rotate(90deg)}
.pg-acc{padding:0 12px 8px}
.pgrp>.pend{padding:0 10px 10px}
/* 3.19 · ¿Por qué está aquí? */
.porque{font-size:13px}
.porque>summary{cursor:pointer;color:var(--fg-2);font-weight:600;width:max-content;max-width:100%}
.porque>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.porque ul{margin:6px 0 4px;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.porque p{margin:0;font-size:12px}
/* 3.19 · 📱 Conectar mi celular */
.rf-cel{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:0 0 8px;padding:9px 10px;border:1px solid var(--accent);border-radius:12px;background:var(--accent-soft);color:var(--fg);font:600 13.5px var(--f-body);cursor:pointer}
.rf-cel:hover{background:color-mix(in srgb,var(--accent) 22%,var(--panel))}
.rf-cel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.rail-col:not(.rail-peek) .rf-cel{display:none}
.cel-box{display:flex;flex-direction:column;gap:12px}
.cel-qr{display:grid;place-items:center}
.cel-qr .qr{width:min(240px,70vw);background:#fff;padding:10px;border-radius:12px}
.cel-qr .qr svg{width:100%;height:auto;display:block}
.cel-spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:celG 1s linear infinite}
@keyframes celG{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cel-spin{animation:none}}
/* 3.19 · traer datos con protección */
.tr-aviso{font-size:13px;border-left:3px solid var(--warn);padding:6px 10px;background:var(--panel)}
.tr-uso{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tr-uso legend{font-weight:700;font-size:13px;margin-bottom:4px}
.tr-uso label{display:grid;grid-template-columns:20px minmax(0,1fr);gap:6px;align-items:start;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer}
.tr-uso label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.tr-uso input{margin-top:3px;accent-color:var(--accent)}
.tr-uso small{display:block;color:var(--fg-2);font-size:12px}
.tr-hecho{border-color:color-mix(in srgb,var(--ok) 40%,var(--line));background:color-mix(in srgb,var(--ok) 8%,var(--panel))}
.tr-hecho ul{margin:0;padding-left:18px;font-size:13px;display:flex;flex-direction:column;gap:3px}
/* 3.19 · Unir categorías: lista completa en vez de deslizador */
.drawer.ancho{width:min(760px,100%)}
.fus{display:flex;flex-direction:column;gap:12px;min-height:100%}
.fus-dest{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;align-items:center}
.fus-dest p{grid-column:1/-1;margin:0;font-size:12.5px}
.fus-herr{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fus-herr #fusQ{flex:1 1 220px;min-width:0}
.fus-arch{font-size:13px}
.fus-lista{display:flex;flex-direction:column;gap:6px}
.fus-g{margin:8px 0 2px;font:700 11.5px var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.fus-g.sug{color:var(--accent)}
.fus-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:6px}
.fus-it{display:grid;grid-template-columns:18px 22px minmax(0,1fr);gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);cursor:pointer}
.fus-it.on{border-color:var(--accent);background:var(--accent-soft)}
.fus-it:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.fus-it input{accent-color:var(--accent);width:16px;height:16px;margin:0}
.fus-ic{text-align:center}
.fus-tx{display:flex;flex-direction:column;min-width:0}
.fus-tx b{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fus-tx small{font-size:11.5px;color:var(--fg-3)} .fus-tx em{font-style:normal;color:var(--accent);font-weight:600}
.fus-pie{position:sticky;bottom:-16px;margin:auto -18px -16px;padding-inline:18px !important;padding-bottom:12px !important;z-index:2;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:10px 0 4px;background:var(--panel);border-top:1px solid var(--line)}
.fus-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 260px;min-width:0}
.fus-res{margin:0;font-size:14.5px}
.fus-ok{margin:0;padding:8px 10px;border-radius:10px;background:var(--ok-soft);color:var(--fg);font-size:13.5px}
.fus-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:8px}
.fus-card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel-2)}
.fus-card ul{margin:6px 0 0;padding-left:18px;font-size:13px;display:flex;flex-direction:column;gap:4px}
.fus-card .chip{font-size:11.5px;padding:2px 7px}
.fus-hecho{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fus-hecho li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.fus-hecho li span{display:flex;flex-direction:column;min-width:0} .fus-hecho small{color:var(--fg-3);font-size:12px}
.fus-hecho li.des{opacity:.65;border-style:dashed}

/* 3.19 · Listas: presupuesto inicial y lista de compras */
.ls-top{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.ls-tot{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;font-size:13.5px}
.ls-tot b{font-size:16px}
.ls-dudas{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;background:var(--warn-soft);color:var(--warn-b);font-size:12px;font-weight:650}
.ls-ayuda{font-size:13px;margin:8px 0 10px}
.ls-add{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ls-add .input{flex:1 1 260px;min-width:0}
.ls-mes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-bottom:12px}
.ls-g{margin:0 0 12px}
.ls-g h3{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:650;margin:0 0 4px;padding:6px 2px;border-bottom:1px solid var(--line);color:var(--fg-2)}
.ls-g.duda h3{color:var(--warn-b);border-color:var(--warn-b)}
.ls-lista{list-style:none;margin:0;padding:0}
.ls-it{display:grid;grid-template-columns:auto minmax(0,1fr) 116px auto;gap:6px 10px;align-items:center;padding:7px 2px;border-bottom:1px solid var(--line)}
.ls-it:not(:has(.ls-chk)){grid-template-columns:minmax(0,1fr) 116px auto}
.ls-it.hecho .ls-nom{text-decoration:line-through;color:var(--fg-3)}
.ls-it.fijo{background:linear-gradient(90deg,var(--accent-soft),transparent 60%)}
.ls-chk{width:20px;height:20px;accent-color:var(--accent)}
.ls-n{display:flex;flex-direction:column;gap:3px;min-width:0}
.ls-nom{font-weight:600;overflow-wrap:anywhere}
.ls-meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:12px}
.ls-cat{border:1px solid var(--line-2);background:var(--panel-2);color:var(--fg-2);border-radius:999px;padding:1px 9px;font-size:12px;cursor:pointer}
.ls-cat.duda{border-color:var(--warn-b);background:var(--warn-soft);color:var(--warn-b);font-weight:650}
.ls-tag.cita{color:var(--info-b);font-weight:600}
.ls-nota{color:var(--fg-3);overflow-wrap:anywhere}
.ls-delta{font-size:11.5px;font-weight:650}
.ls-delta.sube{color:var(--crit-b)}.ls-delta.baja{color:var(--ok-b)}
.ls-m{text-align:right;padding:6px 8px}
.ls-m[readonly]{opacity:.7}
.ls-acc{display:flex;gap:2px}
.ls-acc .iconbtn{width:30px;height:30px;font-size:14px}
.ls-acc .iconbtn.on{background:var(--accent-soft);border-color:var(--accent)}
.ls-acc .iconbtn[disabled]{opacity:.35;cursor:not-allowed}
.ls-notas{margin-top:8px}
.ls-sug{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-top:10px}
.ls-hist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ls-hist li{display:grid;grid-template-columns:96px minmax(0,1fr) auto 64px;gap:10px;align-items:center;font-size:13px}
.ls-hb{height:8px;border-radius:4px;background:var(--panel-2);overflow:hidden}.ls-hb i{display:block;height:100%;background:var(--accent)}
.ls-vh{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:14px 0 6px}
.ls-vl{list-style:none;margin:0;padding:0}
.ls-vl li{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,210px);gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.ls-vl li.duda{border-left:3px solid var(--warn-b);padding-left:8px}
.ls-vl .ls-n span{font-size:12px}
.ls-pie{position:sticky;bottom:-16px;background:var(--panel);padding:10px 0}
.ls-pres{width:100%;border-collapse:collapse;font-size:13px}
.ls-pres th,.ls-pres td{padding:7px 6px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.ls-pres .num{text-align:right}
.ls-pres tr.igual{opacity:.55}
@media (max-width:560px){
  .ls-it{grid-template-columns:auto minmax(0,1fr) 96px}
  .ls-it:not(:has(.ls-chk)){grid-template-columns:minmax(0,1fr) 96px}
  .ls-acc{grid-column:1/-1;justify-content:flex-end}
  .ls-vl li{grid-template-columns:1fr}
}

/* 3.19 · Árbol: resumen al contraer y tarjeta «Resumen» con naturalezas a elección */
.node .resumen{display:flex;flex-direction:column;gap:6px;padding:4px 12px 10px 44px;font-size:12.5px}
.node.open>.resumen{display:none}
.node .resumen .mini{width:44px;height:5px;display:inline-block;vertical-align:middle}
.nres-c{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.nres-i{display:inline-flex;gap:6px;align-items:center;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.nres-pie .neg{color:var(--crit-b)}
.cres{flex-direction:row!important;flex-wrap:wrap;gap:4px 14px!important}
.cres-i{white-space:nowrap}
.node.res{border-color:var(--line-2)}
.node.res>.row .t{font:650 15px var(--f-display)}
.res-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 2px 44px}
.res-chips .chip{display:inline-flex;align-items:center;padding:3px 10px;font-size:12.5px}
.res-chips .sw{margin-right:6px}
.node.res>.resumen{padding-top:8px}
.nres{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel)}
.nres-h{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;font-size:13.5px}
.node.res.open>.kids.tree{display:flex;padding:10px}
.node.res.open>.res-chips{display:none}
@media (max-width:560px){ .node .resumen,.res-chips{padding-left:12px} }
.atajo-rec{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.atajo-rec .btn{padding:16px 10px;font-size:15px}

/* 3.19 · Seguridad: interruptores, llave de la app, sugerencia de PIN */
.sw-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;cursor:pointer;margin:2px 0 8px}
.sw-row input{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:999px;background:var(--line-2);position:relative;cursor:pointer;margin:1px 0 0;transition:background .2s;flex:none}
.sw-row input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--fg);transition:transform .2s}
.sw-row input:checked{background:var(--accent)}.sw-row input:checked::after{transform:translateX(18px);background:var(--accent-ink)}
.sw-row input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sw-t{display:flex;flex-direction:column;gap:2px;font-size:13.5px}.sw-t small{font-size:12.5px}
.traslado>.tr-app{grid-column:1/-1;align-items:stretch}
.tr-app .row-actions{align-items:center}
.tr-app>p{margin:0}
.la-ll{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.la-ll-r{display:flex;gap:6px;flex-wrap:wrap}.la-ll-r .input{flex:1 1 200px;min-width:0;letter-spacing:.08em}
.pin-llave{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:space-between;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px}
.pin-guia{margin-top:12px}.pin-guia-b{padding:4px 12px 10px;font-size:13px;display:flex;flex-direction:column;gap:6px}.pin-guia-b p,.pin-guia-b ol{margin:0}.pin-guia-b ol{padding-left:20px;display:flex;flex-direction:column;gap:4px}
.sug-pin{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:center;padding:10px 12px;margin-bottom:12px;border:1px solid var(--accent);border-radius:12px;background:var(--accent-soft);font-size:13.5px}
.sug-pin-ic{font-size:18px}.sug-pin-a{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
@media (min-width:700px){.sug-pin{grid-template-columns:auto minmax(0,1fr) auto}.sug-pin-a{grid-column:auto}}

/* 3.19 · «Mis listas» arriba, al lado del simulador: se acomoda al ancho de su columna */
#pListas{container-type:inline-size}
@container (max-width:560px){
  .ls-it{grid-template-columns:auto minmax(0,1fr) 104px}
  .ls-it:not(:has(.ls-chk)){grid-template-columns:minmax(0,1fr) 104px}
  .ls-acc{grid-column:1/-1;justify-content:flex-end}
}
.pte{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.pte h4{margin:0 0 6px;display:flex;gap:8px;align-items:center}
.pte-qr{margin:8px 0}
.pte-qr-ver{display:grid;place-items:center;margin-top:10px}
.pte-qr-ver .qr-caja{width:min(220px,70vw);background:#fff;padding:10px;border-radius:12px}
.pte-qr-ver .qr-caja svg{width:100%;height:auto;display:block}
/* 3.19 · el PC conectado: LED propio dentro del semáforo junto a la ✕, y la cabecera dice «con tu PC» */
.sem-cx .sem-pc{display:inline-flex;align-items:center;gap:5px;font-style:normal;margin-left:2px;padding-left:8px;border-left:1px solid var(--line);color:var(--ok)}
.sem-cx .sem-pc i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}
.live.con-pc span{color:var(--ok);font-weight:600}
@media (prefers-reduced-motion:reduce){.sem-cx .sem-pc i{animation:none}}
.bz-act{margin:10px 0;padding:10px 12px;border:1px solid var(--warn);border-radius:12px;background:color-mix(in srgb,var(--warn) 8%,transparent)}
.bz-act .guia{margin:0}
/* 3.19 · Buzón v3: elegir, tres pasos con ✓, código para unir el número y la familia */
.bz-elige .opc p{font-size:13px}
.bz-ruta li>div{min-width:0;display:flex;flex-direction:column;gap:4px}
.bz-ruta li small{color:var(--fg-2);font-size:12.5px;overflow-wrap:anywhere}
.bz-ruta .btn,.bz-ruta .link{align-self:flex-start}
.bz-ruta .bz-v{margin:2px 0}
.bz-cod{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px;padding:10px 12px;border:1px dashed var(--accent);border-radius:12px;background:color-mix(in srgb,var(--accent) 7%,var(--panel-2))}
.bz-cod>.bz-cod-t{display:flex;flex-direction:column;gap:4px;flex:1 1 200px;min-width:0}
.bz-cod b.num{font:700 26px/1.1 var(--f-num);letter-spacing:.06em;color:var(--fg)}
.bz-cod>.bz-qr{width:132px;flex:0 0 132px;background:#fff;border-radius:10px;padding:6px}
.bz-qr svg{width:100%;height:auto;display:block}
.bz-unir{display:flex;flex-direction:column;gap:6px;max-width:560px}
.bz-lista{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.bz-lista li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.bz-lista li>div{min-width:0;display:flex;flex-direction:column}
.bz-lista small{font-size:12px;overflow-wrap:anywhere}
.bz-cod>.faint,.bz-cod>.bz-v{flex:1 1 100%;margin:0}
.bz-ruta{grid-template-columns:1fr}
.bz-cod .faint{font-size:13px}