/* =========================================================
   RESPONSIVE GLOBAL - BIBLIOTECA VIRTUAL ADUANERA
   =========================================================
   - No afecta escritorio.
   - Corrige tablet y celular.
   - Aplica globalmente a leyes, decretos, reglas,
     resoluciones, RGCE, RMF y anexos.
   - Las tablas especiales siguen controlándose
     desde el CSS de cada módulo.
========================================================= */


/* =========================================================
   TABLET
   1024px o menos
========================================================= */

@media screen and (max-width: 1024px) {

    /* =========================
       HEADER
    ========================= */

    .header {
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    .header h1 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }


    /* =========================
       SIDEBAR
    ========================= */

    .sidebar {
        z-index: 1200 !important;
        max-width: 85vw !important;
    }

    /*
       El sidebar no debe empujar el contenido
       en tablet o celular.
    */

    .sidebar.active ~ #content,
    .sidebar.active ~ .content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    #content.shift,
    .content.shift {
        margin-left: 0 !important;
        width: 100% !important;
    }


    /* =========================
       CONTENIDO PRINCIPAL
    ========================= */

    #content,
    .content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;

        /*
           Sobrescribe los 40px / 40px 50px
           que pone menu.js.
        */
        padding: 28px !important;

        box-sizing: border-box !important;
    }


    /* =========================
       IMÁGENES
    ========================= */

    #content img,
    .content img {
        max-width: 100% !important;
        height: auto !important;
    }


    /* =========================
       CONTENEDORES
    ========================= */

    .content-card,
    .welcome,
    .chapter-content,
    .hero-content,
    .events-container {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }


    /* =========================
       HERO
    ========================= */

    .hero-content {
        width: 100% !important;
        max-width: 700px !important;
        padding: 20px !important;
    }

    .hero-content h1 {
        font-size: 40px !important;
        line-height: 1.2 !important;
    }

    .hero-content p {
        font-size: 17px !important;
        line-height: 1.6 !important;
    }


    /* =========================
       EVENTOS
    ========================= */

    .events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

}



/* =========================================================
   CELULAR
   768px o menos
========================================================= */

@media screen and (max-width: 768px) {

    /* =====================================================
       DOCUMENTO GENERAL
    ===================================================== */

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .header {
        width: 100% !important;
        height: 70px !important;

        padding-left: 14px !important;
        padding-right: 14px !important;

        display: flex !important;
        align-items: center !important;

        box-sizing: border-box !important;
    }

    .menu-toggle {
        flex-shrink: 0 !important;

        margin-right: 12px !important;

        font-size: 20px !important;
    }

    .header h1 {
        margin: 0 !important;

        font-size: 16px !important;
        line-height: 1.25 !important;

        min-width: 0 !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
    }


    /* =====================================================
       SIDEBAR
    ===================================================== */

    .sidebar {
        width: 280px !important;
        min-width: 0 !important;
        max-width: 85vw !important;

        z-index: 1300 !important;
    }

    .sidebar.active ~ #content,
    .sidebar.active ~ .content {
        margin-left: 0 !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    #content.shift,
    .content.shift {
        margin-left: 0 !important;

        width: 100% !important;
        max-width: 100% !important;
    }


    /* =====================================================
       CONTENIDO PRINCIPAL

       Esta es una de las reglas más importantes.
       Sobrescribe los paddings inline del menu.js.
    ===================================================== */

    #content,
    .content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-top: 24px !important;
        padding-right: 16px !important;
        padding-bottom: 30px !important;
        padding-left: 16px !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       TODOS LOS CONTENEDORES INTERNOS

       Evita que un módulo conserve anchos de escritorio.
    ===================================================== */

    #content section,
    #content article,
    #content div:not(.sidebar):not(.menu):not(.submenu),

    .content section,
    .content article {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    /* =====================================================
       TEXTO GENERAL

       En móvil eliminamos el justificado porque en columnas
       angostas provoca espacios enormes entre palabras.
    ===================================================== */

    #content p,
    #content li,
    #content dd,
    #content blockquote,

    .content p,
    .content li,
    .content dd,
    .content blockquote {
        max-width: 100% !important;

        text-align: left !important;

        word-spacing: normal !important;
        letter-spacing: normal !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;
        word-break: normal !important;

        line-height: 1.6 !important;
    }


    /* =====================================================
       TÍTULOS
    ===================================================== */

    #content h1,
    #content h2,
    #content h3,
    #content h4,
    #content h5,
    #content h6,

    .content h1,
    .content h2,
    .content h3,
    .content h4,
    .content h5,
    .content h6 {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        white-space: normal !important;

        word-spacing: normal !important;
        letter-spacing: normal !important;

        overflow-wrap: break-word !important;
        word-break: normal !important;

        line-height: 1.35 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       BLOQUES FLEX DE ARTÍCULOS

       Corrige estructuras del tipo:

       ARTÍCULO 2o. | texto...

       En móvil pasan a una sola columna.
    ===================================================== */

    #content .articulo,
    #content .articulo-row,
    #content .article,
    #content .article-row,
    #content .articulo-contenedor,
    #content .articulo-container,

    .content .articulo,
    .content .articulo-row,
    .content .article,
    .content .article-row,
    .content .articulo-contenedor,
    .content .articulo-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    #content .articulo-row,
    #content .article-row,

    .content .articulo-row,
    .content .article-row {
        display: flex !important;
        flex-direction: column !important;

        align-items: stretch !important;

        gap: 8px !important;
    }


    /* =====================================================
       NÚMERO / TÍTULO DEL ARTÍCULO
    ===================================================== */

    #content .articulo-titulo,
    #content .articulo-numero,
    #content .article-title,

    .content .articulo-titulo,
    .content .articulo-numero,
    .content .article-title {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        flex: none !important;

        float: none !important;

        position: static !important;

        transform: none !important;

        margin: 0 0 8px 0 !important;

        padding: 0 !important;

        white-space: normal !important;

        text-align: left !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       CONTENIDO DE ARTÍCULOS
    ===================================================== */

    #content .articulo-contenido,
    #content .articulo-texto,
    #content .article-content,

    .content .articulo-contenido,
    .content .articulo-texto,
    .content .article-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        flex: none !important;

        margin: 0 !important;

        padding: 0 !important;

        text-align: left !important;

        word-spacing: normal !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       FRACCIONES E INCISOS
    ===================================================== */

    #content .fraccion,
    #content .fraccion-contenido,
    #content .inciso,
    #content .parrafo,
    #content .texto,

    .content .fraccion,
    .content .fraccion-contenido,
    .content .inciso,
    .content .parrafo,
    .content .texto {
        max-width: 100% !important;
        min-width: 0 !important;

        text-align: left !important;

        word-spacing: normal !important;
        letter-spacing: normal !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       TARJETAS / BLOQUES GENERALES
    ===================================================== */

    .content-card,
    .welcome,
    .chapter-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       DETAILS / ÍNDICES
    ===================================================== */

    #content details,
    .content details {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }

    #content summary,
    .content summary {
        max-width: 100%;

        white-space: normal !important;

        overflow-wrap: break-word !important;

        box-sizing: border-box;
    }


    /* =====================================================
       IMÁGENES
    ===================================================== */

    #content img,
    .content img {
        max-width: 100% !important;

        height: auto !important;
    }


    /* =====================================================
       VIDEOS / PDF / IFRAME
    ===================================================== */

    #content iframe,
    #content video,
    #content embed,
    #content object,

    .content iframe,
    .content video,
    .content embed,
    .content object {
        max-width: 100% !important;
    }

    #content video,
    .content video {
        height: auto !important;
    }


    /* =====================================================
       HERO INICIO
    ===================================================== */

    .hero-content {
        width: 100% !important;
        max-width: 100% !important;

        padding: 10px !important;

        box-sizing: border-box !important;
    }

    .hero-content h1 {
        font-size: 31px !important;
        line-height: 1.25 !important;

        margin-bottom: 18px !important;
    }

    .hero-content p {
        font-size: 15px !important;
        line-height: 1.6 !important;

        margin-bottom: 24px !important;
    }

    .btn-hero {
        width: auto !important;
        max-width: 100% !important;

        padding: 12px 20px !important;

        font-size: 14px !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       REDES SOCIALES
    ===================================================== */

    .hero-socials {
        flex-wrap: wrap !important;
        gap: 14px !important;
    }

    .hero-socials a {
        width: 40px !important;
        height: 40px !important;

        flex-shrink: 0 !important;
    }


    /* =====================================================
       EVENTOS
    ===================================================== */

    .events-container {
        width: 100% !important;
        max-width: 100% !important;

        padding: 4px !important;

        box-sizing: border-box !important;
    }

    .events-main-title {
        font-size: 25px !important;
        line-height: 1.3 !important;

        margin-bottom: 22px !important;
    }

    .events-grid {
        display: grid !important;

        grid-template-columns: minmax(0, 1fr) !important;

        gap: 22px !important;

        width: 100% !important;
    }

    .event-photo-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }

    .event-photo-card img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
    }

    .event-card-body {
        padding: 18px !important;
    }

    .event-card-body h3 {
        font-size: 18px !important;
        line-height: 1.35 !important;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .events-footer {
        width: calc(100% + 32px) !important;

        margin-left: -16px !important;
        margin-right: -16px !important;

        padding: 18px 16px !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;
        align-items: center !important;

        text-align: center !important;

        gap: 14px !important;

        box-sizing: border-box !important;
    }

    .footer-right {
        width: 100% !important;

        display: flex !important;

        justify-content: center !important;
        align-items: center !important;

        flex-wrap: wrap !important;

        gap: 10px !important;
    }


    /* =====================================================
       BOTÓN VOLVER AL INICIO / ÍNDICE
    ===================================================== */

    .btn-volver-indice-fijo {
        right: 12px !important;
        bottom: 12px !important;

        width: auto !important;
        max-width: calc(100vw - 24px) !important;

        padding: 10px 14px !important;

        font-size: 12px !important;

        white-space: nowrap !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       TABLAS
       NO SE TOCAN GLOBALMENTE.

       Cada tabla ancha debe conservar el responsive
       definido dentro del CSS de su módulo.
    ===================================================== */

}



/* =========================================================
   CELULARES PEQUEÑOS
   480px o menos
========================================================= */

@media screen and (max-width: 480px) {

    /* =========================
       HEADER
    ========================= */

    .header {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .menu-toggle {
        margin-right: 9px !important;
    }

    .header h1 {
        font-size: 14px !important;
    }


    /* =========================
       CONTENIDO
    ========================= */

    #content,
    .content {
        padding-top: 20px !important;
        padding-right: 12px !important;
        padding-bottom: 25px !important;
        padding-left: 12px !important;
    }


    /* =========================
       SIDEBAR
    ========================= */

    .sidebar {
        width: 270px !important;
        max-width: 88vw !important;
    }

    .logo-area {
        padding: 18px 14px !important;
    }

    .logo-area img {
        width: 82px !important;
        max-width: 100% !important;

        height: auto !important;
    }

    .logo-area h2 {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }


    /* =========================
       MENÚ
    ========================= */

    .menu-title {
        padding-left: 15px !important;
        padding-right: 38px !important;
    }

    .menu-title span {
        font-size: 13px !important;
    }

    .submenu li {
        padding-left: 34px !important;
        padding-right: 12px !important;

        font-size: 12px !important;
        line-height: 1.45 !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;
    }


    /* =========================
       TEXTOS
    ========================= */

    #content p,
    #content li,
    .content p,
    .content li {
        text-align: left !important;

        word-spacing: normal !important;
        letter-spacing: normal !important;

        line-height: 1.6 !important;
    }


    /* =========================
       HERO
    ========================= */

    .hero-content {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .hero-content h1 {
        font-size: 26px !important;
    }

    .hero-content p {
        font-size: 14px !important;
    }

    .btn-hero {
        padding: 11px 17px !important;

        font-size: 13px !important;
    }


    /* =========================
       EVENTOS
    ========================= */

    .events-main-title {
        font-size: 22px !important;
    }

    .event-card-body {
        padding: 15px !important;
    }

    .event-card-body h3 {
        font-size: 17px !important;
    }


    /* =========================
       FOOTER
    ========================= */

    .events-footer {
        width: calc(100% + 24px) !important;

        margin-left: -12px !important;
        margin-right: -12px !important;

        padding: 16px 12px !important;
    }


    /* =========================
       BOTÓN FIJO
    ========================= */

    .btn-volver-indice-fijo {
        right: 8px !important;
        bottom: 8px !important;

        max-width: calc(100vw - 16px) !important;

        padding: 9px 11px !important;

        font-size: 11px !important;
    }

}
/* =========================================================
   LEYES - ARTÍCULOS EN CELULAR
========================================================= */

@media screen and (max-width: 768px) {

    /* Cada artículo ocupa todo el ancho */
    #content .art-row,
    .content .art-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 24px 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    /* Tabla usada únicamente para estructura del artículo */
    #content .art-row > table.ley-table,
    .content .art-row > table.ley-table {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        table-layout: auto !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    #content .art-row > table.ley-table > tbody,
    .content .art-row > table.ley-table > tbody {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
    }


    #content .art-row > table.ley-table > tbody > tr,
    .content .art-row > table.ley-table > tbody > tr {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
    }


    /* ARTÍCULO 1., ARTÍCULO 2., etc. */
    #content .art-row > table.ley-table > tbody > tr > th[scope="row"],
    .content .art-row > table.ley-table > tbody > tr > th[scope="row"] {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        padding: 10px 12px !important;

        text-align: left !important;

        white-space: normal !important;

        font-size: 16px !important;
        line-height: 1.4 !important;

        box-sizing: border-box !important;
    }


    /* Texto del artículo */
    #content .art-row > table.ley-table > tbody > tr > td,
    .content .art-row > table.ley-table > tbody > tr > td {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        padding: 12px 0 !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    /* Párrafos */
    #content .art-row > table.ley-table > tbody > tr > td > p,
    .content .art-row > table.ley-table > tbody > tr > td > p {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        text-align: left !important;

        word-spacing: normal !important;
        letter-spacing: normal !important;

        white-space: normal !important;

        word-break: normal !important;
        overflow-wrap: break-word !important;

        line-height: 1.6 !important;

        box-sizing: border-box !important;
    }


    /* Ocultar ARTÍCULO | CONTENIDO de escritorio */
    #content .ley-table-head,
    .content .ley-table-head {
        display: none !important;
    }

}
/* =========================================================
   REGLAMENTOS - ARTÍCULOS EN CELULAR
========================================================= */

@media screen and (max-width: 768px) {

    #content .reglamento-aduanero-tabla-articulos,
    .content .reglamento-aduanero-tabla-articulos {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        table-layout: auto !important;

        box-sizing: border-box !important;
    }


    #content .reglamento-aduanero-tabla-articulos thead,
    .content .reglamento-aduanero-tabla-articulos thead {
        display: none !important;
    }


    #content .reglamento-aduanero-tabla-articulos tbody,
    .content .reglamento-aduanero-tabla-articulos tbody {
        display: block !important;

        width: 100% !important;
    }


    #content .reglamento-aduanero-tabla-articulos tr,
    .content .reglamento-aduanero-tabla-articulos tr {
        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        margin-bottom: 26px !important;

        box-sizing: border-box !important;
    }


    #content .reglamento-aduanero-tabla-articulos td,
    .content .reglamento-aduanero-tabla-articulos td {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    #content .reglamento-aduanero-numero-articulo,
    .content .reglamento-aduanero-numero-articulo {
        width: 100% !important;

        padding: 10px 0 !important;

        font-weight: 700 !important;

        text-align: left !important;

        white-space: normal !important;
    }

}