/*!
 * This file is part of FacturaScripts
 * Copyright (C) 2013-2025 Carlos Garcia Gomez <carlos@facturascripts.com>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/* bootstrap customizations */
.navbar .dropdown-toggle::after {
    display: none;
}
.nav-pills-sm.nav > li > a,
.nav-pills-sm a {
    padding-top: 3px;
    padding-bottom: 3px;
}
.table th {
    border-top: none;
}
.clickable, .clickableRow:hover, .clickableListRow:hover {
    cursor: pointer;
}
.cancelClickable {
    cursor: default;
}
.custom-checkbox-control {
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    min-height: 1.2rem;
    padding-left: 1.5rem;
    margin-right: 1rem;
}
.dropdown-menu {
    position: absolute !important;
}
.dropdown-submenu {
    position: relative
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: 0;
    border-radius: 0.25rem;
}
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}
.dropdown-submenu > a::after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-left-width: 0.3em;
    border-left-color: inherit;
    margin-right: -0.6em;
    margin-top: 0.6em;
}
.dropdown-submenu.pull-left {
    float: none
}
.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
/* pace customizations */
.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}
.pace-inactive {
    display: none;
}
.pace .pace-progress {
    background: #1e90ff;
    background: linear-gradient(90deg, #1e90ff 0%, #00d4ff 50%, #1e90ff 100%);
    box-shadow: 0 0 12px rgba(30, 144, 255, .85), 0 0 4px rgba(255, 255, 255, .9);
    position: fixed;
    z-index: 99999;
    top: 0;
    right: 100%;
    width: 100%;
    height: 3px;
}
.pointer {
    cursor: pointer;
}
input[required].form-control:not(:read-only) {
    background-image: linear-gradient(to bottom, rgba(100, 160, 220, 0.18), rgba(100, 160, 220, 0.08));
}
textarea[required].form-control:not(:read-only) {
    background-image: linear-gradient(to bottom, rgba(100, 160, 220, 0.18), rgba(100, 160, 220, 0.08));
}
/* end pace customizations */

/* ============================================================
 * VANTARIEL THEME (gris #6c757d / #545b62 / dark mode)
 * Sustituye el azul corporativo de FacturaScripts por el sistema
 * de grises usado en el plugin PuntoDeVenta y en la app de
 * Electron de Vantariel. Mantiene la legibilidad de los estados
 * (success / danger / warning / info) y de los badges/alerts.
 * ============================================================ */

:root {
    --vt-gray:        #6c757d; /* navbar y acentos principales */
    --vt-gray-dark:   #545b62; /* hover, active, marcos electron */
    --vt-gray-darker: #3d4148; /* bordes, separadores en dark */
    --vt-bg:          #292c31; /* fondo general dark (casi = bg-elev: uniforme, sin franjas) */
    --vt-bg-elev:     #2a2e35; /* tarjetas, modales, dropdowns  */
    --vt-bg-elev-2:   #34383f; /* inputs, hover de filas         */
    --vt-input-bg:    #2a3340; /* inputs: negro azulado */
    --vt-text:        #e6e8eb; /* texto principal               */
    --vt-text-muted:  #adb5bd; /* texto secundario              */
    --vt-border:      #3d4148; /* bordes generales              */
    --vt-link:        #9ec5fe; /* enlaces sobre dark            */

    /* === Acento azul Vantariel (tomado del login VantarielLogin) === */
    --vt-accent:        #34495e; /* azul oscuro base (inputs login)   */
    --vt-accent-2:      #3d566e; /* hover/focus mas claro             */
    --vt-accent-bright: #3498db; /* azul vivo: foco, badges, links    */
    --vt-accent-soft:   rgba(52, 152, 219, .14); /* fondos suaves     */
}

/* ---------- Navbar gris (sustituto de bg-primary) ---------- */
.bg-vantariel {
    background-color: var(--vt-gray) !important;
}
.navbar.bg-vantariel {
    /* Sin padding vertical: los nav-link definen la altura y el
       hover/active llena la barra de borde superior a inferior.
       padding-right: 0 para que los iconos derechos (search/help/user)
       toquen el borde derecho de la barra sin franja gris. */
    padding: 0 0 0 .75rem !important;
    min-height: 3.25rem;
    /* VANTARIEL: lineas divisorias de la barra. "strong" marca los
       extremos del grupo central (tras el brand y antes de los iconos
       derechos); "soft" separa los botones centrales entre si (se usa
       como sombra difusa, por eso la opacidad es mayor). */
    --vt-nav-sep-strong: rgba(0, 0, 0, .35);
    --vt-nav-sep-soft: rgba(0, 0, 0, .30);
    /* VANTARIEL: Liquid Glass iOS 26 via ::before pseudo-element.
       NO poner backdrop-filter aqui: el navbar tiene position:sticky
       (sticky-top) que crea un stacking context. Si el navbar mismo
       tiene backdrop-filter, los dropdown-menu hijos no pueden filtrar
       el contenido de la pagina detras de ellos — filtran el navbar.
       El ::before maneja el acrylic sin bloquear los dropdowns.
       NO poner position:relative aqui: sobreescribe el position:sticky
       del sticky-top de Bootstrap y la barra deja de ser fija. */
    background-color: transparent !important;
}
.navbar.bg-vantariel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    pointer-events: none;
    /* VANTARIEL: Liquid Glass iOS 26 - configuracion dinamica via vt-appearance.js.
       Variables con fallback a los valores por defecto. */
    background-color: var(--vt-app-active-navbar-bg, rgba(84, 91, 98, .55));
    backdrop-filter: var(--vt-app-active-backdrop, blur(20px) saturate(180%) brightness(1.1));
    -webkit-backdrop-filter: var(--vt-app-active-backdrop, blur(20px) saturate(180%) brightness(1.1));
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25),
                inset 1px 1px 0 rgba(255, 255, 255, .08),
                inset 0 0 8px rgba(255, 255, 255, .03);
    /* Bordes: claro en modo oscuro (como dropdowns), en los 4 lados
       para que la barra flotante quede completamente enmarcada. */
    border-top: 1px solid rgba(255, 255, 255, .10);
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    border-left: 1px solid rgba(255, 255, 255, .10);
    border-right: 1px solid rgba(255, 255, 255, .10);
}
/* Todo el contenido del navbar debe estar sobre el ::before */
.navbar.bg-vantariel > * {
    position: relative;
    z-index: 1;
}
/* nav-item ocupa toda la altura del navbar para que el hover llegue
   hasta arriba (sin franja del color base) y hasta abajo. */
.navbar.bg-vantariel,
.navbar.bg-vantariel > .container,
.navbar.bg-vantariel > .container-fluid,
.navbar.bg-vantariel .navbar-collapse {
    align-items: stretch !important;
}
.navbar.bg-vantariel .navbar-collapse {
    /* Mantener layout horizontal con ml-auto funcional */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    /* min-width:0 propaga la limitacion de ancho hacia el ul interno */
    min-width: 0 !important;
}
/* Las dos uls de menús: la primera con flex-grow para que ml-auto
   de la segunda empuje los iconos (búsqueda/ayuda/usuario) a la derecha.
   `overflow: visible` para que los .dropdown-menu de los items se vean
   completos. La gestion de items que no caben es 100% por JS (priority
   nav). NO usar overflow:clip aqui — recorta los dropdowns. */
.navbar.bg-vantariel .navbar-collapse > .navbar-nav:first-child {
    flex: 1 1 0 !important;     /* flex-basis 0 fuerza al ul a ceder */
    min-width: 0 !important;
    flex-wrap: nowrap;
    overflow: visible;
    justify-content: space-evenly;   /* misma separacion entre items y a ambos lados */
}
/* El boton ▼ se posiciona junto al GRUPO IZQUIERDO de items principales
   (no junto a los iconos derechos). Cuando esta visible, el gap principal
   queda DESPUES del ▼, separandolo de search/help/user. */
.navbar.bg-vantariel .vt-bottom-icons {
    margin-left: 1rem !important;
}
.navbar.bg-vantariel .vt-overflow-wrap.vt-show {
    margin-left: 0 !important;
}
.navbar.bg-vantariel .vt-overflow-wrap.vt-show + .vt-bottom-icons {
    margin-left: 0 !important;
}
/* Los items del menu principal NO encogen — el JS de priority nav
   oculta (display:none) los que no caben y los clona en el dropdown ▼. */
.navbar.bg-vantariel .navbar-collapse > .navbar-nav:first-child > .nav-item {
    flex: 0 0 auto;
}
/* Items ocultados por priority nav (su contenido se clona en el overflow). */
.navbar.bg-vantariel .vt-hidden-item {
    display: none !important;
}
/* VANTARIEL: estado "icono-solo" — aplicado por:
   (a) media queries automaticos por tamaño de pantalla (abajo), o
   (b) JS de priority nav cuando aun no cabe a un tamaño concreto. */
.navbar.bg-vantariel .vt-icon-only .vt-menu-text,
.navbar.bg-vantariel .vt-force-icon-only .vt-menu-text {
    display: none !important;
}
.navbar.bg-vantariel .vt-icon-only > .nav-link,
.navbar.bg-vantariel .vt-force-icon-only > .nav-link {
    padding-left: .65rem !important;
    padding-right: .65rem !important;
}
.navbar.bg-vantariel .vt-icon-only > .nav-link::after,
.navbar.bg-vantariel .vt-force-icon-only > .nav-link::after {
    display: none !important;
}
/* Iconos del menu principal: tamaño consistente. 2px MAS de separacion
   entre el icono y el texto (peticion del usuario). */
.navbar.bg-vantariel .navbar-nav .vt-menu-icon {
    font-size: 1rem;
    vertical-align: middle;
    margin-right: 2px;
}
/* En el dropdown ▼ los items clonados llevan icono + texto SIEMPRE */
.navbar.bg-vantariel .vt-overflow-menu .vt-menu-icon {
    margin-right: .25rem;
}
.navbar.bg-vantariel .vt-overflow-menu .dropdown-submenu > .dropdown-item .vt-menu-text,
.navbar.bg-vantariel .vt-overflow-menu .dropdown-submenu .vt-menu-text {
    display: inline !important;
}

/* ============================================================
 * VANTARIEL: BREAKPOINTS RESPONSIVE de la barra principal.
 * - <=650px: TODOS los items principales colapsan a SOLO ICONO
 *   (texto oculto, caret oculto, padding reducido).
 * - >=651px: items con icono + texto. El JS solo aplica ▼ si
 *   con texto completo no cabe.
 * ============================================================ */
@media (max-width: 650px) {
    .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item > .nav-link .vt-menu-text {
        display: none !important;
    }
    .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item > .nav-link {
        padding-left: .55rem !important;
        padding-right: .55rem !important;
    }
    .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item > .nav-link.dropdown-toggle::after {
        display: none !important;
    }
    .navbar.bg-vantariel #vtNavbarMainItems .vt-menu-icon {
        font-size: 1.05rem;
    }
}
/* Pantallas muy pequeñas: padding aun mas compacto. */
@media (max-width: 575.98px) {
    .navbar.bg-vantariel {
        padding-left: .35rem !important;
        padding-right: .35rem !important;
    }
    .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item > .nav-link {
        padding-left: .45rem !important;
        padding-right: .45rem !important;
    }
}
.navbar.bg-vantariel .navbar-collapse > .navbar-nav.ml-auto,
.navbar.bg-vantariel .navbar-collapse > .ml-auto,
.navbar.bg-vantariel .vt-bottom-icons,
.navbar.bg-vantariel .vt-overflow-wrap {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    /* SIN position:relative ni z-index — eso creaba un stacking context
       que tapaba los .dropdown-menu de los items del menu izquierdo. */
}
/* Iconos derechos: lo mas compactos posible.
   IMPORTANTE: mismo fondo translucido que el navbar-brand (lado izquierdo).
   NUNCA omitir el background-color aqui. align-self: stretch + min-height
   para que el fondo llene toda la altura de la barra como el navbar-brand. */
.navbar.bg-vantariel .vt-bottom-icons {
    margin-left: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    align-self: stretch !important;
    min-height: 56px;
    /* VANTARIEL: linea solida + sombra proyectada hacia la izquierda
       del grupo de iconos derechos (simetrica a la del navbar-brand). */
    border-left: 1px solid var(--vt-nav-sep-strong, rgba(0, 0, 0, .35));
    box-shadow: -6px 0 9px -4px var(--vt-nav-sep-soft, rgba(0, 0, 0, .30));
    /* SOLIDO por defecto, translucido si extremesTransparency esta activado.
       --vt-app-active-right-bg es seteado por vt-appearance.js.
       Fallback transparent (igual que el lateral izquierdo). */
    background-color: var(--vt-app-active-right-bg, transparent) !important;
}
/* Padding-x escalable: en pantallas anchas los botones se expanden
   un poco aprovechando el espacio disponible; minimo .55rem, maximo 1.4rem. */
.navbar.bg-vantariel .vt-bottom-icons > .nav-item > .nav-link {
    padding: .45rem clamp(.55rem, 1.6vw, 1.4rem) !important;
}
/* El wrap del ▼ esta oculto por defecto (display:none) y el JS lo
   muestra solo cuando hay items que no caben. Asi cuando todo cabe
   no aparece ningun boton ▼. */
.navbar.bg-vantariel .vt-overflow-wrap {
    display: none;
    flex-direction: row;
}
.navbar.bg-vantariel .vt-overflow-wrap.vt-show {
    display: flex !important;
}
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item {
    width: 2.6rem;
    position: relative;
}
/* Los .dropdown-menu del navbar SIEMPRE por encima de cualquier
   sticky/elemento del navbar (Bootstrap por defecto les pone z-index
   1000, pero el sticky-top puede competir). */
.navbar.bg-vantariel .dropdown-menu {
    z-index: 1050;
}

/* ============================================================
 * VANTARIEL: PRIORITY NAVIGATION -- dropdown "Mas" para items
 * que no caben en la barra principal. Aparece justo antes de los
 * iconos derechos (search/help/user) cuando el JS detecta overflow.
 * ============================================================ */
.navbar.bg-vantariel .vt-overflow-item > .nav-link i {
    font-size: 1.05rem;
}
.navbar.bg-vantariel .vt-overflow-menu {
    min-width: 240px;
    max-width: 320px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    /* La posicion horizontal se ajusta dinamicamente por JS
       (vt-priority-nav.js) para no salirse de pantalla. */
}
/* Scrollbar personalizada del dropdown overflow:
   - track: mismo gris que el FONDO del menu (var(--vt-gray-dark))
   - thumb: gris MAS oscuro para diferenciarlo claramente del track. */
.navbar.bg-vantariel .vt-overflow-menu::-webkit-scrollbar {
    width: 10px;
}
.navbar.bg-vantariel .vt-overflow-menu::-webkit-scrollbar-track {
    background: var(--vt-gray-dark);
    border-radius: 6px;
}
.navbar.bg-vantariel .vt-overflow-menu::-webkit-scrollbar-thumb {
    background: #1a1d20;
    border-radius: 6px;
    border: 2px solid var(--vt-gray-dark);
}
.navbar.bg-vantariel .vt-overflow-menu::-webkit-scrollbar-thumb:hover {
    background: #000000;
}
.navbar.bg-vantariel .vt-overflow-menu {
    scrollbar-color: #1a1d20 var(--vt-gray-dark);
    scrollbar-width: thin;
}
/* Header de cada grupo dentro del overflow (titulo del menu padre).
   Estilo igual a los items del menu principal: mismo padding, icono
   grande y prominente, color teal. */
.navbar.bg-vantariel .vt-overflow-menu .vt-overflow-header {
    color: var(--vt-teal, #2cd4b6);
    font-weight: 700;
    font-size: 1rem;
    text-transform: none;
    padding: .55rem 1rem .5rem;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: .55rem;
}
.navbar.bg-vantariel .vt-overflow-menu .vt-overflow-header i {
    margin-right: 0;
    opacity: 1;
    font-size: 1.05rem;
    width: 1.25rem;
    text-align: center;
    color: var(--vt-teal, #2cd4b6);
}
.navbar.bg-vantariel .vt-overflow-menu .dropdown-divider:last-child {
    display: none; /* sin divider final */
}
.navbar.bg-vantariel .navbar-nav {
    align-items: stretch;
    height: 100%;
    /* Anular el pt-1 de Bootstrap que dejaba un borde superior
       donde el hover no llegaba. */
    padding-top: 0 !important;
    margin: 0 !important;
}
.navbar.bg-vantariel .navbar-nav > .nav-item {
    display: flex;
    align-items: stretch;
    height: 100%;
}
.navbar.bg-vantariel .navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start;
    margin: 0;
    padding: 0 .9rem 0 .25rem;
    /* No usar stretch ni height: 100% — eso desalineaba el logo
       arriba. Dejamos altura autom\u00e1tica con align-items: center
       para que img + texto queden centrados verticalmente. */
    align-self: center !important;
    line-height: 1;
}
/* La imagen del logo trae .align-top de Bootstrap; en flex-stretch
   eso desalinea el logo respecto a los men\u00fas. Forzamos centrado. */
.navbar.bg-vantariel .navbar-brand img,
.navbar.bg-vantariel .navbar-brand .align-top {
    vertical-align: middle !important;
    align-self: center !important;
    margin: 0 !important;
    display: inline-block !important;
}
.navbar.bg-vantariel .navbar-brand span {
    align-self: center !important;
    margin-left: .5rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.navbar.bg-vantariel .navbar-nav .nav-link {
    display: flex !important;
    align-items: center;
    height: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: .9rem;
    padding-right: .9rem;
    /* Indicador inferior animado tipo "underline" */
    position: relative;
    /* Hover inmediato: sin retraso, transición minima para evitar parpadeos. */
    transition: background-color 0s, color 0s;
}
.navbar.bg-vantariel .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    height: 2px;
    background-color: #fff;
    opacity: 0;
    transition: left .25s ease, right .25s ease, opacity .25s ease;
}
.navbar.bg-vantariel .navbar-nav > .nav-item:hover > .nav-link::after,
.navbar.bg-vantariel .navbar-nav > .nav-item.show > .nav-link::after {
    left: 12%;
    right: 12%;
    opacity: 1;
}
.navbar.bg-vantariel .navbar-nav > .nav-item.active > .nav-link::after {
    /* Sin línea inferior cuando la pestaña está seleccionada/activa. */
    opacity: 0 !important;
    left: 50%;
    right: 50%;
}
.navbar.bg-vantariel .navbar-nav > .nav-item:hover > .nav-link,
.navbar.bg-vantariel .navbar-nav .nav-item .nav-link:focus,
.navbar.bg-vantariel .navbar-nav > .nav-item.show > .nav-link,
.navbar.bg-vantariel .navbar-nav > .nav-item.active > .nav-link {
    /* Sin cambio de fondo: el hover se indica con icon-teal +
       subrayado blanco (ver bloque al final del archivo). */
    background-color: transparent;
    color: #fff;
}
/* DESACTIVADO: hover band con ::before. Sustituido por el efecto
   icon-teal + underline blanco (mas ligero, sin flicker en Android). */
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item {
    position: relative;
}
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item > .nav-link {
    position: relative;
    z-index: 2;
    background-color: transparent !important;
}
/* VANTARIEL: ::before = "celda" del boton. El JS (vt-priority-nav.js)
   calcula --vt-hover-l/--vt-hover-r = distancia hasta la mitad del gap
   con el vecino (o hasta el brand/iconos derechos en los extremos).
   Asi la celda queda delimitada por las sombras separadoras y el
   hover/active la cubre de lado a lado. */
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item::before {
    content: '';
    position: absolute;
    /* Inset vertical minimo + esquinas suaves: el efecto hover/active
       llena casi toda la altura con un ligero redondeo.
       +.5px laterales: el fondo retrocede medio px a cada lado para
       no solapar la linea separadora (centrada en la mitad del gap). */
    top: 2px; bottom: 2px;
    left: calc(var(--vt-hover-l, .6rem) * -1 + .5px);
    right: calc(var(--vt-hover-r, .6rem) * -1 + .5px);
    background-color: transparent;
    z-index: 1;
    pointer-events: none;
    border-radius: 5px;
    /* SIN transition: animar el fondo sobre el ::before extendido
       provocaba flicker en Android WebView al abrir dropdowns. */
}
/* VANTARIEL: ::after = separador SUAVE entre botones centrales —
   linea solida cortada ~5px antes de cada extremo vertical de la
   barra (--vt-sep-line=none en el primer item visible: ahi ya esta
   la sombra del brand; lo setea vt-priority-nav.js). */
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item::after {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    /* -.5px: la linea queda centrada en la mitad del gap; los fondos
       de ambas celdas vecinas retroceden .5px y nunca la solapan. */
    left: calc(var(--vt-hover-l, .6rem) * -1 - .5px);
    width: 0;
    z-index: 1;
    pointer-events: none;
    border-left: var(--vt-sep-line, 1px solid var(--vt-nav-sep-soft, rgba(0, 0, 0, .30)));
}
/* Underline full-width (modos por defecto/teal/underline): el borde
   inferior de la celda se marca en hover y dropdown abierto. */
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover::before,
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show::before {
    border-bottom: 2px solid var(--vt-navbar-text, #fff);
}
/* Activo: SIN marca — el usuario prefiere que el boton en uso se vea
   igual que el resto (la marca desajustaba el diseño). No se pone
   fondo propio al .active; el hover sobre el sigue funcionando
   porque la celda ::before responde a :hover igual. */
/* Modo hover "bg" / "dropdown": la celda se rellena con fondo
   translucido en vez de underline. */
html[data-vt-hover="bg"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover::before,
html[data-vt-hover="bg"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show::before,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover::before,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show::before {
    background-color: rgba(255, 255, 255, .15);
    border-bottom: none;
}
/* Modo hover "none": sin fondo ni underline en la celda (solo la
   sombra separadora estructural permanece). El activo SI se sigue
   marcando: el usuario necesita ver que boton esta en uso. */
html[data-vt-hover="none"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover::before,
html[data-vt-hover="none"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show::before {
    border-bottom: none;
    background-color: transparent;
}
/* Cuando el item esta activo/hover, el .nav-link no debe pintar su
   propio fondo (lo hace el ::before). Anulamos las reglas de mas arriba. */
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link,
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link,
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link {
    background-color: transparent !important;
}
/* En modo solo-icono no extender (los items son demasiado pequenos) */
.navbar.bg-vantariel #vtNavbarMainItems.vt-only-overflow > li.nav-item::before {
    display: none;
}
/* Asegurar contraste blanco en todos los enlaces del navbar.
   VANTARIEL: color de texto/iconos configurable via --vt-navbar-text. */
.navbar.bg-vantariel .navbar-nav .nav-link,
.navbar.bg-vantariel .navbar-brand {
    color: var(--vt-navbar-text, rgba(255, 255, 255, .92));
}
.navbar.bg-vantariel .navbar-brand span {
    color: var(--vt-navbar-text, #ffffff) !important;
    font-weight: 800 !important;
    letter-spacing: .35px;
    text-shadow: none !important;
}
.navbar.bg-vantariel .navbar-brand .navbar-brand-logo {
    height: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-height: 38px;
    object-fit: contain;
}
.navbar.bg-vantariel .navbar-nav .nav-link:hover {
    color: #fff;
}

/* ---------- Dropdowns del navbar ---------- */
/* VANTARIEL: Liquid Glass iOS 26 - mismo tapiz que la barra principal.
   Los dropdowns son hijos del navbar en el DOM; como el navbar tiene
   position:sticky (sticky-top) que crea un stacking context, el
   backdrop-filter del navbar ya no bloquea el de los dropdowns porque
   lo movimos al ::before. Ahora los dropdowns pueden filtrar el
 contenido de la pagina detras de ellos. */
.navbar.bg-vantariel .dropdown-menu {
    background-color: var(--vt-app-active-dropdown-bg, var(--vt-app-active-navbar-bg, rgba(84, 91, 98, .55))) !important;
    backdrop-filter: var(--vt-app-active-backdrop, blur(20px) saturate(180%) brightness(1.1));
    -webkit-backdrop-filter: var(--vt-app-active-backdrop, blur(20px) saturate(180%) brightness(1.1));
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: .5rem !important;
    padding: .4rem !important;
    margin-top: 0;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25),
                inset 1px 1px 0 rgba(255, 255, 255, .08),
                inset 0 0 8px rgba(255, 255, 255, .03);
    animation: vt-dropdown-in .18s ease-out;
}
@keyframes vt-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.navbar.bg-vantariel .dropdown-menu .dropdown-item {
    color: rgba(255, 255, 255, .92);
    border-radius: .375rem;
    transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
}
/* Submenú: hover usa el GRIS de la barra principal (más claro) */
.navbar.bg-vantariel .dropdown-menu .dropdown-item:hover,
.navbar.bg-vantariel .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, .15);
    color: #fff;
    padding-left: 1.75rem;
}
.navbar.bg-vantariel .dropdown-menu .dropdown-item.active,
.navbar.bg-vantariel .dropdown-menu .dropdown-item:active {
    /* VANTARIEL: color de fondo configurable via vt-appearance.js */
    background-color: var(--vt-app-active-dropdown-item-bg, rgba(255, 255, 255, .22)) !important;
    color: #fff;
}
.navbar.bg-vantariel .dropdown-divider {
    border-top-color: rgba(255, 255, 255, .12);
}
.navbar.bg-vantariel .dropdown-submenu > a::after {
    border-left-color: rgba(255, 255, 255, .8);
}

/* ---------- Body / fondo general (dark) ---------- */
body {
    background-color: var(--vt-bg);
    color: var(--vt-text);
}
a {
    color: var(--vt-link);
}
a:hover {
    color: #c9dcff;
}
hr {
    border-top-color: var(--vt-border);
}

/* ---------- Cards / paneles ---------- */
.card {
    background-color: var(--vt-bg-elev);
    border-color: var(--vt-border);
    color: var(--vt-text);
}
.card-header,
.card-footer {
    background-color: var(--vt-bg-elev);
    border-color: var(--vt-border);
}
.card-header.bg-light,
.card-footer.bg-light,
.bg-light {
    background-color: var(--vt-bg-elev-2) !important;
    color: var(--vt-text);
}
/* VANTARIEL: body.bg-light debe usar el MISMO fondo oscuro que body sin
 * bg-light. Sin esta regla, .bg-light (con !important) pone el body en
 * #34383f (gris oscuro) mientras que body sin bg-light usa #1f2329 (casi
 * negro). Al navegar con PJAX entre ListController (sin bg-light) y
 * PanelController (con bg-light), el fondo cambia de color. Esta regla
 * tiene mayor especificidad (body.bg-light = 0,0,1,1) que .bg-light
 * (0,0,1,0) y asegura que el body SIEMPRE use var(--vt-bg). */
body.bg-light {
    background-color: var(--vt-bg) !important;
}
.bg-white {
    background-color: var(--vt-bg-elev) !important;
    color: var(--vt-text);
}
.text-muted {
    color: var(--vt-text-muted) !important;
}
.text-dark {
    color: var(--vt-text) !important;
}

/* ---------- Tablas ---------- */
.table {
    color: var(--vt-text);
    background-color: transparent;
}
/* VANTARIEL: la fila de titulos de los listados usa el gris elevado
 * sutil (--vt-bg-elev-2, #34383f) — el equivalente oscuro del #f8f9fa
 * que usa el modo claro sobre fondo blanco. */
.table thead th {
    background-color: var(--vt-bg-elev-2);
    color: #fff;
    border-color: var(--vt-gray-dark);
}
html body .table thead tr,
html body .table thead th {
    background-color: var(--vt-bg-elev-2) !important;
    color: #ffffff !important;
    border-color: var(--vt-gray) !important;
}
html body .table thead a,
html body .table thead a:hover,
html body .table thead a:focus,
html body .table thead th a {
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    padding: 1px 6px !important;
    border-radius: 6px !important;
    transition: border-color .15s ease, background-color .15s ease;
}
html body .table thead a:hover,
html body .table thead th a:hover {
    border-color: var(--vt-accent-bright) !important;
    background-color: rgba(52, 152, 219, .12) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, .025);
}
/* Hover visible en TODAS las filas de tabla (no solo .table-hover)
 * con efecto de ATENUACIÓN/ACLAREO por overlay blanco translucido
 * (NO gris oscuro). Excluye explícitamente el navbar.
 */
.table tbody tr {
    transition: background-color .15s ease, box-shadow .15s ease, filter .15s ease;
}
.table tbody tr:hover,
.table-hover tbody tr:hover,
table.table tbody tr:hover {
    background-color: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 0 rgba(255, 255, 255, .35) !important;
    cursor: pointer;
}
.table tbody tr:hover > td,
.table tbody tr:hover > th {
    background-color: transparent !important;
    color: inherit !important;
}
/* VANTARIEL: las reglas reales de hover para .row-status-colored estan
 * mas abajo (sistema B con --vt-row-bg + linear-gradient en td/th).
 * Aqui solo dejamos la transicion para que el efecto sea suave. */
table tbody tr.row-status-colored {
    transition: background-color .12s ease, box-shadow .12s ease;
}
.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--vt-border);
}
.table td, .table th {
    border-top-color: var(--vt-border);
}

/* ---------- Inputs y forms ---------- */
/* Forzamos el fondo oscuro para todos los selectores típicos de
   FacturaScripts (Bootstrap, custom-select, selects nativos, etc.) */
.form-control,
.custom-select,
.input-group-text,
select,
select.form-control,
textarea,
textarea.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
/* Cobertura adicional de widgets de FacturaScripts (Panel de Control,
   EditSettings, formularios sin clase .form-control, etc.) */
form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]):not([type="color"]),
form select,
form textarea {
    background-color: var(--vt-input-bg, var(--vt-bg-elev-2)) !important;
    color: var(--vt-text) !important;
    border: 1px solid var(--vt-border) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
}
select, select.form-control, .custom-select {
    appearance: none;
}
.input-group-text {
    background-color: var(--vt-bg-elev) !important;
    color: var(--vt-text-muted) !important;
}
/* Foco visible: marco gris vantariel + halo gris para que el usuario
   sepa qué input está seleccionado. */
.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus,
input:focus,
form input:focus,
form select:focus,
form textarea:focus {
    background-color: var(--vt-input-bg, var(--vt-bg-elev-2)) !important;
    color: var(--vt-text) !important;
    border-color: var(--vt-gray) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 .2rem rgba(108, 117, 125, .45),
                inset 0 0 0 1px var(--vt-gray) !important;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--vt-text-muted) !important;
    opacity: .7;
}
.form-control:disabled,
.form-control[readonly],
select:disabled,
input:disabled,
textarea:disabled,
input[readonly], textarea[readonly] {
    background-color: rgba(255, 255, 255, .04) !important;
    color: var(--vt-text-muted) !important;
}
/* Reescribimos la flecha del custom-select y select nativo en blanco */
.custom-select,
select.form-control,
select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3E%3Cpath fill='%23e6e8eb' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 8px 10px !important;
    padding-right: 2rem !important;
}
/* Las opciones del select nativo siguen el tema (Chrome/Edge) */
select option,
select optgroup {
    background-color: var(--vt-bg-elev) !important;
    color: var(--vt-text) !important;
}
/* Mantener el resaltado azul en campos requeridos (negro azulado en dark) */
input[required].form-control:not(:read-only),
textarea[required].form-control:not(:read-only) {
    background-image: linear-gradient(to bottom, rgba(100, 160, 220, .18), rgba(100, 160, 220, .08)) !important;
}
select[required].form-control,
select[required].custom-select,
select[required] {
    background-image:
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3E%3Cpath fill='%23e6e8eb' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"),
        linear-gradient(to bottom, rgba(100, 160, 220, .18), rgba(100, 160, 220, .08)) !important;
    background-repeat: no-repeat, repeat !important;
    background-position: right .75rem center, 0 0 !important;
    background-size: 8px 10px, auto !important;
}
.form-control[type="file"] {
    color: var(--vt-text) !important;
}
.custom-file-label {
    background-color: var(--vt-bg-elev-2);
    color: var(--vt-text);
    border-color: var(--vt-border);
}
.custom-file-label::after {
    background-color: var(--vt-gray);
    color: #fff;
}
label,
.col-form-label {
    color: var(--vt-text);
}
.form-text {
    color: var(--vt-text-muted);
}
/* Checkboxes y radios */
.custom-control-label::before {
    background-color: var(--vt-bg-elev-2);
    border-color: var(--vt-border);
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--vt-gray);
    border-color: var(--vt-gray-dark);
}
/* Marcar la fila completa cuando hay un input enfocado dentro */
tr:focus-within > td,
tr:focus-within > th,
.form-row:focus-within,
.form-group:focus-within > label {
    color: #fff;
}
.form-group:focus-within > label {
    color: var(--vt-link);
}

/* ---------- Botones secundarios y por defecto ----------
 * VANTARIEL: patron "soft" iOS — fondo translucido gris + borde sutil +
 * texto claro, el mismo lenguaje que los botones de estado
 * (btn-info/success/danger usan rgba .18). Aplica a la fila superior
 * de botones (Opciones/Imprimir/refresh/etc.), toolbars de listados y
 * el boton de busqueda dentro de las pestañas. */
.btn-light,
.btn-default,
.btn-secondary,
.btn-outline-secondary,
.btn-outline-dark {
    background-color: rgba(108, 117, 125, .16);
    border-color: rgba(108, 117, 125, .38);
    color: var(--vt-text);
}
.btn-light:hover,
.btn-default:hover,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-secondary:hover,
.btn-outline-dark:hover {
    background-color: rgba(108, 117, 125, .32);
    border-color: rgba(108, 117, 125, .55);
    color: #fff;
}
/* Reasignar btn-primary al gris vantariel para coherencia con la marca */
.btn-primary {
    background-color: var(--vt-gray);
    border-color: var(--vt-gray-dark);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--vt-gray-dark);
    border-color: var(--vt-gray-darker);
    color: #fff;
}

/* ---------- Modales ---------- */
.modal-content {
    background-color: var(--vt-bg-elev);
    color: var(--vt-text);
    border: 1px solid var(--vt-border);
}
.modal-header,
.modal-footer {
    border-color: var(--vt-border);
}
.modal-header .close {
    color: var(--vt-text);
    text-shadow: none;
    opacity: .8;
}
.modal-header .close:hover {
    color: #fff;
    opacity: 1;
}

/* ---------- Listas y nav-pills (sidebars) ---------- */
.list-group-item {
    background-color: var(--vt-bg-elev);
    border-color: var(--vt-border);
    color: var(--vt-text);
    transition: background-color .15s ease, color .15s ease;
}
.list-group-item.active {
    background-color: var(--vt-gray);
    border-color: var(--vt-gray-dark);
    color: #fff;
}
/* Hover por ATENUACIÓN (overlay blanco) en lugar de gris oscuro */
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
}
.nav-pills .nav-link {
    color: var(--vt-text);
    transition: background-color .15s ease, color .15s ease;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--vt-gray);
    color: #fff;
}
.nav-pills .nav-link:hover {
    background-color: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
}

/* ---------- Tabs ---------- */
.nav-tabs {
    border-bottom-color: var(--vt-border);
}
.nav-tabs .nav-link {
    color: var(--vt-text-muted);
    border-color: transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.nav-tabs .nav-link:hover {
    border-color: transparent transparent var(--vt-border);
    background-color: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: var(--vt-bg-elev);
    border-color: var(--vt-border) var(--vt-border) var(--vt-bg-elev);
    color: var(--vt-text);
}

/* VANTARIEL: el contenido principal de listados (#mainTabsContent) y sus
 * tab-panes usan el fondo del BODY (no elevado). Asi la fila de botones,
 * la tira de pestañas, los huecos entre pestañas y card, y el area bajo
 * el listado comparten TODOS el mismo color, igual que en el tema claro
 * donde todo es #f8f9fa salvo el card blanco. Solo el .card interior
 * conserva el fondo elevado. */
#mainTabsContent,
#mainTabsContent > .tab-pane,
#mainTabsContent > .tab-pane.active {
    background-color: var(--vt-bg);
}

/* ---------- Paginación ---------- */
.page-link {
    background-color: var(--vt-bg-elev);
    border-color: var(--vt-border);
    color: var(--vt-text);
}
.page-link:hover {
    background-color: var(--vt-bg-elev-2);
    color: var(--vt-text);
    border-color: var(--vt-border);
}
.page-item.active .page-link {
    background-color: var(--vt-gray);
    border-color: var(--vt-gray-dark);
    color: #fff;
}
.page-item.disabled .page-link {
    background-color: var(--vt-bg-elev);
    color: var(--vt-text-muted);
    border-color: var(--vt-border);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
    background-color: var(--vt-bg-elev);
    color: var(--vt-text);
    border: 1px solid var(--vt-border);
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--vt-text-muted);
}

/* ---------- Estados (success/danger/warning/info) ----------
 * Sistema unificado: fondo semitransparente del color del estado
 * sobre el fondo oscuro, borde sutil del mismo color y TEXTO en
 * tono claro del mismo color (no blanco puro) para integración
 * suave con el modo oscuro. Aplica a alerts, badges, table-row
 * y bg-* helpers.
 */

/* Variables RGB de cada estado para reusar en alpha */
:root {
    --vt-success-rgb: 46, 204, 113;   /* verde más moderno */
    --vt-danger-rgb:  231, 76, 60;    /* rojo más moderno */
    --vt-warning-rgb: 241, 196, 15;   /* amarillo */
    --vt-info-rgb:    52, 152, 219;   /* azul info */
    --vt-success-fg:  #6fe39a;
    --vt-danger-fg:   #ff8a93;
    --vt-warning-fg:  #ffd966;
    --vt-info-fg:     #7ec8f0;
}

/* ----- Alerts ----- */
.alert {
    border: 1px solid transparent;
    border-radius: .5rem;
    backdrop-filter: blur(2px);
}
.alert-success {
    background-color: rgba(var(--vt-success-rgb), .12);
    border-color: rgba(var(--vt-success-rgb), .35);
    color: var(--vt-success-fg);
}
.alert-danger {
    background-color: rgba(var(--vt-danger-rgb), .12);
    border-color: rgba(var(--vt-danger-rgb), .35);
    color: var(--vt-danger-fg);
}
.alert-warning {
    background-color: rgba(var(--vt-warning-rgb), .12);
    border-color: rgba(var(--vt-warning-rgb), .35);
    color: var(--vt-warning-fg);
}
.alert-info {
    background-color: rgba(var(--vt-info-rgb), .12);
    border-color: rgba(var(--vt-info-rgb), .35);
    color: var(--vt-info-fg);
}
.alert-primary,
.alert-secondary {
    background-color: rgba(108, 117, 125, .18);
    border-color: rgba(108, 117, 125, .4);
    color: var(--vt-text);
}
.alert .close,
.alert button.close {
    color: inherit;
    text-shadow: none;
    opacity: .7;
}
.alert .close:hover { opacity: 1; }

/* ----- Badges (estilo "pill" semitransparente) ----- */
.badge {
    font-weight: 600;
    letter-spacing: .02em;
    padding: .35em .65em;
    border-radius: .35rem;
    border: 1px solid transparent;
}
.badge-success {
    background-color: rgba(var(--vt-success-rgb), .18) !important;
    color: var(--vt-success-fg) !important;
    border-color: rgba(var(--vt-success-rgb), .4);
}
.badge-danger {
    background-color: rgba(var(--vt-danger-rgb), .18) !important;
    color: var(--vt-danger-fg) !important;
    border-color: rgba(var(--vt-danger-rgb), .4);
}
.badge-warning {
    background-color: rgba(var(--vt-warning-rgb), .18) !important;
    color: var(--vt-warning-fg) !important;
    border-color: rgba(var(--vt-warning-rgb), .4);
}
.badge-info {
    background-color: rgba(var(--vt-info-rgb), .18) !important;
    color: var(--vt-info-fg) !important;
    border-color: rgba(var(--vt-info-rgb), .4);
}
.badge-primary,
.badge-secondary {
    background-color: rgba(108, 117, 125, .22) !important;
    color: var(--vt-text) !important;
    border-color: rgba(108, 117, 125, .45);
}
.badge-light {
    background-color: var(--vt-bg-elev-2) !important;
    color: var(--vt-text) !important;
    border-color: var(--vt-border);
}
.badge-dark {
    background-color: rgba(0, 0, 0, .35) !important;
    color: var(--vt-text) !important;
    border-color: rgba(255, 255, 255, .08);
}

/* ----- bg-* helpers (usados en filas de tablas, paneles, etc.) ----- */
.bg-success {
    background-color: rgba(var(--vt-success-rgb), .15) !important;
    color: var(--vt-success-fg) !important;
}
.bg-danger {
    background-color: rgba(var(--vt-danger-rgb), .15) !important;
    color: var(--vt-danger-fg) !important;
}
.bg-warning {
    background-color: rgba(var(--vt-warning-rgb), .15) !important;
    color: var(--vt-warning-fg) !important;
}
.bg-info {
    background-color: rgba(var(--vt-info-rgb), .15) !important;
    color: var(--vt-info-fg) !important;
}

/* ----- Filas de tabla con estado (table-success, etc.) ----- */
.table-success, .table-success > th, .table-success > td {
    background-color: rgba(var(--vt-success-rgb), .12) !important;
    color: var(--vt-success-fg);
}
.table-danger, .table-danger > th, .table-danger > td {
    background-color: rgba(var(--vt-danger-rgb), .12) !important;
    color: var(--vt-danger-fg);
}
.table-warning, .table-warning > th, .table-warning > td {
    background-color: rgba(var(--vt-warning-rgb), .12) !important;
    color: var(--vt-warning-fg);
}
.table-info, .table-info > th, .table-info > td {
    background-color: rgba(var(--vt-info-rgb), .12) !important;
    color: var(--vt-info-fg);
}
.table-active, .table-active > th, .table-active > td {
    background-color: rgba(108, 117, 125, .18) !important;
}

/* ----- text-* sobre fondo oscuro (mejor legibilidad) ----- */
.text-success { color: var(--vt-success-fg) !important; }
.text-danger  { color: var(--vt-danger-fg)  !important; }
.text-warning { color: var(--vt-warning-fg) !important; }
.text-info    { color: var(--vt-info-fg)    !important; }
.text-primary { color: var(--vt-link)       !important; }

/* ----- Botones de estado outline / soft ----- */
.btn-success {
    background-color: rgba(var(--vt-success-rgb), .18);
    border-color: rgba(var(--vt-success-rgb), .5);
    color: var(--vt-success-fg);
}
.btn-success:hover, .btn-success:focus {
    background-color: rgba(var(--vt-success-rgb), .35);
    border-color: rgba(var(--vt-success-rgb), .7);
    color: #fff;
}
.btn-danger {
    background-color: rgba(var(--vt-danger-rgb), .18);
    border-color: rgba(var(--vt-danger-rgb), .5);
    color: var(--vt-danger-fg);
}
.btn-danger:hover, .btn-danger:focus {
    background-color: rgba(var(--vt-danger-rgb), .35);
    border-color: rgba(var(--vt-danger-rgb), .7);
    color: #fff;
}
.btn-warning {
    background-color: rgba(var(--vt-warning-rgb), .18);
    border-color: rgba(var(--vt-warning-rgb), .5);
    color: var(--vt-warning-fg);
}
.btn-warning:hover, .btn-warning:focus {
    background-color: rgba(var(--vt-warning-rgb), .35);
    border-color: rgba(var(--vt-warning-rgb), .7);
    color: #fff;
}
.btn-info {
    background-color: rgba(var(--vt-info-rgb), .18);
    border-color: rgba(var(--vt-info-rgb), .5);
    color: var(--vt-info-fg);
}
.btn-info:hover, .btn-info:focus {
    background-color: rgba(var(--vt-info-rgb), .35);
    border-color: rgba(var(--vt-info-rgb), .7);
    color: #fff;
}

/* Sutil animación al pasar mouse sobre cualquier botón */
.btn {
    transition: background-color .2s ease, border-color .2s ease,
                color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}
.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ---------- Misc: dropdowns no-navbar, popovers, tooltips ---------- */
.dropdown-menu {
    background-color: var(--vt-bg-elev);
    border-color: var(--vt-border);
    color: var(--vt-text);
}
.dropdown-menu .dropdown-item {
    color: var(--vt-text);
    transition: background-color .15s ease, color .15s ease;
}
/* Hover de items en dropdowns NO-navbar: atenuación blanca (no gris) */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: var(--vt-gray) !important;
    color: #fff !important;
}
.dropdown-divider {
    border-top-color: var(--vt-border);
}
/* Pagination hover por atenuación */
.page-link:hover {
    background-color: rgba(255, 255, 255, .07) !important;
    color: #fff !important;
    border-color: var(--vt-border);
}
/* Botones por defecto y light: hover por atenuación (no gris sólido) */
.btn-light:hover,
.btn-default:hover {
    background-color: rgba(255, 255, 255, .1) !important;
    border-color: var(--vt-border) !important;
    color: #fff !important;
}
.popover {
    background-color: var(--vt-bg-elev);
    border-color: var(--vt-border);
    color: var(--vt-text);
}
.popover-body { color: var(--vt-text); }
.popover-header {
    background-color: var(--vt-bg-elev-2);
    border-bottom-color: var(--vt-border);
    color: var(--vt-text);
}

/* Pace progress bar coherente con el azul brillante */
.pace .pace-progress {
    background: linear-gradient(90deg, #1e90ff 0%, #00d4ff 50%, #1e90ff 100%) !important;
    box-shadow: 0 0 12px rgba(30, 144, 255, .85), 0 0 4px rgba(255, 255, 255, .9) !important;
    height: 3px !important;
    z-index: 99999 !important;
}

/* ---------- Select2 (jQuery plugin usado por WidgetSelect) ----------
 * Select2 reemplaza el <select> nativo por <span class="select2-...">
 * y nuestros overrides al input no le afectan. Aqu\u00ed lo adaptamos
 * al dark theme.
 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--vt-bg-elev-2) !important;
    border: 1px solid var(--vt-border) !important;
    color: var(--vt-text) !important;
    min-height: calc(1.5em + .75rem + 2px);
    border-radius: .25rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--vt-text) !important;
    line-height: calc(1.5em + .375rem) !important;
    padding-left: .75rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--vt-text-muted) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--vt-text) transparent transparent transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--vt-text) transparent !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--vt-gray) !important;
    box-shadow: 0 0 0 .2rem rgba(108, 117, 125, .45) !important;
}
/* Dropdown del Select2 */
.select2-container--default .select2-dropdown {
    background-color: var(--vt-bg-elev) !important;
    border: 1px solid var(--vt-border) !important;
    color: var(--vt-text) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--vt-bg-elev-2) !important;
    color: var(--vt-text) !important;
    border: 1px solid var(--vt-border) !important;
}
.select2-container--default .select2-results__option {
    color: var(--vt-text) !important;
    background-color: transparent !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background-color: var(--vt-gray) !important;
    color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--vt-gray-dark) !important;
    color: #fff !important;
}
/* Multi-select tags */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--vt-gray-dark) !important;
    border: 1px solid var(--vt-gray) !important;
    color: #fff !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, .8) !important;
}
.select2-container--default .select2-search--inline .select2-search__field {
    color: var(--vt-text) !important;
}
/* Disabled */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: rgba(255, 255, 255, .04) !important;
    color: var(--vt-text-muted) !important;
}

/* Scrollbar dark (WebKit/Edge/Chrome) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--vt-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--vt-gray-dark);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--vt-gray);
}

/* end vantariel theme */

/* ============================================================
 * VANTARIEL HARD OVERRIDES — \u00faltima palabra contra plugins
 * Estas reglas usan selectores con `html body` para ganar
 * especificidad contra Select2, jQuery UI y cualquier CSS
 * inyectado v\u00eda assetManager.
 * ============================================================ */

/* Hover de filas de tabla por ATENUACI\u00d3N (overlay blanco) */
html body .table tbody tr:hover,
html body .table-hover tbody tr:hover,
html body table.table tbody tr:hover {
    background-color: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 0 rgba(255, 255, 255, .4) !important;
    cursor: pointer;
}
html body .table tbody tr:hover > td,
html body .table tbody tr:hover > th,
html body .table-hover tbody tr:hover > td,
html body .table-hover tbody tr:hover > th {
    background-color: transparent !important;
    color: inherit !important;
}

/* Inputs nativos: forzados a dark contra cualquier plugin.
   Usa --vt-input-bg (no --vt-bg-elev-2) para que el inline script
   del head pueda aplicar el color correcto inmediatamente en light mode. */
html body .form-control,
html body select.form-control,
html body textarea.form-control,
html body input.form-control {
    background-color: var(--vt-input-bg, var(--vt-bg-elev-2)) !important;
    color: var(--vt-text) !important;
    border-color: var(--vt-border) !important;
}
html body .form-control:focus,
html body select.form-control:focus,
html body textarea.form-control:focus,
html body input.form-control:focus {
    background-color: var(--vt-input-bg, var(--vt-bg-elev-2)) !important;
    color: var(--vt-text) !important;
    border-color: var(--vt-gray) !important;
    box-shadow: 0 0 0 .2rem rgba(108, 117, 125, .45),
                inset 0 0 0 1px var(--vt-gray) !important;
}

/* Select2 (ambos temas: --default y --bootstrap4) — última palabra */
html body span.select2-container .select2-selection,
html body span.select2-container .select2-selection--single,
html body span.select2-container .select2-selection--multiple {
    background-color: var(--vt-input-bg, var(--vt-bg-elev-2)) !important;
    background-image: none !important;
    border: 1px solid var(--vt-border) !important;
    color: var(--vt-text) !important;
}
html body span.select2-container .select2-selection .select2-selection__rendered,
html body span.select2-container .select2-selection--single .select2-selection__rendered,
html body span.select2-container .select2-selection--multiple .select2-selection__rendered {
    color: var(--vt-text) !important;
    background-color: transparent !important;
}
html body span.select2-container .select2-selection__placeholder {
    color: var(--vt-text-muted) !important;
}
html body span.select2-container .select2-selection__arrow b {
    border-color: var(--vt-text) transparent transparent transparent !important;
}
html body span.select2-container.select2-container--open .select2-selection__arrow b {
    border-color: transparent transparent var(--vt-text) transparent !important;
}
html body span.select2-container.select2-container--focus .select2-selection,
html body span.select2-container.select2-container--open .select2-selection {
    border-color: var(--vt-gray) !important;
    box-shadow: 0 0 0 .2rem rgba(108, 117, 125, .45) !important;
    outline: 0 !important;
}
/* Dropdown del Select2 (se renderiza en <body> directo) */
html body .select2-container .select2-dropdown,
html body span.select2-dropdown {
    background-color: var(--vt-bg-elev) !important;
    border: 1px solid var(--vt-border) !important;
    color: var(--vt-text) !important;
}
html body .select2-search--dropdown .select2-search__field {
    background-color: var(--vt-input-bg, var(--vt-bg-elev-2)) !important;
    color: var(--vt-text) !important;
    border: 1px solid var(--vt-border) !important;
}
html body .select2-results__option {
    color: var(--vt-text) !important;
    background-color: transparent !important;
}
html body .select2-results__option--highlighted,
html body .select2-results__option--highlighted[aria-selected],
html body .select2-container--default .select2-results__option--highlighted[aria-selected],
html body .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
}
html body .select2-results__option[aria-selected=true] {
    background-color: var(--vt-gray) !important;
    color: #fff !important;
}
html body .select2-selection--multiple .select2-selection__choice {
    background-color: var(--vt-gray-dark) !important;
    border-color: var(--vt-gray) !important;
    color: #fff !important;
}

/* Filas clickables: separador inferior FINO (1px) igual que en modo
 * claro, con el color de borde sutil del tema. */
html body tr.clickableListRow > td,
html body tr.clickableListRow > th,
html body .clickableListRow > td,
html body .clickableListRow > th {
    border-bottom: 1px solid var(--vt-border) !important;
}
/* La última fila NO lleva linea inferior: el borde del card/table
   ya cierra el listado, igual que en modo claro (Bootstrap solo pone
   border-top en las celdas). */
html body table tbody tr.clickableListRow:last-child > td,
html body table tbody tr.clickableListRow:last-child > th {
    border-bottom: 0 !important;
}
/* MISMOS bordes para CUALQUIER fila de tabla dentro de un ListView,
 * tenga o no la clase clickableListRow (p.ej. ListVariante-labels usa
 * Join\\VarianteProducto que no aplica clickable). Aplica a todas las
 * filas de tablas .table-hover dentro de .table-responsive. */
html body .table-responsive > table.table.table-hover > tbody > tr > td,
html body .table-responsive > table.table.table-hover > tbody > tr > th,
html body div.table-responsive table.table.table-hover tbody tr td,
html body div.table-responsive table.table.table-hover tbody tr th {
    border-bottom: 1px solid var(--vt-border) !important;
    border-top: 0 !important;
}
html body .table-responsive > table.table.table-hover > tbody > tr:first-child > td,
html body .table-responsive > table.table.table-hover > tbody > tr:first-child > th {
    border-top: 1px solid var(--vt-border) !important;
}
/* La ULTIMA fila de cualquier tabla dentro de .table-responsive no
   lleva linea inferior: el borde del card cierra el listado, igual
   que en modo claro. */
html body .table-responsive > table.table.table-hover > tbody > tr:last-child > td,
html body .table-responsive > table.table.table-hover > tbody > tr:last-child > th,
html body div.table-responsive table.table.table-hover tbody tr:last-child td,
html body div.table-responsive table.table.table-hover tbody tr:last-child th {
    border-bottom: 0 !important;
}

/* Botones inactivos / disabled / outline-secondary en .btn-group
 * (paginadores y agrupadores). Antes quedaban casi ilegibles sobre el
 * fondo oscuro: subimos el contraste del texto y del borde. */
html body .btn-group > .btn:disabled,
html body .btn-group > .btn.disabled,
html body .btn-group > .btn-outline-secondary,
html body .btn-group > .btn-secondary:disabled,
html body .pagination .page-item.disabled .page-link,
html body .pagination .page-link {
    color: var(--vt-text) !important;
    background-color: var(--vt-bg-elev-2) !important;
    border-color: var(--vt-border) !important;
    opacity: 1 !important;
}
html body .btn-group > .btn-outline-secondary:not(:disabled):not(.disabled):hover,
html body .pagination .page-item:not(.disabled) .page-link:hover {
    color: #fff !important;
    background-color: var(--vt-gray) !important;
    border-color: var(--vt-gray) !important;
}
html body .btn-group > .btn.active,
html body .btn-group > .btn-outline-secondary.active,
html body .pagination .page-item.active .page-link {
    color: #fff !important;
    background-color: var(--vt-gray) !important;
    border-color: var(--vt-gray-dark) !important;
}
html body .btn-group > .btn:disabled,
html body .btn-group > .btn.disabled,
html body .pagination .page-item.disabled .page-link {
    color: var(--vt-text-muted) !important;
    background-color: var(--vt-bg-elev) !important;
    cursor: not-allowed !important;
}

/* Líneas de documento (EditFactura/EditPedido/EditPresupuesto/EditAlbarán
 * tanto de ventas como de compras). Antes cada fila tenía un border-bottom
 * blanco brusco. Ahora suavizamos: borde inferior fino en cada fila y en
 * la fila de TÍTULOS, alineados al mismo ancho (ambos sobre .form-row
 * para que coincidan exactamente, sin que el de las líneas se vea más
 * largo que el de los títulos). */
html body .container-fluid.titles .form-row.border-bottom {
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
    padding-bottom: 0 !important;
    margin-bottom: 0;
}
html body .fs-line .form-row.border-bottom {
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
    /* respiro entre el contenido de la fila y la linea inferior */
    padding-bottom: 8px !important;
    margin-bottom: 0;
}
html body .fs-line {
    /* respiro entre la linea divisoria y la siguiente fila */
    padding-top: 8px;
    padding-bottom: 8px;
    border-top: 0 !important;
    border-bottom: 0 !important;
}
html body .container-fluid.titles + .fs-line,
html body .fs-line:first-child {
    border-top: 0 !important;
    padding-top: 8px !important;
}
html body .fs-line:last-child {
    padding-bottom: 8portant;
    padding-top: 8px !important;
}
html body .fs-line:last-child {
    padding-bottom: 8px;
}

/* ----------------------------------------------------------------
 * VANTARIEL: las utilidades de borde de Bootstrap (.border-top, etc.)
 * usan #dee2e6 — gris claro que sobre fondo oscuro se ve como una
 * linea BLANCA muy marcada (p.ej. divisores entre lineas de
 * EditAsiento). Las unificamos a --vt-border; las variantes de color
 * conservan su tono propio (como en modo claro).
 * ---------------------------------------------------------------- */
.border,
.border-top,
.border-right,
.border-bottom,
.border-left {
    border-color: var(--vt-border) !important;
}
.border-success { border-color: rgba(var(--vt-success-rgb), .55) !important; }
.border-danger  { border-color: rgba(var(--vt-danger-rgb), .55) !important; }
.border-warning { border-color: rgba(var(--vt-warning-rgb), .55) !important; }
.border-info    { border-color: rgba(var(--vt-info-rgb), .55) !important; }
.border-primary { border-color: var(--vt-accent-bright) !important; }
.border-white   { border-color: rgba(255, 255, 255, .75) !important; }
.border-light,
.border-dark    { border-color: var(--vt-border) !important; }

/* Totales al final de listados (segundo .table-responsive del card):
   la fila de titulos NO lleva sombreado gris y los divisores son
   finos (1px) — equivalente a lo que se ve en modo claro. */
.table-responsive + .table-responsive .table thead tr,
.table-responsive + .table-responsive .table thead th {
    background-color: transparent !important;
    color: var(--vt-text) !important;
    border-bottom: 1px solid var(--vt-border) !important;
}
.table-responsive + .table-responsive .table th,
.table-responsive + .table-responsive .table td {
    border-top: 1px solid var(--vt-border) !important;
}
/* La ultima fila de totales no lleva linea inferior (cierra el card,
   igual que en modo claro). */
html body .table-responsive + .table-responsive .table tbody tr:last-child > td,
html body .table-responsive + .table-responsive .table tbody tr:last-child > th {
    border-bottom: 0 !important;
}

/* ----------------------------------------------------------------
 * Override de estilos inline claros heredados del plugin PuntoDeVenta
 * (EditTpvReparacion, EquipoDetalle, modal Gestionar Fallas, etc.)
 * Como los inline styles no llevan !important, basta con !important
 * en CSS externo para machacarlos.
 * ---------------------------------------------------------------- */
html body [style*="background: #f8f9fa"],
html body [style*="background:#f8f9fa"],
html body [style*="background-color: #f8f9fa"],
html body [style*="background-color:#f8f9fa"],
html body [style*="background: #f5f5f5"],
html body [style*="background:#f5f5f5"],
html body [style*="background-color: #f5f5f5"],
html body [style*="background-color:#f5f5f5"],
html body [style*="background: #f9f9f9"],
html body [style*="background:#f9f9f9"],
html body [style*="background: white"],
html body [style*="background:white"],
html body [style*="background-color: white"],
html body [style*="background-color:white"],
html body [style*="background: #fff"],
html body [style*="background:#fff"],
html body [style*="background-color: #fff"],
html body [style*="background-color:#fff"] {
    background-color: var(--vt-bg-elev-2) !important;
    background: var(--vt-bg-elev-2) !important;
    color: var(--vt-text) !important;
}
/* Texto oscuro inline → claro legible sobre fondos oscuros */
html body [style*="color: #333"],
html body [style*="color:#333"],
html body [style*="color: #666"],
html body [style*="color:#666"],
html body [style*="color: #495057"],
html body [style*="color:#495057"] {
    color: var(--vt-text) !important;
}
/* Tablas con cabecera bg-primary u oscura del plugin: ya van bien.
 * Forzamos las celdas table-striped para que no tengan rayado claro. */
html body .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, .03) !important;
    color: var(--vt-text);
}
html body .table-striped tbody tr:nth-of-type(even) {
    background-color: transparent !important;
    color: var(--vt-text);
}
html body .table-bordered,
html body .table-bordered td,
html body .table-bordered th {
    border-color: var(--vt-border) !important;
}

/* end vantariel hard overrides */

/* ============================================================
 * ACENTO AZUL VANTARIEL
 * Aplica el azul oscuro del login VantarielLogin como tono de
 * \u00e9nfasis del tema oscuro: botones primarios, enlaces, foco,
 * badges, paginaci\u00f3n, pesta\u00f1as activas, encabezados de cards,
 * checks/radios. EXCLUYE expresamente la navbar principal
 * (.navbar.bg-vantariel) y los modales flotantes de electron.
 * ============================================================ */

/* --- Botones primarios --- */
html body .btn-primary,
html body .btn-outline-primary:hover,
html body .btn-outline-primary:focus,
html body .btn-outline-primary:active {
    background-color: var(--vt-accent) !important;
    border-color: var(--vt-accent) !important;
    color: #ffffff !important;
}
html body .btn-primary:hover,
html body .btn-primary:focus,
html body .btn-primary:active,
html body .btn-primary.active,
html body .show > .btn-primary.dropdown-toggle {
    background-color: var(--vt-accent-2) !important;
    border-color: var(--vt-accent-bright) !important;
    box-shadow: 0 0 0 .2rem rgba(52, 152, 219, .35) !important;
}
html body .btn-outline-primary {
    color: var(--vt-accent-bright) !important;
    border-color: var(--vt-accent) !important;
    background-color: transparent !important;
}

/* --- Enlaces --- */
html body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link),
html body .text-primary {
    color: var(--vt-accent-bright) !important;
}
html body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
    color: #5dade2 !important;
}

/* --- Foco general (inputs, selects, textareas) --- */
html body .form-control:focus,
html body select.form-control:focus,
html body textarea.form-control:focus,
html body input.form-control:focus {
    border-color: var(--vt-accent-bright) !important;
    box-shadow: 0 0 0 .2rem rgba(52, 152, 219, .30),
                inset 0 0 0 1px var(--vt-accent-bright) !important;
}
html body span.select2-container--open .select2-selection,
html body span.select2-container--focus .select2-selection {
    border-color: var(--vt-accent-bright) !important;
    box-shadow: 0 0 0 .2rem rgba(52, 152, 219, .30) !important;
}
html body span.select2-container .select2-results__option--highlighted[aria-selected],
html body span.select2-container .select2-results__option--highlighted {
    background-color: var(--vt-accent) !important;
    color: #ffffff !important;
}

/* --- Badges, etiquetas y banderas primarias --- */
html body .badge-primary,
html body .badge.badge-primary {
    background-color: var(--vt-accent) !important;
    color: #ffffff !important;
}

/* --- Paginaci\u00f3n --- */
html body .page-item.active .page-link {
    background-color: var(--vt-accent) !important;
    border-color: var(--vt-accent) !important;
    color: #ffffff !important;
}
html body .page-link {
    color: var(--vt-accent-bright) !important;
}
html body .page-link:hover {
    background-color: var(--vt-accent-soft) !important;
    border-color: var(--vt-accent) !important;
    color: #ffffff !important;
}

/* --- Pesta\u00f1as / nav-tabs / nav-pills --- */
html body .nav-tabs .nav-link.active,
html body .nav-tabs .nav-item.show .nav-link {
    background-color: var(--vt-bg-elev) !important;
    color: var(--vt-accent-bright) !important;
    border-color: var(--vt-border) var(--vt-border) var(--vt-accent-bright) !important;
    border-bottom-width: 2px !important;
}
html body .nav-pills .nav-link.active,
html body .nav-pills .show > .nav-link {
    background-color: var(--vt-accent) !important;
    color: #ffffff !important;
}

/* VANTARIEL: La fila de botones superiores (#vtPageHeader .bg-light) y la
   tira de pestañas (#mainTabs) usan el fondo del body para que ambas zonas
   compartan el mismo color sin franja de distinto tono. */
html body #vtPageHeader .bg-light,
html body #mainTabs {
    background-color: var(--vt-bg) !important;
}
/* VANTARIEL: bloques .bg-light hijos directos de #vtMainContent (p.ej. la
   cabecera de titulo del Dashboard, <div class="bg-light pt-4 pb-5">) usan
   el fondo del body — antes quedaban en --vt-bg-elev-2 (#34383f), una
   franja gris mas clara visible en la parte superior de la pagina. */
html body #vtMainContent > .bg-light {
    background-color: var(--vt-bg) !important;
}

/* --- Headers de cards (.card-header) --- */
html body .card-header {
    background-color: var(--vt-bg-elev) !important;
    border-bottom: 1px solid var(--vt-accent) !important;
    color: var(--vt-text) !important;
}
html body .card-header.bg-primary,
html body .card-header.bg-info {
    background-color: var(--vt-accent) !important;
    color: #ffffff !important;
    border-bottom-color: var(--vt-accent-bright) !important;
}

/* --- Checkbox / radio activos --- */
html body .custom-control-input:checked ~ .custom-control-label::before,
html body .form-check-input:checked {
    background-color: var(--vt-accent) !important;
    border-color: var(--vt-accent-bright) !important;
}
html body .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(52, 152, 219, .25) !important;
    border-color: var(--vt-accent-bright) !important;
}

/* --- Switches custom --- */
html body .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--vt-accent) !important;
}

/* --- Hover de filas y elementos clicables (acento sutil) --- */
html body .table-hover tbody tr:hover,
html body .clickableListRow:hover,
html body .clickableRow:hover {
    background-color: var(--vt-accent-soft) !important;
}

/* --- Texto destacado / bg-info / alert-info acentos sin gritar --- */
html body .alert-info {
    background-color: var(--vt-accent-soft) !important;
    border-color: var(--vt-accent) !important;
    color: var(--vt-text) !important;
}
html body .alert-primary {
    background-color: rgba(52, 73, 94, .35) !important;
    border-color: var(--vt-accent) !important;
    color: var(--vt-text) !important;
}

/* --- EXCLUSIONES IMPORTANTES ---
 * La navbar principal (.navbar.bg-vantariel) tiene su fondo definido
 * en .navbar.bg-vantariel (linea 148). No duplicar aqui para evitar
 * capas compitiendo con diferente especificidad. */
html body .navbar.bg-vantariel .nav-link.active,
html body .navbar.bg-vantariel .nav-item.show > .nav-link {
    background-color: var(--vt-gray-dark) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
/* === Acento azul oscuro tambien en sidebars / list-group activos === */
html body .list-group-item.active {
    background-color: var(--vt-accent) !important;
    border-color: var(--vt-accent-2) !important;
    color: #ffffff !important;
}
html body .nav-pills .nav-link.active,
html body .nav-pills .show > .nav-link {
    background-color: var(--vt-accent) !important;
    border-color: var(--vt-accent-2) !important;
    color: #ffffff !important;
}


/* === REVERT: solo se elimina la linea/borde azul inferior de las pestanas activas === */
/* Mantiene los fondos originales (oscuros) tanto en pestana activa como en cards/containers */
html body .nav-tabs .nav-link.active,
html body .nav-tabs .nav-item.show .nav-link,
html body ul.nav-tabs .nav-link.active,
html body #mainTabs .nav-link.active {
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}
html body .nav-tabs .nav-link.active::after,
html body .nav-tabs .nav-link.active::before,
html body #mainTabs .nav-link.active::after,
html body #mainTabs .nav-link.active::before {
    display: none !important;
    content: none !important;
}


/* === Filas .clickableListRow.table-dark: ligeramente mas oscuras y texto mas legible === */
html body tr.clickableListRow.table-dark,
html body tr.clickableListRow.table-dark > td,
html body tr.clickableListRow.table-dark > th,
html body .clickableListRow.table-dark,
html body .clickableListRow.table-dark > td,
html body .clickableListRow.table-dark > th {
    background-color: #5a6066 !important;
    color: #f5f7fa !important;
}
html body tr.clickableListRow.table-dark a,
html body .clickableListRow.table-dark a {
    color: #ffffff !important;
}
html body tr.clickableListRow.table-dark a:hover,
html body .clickableListRow.table-dark a:hover {
    color: #aed6f1 !important;
    text-decoration: underline;
}
html body tr.clickableListRow.table-dark:hover,
html body tr.clickableListRow.table-dark:hover > td,
html body tr.clickableListRow.table-dark:hover > th,
html body .clickableListRow.table-dark:hover,
html body .clickableListRow.table-dark:hover > td,
html body .clickableListRow.table-dark:hover > th {
    background-color: #4a4f55 !important;
    color: #ffffff !important;
}

/* === BUMP cache: round H === */
/* === Botones de estado SOLIDOS (sin transparencia) para legibilidad === */
/* Botones de estado: tonos atenuados (sin alpha pero mas oscuros que la
 * paleta brillante) para no saturar el modo oscuro. Texto blanco legible. */
html body .btn-success,
html body .btn.btn-success {
    background-color: #2e8b57 !important;
    border-color: #2e8b57 !important;
    color: #ffffff !important;
}
html body .btn-success:hover,
html body .btn-success:focus,
html body .btn-success:active,
html body .btn.btn-success:hover {
    background-color: #256e45 !important;
    border-color: #256e45 !important;
    color: #ffffff !important;
}
html body .btn-danger,
html body .btn.btn-danger {
    background-color: #a73a2e !important;
    border-color: #a73a2e !important;
    color: #ffffff !important;
}
html body .btn-danger:hover,
html body .btn-danger:focus,
html body .btn-danger:active,
html body .btn.btn-danger:hover {
    background-color: #8a2f25 !important;
    border-color: #8a2f25 !important;
    color: #ffffff !important;
}
html body .btn-warning,
html body .btn.btn-warning {
    background-color: #b8860b !important;
    border-color: #b8860b !important;
    color: #ffffff !important;
}
html body .btn-warning:hover,
html body .btn-warning:focus,
html body .btn-warning:active,
html body .btn.btn-warning:hover {
    background-color: #976d09 !important;
    border-color: #976d09 !important;
    color: #ffffff !important;
}
html body .btn-info,
html body .btn.btn-info {
    background-color: #2c6f9b !important;
    border-color: #2c6f9b !important;
    color: #ffffff !important;
}
html body .btn-info:hover,
html body .btn-info:focus,
html body .btn-info:active,
html body .btn.btn-info:hover {
    background-color: #225a7d !important;
    border-color: #225a7d !important;
    color: #ffffff !important;
}
html body .btn-primary,
html body .btn.btn-primary {
    background-color: #2c6f9b !important;
    border-color: #2c6f9b !important;
    color: #ffffff !important;
}
html body .btn-primary:hover,
html body .btn-primary:focus,
html body .btn-primary:active {
    background-color: #225a7d !important;
    border-color: #225a7d !important;
    color: #ffffff !important;
}
/* Outline variants: borde + texto solido del color, fondo transparente */
html body .btn-outline-success { color: var(--vt-success-fg) !important; border-color: rgb(var(--vt-success-rgb)) !important; }
html body .btn-outline-danger  { color: var(--vt-danger-fg)  !important; border-color: rgb(var(--vt-danger-rgb))  !important; }
html body .btn-outline-warning { color: var(--vt-warning-fg) !important; border-color: rgb(var(--vt-warning-rgb)) !important; }
html body .btn-outline-info    { color: var(--vt-info-fg)    !important; border-color: rgb(var(--vt-info-rgb))    !important; }
html body .btn-outline-success:hover { background: rgb(var(--vt-success-rgb)) !important; color: #fff !important; }
html body .btn-outline-danger:hover  { background: rgb(var(--vt-danger-rgb))  !important; color: #fff !important; }
html body .btn-outline-warning:hover { background: rgb(var(--vt-warning-rgb)) !important; color: #2b2b2b !important; }
html body .btn-outline-info:hover    { background: rgb(var(--vt-info-rgb))    !important; color: #fff !important; }

/* === Numeros negativos en filas .clickableListRow.table-dark en rojo claro === */
html body tr.clickableListRow.table-dark .text-danger,
html body .clickableListRow.table-dark .text-danger,
html body tr.clickableListRow.table-dark td.text-danger,
html body .clickableListRow.table-dark td.text-danger,
html body tr.clickableListRow.table-dark .text-right.text-danger,
html body .clickableListRow.table-dark .text-right.text-danger {
    color: #ff8a93 !important;
}

/* === thead tr links: blanco con tinte azul para diferenciar del resto === */
html body table thead tr a,
html body table thead tr th a,
html body .table thead tr a,
html body .table thead tr th a,
html body .table thead a,
html body .table thead th a {
    color: #d8eaff !important;
}
html body table thead tr a:hover,
html body table thead tr th a:hover,
html body .table thead tr a:hover,
html body .table thead tr th a:hover,
html body .table thead a:hover,
html body .table thead th a:hover {
    color: #ffffff !important;
}

/* ============================================================
 * VANTARIEL: hover de filas con color de estado
 * ============================================================ */
html body .table tbody tr.table-success:hover,
html body .table-hover tbody tr.table-success:hover,
html body table.table tbody tr.table-success:hover {
    background-color: rgba(var(--vt-success-rgb), .55) !important;
    color: #ffffff !important;
    box-shadow:
        inset 4px 0 0 0 rgb(var(--vt-success-rgb)),
        0 0 0 1px rgba(var(--vt-success-rgb), .8) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
html body .table tbody tr.table-danger:hover,
html body .table-hover tbody tr.table-danger:hover,
html body table.table tbody tr.table-danger:hover {
    background-color: rgba(var(--vt-danger-rgb), .55) !important;
    color: #ffffff !important;
    box-shadow:
        inset 4px 0 0 0 rgb(var(--vt-danger-rgb)),
        0 0 0 1px rgba(var(--vt-danger-rgb), .8) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
html body .table tbody tr.table-warning:hover,
html body .table-hover tbody tr.table-warning:hover,
html body table.table tbody tr.table-warning:hover {
    background-color: rgba(var(--vt-warning-rgb), .65) !important;
    color: #1a1a1a !important;
    box-shadow:
        inset 4px 0 0 0 rgb(var(--vt-warning-rgb)),
        0 0 0 1px rgba(var(--vt-warning-rgb), .8) !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
}
html body .table tbody tr.table-info:hover,
html body .table-hover tbody tr.table-info:hover,
html body table.table tbody tr.table-info:hover {
    background-color: rgba(var(--vt-info-rgb), .55) !important;
    color: #ffffff !important;
    box-shadow:
        inset 4px 0 0 0 rgb(var(--vt-info-rgb)),
        0 0 0 1px rgba(var(--vt-info-rgb), .8) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
html body .table tbody tr.table-success:hover > td,
html body .table tbody tr.table-success:hover > th,
html body .table tbody tr.table-danger:hover > td,
html body .table tbody tr.table-danger:hover > th,
html body .table tbody tr.table-warning:hover > td,
html body .table tbody tr.table-warning:hover > th,
html body .table tbody tr.table-info:hover > td,
html body .table tbody tr.table-info:hover > th {
    background-color: transparent !important;
    color: inherit !important;
}
html body .table tbody tr.table-success:hover *,
html body .table tbody tr.table-danger:hover *,
html body .table tbody tr.table-info:hover * {
    color: #ffffff !important;
}
html body .table tbody tr.table-warning:hover * {
    color: #1a1a1a !important;
}

/* ============================================================
 * VANTARIEL: toasts inferiores en modo oscuro y legibles
 * El estilo por defecto deja fondo claro/azul claro con texto
 * blanco, casi ilegible. Forzamos un fondo oscuro coherente con
 * el tema y el texto en blanco con buen contraste.
 * ============================================================ */
html body #messages-toasts {
    pointer-events: none;
}
html body #messages-toasts .toast {
    pointer-events: auto;
    background-color: #1c2128 !important;
    color: #f5f6f8 !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 10px !important;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, .55),
        0 2px 6px rgba(0, 0, 0, .35) !important;
    opacity: 1 !important;
    font-weight: 500;
    margin: 12px auto 0 auto !important;
}
html body #messages-toasts .toast .toast-header {
    background-color: #232a33 !important;
    color: #f5f6f8 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    font-weight: 700 !important;
    padding: .55rem .9rem !important;
}
html body #messages-toasts .toast .toast-header strong {
    color: #ffffff !important;
}
/* Cabecera por estado: tinte de color con buen contraste */
html body #messages-toasts .toast.toast-success .toast-header,
html body #messages-toasts .toast .toast-header.bg-success {
    background-color: rgba(var(--vt-success-rgb), .25) !important;
    border-bottom-color: rgba(var(--vt-success-rgb), .55) !important;
}
html body #messages-toasts .toast.toast-danger .toast-header,
html body #messages-toasts .toast .toast-header.bg-danger {
    background-color: rgba(var(--vt-danger-rgb), .25) !important;
    border-bottom-color: rgba(var(--vt-danger-rgb), .55) !important;
}
html body #messages-toasts .toast.toast-warning .toast-header,
html body #messages-toasts .toast .toast-header.bg-warning {
    background-color: rgba(var(--vt-warning-rgb), .25) !important;
    border-bottom-color: rgba(var(--vt-warning-rgb), .55) !important;
}
html body #messages-toasts .toast.toast-info .toast-header,
html body #messages-toasts .toast .toast-header.bg-info {
    background-color: rgba(var(--vt-info-rgb), .25) !important;
    border-bottom-color: rgba(var(--vt-info-rgb), .55) !important;
}
html body #messages-toasts .toast .toast-body {
    background-color: #1c2128 !important;
    color: #f5f6f8 !important;
    padding: .7rem .95rem !important;
    line-height: 1.4;
    font-weight: 500;
}
html body #messages-toasts .toast .close,
html body #messages-toasts .toast .toast-header .close {
    color: #f5f6f8 !important;
    opacity: .85 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
html body #messages-toasts .toast .close:hover {
    opacity: 1 !important;
}

/* Login del Core: priorizar carga del logo de empresa */
html body .login-company-logo {
    image-rendering: -webkit-optimize-contrast;
}


/* ============================================================
 * VANTARIEL: navbar-brand con fondo del color hover, terminando
 * antes del menu de administracion para crear la separacion.
 * El brand ocupa TODA la altura/anchura disponible (top, bottom
 * y left) gracias a padding 0 en el navbar y stretch en el brand.
 * ============================================================ */
.navbar.bg-vantariel {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    min-height: 56px;
}
.navbar.bg-vantariel .navbar-brand {
    /* SOLIDO por defecto, translucido si extremesTransparency esta activado.
       --vt-app-active-left-bg es seteado por vt-appearance.js.
       Fallback transparent: si la var no llega (JS viejo/no corre), el
       lateral queda igual que el glass del centro en vez de un gris
       oscuro que desentonaba. */
    background-color: var(--vt-app-active-left-bg, transparent) !important;
    padding-left: 18px !important;
    padding-right: 36px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    align-self: stretch;
    display: flex !important;
    align-items: center;
    /* VANTARIEL: linea solida + sombra proyectada hacia la derecha —
       separa el brand de los botones centrales con mayor presencia. */
    border-right: 1px solid var(--vt-nav-sep-strong, rgba(0, 0, 0, .35));
    box-shadow: 6px 0 9px -4px var(--vt-nav-sep-soft, rgba(0, 0, 0, .30));
    min-height: 56px;
}
/* Hover del brand: sigue el mismo sistema de modos que los botones
   centrales (data-vt-hover en <html>): celda translucida en bg/dropdown,
   subrayado en teal/underline, nada en none. El fondo lateral
   (--vt-app-active-left-bg) NO cambia en hover — el efecto lo pintan
   el ::before (celda) y el ::after (subrayado). */
.navbar.bg-vantariel .navbar-brand { position: relative; }
.navbar.bg-vantariel .navbar-brand::before {
    content: '';
    position: absolute;
    top: 2px; bottom: 2px; left: 2px; right: 2px;
    border-radius: 5px;
    background-color: transparent;
    pointer-events: none;
    z-index: 0;
    transition: background-color .15s ease;
}
.navbar.bg-vantariel .navbar-brand::after {
    content: '';
    position: absolute;
    left: 2px; right: 2px; bottom: 2px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--vt-navbar-text, #fff);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
/* MODO TEAL (default): color de enfasis + subrayado */
html:not([data-vt-hover]) .navbar.bg-vantariel .navbar-brand:hover,
html[data-vt-hover="teal"] .navbar.bg-vantariel .navbar-brand:hover {
    color: var(--vt-teal) !important;
    text-decoration: none;
}
html:not([data-vt-hover]) .navbar.bg-vantariel .navbar-brand:hover::after,
html[data-vt-hover="teal"] .navbar.bg-vantariel .navbar-brand:hover::after,
html[data-vt-hover="underline"] .navbar.bg-vantariel .navbar-brand:hover::after {
    opacity: 1;
}
/* MODO UNDERLINE: solo subrayado, sin cambio de color */
html[data-vt-hover="underline"] .navbar.bg-vantariel .navbar-brand:hover {
    color: var(--vt-navbar-text, #fff) !important;
    text-decoration: none;
}
/* MODO BG / DROPDOWN: celda translucida, sin subrayado */
html[data-vt-hover="bg"] .navbar.bg-vantariel .navbar-brand:hover::before,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .navbar-brand:hover::before {
    background-color: rgba(255, 255, 255, .15);
}
html[data-vt-hover="bg"] .navbar.bg-vantariel .navbar-brand:hover,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .navbar-brand:hover {
    color: #fff !important;
    text-decoration: none;
}
/* MODO NONE: sin efecto */
html[data-vt-hover="none"] .navbar.bg-vantariel .navbar-brand:hover {
    color: var(--vt-navbar-text, #fff) !important;
    text-decoration: none;
}

/* ============================================================
 * VANTARIEL: sombra BLANCA suave en bordes de cards/panels para
 * separar visualmente recuadros en modo oscuro.
 * ============================================================ */
html body .card,
html body .panel,
html body .panel-default,
html body .modal-content,
html body .alert,
html body .well,
html body .list-group {
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, .08),
        0 2px 6px 0 rgba(255, 255, 255, .045),
        0 0 0 1px rgba(255, 255, 255, .04) !important;
}
html body .card:hover,
html body .panel:hover {
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, .12),
        0 4px 14px 0 rgba(255, 255, 255, .07),
        0 0 0 1px rgba(255, 255, 255, .07) !important;
}

/* ============================================================
 * VANTARIEL: SEGUNDA barra superior (solo navegadores).
 * Se oculta en Android (.vt-android) y Electron (.vt-electron).
 * Contiene: logo FS + texto VANTARIEL (izq), 2 botones publicos
 * (centro), y los iconos buscar/ayuda/usuario (der).
 * ============================================================ */
.navbar.bg-vantariel-top {
    background-color: var(--vt-gray-dark) !important;
    color: #fff;
    min-height: 44px;
    padding: 0 1rem !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    z-index: 1031;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .35);
}
html.vt-android .navbar.bg-vantariel-top,
html.vt-electron .navbar.bg-vantariel-top,
body.vt-android .navbar.bg-vantariel-top,
body.vt-electron .navbar.bg-vantariel-top {
    display: none !important;
}
/* En navegadores: ocultar #vtPosPublicModal de los duplicados (solo el del top bar) */

/* ============================================================
 * VANTARIEL: Iconos derechos (search/help/user) en la barra
 * INFERIOR. Se muestran SIEMPRE (en navegador, Android y Electron)
 * porque la barra superior nueva ya no existe.
 * ============================================================ */
.navbar.bg-vantariel.vt-bottom-bar .vt-bottom-icons {
    display: flex !important;
}
/* La barra inferior siempre arranca en top:0 (no hay top bar) */
.navbar.bg-vantariel.vt-bottom-bar {
    top: 0 !important;
}

.navbar.bg-vantariel-top .vt-top-section {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.navbar.bg-vantariel-top .vt-top-left {
    flex: 0 0 auto;
}
.navbar.bg-vantariel-top .vt-top-center {
    flex: 1 1 auto;
    justify-content: center;
    gap: .85rem;
}
.navbar.bg-vantariel-top .vt-top-right {
    flex: 0 0 auto;
    margin-left: auto;
}
.navbar.bg-vantariel-top .vt-fs-logo {
    height: 30px;
    width: auto;
    object-fit: contain;
}
.navbar.bg-vantariel-top .vt-brand-text {
    color: #1a8e7a !important;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-shadow:
        0 1px 2px #000,
        0 0 6px rgba(0, 0, 0, .85),
        0 2px 4px rgba(0, 0, 0, .7);
}
.navbar.bg-vantariel-top .vt-public-btn {
    background-color: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .15);
    padding: .35rem .85rem;
    border-radius: .35rem;
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    transition: background-color .12s, border-color .12s, transform .08s;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.navbar.bg-vantariel-top .vt-public-btn:hover {
    background-color: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .35);
}
.navbar.bg-vantariel-top .vt-public-btn:active {
    transform: scale(.97);
}
.navbar.bg-vantariel-top .vt-public-btn i {
    font-size: 1rem;
}
.navbar.bg-vantariel-top .navbar-nav {
    flex-direction: row;
}
.navbar.bg-vantariel-top .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .92);
    padding: .25rem .6rem;
    display: flex;
    align-items: center;
}
.navbar.bg-vantariel-top .navbar-nav .nav-link:hover {
    color: #fff;
}
.navbar.bg-vantariel-top .navbar-nav .dropdown-menu {
    background-color: var(--vt-gray-dark);
    color: #fff;
    border: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
}
.navbar.bg-vantariel-top .navbar-nav .dropdown-menu .dropdown-item {
    color: #fff;
}
.navbar.bg-vantariel-top .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar.bg-vantariel-top .navbar-nav .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, .08);
    color: #fff;
}

/* VANTARIEL (fix navbar flotante): esta regla dejaba el navbar principal
   pegado a 44px del borde superior (top:44px) para "pegarse" a la segunda
   barra (_VtTopBar, 44px) que YA NO SE INCLUYE en ninguna plantilla. Con la
   segunda barra eliminada, el top:44px hacia que el navbar flotara mas abajo
   de lo normal dejando un hueco al hacer scroll. Se elimina: el sticky-top
   por defecto (top:0) vuelve a aplicar y el navbar queda donde debe. */

/* ============================================================
 * VANTARIEL: modal selector de sucursal POS publico.
 * ============================================================ */
#vtPosPublicModal .modal-content {
    background-color: #1c2128;
    color: #f5f6f8;
    border: 1px solid rgba(255, 255, 255, .08);
}
#vtPosPublicModal .modal-header {
    border-bottom-color: rgba(255, 255, 255, .08);
}
#vtPosPublicModal .modal-footer {
    border-top-color: rgba(255, 255, 255, .08);
}
#vtPosPublicModal .vt-pos-terminal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
}
#vtPosPublicModal .vt-pos-terminal-item {
    padding: .8rem 1rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .4rem;
    margin-bottom: .5rem;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
    display: flex;
    align-items: center;
    gap: .8rem;
}
#vtPosPublicModal .vt-pos-terminal-item:hover {
    background-color: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .3);
}
#vtPosPublicModal .vt-pos-terminal-item .vt-pos-icon {
    font-size: 1.4rem;
    color: #1a8e7a;
}
#vtPosPublicModal .vt-pos-terminal-item .vt-pos-name {
    font-weight: 700;
    font-size: 1rem;
}
#vtPosPublicModal .vt-pos-terminal-item .vt-pos-meta {
    color: rgba(255, 255, 255, .6);
    font-size: .85rem;
}
#vtPosPublicModal .vt-pos-empty {
    text-align: center;
    color: rgba(255, 255, 255, .55);
    padding: 1.5rem;
}


/* ============================================================
 * VANTARIEL: hover destacado para filas en ListTpvReparacion --
 * BLOQUE OBSOLETO. Las filas NO traen .table-success/.table-X.
 * El hover se gestiona en el bloque universal "row-status-colored"
 * mas abajo. Se mantiene este comentario como nota.
 * ============================================================ */


/* ============================================================
 * VANTARIEL: dropdowns del navbar -- el hover lo simula JS via
 * Bootstrap dropdown('show'), por eso aqui SOLO mostramos el menu
 * cuando Bootstrap pone la clase .show. Asi cierra correctamente
 * el dropdown anterior (estado interno coherente con click).
 * ============================================================ */
.navbar.bg-vantariel .navbar-nav > li.nav-item.dropdown.show > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
.navbar.bg-vantariel .dropdown-menu li.dropdown-submenu.show > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    left: 100%;
    top: 0;
    margin-top: -1px;
}
/* VANTARIEL: los dropdowns se separan de la barra (efecto flotante) */
.navbar.bg-vantariel .navbar-nav > li.nav-item.dropdown > .dropdown-menu {
    margin-top: 7px;
}
/* Area invisible que cubre el gap entre el toggle y el menu, para no
   perder el hover al cruzar la separacion. */
.navbar.bg-vantariel .navbar-nav > li.nav-item.dropdown > .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background: transparent;
}

/* Dropdowns del top bar tambien con hover */
.navbar.bg-vantariel-top .navbar-nav > li.nav-item.dropdown:hover > .dropdown-menu,
.navbar.bg-vantariel-top .navbar-nav > li.nav-item.dropdown:focus-within > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
.navbar.bg-vantariel-top .navbar-nav > li.nav-item.dropdown > .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background: transparent;
}

/* ============================================================
 * VANTARIEL: TOP BAR refuerzo (alta especificidad para que el
 * background y el contenido se vean SI o SI sobre cualquier
 * estilo del plugin / Bootstrap).
 * ============================================================ */
html body nav.navbar.bg-vantariel-top {
    background-color: #545b62 !important;
    background-image: none !important;
    color: #ffffff !important;
    min-height: 44px !important;
    padding: 0 1rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(0, 0, 0, .35) !important;
    z-index: 1031 !important;
    visibility: visible !important;
    opacity: 1 !important;
}
html body nav.navbar.bg-vantariel-top .vt-top-section {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}
html body nav.navbar.bg-vantariel-top .vt-fs-logo {
    height: 30px !important;
    width: auto !important;
    display: inline-block !important;
}
html body nav.navbar.bg-vantariel-top .vt-brand-text {
    color: #1a8e7a !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    letter-spacing: 1px !important;
    text-shadow:
        0 1px 2px #000,
        0 0 6px rgba(0, 0, 0, .85),
        0 2px 4px rgba(0, 0, 0, .7) !important;
    display: inline-block !important;
}
html body nav.navbar.bg-vantariel-top .vt-public-btn {
    background-color: rgba(255, 255, 255, .04) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    padding: .35rem .85rem !important;
    border-radius: .35rem !important;
    font-weight: 600 !important;
    font-size: .92rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .45rem !important;
    margin: 0 .25rem !important;
}
html body nav.navbar.bg-vantariel-top .vt-public-btn:hover {
    background-color: rgba(255, 255, 255, .15) !important;
    border-color: rgba(255, 255, 255, .55) !important;
}
html body nav.navbar.bg-vantariel-top .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .92) !important;
    padding: .25rem .6rem !important;
}
html body nav.navbar.bg-vantariel-top .navbar-nav .nav-link:hover {
    color: #ffffff !important;
}

/* ============================================================
 * VANTARIEL: HOVER de filas en ListControllers.
 *
 * Hay DOS sistemas de coloreado:
 *
 *  (A) `<row type="status">` en el XMLView -> RowStatus::trClass()
 *      anade clases Bootstrap `table-success/danger/warning/info`
 *      al `<tr>`. Bootstrap les pone background-color con su variable
 *      --bs-table-X-bg. Caso clasico: ListCliente, ListAlbaran, etc.
 *
 *  (B) `<span data-row-color="#xxx" data-row-bgalpha="..."
 *      data-row-textcolor="...">` dentro de la celda. El script de
 *      ListView.html.twig aplica style.backgroundColor inline al <tr>
 *      y le anade la clase `.row-status-colored`. Caso: ListTpvReparacion.
 *
 * Para ambos casos al hover: SUBIR intensidad MODERADAMENTE (filter
 * brightness/saturate) sin romper la legibilidad. Para filas sin estado:
 * hover sutil gris-VANTARIEL (no agresivo).
 *
 * IMPORTANTE: NO neutralizamos `--bs-table-hover-bg` para no romper el
 * color de fondo de las filas con clases table-X (Bootstrap usa esa var).
 * ============================================================ */

/* Filas CON estado clase Bootstrap (sistema A) -- amplificar el color
   de estado con un overlay blanco translucido en cada celda. Usamos
   background-image (linear-gradient) para que se mezcle con el color
   de fondo existente, en vez de filter (que no se aplica bien sobre <tr>). */
table.table tbody tr.table-success:hover > td,
table.table tbody tr.table-success:hover > th,
table.table tbody tr.table-danger:hover > td,
table.table tbody tr.table-danger:hover > th,
table.table tbody tr.table-warning:hover > td,
table.table tbody tr.table-warning:hover > th,
table.table tbody tr.table-info:hover > td,
table.table tbody tr.table-info:hover > th,
table.table tbody tr.table-primary:hover > td,
table.table tbody tr.table-primary:hover > th,
table.table tbody tr.table-secondary:hover > td,
table.table tbody tr.table-secondary:hover > th {
    /* Bloquear que Bootstrap pinte gris encima */
    --bs-table-hover-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
    /* Capa blanca translucida que aclara el color de estado existente */
    background-image: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) !important;
    transition: background-image .12s ease !important;
    cursor: pointer;
}
/* Borde lateral blanco indicador de hover */
table.table tbody tr.table-success:hover > td:first-child,
table.table tbody tr.table-success:hover > th:first-child,
table.table tbody tr.table-danger:hover > td:first-child,
table.table tbody tr.table-danger:hover > th:first-child,
table.table tbody tr.table-warning:hover > td:first-child,
table.table tbody tr.table-warning:hover > th:first-child,
table.table tbody tr.table-info:hover > td:first-child,
table.table tbody tr.table-info:hover > th:first-child,
table.table tbody tr.table-primary:hover > td:first-child,
table.table tbody tr.table-primary:hover > th:first-child,
table.table tbody tr.table-secondary:hover > td:first-child,
table.table tbody tr.table-secondary:hover > th:first-child {
    box-shadow: inset 3px 0 0 0 rgba(255, 255, 255, .85) !important;
}

/* Filas CON estado data-row-color (sistema B, ListTpvReparacion) --
   El bg lo guarda el JS como --vt-row-bg en el <tr>; aqui lo aplicamos
   a cada celda para que Bootstrap NO lo tape con --bs-table-accent-bg
   (que es lo que estaba pintando todo gris en hover). */
table.table tbody tr.row-status-colored > td,
table.table tbody tr.row-status-colored > th {
    background-color: var(--vt-row-bg, transparent) !important;
}
table.table tbody tr.row-status-colored:hover > td,
table.table tbody tr.row-status-colored:hover > th {
    --bs-table-hover-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-bg-state: transparent !important;
    background-color: var(--vt-row-bg, transparent) !important;
    background-image: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35) !important;
    transition: background-image .12s ease !important;
    cursor: pointer;
}
table.table tbody tr.row-status-colored:hover > td:first-child,
table.table tbody tr.row-status-colored:hover > th:first-child {
    box-shadow: inset 3px 0 0 0 rgba(255, 255, 255, .85) !important;
}

/* Filas SIN estado: hover sutil gris-azulado VANTARIEL.
   No tocamos las filas con clase table-X ni .row-status-colored. */
table.table-hover tbody tr:not(.row-status-colored):not(.table-success):not(.table-danger):not(.table-warning):not(.table-info):not(.table-primary):not(.table-secondary):hover,
table.table-hover tbody tr:not(.row-status-colored):not(.table-success):not(.table-danger):not(.table-warning):not(.table-info):not(.table-primary):not(.table-secondary):hover > td,
table.table-hover tbody tr:not(.row-status-colored):not(.table-success):not(.table-danger):not(.table-warning):not(.table-info):not(.table-primary):not(.table-secondary):hover > th {
    --bs-table-hover-bg: rgba(26, 142, 122, .14) !important;
    --bs-table-accent-bg: rgba(26, 142, 122, .14) !important;
    background-color: rgba(26, 142, 122, .14) !important;
    cursor: pointer;
    transition: background-color .12s ease !important;
}
table.table-hover tbody tr:not(.row-status-colored):not(.table-success):not(.table-danger):not(.table-warning):not(.table-info):not(.table-primary):not(.table-secondary):hover {
    box-shadow: inset 2px 0 0 0 rgba(26, 142, 122, .55) !important;
}


/* Modo "solo overflow": cuando solo quedaria espacio para 3 botones o
   menos en modo icono, todos los items se mueven al boton overflow y este queda
   centrado como unico boton de la zona principal.
   IMPORTANTE: usar visibility+width:0 (no display:none) para que el
   ResizeObserver no recalcule con offsetWidth=0 y se buguee. */
.navbar.bg-vantariel #vtNavbarMainItems.vt-only-overflow {
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
.navbar.bg-vantariel #vtNavbarMainItems.vt-only-overflow + .vt-overflow-wrap.vt-show {
    flex: 1 1 auto !important;
    justify-content: center !important;
    margin-left: 0 !important;
}
/* Por defecto: muestra solo la flecha; oculta hamburguesa */
.navbar.bg-vantariel .vt-overflow-bars { display: none; }
.navbar.bg-vantariel .vt-overflow-arrow { display: inline-block; }
/* En modo "solo overflow": boton GRANDE estilo hamburguesa centrado.
   Sin fondo permanente; solo se ilumina con hover (igual que los demas
   botones de la barra). */
.navbar.bg-vantariel #vtNavbarMainItems.vt-only-overflow + .vt-overflow-wrap.vt-show .vt-overflow-item {
    width: auto;
}
.navbar.bg-vantariel #vtNavbarMainItems.vt-only-overflow + .vt-overflow-wrap.vt-show .vt-overflow-item {
    /* Estirar el item a TODO el ancho del wrap para que el fondo del
       hover cubra los laterales (no quede gris de la barra). */
    display: flex !important;
    align-items: stretch !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    justify-content: center !important;
}
.navbar.bg-vantariel #vtNavbarMainItems.vt-only-overflow + .vt-overflow-wrap.vt-show .vt-overflow-toggle {
    padding: .5rem 2.25rem !important;
    font-size: 1.6rem;
    background: transparent;
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color .15s ease !important;
}
/* Hover/show en modo solo-overflow: el fondo cubre TODO el ancho disponible,
   incluyendo los laterales (sin franjas grises de la barra). */
.navbar.bg-vantariel #vtNavbarMainItems.vt-only-overflow + .vt-overflow-wrap.vt-show .vt-overflow-item:hover .vt-overflow-toggle,
.navbar.bg-vantariel #vtNavbarMainItems.vt-only-overflow + .vt-overflow-wrap.vt-show .vt-overflow-item.show .vt-overflow-toggle {
    background-color: var(--vt-gray-dark) !important;
}
.navbar.bg-vantariel #vtNavbarMainItems.vt-only-overflow + .vt-overflow-wrap.vt-show .vt-overflow-arrow {
    display: none;
}
.navbar.bg-vantariel #vtNavbarMainItems.vt-only-overflow + .vt-overflow-wrap.vt-show .vt-overflow-bars {
    display: inline-block;
}

/* ============================================================
 * VANTARIEL: MegaSearch input -- sombra blanca sutil cuando NO esta
 * activo (inactivo). Cuando recibe focus mantiene la sombra azul de
 * Bootstrap original (no la pisamos).
 * ============================================================ */
body .container-fluid form .input-group > input.form-control.form-control-lg[name="query"]:not(:focus) {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18),
                0 2px 8px rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .35) !important;
    transition: box-shadow .2s ease, border-color .2s ease;
}


/* ============================================================
 * VANTARIEL: botones derechos (search/help/user) con FONDO PERMANENTE
 * del color del hover (var(--vt-gray-dark)) cubriendo TODA la altura
 * de la barra. El boton ▼ NO se incluye aqui (mantiene su comportamiento
 * original con hover dinamico del priority-nav).
 * Hover: el FONDO no cambia — solo cambia el color del ICONO/texto
 * para indicar interaccion sin "parpadeo" del fondo.
 * Focus: sin outline naranja/blanco del navegador ni sombra azul de
 * Bootstrap (eran las que aparecian al click/keyboard focus).
 * ============================================================ */
.navbar.bg-vantariel .vt-bottom-icons > .nav-item > .nav-link {
    /* Transparente: hereda el fondo solido de vt-bottom-icons para que
       todos los botones (theme switch, search, help, user) tengan el mismo fondo. */
    background-color: transparent !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color .15s ease !important;
}
/* nav-item ocupa toda la altura para que el fondo sea continuo */
.navbar.bg-vantariel .vt-bottom-icons > .nav-item {
    display: flex !important;
    align-items: stretch !important;
    height: auto !important;
}
/* Hover/show: solo cambia el color del icono (fondo intacto) */
.navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link,
.navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link {
    color: var(--vt-teal, #2cd4b6) !important;
}
.navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link i,
.navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link i {
    color: var(--vt-teal, #2cd4b6) !important;
}
/* Quitar outline/box-shadow naranja-blanco del focus (Bootstrap/UA)
   en TODOS los nav-link y dropdown-toggle del navbar. Ese era el
   "borde naranja y blanco" que aparecia al pulsar/abrir por click. */
.navbar.bg-vantariel .nav-link,
.navbar.bg-vantariel .nav-link:focus,
.navbar.bg-vantariel .nav-link:active,
.navbar.bg-vantariel .dropdown-toggle:focus,
.navbar.bg-vantariel .dropdown-toggle:active,
.navbar.bg-vantariel button:focus,
.navbar.bg-vantariel button:active {
    outline: 0 !important;
    box-shadow: none !important;
}


/* ============================================================
 * VANTARIEL: refuerzo iOS/Android para sticky-top de la navbar.
 * NOTA: la promocion a layer GPU (transform: translateZ + will-change)
 * causaba FLICKER en Android WebView y Electron al cerrar modales/menus,
 * porque sus compositores redibujan capas adyacentes en cada fade.
 * Eliminado. La estabilidad del sticky se garantiza arreglando los
 * elementos hijos que provocan scroll horizontal anidado (ver fix de
 * reparacion-equipo-line en tpv-custom.css).
 * ============================================================ */


/* ============================================================
 * VANTARIEL: HOVER UNIFICADO - icon teal + underline blanco.
 * Sustituye al hover de fondo gris en los items del menu principal y
 * en el boton overflow (flecha o hamburguesa). Mas ligero, sin flicker
 * en Android WebView / Electron CEF.
 * ============================================================ */
/* Posicionar la linea inferior y la transicion suave.
   IMPORTANTE: NO aplicar el ::after a .dropdown-toggle (Bootstrap lo usa
   para el caret ▼). Excluimos con :not(.dropdown-toggle). El underline
   en dropdown-toggle se hace con un span vacio inyectado o via box-shadow. */
.navbar.bg-vantariel .navbar-nav .nav-item .nav-link {
    position: relative;
    transition: color .12s ease, background-color .15s ease, box-shadow .15s ease;
}
.navbar.bg-vantariel .navbar-nav .nav-item .nav-link:not(.dropdown-toggle)::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    height: 2px;
    background-color: var(--vt-navbar-text, #fff);
    opacity: 0;
    transition: left .15s ease, right .15s ease, opacity .15s ease;
    pointer-events: none;
}
/* Para dropdown-toggles usamos box-shadow inset bottom como underline
   (no rompe el caret ::after de Bootstrap). */
.navbar.bg-vantariel .navbar-nav .nav-item .nav-link.dropdown-toggle {
    transition: color .12s ease, box-shadow .15s ease;
}
/* Hover/show/active: icono teal + linea blanca */
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link,
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link,
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover > .nav-link,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show > .nav-link {
    color: var(--vt-teal, #2cd4b6) !important;
    background-color: transparent !important;
}
/* Active: marcar con color de texto + peso + fondo configurable */
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link {
    font-weight: 600;
    background-color: var(--vt-app-active-item-bg, transparent) !important;
}
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link i,
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link i,
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link i,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover > .nav-link i,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show > .nav-link i {
    color: var(--vt-teal, #2cd4b6) !important;
}
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link:not(.dropdown-toggle)::after,
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link:not(.dropdown-toggle)::after,
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link:not(.dropdown-toggle)::after,
.navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link:not(.dropdown-toggle)::after,
.navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link:not(.dropdown-toggle)::after,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover > .nav-link:not(.dropdown-toggle)::after,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show > .nav-link:not(.dropdown-toggle)::after {
    left: 15%;
    right: 15%;
    opacity: 1;
}
/* Underline para .dropdown-toggle via box-shadow inset (no toca el caret) */
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link.dropdown-toggle,
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link.dropdown-toggle,
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link.dropdown-toggle,
.navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link.dropdown-toggle,
.navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link.dropdown-toggle,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover > .nav-link.dropdown-toggle,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show > .nav-link.dropdown-toggle {
    box-shadow: inset 0 -2px 0 0 var(--vt-navbar-text, #fff);
}
/* Boton overflow (▼) en modo solo-hamburguesa: tambien icon teal + underline,
   sin fondo gris (que provocaba flicker en Android). */
.navbar.bg-vantariel #vtNavbarMainItems.vt-only-overflow + .vt-overflow-wrap.vt-show .vt-overflow-item:hover .vt-overflow-toggle,
.navbar.bg-vantariel #vtNavbarMainItems.vt-only-overflow + .vt-overflow-wrap.vt-show .vt-overflow-item.show .vt-overflow-toggle {
    background-color: transparent !important;
    color: var(--vt-teal, #2cd4b6) !important;
}

/* ============================================================
 * VANTARIEL: HOVER MODES - controlado por data-vt-hover en <html>.
 * Opciones: teal (color enfasis), underline (subrayado), bg (fondo),
 *           dropdown (fondo + deslizamiento), none.
 * El JS vt-appearance.js setea data-vt-hover y --vt-teal dinamicamente.
 * IMPORTANTE: usar #vtNavbarMainItems y .vt-bottom-icons (IDs/classes
 * especificos) para igualar/superar la especificidad de las reglas
 * existentes que tienen background-color: transparent !important.
 * ============================================================ */

/* MODO NONE: sin efecto hover — neutralizar todas las reglas de hover */
html[data-vt-hover="none"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link,
html[data-vt-hover="none"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link,
html[data-vt-hover="none"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link,
html[data-vt-hover="none"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link,
html[data-vt-hover="none"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link,
html[data-vt-hover="none"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover > .nav-link,
html[data-vt-hover="none"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show > .nav-link {
    color: var(--vt-navbar-text, #fff) !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
html[data-vt-hover="none"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link i,
html[data-vt-hover="none"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link i,
html[data-vt-hover="none"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link i,
html[data-vt-hover="none"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link i {
    color: var(--vt-navbar-text, #fff) !important;
}
html[data-vt-hover="none"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover="none"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover="none"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover="none"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover="none"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover="none"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover="none"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show > .nav-link:not(.dropdown-toggle)::after {
    opacity: 0 !important;
}
html[data-vt-hover="none"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link.dropdown-toggle,
html[data-vt-hover="none"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link.dropdown-toggle,
html[data-vt-hover="none"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link.dropdown-toggle,
html[data-vt-hover="none"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link.dropdown-toggle,
html[data-vt-hover="none"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover > .nav-link.dropdown-toggle,
html[data-vt-hover="none"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show > .nav-link.dropdown-toggle {
    box-shadow: none !important;
}

/* MODO BG: fondo translucido al hover, sin cambio de color del icono.
   El active se marca solo con color de texto (sin fondo translucido). */
html[data-vt-hover="bg"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link,
html[data-vt-hover="bg"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link,
html[data-vt-hover="bg"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link,
html[data-vt-hover="bg"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link,
html[data-vt-hover="bg"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover > .nav-link,
html[data-vt-hover="bg"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show > .nav-link {
    background-color: rgba(255, 255, 255, .15) !important;
    color: #fff !important;
}
/* Active en modo bg: solo color de texto + fondo configurable */
html[data-vt-hover="bg"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link {
    background-color: var(--vt-app-active-item-bg, transparent) !important;
    color: var(--vt-navbar-text, #fff) !important;
    font-weight: 600;
}
html[data-vt-hover="bg"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link i,
html[data-vt-hover="bg"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link i,
html[data-vt-hover="bg"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link i,
html[data-vt-hover="bg"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link i {
    color: #fff !important;
}
/* En modo bg, ocultar el underline */
html[data-vt-hover="bg"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover="bg"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover="bg"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover="bg"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover="bg"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover="bg"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover="bg"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show > .nav-link:not(.dropdown-toggle)::after {
    opacity: 0 !important;
}
html[data-vt-hover="bg"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link.dropdown-toggle,
html[data-vt-hover="bg"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link.dropdown-toggle,
html[data-vt-hover="bg"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link.dropdown-toggle,
html[data-vt-hover="bg"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link.dropdown-toggle,
html[data-vt-hover="bg"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover > .nav-link.dropdown-toggle,
html[data-vt-hover="bg"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show > .nav-link.dropdown-toggle {
    box-shadow: none !important;
}

/* MODO UNDERLINE: solo subrayado, sin cambio de color del icono */
html[data-vt-hover="underline"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link,
html[data-vt-hover="underline"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link,
html[data-vt-hover="underline"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link,
html[data-vt-hover="underline"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link,
html[data-vt-hover="underline"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link,
html[data-vt-hover="underline"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover > .nav-link,
html[data-vt-hover="underline"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show > .nav-link {
    color: #fff !important;
    background-color: transparent !important;
}
/* Active en modo underline: solo color + peso + fondo configurable */
html[data-vt-hover="underline"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link {
    font-weight: 600;
    background-color: var(--vt-app-active-item-bg, transparent) !important;
}
html[data-vt-hover="underline"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link i,
html[data-vt-hover="underline"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link i,
html[data-vt-hover="underline"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link i,
html[data-vt-hover="underline"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link i {
    color: #fff !important;
}

/* MODO TEAL (default): color de enfasis + underline — ya implementado arriba.
   No necesita reglas adicionales porque es el comportamiento por defecto.
   --vt-teal es seteado por vt-appearance.js al color de enfasis configurado. */

/* MODO DROPDOWN: estilo de los menus desplegables — fondo translucido +
   deslizamiento de padding-left + border-radius + transition suave.
   Replica el efecto hover de .dropdown-item en los botones de la barra. */
html[data-vt-hover="dropdown"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item > .nav-link,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item > .nav-link,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item > .nav-link {
    border-radius: .375rem;
    transition: background-color .2s ease, color .2s ease, padding-left .2s ease !important;
}
html[data-vt-hover="dropdown"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover > .nav-link,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show > .nav-link {
    background-color: rgba(255, 255, 255, .15) !important;
    color: #fff !important;
    padding-left: 1.75rem;
}
/* Active en modo dropdown: solo color de texto + fondo configurable, sin desplazamiento */
html[data-vt-hover="dropdown"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link {
    background-color: var(--vt-app-active-item-bg, transparent) !important;
    color: var(--vt-navbar-text, #fff) !important;
    padding-left: inherit !important;
    font-weight: 600;
}
html[data-vt-hover="dropdown"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link i,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link i,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link i,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link i {
    color: #fff !important;
}
/* En modo dropdown, ocultar el underline (::after y box-shadow) */
html[data-vt-hover="dropdown"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show > .nav-link:not(.dropdown-toggle)::after {
    opacity: 0 !important;
}
html[data-vt-hover="dropdown"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link.dropdown-toggle,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link.dropdown-toggle,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link.dropdown-toggle,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link.dropdown-toggle,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover > .nav-link.dropdown-toggle,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show > .nav-link.dropdown-toggle {
    box-shadow: none !important;
}

/* ============================================================
 * VANTARIEL: HOVER DE MENUS DESPLEGABLES - controlado por
 * data-vt-dropdown-hover en <html>.
 * Opciones: bg (fondo+deslizamiento), bg-only (fondo solo),
 *           teal (color enfasis), underline (subrayado), none.
 * El comportamiento por defecto (sin atributo) es "bg".
 * ============================================================ */

/* MODO NONE para dropdowns: sin efecto hover */
html[data-vt-dropdown-hover="none"] .navbar.bg-vantariel .dropdown-menu .dropdown-item:hover,
html[data-vt-dropdown-hover="none"] .navbar.bg-vantariel .dropdown-menu .dropdown-item:focus {
    background-color: transparent !important;
    color: inherit !important;
    padding-left: inherit !important;
}

/* MODO TEAL para dropdowns: color de enfasis al hover */
html[data-vt-dropdown-hover="teal"] .navbar.bg-vantariel .dropdown-menu .dropdown-item:hover,
html[data-vt-dropdown-hover="teal"] .navbar.bg-vantariel .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, .08) !important;
    color: var(--vt-teal, #2cd4b6) !important;
    padding-left: 1.75rem;
}

/* MODO UNDERLINE para dropdowns: subrayado al hover */
html[data-vt-dropdown-hover="underline"] .navbar.bg-vantariel .dropdown-menu .dropdown-item {
    position: relative;
}
html[data-vt-dropdown-hover="underline"] .navbar.bg-vantariel .dropdown-menu .dropdown-item:hover,
html[data-vt-dropdown-hover="underline"] .navbar.bg-vantariel .dropdown-menu .dropdown-item:focus {
    background-color: transparent !important;
    color: #fff !important;
    padding-left: inherit !important;
    box-shadow: inset 0 -2px 0 0 var(--vt-teal, #2cd4b6);
}

/* MODO BG-ONLY para dropdowns: fondo translucido SIN desplazamiento */
html[data-vt-dropdown-hover="bg-only"] .navbar.bg-vantariel .dropdown-menu .dropdown-item:hover,
html[data-vt-dropdown-hover="bg-only"] .navbar.bg-vantariel .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, .15) !important;
    color: #fff !important;
    padding-left: inherit !important;
}

/* MODO BG (default) para dropdowns: ya implementado arriba (linea ~591).
   No necesita reglas adicionales — es el comportamiento por defecto. */

/* ============================================================
 * VANTARIEL: FIX FLICKER en Android WebView / Electron CEF.
 * El parpadeo al abrir dropdowns era causado por:
 *  1) El tap-highlight gris/azul que WebView pinta sobre cada elemento
 *     tocado (visible como flash al abrir/cerrar menu).
 *  2) El touch-callout que muestra menu contextual en long-press.
 *  3) Transiciones de background-color sobre areas grandes (ya quitadas).
 * ============================================================ */
.navbar.bg-vantariel,
.navbar.bg-vantariel * {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none;
}
.dropdown-menu,
.dropdown-menu * {
    -webkit-tap-highlight-color: transparent !important;
}
/* Bootstrap añade fade en .modal y .dropdown-menu; en WebView causa
   flash al cerrar. Desactivar la transicion de opacity solo cuando se
   detecte WebView/Electron (clases puestas por vt-app-menu.js). */
html.vt-android .modal.fade,
html.vt-android .modal.fade .modal-dialog,
html.vt-electron .modal.fade,
html.vt-electron .modal.fade .modal-dialog,
html.vt-android .fade,
html.vt-electron .fade {
    transition: none !important;
}
html.vt-android .dropdown-menu,
html.vt-electron .dropdown-menu {
    animation: none !important;
    transition: none !important;
}
/* En Android/Electron desactivar TODAS las transitions de hover en
   dropdown-items (causa flicker al pasar por items al abrir el menu). */
html.vt-android .dropdown-menu .dropdown-item,
html.vt-electron .dropdown-menu .dropdown-item,
html.vt-android .dropdown-menu .dropdown-item *,
html.vt-electron .dropdown-menu .dropdown-item * {
    transition: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
html.vt-android *,
html.vt-electron * {
    -webkit-tap-highlight-color: transparent !important;
}

/* ============================================================
 * VANTARIEL: WebView Android base background. El WebView de la APK
 * tiene fondo blanco por defecto; aunque ya lo cambiamos a #1c2128
 * en MainActivity.java, este CSS extra refuerza el color base por
 * si el WebView renderiza un frame antes de que se aplique. Tambien
 * desactiva backdrop-filter y filter en dropdowns para Android (esos
 * efectos disparan re-composite en cada frame del fade).
 * ============================================================ */
html.vt-android,
html.vt-android body {
    background-color: #292c31 !important;
}
html.vt-android .modal-backdrop,
html.vt-electron .modal-backdrop {
    /* Backdrop sin transicion (en WebView, fade del backdrop = flicker
       porque el compositor recalcula la capa entera cada frame). */
    transition: none !important;
    animation: none !important;
}
html.vt-android .modal,
html.vt-android .modal-dialog,
html.vt-android .modal-content,
html.vt-android .dropdown-menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}
/* Android: sin backdrop-filter, el navbar ::before y los dropdowns
   necesitan fondos mas opacos para simular el efecto acrylic. */
html.vt-android .navbar.bg-vantariel::before {
    background-color: rgba(84, 91, 98, .92);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.vt-android .navbar.bg-vantariel .dropdown-menu {
    background-color: rgba(84, 91, 98, .92) !important;
}
/* Inhibir transform/opacity transitions sobre la navbar y sus hijos
   en WebView Android (las transiciones globales de color/transform que
   afectan a elementos con sticky-top hacen flicker). */
html.vt-android .navbar.bg-vantariel,
html.vt-android .navbar.bg-vantariel * {
    transition: none !important;
}
/* ============================================================
 * ANDROID FLICKER FIX v88 - Anular fades y reflow del modal
 * Bootstrap usa .fade (opacity transition) en modales, dropdowns
 * y alerts y aniade padding-right al body al abrir modal para
 * compensar el scrollbar. En Android WebView ambas cosas causan
 * flicker visible. Aqui las desactivamos solo para Android.
 * ============================================================ */
html.vt-android body {
    /* Anular compensacion de scrollbar (no hay scrollbar visible
       en Android). Bootstrap escribe padding-right inline al abrir
       modal -> reflow -> menu/dropdown parpadea al cerrarse. */
    padding-right: 0 !important;
}
html.vt-android .modal.fade,
html.vt-android .modal.fade .modal-dialog,
html.vt-android .dropdown-menu,
html.vt-android .fade,
html.vt-android .collapse,
html.vt-android .collapsing,
html.vt-android .alert,
html.vt-android .toast,
html.vt-android .tooltip,
html.vt-android .popover {
    /* Sin transicion ni animacion: aparecen/desaparecen instantaneo.
       Evita el flash entre frames en WebView Chromium de Android. */
    transition: none !important;
    animation: none !important;
}
html.vt-android .modal.fade .modal-dialog {
    transform: none !important;
}
html.vt-android .collapsing {
    /* .collapsing usa height transition; sin transicion debe
       comportarse como .collapse normal. */
    height: auto !important;
    overflow: visible !important;
}
/* Forzar capas de composicion estables para elementos que aparecen
   sobre el contenido. will-change controlado evita que el compositor
   destruya/recree capas cada vez. */
html.vt-android .modal,
html.vt-android .modal-backdrop,
html.vt-android .dropdown-menu {
    will-change: auto !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
/* Loader / spinner / overlay de carga: sin fade al ocultarse. */
html.vt-android .vt-loading,
html.vt-android .page-loader,
html.vt-android .loading-overlay,
html.vt-android #vt-page-loader,
html.vt-android .spinner-border,
html.vt-android .spinner-grow {
    transition: none !important;
    animation: none !important;
}

/* ============================================================
 * GHOST IMAGE FIX v89 - WebView Android
 * Sintoma: al cerrar un dropdown/menu para abrir un modal, el menu
 * cerrado parpadea durante 1 frame mostrando una imagen residual
 * de si mismo antes de desaparecer. Lo mismo en selects de
 * configuracion al cambiar de opcion (parpadea la opcion previa).
 * Causa: el compositor del WebView mantiene el surface buffer
 * anterior durante 1 frame despues de display:none. Solucion:
 *  1) Promover cada overlay a su propia capa GPU (translate3d) para
 *     que su descarte no arrastre capas adyacentes.
 *  2) Al ocultarse, ademas de display:none aplicar visibility:hidden
 *     + opacity:0 para que el compositor descarte la tile YA.
 *  3) contain:layout style paint en overlays para aislar repaints.
 * ============================================================ */
html.vt-android .dropdown-menu,
html.vt-android .modal,
html.vt-android .modal-backdrop,
html.vt-android .tooltip,
html.vt-android .popover,
html.vt-android .toast {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    contain: layout style paint;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
html.vt-android .dropdown-menu:not(.show) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
html.vt-android .modal:not(.show) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Forzar isolation en el contenido principal para que los overlays
   no contaminen capas del documento. */
html.vt-android body > main,
html.vt-android body > .container-fluid,
html.vt-android body > nav {
    isolation: isolate;
}
/* Botones, links y elementos seleccionables: al cambiar de estado
   activo no debe quedar residuo del estado anterior. */
html.vt-android .btn,
html.vt-android .nav-link,
html.vt-android .list-group-item,
html.vt-android .dropdown-item,
html.vt-android option,
html.vt-android select,
html.vt-android input[type="radio"],
html.vt-android input[type="checkbox"] {
    transition: none !important;
    animation: none !important;
}
/* Forzar reflow inmediato al cambiar :active/.active para que el
   compositor no muestre el frame anterior. */
html.vt-android .btn:active,
html.vt-android .nav-link:active,
html.vt-android .list-group-item:active,
html.vt-android .dropdown-item:active,
html.vt-android .btn.active,
html.vt-android .nav-link.active,
html.vt-android .list-group-item.active,
html.vt-android .dropdown-item.active {
    transform: translateZ(0);
}

/* ==================================================================
 * VANTARIEL: EditUser > pestana "Impresoras" (EditTpvUserPrinter)
 * Botones Undo + Save (custom action) alineados a la derecha con 7px
 * de separacion. Los botones custom de FS se renderizan dentro del
 * <div class="col"> de la fila 'actions'.
 * ================================================================== */
html body #EditTpvUserPrinter .form-row > .col,
html body #EditTpvUserPrinter .form-row > .col-auto {
    text-align: right !important;
}
html body #EditTpvUserPrinter .form-row > .col > .btn,
html body #EditTpvUserPrinter .form-row > .col-auto > .btn,
html body #EditTpvUserPrinter .form-row > .col > a.btn,
html body #EditTpvUserPrinter .form-row > .col-auto > a.btn {
    margin-left: 7px !important;
}
html body #EditTpvUserPrinter .form-row > .col > .btn:first-child,
html body #EditTpvUserPrinter .form-row > .col-auto > .btn:first-child,
html body #EditTpvUserPrinter .form-row > .col > a.btn:first-child,
html body #EditTpvUserPrinter .form-row > .col-auto > a.btn:first-child {
    margin-left: 0 !important;
}

/* ============================================================
 * VANTARIEL: jQuery-UI dark theme overrides v100
 * jquery-ui.min.css define fondos blancos (#fff, #e9e9e9) en
 * .ui-widget-content, .ui-widget-header, .ui-datepicker, etc.
 * Estos overrides aseguran que los widgets de jquery-ui
 * (datepickers, autocompletes, dialogs) usen el tema oscuro.
 * ============================================================ */
html body .ui-widget-content,
html body .ui-widget.ui-widget-content {
    background-color: var(--vt-bg-elev) !important;
    color: var(--vt-text) !important;
    border-color: var(--vt-border) !important;
}
html body .ui-widget-header,
html body .ui-widget.ui-widget-header {
    background-color: var(--vt-bg-elev-2) !important;
    color: var(--vt-text) !important;
    border-color: var(--vt-border) !important;
}

/* ============================================================
 * VANTARIEL: Barra principal flotante (vt-floating)
 * ------------------------------------------------------------
 * La barra siempre cubre todo el ancho disponible, dejando un
 * margen configurable (por defecto 5px) en los extremos laterales
 * y en la parte superior. Esquinas redondeadas estilo iOS 26
 * (usa la misma variable --vt-r-md que el resto de la UI).
 *
 * Variables CSS (seteadas por vt-appearance.js):
 *   --vt-navbar-float-margin: separacion del viewport (px)
 *   --vt-navbar-scale: escala general de la barra (0.8 - 1.3)
 *   --vt-navbar-item-scale: escala de items/iconos (0.8 - 1.3)
 * ============================================================ */
:root {
    --vt-navbar-float-margin: 2px;
    --vt-navbar-item-scale: 1;
}

/* Modo flotante: separacion + ancho completo + esquinas iOS */
.navbar.bg-vantariel.vt-floating {
    /* Separacion del viewport: arriba y a los lados.
       margin-left/right: auto centra horizontalmente. */
    margin: var(--vt-navbar-float-margin, 2px) auto 0 auto !important;
    /* Ancho: cubre todo el ancho disponible dejando (margin) px
       libres a cada lado. Siempre el mismo tamaño horizontal. */
    width: calc(100vw - 2 * var(--vt-navbar-float-margin, 2px)) !important;
    max-width: calc(100vw - 2 * var(--vt-navbar-float-margin, 2px)) !important;
    /* Esquinas redondeadas estilo iOS 26 (mismo radio que navbars). */
    border-radius: var(--vt-r-md, 14px);
    /* Al hacer scroll, la barra se pega a (margin) px del top
       para mantener siempre la separacion superior. */
    top: var(--vt-navbar-float-margin, 2px) !important;
    /* Sombra exterior para efecto de elevacion. */
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28),
                0 2px 8px rgba(0, 0, 0, .18) !important;
    /* El padding derecho se restaura para que el contenido
       no toque los bordes redondeados. */
    padding: 0 .75rem !important;
    /* Escala general: afecta la altura minima de la barra. */
    min-height: 3.25rem !important;
    /* overflow: visible para que los dropdowns se vean completos. */
    overflow: visible;
}

/* El ::before del navbar flotante hereda el border-radius
   y respeta los limites del navbar (no se sale de los bordes). */
.navbar.bg-vantariel.vt-floating::before {
    border-radius: var(--vt-r-md, 14px);
    /* Borde completo sutil. */
    border: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

/* Los fondos solidos de los grupos laterales (brand izquierdo e iconos
   derechos) deben llegar hasta los extremos de la barra — el padding
   lateral de .75rem dejaba una franja del glass debajo que se veia
   como "segunda capa" en las esquinas. Margen negativo + radius igual
   al de la barra para que sigan la curva en ambas esquinas. */
.navbar.bg-vantariel.vt-floating .navbar-brand {
    margin-left: -.75rem !important;
    border-top-left-radius: var(--vt-r-md, 14px);
    border-bottom-left-radius: var(--vt-r-md, 14px);
}
.navbar.bg-vantariel.vt-floating .vt-bottom-icons {
    margin-right: -.75rem !important;
    border-top-right-radius: var(--vt-r-md, 14px);
    border-bottom-right-radius: var(--vt-r-md, 14px);
}
/* En Electron la barra es pestaña: esquinas superiores rectas. */
html.vt-electron .navbar.bg-vantariel.vt-floating .navbar-brand {
    border-top-left-radius: 0;
}
html.vt-electron .navbar.bg-vantariel.vt-floating .vt-bottom-icons {
    border-top-right-radius: 0;
}

/* Escala de items: afecta padding, font-size de iconos y texto.
   Se aplica via calc() sobre los valores base. */
.navbar.bg-vantariel.vt-floating .navbar-nav .nav-link {
    padding-left: calc(.75rem * var(--vt-navbar-item-scale, 1)) !important;
    padding-right: calc(.75rem * var(--vt-navbar-item-scale, 1)) !important;
    font-size: calc(.95rem * var(--vt-navbar-item-scale, 1));
}
.navbar.bg-vantariel.vt-floating .navbar-nav .vt-menu-icon {
    font-size: calc(1rem * var(--vt-navbar-item-scale, 1)) !important;
}
.navbar.bg-vantariel.vt-floating .navbar-brand-logo {
    height: 38px !important;
}
.navbar.bg-vantariel.vt-floating .vt-bottom-icons > .nav-item > .nav-link {
    padding: calc(.45rem * var(--vt-navbar-item-scale, 1))
             calc(.65rem * var(--vt-navbar-item-scale, 1)) !important;
}

/* El contenido de la pagina necesita un offset superior para
   que no quede pegado a la barra flotante al hacer scroll.
   Se aplica al contenedor que va justo despues del navbar. */
.navbar.bg-vantariel.vt-floating + #vtPageHeader {
    margin-top: calc(var(--vt-navbar-float-margin, 2px) * .5);
}

/* En pantallas pequenas, reducimos el margen para no perder espacio. */
@media (max-width: 768px) {
    :root {
        --vt-navbar-float-margin: 2px;
    }
}
@media (max-width: 575.98px) {
    :root {
        --vt-navbar-float-margin: 2px;
    }
    .navbar.bg-vantariel.vt-floating {
        padding: 0 .5rem !important;
    }
}

/* En modo impresion, la barra flotante se comporta como la normal. */
@media print {
    .navbar.bg-vantariel.vt-floating {
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100% !important;
        top: 0 !important;
    }
    .navbar.bg-vantariel.vt-floating::before {
        border-radius: 0 !important;
    }
}

/* ============================================================
 * VANTARIEL ELECTRON: barra-pestana pegada al borde superior
 * ------------------------------------------------------------
 * Dentro de la app Electron la barra va SIEMPRE pegada arriba (el
 * ajuste "Separacion de la barra" del modal solo actua en los
 * margenes laterales). Esquinas INFERIORES redondas; las superiores
 * llevan redondeo INVERTIDO hacia afuera: dos "aletas" que suben a
 * los lados y funden la barra con el marco de la ventana (efecto
 * pestaña). Sin borde ni highlight superior — barra y marco deben
 * verse como una sola pieza.
 * Las aletas se pintan en el ::after del navbar: dos cuartos de
 * disco con el color del fondo glass (--vt-app-active-navbar-bg)
 * posicionados FUERA del rectangulo, en los margenes laterales.
 * ============================================================ */
html.vt-electron .navbar.bg-vantariel.vt-floating {
    /* Pegada al top: sin margen ni offset sticky superior. */
    margin: 0 auto 0 auto !important;
    top: 0 !important;
    border-radius: 0 !important;
    /* Sin sombra rectangular: estorbaria las aletas. */
    box-shadow: none !important;
}
html.vt-electron .navbar.bg-vantariel.vt-floating::before {
    border-top: none !important;
    /* Esquinas inferiores redondas; las superiores quedan rectas
       (las aletas del ::after dibujan la curva hacia el marco). */
    border-radius: 0 0 var(--vt-r-md, 14px) var(--vt-r-md, 14px) !important;
    /* Sin el highlight claro superior (inset 1px 1px): creaba una linea
       que separaba la barra del marco del shell. */
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25),
                inset 0 0 8px rgba(255, 255, 255, .03) !important;
}
/* En Electron la barra queda recta pegada al marco superior (sin
   curvaturas hacia afuera). */

/* ============================================================
 * VANTARIEL: CELDAS DE LA BARRA PRINCIPAL (ajustes finales).
 * Estas reglas van AL FINAL del archivo para ganar a las reglas
 * de los modos hover (bg/dropdown/teal/underline/none) definidas
 * mas arriba:
 * - El nav-link de los items centrales NUNCA pinta fondo, underline
 *   (::after) ni box-shadow propio: todo lo hace el ::before de la
 *   celda, que cubre de separador a separador.
 * - Los iconos derechos (.vt-bottom-icons) usan el mismo sistema de
 *   celda ::before para que su hover/active se vea igual.
 * - Los dropdowns del navbar se separan un poco de la barra.
 * ============================================================ */

/* --- 1) Neutralizar efectos propios del nav-link en centrales ---
   IMPORTANTE: los selectores incluyen los estados (:hover/.show/
   .active/:focus) para igualar la especificidad de las reglas de los
   modos hover definidas mas arriba; al estar despues ganan. */
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item > .nav-link,
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link,
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link,
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link,
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item > .nav-link:focus,
html[data-vt-hover] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item > .nav-link,
html[data-vt-hover] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link,
html[data-vt-hover] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link,
html[data-vt-hover] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link,
html[data-vt-hover] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item > .nav-link:focus {
    background-color: transparent !important;
    box-shadow: none !important;
}
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item > .nav-link:not(.dropdown-toggle)::after,
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link:not(.dropdown-toggle)::after,
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link:not(.dropdown-toggle)::after,
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link:not(.dropdown-toggle)::after,
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item > .nav-link:not(.dropdown-toggle):focus::after,
html[data-vt-hover] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item:hover > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.show > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link:not(.dropdown-toggle)::after {
    left: 50% !important;
    right: 50% !important;
    opacity: 0 !important;
}

/* --- 2) Celda ::before para los iconos derechos y el boton "▼" del
   overflow (el switch de tema queda excluido: es un grupo de botones
   con su propio efecto) --- */
.navbar.bg-vantariel .vt-bottom-icons > .nav-item {
    position: relative;
}
.navbar.bg-vantariel .vt-bottom-icons > .nav-item:not(.vt-theme-switch-li)::before,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item::before {
    content: '';
    position: absolute;
    /* Inset vertical minimo + esquinas suaves: misma celda que los
       botones centrales. +.5px laterales: no solapa la linea
       separadora (▼) ni los bordes del grupo. */
    top: 2px; bottom: 2px; left: .5px; right: .5px;
    background-color: transparent;
    z-index: 1;
    pointer-events: none;
    border-radius: 5px;
}
/* El boton ▼ lleva ademas la linea separadora (forma parte del
   grupo central de botones) — en su ::after, cortada 5px arriba y
   abajo como las de los centrales. */
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item::after {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    /* -.5px: centrada en el borde, sin solape con los fondos. */
    left: -.5px;
    width: 0;
    z-index: 1;
    pointer-events: none;
    border-left: 1px solid var(--vt-nav-sep-soft, rgba(0, 0, 0, .30));
}
.navbar.bg-vantariel .vt-bottom-icons > .nav-item > .nav-link,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item > .nav-link {
    position: relative;
    z-index: 2;
}
/* Default/teal/underline: underline a ancho completo de la celda. */
.navbar.bg-vantariel .vt-bottom-icons > .nav-item:not(.vt-theme-switch-li):hover::before,
.navbar.bg-vantariel .vt-bottom-icons > .nav-item:not(.vt-theme-switch-li).show::before,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover::before,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show::before {
    border-bottom: 2px solid var(--vt-navbar-text, #fff);
}
/* bg/dropdown: fondo translucido a ancho completo de la celda. */
html[data-vt-hover="bg"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:not(.vt-theme-switch-li):hover::before,
html[data-vt-hover="bg"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:not(.vt-theme-switch-li).show::before,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:not(.vt-theme-switch-li):hover::before,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:not(.vt-theme-switch-li).show::before,
html[data-vt-hover="bg"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover::before,
html[data-vt-hover="bg"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show::before,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover::before,
html[data-vt-hover="dropdown"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show::before {
    background-color: rgba(255, 255, 255, .15);
    border-bottom: none;
}
/* none: sin efecto. */
html[data-vt-hover="none"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:not(.vt-theme-switch-li):hover::before,
html[data-vt-hover="none"] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:not(.vt-theme-switch-li).show::before,
html[data-vt-hover="none"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover::before,
html[data-vt-hover="none"] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show::before {
    border-bottom: none;
    background-color: transparent;
}
/* El nav-link de los iconos derechos y del boton ▼ tampoco pinta
   efectos propios: los pinta la celda. */
.navbar.bg-vantariel .vt-bottom-icons > .nav-item > .nav-link,
.navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link,
.navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link,
.navbar.bg-vantariel .vt-bottom-icons > .nav-item.active > .nav-link,
.navbar.bg-vantariel .vt-bottom-icons > .nav-item > .nav-link:focus,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item > .nav-link,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover > .nav-link,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show > .nav-link,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item > .nav-link:focus,
html[data-vt-hover] .navbar.bg-vantariel .vt-bottom-icons > .nav-item > .nav-link,
html[data-vt-hover] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link,
html[data-vt-hover] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link,
html[data-vt-hover] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.active > .nav-link,
html[data-vt-hover] .navbar.bg-vantariel .vt-bottom-icons > .nav-item > .nav-link:focus,
html[data-vt-hover] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item > .nav-link,
html[data-vt-hover] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover > .nav-link,
html[data-vt-hover] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show > .nav-link,
html[data-vt-hover] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item > .nav-link:focus {
    background-color: transparent !important;
    box-shadow: none !important;
}
.navbar.bg-vantariel .vt-bottom-icons > .nav-item > .nav-link:not(.dropdown-toggle)::after,
.navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link:not(.dropdown-toggle)::after,
.navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link:not(.dropdown-toggle)::after,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item > .nav-link:not(.dropdown-toggle)::after,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover > .nav-link:not(.dropdown-toggle)::after,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover] .navbar.bg-vantariel .vt-bottom-icons > .nav-item > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover] .navbar.bg-vantariel .vt-bottom-icons > .nav-item:hover > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.show > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item:hover > .nav-link:not(.dropdown-toggle)::after,
html[data-vt-hover] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.show > .nav-link:not(.dropdown-toggle)::after {
    left: 50% !important;
    right: 50% !important;
    opacity: 0 !important;
}

/* --- 3) Separacion entre la barra y sus dropdowns (efecto flotante) --- */
.navbar.bg-vantariel .nav-item > .dropdown-menu {
    margin-top: 7px;
}

/* --- 4) Sin marca de "boton en uso": el item activo se ve igual que
   el resto.
   - font-weight: normal SIEMPRE (las reglas del activo ponian 600, lo
     que hacia que en hover el texto se viera mas grueso que los demas).
   - color e iconos: neutralizados solo EN REPOSO (:not(:hover):
     :not(.show)) — en hover el color coincide con el de los demas
     botones en hover, asi el efecto se ve identico. */
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link,
.navbar.bg-vantariel .vt-bottom-icons > .nav-item.active > .nav-link,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.active > .nav-link,
html[data-vt-hover] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active > .nav-link,
html[data-vt-hover] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.active > .nav-link,
html[data-vt-hover] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.active > .nav-link {
    font-weight: normal !important;
}
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active:not(:hover):not(.show) > .nav-link,
.navbar.bg-vantariel .vt-bottom-icons > .nav-item.active:not(:hover):not(.show) > .nav-link,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.active:not(:hover):not(.show) > .nav-link,
html[data-vt-hover] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active:not(:hover):not(.show) > .nav-link,
html[data-vt-hover] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.active:not(:hover):not(.show) > .nav-link,
html[data-vt-hover] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.active:not(:hover):not(.show) > .nav-link {
    color: var(--vt-navbar-text, rgba(255, 255, 255, .92)) !important;
}
.navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active:not(:hover):not(.show) > .nav-link i,
.navbar.bg-vantariel .vt-bottom-icons > .nav-item.active:not(:hover):not(.show) > .nav-link i,
.navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.active:not(:hover):not(.show) > .nav-link i,
html[data-vt-hover] .navbar.bg-vantariel #vtNavbarMainItems > li.nav-item.active:not(:hover):not(.show) > .nav-link i,
html[data-vt-hover] .navbar.bg-vantariel .vt-bottom-icons > .nav-item.active:not(:hover):not(.show) > .nav-link i,
html[data-vt-hover] .navbar.bg-vantariel .vt-overflow-wrap > .vt-overflow-item.active:not(:hover):not(.show) > .nav-link i {
    color: inherit !important;
}
html body .ui-state-default,
html body .ui-widget-content .ui-state-default,
html body .ui-widget-header .ui-state-default {
    background-color: var(--vt-bg-elev-2) !important;
    color: var(--vt-text) !important;
    border-color: var(--vt-border) !important;
}
html body .ui-state-hover,
html body .ui-widget-content .ui-state-hover,
html body .ui-widget-header .ui-state-hover,
html body .ui-state-focus,
html body .ui-widget-content .ui-state-focus,
html body .ui-widget-header .ui-state-focus {
    background-color: var(--vt-gray-dark) !important;
    color: var(--vt-text) !important;
    border-color: var(--vt-accent) !important;
}
html body .ui-state-active,
html body .ui-widget-content .ui-state-active,
html body .ui-widget-header .ui-state-active {
    background-color: var(--vt-accent) !important;
    color: #ffffff !important;
    border-color: var(--vt-accent-bright) !important;
}
html body .ui-state-highlight,
html body .ui-widget-content .ui-state-highlight,
html body .ui-widget-header .ui-state-highlight {
    background-color: rgba(var(--vt-warning-rgb), .2) !important;
    color: var(--vt-warning-fg) !important;
    border-color: rgba(var(--vt-warning-rgb), .5) !important;
}
html body .ui-datepicker {
    background-color: var(--vt-bg-elev) !important;
    border-color: var(--vt-border) !important;
    color: var(--vt-text) !important;
}
html body .ui-datepicker .ui-datepicker-header {
    background-color: var(--vt-bg-elev-2) !important;
    color: var(--vt-text) !important;
    border-color: var(--vt-border) !important;
}
html body .ui-datepicker .ui-datepicker-calendar td a,
html body .ui-datepicker .ui-datepicker-calendar td span {
    color: var(--vt-text) !important;
}
html body .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a {
    background-color: rgba(var(--vt-info-rgb), .2) !important;
    border-color: rgba(var(--vt-info-rgb), .5) !important;
}
html body .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a {
    background-color: var(--vt-accent) !important;
    color: #ffffff !important;
}
html body .ui-autocomplete {
    background-color: var(--vt-bg-elev) !important;
    color: var(--vt-text) !important;
    border-color: var(--vt-border) !important;
}
html body .ui-autocomplete .ui-menu-item-wrapper {
    color: var(--vt-text) !important;
}
html body .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
    background-color: var(--vt-gray-dark) !important;
    color: var(--vt-text) !important;
}
html body .ui-menu {
    background-color: var(--vt-bg-elev) !important;
    color: var(--vt-text) !important;
    border-color: var(--vt-border) !important;
}
html body .ui-menu .ui-menu-item {
    color: var(--vt-text) !important;
}
html body .ui-dialog {
    background-color: var(--vt-bg-elev) !important;
    color: var(--vt-text) !important;
    border-color: var(--vt-border) !important;
}
html body .ui-dialog .ui-dialog-titlebar {
    background-color: var(--vt-bg-elev-2) !important;
    color: var(--vt-text) !important;
    border-color: var(--vt-border) !important;
}
html body .ui-dialog .ui-dialog-buttonpane {
    background-color: var(--vt-bg-elev) !important;
    border-color: var(--vt-border) !important;
}
html body .ui-button,
html body .ui-button:hover,
html body .ui-button:active {
    background-color: var(--vt-bg-elev-2) !important;
    color: var(--vt-text) !important;
    border-color: var(--vt-border) !important;
}
html body .ui-tooltip {
    background-color: var(--vt-bg-elev-2) !important;
    color: var(--vt-text) !important;
    border-color: var(--vt-border) !important;
}
html body .ui-spinner-input {
    background-color: var(--vt-bg-elev-2) !important;
    color: var(--vt-text) !important;
    border-color: var(--vt-border) !important;
}
html body .ui-icon {
    filter: invert(0.9) !important;
}

/* ============================================================
 * VANTARIEL: BOTONES ATRAS / ADELANTE (vt-nav-history.js)
 * Grupo propio separado del resto de la fila de botones.
 * ============================================================ */
.vt-nav-hist-group {
    /* Separacion del grupo siguiente (recargar, opciones...) para que
       no queden empegotados. */
    margin-right: .5rem;
}
/* El icono de "Adelante" es el mismo fa-arrow-left espejado
   horizontalmente — mismo diseno invertido a la derecha. */
.vt-nav-hist-flip {
    transform: scaleX(-1);
}
/* Al hacer scroll hacia abajo el grupo queda fijo debajo de la barra
   principal, en su misma posicion horizontal — boton flotante. */
.vt-nav-hist-group.vt-nav-hist-float {
    position: fixed;
    z-index: 1030;
    /* sombra sutil para el estado flotante */
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35));
}