/* status.css — dedicated stylesheet for /status page (Stripe/GitHub style).
 *
 * Independiente de senda.css para no contaminar la home con tokens del
 * status page (y viceversa). Light/dark mode automático via prefers-color-scheme.
 */

* { box-sizing: border-box; }

:root {
    --bg: #fafaf9;
    --surface: #ffffff;
    --surface-2: #f5f5f4;
    --border: #e7e5e4;
    --border-strong: #d6d3d1;
    --fg: #18181b;
    --fg-soft: #3f3f46;
    --fg-muted: #71717a;
    --fg-faint: #a1a1aa;

    /* Status colors — Stripe-style. */
    --status-ok: #16a34a;
    --status-ok-soft: rgba(22, 163, 74, 0.12);
    --status-degraded: #ea580c;
    --status-degraded-soft: rgba(234, 88, 12, 0.14);
    --status-outage: #dc2626;
    --status-outage-soft: rgba(220, 38, 38, 0.14);
    --status-unknown: #a1a1aa;
    --status-unknown-soft: rgba(161, 161, 170, 0.18);

    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                    "Inter", "Segoe UI", system-ui, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "Inter", "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono",
                 Menlo, Consolas, monospace;

    --radius: 10px;
    --radius-sm: 6px;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.02);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0a0a0b;
        --surface: #18181b;
        --surface-2: #1f1f23;
        --border: #27272a;
        --border-strong: #3f3f46;
        --fg: #fafafa;
        --fg-soft: #d4d4d8;
        --fg-muted: #a1a1aa;
        --fg-faint: #71717a;
        --status-ok-soft: rgba(22, 163, 74, 0.16);
        --status-degraded-soft: rgba(234, 88, 12, 0.18);
        --status-outage-soft: rgba(220, 38, 38, 0.18);
        --status-unknown-soft: rgba(161, 161, 170, 0.14);
        --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.3);
    }
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }
a:hover { color: var(--status-ok); }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 920px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.brand-name { color: var(--fg); }
.brand-sep, .brand-status { color: var(--fg-muted); font-weight: 400; }

.version {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--fg-muted);
}

.container {
    max-width: 920px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
}

/* ─── Hero ─── */

.hero {
    padding: 1.75rem 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    margin-bottom: 2rem;
}
.hero[data-status="operational"] {
    border-color: var(--status-ok);
    background: var(--status-ok-soft);
}
.hero[data-status="degraded"] {
    border-color: var(--status-degraded);
    background: var(--status-degraded-soft);
}
.hero[data-status="outage"] {
    border-color: var(--status-outage);
    background: var(--status-outage-soft);
}

.hero-badge {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.hero-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--status-unknown);
}
.hero[data-status="operational"] .hero-dot { background: var(--status-ok); }
.hero[data-status="degraded"] .hero-dot { background: var(--status-degraded); }
.hero[data-status="outage"] .hero-dot { background: var(--status-outage); }

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--fg);
}

.hero-meta {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--fg-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    align-items: center;
}
.dot-sep { color: var(--fg-faint); }

/* ─── Sections ─── */

.section {
    margin-bottom: 2.5rem;
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.section-title {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin: 0 0 0.85rem;
}

.uptime-overall {
    font-size: 0.85rem;
    color: var(--fg-muted);
}
.uptime-overall strong {
    color: var(--fg);
    font-weight: 600;
    font-family: var(--font-mono);
}

/* ─── Subsystem checks grid ─── */

.checks-grid {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.75rem;
}

.check-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.95rem 1rem;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: relative;
}

.check-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.check-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--status-unknown);
    flex-shrink: 0;
}
.check-card[data-status="operational"] .check-dot { background: var(--status-ok); }
.check-card[data-status="degraded"] .check-dot { background: var(--status-degraded); }
.check-card[data-status="outage"] .check-dot { background: var(--status-outage); }

.check-name {
    font-weight: 600;
    color: var(--fg);
    font-size: 0.95rem;
}

.check-detail {
    margin: 0;
    font-size: 0.83rem;
    color: var(--fg-muted);
    line-height: 1.4;
}

.check-status-label {
    position: absolute;
    top: 0.85rem;
    right: 0.95rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: var(--status-unknown-soft);
    color: var(--status-unknown);
}
.check-card[data-status="operational"] .check-status-label {
    background: var(--status-ok-soft); color: var(--status-ok);
}
.check-card[data-status="degraded"] .check-status-label {
    background: var(--status-degraded-soft); color: var(--status-degraded);
}
.check-card[data-status="outage"] .check-status-label {
    background: var(--status-outage-soft); color: var(--status-outage);
}

/* ─── Uptime bar (90 días estilo GitHub) ─── */

.uptime-bar {
    display: grid;
    grid-template-columns: repeat(90, 1fr);
    gap: 2px;
    height: 36px;
    padding: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.uptime-day {
    background: var(--status-unknown);
    border-radius: 2px;
    cursor: help;
    transition: transform 120ms ease;
}
.uptime-day[data-status="operational"] { background: var(--status-ok); }
.uptime-day[data-status="degraded"] { background: var(--status-degraded); }
.uptime-day[data-status="outage"] { background: var(--status-outage); }
.uptime-day[data-status="unknown"] { background: var(--surface-2); border: 1px solid var(--border); }

.uptime-day:hover { transform: scaleY(1.18); }

.uptime-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: var(--fg-faint);
}

/* ─── Incidents ─── */

.section-incidents-active {
    padding: 1.25rem 1.5rem;
    background: var(--status-outage-soft);
    border: 1px solid var(--status-outage);
    border-radius: var(--radius);
}

.incident-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.incident-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.95rem 1.1rem;
    box-shadow: var(--shadow-card);
}

.incident-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.incident-severity {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--status-degraded-soft);
    color: var(--status-degraded);
}
.incident-item[data-severity="outage"] .incident-severity {
    background: var(--status-outage-soft); color: var(--status-outage);
}
.incident-item[data-severity="maintenance"] .incident-severity {
    background: var(--status-unknown-soft); color: var(--status-unknown);
}
.incident-item[data-severity="resolved"] .incident-severity {
    background: var(--status-ok-soft); color: var(--status-ok);
}

.incident-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--fg);
}

.incident-description {
    margin: 0.55rem 0 0;
    font-size: 0.9rem;
    color: var(--fg-soft);
    line-height: 1.5;
}

.incident-meta {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    color: var(--fg-muted);
}

.empty-state {
    margin: 0;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--fg-muted);
    font-size: 0.9rem;
    text-align: center;
}

/* ─── Live metrics grid ─── */

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.metric {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.95rem 1rem;
    box-shadow: var(--shadow-card);
}
.metric dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--fg-muted);
    margin: 0 0 0.4rem;
    font-weight: 600;
}
.metric dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 1.5rem;
    color: var(--fg);
    font-weight: 600;
}

/* ─── Footer ─── */

.footer {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--fg-muted);
    font-size: 0.85rem;
}
.footer a {
    color: var(--fg-muted);
    text-decoration: none;
    border-bottom: 1px dotted var(--border-strong);
}
.footer a:hover {
    color: var(--fg);
    border-bottom-color: var(--fg-muted);
}
.footer-note {
    margin-top: 0.75rem;
    font-size: 0.78rem;
    color: var(--fg-faint);
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}
.footer code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--surface-2);
    padding: 0.06rem 0.34rem;
    border-radius: 4px;
}

/* ─── Auto-refresh transitions (respeta prefers-reduced-motion) ─── */

@media (prefers-reduced-motion: no-preference) {
    .check-card, .uptime-day, .metric dd {
        transition: background 220ms ease, color 220ms ease;
    }
}

/* ─── Mobile ─── */

@media (max-width: 540px) {
    .container { padding: 1rem 1rem 3rem; }
    .topbar { padding: 0.85rem 1rem; }
    .hero { padding: 1.25rem 1rem; }
    .uptime-bar { gap: 1px; height: 28px; padding: 0.5rem; }
    .uptime-day { border-radius: 1px; }
    .metric dd { font-size: 1.25rem; }
}