/* Blue Ocean - estilos compartidos (landing, auth, dashboard, admin) */

:root {
    color-scheme: light;
    --bo-accent: #00AEEF;
    --bo-accent-soft: #7DD3FC;
    --bo-ink: #1E1E1E;
    --bo-surface: #ffffff;
    --bo-page: #f8fbfd;
    --bo-muted: #6b7280;
    --bo-border: #e5e7eb;

    /* Paleta categorica (dataviz skill) para graficos - orden fijo, no ciclar */
    --chart-cpu: #2a78d6;   /* slot 1 blue */
    --chart-ram: #008300;   /* slot 2 green */
    --chart-ssd: #e87ba4;   /* slot 3 magenta */
    --chart-grid: #e1e0d9;
    --chart-text-secondary: #52514e;
    --chart-text-muted: #898781;
    --status-good: #0ca30c;
    --status-warning: #fab219;
    --status-critical: #d03b3b;
}

@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
        color-scheme: dark;
        --bo-ink: #f5f5f5;
        --bo-surface: #14202b;
        --bo-page: #0a1420;
        --bo-muted: #9ca3af;
        --bo-border: #26333f;
        --chart-cpu: #3987e5;
        --chart-ram: #008300;
        --chart-ssd: #d55181;
        --chart-grid: #2c2c2a;
        --chart-text-secondary: #c3c2b7;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bo-ink: #f5f5f5;
    --bo-surface: #14202b;
    --bo-page: #0a1420;
    --bo-muted: #9ca3af;
    --bo-border: #26333f;
    --chart-cpu: #3987e5;
    --chart-ram: #008300;
    --chart-ssd: #d55181;
    --chart-grid: #2c2c2a;
    --chart-text-secondary: #c3c2b7;
}

* { font-family: 'DM Sans', sans-serif; }

body { background: var(--bo-page); color: var(--bo-ink); }

.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

.glow-card:hover { box-shadow: 0 0 30px rgba(0,174,239,0.4); transform: translateY(-4px); }
.glow-card { transition: box-shadow 0.3s ease, transform 0.3s ease; }

.product-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,174,239,0.15); }
.product-card { transition: all 0.3s ease; }

#wave-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }

/* Posicionamiento critico del header y del hero: fijado aqui (no como
   utilidades de Tailwind) para que no dependa del CDN de Tailwind en tiempo
   de ejecucion. El canvas de fondo (arriba) siempre se posiciona via este
   mismo stylesheet, asi que header/hero deben hacerlo igual para garantizar
   que queden por encima. */
.bo-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.bo-hero { position: relative; }
.bo-hero-content { position: relative; z-index: 10; }

.nav-link { position: relative; }
.nav-link::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:#00AEEF; transition:width 0.3s; }
.nav-link:hover::after { width:100%; }

.gradient-btn { background: linear-gradient(135deg, #00AEEF, #ffffff); color: #1E1E1E; }
.gradient-btn:hover { background: linear-gradient(135deg, #00AEEF, #7DD3FC); }

.bo-card {
    background: var(--bo-surface);
    border: 1px solid var(--bo-border);
    border-radius: 1rem;
}

.bo-input {
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 0.6rem;
    border: 1px solid var(--bo-border);
    background: var(--bo-surface);
    color: var(--bo-ink);
}
.bo-input:focus { outline: 2px solid var(--bo-accent); outline-offset: 1px; }

.bo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.bo-badge-good { background: rgba(12,163,12,0.12); color: var(--status-good); }
.bo-badge-warning { background: rgba(250,178,25,0.15); color: #8a5a00; }
.bo-badge-critical { background: rgba(208,59,59,0.12); color: var(--status-critical); }

.bo-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bo-table th { text-align: left; color: var(--bo-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--bo-border); }
.bo-table td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--bo-border); }
.bo-table tr:last-child td { border-bottom: none; }