/*
 * Sena UI · tema oscuro
 *
 * Usa el modo de color nativo de Bootstrap 5.3 (data-bs-theme="dark") y ajusta
 * los tokens de Sena. No se invierten colores: imágenes y gráficos quedan intactos.
 */

html.sena-ui[data-bs-theme="dark"] {
    color-scheme: dark;

    --sena-bg: #0F172A;
    --sena-bg-rgb: 15, 23, 42;
    --sena-surface: #1A2436;
    --sena-surface-rgb: 26, 36, 54;
    --sena-surface-2: #222E44;
    --sena-text: #E2E8F0;
    --sena-text-rgb: 226, 232, 240;
    --sena-muted: #9AA8BC;
    --sena-border: #2F3B52;
    --sena-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --sena-shadow-md: 0 6px 16px rgba(0, 0, 0, .35);
    --sena-shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);

    /* el color de marca se aclara para mantener el contraste sobre fondo oscuro */
    --sena-primary: color-mix(in srgb, var(--sena-brand) 72%, #fff);
    --sena-primary-hover: color-mix(in srgb, var(--sena-brand) 60%, #fff);
    --sena-primary-active: color-mix(in srgb, var(--sena-brand) 50%, #fff);
    --sena-primary-subtle: color-mix(in srgb, var(--sena-brand) 22%, var(--sena-surface));
    --sena-primary-border: color-mix(in srgb, var(--sena-brand) 45%, var(--sena-surface));
    --sena-accent-strong: color-mix(in srgb, var(--sena-accent) 75%, #fff);

    --bs-body-bg: var(--sena-bg);
    --bs-body-color: var(--sena-text);
    --bs-secondary-bg: var(--sena-surface);
    --bs-tertiary-bg: var(--sena-surface-2);
    --bs-border-color: var(--sena-border);
    --bs-emphasis-color: #fff;
}

/* los botones primarios conservan el color de marca original con texto blanco */
html.sena-ui[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: var(--sena-brand);
    --bs-btn-border-color: var(--sena-brand);
    --bs-btn-hover-bg: color-mix(in srgb, var(--sena-brand) 85%, #fff);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--sena-brand) 85%, #fff);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}

/* clases de color fijo del núcleo que Bootstrap no adapta al modo oscuro
   (las utilidades .bg-* llevan !important, por eso hace falta aquí) */
html.sena-ui[data-bs-theme="dark"] .bg-light,
html.sena-ui[data-bs-theme="dark"] .bg-white {
    background-color: var(--sena-surface-2) !important;
}

html.sena-ui[data-bs-theme="dark"] .text-dark {
    color: var(--sena-text) !important;
}

html.sena-ui[data-bs-theme="dark"] .table {
    --bs-table-bg: var(--sena-surface);
    --bs-table-color: var(--sena-text);
}

/* los logotipos suelen estar pensados para fondo claro: se mantienen sobre una pastilla clara */
html.sena-ui[data-bs-theme="dark"] .sena-brand-mark.has-logo {
    background: #fff;
    border-color: transparent;
}

/* en la barra: con logotipo, pastilla blanca (--sena-brand-bg-dark); sin él, iniciales sobre la marca */
html.sena-ui[data-bs-theme="dark"] .navbar-brand::before {
    background-color: var(--sena-brand-bg-dark, var(--sena-brand));
}

/* con logotipo propio para fondo oscuro: sin pastilla blanca */
html.sena-ui[data-bs-theme="dark"] .sena-brand-mark.has-logo.has-dark-logo {
    background: transparent;
}


html.sena-ui .sena-brand-mark .sena-logo-dark { display: none; }
html.sena-ui[data-bs-theme="dark"] .sena-brand-mark.has-dark-logo .sena-logo-light { display: none; }
html.sena-ui[data-bs-theme="dark"] .sena-brand-mark.has-dark-logo .sena-logo-dark { display: block; }
html.sena-ui[data-bs-theme="dark"] .navbar-brand::before {
    background-image: var(--sena-brand-image-dark, var(--sena-brand-image));
}