/* =========================================================
   SISTEMA DE CREDENCIALES - RESPONSIVE GLOBAL
   ========================================================= */


/* Evita desbordamientos inesperados */

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .content {
        padding: 24px 20px !important;
    }

    .card {
        max-width: 100%;
    }

}


/* =========================================================
   CELULAR / TABLET VERTICAL
   ========================================================= */

@media (max-width: 800px) {

    /*
     * El sidebar deja de ocupar toda la altura.
     * Se convierte en una barra superior con navegación
     * horizontal desplazable.
     */

    .app-shell {
        display: block !important;
        width: 100%;
        min-height: 100vh;
    }


    .sidebar {
        position: relative !important;

        top: auto !important;
        left: auto !important;

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

        height: auto !important;
        min-height: auto !important;

        padding: 16px !important;

        z-index: 20;
    }


    .sidebar-brand {
        margin-bottom: 14px !important;
    }


    .sidebar-nav {
        display: flex !important;

        gap: 8px;

        overflow-x: auto;
        overflow-y: hidden;

        padding-bottom: 5px;

        scrollbar-width: thin;

        -webkit-overflow-scrolling: touch;
    }


    .sidebar-nav a {
        flex: 0 0 auto;

        white-space: nowrap;

        margin: 0 !important;

        padding: 10px 14px !important;
    }


    /*
     * El contenido ya no reserva espacio para
     * el sidebar lateral.
     */

    .main {
        width: 100% !important;

        margin-left: 0 !important;

        min-width: 0 !important;
    }


    .topbar {
        position: relative !important;

        width: 100%;

        display: flex;

        flex-wrap: wrap;

        justify-content: space-between;

        align-items: center;

        gap: 8px 18px;

        padding: 14px 18px !important;
    }


    .content {
        width: 100%;

        padding: 20px 16px !important;
    }


    .page-title {
        font-size: 24px !important;
    }


    .page-subtitle {
        line-height: 1.45;
    }


    /*
     * Las tablas no rompen la pantalla.
     */

    .table-scroll {
        width: 100%;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }

}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 600px) {

    .sidebar {
        padding: 13px 12px !important;
    }


    .sidebar-brand {
        font-size: 17px;
    }


    .sidebar-nav a {
        padding: 9px 12px !important;

        font-size: 13px;
    }


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

        font-size: 13px;
    }


    .content {
        padding: 18px 12px !important;
    }


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


    .card {
        border-radius: 10px !important;
    }


    /*
     * Botones fáciles de tocar en pantalla táctil.
     */

    button,
    .btn-primary,
    .btn-secondary,
    .action-link {
        min-height: 42px;
    }


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

}