/* Página pública de status (/status), no estilo eco. */
.st-page { display: grid; gap: 22px; min-width: 0; padding-bottom: 40px; }
.st-hero { --eco-h: 235; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.st-hero--ok { --eco-h: 120; }
.st-hero--degraded, .st-hero--unstable { --eco-h: 330; }
.st-hero--down { --eco-h: 320; }
.st-hero--maintenance { --eco-h: 215; }
.st-hero-badge { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 26px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.st-hero-badge .icon { width: 38px; height: 38px; }
.st-hero-badge { animation: st-breathe 3.4s ease-in-out infinite; }
@keyframes st-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .st-hero-badge { animation: none; } }
.st-hero h1 { overflow-wrap: anywhere; }
.st-hero time { font-weight: 700; color: #fff; }

.st-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.st-sum { display: grid; gap: 2px; justify-items: center; padding: 14px 8px; text-align: center; }
.st-sum strong { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--t, var(--text)); }
.st-sum span { font-size: .78rem; color: var(--text-muted); }

.st-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.st-item { --st-c: var(--accent); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.st-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: var(--st-c); background: color-mix(in srgb, var(--st-c) 14%, var(--surface-2)); }
.st-ico .icon { width: 20px; height: 20px; }
.st-name { display: grid; gap: 2px; min-width: 0; }
.st-name strong { overflow-wrap: anywhere; }
.st-name small { color: var(--text-muted); line-height: 1.35; overflow-wrap: anywhere; }
.st-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; font-size: .8rem; font-weight: 800; white-space: nowrap; background: var(--surface-2); color: var(--text-soft); }
.st-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.st--ok .st-pill { background: color-mix(in srgb, #16a34a 16%, var(--surface)); color: #15803d; }
.st--degraded .st-pill, .st--unstable .st-pill { background: color-mix(in srgb, #f59e0b 20%, var(--surface)); color: #b45309; }
.st--down .st-pill { background: color-mix(in srgb, #dc2626 16%, var(--surface)); color: #b91c1c; }
.st--maintenance .st-pill { background: color-mix(in srgb, #3b82f6 16%, var(--surface)); color: #1d4ed8; }
.st--ok .st-dot { animation: st-pulse 2.4s ease-out infinite; }
@keyframes st-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } }
@media (prefers-reduced-motion: reduce) { .st--ok .st-dot { animation: none; } }
:root[data-theme="dark"] .st--ok .st-pill { color: #4ade80; }
:root[data-theme="dark"] .st--degraded .st-pill, :root[data-theme="dark"] .st--unstable .st-pill { color: #fbbf24; }
:root[data-theme="dark"] .st--down .st-pill { color: #f87171; }
:root[data-theme="dark"] .st--maintenance .st-pill { color: #93c5fd; }

.st-incidents { display: grid; gap: 10px; }
.st-incident { display: grid; gap: 8px; }
.st-incident--active { border-left: 4px solid #f59e0b; }
.st-incident--past { opacity: .8; }
.st-incident-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.st-incident p { margin: 0; overflow-wrap: anywhere; line-height: 1.5; }
.st-incident small { color: var(--text-muted); }

@media (max-width: 519px) {
  .st-hero { grid-template-columns: minmax(0, 1fr); }
  .st-hero-badge { display: none; }
  .st-item { grid-template-columns: auto minmax(0, 1fr); }
  .st-pill { grid-column: 1 / -1; justify-self: start; }
}
@media (min-width: 760px) {
  .st-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}