/* status.saelyx.ai · misma marca que saelyx.ai (sx.css): negro, Inter, acento #6E8BFF */
:root {
  --bg: #000000; --elev-1: #0B0E10; --elev-2: #13171A; --elev-3: #1B2125; --linea: rgba(255,255,255,0.08);
  --texto: rgba(255,255,255,0.90); --texto-2: rgba(255,255,255,0.62); --texto-3: rgba(255,255,255,0.45);
  --accent: #6E8BFF; --ok: #3DD68C; --warn: #F2B179; --bad: #FF6B6B; --none: #2A3238;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--texto); font: 400 16px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
.pagina { max-width: 1040px; margin: 0 auto; padding: 40px 24px 72px; }

.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 36px; }
.marca { display: inline-flex; align-items: center; gap: 12px; color: var(--texto); font-size: 1.5rem; letter-spacing: -0.01em; }
.marca b { font-weight: 700; } .marca-texto { font-weight: 400; }
.orbe { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #EAF0FF 0, #5CDBFC 35%, #8275F7 65%, #F76EC9 100%); box-shadow: 0 0 22px rgba(130,117,247,0.55); }
.cabecera-der { display: flex; align-items: center; gap: 14px; }
.ultima { color: var(--texto-3); font-size: .88rem; font-variant-numeric: tabular-nums; }
.idioma { background: var(--elev-2); color: var(--texto-2); border: 1px solid var(--linea); border-radius: 8px; padding: 6px 10px; font: 600 .78rem/1 var(--font-sans); letter-spacing: .08em; cursor: pointer; }
.idioma:hover, .idioma:focus-visible { color: var(--texto); border-color: var(--accent); outline: none; }

.banner { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-radius: 14px; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; border: 1px solid var(--linea); background: var(--elev-1); }
.banner-punto { width: 14px; height: 14px; border-radius: 50%; background: var(--none); flex: none; }
.banner[data-estado="operational"] { background: rgba(61,214,140,0.10); border-color: rgba(61,214,140,0.35); } .banner[data-estado="operational"] .banner-punto { background: var(--ok); box-shadow: 0 0 16px rgba(61,214,140,0.7); }
.banner[data-estado="degraded"] { background: rgba(242,177,121,0.10); border-color: rgba(242,177,121,0.40); } .banner[data-estado="degraded"] .banner-punto { background: var(--warn); }
.banner[data-estado="outage"] { background: rgba(255,107,107,0.10); border-color: rgba(255,107,107,0.45); } .banner[data-estado="outage"] .banner-punto { background: var(--bad); }
.banner[data-estado="stale"] { background: var(--elev-2); }

.componentes { margin-top: 44px; }
.componentes-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
h2 { font-size: 1.05rem; font-weight: 600; margin: 0; color: var(--texto-2); letter-spacing: .01em; }
.leyenda { color: var(--texto-3); font-size: .88rem; }
.lista { border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; background: var(--elev-1); }
.comp { padding: 18px 22px; border-top: 1px solid var(--linea); }
.comp:first-child { border-top: 0; }
.comp-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.comp-nombre { font-weight: 600; font-size: 1.02rem; }
.comp-nombre small { color: var(--texto-3); font-weight: 400; margin-left: 8px; font-size: .8rem; }
.comp-estado { font-size: .92rem; font-weight: 600; }
.comp-estado[data-estado="operational"] { color: var(--ok); } .comp-estado[data-estado="degraded"] { color: var(--warn); }
.comp-estado[data-estado="outage"] { color: var(--bad); } .comp-estado[data-estado="unknown"] { color: var(--texto-3); }
.barras { display: grid; grid-template-columns: repeat(90, 1fr); gap: 3px; height: 34px; }
.barra { border-radius: 2px; background: var(--none); position: relative; }
.barra[data-nivel="ok"] { background: var(--ok); } .barra[data-nivel="warn"] { background: var(--warn); } .barra[data-nivel="bad"] { background: var(--bad); }
.barra:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--elev-4, #252D32); color: var(--texto); font: 500 .74rem/1.3 var(--font-mono); padding: 6px 8px; border-radius: 6px; white-space: nowrap; z-index: 2; border: 1px solid var(--linea); }
.comp-pie { display: flex; align-items: center; gap: 12px; margin-top: 8px; color: var(--texto-3); font-size: .82rem; font-variant-numeric: tabular-nums; }
.comp-pie .raya { flex: 1; height: 1px; background: var(--linea); }
.comp-pie b { color: var(--texto-2); font-weight: 600; }

.incidentes { margin-top: 44px; }
.incidentes-lista { margin-top: 10px; border: 1px solid var(--linea); border-radius: 14px; background: var(--elev-1); padding: 18px 22px; color: var(--texto-2); }
.incidente { padding: 12px 0; border-top: 1px solid var(--linea); } .incidente:first-child { border-top: 0; padding-top: 0; }
.incidente h3 { margin: 0 0 4px; font-size: 1rem; } .incidente .fecha { font: 500 .78rem/1 var(--font-mono); color: var(--texto-3); }
.pie { margin-top: 48px; color: var(--texto-3); font-size: .85rem; }
.pie p { margin: 6px 0; }
@media (max-width: 640px) { .pagina { padding: 24px 14px 56px; } .banner { font-size: 1.1rem; padding: 16px; } .barras { gap: 2px; height: 28px; } .marca { font-size: 1.25rem; } .comp { padding: 14px; } }
@media (prefers-reduced-motion: no-preference) { .banner[data-estado="operational"] .banner-punto { animation: latido 2.4s ease-in-out infinite; } @keyframes latido { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } } }