/*
 * Overrides puntuales que se cargan después del style.css legacy.
 */

/* Botones del top_menu (Menú verde y Oficina Virtual): un poco más pequeños. */
ul#top_menu > li a.btn_access {
    padding: 5px 12px !important;
    font-size: 0.88rem;
}

/* El botón "Menú" verde funciona como toggle del hamburguesa en toda pantalla. */
ul#top_menu > li a.btn_access.open_close {
    cursor: pointer;
}

/* El buscador, el CTA y los items mobile-only del menú lateral. En PC se ocultan
   para no romper el nav inline; en mobile el media query los activa. */
.main-menu__buscar { display: none; }
.main-menu li.main-menu__cta,
.main-menu li.main-menu__solo_mobile { display: none !important; }
.main-menu li.pais-actual-nav.pais-actual-nav--top { display: none !important; }

@media (max-width: 991px) {
    .main-menu__buscar {
        display: block;
        padding: 14px 14px 4px;
        border-bottom: 1px solid #ededed;
        background: #fff;
    }
    /* Items que solo deben verse en el panel del menú móvil. */
    .main-menu li.main-menu__solo_mobile,
    .main-menu li.pais-actual-nav.pais-actual-nav--top { display: block !important; }
    /* Evitar duplicado: ocultar la pill de país que está al final del menú
       cuando ya hay una versión al principio. */
    .main-menu li.pais-actual-nav:not(.pais-actual-nav--top) { display: none !important; }
    /* El componente .buscador embebido — ajustes para caber en el panel. */
    .main-menu__buscar .buscador__top { margin-bottom: 10px; }
    .main-menu__buscar .buscador__nav-pickers { display: none; } /* selects redundantes con menú */

    /* Pills de tabs visibles dentro del menú (override del color: #333 !important
       que el CSS legacy aplica a todo a/li dentro de .main-menu). */
    .main-menu__buscar .buscador__tabs {
        padding: 3px;
        background: #f1f1f3;
    }
    .main-menu__buscar .buscador__tab {
        padding: 6px 14px;
        font-size: 13px;
        color: #5b6770 !important;
        background: transparent !important;
        border: 0 !important;
        font-weight: 500;
    }
    .main-menu__buscar .buscador__tab.is-active {
        background: #c8102e !important;
        color: #fff !important;
    }
    .main-menu__buscar .buscador__form {
        padding: 10px;
        gap: 6px;
        box-shadow: none;
        border: 1px solid #ececec;
    }
    .main-menu__buscar .buscador__field span {
        font-size: 11px;
        padding-left: 8px;
    }
    .main-menu__buscar .buscador__field input,
    .main-menu__buscar .buscador__field select {
        padding: 8px 10px;
        font-size: 13px;
    }
    .main-menu__buscar .buscador__cta {
        padding: 9px 16px;
        font-size: 13px;
    }

    .main-menu li.main-menu__cta {
        display: block !important;
        padding: 14px 16px;
        border-top: 1px solid #ededed;
        margin-top: 8px;
        border-bottom: 0 !important;
    }
    .main-menu__cta > a {
        display: inline-block !important;
        width: auto;
        text-align: center;
        padding: 9px 22px !important;
        background: #3cb46e !important;
        color: #fff !important;
        border-radius: 6px;
        font-weight: 600;
        text-decoration: none;
        border: 0 !important;
        font-size: 14px;
    }
    .main-menu__cta > a:hover {
        background: #2f9659 !important;
        color: #fff !important;
    }
}
.main-menu__buscar input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    background: #fafafa;
}
.main-menu__buscar input:focus {
    border-color: #c8102e;
    background: #fff;
}
.main-menu__buscar button {
    border: 0;
    background: #c8102e;
    color: #fff;
    padding: 0 12px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.main-menu__buscar button:hover {
    background: #8a0a1f;
}


/* Item de país activo en el navbar: ancho fijo cómodo, sin saltos de línea. */
.pais-actual-nav > a {
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap;
    max-width: 220px;
}

/* Columnas del footer en mobile: textos de los listados de países y enlaces más
   pequeños para que las líneas largas (ej. "Operadores Logísticos en …") no se
   pasen del ancho de columna. */
/* Por defecto el botón Menú móvil NO se ve. Solo aparece en mobile. */
header a.open_close.menu_btn_mobile { display: none !important; }

@media (max-width: 991px) {
    /* En mobile el #top_menu (Registro + Oficina Virtual) se oculta
       porque el botón verde "Menú" lo reemplaza como punto de entrada. */
    header ul#top_menu { display: none !important; }

    /* Botón "Menú" verde a la derecha. */
    header a.open_close.menu_btn_mobile {
        position: absolute;
        top: 12px;
        right: 12px;
        left: auto;
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        height: auto;
        width: auto;
        padding: 7px 14px;
        background: #3cb46e;
        color: #fff !important;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        box-shadow: 0 4px 12px rgba(60, 180, 110, 0.25);
        z-index: 100;
    }
    header a.open_close.menu_btn_mobile:hover {
        background: #2f9659;
        color: #fff !important;
    }
    .menu_btn_mobile__icon { font-size: 18px; line-height: 1; }

    /* Logo a la izquierda (donde estaba el hamburguesa anterior). */
    header #logo {
        text-align: left !important;
        padding-left: 10px;
    }
    header #logo a {
        justify-content: flex-start;
    }

    /* En el cintillo rojo del menú abierto, el ✕ blanco. */
    #header_menu a.open_close {
        color: #fff !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Cabecera del menú mobile en rojo corporativo (no el rosa por defecto). */
    #header_menu {
        background-color: #c8102e !important;
    }

    /* Logo blanco grande y centrado sobre la franja roja al abrir el menú. */
    #header_menu {
        text-align: center !important;
    }
    #header_menu .header_menu__logo,
    #header_menu .header_menu__logo img {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    #header_menu .header_menu__logo {
        display: inline-block;
        line-height: 0;
        margin: 0 auto;
    }
    #header_menu .header_menu__logo img {
        display: block;
        height: 36px;
        width: auto;
        max-width: 100%;
    }

    /* Items del menú móvil: espaciado más pegado entre filas. */
    .main-menu ul li a {
        padding: 9px 15px !important;
        line-height: 1.25;
    }
    .main-menu ul li.submenu ul li a {
        padding: 6px 15px !important;
    }
    .main-menu ul li a:hover,
    .main-menu a.show-submenu:hover {
        color: #c8102e !important;
    }
}

@media (max-width: 991px) {
    footer .links ul li a {
        font-size: 12.5px;
        line-height: 1.4;
        word-break: break-word;
    }
    footer h3 {
        font-size: 15px;
    }
    /* Sólo "Enlaces rápidos" (#collapse_1) arranca abierto en móvil;
       el resto se mantiene colapsado hasta que el usuario lo expanda. */
    footer #collapse_1.links {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }

    /* Cards de empresas y de sectores: menos margen vertical entre tarjetas apiladas. */
    .tarjetas-empresas .row > [class*="col-"],
    main.bg_color .row > [class*="col-xl-4"] {
        margin-bottom: 12px;
        padding-bottom: 0;
    }
    .tarjetas-empresas .row > [class*="col-"].mb-4 {
        margin-bottom: 12px !important;
    }
    .tarjetas-empresas .strip,
    main.bg_color .strip {
        margin-bottom: 0;
    }

    .directorio-listado.tarjetas-empresas { padding-top: 12px; padding-bottom: 12px; }
}

/* Grilla de empresas: el spacing entre cards lo controla el gutter del row
   (g-2). Anulamos el margin-bottom hardcoded del .strip del template para
   que la separación vertical iguale a la horizontal. */
.tarjetas-empresas .strip {
    margin-bottom: 0;
}

/* Paginador del listado en colores del logo. */
.pagination_fg a {
    background-color: #c8102e !important;
    border: 1px solid #c8102e !important;
    color: #fff !important;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.pagination_fg a:hover:not(.disabled) {
    background-color: #8a0a1f !important;
    border-color: #8a0a1f !important;
    color: #fff !important;
}

.pagination_fg a.active,
.pagination_fg a.active:hover {
    background-color: #8a0a1f !important;
    border-color: #8a0a1f !important;
    color: #fff !important;
    cursor: default;
}

.pagination_fg a.disabled {
    background-color: #f4f4f6 !important;
    border-color: #e3e3e7 !important;
    color: #bbb !important;
    cursor: not-allowed;
}

.pagination_fg .ellipsis {
    display: inline-block;
    padding: 8px 6px;
    color: #999;
    margin: 0 3px;
}