#app {
    min-height: 50vh;
}

/* ==== ESTILOS PERSONALIZADOS MASTER / MENÚ ==== */

/* Estado inicial: mientras no está “listo” */
body.is-loading .page-main {
    min-height: 100vh; /* empuja el footer fuera del primer pantallazo */
}

/* Un placeholder simple (puedes hacerlo más bonito tipo skeleton si quieres) */
.page-skeleton {
    display: none;
    height: 100vh; /* reserva visual mientras carga */
}

body.is-loading .page-skeleton {
    display: block;
}

/* Cuando ya está listo, el wrapper vuelve a tamaño natural */
body.is-ready .page-main {
    min-height: 0;
}

body.is-ready .page-skeleton {
    display: none;
}


/* 1) Variables de tema (puedes sobrescribirlas desde servidor si lo deseas) */
:root {
    /* Colores de marca (por defecto: los que dices que usa tu hoja actual) */
    --c-primary: #38a7bb; /* antes: #38a7bb */
    --c-secondary: #2c8494; /* antes: #2c8494 */
    /* Utilidades derivadas */
    --c-primary-rgb: 56 167 187; /* para rgba: rgb(var(--c-primary-rgb) / A) */
    --c-secondary-rgb: 44 132 148;
    /* Contrastes de texto sobre fondo de marca (ajústalo si tu marca exige negro) */
    --on-primary: #fff;
    --on-secondary: #fff;
    /* Estados/variantes comunes */
    --c-primary-hover: color-mix(in srgb, var(--c-primary) 85%, black); /* un tono más oscuro */
    --c-primary-weak: color-mix(in srgb, var(--c-primary) 60%, white); /* versión clara (chips/active suaves) */
    /* Sombras/anillos/overlays */
    --ring-primary: rgb(var(--c-primary-rgb) / .25);
    --overlay-primary-60: rgb(var(--c-primary-rgb) / .60);
    --overlay-primary-90: rgb(var(--c-primary-rgb) / .90);
    --ring-effect: rgb(var(--c-effect-rgb) / .25);
    --hover-bg: rgb(var(--c-primary-rgb) / .50);
    --hover-bdr: rgb(var(--c-effect-rgb) / .80);
    --menu-hover-alpha: .6;
    --submenu-hover-alpha: .5;
    --navbar-h-noBC: 0px;
}

.inicioSesion {
    float: left;
    width: 350px;
    margin-left: 10px;
}

.registro {
    clear: right;
    margin-left: 350px;
}

.nodoSeleccionado:hover .subSeleccionado {
    text-decoration: underline !important;
}

.fixed-bottom {
    z-index: initial;
}

.row-flex {
    display: flex;
    flex-wrap: wrap;
}

#ulListaSubcat {
    max-height: 400px !important;
}

.container-wide {
    max-width: 1500px !important;
}

.menu-large {
    max-width: 180px !important;
}

/* barra de progreso scroll */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    z-index: 10;
    pointer-events: none;
}

    #scroll-progress > span {
        display: block;
        height: 100%;
        width: 100%;
        transform-origin: left center;
        transform: scaleX(0);
        background: var(--c-primary, #38a7bb);
    }

/*************/
#navbar {
    background-color: var(--bg-color-texto-menu);
}

#ulListaSubcat {
    background-color: var(--bg-color-menu);
    color: var(--bg-color-texto-menu);
}

/* NAV ancho/scroll conservando tus clases */
#navbar .container-wide {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.navbar-brand {
    flex: 0 0 auto;
    margin-right: 15px;
}

#navigation {
    flex: 0 1 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

    #navigation .navbar-nav {
        display: flex;
        flex-wrap: nowrap;
        margin: 0;
        padding: 0;
    }

        #navigation .navbar-nav .nav-item {
            flex: 0 0 auto;
            max-width: 180px;
            text-align: center;
        }

            #navigation .navbar-nav .nav-item a {
                white-space: normal;
                word-wrap: break-word;
                display: flex;
            }

#navbar .dropdown-menu .dropdown-item {
    white-space: normal;
}

    #navbar .dropdown-menu .dropdown-item.small {
        font-size: .9rem;
        opacity: .85;
    }

#navbar .dropdown-menu .nav-item,
#ulListaSubcat .nav-item {
    text-align: left;
}

#navbar .dropdown-menu .nav-link,
#ulListaSubcat .nav-link {
    text-align: left;
}

/* Mantén centrado cuando el submenu es de tipo CARD */
#ulListaSubcat .nav-item.text-center,
#ulListaSubcat .nav-item.text-center .nav-link {
    text-align: center;
}

/* Quita holguras del título */
#ulListaSubcat .nav-link h5 {
    margin: 0;
}

/* === COLORES MENÚ PRINCIPAL === */

/* fondo del navbar: fija el color incluso cuando se vuelve sticky */
header.nav-holder .navbar,
header.nav-holder.make-sticky .navbar,
header.nav-holder.is-sticky .navbar,
header.nav-holder .navbar.navbar-sticky,
header.nav-holder .navbar.fixed-top {
    background-color: var(--bg-color-menu) !important;
    background-image: none !important;
}

/* color base de los enlaces del menú que pinta VUE */
#navigation .navbar-nav .nav-link,
#navigation .navbar-nav .subSeleccionado,
#navigation .navbar-brand {
    color: var(--bg-color-texto-menu) !important;
}

    /* títulos dentro del megamenú (heredan el color) */
    #navigation .navbar-nav .nav-link h5 {
        color: inherit !important;
    }

    /* hover/activo/focus */
    #navigation .navbar-nav .nav-link:hover,
    #navigation .navbar-nav .nav-link:focus,
    #navigation .navbar-nav .nav-link.active {
        color: var(--c-primary) !important;
    }

/* === DROPDOWNS / MEGAMENÚ === */
#navbar .dropdown-menu,
#ulListaSubcat {
    background-color: var(--bg-color-menu) !important;
    color: var(--bg-color-texto-menu) !important;
    border-color: rgba(var(--c-primary-rgb), .25) !important;
}

    #navbar .dropdown-item,
    #ulListaSubcat .nav-link,
    #ulListaSubcat .dropdown-item {
        color: var(--bg-color-texto-menu) !important;
    }

        #navbar .dropdown-item:hover,
        #navbar .dropdown-item:focus,
        #ulListaSubcat .nav-link:hover,
        #ulListaSubcat .dropdown-item:hover,
        #ulListaSubcat .dropdown-item:focus {
            color: var(--c-primary) !important;
            background-color: rgba(var(--c-primary-rgb), .08) !important;
        }

/* hamburguesa (móvil) */
#navbar .navbar-toggler {
    border-color: var(--bg-color-texto-menu) !important;
}

    #navbar .navbar-toggler:hover, #navbar .navbar-toggler:focus {
        background: var(--hover-bg) !important;
    }

    #navbar .navbar-toggler .fa {
        color: var(--bg-color-texto-menu) !important;
    }

        #navbar .navbar-toggler .fa:hover, #navbar .navbar-toggler .fa:focus {
            background: var(--hover-bg) !important;
        }

/* === SCROLLBAR VERTICAL PARA EL MEGAMENÚ (#ulListaSubcat) === */

/* Firefox */
#ulListaSubcat {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb, rgba(0,0,0,.35)) var(--bg-color-menu);
}

    /* WebKit (Chrome / Edge / Safari) */
    #ulListaSubcat::-webkit-scrollbar {
        width: 8px; /* ancho de la barra vertical */
    }

    #ulListaSubcat::-webkit-scrollbar-track {
        background: var(--bg-color-menu); /* fondo igual que el menú */
    }

    #ulListaSubcat::-webkit-scrollbar-thumb {
        background-color: var(--scroll-thumb, rgba(0,0,0,.35));
        border-radius: 999px;
        border: 2px solid var(--bg-color-menu); /* borde del color del fondo → evita “hueco transparente” */
        background-clip: padding-box;
    }

/* neutralizar bg-* de Bootstrap si pisa el fondo */
header.nav-holder .navbar[class*="bg-"] {
    background-color: var(--bg-color-menu) !important;
}

/* === SCROLLBAR DISCRETO PARA #navigation === */
/* Firefox */
#navigation {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb, rgba(0,0,0,.25)) transparent;
}

    /* WebKit (Chrome/Edge/Safari) */
    #navigation::-webkit-scrollbar {
        height: 4px;
        background: transparent;
    }

    #navigation:hover::-webkit-scrollbar {
        height: 8px;
    }

    #navigation::-webkit-scrollbar-track {
        background: transparent;
    }

    #navigation::-webkit-scrollbar-thumb {
        background-color: var(--scroll-thumb, rgba(0,0,0,.25));
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }

    #navigation:hover::-webkit-scrollbar-thumb {
        background-color: var(--scroll-thumb-hover, rgba(0,0,0,.55));
    }

    #navigation::-webkit-scrollbar-track-piece:start {
        margin-left: 12px;
    }

    #navigation::-webkit-scrollbar-track-piece:end {
        margin-right: 12px;
    }

/* Vertical: anidar debajo del padre */
#ulListaSubcat .nav-item {
    display: block !important;
}

#ulListaSubcat .nav-link {
    display: block !important;
}

#ulListaSubcat .list-unstyled .list-unstyled {
    margin-left: 1rem;
}

/* ---- Megamenú: dejamos que JS ponga el ancho ---- */
:root {
    --submenu-aside-w: 260px; /* hueco para columna de imagen */
    --vc-main-w: 400px; /* ancho panel principal VC */
    --vc-sub-w: 400px; /* ancho panel submenús VC */
}

#navbar .menu-large > .dropdown-menu.megamenu {
    padding: 20px;
    margin-top: -1px;
    left: 0;
    transform: none;
    /* anulamos anchos heredados que lo fijaban a 100%/1500px */
    width: auto !important;
    max-width: none !important;
}

/* un mínimo amable para cada columna de enlaces */
#navbar .menu-large .megamenu .list-unstyled {
    min-width: 220px;
}

    #navbar .menu-large .megamenu .list-unstyled .nav-item {
        min-width: 220px;
    }

/* === FORMATO VC: menú hamburguesa lateral === */

/* Panel lateral usando el propio #navigation */
body.menu-vc #navbar .navbar-collapse {
    position: fixed;
    top: var(--navbar-h-noBC, 0px);
    left: -100%;
    height: calc(100vh - var(--navbar-h-noBC, 0px));
    width: var(--vc-main-w);
    max-width: 80%;
    padding: 1rem;
    background-color: var(--bg-color-menu);
    color: var(--bg-color-texto-menu);
    box-shadow: 2px 0 8px rgba(0,0,0,.25);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    transform: none; /* <- importante */
    transition: left .6s ease-out;
    z-index: 1050;
}

    /* Cuando Bootstrap añade .show → panel visible */
    body.menu-vc #navbar .navbar-collapse.show {
        left: 0;
    }

/* UL principal VC */
body.menu-vc #navbar .vc-menu {
    margin: 0;
    padding: .5rem 0 1rem;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

    body.menu-vc #navbar .vc-menu > li {
        margin-bottom: .5rem;
        max-width: var(--vc-main-w)!important;
    }

/* Link padre VC: texto + flecha */
body.menu-vc #navbar .vc-parent {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.menu-vc #navbar .vc-arrow {
    margin-left: .5rem;
    font-size: .9em;
}

body.menu-vc #navbar .vc-active-parent > .vc-parent {
    font-weight: 600;
}

/* Colores para el menú en modo VC */
body.menu-vc #navbar .vc-menu a {
    color: var(--bg-color-texto-menu) !important;
}

    

/* Panel de submenús a la derecha (escritorio) */
body.menu-vc .vc-subpanel {
    position: fixed;
    top: var(--navbar-h-noBC, 0px);
    left: var(--vc-main-w);
    height: calc(100vh - var(--navbar-h-noBC, 0px));
    width: var(--vc-sub-w);
    max-width: calc(100vw - var(--vc-main-w));
    background-color: var(--bg-color-menu);
    color: var(--bg-color-texto-menu);
    box-shadow: 2px 0 8px rgba(0,0,0,.25);
    padding: 1rem;
    overflow-y: auto;
    z-index: 1060;
}

body.menu-vc .vc-subpanel-title {
    margin-bottom: .75rem;
    font-weight: 600;
}

body.menu-vc .vc-subpanel-back {
    border: 0;
    background: transparent;
    padding: 0;
    margin-bottom: .5rem;
}

/* móvil: megamenú horizontal a pantalla completa + VC adaptado */
@media (max-width: 991.98px) {
    #navbar .menu-large > .dropdown-menu.megamenu {
        left: 0;
        transform: none;
        width: 100% !important;
        max-width: none !important;
    }

    /* el panel principal ocupa ±75% del ancho cuando está solo */
    body.menu-vc #navbar .navbar-collapse {
        width: 75vw;
        max-width: 75vw;
    }

    /* el subpanel de hijos ocupa toda la pantalla por encima */
    body.menu-vc .vc-subpanel {
        left: 0;
        width: 100vw;
        max-width: 100vw;
    }
}

/* botón "volver" solo en móvil (se oculta en escritorio) */
@media (min-width: 992px) {
    body.menu-vc .vc-subpanel-back {
        display: none;
    }
}

/* Backdrop oscuro detrás del panel */
body.menu-vc .vc-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease-out;
}

/* Backdrop activo y bloqueo de scroll cuando el menú está abierto */
body.menu-vc.vc-menu-open .vc-backdrop {
    opacity: 1;
    pointer-events: auto;
}

body.menu-vc.vc-menu-open {
    overflow: hidden;
}

/* Oculta cualquier resto de menú horizontal en escritorio (cuando la colapsamos) */
body.menu-vc header.nav-holder .navbar .navbar-collapse:not(.show) {
    left: -100%;
}

/* Mostrar siempre el botón hamburguesa en modo VC, también en escritorio */
body.menu-vc #navbar.navbar-expand-lg .navbar-toggler {
    display: block !important;
}

/* En VC, el contenedor del navbar sirve de referencia para posicionar la hamburguesa */
body.menu-vc #navbar .container-wide {
    position: relative;
    padding-right: 3rem;
}

/* En VC, ponemos la hamburguesa fija a la derecha del navbar */
body.menu-vc #navbar .divCollapse {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
}

/* Corrección para #navigation cuando estamos en VC: sin scroll horizontal */
body.menu-vc #navigation {
    overflow-x: hidden;
    white-space: normal;
}

/* Asegurar que el header y el menú VC siempre queden por encima del backdrop */
body.menu-vc header.nav-holder,
body.menu-vc header.nav-holder.make-sticky,
body.menu-vc header.nav-holder.is-sticky,
body.menu-vc header.nav-holder .navbar {
    z-index: 1100 !important;
}

/* Por si algún CSS del theme toca la colapsable o el subpanel */
body.menu-vc #navbar .navbar-collapse,
body.menu-vc .vc-subpanel {
    z-index: 1110 !important;
}

/* El backdrop se queda por detrás */
body.menu-vc .vc-backdrop {
    z-index: 1040;
}

/* === VC: estilos del subpanel para que imite al megamenú === */

/* Título del bloque (nombre del padre: "Opciones") */
body.menu-vc .vc-subpanel-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .5rem;
    color: var(--bg-color-texto-menu);
}

/* Enlaces dentro del subpanel */
body.menu-vc .vc-subpanel a {
    text-decoration: none;
    color: var(--bg-color-texto-menu) !important;
}

    body.menu-vc .vc-subpanel a:hover,
    body.menu-vc .vc-subpanel a:focus {
        color: var(--c-primary) !important;
        background: transparent;
    }

/* Primer nivel dentro del panel (equivalente al <h5> del megamenú) */
body.menu-vc .vc-subpanel > ul > li > a.nav-link {
    display: block;
    font-weight: 700;
    font-size: 1.3rem; /* ajusta si quieres más grande/pequeño */
    margin-bottom: .75rem;
}

/* Subniveles (nietos) -> equivalentes a las líneas de texto pequeñas */
body.menu-vc .vc-subpanel ul ul {
    margin-top: .25rem;
}

    body.menu-vc .vc-subpanel ul ul > li > a.nav-link {
        font-weight: 400;
        font-size: 1rem;
        padding-left: 0;
    }

/* VC: el padre activo ("Opciones") con el mismo estilo que en el menú clásico */
body.menu-vc #navbar .vc-menu > li.vc-active-parent > .vc-parent,
body.menu-vc #navbar .vc-menu > li.vc-active-parent > .vc-parent:hover,
body.menu-vc #navbar .vc-menu > li.vc-active-parent > .vc-parent:focus {
    color: var(--bg-color-texto-menu) !important; /* mismo color que el resto */
    text-decoration: none; /* quita subrayado fijo */
}

/* Padre VC: base */
body.menu-vc #navbar .vc-menu > li > .vc-parent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*padding: .35rem .75rem;*/
    padding-right: .75rem;
    border-bottom: 3px solid transparent; /* barra apagada */
    background-color: transparent;
}

    /* Padre VC hover = mismo efecto que el menú clásico */
body.menu-vc #navbar .vc-menu > li.menu-large:hover,
body.menu-vc #navbar .vc-menu > li.menu-large:focus-within,
body.menu-vc #navbar .vc-menu > li.menu-large.vc-active-parent:focus-within {
    background: var(--hover-bg) !important;
    border-bottom-color: var(--hover-bdr) !important;
    color: var(--bg-color-texto-menu) !important;
    text-decoration: underline;
    border-bottom: 3px solid transparent;
}

/* VC: al hacer click, invertimos background y border-bottom-color */
body.menu-vc #navbar .vc-menu > li.menu-large.vc-clicked-parent,
body.menu-vc #navbar .vc-menu > li.menu-large.vc-clicked-parent:hover,
body.menu-vc #navbar .vc-menu > li.menu-large.vc-clicked-parent:focus-within {
    background: var(--hover-bdr) !important;          /* antes era hover-bg */
    border-bottom: 3px solid transparent;
    border-bottom-color: var(--hover-bg) !important;  /* antes era hover-bdr */
}

    .btn-template-outlined-black:hover {
        background: var(--c-primary) !important;
        color: #fff !important
    }

    /* VC: tamaño fijo del icono del botón hamburguesa,
   ignorando el tamaño de fuente configurado para el menú */
body.menu-vc #navbar .navbar-toggler .fa {
    font-size: 1.5rem !important;
    line-height: 1;
}

/* Items de primer nivel del menú horizontal */
body:not(.menu-vc) #navigation > .cmp-menu-wrapper > ul.navbar-nav > li.nav-item {
    flex: 0 0 auto;
    max-width: 200px !important; /* forzamos este ancho máximo */
    text-align: center;
}

    /* Enlace directo de primer nivel: ocupa todo el ancho del li */
    body:not(.menu-vc) #navigation > .cmp-menu-wrapper > ul.navbar-nav > li.nav-item > a {
        display: flex;
        justify-content: center;
        width: 100%; /* mismo ancho que el li */
    }

/* Base: todos los enlaces de primer nivel en VC */
body.menu-vc #navbar .vc-menu > li.menu-large > a.subSeleccionado {
    border-bottom: 3px solid transparent;
    background: transparent;
}

    /* VC: primer nivel del menú (con o sin hijos) en negrita al hover/focus */
    body.menu-vc #navbar .vc-menu > li.menu-large > a.subSeleccionado:hover,
    body.menu-vc #navbar .vc-menu > li.menu-large > a.subSeleccionado:focus {
        font-weight: 600;
    }

/* Hover/focus en primer nivel VC: mismo color, en negrita */
body.menu-vc #navbar .vc-menu > li.menu-large:hover > a.subSeleccionado,
body.menu-vc #navbar .vc-menu > li.menu-large:focus-within > a.subSeleccionado {
    color: var(--bg-color-texto-menu) !important; /* evita que salte var(--c-primary) */
    font-weight: 600;
    text-decoration: underline;
}

/* Columna de imágenes del megamenu: ancho mínimo */
@media (min-width: 768px) {
    #navigation .dropdown-menu.megamenu .row > .col-lg-2.col-md-3.align-self-center {
        flex: 0 0 260px; /* ancho fijo mínimo */
        max-width: 260px;
        min-width: 260px;
    }

    /* La columna de enlaces ocupa el resto */
    #navigation .dropdown-menu.megamenu .row > .col-lg-10.col-md-9 {
        flex: 1 1 auto;
        max-width: calc(100% - 260px);
    }
}