/* =========================================================
   Paleta de colores corporativa — Light & Dark mode
   Light : #0C5B98 · #FFFFFF · #2F5775 · #283742 · #00070D
   Dark  : #1B9AFB · #000000 · #2F5775 · #283742 · #00070D
   ========================================================= */

/* --- Light mode (default) --- */
:root,
[data-theme="light"] {
    /* Primario — azul corporativo */
    --color-primary:          #0C5B98;
    --color-primary-hover:    #0a4e83;
    --color-primary-light:    #d0e6f7;
    --color-primary-rgb:      12, 91, 152;

    /* Secundario — azul acero */
    --color-secondary:        #2F5775;
    --color-secondary-hover:  #264a63;
    --color-secondary-light:  #ccdae5;
    --color-secondary-rgb:    47, 87, 117;

    /* Superficies */
    --color-bg:               #FFFFFF;
    --color-bg-subtle:        #f4f6f9;
    --color-surface:          #FFFFFF;
    --color-surface-raised:   #f0f4f8;
    --color-surface-overlay:  rgba(12, 91, 152, 0.06);

    /* Sidebar / Panel oscuro */
    --color-sidebar-bg:       #283742;
    --color-sidebar-hover:    #2F5775;
    --color-sidebar-active:   #0C5B98;
    --color-sidebar-text:     #cdd8e0;
    --color-sidebar-text-active: #FFFFFF;

    /* Texto */
    --color-text:             #00070D;
    --color-text-muted:       #4a5568;
    --color-text-inverse:     #FFFFFF;

    /* Bordes */
    --color-border:           #d1dce6;
    --color-border-strong:    #2F5775;

    /* Header / Navbar */
    --color-header-bg:        #0C5B98;
    --color-header-text:      #FFFFFF;
    --color-header-icon:      rgba(255,255,255,0.75);
    --color-header-icon-hover: #FFFFFF;

    /* Estados de utilidad */
    --color-success:          #1a9e6e;
    --color-warning:          #e6920a;
    --color-danger:           #d93025;
    --color-info:             #2F5775;

    /* Sombra */
    --shadow-card:            0 2px 8px rgba(0,7,13,0.10);
    --shadow-dropdown:        0 4px 16px rgba(0,7,13,0.14);
}

/* --- Dark mode --- */
[data-theme="dark"] {
        /* Primario — azul eléctrico */
        --color-primary:          #1B9AFB;
        --color-primary-hover:    #3aabfc;
        --color-primary-light:    rgba(27,154,251,0.15);
        --color-primary-rgb:      27, 154, 251;

        /* Secundario — azul acero (igual en ambos modos) */
        --color-secondary:        #2F5775;
        --color-secondary-hover:  #3a6a8a;
        --color-secondary-light:  rgba(47,87,117,0.25);
        --color-secondary-rgb:    47, 87, 117;

        /* Superficies */
        --color-bg:               #000000;
        --color-bg-subtle:        #00070D;
        --color-surface:          #0d1117;
        --color-surface-raised:   #161c24;
        --color-surface-overlay:  rgba(27,154,251,0.07);

        /* Sidebar / Panel oscuro */
        --color-sidebar-bg:       #0d1f2d;
        --color-sidebar-hover:    #162a3d;
        --color-sidebar-active:   #1B9AFB;
        --color-sidebar-text:     #8fa8ba;
        --color-sidebar-text-active: #FFFFFF;

        /* Texto */
        --color-text:             #e8edf2;
        --color-text-muted:       #7a94a8;
        --color-text-inverse:     #000000;

        /* Bordes */
        --color-border:           #1e2d3d;
        --color-border-strong:    #2F5775;

        /* Header / Navbar */
        --color-header-bg:        #00070D;
        --color-header-text:      #e8edf2;
        --color-header-icon:      rgba(232,237,242,0.65);
        --color-header-icon-hover: #1B9AFB;

        /* Estados de utilidad */
        --color-success:          #22c98a;
        --color-warning:          #f0a832;
        --color-danger:           #f05252;
        --color-info:             #1B9AFB;

        /* Sombra */
        --shadow-card:            0 2px 8px rgba(0,0,0,0.45);
        --shadow-dropdown:        0 4px 20px rgba(0,0,0,0.60);
}

/* --- Clases de utilidad rápida --- */
.bg-primary-brand   { background-color: var(--color-primary) !important; }
.bg-secondary-brand { background-color: var(--color-secondary) !important; }
.bg-sidebar         { background-color: var(--color-sidebar-bg) !important; }
.bg-surface         { background-color: var(--color-surface) !important; }

.text-primary-brand   { color: var(--color-primary) !important; }
.text-secondary-brand { color: var(--color-secondary) !important; }
.text-muted-brand     { color: var(--color-text-muted) !important; }

.border-brand { border-color: var(--color-border) !important; }

.btn-brand {
    background-color: var(--color-primary);
    border-color:     var(--color-primary);
    color:            #FFFFFF;
    transition: background-color 0.2s, border-color 0.2s;
}
.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--color-primary-hover);
    border-color:     var(--color-primary-hover);
    color:            #FFFFFF;
}

/* --- Bootstrap dark mode overrides --- */
[data-theme="dark"] {
    /* Cards */
    .card {
        background-color: var(--color-surface);
        border-color: var(--color-border);
        color: var(--color-text);
    }
    .card-header {
        background-color: var(--color-surface-raised);
        border-color: var(--color-border);
        color: var(--color-text);
    }
    .card-footer {
        background-color: var(--color-surface-raised);
        border-color: var(--color-border);
    }

    /* Tables */
    .table {
        color: var(--color-text);
        border-color: var(--color-border);
    }
    .table > :not(caption) > * > * {
        background-color: transparent;
        color: var(--color-text);
        border-color: var(--color-border);
    }
    .table-striped > tbody > tr:nth-of-type(odd) > * {
        background-color: var(--color-surface-raised);
        color: var(--color-text);
    }
    .table-hover > tbody > tr:hover > * {
        background-color: rgba(255,255,255,0.05);
        color: var(--color-text);
    }
    thead, tbody, tfoot, tr, td, th {
        border-color: var(--color-border);
    }

    /* Forms */
    .form-control,
    .form-select {
        background-color: var(--color-surface-raised);
        border-color: var(--color-border);
        color: var(--color-text);
    }
    .form-control:focus,
    .form-select:focus {
        background-color: var(--color-surface-raised);
        border-color: var(--color-primary);
        color: var(--color-text);
        box-shadow: 0 0 0 0.2rem rgba(27,154,251,0.25);
    }
    .form-control::placeholder { color: var(--color-text-muted); }
    .form-label { color: var(--color-text); }
    .form-text  { color: var(--color-text-muted); }

    /* Input groups */
    .input-group-text {
        background-color: var(--color-surface-raised);
        border-color: var(--color-border);
        color: var(--color-text-muted);
    }

    /* Modals */
    .modal-content {
        background-color: var(--color-surface);
        border-color: var(--color-border);
        color: var(--color-text);
    }
    .modal-header,
    .modal-footer {
        border-color: var(--color-border);
    }

    /* Dropdowns */
    .dropdown-menu {
        background-color: var(--color-surface);
        border-color: var(--color-border);
    }
    .dropdown-item {
        color: var(--color-text);
    }
    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: var(--color-surface-raised);
        color: var(--color-text);
    }
    .dropdown-divider { border-color: var(--color-border); }

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

    /* Alerts */
    .alert { border-color: var(--color-border); }

    /* Badges */
    .badge.bg-light { background-color: var(--color-surface-raised) !important; color: var(--color-text) !important; }
    .badge.text-dark { color: var(--color-text) !important; }

    /* Nav tabs / pills */
    .nav-tabs { border-color: var(--color-border); }
    .nav-tabs .nav-link {
        color: var(--color-text-muted);
    }
    .nav-tabs .nav-link.active {
        background-color: var(--color-surface);
        border-color: var(--color-border) var(--color-border) var(--color-surface);
        color: var(--color-text);
    }

    /* Pagination */
    .page-link {
        background-color: var(--color-surface);
        border-color: var(--color-border);
        color: var(--color-primary);
    }
    .page-link:hover {
        background-color: var(--color-surface-raised);
        border-color: var(--color-border);
        color: var(--color-primary);
    }
    .page-item.disabled .page-link {
        background-color: var(--color-surface);
        border-color: var(--color-border);
        color: var(--color-text-muted);
    }

    /* Accordion */
    .accordion-item {
        background-color: var(--color-surface);
        border-color: var(--color-border);
    }
    .accordion-button {
        background-color: var(--color-surface);
        color: var(--color-text);
    }
    .accordion-button:not(.collapsed) {
        background-color: var(--color-surface-raised);
        color: var(--color-primary);
    }
    .accordion-button::after { filter: invert(1) brightness(2); }

    /* Toasts */
    .toast {
        background-color: var(--color-surface);
        border-color: var(--color-border);
        color: var(--color-text);
    }
    .toast-header {
        background-color: var(--color-surface-raised);
        border-color: var(--color-border);
        color: var(--color-text);
    }

    /* Misc Bootstrap utilities */
    .bg-white  { background-color: var(--color-surface) !important; }
    .bg-light  { background-color: var(--color-surface-raised) !important; }
    .text-dark { color: var(--color-text) !important; }
    .text-muted { color: var(--color-text-muted) !important; }
    .border    { border-color: var(--color-border) !important; }
    hr         { border-color: var(--color-border); }
}

/* =========================================================
   Override del color "primary" de Bootstrap (v4)
   Usa el azul corporativo --color-primary, que ya cambia
   automáticamente entre modo claro y oscuro.
   ========================================================= */

/* Fondos */
.bg-primary {
    background-color: var(--color-primary) !important;
}
a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
    background-color: var(--color-primary-hover) !important;
}

/* Texto */
.text-primary { color: var(--color-primary) !important; }
a.text-primary:hover,
a.text-primary:focus { color: var(--color-primary-hover) !important; }

/* Bordes */
.border-primary { border-color: var(--color-primary) !important; }

/* Enlaces */
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

/* Botón sólido */
.btn-primary {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.5);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}
.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Botón outline */
.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.5);
}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: var(--color-primary);
    background-color: transparent;
}

/* Badge */
.badge-primary {
    color: #fff;
    background-color: var(--color-primary);
}
a.badge-primary:hover,
a.badge-primary:focus {
    background-color: var(--color-primary-hover);
}

/* Alert */
.alert-primary {
    color: var(--color-primary-hover);
    background-color: var(--color-primary-light);
    border-color: var(--color-primary);
}

/* List group */
.list-group-item-primary {
    color: var(--color-primary-hover);
    background-color: var(--color-primary-light);
}
.list-group-item.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Paginación */
.page-link { color: var(--color-primary); }
.page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Form controls / checks en foco */
.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25);
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Progress bar */
.progress-bar { background-color: var(--color-primary); }

/* Dropdown item activo */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--color-primary);
}

/* Navs */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--color-primary);
}