html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

body{
    overflow-x:hidden;
}

img,video,canvas,iframe{
    max-width:100%;
}

.table-responsive{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
}

@media(max-width:768px){
    html,body{
        width:100%;
        min-width:0!important;
        overflow-x:hidden!important;
        font-size:16px!important;
    }

    .container,
    .container-fluid{
        width:100%!important;
        max-width:100%!important;
        padding-left:12px!important;
        padding-right:12px!important;
    }

    .row{
        margin-left:0!important;
        margin-right:0!important;
    }

    [class*="col-"]{
        min-width:0;
    }

    .card,
    .main-card,
    .tabla-card,
    .info-card,
    .page-header,
    .topbar,
    .hero-card{
        border-radius:18px!important;
    }

    .card,
    .main-card,
    .tabla-card,
    .info-card{
        padding:16px!important;
    }

    .btn,
    .form-control,
    .form-select,
    textarea{
        min-height:48px!important;
        font-size:16px!important;
        border-radius:12px!important;
    }

    .btn{
        white-space:normal!important;
    }

    .topbar{
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
        gap:12px!important;
        padding:12px!important;
    }

    .topbar > .d-flex,
    .topbar-actions{
        width:100%!important;
        display:flex!important;
        align-items:center!important;
        justify-content:space-between!important;
        flex-wrap:wrap!important;
        gap:8px!important;
    }

    .logo-navbar{
        max-width:160px!important;
        height:auto!important;
    }

    .live-pill{
        font-size:12px!important;
        padding:6px 9px!important;
    }

    .topbar-user{
        width:100%!important;
        text-align:left!important;
        font-size:14px!important;
    }

    .page-header{
        padding:16px!important;
    }

    .page-header h1,
    .hero-card h2{
        font-size:24px!important;
        line-height:1.15!important;
    }

    h1{font-size:26px!important;line-height:1.15!important;}
    h2{font-size:23px!important;line-height:1.18!important;}
    h3,h4,h5{font-size:19px!important;line-height:1.2!important;}

    .table-responsive{
        width:100%!important;
        overflow-x:auto!important;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-x:contain;
        touch-action:pan-x;
        border-radius:14px;
    }

    table{
        width:max-content;
        min-width:720px;
        max-width:none;
        font-size:14px!important;
    }

    table:not(.no-mobile-scroll){
        display:block;
        overflow-x:auto!important;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-x:contain;
        touch-action:pan-x;
        border-radius:14px;
        max-width:100%;
    }

    table:not(.no-mobile-scroll) thead,
    table:not(.no-mobile-scroll) tbody,
    table:not(.no-mobile-scroll) tfoot{
        width:max-content;
    }

    table:not(.no-mobile-scroll) th,
    table:not(.no-mobile-scroll) td{
        white-space:nowrap;
        vertical-align:middle;
    }

    table:not(.no-mobile-scroll) td input,
    table:not(.no-mobile-scroll) td select,
    table:not(.no-mobile-scroll) td textarea,
    table:not(.no-mobile-scroll) td .btn{
        white-space:normal;
    }

    table:not(.no-mobile-scroll)::after{
        content:"Desliza para ver mas";
        display:block;
        position:sticky;
        left:0;
        width:100%;
        padding:8px 10px;
        color:#64748b;
        background:#f8fafc;
        font-size:12px;
        font-weight:700;
        letter-spacing:.02em;
        text-align:center;
        border-top:1px solid #e5e7eb;
    }

    .mobile-stack{
        display:flex!important;
        flex-direction:column!important;
        gap:10px!important;
    }
}

@media(max-width:430px){
    .btn-sm{
        min-height:44px!important;
        font-size:14px!important;
        padding:.45rem .7rem!important;
    }

    .logo-navbar{
        max-width:135px!important;
    }

    .notif-menu{
        top:92px!important;
    }
}