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

body {
    max-width: 100vw;
    overflow-x: hidden;
}

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

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

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

table {
    min-width: 100%;
}

@media (max-width: 768px) {
    table {
    }
}

@media (max-width: 1024px) {

    .layout {
        display: block !important;
    }

    .page-wrapper,
    .perfil-contenedor,
    .dash-container,
    main {
        margin-left: 0 !important;
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }

    .sidebar {
        position: fixed;
        z-index: 1000;
    }

    .dash-grid,
    .admin-grid,
    [class*="grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {

    body {
        font-size: 15px;
    }

    h1 { font-size: clamp(22px, 6vw, 32px) !important; }
    h2 { font-size: clamp(18px, 5vw, 26px) !important; }
    h3 { font-size: clamp(16px, 4.5vw, 22px) !important; }

    .dash-grid,
    .admin-grid,
    .info,
    [class*="grid"] {
        grid-template-columns: 1fr !important;
    }

    .dash-pills,
    .summary-pills,
    .pill-stat {
        flex-wrap: wrap !important;
    }
    .auth-container,
    .form-box,
    .perfil-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 12px !important;
    }

    .acciones {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .btn-act,
    .btn-submit,
    .btn-password,
    .acceso-btn {
        min-height: 42px;
    }

    .navbar,
    nav {
        flex-wrap: wrap;
    }

    .hero-carousel,
    .carousel-track,
    .slide {
        width: 100% !important;
    }

    .slide-content h1 {
        font-size: clamp(24px, 7vw, 36px) !important;
    }

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

@media (max-width: 480px) {

    .perfil-contenedor,
    .page-wrapper,
    main {
        padding: 10px !important;
    }

    .avatar,
    .avatar-grande {
        width: 90px !important;
        height: 90px !important;
        font-size: 36px !important;
    }

    .banner {
        height: 110px !important;
    }

    .titulo-seccion {
        font-size: 20px !important;
    }

    .btn-print,
    .btn-submit,
    .btn-password,
    .btn-cambiar-pass {
        width: 100% !important;
    }

    .code-inputs input {
        width: 80px !important;
        height: 50px !important;
        font-size: 20px !important;
    }

    .sidebar-usuario-nombre {
        max-width: 90px;
    }
}

@media (max-width: 360px) {
    body { font-size: 14px; }

    .dash-nombre,
    .perfil h2 {
        font-size: 22px !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    a, button, .btn-act, .sidebar-enlace {
        min-height: 40px;
    }
}

@media print {
    .sidebar, .overlay-sidebar, #caja-avisos {
        display: none !important;
    }
}