/* Forja panel — sistema de diseño "tmux retro-moderno".
   Fuente de verdad: design/system.md y design/system.html (captura del dockrs
   Design System que eligió el usuario). Una sola familia mono, paneles de 1px,
   un acento teal, estados con glifo + texto.

   La tipografía es JetBrains Mono auto-hospedada (SIL OFL 1.1,
   crates/forja-web/static/fonts/) para respetar la CSP `default-src 'self'`:
   no hay ninguna petición a CDNs ni fuentes remotas. Si el navegador no puede
   cargar el woff2, cae a la pila mono del sistema.

   Contraste WCAG 2.1 (texto normal exige >= 4.5:1):
     --fg    #cfd9de sobre --bg  #0a0d0e  14.48   sobre --bg2 #0f1417 13.33
     --dim   #7a8b94 sobre --bg  #0a0d0e   5.41   sobre --bg2 #0f1417  4.98
     --acc   #2dd4bf sobre --bg  #0a0d0e   9.95   sobre --bg2 #0f1417  9.16
     --ok    #5fd38d sobre --bg  #0a0d0e  10.70
     --warn  #f5b84b sobre --bg  #0a0d0e  10.47
     --err   #ff5d6c sobre --bg  #0a0d0e   6.29
     --info  #6cb6ff sobre --bg  #0a0d0e   8.55
     --mag   #c792ea sobre --bg  #0a0d0e   8.18
     #04201d sobre --acc        #2dd4bf   9.95   (texto de botón primario)
     --faint #4d5c64 sobre --bg  #0a0d0e   2.87   -> decoración, nunca texto
   Los encabezados de tabla usan --dim (4.98), no --faint, porque son texto. */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/fonts/jetbrains-mono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/static/fonts/jetbrains-mono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/static/fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url(/static/fonts/jetbrains-mono-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url(/static/fonts/jetbrains-mono-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:dark;
  --bg:#0a0d0e;--bg2:#0f1417;--bg3:#161d21;
  --line:#27323a;--line2:#3a4852;
  --fg:#cfd9de;--dim:#7a8b94;--faint:#4d5c64;
  --acc:#2dd4bf;--acc-d:#0f3d38;
  --ok:#5fd38d;--warn:#f5b84b;--err:#ff5d6c;--info:#6cb6ff;--mag:#c792ea;
  --r:2px;
  --f:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --side-w:224px;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--fg);font:13px/1.55 var(--f);overflow-x:hidden}
::selection{background:var(--acc);color:#04201d}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:var(--r)}
a{color:var(--acc);text-decoration:none}
a:hover{color:var(--fg);background:var(--bg3)}
h1{margin:0 0 12px;font-size:22px;font-weight:700;line-height:1.2}
h2{display:flex;align-items:center;gap:12px;margin:18px 0 14px;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--acc)}
h2::after{content:"";flex:1;border-top:1px solid var(--line)}
h3{margin:14px 0 8px;font-size:13px;font-weight:600;color:var(--fg)}
p{margin:0 0 10px}
code{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);padding:1px 5px;border-radius:var(--r)}
.muted{color:var(--dim)}
.ok{color:var(--ok)}
.error{color:var(--err)}
p.error{padding:8px 12px;background:var(--bg2);border-left:3px solid var(--err)}
.crumb{margin:0 0 14px;font-size:12px;color:var(--dim)}
.crumb a{color:var(--acc)}
.right{text-align:right}

/* ---- shell tmux: barra lateral = panel de servicios ---- */
body:has(> aside.side){display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);align-items:start;min-height:100vh}
.side{position:sticky;top:0;align-self:start;height:100vh;display:flex;flex-direction:column;gap:18px;
  padding:14px 12px;background:var(--bg2);border-right:1px solid var(--line);overflow-y:auto}
.side .brand{display:flex;align-items:center;gap:8px;margin:0;padding:0 4px;color:var(--fg);
  font-size:15px;font-weight:700;letter-spacing:.02em;text-decoration:none}
.side .brand::before{content:"F";display:grid;place-items:center;flex:none;width:24px;height:24px;
  background:var(--acc);color:#04201d;border-radius:var(--r);font-size:12px;font-weight:700}
.side .brand:hover{background:none;color:var(--acc)}
.side nav{display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--line);padding-top:10px}
.side nav a{display:flex;align-items:center;gap:8px;padding:5px 10px;color:var(--dim);
  border-left:2px solid transparent;text-decoration:none;transition:background-color .12s,color .12s}
.side nav a:hover{background:var(--bg3);color:var(--fg)}
.side nav a[aria-current="page"]{background:var(--acc-d);color:var(--acc);border-left-color:var(--acc)}
.side nav a[aria-current="page"]::before{content:"▌";flex:none}
.side-foot{margin-top:auto;display:grid;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.side-foot .who{display:block;color:var(--dim);font-size:11px;overflow-wrap:anywhere}
.side-foot form{margin:0}
.side-foot button.link{display:flex;margin:0;padding:4px 10px;width:100%;justify-content:flex-start;
  font:inherit;font-size:12px;text-transform:none;letter-spacing:0;background:var(--bg3);
  border:1px solid var(--line2);border-radius:var(--r);color:var(--fg);text-decoration:none}
.side-foot button.link::before,.side-foot button.link::after{content:none}
.side-foot button.link:hover{background:var(--acc-d);border-color:var(--acc);color:var(--acc)}
main.wide{min-width:0;max-width:1180px;width:100%;margin:0;padding:28px 32px 80px}
body:not(:has(> aside.side)) main.wide{margin:0 auto}
.narrow{max-width:440px;margin:12vh auto 0}
.stack{max-width:420px}

/* ---- superficies: paneles, no tarjetas redondeadas ---- */
.pane{position:relative;padding:18px 14px 14px;margin-top:10px;background:var(--bg2);
  border:1px solid var(--line);border-radius:var(--r);min-width:0}
.pane.on{border-color:var(--acc)}
.pane>.pt,.login-banner{position:absolute;top:-9px;left:12px;padding:0 6px;
  background:var(--bg);color:var(--dim);font-size:11px}
.pane.on>.pt,.login-banner{color:var(--acc)}
.pane.on>.pt::before{content:"● "}
.card,.show,section.card{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);
  padding:14px 16px;margin:0 0 20px;overflow-x:auto}
section.card{margin:0 0 28px}
.card h2:first-child{margin-top:0}
.sech{display:flex;align-items:center;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.sech h2{margin:0;flex:1;min-width:12ch}
.sech .n{font-size:11px;color:var(--dim)}
.sech .bd{margin-left:auto}
.hero{background:var(--bg2);color:var(--fg);margin:-28px -32px 24px;padding:24px 32px;
  border-bottom:1px solid var(--line)}
.hero h1{margin:0 0 4px}
.hero h1 b{color:var(--acc);font-weight:400}
.hero p{font-weight:400;color:var(--dim);max-width:640px;margin:0}
.ph{margin:0 0 20px}
.ph-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.ph-main{min-width:0}
.ph-main h1{margin:0 0 6px}
.ph-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;font-size:11.5px;color:var(--dim)}
.ph-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ph-actions form{margin:0}
.ph-actions .btn,.ph-actions button{margin-top:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin:0 0 20px}
.stats div{border:0;background:var(--bg2);padding:12px 14px}
.stats dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.stats dd{margin:2px 0 0;font-size:24px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums}
.stats dd code{display:block;margin-top:6px;font-size:13px;overflow-wrap:anywhere}
.stats dd .ok,.stats dd .error{font:inherit}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 16px;align-items:end}
.grid button{grid-column:1/-1;justify-self:start}

/* ---- formularios ---- */
form{margin:0 0 6px}
label{display:block;margin-top:14px;font-size:11px;color:var(--dim)}
label::before{content:"--";color:var(--faint)}
label.check{display:flex;align-items:center;gap:8px;margin-top:14px;color:var(--fg);font-size:13px;cursor:pointer}
label.check::before{content:none}
input,select,textarea{display:block;width:100%;margin-top:4px;min-height:34px;padding:5px 10px;
  font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line2);border-radius:var(--r);outline:0}
input:hover,select:hover,textarea:hover{border-color:var(--dim)}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px #2dd4bf22}
input::placeholder,textarea::placeholder{color:var(--dim)}
input[type=hidden]{display:none}
input[type=checkbox],input[type=radio]{display:inline-block;width:auto;min-height:0;margin:0;padding:0;
  accent-color:var(--acc);border:0}
.field{display:flex;flex-direction:column;gap:4px;max-width:320px}
.field label{margin:0}
.field label::before{content:none}
.field input,.field select{margin:0}
.field .h{font-size:11px;color:var(--dim)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 16px;align-items:end}
.fgrid .field{max-width:none}
.fgrid .field.wide{grid-column:1/-1}
.fgrid .check,.fgrid>button,.fgrid .btns{grid-column:1/-1}
.fgrid>button{justify-self:start}
.fgrid .check{margin-top:0}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.btns button{margin-top:0}
form:not(.fgrid):not(.grid) > .field + .field{margin-top:14px}
td form{display:inline;margin:0}

/* ---- botones: corchetes retro + un solo acento ---- */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;
  padding:5px 14px;min-height:32px;font:inherit;font-size:12px;font-weight:600;line-height:1.2;
  color:var(--fg);background:var(--bg3);border:1px solid var(--line2);border-radius:var(--r);
  cursor:pointer;text-decoration:none;transition:background-color .12s,border-color .12s,color .12s}
button::before,.btn::before{content:"[";color:var(--faint)}
button::after,.btn::after{content:"]";color:var(--faint)}
button:hover,.btn:hover{background:var(--bg3);border-color:var(--acc);color:var(--acc)}
button:hover::before,button:hover::after,.btn:hover::before,.btn:hover::after{color:var(--acc)}
button:active,.btn:active{background:var(--acc-d)}
.btn.primary,.btn.p{background:var(--acc);border-color:var(--acc);color:#04201d;font-weight:700}
.btn.primary::before,.btn.primary::after,.btn.p::before,.btn.p::after{color:#04201d99}
.btn.primary:hover,.btn.p:hover{background:var(--acc);color:#04201d;filter:brightness(1.08)}
.btn.ghost,.btn.g{background:transparent;border-style:dashed;color:var(--dim)}
.btn.ghost:hover,.btn.g:hover{color:var(--fg);border-color:var(--acc)}
.btn.danger,.btn.d,button.danger{background:transparent;border-color:var(--err);color:var(--err)}
.btn.danger::before,.btn.danger::after,.btn.d::before,.btn.d::after,button.danger::before,button.danger::after{color:var(--err)}
.btn.danger:hover,.btn.d:hover,button.danger:hover{background:var(--err);border-color:var(--err);color:#1a0507}
.btn.sm,.btn.s{min-height:26px;padding:2px 9px;font-size:11px}
button[disabled],.btn[disabled]{background:var(--bg3);border-color:var(--line);color:var(--faint);opacity:.5;cursor:not-allowed}
button.link{display:inline;margin:0;padding:0;min-height:0;background:none;border:0;border-radius:0;
  font:inherit;font-size:12px;font-weight:400;color:var(--acc);text-decoration:underline;text-underline-offset:3px}
button.link::before,button.link::after{content:none}
button.link:hover{background:none;color:var(--fg)}
.actions{white-space:nowrap}
.actions button.link{margin:0 8px 0 0}
td .btn,td button{margin-top:0}
td.actions form,td.actions .btn{vertical-align:middle;margin-left:8px}

/* ---- tablas ---- */
table,table.dt{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:12.5px}
th{text-align:left;padding:6px 12px;font-size:10.5px;font-weight:500;text-transform:uppercase;
  letter-spacing:.08em;color:var(--dim);border-bottom:1px solid var(--line2)}
td{padding:7px 12px;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
tbody tr:hover td{background:var(--bg3)}
tbody tr:hover td:first-child{box-shadow:inset 2px 0 var(--acc)}
td.right,th.right,.num{text-align:right;font-variant-numeric:tabular-nums}
td.value{white-space:normal;overflow-wrap:anywhere}

/* ---- estados: glifo + texto, nunca sólo color ---- */
.pill,.bd{display:inline-flex;align-items:center;gap:6px;padding:0 7px;font-size:11px;line-height:1.6;
  color:var(--dim);border:1px solid var(--line);border-radius:var(--r);vertical-align:middle}
.bd i{flex:none;width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.bd.acc{color:var(--acc);background:var(--acc-d);border-color:#2dd4bf73}
.bd.neu{color:var(--dim);border-color:var(--line)}
.bd.ok,.pill.st-live{color:var(--ok);background:#5fd38d1f;border-color:#5fd38d73}
.bd.warn,.pill.st-building,.pill.st-deploying{color:var(--warn);background:#f5b84b1f;border-color:#f5b84b73}
.bd.err,.pill.st-failed{color:var(--err);background:#ff5d6c1f;border-color:#ff5d6c73}
.pill.st-queued{color:var(--info);border-color:#6cb6ff73}
.pill.st-superseded{color:var(--mag);border-color:#c792ea73}
.pill.st-cancelled{color:var(--dim);border-style:dashed;text-decoration:line-through}
.pill.st-live::before{content:"● "}
.pill.st-building::before,.pill.st-deploying::before{content:"◐ "}
.pill.st-queued::before{content:"↻ "}
.pill.st-failed::before{content:"✕ "}
.pill.st-superseded::before{content:"⎇ "}
.pill.st-cancelled::before{content:"⊘ "}
.pill.st-building::before,.pill.st-deploying::before{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}

/* ---- logs SSE (pre#logs, span.error, span[data-seq]) ---- */
.logs{display:block;margin:0 0 20px;padding:8px 10px;background:var(--bg);color:var(--fg);
  border:1px solid var(--line);border-radius:var(--r);font:12px/1.6 var(--f);
  max-height:28rem;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.logs span{background:none}
.logs .error{color:var(--err);font-weight:400}
.logs-bar{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12px}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:6px}

/* ---- tabs y anclas ---- */
.tabs{display:flex;gap:2px;margin-bottom:12px;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.tab{display:inline-block;padding:4px 12px;color:var(--dim);border:1px solid transparent;border-bottom:0;
  cursor:pointer;text-decoration:none}
.tab:hover{background:var(--bg3);color:var(--fg)}
.tab.on{background:var(--bg2);color:var(--acc);border-color:var(--line2);margin-bottom:-1px}
.anchors{position:sticky;top:0;z-index:5;display:flex;gap:2px;overflow-x:auto;flex-wrap:nowrap;
  margin:0 0 22px;padding:6px 0;background:#0a0d0eeb;border-bottom:1px solid var(--line2)}
.anchors .tab{flex:none;border:1px solid transparent;border-bottom:0}
.anchors .tab:hover{background:var(--bg3)}
.anchors .tab.on{background:var(--bg2);color:var(--acc);border-color:var(--line2)}

/* ---- alertas, vacíos, menú ---- */
.alert{display:flex;gap:10px;padding:8px 12px;margin-bottom:8px;background:var(--bg2);
  border-left:3px solid var(--line2)}
.alert b{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.alert p{margin:0;font-size:12px;color:var(--dim)}
.alert.info{border-color:var(--info)}
.alert.info b{color:var(--info)}
.alert.warn{border-color:var(--warn)}
.alert.warn b{color:var(--warn)}
.alert.ok{border-color:var(--ok)}
.alert.ok b{color:var(--ok)}
.alert.err{border-color:var(--err)}
.alert.err b{color:var(--err)}
.empty{padding:26px 14px;text-align:center;border:1px dashed var(--line2)}
.empty .ic{font-size:32px;color:var(--acc)}
.empty .t{font-size:16px;font-weight:600}
.empty .d{margin:4px 0 14px;color:var(--dim)}
.empty .btn{margin-top:0}
.menu{list-style:none;margin:0;padding:8px;width:100%;max-width:240px;background:var(--bg);
  border:1px solid var(--line2);border-radius:var(--r)}
.menu li{display:flex;justify-content:space-between;padding:5px 10px;margin:2px 0;cursor:pointer}
.menu li:hover,.menu li.on{background:var(--acc-d);color:var(--acc)}
.menu li.on::before{content:"▌"}
.menu hr{margin:8px 0;border:0;border-top:1px dashed var(--line)}

#resumen{margin:0 0 28px}
#ajustes>.card h3:first-child{margin-top:0}

/* ---- login: entrada de terminal ---- */
main.card.narrow.login-console{position:relative;overflow:visible;max-width:440px;
  margin:12vh auto 0;padding:22px 18px 18px;border-color:var(--acc)}
.login-banner{text-transform:uppercase;letter-spacing:.08em}
.login-kicker{margin:0 0 4px;font-size:11px;color:var(--dim)}
.login-kicker::first-letter{color:var(--acc)}
.login-console h1{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:22px;font-weight:700}
.login-cursor{display:inline-block;width:.6em;height:1.1em;background:var(--acc);vertical-align:text-bottom}
.login-console form{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.login-console .field{max-width:none}
.login-console .field label{color:var(--dim)}
.login-console .field label::before{content:"> ";color:var(--acc)}
.login-console .btn{margin-top:16px}
@media(prefers-reduced-motion:no-preference){.login-cursor{animation:blink 1s steps(2) infinite}}

/* ---- responsive ---- */
@media(max-width:760px){
  body:has(> aside.side){display:block}
  .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:12px 16px}
  .side nav{flex-direction:row;flex-wrap:wrap;border-top:0;padding-top:0}
  .side nav a{margin:0}
  .side-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:10px}
  .side-foot button.link{width:auto}
  main.wide{padding:20px 16px 60px}
  .hero{margin:-20px -16px 20px;padding:20px 16px}
  .anchors{position:static}
  .fgrid{grid-template-columns:1fr}
  .fgrid .field.wide,.fgrid .check,.fgrid>button,.fgrid .btns{grid-column:auto}
  table,table.dt{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table th,table td{white-space:nowrap}
  td.value{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}