/* =========================================================
   RESPONSIVE GLOBAL - LionSystems GT
   ---------------------------------------------------------
   Hoja de estilos ADITIVA: no reemplaza ni borra ninguna
   regla existente en los CSS del proyecto. Se agrega DESPUÉS
   de todas las demás hojas de estilo para pulir el
   comportamiento en tablets y celulares, sin tocar los
   archivos .css originales.
   ========================================================= */

/* -------- Base segura para todos los dispositivos -------- */
html {
    -webkit-text-size-adjust: 100%;
}

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

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

/* Evita que un input/select se salga del contenedor en pantallas angostas */
input, select, textarea, button {
    max-width: 100%;
}

/* -------- Tablas: scroll horizontal en móvil (CRUDs) -------- */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    min-width: 100%;
}

@media (max-width: 768px) {
    table {
        min-width: 640px; /* fuerza scroll horizontal en vez de romper el layout */
    }
}

/* =========================================================
   BREAKPOINT: Tablets / pantallas medianas (<= 1024px)
   ========================================================= */
@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;
    }

    /* Grids genéricos de tarjetas/paneles pasan a 2 columnas */
    .dash-grid,
    .admin-grid,
    [class*="grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =========================================================
   BREAKPOINT: Tablets pequeñas / móviles grandes (<= 768px)
   ========================================================= */
@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;
    }

    /* Formularios de login/registro/perfil a ancho completo */
    .auth-container,
    .form-box,
    .perfil-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 12px !important;
    }

    /* Botones de acción de los CRUD, apilados y con buen área táctil */
    .acciones {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

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

    /* Navbar público colapsa a menú vertical simple */
    .navbar,
    nav {
        flex-wrap: wrap;
    }

    /* Carrusel del home ocupa el ancho completo y baja su altura */
    .hero-carousel,
    .carousel-track,
    .slide {
        width: 100% !important;
    }

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

    /* Sección de servicios en una sola columna */
    .servicios {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   BREAKPOINT: Móviles (<= 480px)
   ========================================================= */
@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;
    }
}

/* =========================================================
   BREAKPOINT: Móviles muy pequeños (<= 360px)
   ========================================================= */
@media (max-width: 360px) {
    body { font-size: 14px; }

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

/* -------- Accesibilidad / usabilidad táctil -------- */
@media (hover: none) and (pointer: coarse) {
    a, button, .btn-act, .sidebar-enlace {
        min-height: 40px;
    }
}

/* -------- Impresión (no afecta el QR / comprobantes) -------- */
@media print {
    .sidebar, .overlay-sidebar, #caja-avisos {
        display: none !important;
    }
}