/*
|--------------------------------------------------------------------------
| NAZA · DIRECTORIO LOGÍSTICO
| Responsive global + menú global
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| BASE
|--------------------------------------------------------------------------
*/

html {
    width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}


/*
|--------------------------------------------------------------------------
| CONTENEDORES
|--------------------------------------------------------------------------
*/

.topbar-inner,
.hero-inner,
.content,
.content-inner,
.categories-inner,
.form-card,
.table-card {
    width: 100%;
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
}


/*
|--------------------------------------------------------------------------
| MENÚ GLOBAL NAZA
|--------------------------------------------------------------------------
|
| PC:
| - SIN FRANJA.
| - SIN NOMBRE DEL DIRECTORIO.
| - SOLO ENLACES.
| - SIN HAMBURGUESA.
|
| MÓVIL:
| - SIN FRANJA.
| - SOLO HAMBURGUESA.
| - LOS ENLACES APARECEN AL ABRIR.
|
|--------------------------------------------------------------------------
*/

.topbar {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    z-index: 1000 !important;

    padding: 7px 20px !important;

    margin: 0 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}

.topbar::before,
.topbar::after {
    content: none !important;

    display: none !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/*
|--------------------------------------------------------------------------
| CONTENEDOR DEL MENÚ
|--------------------------------------------------------------------------
*/

.topbar-inner {
    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    gap: 7px !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/*
|--------------------------------------------------------------------------
| NOMBRE DEL SITIO
|--------------------------------------------------------------------------
*/

.topbar-brand {
    display: none !important;
}


/*
|--------------------------------------------------------------------------
| NAVEGACIÓN
|--------------------------------------------------------------------------
*/

.public-nav {
    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    flex-wrap: wrap !important;

    gap: 7px !important;

    position: static !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/*
|--------------------------------------------------------------------------
| ENLACES
|--------------------------------------------------------------------------
*/

.nav-link {
    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: auto !important;

    min-height: 38px !important;

    padding: 8px 12px !important;

    margin: 0 !important;

    border: 0 !important;

    border-radius: 9px !important;

    background: transparent !important;

    box-shadow: none !important;

    color: #071b49 !important;

    text-decoration: none !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    white-space: nowrap !important;

    transform: none !important;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease !important;
}

.nav-link:hover {
    background:
        rgba(7,27,73,.08) !important;

    color:
        #071b49 !important;

    transform:
        translateY(-1px) !important;
}


/*
|--------------------------------------------------------------------------
| PÁGINAS CON HERO AZUL
|--------------------------------------------------------------------------
|
| Cuando el menú está sobre una zona azul, los enlaces deben verse blancos.
|
|--------------------------------------------------------------------------
*/

body:has(.hero) .topbar .nav-link {
    color: #ffffff !important;
}

body:has(.hero) .topbar .nav-link:hover {
    color: #ffffff !important;

    background:
        rgba(255,255,255,.12) !important;

    transform:
        translateY(-1px) !important;
}


/*
|--------------------------------------------------------------------------
| BOTÓN HAMBURGUESA
|--------------------------------------------------------------------------
*/

.menu-toggle {
    display: none !important;

    width: 42px !important;

    height: 42px !important;

    flex:
        0 0
        42px !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 0 !important;

    margin: 0 !important;

    border:
        1px solid
        rgba(7,27,73,.20) !important;

    border-radius: 10px !important;

    background:
        #ffffff !important;

    color:
        #071b49 !important;

    font-size:
        22px !important;

    line-height:
        1 !important;

    cursor: pointer !important;

    box-shadow:
        none !important;
}

.menu-toggle:hover {
    background:
        #f3f6fa !important;

    transform:
        translateY(-1px) !important;
}

.menu-toggle:focus-visible {
    outline:
        3px solid
        rgba(7,27,73,.20) !important;

    outline-offset:
        2px !important;
}


/*
|--------------------------------------------------------------------------
| IMÁGENES
|--------------------------------------------------------------------------
*/

img {
    max-width: 100%;
}

img,
video,
iframe {
    height: auto;
}


/*
|--------------------------------------------------------------------------
| ENLACES Y BOTONES
|--------------------------------------------------------------------------
*/

button,
input,
select,
textarea {
    max-width: 100%;
}

button {
    touch-action: manipulation;
}


/*
|--------------------------------------------------------------------------
| TABLAS
|--------------------------------------------------------------------------
*/

.table-wrap {
    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
}

table {
    max-width: none;
}


/*
|--------------------------------------------------------------------------
| MÓVILES GRANDES / TABLETS
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {

    .topbar-inner {
        gap: 15px;
    }

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

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

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

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

}


/*
|--------------------------------------------------------------------------
| TABLETS PEQUEÑAS / CELULARES
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    /*
    |--------------------------------------------------------------------------
    | TOPBAR MÓVIL
    |--------------------------------------------------------------------------
    */

    .topbar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        padding:
            7px
            14px !important;

        background:
            transparent !important;

        border:
            0 !important;

        box-shadow:
            none !important;
    }

    .topbar::before,
    .topbar::after {
        display:
            none !important;

        content:
            none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | ESTRUCTURA
    |--------------------------------------------------------------------------
    */

    .topbar-inner {
        align-items:
            center !important;

        flex-direction:
            row !important;

        justify-content:
            flex-end !important;

        position:
            relative !important;

        gap:
            0 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SOLO HAMBURGUESA
    |--------------------------------------------------------------------------
    */

    .topbar-brand {
        display:
            none !important;
    }

    .menu-toggle {
        display:
            inline-flex !important;

        visibility:
            visible !important;

        opacity:
            1 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | MENÚ DESPLEGABLE
    |--------------------------------------------------------------------------
    */

    .public-nav {
        position:
            absolute !important;

        top:
            calc(
                100% + 8px
            ) !important;

        left:
            0 !important;

        right:
            0 !important;

        width:
            100% !important;

        display:
            none !important;

        flex-direction:
            column !important;

        align-items:
            stretch !important;

        justify-content:
            flex-start !important;

        flex-wrap:
            nowrap !important;

        gap:
            6px !important;

        padding:
            10px !important;

        margin:
            0 !important;

        border:
            1px solid
            #dbe3ec !important;

        border-radius:
            13px !important;

        background:
            #ffffff !important;

        box-shadow:
            0
            16px
            35px
            rgba(0,0,0,.14) !important;

        z-index:
            1100 !important;
    }

    .public-nav.is-open {
        display:
            flex !important;
    }


    /*
    |--------------------------------------------------------------------------
    | ENLACES MÓVILES
    |--------------------------------------------------------------------------
    */

    .nav-link {
        width:
            100% !important;

        min-height:
            44px !important;

        justify-content:
            flex-start !important;

        padding:
            10px
            13px !important;

        border-radius:
            9px !important;

        color:
            #071b49 !important;

        background:
            transparent !important;

        font-size:
            13px !important;

        transform:
            none !important;
    }

    .nav-link:hover {
        color:
            #071b49 !important;

        background:
            rgba(7,27,73,.08) !important;

        transform:
            none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | EL MENÚ MÓVIL DEBE TENER FONDO BLANCO
    |--------------------------------------------------------------------------
    */

    body:has(.hero) .public-nav {
        background:
            #ffffff !important;

        border:
            1px solid
            #dbe3ec !important;

        box-shadow:
            0
            16px
            35px
            rgba(0,0,0,.14) !important;
    }

    body:has(.hero) .public-nav .nav-link {
        color:
            #071b49 !important;
    }

    body:has(.hero) .public-nav .nav-link:hover {
        color:
            #071b49 !important;

        background:
            rgba(7,27,73,.08) !important;
    }


    /*
    |--------------------------------------------------------------------------
    | RESTO DEL RESPONSIVE
    |--------------------------------------------------------------------------
    */

    .hero {
        padding:
            42px
            16px
            62px !important;
    }

    .hero-inner {
        padding-left:
            0 !important;

        padding-right:
            0 !important;
    }

    .hero h1 {
        font-size:
            clamp(
                30px,
                9vw,
                44px
            ) !important;

        line-height:
            1.08 !important;
    }

    .hero p {
        font-size:
            16px !important;

        line-height:
            1.55 !important;
    }

    .content {
        padding:
            32px
            16px
            55px !important;
    }

    .categories {
        padding:
            50px
            16px !important;
    }

    .form-card {
        padding:
            22px
            18px !important;
    }

    .search-box {
        padding:
            17px !important;

        border-radius:
            15px !important;
    }

    .search-grid {
        grid-template-columns:
            1fr !important;
    }

    .search-button {
        width:
            100% !important;
    }

    .results {
        grid-template-columns:
            1fr !important;
    }

    .grid {
        grid-template-columns:
            1fr !important;
    }

    .services {
        grid-template-columns:
            1fr !important;
    }

    .results-header {
        align-items:
            flex-start !important;

        flex-direction:
            column !important;

        gap:
            8px !important;
    }

    .section-title h2 {
        font-size:
            28px !important;
    }

    .section-title p {
        font-size:
            15px !important;
    }

    .company-head {
        align-items:
            flex-start !important;
    }

    .hero-card,
    .company-head {
        flex-direction:
            column !important;
    }

    .logo {
        max-width:
            100%;
    }

    .actions {
        width:
            100%;
    }

    .action,
    .action-btn,
    .submit-button {
        min-height:
            46px !important;
    }

    .upload-box {
        padding:
            15px !important;
    }

    input,
    select,
    textarea {
        font-size:
            16px !important;
    }

}


/*
|--------------------------------------------------------------------------
| CELULARES
|--------------------------------------------------------------------------
*/

@media (max-width: 480px) {

    .topbar {
        padding:
            7px
            12px !important;

        background:
            transparent !important;
    }

    .hero {
        padding:
            36px
            14px
            58px !important;
    }

    .content {
        padding:
            28px
            14px
            50px !important;
    }

    .categories {
        padding:
            45px
            14px !important;
    }

    .form-card,
    .card,
    .table-card {
        border-radius:
            14px !important;
    }

    .form-card {
        padding:
            18px
            15px !important;
    }

    .card {
        padding:
            19px !important;
    }

    .hero h1 {
        font-size:
            clamp(
                28px,
                10vw,
                38px
            ) !important;
    }

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

    .section h2,
    .card h2 {
        font-size:
            20px !important;
    }

    .section-description {
        font-size:
            13px !important;
    }

    .company-head {
        padding:
            18px !important;
    }

    .company-body {
        padding:
            0
            18px
            18px !important;
    }

    .company-footer {
        padding:
            14px
            18px !important;
    }

    .logo {
        width:
            72px !important;

        height:
            72px !important;

        flex-basis:
            72px !important;
    }

    .featured-ribbon {
        font-size:
            10px !important;

        padding:
            8px
            12px !important;
    }

    .services {
        gap:
            9px !important;
    }

    .service {
        padding:
            11px !important;
    }

    .stats {
        grid-template-columns:
            1fr !important;
    }

    .stat {
        padding:
            18px !important;
    }

    .stat-value {
        font-size:
            27px !important;
    }

    .actions {
        gap:
            8px !important;
    }

    .action-btn {
        padding:
            9px
            11px !important;

        font-size:
            11px !important;
    }

    footer {
        padding:
            24px
            14px !important;

        font-size:
            13px !important;

        line-height:
            1.5;
    }

}


/*
|--------------------------------------------------------------------------
| ADMINISTRACIÓN
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    .admin-table-wrap,
    .table-wrap {
        overflow-x:
            auto !important;

        width:
            100% !important;
    }

    .actions {
        min-width:
            260px;
    }

}


/*
|--------------------------------------------------------------------------
| ACCESIBILIDAD / INTERACCIÓN TÁCTIL
|--------------------------------------------------------------------------
*/

@media (pointer: coarse) {

    .action-btn,
    .action,
    button,
    select,
    input {
        min-height:
            44px;
    }

}


/*
|--------------------------------------------------------------------------
| EVITAR ELEMENTOS QUE ROMPAN LA PANTALLA
|--------------------------------------------------------------------------
*/

pre,
code {
    max-width:
        100%;

    overflow-x:
        auto;
}

.long-text,
.description,
.field-value {
    overflow-wrap:
        anywhere;
}


/*
|--------------------------------------------------------------------------
| SEGURIDAD VISUAL PARA IFRAME / EMBEDS
|--------------------------------------------------------------------------
*/

iframe {
    max-width:
        100%;
}