/**
 * Mejoras Responsive Móvil - Zaharaes Reservas
 * Optimizado para dispositivos móviles y tablets
 *
 * @package ZaharaesReservas
 * @version 2.4.0
 * @author Diego Anaya de Paz
 */

/* ==================================================
   BREAKPOINTS:
   - 320px: Móviles muy pequeños
   - 480px: Móviles
   - 600px: Móviles grandes
   - 782px: Tablets (WordPress standard)
   - 1024px: Tablets landscape
   ================================================== */

/* ==================================================
   1. MEJORAS GENERALES MÓVIL (< 782px)
   ================================================== */

@media screen and (max-width: 782px) {
    /* Body y contenedores principales */
    body.wp-admin {
        font-size: 16px; /* Prevenir zoom en inputs en iOS */
    }

    .zr-container {
        padding: 12px !important;
        margin: 0 !important;
    }

    /* Títulos responsivos */
    .zr-container h1,
    .wrap h1 {
        font-size: 22px !important;
        line-height: 1.3;
        margin-bottom: 15px !important;
    }

    .zr-container h2,
    .wrap h2 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }

    /* Botones touch-friendly */
    .button,
    .zr-btn,
    button {
        min-height: 44px !important; /* iOS touch target minimum */
        padding: 10px 16px !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    .button .dashicons,
    .zr-btn .dashicons {
        font-size: 20px !important;
        width: 20px !important;
        height: 20px !important;
    }

    /* Inputs touch-friendly */
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    textarea,
    select {
        min-height: 44px !important;
        font-size: 16px !important; /* Prevenir zoom en iOS */
        padding: 10px 12px !important;
    }

    textarea {
        min-height: 100px !important;
    }

    /* Formularios en columna */
    .zr-form-row {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .zr-form-field,
    .zr-form-field-small {
        width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Toolbar responsive */
    .zr-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .zr-toolbar > * {
        width: 100% !important;
    }

    /* Select de apartamentos full width */
    .zr-select-apartment,
    .zr-year-form select {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==================================================
   2. CALENDARIO RESPONSIVE
   ================================================== */

@media screen and (max-width: 1024px) {
    /* Contenedor del calendario con scroll horizontal mejorado */
    .zr-scroll {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling iOS */
        width: 100% !important;
        padding-bottom: 10px;
    }

    /* Tabla del calendario tamaño mínimo */
    .zr-table {
        min-width: 900px;
        width: 100%;
    }

    /* Días más pequeños pero legibles */
    .zr-day-cell {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
        padding: 2px !important;
    }

    /* Headers de apartamentos más compactos */
    .zr-apt,
    .zr-apt-header {
        min-width: 100px !important;
        max-width: 100px !important;
        font-size: 12px !important;
        padding: 8px 6px !important;
    }

    /* Indicador visual de scroll */
    .zr-scroll::after {
        content: '← Desliza para ver más →';
        display: block;
        text-align: center;
        color: #666;
        font-size: 11px;
        padding: 8px;
        background: linear-gradient(90deg, transparent, #f0f0f0 20%, #f0f0f0 80%, transparent);
        margin-top: 5px;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0%, 100% { opacity: 0.6; }
        50% { opacity: 1; }
    }
}

@media screen and (max-width: 782px) {
    .zr-table {
        min-width: 800px;
    }

    .zr-day-cell {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }

    .zr-apt,
    .zr-apt-header {
        min-width: 90px !important;
        max-width: 90px !important;
        font-size: 11px !important;
    }
}

@media screen and (max-width: 600px) {
    .zr-table {
        min-width: 700px;
    }

    .zr-day-cell {
        width: 20px !important;
        height: 20px !important;
        font-size: 9px !important;
    }

    .zr-apt,
    .zr-apt-header {
        min-width: 80px !important;
        max-width: 80px !important;
        font-size: 10px !important;
        padding: 6px 4px !important;
    }
}

/* ==================================================
   3. MODALES RESPONSIVE
   ================================================== */

@media screen and (max-width: 782px) {
    /* Modal casi fullscreen en móvil */
    #zr-modal,
    .zr-modal {
        width: 96% !important;
        max-width: 96% !important;
        height: auto !important;
        max-height: 90vh !important;
        margin: 5vh auto !important;
        padding: 16px !important;
        overflow-y: auto !important;
    }

    /* Header del modal */
    #zr-modal h2,
    .zr-modal h2 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }

    /* Botón cerrar más grande */
    .zr-modal-close,
    #zr-modal-close {
        width: 40px !important;
        height: 40px !important;
        font-size: 24px !important;
        line-height: 40px !important;
    }

    /* Contenido del modal */
    #zr-modal-content {
        padding: 12px 0 !important;
    }

    /* Botones del modal en columna */
    .zr-modal-footer,
    #zr-modal-footer {
        flex-direction: column-reverse !important;
        gap: 10px !important;
    }

    .zr-modal-footer button,
    #zr-modal-footer button {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Checkboxes de extras en columna */
    .zr-extras-checkboxes {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

@media screen and (max-width: 480px) {
    /* Modal fullscreen en móviles pequeños */
    #zr-modal,
    .zr-modal {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }
}

/* ==================================================
   4. TABLAS RESPONSIVE
   ================================================== */

@media screen and (max-width: 782px) {
    /* Contenedor de tabla con scroll */
    .zr-table-wrapper,
    .wp-list-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 15px;
    }

    /* Tablas de lista */
    .wp-list-table {
        min-width: 600px;
        font-size: 13px !important;
    }

    .wp-list-table th,
    .wp-list-table td {
        padding: 10px 8px !important;
        font-size: 13px !important;
    }

    /* Columnas prioritarias visibles */
    .wp-list-table .column-primary {
        min-width: 120px !important;
    }

    /* Ocultar columnas secundarias en móvil */
    .wp-list-table .column-comentarios,
    .wp-list-table .column-extras,
    .wp-list-table .column-mascotas {
        display: none !important;
    }

    /* Botones de acción más grandes */
    .zr-view-reserva,
    .zr-edit-reserva,
    .zr-delete-reserva {
        width: 40px !important;
        height: 40px !important;
        margin: 3px !important;
    }

    .zr-view-reserva .dashicons,
    .zr-edit-reserva .dashicons,
    .zr-delete-reserva .dashicons {
        font-size: 20px !important;
        width: 20px !important;
        height: 20px !important;
    }
}

@media screen and (max-width: 600px) {
    /* Tablas aún más compactas */
    .wp-list-table {
        min-width: 500px;
        font-size: 12px !important;
    }

    .wp-list-table th,
    .wp-list-table td {
        padding: 8px 6px !important;
        font-size: 12px !important;
    }

    /* Más columnas ocultas */
    .wp-list-table .column-telefono,
    .wp-list-table .column-email {
        display: none !important;
    }
}

/* ==================================================
   5. DASHBOARD RESPONSIVE
   ================================================== */

@media screen and (max-width: 1024px) {
    /* Grid de 2 columnas en tablet */
    .zr-dashboard-stats,
    .zr-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .zr-quick-links {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media screen and (max-width: 782px) {
    /* Stats en 2 columnas */
    .zr-dashboard-stats,
    .zr-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Cards más compactas */
    .zr-stat-card {
        padding: 14px !important;
    }

    .zr-stat-value {
        font-size: 24px !important;
    }

    .zr-stat-label {
        font-size: 12px !important;
    }

    /* Quick links en 2 columnas */
    .zr-quick-links {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .zr-quick-link {
        padding: 12px !important;
        font-size: 13px !important;
    }
}

@media screen and (max-width: 600px) {
    /* Stats en columna simple */
    .zr-dashboard-stats,
    .zr-stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* Quick links en columna simple */
    .zr-quick-links {
        grid-template-columns: 1fr !important;
    }
}

/* ==================================================
   6. FILTROS Y TOOLBARS RESPONSIVE
   ================================================== */

@media screen and (max-width: 782px) {
    /* Filtros en columna */
    .zr-filters,
    .zr-filter-bar {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .zr-filter-group {
        width: 100% !important;
        flex-direction: column !important;
    }

    .zr-filter-group label {
        margin-bottom: 5px !important;
    }

    .zr-filter-group select,
    .zr-filter-group input {
        width: 100% !important;
    }

    /* Botones de filtro en columna */
    .zr-filter-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .zr-filter-actions button {
        width: 100% !important;
    }
}

/* ==================================================
   7. CARDS Y LISTAS RESPONSIVE
   ================================================== */

@media screen and (max-width: 782px) {
    /* Cards en columna */
    .zr-liquidacion-card,
    .zr-card {
        margin-bottom: 12px !important;
    }

    .zr-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .zr-card-actions {
        width: 100% !important;
        justify-content: space-between !important;
    }

    /* Detalles de liquidación en columna */
    .zr-liquidacion-details {
        grid-template-columns: 1fr !important;
    }

    .zr-detail-item {
        padding: 10px !important;
    }
}

/* ==================================================
   8. GRÁFICOS RESPONSIVE
   ================================================== */

@media screen and (max-width: 782px) {
    /* Canvas de Chart.js responsive */
    canvas {
        max-height: 250px !important;
    }

    .zr-chart-container {
        height: 250px !important;
        padding: 10px !important;
    }
}

@media screen and (max-width: 600px) {
    canvas {
        max-height: 200px !important;
    }

    .zr-chart-container {
        height: 200px !important;
    }
}

/* ==================================================
   9. NAVEGACIÓN RESPONSIVE
   ================================================== */

@media screen and (max-width: 782px) {
    /* Tabs responsive */
    .nav-tab-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
    }

    .nav-tab {
        flex: 1 1 auto !important;
        min-width: 120px !important;
        text-align: center !important;
        padding: 10px 8px !important;
        font-size: 13px !important;
    }
}

@media screen and (max-width: 600px) {
    .nav-tab {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }
}

/* ==================================================
   10. YEAR SELECTOR RESPONSIVE
   ================================================== */

@media screen and (max-width: 782px) {
    .zr-year-form {
        padding: 12px !important;
    }

    .zr-year-form label {
        display: block !important;
        margin-bottom: 8px !important;
    }

    .zr-year-form select {
        width: 100% !important;
    }
}

/* ==================================================
   11. NOTIFICACIONES RESPONSIVE
   ================================================== */

@media screen and (max-width: 782px) {
    .notice,
    .zr-notice {
        margin: 10px 0 !important;
        padding: 12px !important;
    }

    .notice p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
}

/* ==================================================
   12. LOADER RESPONSIVE
   ================================================== */

@media screen and (max-width: 782px) {
    #zr-loader {
        width: 50px !important;
        height: 50px !important;
    }
}

/* ==================================================
   13. ACCESSIBILITY MOBILE
   ================================================== */

@media screen and (max-width: 782px) {
    /* Focus visible más prominente en móvil */
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    a:focus {
        outline: 3px solid var(--zr-primary, #2271b1) !important;
        outline-offset: 2px !important;
    }

    /* Área de toque mínima para todos los elementos interactivos */
    a,
    button,
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ==================================================
   14. LANDSCAPE MOBILE OPTIMIZATIONS
   ================================================== */

@media screen and (max-height: 500px) and (orientation: landscape) {
    /* Modal más compacto en landscape */
    #zr-modal,
    .zr-modal {
        max-height: 95vh !important;
        overflow-y: auto !important;
    }

    .zr-container h1 {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }
}

/* ==================================================
   15. TOUCH DEVICES OPTIMIZATIONS
   ================================================== */

@media (hover: none) and (pointer: coarse) {
    /* Optimizaciones para dispositivos táctiles */

    /* Eliminar hover en touch devices */
    .zr-day-cell:hover,
    .button:hover,
    .zr-btn:hover {
        transform: none !important;
    }

    /* Estados activos más visibles */
    .zr-day-cell:active {
        transform: scale(0.95) !important;
        background-color: var(--zr-primary-light, #e0f0ff) !important;
    }

    button:active,
    .button:active,
    .zr-btn:active {
        transform: scale(0.98) !important;
    }
}

/* ==================================================
   16. PREFERS REDUCED MOTION
   ================================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .zr-scroll::after {
        animation: none !important;
    }
}

/* ==================================================
   17. DARK MODE HINTS (OPCIONAL)
   ================================================== */

@media (prefers-color-scheme: dark) {
    /* Solo hints visuales, no cambio completo */
    .zr-scroll::after {
        background: linear-gradient(90deg, transparent, #333 20%, #333 80%, transparent);
        color: #ccc;
    }
}

/* ==================================================
   18. VERY SMALL DEVICES (< 360px)
   ================================================== */

@media screen and (max-width: 360px) {
    body.wp-admin {
        font-size: 14px !important;
    }

    .zr-container h1 {
        font-size: 18px !important;
    }

    .button,
    .zr-btn {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }

    .zr-table {
        min-width: 600px;
    }

    .zr-day-cell {
        width: 18px !important;
        height: 18px !important;
        font-size: 8px !important;
    }

    .zr-apt,
    .zr-apt-header {
        min-width: 70px !important;
        max-width: 70px !important;
        font-size: 9px !important;
    }
}

/* ==================================================
   19. INTRANET PROPIETARIOS RESPONSIVE
   ================================================== */

@media screen and (max-width: 782px) {
    .zr-intranet-wrapper {
        margin: 20px auto !important;
        padding: 0 12px !important;
    }

    .zr-intranet-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .zr-header-title h1 {
        font-size: 24px !important;
    }

    .zr-header-actions {
        width: 100% !important;
    }

    .zr-header-actions .zr-btn {
        width: 100% !important;
    }
}

/* ==================================================
   20. PRINT OPTIMIZATIONS FOR MOBILE
   ================================================== */

@media print {
    /* Ocultar elementos innecesarios */
    .zr-toolbar,
    .zr-filters,
    .zr-year-form,
    .button,
    .zr-btn,
    .notice,
    #zr-loader,
    .zr-scroll::after {
        display: none !important;
    }

    /* Expandir contenido */
    .zr-scroll {
        overflow: visible !important;
    }

    .zr-table {
        min-width: 100% !important;
        width: 100% !important;
    }

    /* Prevenir saltos de página */
    .zr-stat-card,
    .zr-liquidacion-card,
    tr {
        page-break-inside: avoid !important;
    }
}

/* ==================================================
   FIN DE MEJORAS RESPONSIVE MÓVIL
   ================================================== */