/* Tokens de diseño (docs/diseno/ux-pantallas.md §2). Oscuro por defecto; claro con data-theme="light". */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --bg-0:#0A0E14;--bg-1:#10161F;--bg-2:#161E2A;--bg-3:#1D2735;
  --border:#1F2A38;--border-strong:#2C3A4D;
  --text-1:#E6EAF0;--text-2:#9AA4B2;--text-3:#667085;
  --accent:#5B8DEF;--accent-hover:#79A2F4;--accent-fg:#06101F;
  --alcista:#26A69A;--bajista:#EF5350;
  --provisional:#F59E0B;--confirmada:#22C55E;--descartada:#6B7280;
  --soporte:#3B82F6;--resistencia:#F97316;--entre-medias:#A78BFA;
  --ok:#22C55E;--warn:#F59E0B;--error:#EF4444;--info:#5B8DEF;
  --ring:0 0 0 2px var(--bg-0),0 0 0 4px var(--accent);
  --radius-sm:4px;--radius:8px;--radius-lg:12px;--radius-full:999px;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);--shadow-2:0 8px 24px rgba(0,0,0,.45);
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;
  --font-sans:"IBM Plex Sans",system-ui,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --fs-xs:12px;--fs-sm:13px;--fs-base:14px;--fs-md:16px;--fs-lg:20px;--fs-xl:28px;
  --row-h:36px;--dur:150ms;--ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg-0:#F4F6F9;--bg-1:#FFFFFF;--bg-2:#FFFFFF;--bg-3:#EEF1F5;
  --border:#E3E7ED;--border-strong:#CBD2DC;
  --text-1:#111827;--text-2:#4B5563;--text-3:#6B7280;
  --accent:#2F6FE4;--accent-hover:#1F5AC4;--accent-fg:#FFFFFF;
  --alcista:#1E9E8E;--bajista:#D9403B;--confirmada:#15803D;--provisional:#B45309;
  --shadow-1:0 1px 2px rgba(16,24,40,.08);--shadow-2:0 8px 24px rgba(16,24,40,.12);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg-0);color:var(--text-1);font:var(--fs-base)/1.45 var(--font-sans)}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover);text-decoration:underline}
h1{font-size:var(--fs-lg);font-weight:600;margin:0 0 var(--sp-4)}
h2{font-size:var(--fs-md);font-weight:600;margin:0 0 var(--sp-3)}
.num,time,code,.tbl td.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:0;background:var(--bg-2);padding:var(--sp-2) var(--sp-3);z-index:100}
.skip:focus{left:var(--sp-2);top:var(--sp-2)}
.muted{color:var(--text-2)}.xs{font-size:var(--fs-xs)}.right{text-align:right}

/* Shell */
.shell{display:grid;grid-template-columns:56px 1fr;min-height:100vh}
.shell.expandida{grid-template-columns:220px 1fr}
.side{background:var(--bg-1);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:var(--sp-3) 0;position:sticky;top:0;height:100vh}
.side a,.side button.nav{display:flex;align-items:center;gap:var(--sp-3);height:40px;padding:0 18px;color:var(--text-2);background:none;border:0;font:inherit;cursor:pointer;width:100%;text-align:left}
.side a:hover,.side button.nav:hover{background:var(--bg-2);color:var(--text-1);text-decoration:none}
.side a[aria-current="page"]{color:var(--text-1);box-shadow:inset 2px 0 var(--accent);background:var(--bg-2)}
.side .etiqueta{display:none;white-space:nowrap}.shell.expandida .side .etiqueta{display:inline}
.side .fin{margin-top:auto}
.side svg,.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.marca{font-weight:600;color:var(--text-1);padding:0 18px var(--sp-3);display:flex;gap:var(--sp-3);align-items:center}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:48px;display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-5);border-bottom:1px solid var(--border);background:var(--bg-1)}
.topbar .grow{flex:1}
.estado-sesion{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--text-2)}
.punto{width:8px;height:8px;border-radius:50%;background:var(--text-3);display:inline-block}
.punto.abierta{background:var(--ok)}.punto.error{background:var(--error)}
.contenido{padding:var(--sp-5);max-width:1440px;width:100%}
.bottombar{display:none}
@media (max-width:1023px){.shell.expandida{grid-template-columns:56px 1fr}.shell.expandida .side .etiqueta{display:none}}
@media (max-width:639px){
  .shell,.shell.expandida{grid-template-columns:1fr}
  .side{display:none}
  .contenido{padding:var(--sp-4) var(--sp-4) 72px}
  .topbar{padding:0 var(--sp-4)}
  .bottombar{display:flex;position:fixed;left:0;right:0;bottom:0;height:56px;background:var(--bg-1);border-top:1px solid var(--border);z-index:20}
  .bottombar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--fs-xs);color:var(--text-2)}
  .bottombar a[aria-current="page"]{color:var(--accent)}
}

/* Componentes */
.card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-4)}
.card h2{margin-bottom:var(--sp-3)}
.grid{display:grid;gap:var(--sp-4)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fila{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:36px;padding:0 var(--sp-4);border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--text-1);font:inherit;cursor:pointer;min-width:44px}
.btn:hover{background:var(--bg-3);text-decoration:none;color:var(--text-1)}
.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:500}
.btn--primary:hover{background:var(--accent-hover);color:var(--accent-fg)}
.btn--danger{background:var(--error);border-color:var(--error);color:#fff}
.btn--ghost{background:none;border-color:transparent}
.btn[disabled],.btn[aria-busy="true"]{opacity:.55;cursor:not-allowed}
.btn--block{width:100%}
.campo{display:flex;flex-direction:column;gap:var(--sp-1);margin-bottom:var(--sp-4)}
.campo label{font-size:var(--fs-sm);color:var(--text-2)}
input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],select,textarea{height:36px;background:var(--bg-0);color:var(--text-1);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:0 var(--sp-3);font:inherit;width:100%}
textarea{height:auto;padding:var(--sp-3);font-family:var(--font-mono);font-size:var(--fs-sm)}
input[aria-invalid=true]{border-color:var(--error)}
.hint{margin:0;font-size:var(--fs-xs);color:var(--text-2)}
.error{margin:0;font-size:var(--fs-xs);color:var(--error)}
.banner{display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-3) var(--sp-4);border-radius:var(--radius);border:1px solid var(--border-strong);margin-bottom:var(--sp-4);background:var(--bg-1)}
.banner--warn{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.banner--error{border-color:var(--error);background:color-mix(in srgb,var(--error) 10%,transparent)}
.banner--info{border-color:var(--info);background:color-mix(in srgb,var(--info) 10%,transparent)}
.banner--ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:1px 8px;border-radius:var(--radius-full);font-size:var(--fs-xs);border:1px solid color-mix(in srgb,var(--c,var(--text-2)) 40%,transparent);background:color-mix(in srgb,var(--c,var(--text-2)) 15%,transparent);color:var(--c,var(--text-2));white-space:nowrap}
.badge--provisional{--c:var(--provisional)}.badge--confirmada{--c:var(--confirmada)}.badge--descartada{--c:var(--descartada)}
.badge--soporte{--c:var(--soporte)}.badge--resistencia{--c:var(--resistencia)}.badge--entre_medias{--c:var(--entre-medias)}
.badge--ok{--c:var(--ok)}.badge--error{--c:var(--error)}.badge--warn{--c:var(--warn)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)}
.kpi{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4)}
.kpi .et{font-size:var(--fs-xs);color:var(--text-2)}.kpi .val{font-family:var(--font-mono);font-size:var(--fs-xl);font-weight:600}
.kpi .pie{font-size:var(--fs-xs);color:var(--text-2)}

/* Tabla responsive */
.tbl{width:100%;border-collapse:collapse}
.tbl th{position:sticky;top:0;background:var(--bg-1);text-align:left;font-size:var(--fs-xs);font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2);padding:0 var(--sp-3);height:var(--row-h);border-bottom:1px solid var(--border)}
.tbl td{padding:0 var(--sp-3);height:var(--row-h);border-bottom:1px solid var(--border)}
.tbl tr[data-href]{cursor:pointer}.tbl tr[data-href]:hover{background:var(--bg-2)}
.tbl tr.nueva{animation:nueva 1.2s ease-out}
@keyframes nueva{from{background:color-mix(in srgb,var(--accent) 10%,transparent)}to{background:transparent}}
@media (max-width:639px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block}.tbl thead{display:none}
  .tbl tr{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-3);margin-bottom:var(--sp-3)}
  .tbl td{height:auto;border:0;padding:2px 0}
  .tbl td::before{content:attr(data-label) ": ";color:var(--text-2);font-size:var(--fs-xs)}
  .tbl td[data-primary]::before{content:""}.tbl td[data-primary]{font-weight:600}
  .oculta-movil{display:none!important}
}
@media (max-width:1023px){.oculta-tablet{display:none!important}}

/* Toggle */
.tgl{position:relative;width:40px;height:22px;border-radius:var(--radius-full);border:0;background:var(--border-strong);cursor:pointer;padding:0;transition:background var(--dur) var(--ease);flex:none}
.tgl::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform var(--dur) var(--ease)}
.tgl[aria-checked="true"]{background:var(--accent)}.tgl[aria-checked="true"]::after{transform:translateX(18px)}
.tgl--l{width:52px;height:28px}.tgl--l::after{width:24px;height:24px}.tgl--l[aria-checked="true"]::after{transform:translateX(24px)}
.tgl[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.tgl.parpadeo{animation:parpadeo .4s}
@keyframes parpadeo{50%{box-shadow:0 0 0 3px var(--error)}}

/* Pestañas */
.tabs{display:flex;gap:var(--sp-4);border-bottom:1px solid var(--border);overflow-x:auto;margin-bottom:var(--sp-4)}
.tabs [role=tab]{background:none;border:0;border-bottom:2px solid transparent;color:var(--text-2);font:inherit;padding:var(--sp-3) 0;cursor:pointer;white-space:nowrap}
.tabs [role=tab][aria-selected=true]{color:var(--text-1);border-bottom-color:var(--accent)}

/* Modal y toasts */
dialog{background:var(--bg-2);color:var(--text-1);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);padding:var(--sp-5);max-width:640px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog.ancho{max-width:90vw}
dialog img{max-width:100%;height:auto;border-radius:var(--radius-sm)}
#toasts{position:fixed;right:var(--sp-4);bottom:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);z-index:50}
.toast{background:var(--bg-2);border:1px solid var(--border-strong);border-left:3px solid var(--info);border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);box-shadow:var(--shadow-2);animation:entra var(--dur) var(--ease)}
.toast.ok{border-left-color:var(--ok)}.toast.warn{border-left-color:var(--warn)}.toast.error{border-left-color:var(--error)}
@keyframes entra{from{transform:translateY(8px);opacity:0}}
@media (max-width:639px){#toasts{top:var(--sp-3);bottom:auto;left:var(--sp-3);right:var(--sp-3)}}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;padding:var(--sp-4)}
.login .card{width:380px;max-width:100%;padding:var(--sp-6);border-radius:var(--radius-lg)}

/* Detalle de acción */
.detalle{display:grid;grid-template-columns:3fr 2fr;gap:var(--sp-4);align-items:start}
.grafico{height:520px;min-height:280px;background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius);position:relative}
.grafico .vacio{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-2)}
.grafico-tooltip{position:absolute;top:8px;left:8px;background:var(--bg-2);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:6px 10px;font-size:var(--fs-xs);pointer-events:none;z-index:5;display:none}
.rangos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:var(--sp-2) 0}
.rangos-sep{width:1px;height:16px;background:var(--border)}
.rangos button{background:var(--bg-2);border:1px solid var(--border);color:var(--text-2);border-radius:var(--radius-sm);padding:2px 10px;cursor:pointer;font:inherit;font-size:var(--fs-xs)}
.rangos button[aria-pressed=true]{border-color:var(--accent);color:var(--text-1)}
@media (max-width:1023px){.detalle{grid-template-columns:1fr}.grafico{height:420px}}
@media (max-width:639px){.grafico{height:320px}}
.atribucion{font-size:var(--fs-xs);color:var(--text-3);margin-top:var(--sp-1)}
.CodeMirror{height:380px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-0);color:var(--text-1);font-family:var(--font-mono);font-size:var(--fs-sm)}
.CodeMirror-gutters{background:var(--bg-1);border-right:1px solid var(--border)}
.CodeMirror-cursor{border-left-color:var(--text-1)}
.cm-keyword{color:var(--accent)}.cm-string{color:var(--alcista)}.cm-comment{color:var(--text-3)}.cm-number{color:var(--resistencia)}.cm-builtin,.cm-def{color:var(--entre-medias)}
pre.codigo{background:var(--bg-0);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--sp-3);overflow:auto;font-family:var(--font-mono);font-size:var(--fs-sm);margin:0}
.skel{background:var(--bg-3);border-radius:var(--radius-sm);height:14px;animation:brillo 1.2s infinite alternate}
@keyframes brillo{to{opacity:.5}}
.htmx-indicator{opacity:0;transition:opacity var(--dur)}.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}
.pass-medidor{height:4px;background:var(--bg-3);border-radius:2px;overflow:hidden;margin-top:4px}
.pass-medidor span{display:block;height:100%;width:0;background:var(--error);transition:width var(--dur)}
.error-pagina{text-align:center;padding:var(--sp-7) var(--sp-4)}
#panel[data-alerta-off] #toggles-patrones{opacity:.55}
.vacio[hidden]{display:none}
.detalle>*,.grid>*,.contenido{min-width:0}
.CodeMirror{max-width:100%}
.card,pre.codigo{max-width:100%}