/* Superficies y controles compartidos por Cloper. El chart conserva su propio espacio. */
:root,:root[data-theme=dark]{
  --canvas:#08090c;--bg:#0f0f0f;--panel:#181818;--surface:#1e1e1e;
  --line:#2e2e2e;--panel-line:#2e2e2e;--ink:#dbdbdb;--muted:#a3a6af;--faint:#8c909b;
  --accent:#2962ff;--accent-soft:#2962ff1c;--cyan:#5b8cff;--hover:#ffffff0a;
  --go:#26a69a;--go-dim:#26a69a17;--halt:#ef5350;--halt-dim:#ef535017;--warn:#ffb74d;
  --sans:-apple-system,BlinkMacSystemFont,"Trebuchet MS",Roboto,Ubuntu,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;--r:8px;
}
:root[data-theme=light]{
  --canvas:#e0e3eb;--bg:#fff;--panel:#fff;--surface:#f8f9fd;--line:#e0e3eb;--panel-line:#e0e3eb;
  --ink:#131722;--muted:#5d606b;--faint:#6a6e7b;--accent:#2962ff;--accent-soft:#2962ff10;
  --cyan:#2962ff;--hover:#13172206;--go:#087f74;--go-dim:#08998110;
  --halt:#d32f3d;--halt-dim:#f2364510;--warn:#946200;
}
body{font-family:var(--sans);color:var(--ink);background:var(--canvas);background-image:none;background-attachment:initial}
body::before{display:none}
button,input,select,textarea{font-family:var(--sans)}
button,a,input,select,textarea,summary{outline-offset:3px}
:focus-visible{outline:2px solid var(--accent)}
button:disabled{cursor:default}
:is(.app-dashboard:not(.chart-active),.app-config) :is(button,input,select,textarea,a){transition:none}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);font:600 18px var(--sans)}
.theme-switch{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;padding:6px;margin:0;background:transparent;color:var(--muted);border:0;border-radius:6px;cursor:pointer}
.theme-switch:hover{color:var(--ink);background:var(--hover)}
.theme-switch svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4}

/* Marco de aplicación y navegación. */
.app-dashboard:not(.chart-active) .layout{gap:5px;padding:5px;align-items:flex-start}
.app-dashboard:not(.chart-active) .sidebar{width:196px;height:calc(100dvh - 10px);top:5px;padding:12px 8px;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:8px;backdrop-filter:none;overflow-y:auto;scrollbar-width:thin}
.app-dashboard:not(.chart-active) .brand{padding:4px 8px 14px;gap:9px;font-size:17px;letter-spacing:0}
.app-dashboard:not(.chart-active) .brand .tld{display:none}
.app-dashboard:not(.chart-active) nav.tabs{gap:3px}
.app-dashboard:not(.chart-active) nav.tabs .lbl{padding:15px 12px 6px;font:11px var(--sans);letter-spacing:0;text-transform:none;color:var(--faint)}
.app-dashboard:not(.chart-active) nav.tabs button{padding:10px 12px;border-radius:6px;font:13px var(--sans);gap:11px;color:var(--muted);min-height:38px}
.app-dashboard:not(.chart-active) nav.tabs button:hover{color:var(--ink);background:var(--hover)}
.app-dashboard:not(.chart-active) nav.tabs button.on{color:var(--accent);background:var(--accent-soft)}
.app-dashboard:not(.chart-active) nav.tabs button.on::before{display:none}
.app-dashboard:not(.chart-active) nav.tabs button svg{width:20px;height:20px;stroke-width:1.5;opacity:1;color:inherit}
.app-dashboard:not(.chart-active) .side-foot{gap:8px;padding:12px 5px 2px;border-color:var(--line)}
.app-dashboard:not(.chart-active) .side-foot .navlink{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:6px;font:12px var(--sans);border-color:var(--line);background:var(--surface)}
.app-dashboard:not(.chart-active) .side-foot .navlink svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4}
.app-dashboard:not(.chart-active) .main{gap:5px;min-height:calc(100dvh - 10px)}
.app-dashboard .tab-panel{animation:none}
.app-dashboard:not(.chart-active) .main>.wrap{max-width:none;width:100%;padding:0 18px}
.app-dashboard:not(.chart-active) .topbar{top:5px;background:var(--bg);border:1px solid var(--line);border-radius:8px;backdrop-filter:none}
.app-dashboard:not(.chart-active) .topbar-in{max-width:none;width:100%;height:46px;padding:0 14px;gap:10px}
.app-dashboard:not(.chart-active) .clock{font:11px var(--sans);font-variant-numeric:tabular-nums}
.app-dashboard:not(.chart-active) #alerts{padding:0}
.app-dashboard:not(.chart-active) #alerts:empty{display:none}
.app-dashboard:not(.chart-active) #alerts .alert{margin:0;border-radius:8px}
.app-dashboard:not(.chart-active) .head{padding:22px 0 10px}
.app-dashboard:not(.chart-active) h1{font:600 clamp(23px,2.4vw,30px)/1.2 var(--sans);letter-spacing:-.5px;background:none;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.app-dashboard:not(.chart-active) .eyebrow{font:11px var(--sans);letter-spacing:.3px;color:var(--muted);margin-bottom:9px}
.app-dashboard:not(.chart-active) .lede{font-size:13px;line-height:1.6;margin-top:9px;max-width:100ch}
.app-dashboard:not(.chart-active) section{padding-top:20px;padding-bottom:4px}
.app-dashboard:not(.chart-active) .h2{font:500 14px var(--sans);letter-spacing:0;text-transform:none;color:var(--muted);margin-bottom:6px}
.app-dashboard:not(.chart-active) .sub{font-size:12px;line-height:1.6;margin-bottom:12px}
.app-dashboard:not(.chart-active) :is(.card,.kpi,.rk,.bn-card,.exp-cell,.clr-card,.setup){background:var(--panel);border-color:var(--line);border-radius:8px;box-shadow:none}
.app-dashboard:not(.chart-active) .card{padding:16px;min-width:0}
.app-dashboard:not(.chart-active) .cols>div{min-width:0}
.app-dashboard:not(.chart-active) .card{overflow-x:auto}
.app-dashboard:not(.chart-active) .kpi::after{display:none}
.app-dashboard:not(.chart-active) :is(.kpis,.rp-grid,.cols,.live-grid,.cmp-kpis){gap:10px}
.app-dashboard:not(.chart-active) .kpis{margin-top:16px}
.app-dashboard:not(.chart-active) .kpi{padding:16px}
.app-dashboard:not(.chart-active) :is(.kpi .k,.rk .k,.live-grid .k,.cmp-kpis .ck,.exp-cell .lab){font:11px var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.app-dashboard:not(.chart-active) :is(.kpi .v,.rk .v,.live-grid .v,.cmp-kpis .cv,.exp-cell .val){font-family:var(--sans);font-weight:500;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.app-dashboard:not(.chart-active) .kpi .v{font-size:28px}
.app-dashboard:not(.chart-active) .exp-bar>i{background:var(--accent)}
.app-dashboard:not(.chart-active) .meter{background:var(--surface)}
.app-dashboard:not(.chart-active) .meter i{background:var(--accent);border-radius:3px}
.app-dashboard:not(.chart-active) footer{border-color:var(--line);padding:18px 0 24px;margin-top:24px;font-size:11px}

/* Controles compartidos, tablas y estados. */
:is(.app-dashboard:not(.chart-active),.app-config) :is(.badge,.pill,.chip,.tag,.pillstate,.authchip){font-family:var(--sans);border-radius:5px;font-size:11px;letter-spacing:0}
:is(.app-dashboard:not(.chart-active),.app-config) :is(input,select,textarea,.key){background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px;font-family:var(--sans);color-scheme:inherit}
:is(.app-dashboard:not(.chart-active),.app-config) :is(input,select,textarea):focus{border-color:var(--accent);outline:2px solid var(--accent-soft)}
:is(.app-dashboard:not(.chart-active),.app-config) input::placeholder{color:var(--faint);opacity:1}
.app-dashboard:not(.chart-active) :is(.seg,.pills,.pbar){gap:4px}
.app-dashboard:not(.chart-active) .seg{max-width:100%;flex-wrap:wrap}
.app-dashboard:not(.chart-active) .seg{border-radius:6px;background:var(--surface);border-color:var(--line);padding:3px}
.app-dashboard:not(.chart-active) .seg button{border-radius:4px;padding:6px 12px;font:12px var(--sans)}
.app-dashboard:not(.chart-active) .seg button.on{color:var(--accent);background:var(--accent-soft);font-weight:500}
.app-dashboard:not(.chart-active) .pill{padding:5px 10px}
.app-dashboard:not(.chart-active) .pill.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:var(--accent-soft)}
.app-dashboard:not(.chart-active) :is(button.reseed,a.navlink){border-radius:6px;background:var(--surface);border-color:var(--line);font:11px var(--sans);padding:6px 10px}
.app-dashboard:not(.chart-active) .filters select{appearance:auto;font:12px var(--sans);padding:7px 10px;min-height:32px}
.app-dashboard:not(.chart-active) :is(#bt-form,#uni-form) .fld :is(input,select){background:var(--surface);color:var(--ink);border-color:var(--line);border-radius:6px;font:13px var(--sans)}
.app-dashboard:not(.chart-active) :is(#bt-form,#uni-form) .fld label{font:11px var(--sans);letter-spacing:0;text-transform:none}
.app-dashboard:not(.chart-active) :is(.regform button,#bt-go,.tn-save){background:var(--accent);color:#fff;border-color:var(--accent);border-radius:6px;font-family:var(--sans)}
.app-dashboard:not(.chart-active) .tgl input:checked+i{background:var(--accent-soft);border-color:var(--accent)}
.app-dashboard:not(.chart-active) .tgl input:checked+i::after{background:var(--accent)}
.app-dashboard:not(.chart-active) table{font-size:12px}
.app-dashboard:not(.chart-active) table :is(th,td){font-family:var(--sans);border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.app-dashboard:not(.chart-active) table th{font-size:11px;color:var(--muted);text-transform:none;letter-spacing:0;padding:11px 10px;background:var(--surface);font-weight:500}
.app-dashboard:not(.chart-active) table td{padding:11px 10px}
.app-dashboard:not(.chart-active) table :is(th.sorted,.str-name){color:var(--ink)}
.app-dashboard:not(.chart-active) tbody tr:hover,.app-dashboard:not(.chart-active) :is(.str-tbl tr.srow,.rp-tbl tr.trow):hover td{background:var(--hover)}
.app-dashboard:not(.chart-active) .str-tbl :is(th,td):first-child{background:var(--panel)}
.app-dashboard:not(.chart-active) .str-tbl tr.srow:hover td:first-child{background:var(--surface)}
.app-dashboard:not(.chart-active) :is(.wbar,.exp-bar){border-color:var(--line)}
.app-dashboard:not(.chart-active) .wbar .wb-lbl{text-shadow:none}
.app-dashboard:not(.chart-active) :is(.live-foot,.brow,.ins,.log-line,.drawer){border-color:var(--line)}
.app-dashboard:not(.chart-active) .alert{font:12px/1.6 var(--sans)}
.app-dashboard:not(.chart-active) :is(.chip.entry,.pill.activa,.pill.lv-ok,.clr-pass){color:var(--go);background:var(--go-dim);border-color:color-mix(in srgb,var(--go) 35%,var(--line))}
.app-dashboard:not(.chart-active) :is(.chip.adm,.chip.mg,.pill.aprendiendo,.pill.lv-warning,.pill.lv-parked,.clr-watch){color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,var(--line));background:color-mix(in srgb,var(--warn) 7%,var(--panel))}
.app-dashboard:not(.chart-active) :is(.pill.lv-halt,.pill.lv-disconnected,.clr-fail){color:var(--halt);background:var(--halt-dim);border-color:color-mix(in srgb,var(--halt) 35%,var(--line))}
.app-dashboard:not(.chart-active) :is(.chip.cd,.chip.simx,.pill.limitada,.pill.mode){color:var(--cyan);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.app-dashboard:not(.chart-active) :is(.alert-ok,.dec-trace .ok){color:var(--go)}
.app-dashboard:not(.chart-active) :is(.alert-crit,.dec-trace .ko,.log-line.lv-alert .lx){color:var(--halt)}
.app-dashboard:not(.chart-active) .alert-warn{color:var(--warn)}
.app-dashboard:not(.chart-active) .chart-meta{font:11px var(--sans)}
.app-dashboard:not(.chart-active) :is(.crumb,.legend,#trd-hero .hero){font-family:var(--sans)}
.app-dashboard:not(.chart-active) .ta-focus .ta-value{font:500 34px var(--sans);font-variant-numeric:tabular-nums}
.app-dashboard:not(.chart-active) svg :is(text[fill="#8a98ab"],text[fill="#5b6878"],text[fill="#94a3b8"]){fill:var(--muted)}
.app-dashboard:not(.chart-active) svg text[fill="#e8eef6"]{fill:var(--ink)}
.app-dashboard:not(.chart-active) svg [stroke="#070b11"]{stroke:var(--panel)}
.app-dashboard:not(.chart-active) svg line[stroke="rgba(255,255,255,.18)"]{stroke:var(--line)}
.app-dashboard:not(.chart-active) svg line:is([stroke="rgba(255,255,255,.06)"],[stroke="rgba(255,255,255,.2)"]){stroke:var(--line)}

/* Consola de monitoreo: conserva radares y eventos, con superficies del mismo tema. */
.app-dashboard:not(.chart-active) .hud{--h-bg:var(--panel);--h-line:var(--line);--h-line2:var(--faint);--h-cy:var(--cyan);--h-cyd:#4e7bb8;--h-am:var(--warn);--h-ink:var(--ink);--h-mu:var(--muted);--h-fa:var(--faint);--h-good:var(--go);--h-warn:var(--warn);--h-crit:var(--halt);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px}
.app-dashboard:not(.chart-active) .hud::before,.app-dashboard:not(.chart-active) .hud .hb::after{display:none}
.app-dashboard:not(.chart-active) .hud .hb{background:var(--panel);border-color:var(--line);border-radius:8px}
.app-dashboard:not(.chart-active) .hud .hl{font:500 11px/1.4 var(--sans);text-transform:none;letter-spacing:.1px}
.app-dashboard:not(.chart-active) .hud :is(.bez.caliente,.ht3,.ht4){filter:none}
.app-dashboard:not(.chart-active) .hud :is(.orb,.ret,.bez-t){stroke:var(--line)}
.app-dashboard:not(.chart-active) .hud .orb.has{stroke:color-mix(in srgb,var(--cyan) 30%,var(--line))}
.app-dashboard:not(.chart-active) .hud :is(.olbl,.blip text,.kp-lbl,.blip .bd){stroke:var(--panel)}
.app-dashboard:not(.chart-active) .hud .band{fill:var(--accent-soft);stroke:color-mix(in srgb,var(--accent) 35%,var(--line))}
.app-dashboard:not(.chart-active) .hud :is(.toast,.h-tip){background:var(--panel);border-color:var(--line);border-radius:8px;box-shadow:0 6px 24px #0002}
.app-dashboard:not(.chart-active) .hud :is(.hh.warn,.hh.crit){background:var(--panel)}
.app-dashboard:not(.chart-active) .hud .dt-tbl th{background:var(--surface)}
:root[data-theme=light] .app-dashboard .hud{--heat0:#80684b;--heat1:#926b28;--heat2:#a76c09;--heat3:#af6100;--heat4:#8b4100;--h-cold:#5b7fab}
.app-dashboard:not(.chart-active) .hud-raw{border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.app-dashboard #login{background:#0008;backdrop-filter:blur(5px)}
.app-dashboard #login .panel{background:var(--panel);border-color:var(--line);border-radius:12px;box-shadow:0 12px 48px #0004}
.app-dashboard #login h2{font-family:var(--sans)}
.app-dashboard #login label{font:12px var(--sans);text-transform:none;letter-spacing:0}
.app-dashboard #login input{background:var(--surface);border-color:var(--line);border-radius:6px;font-family:var(--sans)}
.app-dashboard #login button{background:var(--accent);border-color:var(--accent);border-radius:6px;color:#fff;font-family:var(--sans)}
.app-dashboard #login button:hover{background:#1e53e5}
.app-dashboard:not(.chart-active) svg [stroke="#34d399"]{stroke:var(--go)}
.app-dashboard:not(.chart-active) svg [fill="#34d399"]{fill:var(--go)}
.app-dashboard:not(.chart-active) svg [stroke="#f87171"]{stroke:var(--halt)}
.app-dashboard:not(.chart-active) svg [fill="#f87171"]{fill:var(--halt)}

/* Configuración: marco, índice de secciones y formularios. */
.app-config{padding:5px}
.app-header{position:sticky;top:5px;z-index:30;display:flex;align-items:center;gap:24px;height:48px;padding:0 18px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.app-header .brand{margin:0;padding:0;font-size:16px;gap:8px;color:var(--ink);text-decoration:none}
.app-header .back{font:12px var(--sans);color:var(--muted);text-decoration:none}
.app-header .theme-switch{margin-left:auto}
.app-config>.wrap{max-width:1240px;padding:22px 24px 60px;margin:0 auto}
.app-config h1{font-size:27px;font-weight:600;letter-spacing:-.4px;margin:0 0 8px}
.app-config .lede{font-size:13px;max-width:90ch;line-height:1.7}
.settings-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:24px;margin-top:24px;align-items:start}
.settings-nav{position:sticky;top:76px;display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--bg);border:1px solid var(--line);border-radius:8px}
.settings-nav a{display:block;padding:10px 12px;color:var(--muted);text-decoration:none;border-radius:5px;font-size:12px}
.settings-nav a:hover,.settings-nav a:focus-visible{background:var(--accent-soft);color:var(--accent)}
.app-config .card{margin:0 0 12px;background:var(--panel);border-color:var(--line);border-radius:8px;padding:22px;scroll-margin-top:70px}
.app-config .card h2{font:500 15px var(--sans);letter-spacing:0;text-transform:none;flex-wrap:wrap;gap:9px}
.settings-icon{width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.app-config :is(label,.assign .who){font:12px var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.app-config input,.app-config select{padding:9px 11px;font:13px var(--sans);min-height:38px}
.app-config input.code{font-family:var(--mono);font-size:18px}
.app-config button:not(.theme-switch):not(.linkish){width:auto;padding:9px 16px;font:500 12px var(--sans);background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:6px;margin-top:16px}
.app-config button:not(.theme-switch):not(.linkish):hover{background:#1e53e5}
.app-config button.ghost:not(.theme-switch){color:var(--ink);background:transparent;border-color:var(--line)}
.app-config button.ghost:not(.theme-switch):hover{background:var(--hover)}
.app-config .acct{background:var(--surface);border-color:var(--line);border-radius:6px}
.app-config .key{font-family:var(--mono);font-size:12px}
.app-config :is(.tag.go,.pillstate.on,.authchip){color:var(--go);background:var(--go-dim);border-color:color-mix(in srgb,var(--go) 30%,var(--line))}
.app-config :is(.tag.warn,.pillstate.off){color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,var(--line))}
.app-config .tag.real{color:var(--halt);background:var(--halt-dim);border-color:color-mix(in srgb,var(--halt) 35%,var(--line))}
.app-config .note{font-size:11px;max-width:90ch}
.app-config .linkish{font-family:var(--sans);font-size:12px}

@media(max-width:1100px){
  .app-dashboard:not(.chart-active) .sidebar{width:62px;padding:10px 5px}
  .app-dashboard:not(.chart-active) .brand{padding:5px 0 12px;justify-content:center}
  .app-dashboard:not(.chart-active) :is(.brand>b,nav.tabs .lbl,nav.tabs .txt,nav.tabs .cnt,.side-foot .txt){display:none}
  .app-dashboard:not(.chart-active) nav.tabs button{justify-content:center;padding:10px 0}
  .app-dashboard:not(.chart-active) nav.tabs button .lvdot{position:absolute;right:5px;top:5px;width:5px;height:5px}
  .app-dashboard:not(.chart-active) .side-foot{padding:10px 0 0;align-items:center}
  .app-dashboard:not(.chart-active) .side-foot .navlink{padding:8px}
  .settings-layout{grid-template-columns:160px minmax(0,1fr);gap:14px}
}
@media(max-width:640px){
  .app-dashboard:not(.chart-active) .layout{gap:3px;padding:3px}
  .app-dashboard:not(.chart-active) .sidebar{width:46px;padding:8px 3px;top:3px;height:calc(100dvh - 6px)}
  .app-dashboard:not(.chart-active) .brand-mark{width:27px;height:27px;font-size:16px}
  .app-dashboard:not(.chart-active) .main>.wrap{padding:0 10px}
  .app-dashboard:not(.chart-active) .topbar{top:3px}
  .app-dashboard:not(.chart-active) .topbar-in{min-height:44px;height:auto;padding:6px 8px;gap:5px}
  .app-dashboard:not(.chart-active) .topbar .badge{padding:4px 6px;font-size:10px}
  .app-dashboard:not(.chart-active) #reseed{font-size:0;padding:4px;width:28px;height:28px}
  .app-dashboard:not(.chart-active) #reseed::after{content:'↻';font:18px var(--sans)}
  .app-dashboard:not(.chart-active) .head{padding-top:18px}
  .app-dashboard:not(.chart-active) :is(.card,.kpi){padding:12px}
  .app-dashboard:not(.chart-active) :is(.kpi .v,.rk .v){font-size:23px}
  .app-dashboard:not(.chart-active) .hud{padding:6px}
  .app-config>.wrap{padding:20px 9px 40px}
  .app-header{padding:0 10px;gap:16px}
  .settings-layout{display:block;margin-top:18px}
  .settings-nav{position:static;flex-direction:row;overflow:auto;margin-bottom:12px;gap:3px}
  .settings-nav a{white-space:nowrap;padding:8px 10px;flex-shrink:0}
  .app-config .card{padding:16px}
  .app-config button:not(.theme-switch):not(.linkish){max-width:100%}
}
@media(prefers-reduced-motion:reduce){.app-dashboard :is(.dot,.tab-panel){animation:none}}