/* ESTILOS ESPECÍFICOS PARA DISPOSITIVOS MÓVILES MUY PEQUEÑOS */

/* ===== BREAKPOINTS ESPECÍFICOS ===== */
@media (max-width: 480px) {
    
    /* Header ultra compacto */
    header {
        padding: 0.75rem;
    }
    
    .header-left h1 {
        font-size: 1.3rem;
    }
    
    .header-left p {
        font-size: 0.75rem;
    }
    
    .header-left i {
        font-size: 2rem;
    }
    
    /* Main content más compacto */
    main {
        padding: 0.5rem;
    }
    
    /* Hero section compacto */
    .hero {
        padding: 1.5rem 1rem;
        margin: 0.5rem auto 1.5rem;
    }
    
    .hero-content h2 {
        font-size: 1.5rem;
    }
    
    .hero-content p {
        font-size: 0.9rem;
    }
    
    /* Form containers más compactos */
    .form-container {
        padding: 1rem;
    }
    
    .form-header {
        margin-bottom: 1.5rem;
    }
    
    .form-header h3 {
        font-size: 1.3rem;
    }
    
    /* Stats grid en una columna */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    .stat-card i {
        font-size: 2rem;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    /* Agency summary en una columna */
    .agency-summary {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .summary-card {
        padding: 1rem;
    }
    
    /* Filtros más compactos */
    .sales-filters {
        padding: 1rem;
        margin: 1rem 0;
    }
    
    .filter-controls {
        gap: 0.5rem;
    }
    
    .filter-select,
    .date-input {
        padding: 0.75rem;
        font-size: 16px; /* Evita zoom en iOS */
    }
    
    /* Tablas ultra compactas */
    .table-scroll-container {
        margin: 0 -0.5rem;
        border-radius: 0;
    }
    
    #tarifas-table {
        font-size: 0.65rem;
        min-width: 900px;
    }
    
    #tarifas-table th {
        padding: 0.4rem 0.2rem;
        font-size: 0.6rem;
    }
    
    #tarifas-table td {
        padding: 0.3rem 0.2rem;
        font-size: 0.6rem;
    }
    
    /* Botones más grandes para touch */
    .btn-edit-tarifa,\n    .btn-delete-tarifa {\n        min-width: 32px;\n        min-height: 32px;\n        padding: 0.25rem;\n        font-size: 0.65rem;\n    }\n    \n    /* Charts más compactos */\n    .chart-wrapper {\n        height: 200px;\n    }\n    \n    .chart-section {\n        padding: 0.75rem;\n    }\n    \n    /* Modales full screen en móviles muy pequeños */\n    .modal-content {\n        width: 100%;\n        height: 100%;\n        margin: 0;\n        border-radius: 0;\n        max-height: 100vh;\n    }\n    \n    /* Formularios más compactos */\n    .form-group input,\n    .form-group select {\n        padding: 0.75rem;\n        font-size: 16px; /* Evita zoom en iOS */\n    }\n    \n    /* Botones de acción más grandes */\n    .action-buttons {\n        min-width: 100px;\n    }\n    \n    .btn-action,\n    .btn-user-action {\n        min-width: 36px;\n        min-height: 36px;\n        padding: 0.5rem;\n    }\n    \n    /* Cards más compactas */\n    .hotel-card,\n    .asesor-card,\n    .servicio-card {\n        padding: 1rem;\n        margin-bottom: 1rem;\n    }\n    \n    /* Navegación móvil mejorada */\n    .mobile-dropdown {\n        min-width: 100vw;\n        right: -1rem;\n        border-radius: 0;\n        max-height: 80vh;\n        overflow-y: auto;\n    }\n    \n    .mobile-nav-link {\n        padding: 1rem;\n        font-size: 0.9rem;\n    }\n    \n    /* Texto más legible */\n    body {\n        font-size: 14px;\n        line-height: 1.5;\n    }\n    \n    /* Espaciado reducido */\n    .mb-1 { margin-bottom: 0.25rem; }\n    .mb-2 { margin-bottom: 0.5rem; }\n    .mb-3 { margin-bottom: 0.75rem; }\n    \n    /* Ocultar elementos no esenciales en pantallas muy pequeñas */\n    .user-id,\n    .acceso-hora,\n    .fecha-hora {\n        display: none;\n    }\n    \n    /* Simplificar badges */\n    .tipo-badge,\n    .estado-badge,\n    .status-badge {\n        padding: 0.25rem 0.5rem;\n        font-size: 0.7rem;\n    }\n    \n    /* Mejorar legibilidad de números */\n    .total-amount {\n        font-size: 0.9rem;\n        padding: 0.25rem 0.5rem;\n    }\n    \n    /* Footer más compacto */\n    footer {\n        padding: 1rem;\n        margin-top: 2rem;\n    }\n    \n    .footer-content {\n        flex-direction: column;\n        gap: 0.75rem;\n        text-align: center;\n    }\n}\n\n/* ===== LANDSCAPE ORIENTATION EN MÓVILES ===== */\n@media (max-width: 768px) and (orientation: landscape) {\n    \n    /* Header más compacto en landscape */\n    header {\n        padding: 0.5rem 1rem;\n    }\n    \n    .header-left {\n        flex-direction: row;\n        gap: 0.5rem;\n    }\n    \n    .header-left h1 {\n        font-size: 1.2rem;\n    }\n    \n    .header-left p {\n        display: none;\n    }\n    \n    /* Menú móvil más compacto */\n    .mobile-dropdown {\n        max-height: 60vh;\n    }\n    \n    /* Charts más pequeños en landscape */\n    .chart-wrapper {\n        height: 180px;\n    }\n    \n    /* Modales más pequeños en landscape */\n    .modal-content {\n        max-height: 85vh;\n        margin: 2.5% auto;\n    }\n}\n\n/* ===== MEJORAS DE ACCESIBILIDAD ===== */\n@media (max-width: 768px) {\n    \n    /* Mejorar contraste en móvil */\n    .nav-link:hover,\n    .mobile-nav-link:hover {\n        background: rgba(0,0,0,0.1);\n    }\n    \n    /* Áreas de toque más grandes */\n    button,\n    .btn,\n    a {\n        min-height: 44px;\n        min-width: 44px;\n    }\n    \n    /* Mejorar legibilidad */\n    .small,\n    small {\n        font-size: 0.8rem;\n    }\n    \n    /* Focus más visible */\n    input:focus,\n    select:focus,\n    button:focus {\n        outline: 2px solid #007bff;\n        outline-offset: 2px;\n    }\n}\n\n/* ===== OPTIMIZACIONES DE RENDIMIENTO ===== */\n@media (max-width: 768px) {\n    \n    /* Reducir animaciones en móvil */\n    *,\n    *::before,\n    *::after {\n        animation-duration: 0.2s !important;\n        transition-duration: 0.2s !important;\n    }\n    \n    /* Simplificar sombras */\n    .card,\n    .modal-content,\n    .form-section {\n        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;\n    }\n    \n    /* Reducir gradientes complejos */\n    .btn-primary,\n    .btn-submit {\n        background: #007bff !important;\n    }\n}\n\n/* ===== UTILIDADES MÓVILES ===== */\n.mobile-only {\n    display: none;\n}\n\n.desktop-only {\n    display: block;\n}\n\n@media (max-width: 768px) {\n    .mobile-only {\n        display: block;\n    }\n    \n    .desktop-only {\n        display: none;\n    }\n    \n    .mobile-center {\n        text-align: center;\n    }\n    \n    .mobile-full-width {\n        width: 100%;\n    }\n    \n    .mobile-hidden {\n        display: none;\n    }\n}\n\n/* ===== SCROLL SUAVE EN MÓVIL ===== */\n@media (max-width: 768px) {\n    html {\n        scroll-behavior: smooth;\n        -webkit-overflow-scrolling: touch;\n    }\n    \n    body {\n        -webkit-text-size-adjust: 100%;\n        -ms-text-size-adjust: 100%;\n    }\n}\n\n/* ===== LOADING STATES MÓVILES ===== */\n@media (max-width: 768px) {\n    .loading {\n        padding: 1rem;\n    }\n    \n    .loading i {\n        font-size: 1.5rem;\n    }\n    \n    /* Skeleton loading para tablas */\n    .table-loading {\n        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n        background-size: 200% 100%;\n        animation: loading 1.5s infinite;\n    }\n    \n    @keyframes loading {\n        0% { background-position: 200% 0; }\n        100% { background-position: -200% 0; }\n    }\n}