/* ═══════════════════════════════════════════════════════════════════════════
   Cabecera VALLNews: barra superior fina + rail lateral de secciones.

   Sustituye a la cabecera de dos filas (logo con eslogan centrado y, debajo,
   los enlaces separados por lineas verticales) que ocupaba ~118 px fijos en
   las ocho rutas. Ahora la barra mide 52 px y las secciones van en un rail
   vertical de 68 px: el contenido recupera altura, que es lo que escasea en
   una pagina de datos.

   Colores: el navy #00213a era el unico elemento constante de toda la
   plataforma y se conserva como identidad. Los acentos de seccion salen de
   los tokens --sec-* de base.css, que estan validados para vision con
   deficiencia de color; no se inventan aqui.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La paleta se hundio en 2026-08-18. Antes el rail iba en un azul medio
   (#203d52 - #1a3345) mas claro que el fondo de la portada rediseñada: la
   cabecera pesaba mas que el contenido y el rail se leia como una tira pegada
   al costado. Ahora es la misma familia honda de la portada, asi que el marco
   retrocede y manda la pagina. Sobre las secciones claras un rail oscuro sigue
   funcionando: es el contraste de siempre entre marco y lienzo. */
:root {
    --vn-barra-alto: 58px;
    --vn-rail-ancho: 82px;
    --vn-navy:       #16283a;
    --vn-navy-hondo: #101f30;
    --vn-navy-alto:  #1e3a52;
    --vn-marco-filo: rgba(150, 196, 234, 0.22);
    --vn-filo:       rgba(255, 255, 255, 0.10);
    --vn-filo-suave: rgba(255, 255, 255, 0.06);
    --vn-tinta:      #e8eef4;
    --vn-tinta-2:    rgba(232, 238, 244, 0.72);
    --vn-curva:      cubic-bezier(.22, .82, .24, 1);
}

/* Solo se aplica mientras la cabecera esta montada; la clase la pone y la
   quita Header.jsx. El login no la lleva, y por eso no se desplaza. */
body.vn-rail { padding-left: var(--vn-rail-ancho); }

.vn-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Blindaje contra el CSS de las secciones ────────────────────────────────
   Esta cabecera se monta en las ocho rutas, y algunas traen selectores de
   ELEMENTO sueltos: finanzas-premium.css declara `p, span, small { color:
   var(--fin-text-main) }`, que alcanza cualquier <span> del documento —
   incluidos los de aqui— y le gana a la herencia, porque heredar no tiene
   especificidad y un selector de elemento si (0,0,1).

   El sintoma era mudo: en /finanzas las etiquetas del rail se pintaban del
   azul oscuro del cuerpo de esa seccion sobre el navy del rail, ilegibles,
   mientras en las otras siete rutas se veian bien.

   Con los <span> basta con fijar el color con especificidad de clase. Con los
   <button> no: finanzas-premium.css declara
   `button, .chart-int-btn, … { color: var(--fin-text-main) !important }`,
   y contra un !important no hay especificidad que valga. De ahi los
   !important de este bloque — son ocho, todos aqui, y solo para que la
   cabecera no dependa de que hoja cargue la seccion.

   EL ARREGLO DE VERDAD es acotar esas reglas de Finanzas a su contenedor en
   vez de soltarlas sobre `button` y `span` a secas. Mientras tanto, al anadir
   texto nuevo a la cabecera hay que darle color explicito. */
.vn-nav-txt,
.vn-paleta-item span:not(.vn-paleta-ruta) {
    color: inherit;
}
.vn-cmd            { color: var(--vn-tinta-2) !important; }
.vn-cmd:hover      { color: var(--vn-tinta) !important; }
.vn-cmd-txt        { color: inherit !important; }
.vn-cmd-kbd        { color: var(--vn-tinta-2) !important; }
.vn-cuenta         { color: var(--vn-tinta-2) !important; }
.vn-cuenta:hover   { color: #fff !important; }
.vn-cuenta-inicial { color: inherit !important; }
.vn-brand-txt      { color: var(--vn-tinta) !important; }
.vn-paleta-campo input { color: var(--vn-tinta) !important; }
/* Las acciones del pie del rail son <button>, asi que caen de lleno en el
   `button { color: … !important }` de finanzas-premium.css: sin esto salen en
   azul marino sobre el rail oscuro, ilegibles, y SOLO en /finanzas. */
.vn-nav-accion       { color: rgba(238, 246, 252, 0.72) !important; }
.vn-nav-accion:hover { color: var(--vn-tinta) !important; }
.vn-nav-accion.activo { color: #fff !important; }
/* La paleta puede abrirse encima de /finanzas, asi que su texto tambien cae
   bajo `p, span, small`. El <mark> del resaltado no lo alcanza esa regla, pero
   se le fija el color igual para que no dependa de ello. */
.vn-paleta-vacio p     { color: rgba(232, 238, 244, 0.78) !important; }
.vn-paleta-vacio small { color: rgba(232, 238, 244, 0.62) !important; }
.vn-paleta-pie span    { color: inherit !important; }
.vn-paleta-marca       { color: #ffdfa6 !important; }

/* ── Barra superior ─────────────────────────────────────────────────────── */
.vn-topbar {
    position: sticky;
    top: 0;
    /* Por encima del cajón móvil (1001), no por debajo. La cabecera crea su
       propio contexto de apilamiento, así que la hamburguesa que lleva dentro
       no puede superar este z-index por mucho que se le suba el suyo: con la
       barra en 1000 el cajón la tapaba entera y el aspa para cerrarlo
       quedaba invisible. Se cerraba con Escape o eligiendo sección, pero no
       había forma visible de salir. */
    z-index: 1002;
    height: var(--vn-barra-alto);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0 1.15rem;
    background: linear-gradient(100deg, #0e1c2b 0, #16293c 46%, #1b3550 100%);
    border-bottom: 1px solid var(--vn-marco-filo);
    box-shadow: 0 8px 26px rgba(4, 14, 24, .28);
    /* El rail arranca debajo de la barra, asi que la barra se estira sobre el
       hueco que el padding del body deja a la izquierda. */
    margin-left: calc(var(--vn-rail-ancho) * -1);
    padding-left: calc(var(--vn-rail-ancho) + 0.7rem);
}

.vn-brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    flex-shrink: 0;
    border-radius: 6px;
    padding: 4px 7px;
    transition: opacity 0.18s;
}
.vn-brand:hover { opacity: 0.85; }
.vn-brand img { width: 30px; height: auto; display: block; }
/* La tapa del logo continua el rail, no la barra: mismo color de arranque y
   mismo resplandor. Antes eran tres azules distintos apilados en la esquina y
   se veian las dos costuras. */
.vn-rail-cap {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--vn-rail-ancho);
    height: var(--vn-barra-alto);
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 120%, rgba(110, 178, 235, .22), transparent 70%),
        #16283a;
    border-right: 1px solid var(--vn-marco-filo);
    box-shadow: inset -12px 0 24px rgba(4, 20, 32, .10);
}
.vn-rail-cap img {
    width: 37px;
    filter: drop-shadow(0 4px 9px rgba(0, 0, 0, .3));
    transition: transform .4s var(--vn-curva);
}
.vn-brand:hover .vn-rail-cap img { transform: scale(1.07); }
.vn-brand-txt {
    font-family: var(--font-serif), Georgia, serif;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--vn-tinta);
    letter-spacing: -0.2px;
}

.vn-contexto {
    --tono: #6f9bd1;
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    min-height: 30px;
    padding: 0 .72rem;
    border-left: 1px solid rgba(218,237,250,.18);
    color: var(--vn-tinta-2);
    font-size: .69rem;
    white-space: nowrap;
}
.vn-contexto-punto {
    width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
    background: var(--tono); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tono) 13%, transparent);
}
/* .45 daba 3.94:1 sobre la parada mas clara del degradado de la barra, por
   debajo del 4.5 exigible a texto de 0.69rem. A .62 da 5.1:1 y sigue leyendose
   como etiqueta secundaria frente al nombre de seccion, que va en blanco. */
.vn-contexto-etq { color: rgba(232,238,244,.62) !important; }
.vn-contexto strong { color: #fff; font-weight: 700; }

/* ── Paleta de comandos: disparador ─────────────────────────────────────── */
.vn-cmd {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-left: auto;
    min-width: 210px;
    padding: 0.38rem 0.7rem;
    background: rgba(218, 237, 250, 0.09);
    border: 1px solid var(--vn-filo);
    border-radius: 7px;
    color: var(--vn-tinta-2);
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
}
.vn-cmd:hover {
    background: rgba(218, 237, 250, 0.16);
    border-color: rgba(218, 237, 250, 0.34);
    color: var(--vn-tinta);
    box-shadow: 0 4px 16px rgba(4, 14, 24, .28);
}
.vn-cmd i { font-size: 0.72rem; opacity: 0.8; transition: transform .3s var(--vn-curva); }
.vn-cmd:hover i { transform: scale(1.12); }
.vn-cmd-txt { flex: 1; text-align: left; }
.vn-cmd-kbd {
    font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 0.64rem;
    padding: 2px 5px;
    border: 1px solid var(--vn-filo);
    border-radius: 4px;
    background: rgba(14, 38, 55, 0.44);
    color: var(--vn-tinta-2);
}

.vn-cuenta {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(140deg, rgba(126, 182, 234, 0.26), rgba(218, 237, 250, 0.09));
    border: 1px solid var(--vn-filo);
    color: var(--vn-tinta-2);
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.28s var(--vn-curva);
}
.vn-cuenta:hover {
    background: linear-gradient(140deg, rgba(126, 182, 234, 0.42), rgba(218, 237, 250, 0.14));
    border-color: rgba(218, 237, 250, 0.32);
    color: #fff;
    transform: translateY(-1px);
}
.vn-cuenta-inicial {
    font-family: var(--font-mono, ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

/* ── Paleta centrada en la barra ────────────────────────────────────────────
   Con la paleta pegada a la derecha, la barra quedaba con dos grupos en los
   extremos y ochocientos pixeles de nada en medio. Centrada contra la barra
   entera —no contra el hueco sobrante, que la dejaria descentrada porque la
   izquierda pesa mucho mas que la derecha— la barra se lee como una sola pieza.

   Solo a partir de 1100px: por debajo, la marca mas el contexto llegan a tocar
   la pastilla centrada y se solaparian. Ahi vuelve a fluir a la derecha. */
@media (min-width: 1100px) {
    .vn-cmd {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
        min-width: 300px;
    }
    /* La paleta sale del flujo, asi que es el avatar quien empuja a la derecha. */
    .vn-cuenta { margin-left: auto; }
}

/* ── Rail lateral ───────────────────────────────────────────────────────── */
.vn-nav {
    position: fixed;
    top: var(--vn-barra-alto);
    left: 0;
    bottom: 0;
    width: var(--vn-rail-ancho);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Tres zonas: la lista arriba, el hueco elastico en medio y el pie abajo.
       Antes eran siete elementos arriba y dos tercios de alto sin nada. */
    justify-content: flex-start;
    padding: 13px 0 11px;
    background:
        radial-gradient(circle at 50% 0%, rgba(96, 166, 226, .16), transparent 17rem),
        linear-gradient(180deg, #16283a, #111f30 62%, #0e1a29);
    border-right: 1px solid var(--vn-marco-filo);
    box-shadow: 10px 0 30px rgba(4, 16, 27, .3), inset -10px 0 22px rgba(4, 18, 30, .12);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}
.vn-nav::-webkit-scrollbar { display: none; }

/* `position: relative` es lo que hace que offsetTop de cada enlace se mida
   contra esta caja: la aguja se coloca con ese numero. */
.vn-nav-lista {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vn-nav-lista::before {
    content: "NAVEGACIÓN";
    display: block;
    padding: 0 4px 8px;
    color: rgba(196, 220, 240, .44);
    font: 700 .47rem/1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .14em;
    text-align: center;
}

/* ── Aguja: un solo indicador que se desliza ─────────────────────────────────
   La posicion y la altura las mide Header.jsx sobre el DOM y llegan como --y y
   --alto. El movimiento es lo que cuenta: el ojo sigue la barra de una seccion
   a la otra en vez de ver aparecer y desaparecer dos marcas distintas. */
.vn-nav-aguja {
    position: absolute;
    right: 0;
    top: 0;
    width: 3px;
    height: var(--alto, 58px);
    border-radius: 3px 0 0 3px;
    background: var(--tono, #7fb2e6);
    box-shadow: 0 0 12px color-mix(in srgb, var(--tono, #7fb2e6) 62%, transparent);
    transform: translateY(var(--y, 0));
    transition: transform .42s var(--vn-curva), height .42s var(--vn-curva),
                background .3s, box-shadow .3s;
    pointer-events: none;
}

.vn-nav-item {
    --tono: #6f9bd1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 58px;
    padding: 10px 5px;
    margin: 0 8px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: rgba(238, 246, 252, 0.76);
    text-decoration: none;
    font-size: 1.02rem;
    transition: background 0.2s, color 0.2s, border-color .2s, box-shadow .2s;
}
.vn-nav-item i { transition: transform .3s var(--vn-curva); }
/* Sin `translateX`: en un rail vertical un desplazamiento lateral se lee como
   que el elemento se sale del carril. Lo que se mueve es el icono. */
.vn-nav-item:hover {
    background: rgba(218, 237, 250, 0.10);
    border-color: rgba(218, 237, 250, .14);
    color: var(--vn-tinta);
}
/* El icono toma el color de su seccion al acercarse. En reposo se queda neutro
   a proposito: siete iconos de colores a la vez compiten entre si y con el
   elemento activo, que es lo unico que deberia destacar. */
.vn-nav-item:hover i { transform: translateY(-2px) scale(1.06); color: var(--tono); }
.vn-nav-item:focus-visible {
    outline: 2px solid var(--tono);
    outline-offset: 2px;
}

/* La etiqueta va SIEMPRE visible bajo el icono, no en un globo al pasar el
   raton: un rail de solo iconos obliga a adivinar, y aqui hay siete secciones
   que no tienen iconos universales (que dibuja "Proteinas"?). 9px con
   letter-spacing se lee bien y cabe en 68px. */
.vn-nav-txt {
    font-size: 0.61rem;
    font-weight: 650;
    letter-spacing: 0.025em;
    line-height: 1.15;
    text-align: center;
    max-width: 100%;
    white-space: nowrap;
}

/* En el rail se ve la abreviatura; el nombre completo sigue en el DOM, oculto
   a la vista pero disponible para lectores de pantalla. En movil se invierte. */
.vn-nav-largo {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.vn-nav-item.activo {
    background: linear-gradient(135deg, color-mix(in srgb, var(--tono) 30%, #29475d 70%), rgba(218,237,250,.10));
    border-color: color-mix(in srgb, var(--tono) 42%, rgba(218,237,250,.16));
    color: #fff;
    box-shadow: 0 8px 22px rgba(8,24,37,.17), inset 0 1px rgba(255,255,255,.08);
}
.vn-nav-item.activo i { color: var(--tono); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--tono) 48%, transparent)); }
.vn-nav-item.activo:hover i { transform: none; }
/* La barra por elemento se fue: ahora la dibuja .vn-nav-aguja, una sola, que se
   desliza. La de antes ademas sobresalia (right: -9px con margin 8px la sacaba
   un pixel por fuera del rail) y parecia un fallo de pintado, no un indicador. */

/* ── Pie del rail ───────────────────────────────────────────────────────────
   `margin-top: auto` lo empuja al fondo y de paso convierte el hueco vacio en
   separacion deliberada. La regla de arriba dice que lo de abajo no son
   secciones: son acciones sobre la cuenta. */
.vn-nav-pie {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid rgba(150, 196, 234, .13);
}
.vn-nav-accion {
    --tono: #86b4e0;
    min-height: 46px;
    gap: 5px;
    padding: 7px 5px;
    font-size: .88rem;
    background: none;
    font-family: inherit;
    cursor: pointer;
}
.vn-nav-accion .vn-nav-txt { font-size: .56rem; opacity: .82; }
.vn-nav-salir { --tono: #e08a86; }
.vn-nav-salir:hover { background: rgba(224, 138, 134, .13); border-color: rgba(224, 138, 134, .22); }
.vn-nav-salir:hover i { color: #f0a7a3; }
.vn-nav-accion:disabled { cursor: default; opacity: .6; }
.vn-nav-accion:disabled:hover { background: none; border-color: transparent; }
/* El icono de "saliendo" gira mientras se espera al servidor. */
.vn-girando { animation: vn-giro 0.9s linear infinite; }
@keyframes vn-giro { to { transform: rotate(360deg); } }

/* ── Selector de idioma ──────────────────────────────────────────────────
   Sustituye al antiguo interruptor de tema. El menú abre hacia el contenido
   para no quedar recortado por el rail y conserva nombres nativos. */
.vn-idioma { position: relative; }
.vn-idioma-boton { width: calc(100% - 16px); }
.vn-idioma-bandera {
    display: block;
    font-size: 1.05rem;
    line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
}
.vn-idioma-menu {
    /* fixed evita que el overflow del rail recorte el panel. El rail mide
       --vn-rail-ancho y el menú comienza diez píxeles después de su borde. */
    position: fixed;
    left: calc(var(--vn-rail-ancho) + 10px);
    bottom: 64px;
    z-index: 1100;
    width: 210px;
    padding: 7px;
    border: 1px solid rgba(130, 201, 239, .24);
    border-radius: 13px;
    background: linear-gradient(150deg, #142b3e, #0c1b2a);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .45);
    animation: vn-idioma-entra .16s ease-out;
}
@keyframes vn-idioma-entra {
    from { opacity: 0; transform: translateX(-5px) scale(.98); }
    to { opacity: 1; transform: none; }
}
.vn-idioma-titulo {
    padding: 5px 8px 7px;
    color: rgba(201, 226, 240, .58);
    font: 750 .54rem/1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .13em;
    text-transform: uppercase;
}
.vn-idioma-menu button {
    width: 100%;
    display: grid;
    grid-template-columns: 25px 1fr auto;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #dcecf5;
    text-align: left;
    cursor: pointer;
}
.vn-idioma-menu button:hover,
.vn-idioma-menu button:focus-visible {
    border-color: rgba(126, 211, 243, .22);
    background: rgba(126, 211, 243, .09);
    outline: 0;
}
.vn-idioma-menu button.activo {
    border-color: rgba(108, 226, 194, .25);
    background: rgba(56, 183, 148, .11);
    color: #effffc;
}
.vn-idioma-menu button > span { font-size: 1.05rem; }
.vn-idioma-menu button strong { font-size: .71rem; font-weight: 680; }
.vn-idioma-menu button small { color: #82a9bb; font: 700 .53rem/1 var(--font-mono, ui-monospace, monospace); }
.vn-idioma-menu button.activo small { color: #76dfc2; }

/* Google Translate sólo aporta el motor. Su barra y su selector nativo quedan
   ocultos porque la navegación ya ofrece un control accesible y coherente. */
#google_translate_element,
.goog-te-banner-frame,
iframe.VIpgJd-ZVi9od-ORHb-OEVmcd,
.goog-te-balloon-frame,
#goog-gt-tt { display: none !important; }
body { top: 0 !important; }

/* ── Paleta de comandos: superposicion ──────────────────────────────────── */
.vn-paleta-fondo {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 1rem 1rem;
    background: rgba(2, 8, 15, 0.62);
    backdrop-filter: blur(3px);
    animation: vn-fade 0.14s ease-out;
}
@keyframes vn-fade { from { opacity: 0; } to { opacity: 1; } }

.vn-paleta {
    width: 100%;
    max-width: 560px;
    background:
        radial-gradient(circle at 50% 0%, rgba(84, 152, 214, .14), transparent 60%),
        #0c1725;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 15px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(0, 0, 0, .3);
    overflow: hidden;
    animation: vn-sube 0.18s cubic-bezier(.2, .8, .3, 1);
}
@keyframes vn-sube { from { transform: translateY(-10px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }

.vn-paleta-campo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.95rem 1.05rem;
    border-bottom: 1px solid var(--vn-filo);
    transition: border-color .2s, background .2s;
}
/* El sitio tiene una anilla de foco global —`:is(button,a,input,…):focus-visible
   { outline: 3px solid … }`— que le gana al `outline:none` de este campo. Aqui
   no aporta: el campo se enfoca solo al abrir la paleta, asi que la anilla esta
   SIEMPRE puesta y se lee como un recuadro de mas alrededor del texto. Se
   traslada a la fila entera, que dice lo mismo y encaja con el diseño. */
.vn-paleta-campo input:focus-visible { outline: none; }
.vn-paleta-campo:focus-within {
    border-bottom-color: rgba(126, 182, 234, .5);
    background: rgba(126, 182, 234, .05);
}
.vn-paleta-campo > i { color: rgba(232, 238, 244, 0.5); font-size: 0.85rem; }
.vn-paleta-limpiar {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: rgba(232, 238, 244, .7) !important;
    font-size: .66rem;
    cursor: pointer;
    transition: background .18s, color .18s;
}
.vn-paleta-limpiar:hover { background: rgba(255, 255, 255, .2); color: #fff !important; }
.vn-paleta-campo input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--vn-tinta);
    font-family: inherit;
    font-size: 0.94rem;
}
.vn-paleta-campo input::placeholder { color: rgba(232, 238, 244, 0.42); }
.vn-paleta-campo kbd {
    font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 0.6rem;
    padding: 3px 6px;
    border: 1px solid var(--vn-filo);
    border-radius: 4px;
    color: rgba(232, 238, 244, 0.55);
}

.vn-paleta-lista { list-style: none; margin: 0; padding: 7px; max-height: 52vh; overflow-y: auto; }

/* Encabezado de grupo. Solo aparece con el campo vacío: al buscar, la lista va
   ordenada por calidad de coincidencia y trocearla por grupos rompería ese
   orden, que es justo lo que hace util a un buscador. */
.vn-paleta-grupo {
    padding: 0.7rem 0.8rem 0.35rem;
    color: rgba(198, 219, 238, 0.5);
    font: 700 0.58rem/1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.vn-paleta-lista > li:first-child > .vn-paleta-grupo,
.vn-paleta-grupo:first-child { padding-top: 0.35rem; }

.vn-paleta-item {
    --tono: #6f9bd1;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.62rem 0.8rem;
    background: none;
    border: none;
    border-radius: 9px;
    color: rgba(232, 238, 244, 0.85);
    font-family: inherit;
    font-size: 0.89rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.14s, color 0.14s;
}
/* El icono en una pastilla del color de la seccion: identifica el destino de un
   vistazo en una lista donde todo lo demas es texto del mismo tamaño. */
.vn-paleta-item > i {
    display: grid;
    place-items: center;
    width: 27px; height: 27px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: color-mix(in srgb, var(--tono) 16%, transparent);
    color: var(--tono);
    font-size: 0.78rem;
    transition: background 0.14s;
}
.vn-paleta-txt { flex: 1; min-width: 0; }
.vn-paleta-marca {
    padding: 0 1px;
    border-radius: 3px;
    background: rgba(225, 174, 82, 0.24);
    color: #ffdfa6;
    font-weight: 700;
}
.vn-paleta-item.marcado { background: rgba(255, 255, 255, 0.09); color: #fff; }
.vn-paleta-item.marcado > i { background: color-mix(in srgb, var(--tono) 30%, transparent); }
.vn-paleta-ruta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    flex-shrink: 0;
    font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 0.66rem;
    color: rgba(232, 238, 244, 0.55);
}
.vn-paleta-ruta i { font-size: 0.58rem; opacity: .8; }

.vn-paleta-vacio {
    padding: 1.6rem 1.2rem 1.4rem;
    color: rgba(232, 238, 244, 0.78);
    text-align: center;
}
.vn-paleta-vacio > i { font-size: 1.1rem; opacity: .38; }
.vn-paleta-vacio p { margin: 0.6rem 0 0.35rem; font-size: 0.88rem; }
.vn-paleta-vacio small {
    display: block;
    color: rgba(232, 238, 244, 0.62);
    font-size: 0.74rem;
    line-height: 1.5;
}

/* Pie de atajos: la paleta se maneja con teclado y hasta ahora no lo decia en
   ningun sitio. */
.vn-paleta-pie {
    display: flex;
    gap: 1.1rem;
    padding: 0.6rem 1.05rem;
    border-top: 1px solid var(--vn-filo);
    background: rgba(0, 0, 0, 0.22);
    color: rgba(232, 238, 244, 0.62);
    font-size: 0.68rem;
}
.vn-paleta-pie span { display: inline-flex; align-items: center; gap: 0.3rem; }
.vn-paleta-pie kbd {
    min-width: 17px;
    padding: 2px 4px;
    border: 1px solid var(--vn-filo);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(232, 238, 244, 0.8);
    font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 0.62rem;
    text-align: center;
}

/* ── Separador cabecera → contenido ─────────────────────────────────────── */
/* Lo montan todas las paginas justo tras <Header/>. Antes era un degradado de
   cuatro paradas azul-ambar de 2px; ahora es una linea de un pixel, porque el
   peso visual lo lleva el filo de la barra. */
.hdr-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(155, 203, 238, 0.42) 30%, rgba(155, 203, 238, 0.42) 70%, transparent);
}

/* ── Hamburguesa (solo movil) ───────────────────────────────────────────── */
.vn-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    z-index: 1002;
}
.vn-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
    transform-origin: center;
}
.vn-hamburger.vn-ham-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vn-hamburger.vn-ham-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.vn-hamburger.vn-ham-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Movil: el rail no cabe, vuelve el cajon ────────────────────────────── */
@media (max-width: 900px) {
    body.vn-rail { padding-left: 0; }

    .vn-topbar {
        margin-left: 0;
        padding-left: 1rem;
        padding-right: 0.75rem;
        gap: 0.6rem;
    }
    .vn-brand { gap: .5rem; }
    .vn-rail-cap {
        position: static;
        width: 32px;
        height: 32px;
        border: 0;
        background: none;
        box-shadow: none;
    }
    .vn-rail-cap img { width: 30px; }
    .vn-contexto { display: none; }
    .vn-hamburger { display: flex; }
    .vn-cmd { min-width: 0; }
    .vn-cmd-txt, .vn-cmd-kbd { display: none; }
    .vn-cmd { padding: 0.42rem 0.6rem; }

    .vn-nav {
        /* Arranca DEBAJO de la barra para no taparla: así la marca sigue a la
           vista y la hamburguesa se puede pulsar para cerrar. */
        top: var(--vn-barra-alto);
        width: 100%;
        height: calc(100% - var(--vn-barra-alto));
        flex-direction: column;
        justify-content: center;
        gap: 0;
        padding: 1.5rem 1.25rem 2rem;
        background:
            radial-gradient(circle at 50% 0%, rgba(96, 166, 226, .14), transparent 22rem),
            var(--vn-navy-hondo);
        border-right: none;
        transform: translateX(100%);
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        z-index: 1001;
    }
    .vn-nav-lista::before { display: none; }
    .vn-nav.vn-nav-open { transform: translateX(0); }
    .vn-nav-lista { gap: 2px; }

    .vn-nav-item {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.9rem;
        margin: 0;
        padding: 0.9rem 1rem;
        border-radius: 10px;
        font-size: 1.05rem;
    }
    .vn-nav-item i { width: 26px; text-align: center; }
    .vn-nav-txt { font-size: 1rem; letter-spacing: 0; }
    /* Aqui sobra sitio: se cambia la abreviatura por el nombre completo. */
    .vn-nav-corto { display: none; }
    .vn-nav-largo {
        position: static;
        width: auto; height: auto;
        margin: 0; overflow: visible;
        clip: auto;
    }
    /* En el cajon las filas van a lo ancho, asi que la aguja pasa al borde
       izquierdo: a la derecha quedaria colgada lejos del texto. */
    .vn-nav-aguja { right: auto; left: 0; border-radius: 0 3px 3px 0; }

    /* El pie deja de estar pegado al fondo: con el cajon centrado quedaba a una
       pantalla de distancia de las secciones. Va justo debajo, en fila. */
    .vn-nav-pie {
        margin-top: 1.1rem;
        padding-top: 0.9rem;
        flex-direction: row;
        gap: 0.5rem;
    }
    .vn-nav-accion {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        padding: 0.75rem 0.4rem;
        border: 1px solid rgba(218, 237, 250, .12);
        font-size: 1rem;
    }
    .vn-nav-accion i { width: auto; }
    .vn-nav-accion .vn-nav-txt { font-size: .72rem; }
    .vn-idioma { flex: 1; }
    .vn-idioma-boton { width: 100%; }
    .vn-idioma-menu {
        position: absolute;
        left: 0;
        bottom: calc(100% + 9px);
        width: min(280px, calc(100vw - 3rem));
    }
}

@media (prefers-reduced-motion: reduce) {
    .vn-paleta, .vn-paleta-fondo, .vn-nav { animation: none; transition: none; }
    /* La aguja salta al sitio en vez de deslizarse; sigue indicando igual. */
    .vn-nav-aguja { transition: none; }
    .vn-nav-item i, .vn-rail-cap img, .vn-cmd i, .vn-cuenta { transition: none; }
    .vn-girando { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Navegación ejecutiva · Sapphire nightfall whisper
   En escritorio sustituye el rail lateral por dos barras horizontales.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --vn-barra-alto: 60px;
    --vn-rail-ancho: 0px;
    --vn-navy: #262B40;
    --vn-navy-hondo: #262B40;
    --vn-navy-alto: #2C444C;
    --vn-marco-filo: rgba(168, 196, 236, .28);
    --vn-filo: rgba(168, 196, 236, .22);
    --vn-filo-suave: rgba(168, 196, 236, .12);
    --vn-tinta: #DCE8F8;
    --vn-tinta-2: #A8C4EC;
}

body.vn-rail { padding-left: 0; }

.vn-topbar {
    position: sticky;
    top: 0;
    z-index: 1003;
    height: var(--vn-barra-alto);
    gap: 1rem;
    margin-left: 0;
    padding: 0 clamp(1rem, 3vw, 3rem);
    border-bottom: 1px solid rgba(168, 196, 236, .28);
    background: #2C444C;
    box-shadow: none;
}

.vn-brand { gap: .62rem; padding: 0; }
.vn-rail-cap {
    position: static;
    width: 34px;
    height: 34px;
    border: 0;
    background: none;
    box-shadow: none;
}
.vn-rail-cap img { width: 32px; filter: none; }
.vn-brand-txt { color: #A8C4EC !important; font-family: inherit; font-size: 1.05rem; font-weight: 800; letter-spacing: -.035em; }

.vn-contexto {
    min-height: 28px;
    padding: 0 0 0 1rem;
    border-left: 1px solid rgba(168, 196, 236, .3);
    color: #A8C4EC;
    font-size: .66rem;
}
.vn-contexto-punto { background: #0474C4; box-shadow: none; }
.vn-contexto-etq { color: #789BCB !important; }
.vn-contexto strong { color: #DCE8F8; }

.vn-cmd {
    min-width: 250px;
    min-height: 34px;
    border-color: rgba(168, 196, 236, .26);
    border-radius: 4px;
    background: rgba(38, 43, 64, .42);
    color: #A8C4EC !important;
    box-shadow: none;
}
.vn-cmd:hover { border-color: #5379AE; background: #262B40; color: #DCE8F8 !important; box-shadow: none; }
.vn-cmd-kbd { border-color: rgba(168,196,236,.28); border-radius: 3px; background: #2C444C; }
.vn-cuenta { width: 32px; height: 32px; border-color: #5379AE; border-radius: 4px; background: #262B40; color: #A8C4EC !important; }
.vn-cuenta:hover { border-color: #A8C4EC; background: #06457F; transform: none; }

.vn-nav {
    position: sticky;
    top: var(--vn-barra-alto);
    bottom: auto;
    left: auto;
    z-index: 1000;
    width: 100%;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0 clamp(1rem, 3vw, 3rem);
    overflow: visible;
    border: 0;
    border-bottom: 1px solid rgba(83, 121, 174, .5);
    background: #262B40;
    box-shadow: none;
}
.vn-nav-lista { display: flex; flex: 1; flex-direction: row; align-items: stretch; gap: .25rem; }
.vn-nav-lista::before,.vn-nav-aguja { display: none; }
.vn-nav-item {
    min-height: 47px;
    flex-direction: row;
    gap: .45rem;
    margin: 0;
    padding: 0 .85rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #8FAED8;
    font-size: .78rem;
}
.vn-nav-item:hover { border-color: #5379AE; background: rgba(83,121,174,.12); color: #DCE8F8; }
.vn-nav-item:hover i { color: #A8C4EC; transform: none; }
.vn-nav-item.activo {
    border-color: #0474C4;
    background: rgba(4, 116, 196, .13);
    color: #DCE8F8;
    box-shadow: none;
}
.vn-nav-item.activo i { color: #A8C4EC; filter: none; }
.vn-nav-txt { max-width: none; font-size: .7rem; font-weight: 700; letter-spacing: .01em; }
.vn-nav-corto { display: none; }
.vn-nav-largo { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
.vn-nav-pie { margin: 0 0 0 auto; padding: 0 0 0 .65rem; flex-direction: row; align-items: stretch; gap: .15rem; border: 0; border-left: 1px solid rgba(83,121,174,.4); }
.vn-nav-accion { min-height: 47px; padding: 0 .65rem; font-size: .75rem; }
.vn-idioma { display: flex; align-items: stretch; }
.vn-idioma-boton { height: 100%; }
.vn-idioma-menu { right: 0; bottom: auto; top: calc(100% + 8px); left: auto; }
.hdr-divider { display: none; }

@media (max-width: 900px) {
    .vn-topbar { padding: 0 .85rem; gap: .55rem; }
    .vn-contexto { display: none; }
    .vn-brand-txt { font-size: .98rem; }
    .vn-cmd { min-width: 34px; min-height: 34px; margin-left: auto; padding: .42rem .6rem; }
    .vn-cmd-txt,.vn-cmd-kbd { display: none; }
    .vn-hamburger { display: flex; }

    .vn-nav {
        position: fixed;
        top: var(--vn-barra-alto);
        right: 0;
        bottom: 0;
        left: auto;
        width: min(330px, 88vw);
        height: calc(100dvh - var(--vn-barra-alto));
        flex-direction: column;
        justify-content: flex-start;
        padding: 1rem;
        overflow-y: auto;
        border-left: 1px solid #5379AE;
        background: #262B40;
        transform: translateX(100%);
        box-shadow: -18px 0 46px rgba(8,13,31,.38);
    }
    .vn-nav.vn-nav-open { transform: translateX(0); }
    .vn-nav-lista { flex: none; width: 100%; flex-direction: column; gap: .25rem; }
    .vn-nav-item { width: 100%; min-height: 48px; justify-content: flex-start; gap: .85rem; padding: 0 .85rem; border: 1px solid transparent; border-radius: 4px; font-size: .9rem; }
    .vn-nav-item.activo { border-color: #5379AE; border-left: 3px solid #0474C4; }
    .vn-nav-txt { font-size: .84rem; }
    .vn-nav-pie { width: 100%; margin-top: auto; padding: .75rem 0 0; border-top: 1px solid rgba(83,121,174,.4); border-left: 0; }
    .vn-nav-accion { flex: 1; justify-content: center; }
    .vn-idioma-menu { right: auto; bottom: calc(100% + 8px); top: auto; left: 0; }
    .vn-hamburger span { background: #A8C4EC; }
}

/* Mantiene el acabado del centro de comandos por encima de los aislamientos
   heredados que aparecen antes para las páginas más antiguas. */
.vn-topbar .vn-cmd { background:linear-gradient(110deg,#1F2937 0%,#111827 100%) !important; }
.vn-topbar .vn-cmd:hover,.vn-topbar .vn-cmd:focus-visible { background:linear-gradient(110deg,#4B5563 0%,#1F2937 72%) !important; }
@media (max-width:900px) {
    .vn-topbar .vn-cmd,.vn-topbar .vn-cmd:hover,.vn-topbar .vn-cmd:focus-visible { background:#1F2937 !important; }
}

/* Cierre definitivo: estas reglas viven al final porque algunas páginas aún
   cargan aislamientos históricos de la cabecera. */
@media (min-width:901px) {
    .vn-topbar {
        grid-template-columns:auto minmax(210px,300px) minmax(500px,1fr) auto !important;
        grid-template-areas:"identidad buscar navegacion acciones" !important;
        gap:clamp(.7rem,1.4vw,1.75rem) !important;
        height:76px !important;
        padding:4px clamp(1.1rem,4vw,4.8rem) 0 !important;
        border:0 !important;
        border-bottom:1px solid rgba(75,85,99,.34) !important;
        background:#EDEDED !important;
        box-shadow:inset 0 4px #111827,0 8px 28px rgba(17,24,39,.1) !important;
    }
    .vn-topbar-identidad { grid-area:identidad !important; }
    .vn-topbar .vn-brand-txt { color:#111827 !important; }
    .vn-topbar .vn-rail-cap img { filter:brightness(.1) !important; }
    .vn-topbar .vn-contexto { display:none !important; }
    .vn-topbar .vn-cmd {
        grid-area:buscar !important;
        grid-template-columns:28px minmax(0,1fr) auto !important;
        justify-self:stretch !important;
        width:100% !important;
        min-width:0 !important;
        min-height:42px !important;
        gap:.45rem !important;
        padding:.25rem .42rem .25rem .5rem !important;
        border:0 !important;
        border-radius:999px !important;
        background:#D7D9DD !important;
        color:#111827 !important;
        box-shadow:none !important;
    }
    .vn-topbar .vn-cmd:hover,.vn-topbar .vn-cmd:focus-visible { background:#C7CBD1 !important; box-shadow:0 0 0 3px rgba(75,85,99,.16) !important; }
    .vn-topbar .vn-cmd::after,.vn-topbar .vn-cmd-copy small { display:none !important; }
    .vn-topbar .vn-cmd-icono { width:28px !important; height:28px !important; border:0 !important; background:transparent !important; color:#1F2937 !important; }
    .vn-topbar .vn-cmd-copy { display:block !important; width:100% !important; }
    .vn-topbar .vn-cmd-copy .vn-cmd-txt { color:#1F2937 !important; font-size:.78rem !important; font-weight:600 !important; }
    .vn-topbar .vn-cmd-kbd { min-width:0 !important; padding:3px 7px !important; border:0 !important; border-left:1px solid #9CA3AF !important; border-radius:0 !important; background:transparent !important; color:#4B5563 !important; }
    .vn-topbar > .vn-nav {
        grid-area:navegacion !important;
        position:static !important;
        inset:auto !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:100% !important;
        height:100% !important;
        min-width:0 !important;
        padding:0 !important;
        overflow:visible !important;
        border:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        transform:none !important;
    }
    .vn-topbar .vn-nav-lista {
        grid-column:auto !important;
        display:flex !important;
        flex:1 1 auto !important;
        align-items:center !important;
        justify-content:center !important;
        width:auto !important;
        height:100% !important;
        gap:clamp(.02rem,.25vw,.3rem) !important;
        margin:0 !important;
    }
    .vn-topbar .vn-nav-lista .vn-nav-item {
        width:auto !important;
        min-width:0 !important;
        min-height:40px !important;
        flex:0 1 auto !important;
        gap:0 !important;
        padding:0 clamp(.42rem,.65vw,.72rem) !important;
        border:0 !important;
        border-radius:9px !important;
        background:transparent !important;
        color:#1F2937 !important;
        font-size:clamp(.69rem,.65vw,.8rem) !important;
    }
    .vn-topbar .vn-nav-lista .vn-nav-item:hover { background:#D7D9DD !important; color:#111827 !important; }
    .vn-topbar .vn-nav-lista .vn-nav-item.activo { background:transparent !important; color:#111827 !important; }
    .vn-topbar .vn-nav-lista .vn-nav-item > i { display:none !important; }
    .vn-topbar .vn-nav-lista .vn-nav-item.activo::after { opacity:1 !important; background:#EDEDED !important; transform:scaleX(1) !important; }
    .vn-topbar .vn-nav-pie {
        grid-column:auto !important;
        display:flex !important;
        flex:0 0 auto !important;
        align-items:center !important;
        justify-self:auto !important;
        height:100% !important;
        gap:.05rem !important;
        margin:0 0 0 .25rem !important;
        padding:0 0 0 .25rem !important;
        border:0 !important;
        border-left:1px solid #9CA3AF !important;
    }
    .vn-topbar .vn-nav-pie .vn-nav-item { min-height:38px !important; padding:0 .35rem !important; border:0 !important; border-radius:8px !important; background:transparent !important; color:#1F2937 !important; }
    .vn-topbar .vn-nav-pie .vn-nav-item:hover { background:#D7D9DD !important; color:#111827 !important; }
    .vn-topbar-acciones { grid-area:acciones !important; }
    .vn-topbar .vn-cuenta { width:40px !important; height:40px !important; border-color:#4B5563 !important; border-radius:10px !important; background:#111827 !important; color:#EDEDED !important; }
    .vn-topbar .vn-cmd-kbd { display:none !important; }
    .vn-topbar .vn-cmd { grid-template-columns:28px minmax(0,1fr) !important; }
}

.vn-topbar .vn-idioma-globo { width:auto !important; color:inherit !important; }

@media (max-width:900px) {
    .vn-topbar {
        grid-template-columns:minmax(0,1fr) 40px auto !important;
        grid-template-areas:"identidad buscar acciones" !important;
        height:64px !important;
        padding:4px .85rem 0 !important;
        border:0 !important;
        border-bottom:1px solid rgba(75,85,99,.34) !important;
        background:#EDEDED !important;
        box-shadow:inset 0 4px #111827 !important;
    }
    .vn-topbar .vn-brand-txt { color:#111827 !important; }
    .vn-topbar .vn-rail-cap img { filter:brightness(.1) !important; }
    .vn-topbar .vn-cmd,.vn-topbar .vn-cmd:hover,.vn-topbar .vn-cmd:focus-visible { grid-area:buscar !important; background:#D7D9DD !important; color:#111827 !important; }
    .vn-topbar .vn-cmd-icono { color:#111827 !important; }
    .vn-topbar-acciones { grid-area:acciones !important; }
    .vn-topbar .vn-hamburger span { background:#111827 !important; }
    .vn-topbar > .vn-nav {
        position:fixed !important;
        top:64px !important;
        right:0 !important;
        bottom:0 !important;
        left:auto !important;
        display:flex !important;
        width:min(340px,90vw) !important;
        height:calc(100dvh - 64px) !important;
        flex-direction:column !important;
        padding:1rem !important;
        overflow-y:auto !important;
        border-left:1px solid #4B5563 !important;
        background:#111827 !important;
        transform:translateX(100%) !important;
    }
    .vn-topbar > .vn-nav.vn-nav-open { transform:translateX(0) !important; }
    .vn-topbar .vn-nav-lista { display:flex !important; width:100% !important; height:auto !important; flex:none !important; flex-direction:column !important; }
    .vn-topbar .vn-nav-lista .vn-nav-item { width:100% !important; min-height:50px !important; justify-content:flex-start !important; gap:.85rem !important; padding:0 .9rem !important; border:1px solid transparent !important; border-radius:10px !important; color:#EDEDED !important; }
    .vn-topbar .vn-nav-lista .vn-nav-item > i { display:block !important; }
    .vn-topbar .vn-nav-pie { display:flex !important; width:100% !important; height:auto !important; margin:auto 0 0 !important; padding:.85rem 0 0 !important; border-top:1px solid #4B5563 !important; border-left:0 !important; }
    .vn-topbar .vn-nav-pie .vn-nav-item { color:#EDEDED !important; }
}

.vn-topbar .vn-idioma-globo { width:auto !important; color:inherit !important; }
@media (min-width:901px) {
    .vn-topbar .vn-cmd-kbd { display:none !important; }
    .vn-topbar .vn-cmd { grid-template-columns:28px minmax(0,1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Navegación unificada 2026
   Una sola línea: marca · búsqueda · destinos · utilidades. La composición
   toma la claridad de una plataforma de mercados sin perder la paleta VALL.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --vn-barra-alto:76px; --vn-rail-ancho:0px; }

.vn-topbar {
    position:sticky;
    top:0;
    z-index:1003;
    display:grid;
    grid-template-columns:auto minmax(220px,310px) minmax(500px,1fr) auto;
    grid-template-areas:"identidad buscar navegacion acciones";
    align-items:center;
    gap:clamp(.85rem,1.8vw,2.25rem);
    width:100%;
    height:var(--vn-barra-alto);
    margin:0;
    padding:4px clamp(1.2rem,4.6vw,5.5rem) 0;
    border:0;
    border-bottom:1px solid rgba(75,85,99,.34);
    background:#EDEDED;
    box-shadow:inset 0 4px #111827,0 8px 28px rgba(17,24,39,.1);
}
.vn-topbar-identidad { grid-area:identidad; gap:0; overflow:visible; }
.vn-brand { gap:.62rem; min-width:max-content; }
.vn-rail-cap { width:31px; height:31px; }
.vn-rail-cap img { width:30px; filter:brightness(.1); }
.vn-brand-txt { color:#111827 !important; font-size:1.15rem; font-weight:850; letter-spacing:-.045em; }
.vn-contexto { display:none; }

.vn-topbar .vn-cmd {
    grid-area:buscar;
    display:grid;
    grid-template-columns:28px minmax(0,1fr) auto;
    justify-self:stretch;
    width:100%;
    min-width:0;
    min-height:42px;
    gap:.45rem;
    padding:.25rem .42rem .25rem .5rem;
    overflow:hidden;
    border:0 !important;
    border-radius:999px;
    background:#D7D9DD !important;
    color:#111827 !important;
    box-shadow:none;
}
.vn-topbar .vn-cmd::after { display:none; }
.vn-topbar .vn-cmd:hover,.vn-topbar .vn-cmd:focus-visible {
    border:0 !important;
    background:#C7CBD1 !important;
    color:#111827 !important;
    box-shadow:0 0 0 3px rgba(75,85,99,.16);
}
.vn-cmd-icono {
    width:28px;
    height:28px;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#1F2937;
}
.vn-cmd-copy { display:block; }
.vn-cmd-copy small { display:none; }
.vn-cmd-copy .vn-cmd-txt { color:#1F2937 !important; font-size:.78rem; font-weight:600; }
.vn-cmd-kbd {
    min-width:0;
    padding:3px 7px;
    border:0;
    border-left:1px solid #9CA3AF;
    border-radius:0;
    background:transparent;
    color:#4B5563 !important;
    box-shadow:none;
}

.vn-topbar > .vn-nav {
    grid-area:navegacion;
    position:static;
    inset:auto;
    z-index:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    min-width:0;
    padding:0;
    overflow:visible;
    border:0;
    background:transparent;
    box-shadow:none;
    transform:none;
}
.vn-topbar .vn-nav-lista {
    display:flex;
    flex:1 1 auto;
    align-items:center;
    justify-content:center;
    width:auto;
    min-width:0;
    height:100%;
    gap:clamp(.05rem,.4vw,.45rem);
}
.vn-topbar .vn-nav-lista::before,.vn-topbar .vn-nav-aguja { display:none; }
.vn-topbar .vn-nav-lista .vn-nav-item {
    position:relative;
    width:auto;
    min-width:0;
    min-height:40px;
    flex:0 1 auto;
    justify-content:center;
    gap:0;
    margin:0;
    padding:0 clamp(.55rem,.8vw,.9rem);
    border:0 !important;
    border-radius:9px;
    background:transparent !important;
    color:#1F2937 !important;
    font-size:.82rem;
    white-space:nowrap;
}
.vn-topbar .vn-nav-lista .vn-nav-item::after {
    content:"";
    position:absolute;
    right:.72rem;
    bottom:3px;
    left:.72rem;
    height:2px;
    border-radius:2px;
    background:#111827;
    opacity:0;
    transform:scaleX(.35);
    transition:opacity .2s,transform .2s;
}
.vn-topbar .vn-nav-lista .vn-nav-item:hover {
    border:0 !important;
    background:#D7D9DD !important;
    color:#111827 !important;
}
.vn-topbar .vn-nav-lista .vn-nav-item.activo {
    border:0 !important;
    background:transparent !important;
    color:#111827 !important;
    font-weight:800;
}
.vn-topbar .vn-nav-lista .vn-nav-item.activo::after { opacity:1; transform:scaleX(1); }
.vn-topbar .vn-nav-lista .vn-nav-item > i { display:none; }
.vn-topbar .vn-nav-txt { max-width:none; color:inherit; font-size:inherit; font-weight:inherit; letter-spacing:-.01em; }
.vn-topbar .vn-nav-corto { display:none; }
.vn-topbar .vn-nav-largo { position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; }

.vn-topbar .vn-nav-pie {
    display:flex;
    flex:0 0 auto;
    align-items:center;
    height:100%;
    gap:.1rem;
    margin:0 0 0 clamp(.35rem,.8vw,.9rem);
    padding:0 0 0 clamp(.35rem,.8vw,.9rem);
    border:0;
    border-left:1px solid #9CA3AF;
}
.vn-topbar .vn-nav-pie .vn-nav-item {
    min-height:38px;
    gap:.38rem;
    padding:0 .5rem;
    border:0 !important;
    border-radius:8px;
    background:transparent !important;
    color:#1F2937 !important;
}
.vn-topbar .vn-nav-pie .vn-nav-item:hover { border:0 !important; background:#D7D9DD !important; color:#111827 !important; }
.vn-topbar .vn-idioma-bandera { filter:grayscale(1); }
.vn-topbar-acciones { grid-area:acciones; gap:.5rem; }
.vn-topbar .vn-cuenta {
    width:40px;
    height:40px;
    border:1px solid #4B5563 !important;
    border-radius:10px;
    background:#111827 !important;
    color:#EDEDED !important;
}
.vn-topbar .vn-cuenta:hover { border-color:#111827 !important; background:#4B5563 !important; }
.vn-topbar .vn-hamburger span { background:#111827; }
.hdr-divider { display:none; }

@media (max-width:1380px) {
    .vn-topbar {
        grid-template-columns:auto minmax(190px,250px) minmax(450px,1fr) auto;
        gap:.8rem;
        padding-inline:1.5rem;
    }
    .vn-topbar .vn-nav-lista .vn-nav-item { padding-inline:.48rem; font-size:.75rem; }
    .vn-topbar .vn-nav-pie { margin-left:.25rem; padding-left:.25rem; }
    .vn-topbar .vn-nav-pie .vn-nav-item { padding-inline:.35rem; }
}

@media (max-width:1060px) {
    .vn-topbar {
        grid-template-columns:auto minmax(180px,240px) minmax(0,1fr) auto;
        grid-template-areas:"identidad buscar navegacion acciones";
        padding-inline:1rem;
    }
    .vn-topbar .vn-nav-lista .vn-nav-item { padding-inline:.42rem; }
    .vn-topbar .vn-nav-lista .vn-nav-item > i { display:none; }
    .vn-topbar .vn-nav-pie { display:none; }
}

@media (max-width:900px) {
    :root { --vn-barra-alto:64px; }
    .vn-topbar {
        grid-template-columns:minmax(0,1fr) 40px auto;
        grid-template-areas:"identidad buscar acciones";
        height:var(--vn-barra-alto);
        gap:.45rem;
        padding:4px .85rem 0;
    }
    .vn-rail-cap { width:28px; height:28px; }
    .vn-rail-cap img { width:27px; }
    .vn-brand-txt { font-size:1rem; }
    .vn-topbar .vn-cmd {
        grid-template-columns:1fr;
        width:40px;
        min-width:40px;
        min-height:40px;
        padding:0;
        border-radius:10px;
        background:#D7D9DD !important;
    }
    .vn-topbar .vn-cmd:hover,.vn-topbar .vn-cmd:focus-visible { background:#C7CBD1 !important; }
    .vn-topbar .vn-cmd-copy,.vn-topbar .vn-cmd-kbd { display:none; }
    .vn-topbar .vn-cmd-icono { margin:auto; }
    .vn-topbar > .vn-nav {
        position:fixed;
        top:var(--vn-barra-alto);
        right:0;
        bottom:0;
        left:auto;
        z-index:1001;
        display:flex;
        width:min(340px,90vw);
        height:calc(100dvh - var(--vn-barra-alto));
        flex-direction:column;
        justify-content:flex-start;
        padding:1rem;
        overflow-y:auto;
        border-left:1px solid #4B5563;
        background:#111827;
        box-shadow:-22px 0 60px rgba(17,24,39,.32);
        transform:translateX(100%);
        transition:transform .28s cubic-bezier(.4,0,.2,1);
    }
    .vn-topbar > .vn-nav.vn-nav-open { transform:translateX(0); }
    .vn-topbar .vn-nav-lista {
        display:flex;
        width:100%;
        height:auto;
        flex:none;
        flex-direction:column;
        align-items:stretch;
        gap:.25rem;
    }
    .vn-topbar .vn-nav-lista .vn-nav-item {
        width:100%;
        min-height:50px;
        justify-content:flex-start;
        gap:.85rem;
        padding:0 .9rem;
        border:1px solid transparent !important;
        border-radius:10px;
        color:#EDEDED !important;
        font-size:.9rem;
    }
    .vn-topbar .vn-nav-lista .vn-nav-item::after { display:none; }
    .vn-topbar .vn-nav-lista .vn-nav-item > i { display:block; width:22px; text-align:center; }
    .vn-topbar .vn-nav-lista .vn-nav-item:hover { border-color:#4B5563 !important; background:#1F2937 !important; color:#EDEDED !important; }
    .vn-topbar .vn-nav-lista .vn-nav-item.activo { border-color:#4B5563 !important; border-left:3px solid #EDEDED !important; background:#1F2937 !important; color:#EDEDED !important; }
    .vn-topbar .vn-nav-pie {
        display:flex;
        width:100%;
        height:auto;
        margin:auto 0 0;
        padding:.85rem 0 0;
        border-top:1px solid #4B5563;
        border-left:0;
    }
    .vn-topbar .vn-nav-pie .vn-nav-item { flex:1; min-height:46px; justify-content:center; color:#EDEDED !important; }
    .vn-topbar .vn-nav-pie .vn-nav-item:hover { background:#1F2937 !important; color:#EDEDED !important; }
    .vn-topbar .vn-idioma-menu { right:auto; bottom:calc(100% + 8px); top:auto; left:0; }
    .vn-topbar .vn-hamburger { display:flex; }
}

/* Distribución final: navegación centrada y buscador completamente estable. */
@media (min-width:901px) {
    .vn-nav {
        display:grid;
        grid-template-columns:minmax(80px,1fr) minmax(660px,980px) minmax(130px,1fr);
        align-items:stretch;
    }
    .vn-nav-lista {
        grid-column:2;
        display:grid;
        grid-template-columns:repeat(6,minmax(0,1fr));
        align-items:stretch;
        width:100%;
        min-width:0;
        gap:.2rem;
        margin:0;
    }
    .vn-nav-lista .vn-nav-item {
        width:100%;
        min-width:0;
        justify-content:center;
        padding:0 .55rem;
    }
    .vn-nav-pie {
        grid-column:3;
        justify-self:end;
        margin:0;
    }
}

.vn-topbar .vn-cmd,
.vn-topbar .vn-cmd:hover,
.vn-topbar .vn-cmd:focus,
.vn-topbar .vn-cmd:focus-visible,
.vn-topbar .vn-cmd:active {
    transform:none !important;
}
.vn-topbar .vn-cmd { transition:border-color .2s,background .2s,box-shadow .2s !important; }

@media (max-width:900px) {
    .vn-nav { display:flex; }
    .vn-nav-lista { display:flex; }
}

/* Distribución definitiva de la cabecera: tres zonas simétricas mantienen el
   centro de comandos centrado aunque identidad y cuenta midan distinto. */
.vn-topbar {
    display:grid;
    grid-template-columns:minmax(250px,1fr) minmax(380px,560px) minmax(250px,1fr);
    align-items:center;
    column-gap:clamp(.8rem,2vw,1.75rem);
}
.vn-topbar-identidad {
    display:flex;
    align-items:center;
    gap:.85rem;
    min-width:0;
    justify-self:start;
}
.vn-topbar-acciones {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:.55rem;
    min-width:0;
    justify-self:end;
}
.vn-topbar .vn-cmd {
    display:grid;
    grid-template-columns:36px minmax(0,1fr) auto;
    align-items:center;
    justify-self:center;
    width:100%;
    min-width:0;
    min-height:46px;
    margin:0;
    gap:.72rem;
    padding:.32rem .46rem .32rem .38rem;
}
.vn-cmd-icono { width:36px; height:36px; flex:none; }
.vn-cmd-copy { width:100%; }
.vn-cmd-copy small { margin:0; line-height:1; }
.vn-cmd-copy .vn-cmd-txt { line-height:1.25; }
.vn-cmd-kbd { min-width:48px; padding:5px 7px; text-align:center; white-space:nowrap; }
.vn-paleta-campo {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto auto;
    align-items:center;
    column-gap:.7rem;
}
.vn-paleta-campo input { width:100%; min-width:0; }

@media (max-width:1180px) {
    .vn-topbar { grid-template-columns:minmax(220px,1fr) minmax(340px,500px) minmax(150px,1fr); }
    .vn-topbar .vn-cmd { width:100%; min-width:0; }
}
@media (max-width:900px) {
    .vn-topbar {
        grid-template-columns:minmax(0,1fr) 40px auto;
        column-gap:.5rem;
    }
    .vn-topbar-identidad { gap:0; overflow:hidden; }
    .vn-topbar-acciones { gap:.38rem; }
    .vn-topbar .vn-cmd {
        grid-template-columns:1fr;
        width:40px;
        min-width:40px;
        min-height:40px;
        padding:2px;
    }
}
@media (max-width:480px) {
    .vn-paleta { border-radius:14px; }
    .vn-paleta-campo { grid-template-columns:auto minmax(0,1fr) auto; margin:.55rem; padding:.72rem; column-gap:.55rem; }
    .vn-paleta-campo > kbd { display:none; }
    .vn-paleta-campo input { font-size:.88rem; }
}

/* Centro de comandos · búsqueda protagonista y utilitaria */
.vn-topbar .vn-cmd {
    position: relative;
    width: clamp(320px, 36vw, 560px);
    min-width: 320px;
    min-height: 44px;
    gap: .72rem;
    padding: .34rem .42rem .34rem .38rem;
    overflow: hidden;
    border: 1px solid rgba(156,163,175,.52) !important;
    border-radius: 10px;
    background: linear-gradient(110deg,#1F2937 0%,#111827 100%) !important;
    box-shadow: inset 0 1px rgba(237,237,237,.06),0 8px 24px rgba(17,24,39,.22);
    transition: border-color .2s,background .2s,box-shadow .2s;
}
.vn-topbar .vn-cmd::after {
    content:"";
    position:absolute;
    right:54px;
    bottom:0;
    left:52px;
    height:1px;
    background:linear-gradient(90deg,transparent,#9CA3AF,transparent);
    opacity:.42;
}
.vn-topbar .vn-cmd:hover,
.vn-topbar .vn-cmd:focus-visible {
    border-color:#9CA3AF !important;
    background:linear-gradient(110deg,#4B5563 0%,#1F2937 72%) !important;
    box-shadow:0 12px 30px rgba(17,24,39,.35),inset 0 1px rgba(237,237,237,.1);
    transform:none;
}
.vn-cmd-icono {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    flex:0 0 34px;
    border:1px solid rgba(156,163,175,.3);
    border-radius:8px;
    background:#4B5563;
    color:#EDEDED;
}
.vn-cmd-copy { display:flex; min-width:0; flex:1; flex-direction:column; gap:2px; text-align:left; }
.vn-cmd-copy small {
    color:#9CA3AF;
    font:700 .49rem/1 ui-monospace,"JetBrains Mono",monospace;
    letter-spacing:.13em;
    text-transform:uppercase;
}
.vn-cmd-copy .vn-cmd-txt { overflow:hidden; color:#EDEDED !important; font-size:.76rem; text-overflow:ellipsis; white-space:nowrap; }
.vn-cmd-kbd {
    padding:4px 7px;
    border-color:#4B5563;
    border-radius:6px;
    background:#111827;
    color:#EDEDED !important;
    box-shadow:inset 0 1px rgba(237,237,237,.06);
}

/* La paleta abierta conserva la misma presencia que su disparador. */
.vn-paleta-fondo { padding-top:10vh; background:rgba(17,24,39,.78); backdrop-filter:blur(12px); }
.vn-paleta {
    max-width:680px;
    border-color:#4B5563;
    border-radius:18px;
    background:linear-gradient(145deg,#1F2937,#111827);
    box-shadow:0 36px 100px rgba(17,24,39,.72),0 0 0 1px rgba(156,163,175,.12);
}
.vn-paleta-campo { margin:.75rem; padding:.8rem .9rem; border:1px solid #4B5563; border-radius:12px; background:#111827; }
.vn-paleta-campo:focus-within { border-color:#9CA3AF; background:#1F2937; box-shadow:0 0 0 3px rgba(156,163,175,.12); }
.vn-paleta-campo input { color:#EDEDED; font-size:1rem; }
.vn-paleta-campo input::placeholder { color:#9CA3AF; }
.vn-paleta-lista { padding:.2rem .75rem .85rem; }
.vn-paleta-item { min-height:48px; border:1px solid transparent; border-radius:10px; }
.vn-paleta-item:hover,.vn-paleta-item.marcado { border-color:#4B5563; background:#4B5563; }

@media (max-width:1100px) {
    .vn-topbar .vn-cmd { width:min(42vw,460px); min-width:260px; }
    .vn-cmd-copy small { display:none; }
}
@media (max-width:900px) {
    .vn-topbar .vn-cmd { width:40px; min-width:40px; min-height:40px; margin-left:auto; padding:2px; border-radius:9px; }
    .vn-topbar .vn-cmd::after,.vn-cmd-copy,.vn-cmd-kbd { display:none; }
    .vn-cmd-icono { width:34px; height:34px; border:0; background:transparent; }
}

/* Paleta neutral final: #EDEDED · #9CA3AF · #4B5563 · #1F2937 · #111827 */
:root {
    --vn-navy: #111827;
    --vn-navy-hondo: #111827;
    --vn-navy-alto: #1F2937;
    --vn-marco-filo: rgba(156,163,175,.42);
    --vn-filo: rgba(156,163,175,.34);
    --vn-filo-suave: rgba(156,163,175,.18);
    --vn-tinta: #EDEDED;
    --vn-tinta-2: #9CA3AF;
}
.vn-topbar { border-bottom-color: rgba(156,163,175,.34); background:#111827; }
.vn-brand-txt { color:#EDEDED !important; }
.vn-contexto { border-left-color:rgba(156,163,175,.34); color:#9CA3AF; }
.vn-contexto-punto { background:#EDEDED; }
.vn-contexto-etq { color:#9CA3AF !important; }
.vn-contexto strong { color:#EDEDED; }
.vn-topbar .vn-cmd { border-color:rgba(156,163,175,.42) !important; background:#1F2937 !important; color:#EDEDED !important; }
.vn-topbar .vn-cmd:hover { border-color:#EDEDED !important; background:#111827 !important; }
.vn-cmd-kbd { border-color:#9CA3AF; background:#111827; color:#EDEDED !important; }
.vn-topbar .vn-cuenta { border-color:#4B5563 !important; background:#111827 !important; color:#EDEDED !important; }
.vn-topbar .vn-cuenta:hover { border-color:#EDEDED !important; background:#4B5563 !important; }
.vn-nav { border-bottom-color:#4B5563; background:#1F2937; }
.vn-nav-pie { border-left-color:rgba(237,237,237,.2); }
.vn-nav > .vn-nav-lista > .vn-nav-item,
.vn-nav > .vn-nav-pie .vn-nav-item { color:#EDEDED !important; }
.vn-nav > .vn-nav-lista > .vn-nav-item:hover,
.vn-nav > .vn-nav-pie .vn-nav-item:hover { border-bottom-color:#9CA3AF !important; background:#4B5563 !important; color:#EDEDED !important; }
.vn-nav > .vn-nav-lista > .vn-nav-item.activo { border-bottom-color:#EDEDED !important; background:#111827 !important; color:#EDEDED !important; }
.vn-hamburger span { background:#EDEDED; }

@media (max-width:900px) {
    .vn-nav { border-left-color:#9CA3AF; background:#111827; }
    .vn-nav > .vn-nav-lista > .vn-nav-item.activo { border-color:#4B5563 !important; border-left-color:#EDEDED !important; background:#1F2937 !important; }
    .vn-nav-pie { border-top-color:rgba(156,163,175,.35); }
}

/* Aislamiento frente a hojas heredadas que declaran button/a con !important. */
.vn-topbar .vn-cmd {
    border: 1px solid rgba(156,163,175,.42) !important;
    background: #1F2937 !important;
    color: #EDEDED !important;
}
.vn-topbar .vn-cmd:hover { border-color: #EDEDED !important; background: #111827 !important; color: #EDEDED !important; }
.vn-topbar .vn-cuenta { border: 1px solid #4B5563 !important; background: #111827 !important; color: #EDEDED !important; }
.vn-topbar .vn-cuenta:hover { border-color: #EDEDED !important; background: #4B5563 !important; color: #EDEDED !important; }
.vn-nav > .vn-nav-lista > .vn-nav-item,
.vn-nav > .vn-nav-pie .vn-nav-item {
    border-color: transparent !important;
    background: transparent !important;
    color: #EDEDED !important;
}
.vn-nav > .vn-nav-lista > .vn-nav-item:hover,
.vn-nav > .vn-nav-pie .vn-nav-item:hover {
    border-bottom-color: #9CA3AF !important;
    background: #4B5563 !important;
    color: #EDEDED !important;
}
.vn-nav > .vn-nav-lista > .vn-nav-item.activo {
    border-bottom-color: #EDEDED !important;
    background: #111827 !important;
    color: #EDEDED !important;
}
.vn-nav .vn-nav-item i { color: inherit !important; }

@media (max-width: 900px) {
    .vn-nav > .vn-nav-lista > .vn-nav-item,
    .vn-nav > .vn-nav-pie .vn-nav-item { border: 1px solid transparent !important; }
    .vn-nav > .vn-nav-lista > .vn-nav-item.activo {
        border-color: #4B5563 !important;
        border-left: 3px solid #EDEDED !important;
        background: #1F2937 !important;
    }
}

/* Cierre de especificidad del centro de comandos. */
.vn-topbar .vn-cmd { background:linear-gradient(110deg,#1F2937 0%,#111827 100%) !important; }
.vn-topbar .vn-cmd:hover,.vn-topbar .vn-cmd:focus-visible { background:linear-gradient(110deg,#4B5563 0%,#1F2937 72%) !important; }
@media (max-width:900px) {
    .vn-topbar .vn-cmd,.vn-topbar .vn-cmd:hover,.vn-topbar .vn-cmd:focus-visible { background:#1F2937 !important; }
}

/* Última palabra de la navegación unificada. */
@media (min-width:901px) {
    .vn-topbar {
        grid-template-columns:auto minmax(210px,300px) minmax(500px,1fr) auto !important;
        grid-template-areas:"identidad buscar navegacion acciones" !important;
        gap:clamp(.7rem,1.4vw,1.75rem) !important;
        height:76px !important;
        padding:4px clamp(1.1rem,4vw,4.8rem) 0 !important;
        border:0 !important;
        border-bottom:1px solid #4B5563 !important;
        background:#1F2937 !important;
        box-shadow:inset 0 4px #111827,0 10px 30px rgba(17,24,39,.24) !important;
    }
    .vn-topbar-identidad { grid-area:identidad !important; min-width:154px !important; }
    .vn-topbar .vn-brand { gap:.58rem !important; }
    .vn-topbar .vn-rail-cap { width:54px !important; height:40px !important; }
    .vn-topbar .vn-brand-logo { width:52px !important; max-width:none !important; max-height:36px !important; object-fit:contain !important; filter:none !important; }
    .vn-topbar .vn-brand-txt { display:inline !important; color:#EDEDED !important; font-size:1.15rem !important; font-weight:850 !important; }
    .vn-topbar .vn-rail-cap img { filter:none !important; }
    .vn-topbar .vn-contexto { display:none !important; }
    .vn-topbar .vn-cmd {
        grid-area:buscar !important;
        grid-template-columns:28px minmax(0,1fr) auto !important;
        justify-self:stretch !important;
        width:100% !important;
        min-width:0 !important;
        min-height:42px !important;
        gap:.45rem !important;
        padding:.25rem .42rem .25rem .5rem !important;
        border:0 !important;
        border-radius:999px !important;
        background:#111827 !important;
        color:#EDEDED !important;
        box-shadow:none !important;
    }
    .vn-topbar .vn-cmd:hover,.vn-topbar .vn-cmd:focus-visible { background:#4B5563 !important; box-shadow:0 0 0 3px rgba(156,163,175,.18) !important; }
    .vn-topbar .vn-cmd::after,.vn-topbar .vn-cmd-copy small { display:none !important; }
    .vn-topbar .vn-cmd-icono { width:28px !important; height:28px !important; border:0 !important; background:transparent !important; color:#EDEDED !important; }
    .vn-topbar .vn-cmd-copy { display:block !important; width:100% !important; }
    .vn-topbar .vn-cmd-copy .vn-cmd-txt { color:#EDEDED !important; font-size:.78rem !important; font-weight:600 !important; }
    .vn-topbar .vn-cmd-kbd { min-width:0 !important; padding:3px 7px !important; border:0 !important; border-left:1px solid #4B5563 !important; border-radius:0 !important; background:transparent !important; color:#9CA3AF !important; }
    .vn-topbar > .vn-nav {
        grid-area:navegacion !important;
        position:static !important;
        inset:auto !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:100% !important;
        height:100% !important;
        min-width:0 !important;
        padding:0 !important;
        overflow:visible !important;
        border:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        transform:none !important;
    }
    .vn-topbar .vn-nav-lista { grid-column:auto !important; display:flex !important; flex:1 1 auto !important; align-items:center !important; justify-content:center !important; width:auto !important; height:100% !important; gap:clamp(.02rem,.25vw,.3rem) !important; margin:0 !important; }
    .vn-topbar .vn-nav-lista .vn-nav-item { width:auto !important; min-width:0 !important; min-height:40px !important; flex:0 1 auto !important; gap:0 !important; padding:0 clamp(.42rem,.65vw,.72rem) !important; border:0 !important; border-radius:9px !important; background:transparent !important; color:#EDEDED !important; font-size:clamp(.69rem,.65vw,.8rem) !important; }
    .vn-topbar .vn-nav-lista .vn-nav-item:hover { background:#4B5563 !important; color:#EDEDED !important; }
    .vn-topbar .vn-nav-lista .vn-nav-item.activo { background:#111827 !important; color:#EDEDED !important; }
    .vn-topbar .vn-nav-lista .vn-nav-item > i { display:none !important; }
    .vn-topbar .vn-nav-lista .vn-nav-item.activo::after { opacity:1 !important; transform:scaleX(1) !important; }
    .vn-topbar .vn-nav-pie { grid-column:auto !important; display:flex !important; flex:0 0 auto !important; align-items:center !important; justify-self:auto !important; height:100% !important; gap:.05rem !important; margin:0 0 0 .25rem !important; padding:0 !important; border:0 !important; }
    .vn-topbar .vn-nav-pie .vn-nav-item { min-height:38px !important; padding:0 .35rem !important; border:0 !important; border-radius:8px !important; background:transparent !important; color:#EDEDED !important; }
    .vn-topbar .vn-nav-pie .vn-nav-item:hover { background:#4B5563 !important; color:#EDEDED !important; }
    .vn-topbar-acciones { grid-area:acciones !important; }
    .vn-topbar .vn-cuenta { width:42px !important; height:42px !important; border:1px solid #9CA3AF !important; border-radius:50% !important; background:#111827 !important; color:#EDEDED !important; box-shadow:0 4px 12px rgba(17,24,39,.28) !important; }
    .vn-topbar .vn-cuenta:hover { border-color:#EDEDED !important; background:#4B5563 !important; transform:translateY(-1px) !important; }
    .vn-topbar .vn-cuenta-inicial { display:grid !important; place-items:center !important; width:100% !important; height:100% !important; font-size:.86rem !important; }
}

@media (max-width:900px) {
    .vn-topbar { grid-template-columns:minmax(0,1fr) 40px auto !important; grid-template-areas:"identidad buscar acciones" !important; height:64px !important; padding:4px .85rem 0 !important; border:0 !important; border-bottom:1px solid #4B5563 !important; background:#1F2937 !important; box-shadow:inset 0 4px #111827 !important; }
    .vn-topbar .vn-brand { gap:.42rem !important; }
    .vn-topbar .vn-brand-txt { display:inline !important; color:#EDEDED !important; font-size:1rem !important; font-weight:850 !important; }
    .vn-topbar .vn-rail-cap { width:42px !important; height:34px !important; }
    .vn-topbar .vn-rail-cap img { width:40px !important; max-width:none !important; max-height:31px !important; object-fit:contain !important; filter:none !important; }
    .vn-topbar .vn-cmd,.vn-topbar .vn-cmd:hover,.vn-topbar .vn-cmd:focus-visible { grid-area:buscar !important; background:#111827 !important; color:#EDEDED !important; }
    .vn-topbar .vn-cmd-icono { color:#EDEDED !important; }
    .vn-topbar-acciones { grid-area:acciones !important; }
    .vn-topbar .vn-hamburger span { background:#EDEDED !important; }
    .vn-topbar .vn-cuenta { border-radius:50% !important; }
    .vn-topbar .vn-cuenta-inicial { display:grid !important; place-items:center !important; width:100% !important; height:100% !important; }
    .vn-topbar > .vn-nav { position:fixed !important; top:64px !important; right:0 !important; bottom:0 !important; left:auto !important; display:flex !important; width:min(340px,90vw) !important; height:calc(100dvh - 64px) !important; flex-direction:column !important; padding:1rem !important; overflow-y:auto !important; border-left:1px solid #4B5563 !important; background:#111827 !important; transform:translateX(100%) !important; }
    .vn-topbar > .vn-nav.vn-nav-open { transform:translateX(0) !important; }
    .vn-topbar .vn-nav-lista { display:flex !important; width:100% !important; height:auto !important; flex:none !important; flex-direction:column !important; }
    .vn-topbar .vn-nav-lista .vn-nav-item { width:100% !important; min-height:50px !important; justify-content:flex-start !important; gap:.85rem !important; padding:0 .9rem !important; border:1px solid transparent !important; border-radius:10px !important; color:#EDEDED !important; }
    .vn-topbar .vn-nav-lista .vn-nav-item > i { display:block !important; }
    .vn-topbar .vn-nav-pie { display:flex !important; width:100% !important; height:auto !important; margin:auto 0 0 !important; padding:.85rem 0 0 !important; border-top:1px solid #4B5563 !important; border-left:0 !important; }
    .vn-topbar .vn-nav-pie .vn-nav-item { color:#EDEDED !important; }
}