/* ============================================================
   Intranet ISORGA · Sistema de temas
   - HUD     → modo oscuro (por defecto). Cian sobre azul casi negro, con glow.
   - Blueprint → modo claro. Azul técnico sobre blanco, sin glow, líneas finas.

   Activación:
     <html data-theme="dark">  → HUD forzado
     <html data-theme="light"> → Blueprint forzado
     sin atributo              → respeta @media (prefers-color-scheme)
   Para que componentes de Bootstrap con selectores propios también
   respondan, conmuta `data-bs-theme` al mismo valor en <html>.
   ============================================================ */


/* ----------  TOKENS · HUD (oscuro, por defecto)  ---------- */
:root {
    /* Superficie */
    --bg:                   #080c16;
    --bg-gradient-end:      #0a1018;
    --surface:              #0d1422;
    --surface-elevated:     #11192b;

    /* Acento */
    --accent:               #2dd4ee;
    --accent-strong:        #5beaff;
    --accent-rgb:           45, 212, 238;

    /* Texto */
    --text:                 #dceef4;
    --text-muted:           #5d7a8a;

    /* Líneas */
    --border:               rgba(45, 212, 238, 0.30);
    --border-soft:          rgba(45, 212, 238, 0.15);

    /* Glow (la pieza que distingue HUD de Blueprint) */
    --glow-accent:          0 0 12px rgba(45, 212, 238, 0.45);
    --glow-accent-strong:   0 0 18px rgba(45, 212, 238, 0.65);
    --glow-text:            0 0 10px rgba(45, 212, 238, 0.35);

    /* Tipografía (común a ambos modos) */
    --font-display:         'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:            'JetBrains Mono', 'IBM Plex Mono', 'Consolas', ui-monospace, monospace;
    --tracking-wide:        0.12em;
    --tracking-tight:       0.02em;

    /* Bisel común (esquina superior derecha + inferior izquierda recortadas) */
    --bevel:                10px;
    --clip-bevel:           polygon(
                              0 0,
                              calc(100% - var(--bevel)) 0,
                              100% var(--bevel),
                              100% 100%,
                              var(--bevel) 100%,
                              0 calc(100% - var(--bevel))
                            );

    /* ----- Bridge a las variables de Bootstrap 5.3 ----- */
    --bs-body-bg:           var(--bg);
    --bs-body-color:        var(--text);
    --bs-emphasis-color:    var(--text);
    --bs-secondary-color:   var(--text-muted);
    --bs-tertiary-color:    var(--text-muted);

    --bs-primary:           var(--accent);
    --bs-primary-rgb:       var(--accent-rgb);
    --bs-primary-text-emphasis: var(--accent-strong);

    --bs-link-color:        var(--accent);
    --bs-link-hover-color:  var(--accent-strong);
    --bs-link-color-rgb:    var(--accent-rgb);

    --bs-border-color:               var(--border);
    --bs-border-color-translucent:   var(--border-soft);

    --bs-card-bg:           var(--surface);
    --bs-card-border-color: var(--border);
    --bs-card-color:        var(--text);

    --bs-tertiary-bg:       var(--surface-elevated);
    --bs-secondary-bg:      var(--surface);
}


/* ----------  TOKENS · Blueprint (claro)  ---------- */
/* Override automático si el SO va en claro y no hay forzado manual */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg:                   #eef3f9;
        --bg-gradient-end:      #e3ebf3;
        --surface:              #ffffff;
        --surface-elevated:     #f6f9fc;

        --accent:               #0b6db5;
        --accent-strong:        #085591;
        --accent-rgb:           11, 109, 181;

        --text:                 #13202d;
        --text-muted:           #5a6b78;

        --border:               rgba(11, 109, 181, 0.40);
        --border-soft:          rgba(11, 109, 181, 0.18);

        --glow-accent:          0 1px 3px rgba(16, 32, 46, 0.08);
        --glow-accent-strong:   0 2px 6px rgba(16, 32, 46, 0.12);
        --glow-text:            none;
    }
}

/* Override manual: gana sobre el SO */
[data-theme="light"] {
    --bg:                   #eef3f9;
    --bg-gradient-end:      #e3ebf3;
    --surface:              #ffffff;
    --surface-elevated:     #f6f9fc;

    --accent:               #0b6db5;
    --accent-strong:        #085591;
    --accent-rgb:           11, 109, 181;

    --text:                 #13202d;
    --text-muted:           #5a6b78;

    --border:               rgba(11, 109, 181, 0.40);
    --border-soft:          rgba(11, 109, 181, 0.18);

    --glow-accent:          0 1px 3px rgba(16, 32, 46, 0.08);
    --glow-accent-strong:   0 2px 6px rgba(16, 32, 46, 0.12);
    --glow-text:            none;
}

/* Forzado explícito a oscuro (re-aplicamos por si el SO va claro) */
[data-theme="dark"] {
    --bg:                   #080c16;
    --bg-gradient-end:      #0a1018;
    --surface:              #0d1422;
    --surface-elevated:     #11192b;

    --accent:               #2dd4ee;
    --accent-strong:        #5beaff;
    --accent-rgb:           45, 212, 238;

    --text:                 #dceef4;
    --text-muted:           #5d7a8a;

    --border:               rgba(45, 212, 238, 0.30);
    --border-soft:          rgba(45, 212, 238, 0.15);

    --glow-accent:          0 0 12px rgba(45, 212, 238, 0.45);
    --glow-accent-strong:   0 0 18px rgba(45, 212, 238, 0.65);
    --glow-text:            0 0 10px rgba(45, 212, 238, 0.35);
}


/* ============================================================
   Base
   ============================================================ */

/* body gestionado por shared/layout/header.php (JOFER) */
main.main-content {
    color: var(--text);
    font-family: var(--font-display);
    letter-spacing: var(--tracking-tight);
}

/* Tipografía estilo HUD: cabeceras en MAYÚSCULAS con tracking amplio */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: 600;
}

/* Etiquetas de formulario también en mayúsculas (look de cabina) */
.form-label,
label.form-label {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Números grandes del dashboard: mono + glow en HUD, plano en Blueprint */
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    text-shadow: var(--glow-text);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover {
    color: var(--accent-strong);
    text-shadow: var(--glow-text);
}

hr {
    border-color: var(--border-soft);
    opacity: 1;
}

::selection {
    background: rgba(var(--accent-rgb), 0.35);
    color: var(--text);
}




/* ============================================================
   Cards
   ============================================================ */

.card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 0;
    box-shadow: var(--glow-accent);
    clip-path: var(--clip-bevel);
    transition: box-shadow .2s ease, transform .2s ease;
}
.card-header {
    background-color: var(--surface-elevated);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: 600;
}
.card-header.bg-primary,
.card-header.bg-primary.text-white {
    background-color: rgba(var(--accent-rgb), 0.18) !important;
    color: var(--accent-strong) !important;
    border-bottom: 1px solid var(--border);
    text-shadow: var(--glow-text);
}

/* hover-shadow heredado: ahora suena al glow del tema */
.hover-shadow {
    transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}
.hover-shadow:hover {
    box-shadow: var(--glow-accent-strong);
    transform: translateY(-1px);
}

/* card-keynav: el badge numérico de atajo */
.card-keynav { position: relative; }

a.text-decoration-none:focus { outline: none; }
a.text-decoration-none:focus-visible .card-keynav {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: var(--glow-accent-strong);
}

.card-key-badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 .35rem;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
    background: rgba(var(--accent-rgb), 0.18);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 600;
    line-height: calc(1.5rem - 2px);
    text-align: center;
    border: 1px solid var(--border);
    user-select: none;
    pointer-events: none;
}


/* ============================================================
   Botones
   ============================================================ */

.btn {
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: 0.82rem;
    font-weight: 600;
    transition: box-shadow .15s ease, transform .15s ease, color .15s ease, background-color .15s ease;
}
.btn:focus,
.btn:focus-visible {
    box-shadow: 0 0 0 .15rem rgba(var(--accent-rgb), 0.35), var(--glow-accent);
    outline: none;
}

.btn-primary {
    background-color: rgba(var(--accent-rgb), 0.22);
    border: 1px solid var(--accent);
    color: var(--accent-strong);
    text-shadow: var(--glow-text);
    box-shadow: var(--glow-accent);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: rgba(var(--accent-rgb), 0.35);
    border-color: var(--accent-strong);
    color: var(--accent-strong);
    box-shadow: var(--glow-accent-strong);
}

.btn-outline-secondary {
    border: 1px solid var(--border);
    color: var(--text-muted);
    background-color: transparent;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: rgba(var(--accent-rgb), 0.10);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-outline-primary {
    border: 1px solid var(--accent);
    color: var(--accent);
    background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: rgba(var(--accent-rgb), 0.20);
    color: var(--accent-strong);
    box-shadow: var(--glow-accent);
}

/* Botón volver: sigue a la derecha en flex */
.d-flex > .btn-volver { order: 999; }


/* ============================================================
   Formularios
   ============================================================ */

.form-control,
.form-select {
    background-color: var(--surface-elevated);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 0;
}
.form-control::placeholder { color: var(--text-muted); opacity: .7; }
.form-control:focus,
.form-select:focus {
    background-color: var(--surface-elevated);
    border-color: var(--accent);
    color: var(--text);
    box-shadow: 0 0 0 .15rem rgba(var(--accent-rgb), 0.25);
}

.input-group-text {
    background-color: var(--surface-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 0;
}

.form-check-input {
    background-color: var(--surface-elevated);
    border: 1px solid var(--border);
}
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
    box-shadow: var(--glow-accent);
}
.form-check-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 .15rem rgba(var(--accent-rgb), 0.25);
}


/* ============================================================
   Tabs (nav-tabs)
   ============================================================ */

.nav-tabs {
    border-bottom: 1px solid var(--border);
}
.nav-tabs .nav-link {
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: 0.8rem;
}
.nav-tabs .nav-link:hover {
    color: var(--accent);
    border-color: transparent;
    background: rgba(var(--accent-rgb), 0.08);
}
.nav-tabs .nav-link.active {
    color: var(--accent-strong);
    background: var(--surface);
    border-color: var(--border) var(--border) var(--surface);
    text-shadow: var(--glow-text);
}


/* ============================================================
   Badges, alerts, listas, tablas básicas
   ============================================================ */

.badge {
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: 600;
    border: 1px solid transparent;
}
.badge.text-bg-primary,
.badge.bg-primary {
    background-color: rgba(var(--accent-rgb), 0.22) !important;
    color: var(--accent-strong) !important;
    border-color: var(--accent);
}

.alert {
    border-radius: 0;
    border: 1px solid var(--border);
    background-color: var(--surface);
    color: var(--text);
}
.alert-danger    { border-color: rgba(220, 53,  69,  .55); background-color: rgba(220, 53,  69,  .12); color: #ffb4be; }
.alert-success   { border-color: rgba(25,  135, 84,  .55); background-color: rgba(25,  135, 84,  .12); color: #b6f0c8; }
.alert-warning   { border-color: rgba(255, 193, 7,   .55); background-color: rgba(255, 193, 7,   .12); color: #ffe399; }
.alert-info      { border-color: var(--border);            background-color: rgba(var(--accent-rgb), .12); color: var(--accent-strong); }

[data-theme="light"] .alert-danger,
:root:not([data-theme="dark"]) .alert-danger { color: #8a1b29; }
[data-theme="light"] .alert-success,
:root:not([data-theme="dark"]) .alert-success { color: #14532d; }
[data-theme="light"] .alert-warning,
:root:not([data-theme="dark"]) .alert-warning { color: #6b4a07; }

table {
    color: var(--text);
}
.table {
    --bs-table-bg:           transparent;
    --bs-table-color:        var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg:   rgba(var(--accent-rgb), 0.05);
    --bs-table-hover-bg:     rgba(var(--accent-rgb), 0.10);
}
.table > :not(caption) > * > * {
    border-bottom-color: var(--border-soft);
}
.table > thead {
    background: var(--surface-elevated);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.list-group-item {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
}


/* ============================================================
   Iconos
   ============================================================ */

.text-primary i,
.text-primary {
    color: var(--accent) !important;
}
.text-secondary {
    color: var(--text-muted) !important;
}
.text-muted {
    color: var(--text-muted) !important;
}
.bi {
    vertical-align: -.125em;
}
/* Glow en iconos sobre acento (sólo HUD; en Blueprint el glow es 'none') */
.text-primary > .bi,
.text-primary.bi,
.bi.text-primary {
    text-shadow: var(--glow-text);
}


/* ============================================================
   Login (auth/login.php)
   ============================================================ */

.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.login-card {
    width: 100%;
    max-width: 420px;
}
.login-logo {
    max-width: 110px;
    height: auto;
    filter: drop-shadow(var(--glow-accent));
}


/* ============================================================
   Tabulator (cuando se cargue el tema midnight, le aplicamos
   variables nuestras para que respete HUD/Blueprint)
   ============================================================ */

.tabulator {
    background-color: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-display);
}
.tabulator .tabulator-header {
    background-color: var(--surface-elevated);
    border-bottom: 1px solid var(--border);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.tabulator .tabulator-header .tabulator-col {
    background-color: var(--surface-elevated);
    border-right: 1px solid var(--border-soft);
    color: var(--accent);
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    color: var(--accent);
}
.tabulator .tabulator-row {
    background-color: var(--surface);
    border-bottom: 1px solid var(--border-soft);
    color: var(--text);
}
.tabulator .tabulator-row.tabulator-row-even {
    background-color: rgba(var(--accent-rgb), 0.04);
}
.tabulator .tabulator-row:hover {
    background-color: rgba(var(--accent-rgb), 0.10) !important;
}
.tabulator .tabulator-row.tabulator-selected {
    background-color: rgba(var(--accent-rgb), 0.18) !important;
    color: var(--text);
}
.tabulator .tabulator-row .tabulator-cell {
    border-right: 1px solid var(--border-soft);
    color: var(--text);
}
.tabulator .tabulator-footer {
    background-color: var(--surface-elevated);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
}
.tabulator .tabulator-footer .tabulator-page {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 0;
}
.tabulator .tabulator-footer .tabulator-page.active {
    background: rgba(var(--accent-rgb), 0.22);
    color: var(--accent-strong);
    border-color: var(--accent);
    text-shadow: var(--glow-text);
}

/* Layout helpers preservados de la versión anterior */
.tabulator .tabulator-cell.celda-areas {
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.5;
    padding-top: 6px;
    padding-bottom: 6px;
}
.tabulator .tabulator-cell.celda-areas .badge { margin-bottom: 2px; white-space: normal; }
.tabulator .tabulator-cell.celda-larga {
    white-space: normal;
    line-height: 1.35;
    padding-top: .35rem;
    padding-bottom: .35rem;
}


/* ============================================================
   Dropdowns y modales (Bootstrap)
   ============================================================ */

.dropdown-menu {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: var(--glow-accent);
}
.dropdown-item {
    color: var(--text);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(var(--accent-rgb), 0.18);
    color: var(--accent-strong);
}

.modal-content {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    box-shadow: var(--glow-accent-strong);
}
.modal-header,
.modal-footer {
    border-color: var(--border);
}