/* ============================================================
   responsive.css - Guia del Packaging
   Solo afecta móvil/tablet. Desktop queda idéntico.
   ============================================================ */

/* Imágenes nunca se salen del contenedor */
img { max-width: 100%; height: auto; }

/* ============================================================
   TABLET (< 1040px): encoger el wrapper principal
   ============================================================ */
@media screen and (max-width: 1040px) {

    /* El contenedor principal de 990px se vuelve fluido */
    table[width="990"] { width: 100% !important; }
    table[width="900"] { width: 100% !important; }
    table[width="970"] { width: 100% !important; }

    /* Buscador */
    .form_search  { width: 100% !important; box-sizing: border-box; }
    .form_enviar  { width: 100% !important; box-sizing: border-box; }

    /* Notas */
    .bg_notas { width: 100% !important; }
}

/* ============================================================
   MÓVIL (< 768px)
   ============================================================ */
@media screen and (max-width: 768px) {

    body { overflow-x: hidden; }

    /* ── Wrapper principal centrado ─────────────────────────── */
    table[width="990"],
    table[width="900"],
    table[width="970"],
    table[align="center"] {
        width: 100% !important;
        margin-left: auto  !important;
        margin-right: auto !important;
    }

    /* ── Header / hero ──────────────────────────────────────── */
    /* Todas comparten el mismo patron: height fijo (300px/466px) +
       background-image anclada abajo (bg_contacto/bg_rubros/bg_news) o
       arriba (bg-top) -- si el contenido (menu abierto) necesita mas alto,
       la imagen se corre y deja un hueco sin fondo. Se reemplaza por un
       color solido, que no tiene ese problema sea cual sea el alto real. */
    .bg-top, .bg_contacto, .bg_rubros, .bg_news {
        height: auto !important;
        background-image: none !important;
        background-color: #003f81 !important;
    }
    .bg-top-interior{ position: relative !important; height: auto !important; background-image: none !important; }

    /* Logo */
    td[width="183"] { width: 100% !important; text-align: center; }
    td[width="183"] img { width: 140px !important; }

    /* ── Buscador: apilar los 4 campos ──────────────────────── */
    td[width="29%"], td[width="26%"],
    td[width="30%"], td[width="15%"] {
        display: block !important;
        width: 100%   !important;
        text-align: center;
        padding: 4px 8px !important;
    }
    .form_search, .form_search_int {
        width: 100% !important;
        box-sizing: border-box;
        margin-bottom: 6px;
    }
    .form_enviar, .form_enviar_INT {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* ── Submenú de sectores ────────────────────────────────── */
    .bg_menu_segmentos td { height: auto !important; padding: 6px 8px !important; }
    a.menu_seg {
        display: inline-block;
        font-size: 11px;
        padding: 4px 6px;
        line-height: 1.6;
    }

    /* ── Menú superior: apilar links / iconos en vez de amontonarlos
       en la columna derecha junto al logo ────────────────────── */
    .menu-superior-wrap {
        display: block !important;
        width: 100% !important;
        position: relative !important; /* ancla para el boton hamburguesa, sin depender de como la tabla reparta el ancho */
        min-height: 40px;
        background-color: #003f81; /* propio, no depende de que el contenedor de afuera se estire bien */
    }
    .menu-superior-links,
    .menu-superior-iconos {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        height: auto !important;
        padding: 6px 0 !important;
    }
    a.menu {
        display: inline-block;
        font-size: 13px;
        padding: 6px 8px;
    }

    /* ── Menú superior: botón hamburguesa / X para abrir y cerrar ──
       Posicion absoluta ANCLADA a .menu-superior-wrap (arriba a la derecha): no
       depende de cuanto ancho le termine dando la tabla a la celda que lo contiene
       (esa celda puede venir con un width= HTML fijo distinto segun la pagina). */
    .menu-hamburger {
        display: block !important;
        position: absolute;
        top: 8px;
        right: 8px;
        width: 32px;
        height: 24px;
        margin: 0;
        padding: 0;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 2;
    }
    .menu-hamburger span {
        display: block;
        width: 100%;
        height: 3px;
        margin: 5px 0;
        background: #fff;
        border-radius: 2px;
        transition: transform .2s ease, opacity .2s ease;
    }
    .menu-hamburger.activo span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-hamburger.activo span:nth-child(2) { opacity: 0; }
    .menu-hamburger.activo span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .menu-superior-lista {
        display: none;
        margin-top: 10%; /* separacion del boton/icono de arriba para que no quede pegado */
        padding-top: 6px;
    }
    .menu-superior-lista.abierto {
        display: block;
        background-color: #003f81;
    }
    .menu-superior-lista a.menu {
        display: block;
        padding: 10px 8px;
        border-top: 1px solid rgba(255,255,255,.15);
    }

    /* ── Resultados / listados ──────────────────────────────── */
    .contenedor_secciones,
    .contenedor_RESULTADO-01,
    .contenedor_RESULTADO-02,
    .contenedor_RESULTADO-03 {
        margin-right: 0 !important;
        padding: 12px  !important;
        box-sizing: border-box;
    }

    /* Columna lateral + contenido principal: apilar */
    td[width="224"], td[width="248"] {
        display: block !important;
        width: 100%   !important;
    }
    td[width="748"], td[width="724"] {
        display: block !important;
        width: 100%   !important;
    }
    td[width="18"]  { display: none !important; } /* separador */

    /* ── Detalle empresa: columnas lado a lado → apiladas ───── */
    td[width="52%"], td[width="48%"] {
        display: block !important;
        width: 100%   !important;
    }

    /* ── Listado de rubros ──────────────────────────────────── */
    .listado_Buscador { width: 100% !important; box-sizing: border-box; }
    .bg_notas         { width: 100% !important; padding: 10px !important; }

    /* ── Footer ─────────────────────────────────────────────── */
    a.menu_footer {
        display: inline-block;
        padding: 3px 6px;
        font-size: 12px;
    }

    /* ── Botones acción ─────────────────────────────────────── */
    .BOTONES_ic_mas, .BOTONES_ic_video,
    .BOTONES_ic_aviso, .BOTONES_ic_cont {
        display: inline-block;
        margin: 3px 2px !important;
    }

    /* ── Slideshow: ocultar en móvil (lento e innecesario) ──── */
    #supersized { display: none !important; }
    .bg-top { background-image: none !important; background-color: #003f81; }
}

/* ============================================================
   MÓVIL PEQUEÑO (< 480px)
   ============================================================ */
@media screen and (max-width: 480px) {
    a.menu_seg { font-size: 10px; padding: 3px 4px; }
    .font_txt_tit_secciones_nar_rubro  { font-size: 20px !important; line-height: 26px !important; }
    .font_txt_tit_secciones_AZUL_rubro { font-size: 20px !important; line-height: 26px !important; }
    .font_txt_tit_secciones_white      { font-size: 20px !important; }
}