/* Página pública de estado (/status). Deliberadamente autónoma: sólo depende
   de tokens.css. Una página de estado que se cae junto con el resto del CSS de
   la app no sirve para nada. */

.st-body{
  margin:0; min-height:100vh;
  font-family:var(--font-ui);
  background:var(--bg); color:var(--text-main);
  display:flex; align-items:center; justify-content:center; padding:32px 20px;
}
.st-wrap{ width:100%; max-width:760px; }

.st-brand{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  color:var(--primary); text-decoration:none; margin-bottom:24px;
}
.st-logo{ display:grid; grid-template-columns:repeat(2,7px); gap:3px; }
.st-logo span{ width:7px; height:7px; border-radius:2px; background:var(--accent); }
.st-logo span:first-child{ background:var(--primary); }
.st-logo span:last-child{ background:var(--blue); }

/* El color del estado sale de una sola variable que se redefine por nivel:
   agregar un nivel nuevo es una línea, no tocar cada regla. */
.st-hero{
  --st-color:var(--text-muted);
  display:flex; align-items:center; gap:14px;
  background:var(--surface); border:1px solid var(--border);
  border-left:5px solid var(--st-color);
  border-radius:var(--r-lg); box-shadow:var(--sh);
  padding:26px 28px; margin-bottom:var(--gap);
}
.st-hero[data-nivel="operativo"]{ --st-color:var(--success); }
.st-hero[data-nivel="degradado"]{ --st-color:var(--warning); }
.st-hero[data-nivel="caido"]{ --st-color:var(--danger); }

.st-dot{
  width:14px; height:14px; border-radius:50%; flex:none;
  background:var(--st-color); box-shadow:0 0 0 5px color-mix(in srgb, var(--st-color) 18%, transparent);
}
.st-hero[data-nivel="operativo"] .st-dot{ animation:st-latido 2.4s ease-in-out infinite; }
@keyframes st-latido{ 50%{ box-shadow:0 0 0 11px color-mix(in srgb, var(--success) 6%, transparent); } }

.st-titulo{
  margin:0; font-family:var(--font-display);
  font-size:1.5rem; font-weight:700; color:var(--st-color); letter-spacing:-.01em;
}

.st-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; }
.st-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:18px 20px;
}
.st-card h2{
  margin:0 0 10px; font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted);
}
.st-dato{ margin:0; font-size:1.22rem; font-weight:600; }
.mono{ font-family:ui-monospace,'JetBrains Mono',Menlo,Consolas,monospace; font-size:1.05rem; }

.st-pill{
  margin:0; display:inline-block; padding:5px 13px; border-radius:999px;
  font-size:.85rem; font-weight:600;
  background:color-mix(in srgb, var(--danger) 12%, transparent); color:var(--danger);
}
.st-pill[data-ok="true"]{
  background:color-mix(in srgb, var(--success) 13%, transparent); color:var(--success);
}

.st-foot{ margin:22px 0 0; font-size:.82rem; color:var(--text-muted); text-align:center; }

/* El navegador marca la página como desconectada si el poll no vuelve. */
.st-body[data-vivo="no"] .st-hero{ opacity:.55; }

@media (prefers-reduced-motion:reduce){ .st-dot{ animation:none !important; } }