/* =====================================================================
   tema.css — Overrides del tema visual personalizable.
   Modulo /configuracion/personalizacion.
   ---------------------------------------------------------------------
   Consume las variables CSS que emite vistas/modulos/plantilla/tema.php.
   Cada variable trae fallback al valor por defecto del POS, de modo que
   si el partial no se cargara, la apariencia no cambia.

   Adaptado al POS: barra de navegacion VERTICAL (#sidenav-main), a
   diferencia del nav horizontal de otros productos Umbrellasofts.

   Debe cargarse DESPUES de argon.css y style.css.
   ===================================================================== */

/* ─── Header (barra superior fija) ─────────────────────────────────── */
.navbar.navbar-top.bg-primary {
    background-color: var(--tema-header-bg, #5e72e4) !important;
    background-image: none !important;
}
.navbar-top .navbar-brand,
.navbar-top .navbar-brand.text-white,
.navbar-top .nav-link,
.navbar-top .nav-link i,
.navbar-top .navbar-nav .nav-link,
.navbar-top .navbar-text {
    color: var(--tema-header-text, #ffffff) !important;
}

/* ─── Sidenav (barra de navegacion vertical izquierda) ─────────────── */
#sidenav-main,
#sidenav-main.bg-black {
    background-color: var(--tema-nav-bg, #000000) !important;
}
#sidenav-main .navbar-brand,
#sidenav-main .navbar-nav .nav-link,
#sidenav-main .navbar-nav .nav-link i,
#sidenav-main .navbar-nav .nav-link .nav-link-text,
#sidenav-main .navbar-nav .nav-link .sidenav-normal,
#sidenav-main .navbar-heading {
    color: var(--tema-nav-text, #ffffff) !important;
}

/* Sub-items "actuales" (sin fondo resaltado): acento nav-active sobre el fondo
   oscuro del nav (legible). */
#sidenav-main .navbar-nav .nav-link.text-primary,
#sidenav-main .navbar-nav .nav-link.text-primary i,
#sidenav-main .navbar-nav .nav-link.text-primary .sidenav-normal {
    color: var(--tema-nav-active, #5e72e4) !important;
}
/* Item de nivel superior ACTIVO: argon le pone un fondo oscuro fijo (#3e546b), por
   lo que el texto/icono/flecha deben ir en blanco. Antes usaba nav-active (indigo),
   que sobre ese fondo quedaba con muy bajo contraste (~1.6:1, ilegible). */
#sidenav-main .navbar-nav .nav-link.active,
#sidenav-main .navbar-nav .nav-link.active i,
#sidenav-main .navbar-nav .nav-link.active .nav-link-text,
#sidenav-main .navbar-nav .nav-link.active .sidenav-normal,
#sidenav-main .navbar-nav .nav-link.active[data-toggle='collapse'][aria-expanded='true']:after {
    color: #ffffff !important;
}

/* ─── Fondo de la aplicación ───────────────────────────────────────── */
/* `:not(.bg-default)` deja intacta la pantalla de login (fondo oscuro). */
body:not(.bg-default) {
    background-color: var(--tema-body-bg, #f8f9fe) !important;
}

/* ─── Color primario / acento ──────────────────────────────────────── */
.btn-primary {
    background-color: var(--tema-primary, #5e72e4) !important;
    border-color: var(--tema-primary, #5e72e4) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--tema-primary, #5e72e4) !important;
    border-color: var(--tema-primary, #5e72e4) !important;
    filter: brightness(0.92);
}
.btn-outline-primary {
    color: var(--tema-primary, #5e72e4) !important;
    border-color: var(--tema-primary, #5e72e4) !important;
}
.btn-outline-primary:hover {
    background-color: var(--tema-primary, #5e72e4) !important;
    color: #ffffff !important;
}
.bg-primary {
    background-color: var(--tema-primary, #5e72e4) !important;
}
.bg-gradient-primary {
    background: linear-gradient(135deg,
        var(--tema-primary, #5e72e4) 0%,
        var(--tema-primary, #5e72e4) 100%) !important;
}
.text-primary {
    color: var(--tema-primary, #5e72e4) !important;
}
.badge-primary {
    background-color: var(--tema-primary, #5e72e4) !important;
    /* El fondo solido del tema requiere texto claro: sin esto Argon deja el
       texto azul (#2643e9) sobre el indigo (~1.6:1, ilegible) en todos los modulos. */
    color: #ffffff !important;
}
.border-primary {
    border-color: var(--tema-primary, #5e72e4) !important;
}
.page-item.active .page-link {
    background-color: var(--tema-primary, #5e72e4) !important;
    border-color: var(--tema-primary, #5e72e4) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--tema-primary, #5e72e4) !important;
    border-color: var(--tema-primary, #5e72e4) !important;
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: var(--tema-primary, #5e72e4) !important;
}