/* Morion OS Status Page — Light Theme Profesional
 * Estilo inspirado en status pages de referencia del rubro:
 * Stripe (status.stripe.com), Cloudflare (cloudflarestatus.com),
 * Vercel (vercel-status.com), GitHub (githubstatus.com).
 *
 * Paleta light de Morion OS (frontend/src/theme.js lightColors):
 * fondo blanco/beige cálido + dorado #C98E4C como acento de marca.
 * Tipografías: Bebas Neue (brand) + Epilogue (UI).
 */

:root {
    /* Bases — beige cálido y blanco, como el admin */
    --bg:            #F9F9FB;
    --bg-deep:       #FFFFFF;
    --bg-elevated:   #F5F0EB;
    --bg-high:       #EDE9E4;
    --bg-hover:      #F0EAE3;

    /* Dorados — identidad de marca */
    --gold:          #C98E4C;
    --gold-light:    #FBBA73;
    --gold-dark:     #845416;
    --gold-soft:     #F5EDE4;

    /* Texto */
    --text:          #1C1917;
    --text-soft:     #57534E;
    --text-muted:    #78716C;
    --text-faint:    #A8A29E;

    /* Bordes */
    --border:        #E7E5E4;
    --border-strong: #D6D3D1;
    --border-subtle: #F0EBE6;
    --divider:       rgba(0, 0, 0, 0.06);

    /* Estados semánticos */
    --success:       #059669;
    --success-bg:    #ECFDF5;
    --success-border:#A7F3D0;
    --warning:       #D97706;
    --warning-bg:    #FFFBEB;
    --warning-border:#FCD34D;
    --error:         #DC2626;
    --error-bg:      #FEF2F2;
    --error-border:  #FECACA;

    /* Sombras profesionales — sutiles y limpias */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:  0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-lg:  0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04);

    /* Radii */
    --r-sm:   6px;
    --r-md:   8px;
    --r-lg:   12px;
    --r-xl:   16px;
    --r-pill: 9999px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Epilogue', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--gold-dark);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover { color: var(--gold); text-decoration: underline; }

.container {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
header {
    border-bottom: 1px solid var(--border);
    padding: 20px 0;
    background: var(--bg-deep);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 2.5px;
    color: var(--text);
    text-transform: uppercase;
}

.back-link {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}
.back-link:hover { color: var(--gold-dark); }

main { padding: 56px 0 64px; }

/* ─── Overall status banner (estilo Stripe) ──────────────────────────────── */
.overall-status {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 36px 32px;
    margin-bottom: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Acento superior fino de color según estado */
.overall-status::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--border-strong);
    transition: background 0.3s ease;
}

#overall-status:has(.status-badge[data-status="ok"])::before { background: var(--success); }
#overall-status:has(.status-badge[data-status="degraded"])::before { background: var(--warning); }
#overall-status:has(.status-badge[data-status="down"])::before { background: var(--error); }

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-radius: var(--r-pill);
    font-size: 15px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.status-badge[data-status="ok"] {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success);
}
.status-badge[data-status="degraded"] {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning);
}
.status-badge[data-status="down"] {
    background: var(--error-bg);
    border-color: var(--error-border);
    color: var(--error);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.3); }
}

.status-subtitle {
    margin-top: 18px;
    font-size: 15px;
    color: var(--text-soft);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.status-meta {
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.status-meta #last-check {
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
}

/* ─── Section headings ───────────────────────────────────────────────────── */
.components { margin-bottom: 40px; }

.components h2,
.info-card h2 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

/* ─── Component cards (estilo Stripe/Cloudflare) ─────────────────────────── */
.component-list {
    display: flex;
    flex-direction: column;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.component {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.component:last-child { border-bottom: none; }

.component-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.component-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-faint);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.02);
}

.component-dot[data-status="ok"] {
    background: var(--success);
    box-shadow: 0 0 0 3px var(--success-bg);
}
.component-dot[data-status="degraded"] {
    background: var(--warning);
    box-shadow: 0 0 0 3px var(--warning-bg);
}
.component-dot[data-status="down"] {
    background: var(--error);
    box-shadow: 0 0 0 3px var(--error-bg);
}

.component h3 {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.component-status {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.component:has(.component-dot[data-status="ok"]) .component-status {
    color: var(--success);
    background: var(--success-bg);
    border-color: var(--success-border);
}
.component:has(.component-dot[data-status="degraded"]) .component-status {
    color: var(--warning);
    background: var(--warning-bg);
    border-color: var(--warning-border);
}
.component:has(.component-dot[data-status="down"]) .component-status {
    color: var(--error);
    background: var(--error-bg);
    border-color: var(--error-border);
}

.component-detail {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding-left: 22px;
}

.component-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding-left: 22px;
}

.latency, .uptime {
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.uptime { color: var(--success); }

/* ─── History bars (estilo Atlassian/Stripe) ─────────────────────────────── */
.history-bar {
    display: flex;
    gap: 2px;
    height: 30px;
    align-items: stretch;
    margin-left: 22px;
}

.history-bar .bar {
    flex: 1;
    background: var(--border);
    border-radius: 2px;
    transition: all 0.15s ease;
    cursor: help;
    min-width: 2px;
}

.history-bar .bar[data-status="ok"] {
    background: var(--success);
    opacity: 0.85;
}
.history-bar .bar[data-status="degraded"] {
    background: var(--warning);
    opacity: 0.9;
}
.history-bar .bar[data-status="down"] {
    background: var(--error);
    opacity: 0.95;
}
.history-bar .bar:hover {
    opacity: 1;
    transform: scaleY(1.15);
}

/* ─── Info cards ─────────────────────────────────────────────────────────── */
.info-card {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 24px 28px;
    margin-bottom: 16px;
}

.info-card.subtle {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding: 16px 0;
}

.info-card ul {
    list-style: none;
    margin-top: 4px;
}

.info-card li {
    padding: 12px 0;
    border-bottom: 1px solid var(--divider);
    font-size: 14px;
    color: var(--text-soft);
    line-height: 1.6;
}

.info-card li:last-child { border-bottom: none; }
.info-card li strong {
    color: var(--text);
    font-weight: 600;
}

.info-card p {
    font-size: 14px;
    color: var(--text-soft);
    margin-bottom: 10px;
}

.muted {
    color: var(--text-muted);
    font-size: 13px;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
footer {
    border-top: 1px solid var(--border);
    padding: 24px 0;
    margin-top: 32px;
    background: var(--bg-deep);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-muted);
    font-size: 13px;
}

.footer-content .muted {
    color: var(--text-faint);
    font-size: 12px;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .container { padding: 0 16px; }
    main { padding: 32px 0; }
    .overall-status { padding: 28px 20px; }
    .status-badge { font-size: 14px; }
    .component { padding: 16px 18px; }
    .component-detail, .component-meta, .history-bar { padding-left: 0; margin-left: 0; }
    .info-card { padding: 18px 20px; }
    .footer-content { flex-direction: column; gap: 6px; }
}