/* Tema AGM Lab (copiado de agm-lab.cl, 2026-11-07): fondo grafito, acento azul acero, Space Grotesk + Inter + JetBrains Mono + Instrument Serif. */
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/static/fonts/InstrumentSerif-52a6c2.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(/static/fonts/Inter-0082f4.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(/static/fonts/JetBrainsMono-78a7a0.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500 600;font-display:swap;src:url(/static/fonts/SpaceGrotesk-d27e6c.woff2) format("woff2")}
:root{
  --bg:#121316;--bg-elev:#17181c;--line:#26282e;--text:#fff;--muted:#9ca3af;--faint:#6b7280;--accent:#7ba7c9;--accent-soft:rgba(123,167,201,.14);
  --f-body:Inter,"Segoe UI",Roboto,system-ui,sans-serif;--f-head:"Space Grotesk",Inter,system-ui,sans-serif;--f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;--f-serif:"Instrument Serif",Georgia,serif;
  /* semánticos (verde/rojo/ámbar atenuados para convivir con el azul acero) */
  --ok:#6fcf97;--bad:#e5737f;--warn:#e0b85c;--cold:#7ba7c9;--hot:#e08a5c;
  /* alias que usa el JS */
  --txt:var(--text);--mut:var(--muted);--panel:var(--bg-elev);--neon:var(--accent)
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:400 14px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
::selection{background:var(--accent-soft);color:var(--text)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 50% 45%,transparent 38%,rgba(8,9,11,.62) 100%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 30% 30%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at 30% 30%,#000 0%,transparent 70%)}
header,main,aside{position:relative;z-index:1}
header{display:flex;align-items:center;gap:16px;height:64px;padding:0 clamp(20px,5vw,48px);border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(18,19,22,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:10;flex-wrap:nowrap}
header h1{margin:0;font:500 .82rem/1 var(--f-mono);letter-spacing:.16em;color:var(--text);display:flex;align-items:center;gap:10px;white-space:nowrap}
header h1::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
header small{color:var(--faint);font:400 .7rem var(--f-mono);letter-spacing:.06em}
.pill{padding:2px 10px;border:1px solid var(--line);border-radius:99px;font:400 .7rem var(--f-mono);letter-spacing:.06em}
.pill.ok{color:var(--ok);border-color:rgba(111,207,151,.35)}.pill.bad{color:var(--bad);border-color:rgba(229,115,127,.4)}
.building{display:grid;gap:20px;padding:40px clamp(20px,5vw,48px) 64px;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1120px;margin:0 auto}
.room{background:rgba(23,24,28,.95);border:1px solid var(--line);border-radius:8px;padding:0 0 14px;cursor:pointer;position:relative;overflow:hidden;transition:border-color .25s,transform .25s}
.room:hover{border-color:rgba(123,167,201,.45);transform:translateY(-2px)}
.room .sign{margin:0;padding:12px 18px;background:transparent;color:var(--faint);font:400 .74rem var(--f-mono);letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:8px}
.room .sign::first-letter{color:var(--accent)}
.room .sign i{font-style:normal;color:var(--accent);letter-spacing:.06em}
.room .body{padding:14px 18px;color:var(--muted)}
.big{font:500 1.5rem/1.2 var(--f-head);letter-spacing:-.02em;color:var(--text)}.mut{color:var(--muted)}.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}
.desks{display:flex;flex-wrap:wrap;gap:8px;padding:8px 18px 0}.desk{width:22px;height:16px;border-radius:3px;background:var(--line);position:relative;border:1px solid #33363e}
.desk:after{content:"";position:absolute;left:7px;top:-6px;width:8px;height:8px;border-radius:50% 50% 2px 2px;background:var(--c,#6b7280)}
.desk.on{animation:bob 2.4s ease-in-out infinite}.desk.ok:after{--c:var(--ok)}.desk.bad:after{--c:var(--bad)}.desk.warn:after{--c:var(--warn)}.desk.off:after{--c:#4b5160}
@keyframes bob{50%{transform:translateY(-1.5px)}}
.span2{grid-column:span 2}.span3{grid-column:1/-1}.ceo{grid-column:2;grid-row:1}
.accounts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px 18px}
.acard{border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--bg);cursor:pointer;transition:border-color .25s}.acard:hover{border-color:rgba(123,167,201,.45)}
.row{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px dashed var(--line);font-size:13px}.row:last-child{border:0}
.drawer{position:fixed;inset:0 0 0 auto;width:min(620px,100%);background:var(--bg-elev);border-left:1px solid var(--line);padding:28px 24px;overflow:auto;transform:translateX(102%);transition:transform .25s;z-index:20;box-shadow:-24px 0 48px rgba(0,0,0,.4)}
.drawer.open{transform:none}
.drawer h2{margin:0 0 6px;font:500 1.4rem/1.15 var(--f-head);letter-spacing:-.02em;color:var(--text);text-transform:none}
.drawer h3{font:400 .74rem var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin:22px 0 8px}
.drawer em{font-family:var(--f-serif);font-style:italic;color:var(--accent);font-size:1.1em}
.close{position:absolute;right:18px;top:14px;cursor:pointer;color:var(--faint);font-size:20px;transition:color .2s}.close:hover{color:var(--accent)}
.op{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:12px 0;background:var(--bg)}.op .top{display:flex;justify-content:space-between;gap:8px;font:500 .95rem var(--f-head)}
.thermo{position:relative;height:10px;border-radius:99px;margin:30px 0 26px;background:linear-gradient(90deg,var(--cold),#c9ced6 50%,var(--hot));opacity:.9}
.thermo .tick{position:absolute;top:-6px;width:2px;height:22px;background:#fff}.thermo .tick span{position:absolute;top:-16px;left:-24px;width:50px;text-align:center;font:400 .62rem var(--f-mono);letter-spacing:.08em;color:var(--faint)}
.thermo .now{position:absolute;top:-9px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:11px solid #fff;transform:translateX(-7px)}
.thermo .nowl{position:absolute;top:18px;font:500 .72rem var(--f-mono);transform:translateX(-50%);white-space:nowrap}
.scale{display:flex;justify-content:space-between;font:400 .68rem var(--f-mono);letter-spacing:.04em;color:var(--faint);margin-top:-18px}
.bar{height:8px;background:var(--line);border-radius:99px;position:relative}.bar b{position:absolute;top:-1px;height:10px;width:3px;background:#fff;border-radius:2px}
.bar.n{background:linear-gradient(90deg,var(--bad),#3a3d45 50%,var(--ok))}
table{width:100%;border-collapse:collapse;font-size:12px}td,th{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--faint);font:400 .68rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.v-no{color:var(--bad)}.v-ok{color:var(--ok)}.v-run{color:var(--warn)}
a{color:var(--accent)}a:focus-visible,.room:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
@media(max-width:900px){.building{grid-template-columns:1fr}.span2,.span3,.ceo{grid-column:auto;grid-row:auto}.accounts{grid-template-columns:1fr}header small:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.desk.on{animation:none}.room,.drawer{transition:none}}

.logout{margin:0}.logout button{background:none;border:1px solid var(--line);color:var(--muted);font:400 .7rem var(--f-mono);letter-spacing:.06em;padding:4px 12px;border-radius:99px;cursor:pointer;transition:color .2s,border-color .2s}.logout button:hover{color:var(--accent);border-color:rgba(123,167,201,.45)}
body.login{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:24px}
.loginbox{position:relative;z-index:1;width:min(400px,100%);background:rgba(23,24,28,.95);border:1px solid var(--line);border-radius:8px;padding:36px 32px 28px}
.loginbox .eyebrow{font:400 .74rem var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:14px;margin-bottom:20px}
.loginbox .eyebrow::before{content:"";width:36px;height:1px;background:var(--accent)}
.loginbox h1{font:500 2rem/1.1 var(--f-head);letter-spacing:-.03em;margin:0 0 26px;display:block;color:var(--text)}.loginbox h1::before{display:none}
.loginbox h1 em{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:1.1em;color:var(--accent)}
.loginbox label{display:block;font:400 .68rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.loginbox input{display:block;width:100%;margin-top:6px;padding:11px 12px;background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--text);font:400 .95rem var(--f-body);letter-spacing:0;text-transform:none}
.loginbox input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.loginbox button{width:100%;padding:12px;margin-top:6px;background:var(--accent);border:0;border-radius:6px;color:#0d1117;font:500 .9rem var(--f-head);cursor:pointer;transition:filter .2s}.loginbox button:hover{filter:brightness(1.1)}
.loginbox .err{color:var(--bad);font-size:13px;margin:0 0 14px}.loginbox small{display:block;margin-top:20px;color:var(--faint);font:400 .7rem var(--f-mono);letter-spacing:.06em}

.tixform{margin:18px 0 8px;display:grid;gap:8px}
.tixform input,.tixform textarea,.tixform select{background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--text);font:400 .9rem var(--f-body);padding:9px 10px;width:100%}
.tixform input:focus,.tixform textarea:focus,.tixform select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tixrow{display:grid;grid-template-columns:1fr 1.3fr 1.2fr auto;gap:8px}
.tixform button,.tixbtn button,.tixtabs button{background:none;border:1px solid var(--line);color:var(--muted);font:400 .74rem var(--f-mono);letter-spacing:.06em;padding:7px 12px;border-radius:99px;cursor:pointer;transition:color .2s,border-color .2s}
.tixform button{background:var(--accent);color:#0d1117;border:0;font-weight:500;border-radius:6px}
.tixbtn button:hover,.tixtabs button:hover,.tixtabs button.on{color:var(--accent);border-color:rgba(123,167,201,.45)}
.tixtabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 4px}
.tix{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:10px 0;background:var(--bg)}.tix.hecha,.tix.descartada{opacity:.75}
.tix .top{display:flex;justify-content:space-between;gap:10px;font:500 .95rem var(--f-head)}
.tix .tag{display:inline-block;margin-left:6px;padding:1px 8px;border:1px solid var(--line);border-radius:99px;font:400 .62rem var(--f-mono);letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.tix .tag.bad{color:var(--bad);border-color:rgba(229,115,127,.4)}.tix .tag.warn{color:var(--warn);border-color:rgba(224,184,92,.4)}
.tixbody{margin:6px 0 0;font-size:13px;white-space:pre-wrap}.tixres{margin-top:6px;font-size:13px}.tixbtn{margin-top:10px;display:flex;gap:8px}
@media(max-width:560px){.tixrow{grid-template-columns:1fr 1fr}}