/* ============================================================
   Ajustes EBSA sobre el diseño new_home (no tocar los vendors)
   - Videos de lengua de señas en los menús
   - Menú desplegable más compacto
   - Tamaños de fuente accesibles en la primera línea del menú
   ============================================================ */

/* ---------- Videos de lengua de señas en los dropdowns ---------- */
.dropdown .video-area {
    padding: 10px 14px 0 14px;
    text-align: center;
}

.dropdown .video-area video {
    width: 100%;
    max-width: 240px;
    height: auto;
    border-radius: 8px;
    display: inline-block;
}

/* Dropdown que solo contiene el video (Transparencia) */
.dropdown.dropdown-video-only {
    width: 260px;
    padding: 6px 0 12px 0;
}

/* Video de señas en el buscador offcanvas */
.search-box .video-area {
    margin-top: 18px;
    text-align: center;
}

.search-box .video-area video {
    width: 100%;
    max-width: 260px;
    height: auto;
    border-radius: 8px;
}

/* ---------- Degradado del body repetido (Google Translate) ---------- */
/* El widget de Google Translate inyecta height:100% en <html>; con eso
   el degradado del body se propaga al canvas con un tile del alto del
   viewport y se repite en cada pantalla (se veían franjas beige cada
   ~900px). Darle fondo propio a <html> corta esa propagación y el
   degradado vuelve a pintarse UNA sola vez sobre todo el documento. */
html {
    background: #F6F6F6;
}

/* ---------- Botón "ver todas" en tabs de carrusel ---------- */
/* El .view-all-press original es la píldora vertical lateral de la
   grilla de comunicados; en los tabs con carrusel (Noticias, EBSA en
   acción) se usa la variante horizontal centrada bajo el carrusel. */
.informative-tab-item .view-all-press.horizontal {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    min-height: auto;
    margin: 20px auto 0 auto;
    padding: 12px 30px;
}

.informative-tab-item .view-all-press.horizontal a {
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
}

/* ---------- Selector de idioma (Google Translate) ---------- */
/* El diseño trae #google_translate_element con display:none y sin
   comportamiento: al dar clic en el ícono de idioma no pasaba nada.
   El clic ahora alterna la clase .mostrar-idioma (ebsa-custom.js) y
   el combo aparece a la izquierda de la barra de accesibilidad. */
.accesibilidad-icons .accesibilidad-icon {
    position: relative;
    cursor: pointer;
    /* Objetivo táctil mínimo 44x44px (WCAG 2.5.5 AAA): el ícono visible
       queda igual (35px), se agranda solo el área clicable/táctil. */
    min-width: 44px;
    min-height: 44px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

/* Panel flotante con el selector (sin tooltip que choque encima) */
.idioma-panel {
    display: none;
    position: absolute;
    right: 56px;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    background: #FFF;
    border-radius: 12px;
    -webkit-box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.25);
            box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.25);
    padding: 14px 16px;
    width: 230px;
    text-align: left;
    cursor: default;
}

.accesibilidad-icon.mostrar-idioma .idioma-panel {
    display: block;
}

.idioma-panel h4 {
    font-size: 15px;
    font-weight: 600;
    color: #172540;
    margin: 0 0 10px 0;
}

/* El widget dentro del panel fluye normal (el diseño lo traía
   absoluto y oculto) */
.idioma-panel #google_translate_element {
    display: block;
    position: static;
    height: auto;
    overflow: visible;
}

/* Oculta el texto "Powered by Google" del gadget, deja solo el combo */
.idioma-panel .goog-te-gadget {
    font-size: 0;
}

.idioma-panel .goog-te-combo,
.idioma-panel #google_translate_element select {
    font-size: 14px;
    width: 100%;
    padding: 10px;
    cursor: pointer;
}

/* ---------- Footer: Powered by ---------- */
.footer-bottom-area .powered-by {
    text-align: center;
    padding-top: 10px;
}

.footer-bottom-area .powered-by p {
    color: #FFF;
    font-size: 13px;
    margin: 0;
}

.footer-bottom-area .powered-by a {
    color: #FFC629;
    /* El amarillo sobre azul solo da 1.6:1 contra el texto blanco
       circundante; el subrayado distingue el enlace sin depender del
       color. Con !important porque el reset global "a" ya usa
       !important y gana por especificidad si no se iguala el peso. */
    text-decoration: underline !important;
}

/* ---------- Accesibilidad: navegación por teclado ---------- */
/* Enlace "Ir al contenido principal": oculto hasta recibir foco con tab */
.skip-link {
    position: fixed;
    top: -100px;
    left: 0;
    z-index: 10000010;
    background: #FFC629;
    color: #172540 !important;
    font-weight: 700;
    font-size: 16px;
    padding: 14px 28px;
    border-radius: 0 0 10px 0;
    -webkit-transition: top 0.2s;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
}

/* Foco visible en todos los elementos interactivos: anillo oscuro con
   halo amarillo, legible sobre fondos claros y oscuros */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
    outline: 4px solid #172540;
    outline-offset: 3px;
    -webkit-box-shadow: 0 0 0 8px #FFC629;
            box-shadow: 0 0 0 8px #FFC629;
    border-radius: 4px;
}

/* El destino del skip-link no necesita anillo al recibir foco programático */
#contenido-principal:focus {
    outline: none;
}

/* ---------- Modal "Canales de Atención" ---------- */
/* Mantiene el contenido que ya existía (categoría/ítems de Sede
   Electrónica) con el estilo del nuevo Home en vez de la grilla vieja. */
.ebsa-modal-canales .modal-content {
    border-radius: 20px;
    border: 0;
    overflow: hidden;
}

.ebsa-modal-canales .modal-header {
    background: #172540;
    border: 0;
    padding: 20px 24px;
}

.ebsa-modal-canales .modal-title,
.ebsa-modal-canales .modal-body h5 {
    color: #FFF;
    font-weight: 700;
    margin: 0;
}

.ebsa-modal-canales .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 1;
}

.ebsa-modal-canales .modal-body {
    padding: 30px 24px;
}

.ebsa-modal-canales .modal-body h5 {
    color: #172540;
    font-size: 20px;
    margin-bottom: 14px;
}

.ebsa-modal-canales-desc {
    color: #555;
    margin-bottom: 20px;
}

.ebsa-modal-canales-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 18px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.ebsa-modal-canales-item {
    width: 150px;
}

.ebsa-modal-canales-item a {
    display: block;
    text-align: center;
    background: #F6F6F6;
    border-radius: 16px;
    padding: 18px 12px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.ebsa-modal-canales-item a:hover {
    background: #FFC629;
}

.ebsa-modal-canales-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 10px auto;
}

.ebsa-modal-canales-icon lottie-player {
    width: 100%;
    height: 100%;
}

.ebsa-modal-canales-icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.ebsa-modal-canales-item p {
    color: #172540;
    font-weight: 600;
    font-size: 14px;
    margin: 0;
}

.ebsa-modal-volver {
    color: #FFF;
    font-weight: 600;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
}

.ebsa-modal-canales-texto {
    color: #444;
    line-height: 160%;
}

.ebsa-modal-canales-btn {
    display: inline-block;
    margin-top: 20px;
    background: #FFC629;
    color: #172540;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 40px;
}

/* ---------- Tab "Videos" (Infórmate con buena energía) ---------- */
/* Reutiliza el carrusel .swiper/.card de "EBSA en acción" pero con
   iframes de YouTube (16:9) en vez de imagen + texto. */
.ebsa-video-card {
    padding: 12px !important;
    width: 340px;
}

.ebsa-video-card iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 14px;
    display: block;
}

/* ---------- "Soluciona tus dudas fácilmente": color de texto ---------- */
/* .qn-btn no define color propio y hereda el azul de enlace del
   navegador; el diseño lo pide en negro (texto oscuro consistente). */
.qn-btn {
    color: #000000 !important;
}

/* ---------- Kilovatio responde: número de WhatsApp ---------- */
/* El <span> del número heredaba por accidente ".kilovatio-box span"
   (font-size 20px/700, definido para otro componente); se iguala aquí
   al tamaño genérico de los demás íconos de la sección (13px/500). */
.contact-single-item .c-icon-value {
    font-weight: 500;
    font-size: 13px;
}

/* ---------- Accesibilidad: contraste de botones dorados ---------- */
/* Blanco sobre dorado (#FFC629/#D1A62E) da ~1.6:1 y ~2:1, muy por debajo
   del 4.5:1 mínimo AA (y 7:1 AAA) para texto pequeño (10px). Se cambia
   a la misma tinta oscura usada en el resto del diseño (~8.6:1):
   - .press-content a: botón "Leer" de boletines/comunicados
   - .card a: botón "Más información" de los carruseles (noticias, EBSA en acción) */
.press-content a,
.card a {
    color: #172540 !important;
}

/* ---------- Accesibilidad: objetivo táctil de flechas del carrusel ---------- */
/* swiper.css (vendor) trae 27x44px; se amplía a 44x44 mínimo (WCAG 2.5.5 AAA). */
.swiper-button-prev,
.swiper-button-next {
    width: 44px;
}

/* ---------- Accesibilidad AAA progresiva: lectura y enlaces ---------- */
main#contenido-principal.ebsa-internal-page .single-desriptions-area {
    line-height: 1.8;
}

main#contenido-principal.ebsa-internal-page .single-desriptions-area p,
main#contenido-principal.ebsa-internal-page .single-desriptions-area li {
    line-height: 1.8;
}

main#contenido-principal.ebsa-internal-page .single-desriptions-area a:not(.btn) {
    font-weight: 700;
    text-decoration: underline !important;
    text-decoration-thickness: 0.12em !important;
    text-underline-offset: 0.18em;
}

main#contenido-principal.ebsa-internal-page .single-desriptions-area a:not(.btn):hover,
main#contenido-principal.ebsa-internal-page .single-desriptions-area a:not(.btn):focus-visible {
    text-decoration-thickness: 0.18em !important;
}

/* Respeta usuarios que prefieren menos movimiento y evita animaciones no
   esenciales al navegar con tecnologias de asistencia. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.01ms !important;
                animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
                animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        -webkit-transition-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
    }
}

/* ---------- Modal "Soluciona tus dudas fácilmente" (FAQ destacadas) ---------- */
.ebsa-modal-faq .modal-content {
    border-radius: 20px;
    border: 0;
    overflow: hidden;
}

.ebsa-modal-faq .modal-header {
    background: #172540;
    border: 0;
    padding: 20px 24px;
}

.ebsa-modal-faq .modal-title {
    color: #FFF;
    font-weight: 700;
    margin: 0;
    font-size: 18px;
}

.ebsa-modal-faq .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 1;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
}

.ebsa-modal-faq .modal-body {
    padding: 26px 24px;
    color: #444;
    line-height: 160%;
}

.ebsa-modal-faq .modal-body ol,
.ebsa-modal-faq .modal-body ul {
    padding-left: 20px;
    margin-bottom: 14px;
}

.ebsa-modal-faq .modal-body li {
    margin-bottom: 8px;
}

.ebsa-modal-faq .modal-body p {
    margin-bottom: 14px;
}

.ebsa-modal-faq .modal-body a {
    color: #172540;
    font-weight: 600;
    text-decoration: underline;
}

.ebsa-modal-faq .modal-body table {
    width: 100%;
    font-size: 14px;
}

.ebsa-modal-faq .modal-body th {
    background: #172540;
    color: #FFF;
    padding: 10px;
    text-align: left;
}

.ebsa-modal-faq .modal-body td {
    padding: 10px;
    vertical-align: top;
}

/* ---------- SweetAlert por encima del panel de búsqueda ---------- */
/* El offcanvas .search-box usa z-index 999999 y SweetAlert2 trae 1060,
   por lo que las alertas de validación quedaban por debajo. */
.swal2-container {
    z-index: 1000000 !important;
}

/* ---------- Cambio de contraste (accesibilidad) ---------- */
/* El filtro se aplica al elemento raíz <html> y NO al body/#page-top:
   un filter en cualquier otro elemento crea un containing block para
   los descendientes position:fixed (la barra de accesibilidad saltaba
   a la mitad de la página). El elemento raíz está exento por spec. */

/* Modo 1: escala de grises (daltonismo / baja percepción de color) */
html.ebsa-contraste-gris {
    filter: grayscale(100%);
}

/* Modo 2: contraste alto oscuro (fotosensibilidad / baja visión).
   Se invierten los colores y se corrige el tono; las imágenes y videos
   se re-invierten para que conserven sus colores naturales. */
html.ebsa-contraste-alto {
    filter: invert(100%) hue-rotate(180deg);
    background: #000;
}

html.ebsa-contraste-alto img,
html.ebsa-contraste-alto video,
html.ebsa-contraste-alto iframe {
    filter: invert(100%) hue-rotate(180deg);
}

/* ---------- Menú principal: dropdown más compacto ---------- */
/* El diseño original usa padding 18px por ítem; con menús de 8-10
   ítems (Proveedores) el desplegable se sale de la pantalla. */
.menubar .dropdown {
    width: 300px;
    padding-bottom: 12px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
}

.menubar .dropdown ul li a {
    padding: 9px 12px;
    font-size: 14px;
    line-height: 130%;
}

/* Permite abrir los desplegables del menu principal al navegar con Tab. */
.menubar > ul > li:focus-within:not(.keyboard-closed) > .dropdown,
.menubar > ul > li.keyboard-open > .dropdown,
.header-top-menu > ul > li:focus-within:not(.keyboard-closed) > .dropdown,
.header-top-menu > ul > li.keyboard-open > .dropdown {
    display: block;
}

.menubar > ul > li.keyboard-closed > .dropdown,
.header-top-menu > ul > li.keyboard-closed > .dropdown {
    display: none !important;
}

/* ---------- Primera línea del menú: accesibilidad ---------- */
/* Sube 14px -> 15px el menú superior y 12px -> 14px sus dropdowns
   (mínimos recomendados de legibilidad; el contraste blanco sobre
   #151D37 ya cumple AAA). */
.header-top-menu ul li a {
    font-size: 15px;
}

.header-top-menu ul li .dropdown ul li a {
    font-size: 14px;
    padding: 9px 10px;
}

/* El CSS original trae "width: px" (valor inválido): fijamos ancho
   real para los desplegables de la primera línea. */
.header-top-menu .dropdown {
    width: 277px;
}

/* ---------- Primera línea del menú: se salía en pantallas grandes ----------
   "Transparencia y Acceso a la Información Pública" + "Atención y Servicio
   al Ciudadano" + "Participa" no cabían en el ancho que el diseño original
   le daba a esa columna (col-lg-9, junto al logo en col-lg-3). Le damos más
   espacio a la columna del menú y reducimos un poco el padding/separación
   entre ítems. */
.desktop-header .col-lg-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16%;
    max-width: 16%;
}

.desktop-header .col-lg-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 84%;
    max-width: 84%;
}

.logo img {
    max-width: 160px;
}

.header-top-menu ul li {
    padding: 0 8px;
}

@media (min-width: 992px) and (max-width: 1300px) {
    .header-top-menu ul li {
        padding: 0 6px;
    }

    .header-top-menu ul li a {
        font-size: 13px;
    }
}

/* ---------- Ancho del contenedor del footer, a nivel global (Home + internas) ---------- */
.footer-area .container {
    max-width: 1400px;
}