/* responsive.css - Adaptación Mobile & Tablet para In-Ticket */

/* Ajustes globales táctiles */
html, body {
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* 1. Encabezados y Navegación */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
        padding: 1rem !important;
    }

    header .user-nav, 
    header .nav-links {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-start;
    }

    header .user-nav a,
    header .nav-links a,
    .btn-volver {
        margin-left: 0 !important;
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }
}

/* 2. Disposición de Contenedores y Formularios */
@media (max-width: 900px) {
    .container {
        grid-template-columns: 1fr !important;
        margin: 1rem auto !important;
        padding: 0 0.75rem !important;
        gap: 1.25rem !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .filters-form {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .filters-form button {
        width: 100%;
    }
}

/* 3. Mapa de Butacas Táctil */
@media (max-width: 600px) {
    .seats-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 0.5rem !important;
    }

    .seat {
        width: 100% !important;
        max-width: 48px;
        height: 44px !important;
        font-size: 0.8rem !important;
    }

    .legend {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

/* 4. Tablas con Desplazamiento Suave en Pantallas Chicas */
.card {
    overflow-x: auto;
}

table {
    min-width: 600px; /* Evita que las columnas se aplasten */
}

/* 5. Modales (Ticket y Edición) */
@media (max-width: 480px) {
    .modal-card, 
    .ticket-card {
        width: 92% !important;
        padding: 1.2rem !important;
        margin: auto;
    }

    .ticket-actions {
        gap: 0.4rem;
    }
}