/* ==========================================================================
   Dónde se aplica la marca — agnóstico de cuál sea
   ==========================================================================

   Este archivo es idéntico para las dos marcas. Todo su color sale de los
   tokens que declara `tokens-{marca}.css`, que se carga ANTES.

   Es la conversión de `custom-theme.css`, que eran 3 058 bytes en una sola
   línea minificada con 36 tokens y 26 !important mezclados. Esa mezcla —qué
   valores junto a dónde se aplican— era lo que hacía que la marca estuviera
   pegada al código.

   Los !important no son un descuido: el tema Vuexy llega minificado en un
   core.css de 708 KB sin fuente SCSS, así que la única forma de pisarlo es
   cargarse después y ganar por especificidad. Se conservan tal cual estaban.

   Orden de carga obligatorio:
       core.css  ->  tokens-{marca}.css  ->  reglas.css
   ========================================================================== */

/* ---------- Botones ---------- */

.btn-primary {
    --bs-btn-bg: var(--marca-primario);
    --bs-btn-border-color: var(--marca-primario);
    --bs-btn-hover-bg: var(--marca-primario-hover);
    --bs-btn-hover-border-color: var(--marca-primario-hover);
    --bs-btn-active-bg: var(--marca-primario-activo);
    --bs-btn-active-border-color: var(--marca-primario-activo);
    --bs-btn-disabled-bg: var(--marca-primario);
    --bs-btn-disabled-border-color: var(--marca-primario);
}

.btn-outline-primary {
    --bs-btn-color: var(--marca-primario);
    --bs-btn-border-color: var(--marca-primario);
    --bs-btn-hover-bg: var(--marca-primario);
    --bs-btn-hover-border-color: var(--marca-primario);
}

.btn-label-primary {
    color: var(--marca-primario) !important;
    background-color: var(--marca-primario-lavado) !important;
}

.btn-secondary {
    --bs-btn-bg: var(--marca-slate);
    --bs-btn-border-color: var(--marca-slate);
    --bs-btn-hover-bg: var(--marca-slate-hover);
    --bs-btn-hover-border-color: var(--marca-slate-hover);
}

/* La acción principal de la pantalla: cobrar, guardar, transmitir.
   UNA por pantalla. Si todo es naranja, nada lo es.

   Se define sobre las custom properties de botón de Bootstrap y NO con
   !important: así una utilidad puntual todavía puede pisarlo sin pelear.

   En SAV Portable --marca-accion es el mismo teal que el primario, así que
   esta clase se ve igual que .btn-primary y no hay que ramificar nada. */
.btn-accion {
    --bs-btn-color: var(--marca-accion-texto);
    --bs-btn-bg: var(--marca-accion);
    --bs-btn-border-color: var(--marca-accion);
    --bs-btn-hover-color: var(--marca-accion-texto);
    --bs-btn-hover-bg: var(--marca-accion-hover);
    --bs-btn-hover-border-color: var(--marca-accion-hover);
    --bs-btn-active-color: var(--marca-accion-texto);
    --bs-btn-active-bg: var(--marca-accion-activo);
    --bs-btn-active-border-color: var(--marca-accion-activo);
    --bs-btn-disabled-color: var(--marca-accion-texto);
    --bs-btn-disabled-bg: var(--marca-accion);
    --bs-btn-disabled-border-color: var(--marca-accion);
    --bs-btn-focus-shadow-rgb: var(--marca-accion-rgb);
}

/* ---------- Utilidades de color ---------- */

.text-primary   { color: var(--marca-primario) !important; }
.bg-primary     { background-color: var(--marca-primario) !important; }
.border-primary { border-color: var(--marca-primario) !important; }
.text-secondary { color: var(--marca-slate) !important; }
.bg-secondary   { background-color: var(--marca-slate) !important; }

/* ---------- Menú lateral ---------- */

.menu-vertical,
.menu-vertical .menu-inner > .menu-item.active > .menu-link {
    --bs-primary: var(--marca-primario);
}

.menu-vertical .menu-item.active > .menu-link,
.menu-vertical .menu-item.active > .menu-link i,
.menu-vertical .menu-item.active > .menu-link div {
    color: #fff !important;
}

.menu-vertical .menu-inner > .menu-item.active:before {
    background: var(--marca-primario) !important;
}

.menu-vertical .menu-inner > .menu-item.active > .menu-link {
    background: linear-gradient(72.47deg,
                var(--marca-primario) 22.16%,
                rgba(var(--marca-primario-rgb), 0.7) 76.47%) !important;
    box-shadow: 0px 2px 6px 0px rgba(var(--marca-primario-rgb), 0.48) !important;
}

.menu-vertical .menu-item .menu-icon {
    color: var(--marca-slate) !important;
}

/* ---------- Formularios ---------- */

.form-check-input:checked {
    background-color: var(--marca-primario) !important;
    border-color: var(--marca-primario) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--marca-primario) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--marca-primario-rgb), 0.25) !important;
}

/* ---------- Barra superior ---------- */

.layout-navbar .navbar-nav .nav-link:hover,
.layout-navbar .navbar-nav .nav-link:focus {
    color: var(--marca-primario) !important;
}

.layout-navbar .navbar-nav .nav-link i {
    color: var(--marca-slate);
}

/* ---------- Contenido ---------- */

.progress-bar {
    background-color: var(--marca-primario) !important;
}

.card-title {
    color: var(--marca-slate) !important;
    font-weight: 600;
}

a         { color: var(--marca-primario); }
a:hover   { color: var(--marca-primario-hover); }

h1, h2, h3, h4, h5, h6 { color: var(--marca-slate); }

/* ---------- Marca y portada ---------- */

.app-brand .text-primary {
    color: var(--marca-primario) !important;
}

.landing-hero {
    background: linear-gradient(135deg,
                var(--marca-fondo) 0%,
                var(--marca-fondo-degradado) 100%);
}

.bg-footer-theme {
    background-color: var(--marca-slate) !important;
    color: #fff !important;
}

.bg-footer-theme .footer-link,
.bg-footer-theme .footer-text {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ---------- Autenticación ---------- */

.auth-inner .card {
    border-top: 5px solid var(--marca-primario);
}

.auth-inner .app-brand .text-primary {
    color: var(--marca-primario) !important;
}

/* Listas de autocompletado que FLOTAN sobre el formulario (proveedor, concepto,
   producto). El tema pone --bs-list-group-bg: transparent, así que un
   .list-group suelto deja ver lo que hay debajo: en compras se leía «Bodega» y
   «1 · Principal» a través de los nombres de los proveedores. El fondo lo pone
   el contenedor, no cada ítem, y sale de la variable del tema para que el modo
   oscuro siga funcionando. */
.lista-flotante {
    position: absolute;
    z-index: 1050;
    max-height: 14rem;
    overflow-y: auto;
    background: var(--bs-dropdown-bg, var(--bs-paper-bg, var(--bs-body-bg)));
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    box-shadow: 0 .25rem .875rem rgba(0, 0, 0, .12);
}

.lista-flotante .list-group-item {
    border-left: 0;
    border-right: 0;
    background: transparent;
}

.lista-flotante .list-group-item:first-child { border-top: 0; }
.lista-flotante .list-group-item:last-child  { border-bottom: 0; }