/* ==========================================================================
   7-RESPONSIVE.CSS - AJUSTES RESPONSIVE Y UTILITIES ADICIONALES
   ==========================================================================
   
   Este archivo contiene:
   - Media queries adicionales no incluidas en otros archivos
   - Utilities responsive específicas
   - Ajustes globales por breakpoint
   
   ========================================================================== */

/* ==========================================================================
   UTILITIES RESPONSIVE - Clases de utilidad adaptativas
   ========================================================================== */

/* Visibilidad responsive */
.hide-mobile {
    display: block;
}

.hide-desktop {
    display: none;
}

.show-mobile {
    display: none;
}

.show-desktop {
    display: block;
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    .hide-desktop {
        display: block !important;
    }

    .show-desktop {
        display: none !important;
    }
}

/* Spacing responsive */
@media (max-width: 768px) {
    .m-mobile-0 {
        margin: 0 !important;
    }

    .m-mobile-8 {
        margin: var(--space-8) !important;
    }

    .m-mobile-16 {
        margin: var(--space-16) !important;
    }

    .p-mobile-0 {
        padding: 0 !important;
    }

    .p-mobile-8 {
        padding: var(--space-8) !important;
    }

    .p-mobile-16 {
        padding: var(--space-16) !important;
    }

    .mt-mobile-16 {
        margin-top: var(--space-16) !important;
    }

    .mb-mobile-16 {
        margin-bottom: var(--space-16) !important;
    }
}

/* Text alignment responsive */
@media (max-width: 768px) {
    .text-mobile-center {
        text-align: center !important;
    }

    .text-mobile-left {
        text-align: left !important;
    }

    .text-mobile-right {
        text-align: right !important;
    }
}

/* Flex utilities responsive */
@media (max-width: 768px) {
    .flex-mobile-column {
        flex-direction: column !important;
    }

    .flex-mobile-row {
        flex-direction: row !important;
    }

    .flex-mobile-wrap {
        flex-wrap: wrap !important;
    }
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS - Ajustes globales por tamaño de pantalla
   ========================================================================== */

/* Móvil grande / Phablet (≤ 820px) */
@media (max-width: 820px) {
    body {
        font-size: 15px;
    }

    h1 {
        font-size: var(--font-size-2xl);
    }

    h2 {
        font-size: var(--font-size-xl);
    }

    h3 {
        font-size: var(--font-size-lg);
    }

    /* Cards más compactas */
    .card {
        padding: var(--space-16);
    }

    .card__header {
        padding: var(--space-16);
    }

    .card__body {
        padding: var(--space-16);
    }

    .card__footer {
        padding: var(--space-16);
    }

    /* Botones más grandes para touch */
    .btn {
        min-height: 44px;
        padding: var(--space-12) var(--space-20);
    }

    /* Inputs más grandes para touch */
    .form-control,
    select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    textarea {
        min-height: 44px;
        font-size: 16px;
        /* Evita zoom en iOS */
    }
}

/* Tablet pequeña y móvil (≤ 780px) */
@media (max-width: 780px) {

    /* Modales fullscreen en móvil */
    .modal-content {
        width: 95%;
        max-width: none;
        margin: var(--space-16);
        max-height: calc(100vh - var(--space-32));
    }

    /* Toast más ancho en móvil */
    .toast {
        width: calc(100% - var(--space-32));
        max-width: none;
    }

    /* Tablas scroll horizontal */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        font-size: 13px;
    }

    th,
    td {
        padding: var(--space-8) var(--space-10);
        white-space: nowrap;
    }
}

/* Móvil (≤ 640px) */
@media (max-width: 640px) {

    /* Espaciado reducido globalmente */
    .container {
        padding: 0 var(--space-12);
    }

    /* Cards fullwidth en móvil */
    .card {
        border-radius: var(--radius-base);
    }

    /* Modales fullscreen */
    .modal-content {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    /* Botones apilados */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn {
        width: 100%;
    }

    /* Forms apilados */
    .form-row {
        flex-direction: column;
        gap: var(--space-12);
    }

    .form-actions {
        flex-direction: column-reverse;
        gap: var(--space-8);
    }

    .form-actions .btn {
        width: 100%;
    }
}

/* Móvil pequeño (≤ 480px) */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: var(--font-size-xl);
    }

    h2 {
        font-size: var(--font-size-lg);
    }

    h3 {
        font-size: var(--font-size-md);
    }

    /* Padding mínimo */
    .card {
        padding: var(--space-12);
    }

    .card__header,
    .card__body,
    .card__footer {
        padding: var(--space-12);
    }

    /* Botones más compactos si es necesario */
    .btn--sm {
        padding: var(--space-6) var(--space-12);
        font-size: var(--font-size-xs);
    }
}

/* Desktop grande (≥ 1440px) */
@media (min-width: 1440px) {
    body {
        font-size: 17px;
    }

    .container {
        max-width: var(--container-xl);
        padding: 0 var(--space-32);
    }

    /* Modales más grandes */
    .modal-content {
        max-width: 700px;
    }
}

/* Desktop extra grande (≥ 1800px) */
@media (min-width: 1800px) {
    body {
        font-size: 18px;
    }

    .container {
        max-width: 1600px;
    }

    /* Modales aún más grandes */
    .modal-content {
        max-width: 800px;
    }

    /* Tablas con más espacio */
    th,
    td {
        padding: var(--space-16) var(--space-20);
    }
}

/* ==========================================================================
   TOUCH OPTIMIZATIONS - Optimizaciones para dispositivos táctiles
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {

    /* Eliminar hover en touch */
    .btn:hover {
        background: inherit;
        transform: none;
    }

    .nav-link:hover {
        background: inherit;
    }

    .action-btn:hover {
        background: inherit;
    }

    /* Active states más visibles en touch */
    .btn:active {
        transform: scale(0.98);
    }

    .nav-link:active {
        background: var(--color-secondary);
    }

    /* Áreas de toque más grandes */
    .action-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Mejor scroll en tablas */
    .table-container {
        -webkit-overflow-scrolling: touch;
    }

    /* Mejor feedback en selects */
    select:active,
    input:active,
    textarea:active {
        transform: scale(1.01);
    }
}

/* ==========================================================================
   PRINT STYLES - Estilos para impresión
   ========================================================================== */

@media print {

    /* Ocultar elementos no imprimibles */
    .sidebar,
    .header,
    .btn,
    .action-btn,
    .modal,
    .toast,
    .loading-spinner,
    .filters-section,
    .header-actions,
    .no-print {
        display: none !important;
    }

    /* Ajustar main content */
    .main-content {
        margin-left: 0;
        margin-top: 0;
        padding: 0;
    }

    /* Colores para impresión */
    body {
        background: #fff;
        color: #000;
    }

    .card {
        border: 1px solid #000;
        box-shadow: none;
        page-break-inside: avoid;
    }

    /* Tablas para impresión */
    table {
        page-break-inside: auto;
    }

    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    thead {
        display: table-header-group;
    }

    tfoot {
        display: table-footer-group;
    }

    /* Enlaces mostrar URL */
    a[href]:after {
        content: " (" attr(href) ")";
    }
}

/* ==========================================================================
   ACCESSIBILITY - Mejoras de accesibilidad responsive
   ========================================================================== */

/* Aumentar tamaño de enfoque en móvil */
@media (max-width: 768px) {
    :focus-visible {
        outline-width: 3px;
        outline-offset: 3px;
    }

    /* Skip links más visibles */
    .sr-only:focus {
        clip: auto;
        height: auto;
        width: auto;
        position: static;
        padding: var(--space-16);
        background: var(--color-primary);
        color: #fff;
        font-size: var(--font-size-lg);
    }
}

/* ==========================================================================
   PERFORMANCE - Optimizaciones de rendimiento
   ========================================================================== */

/* Reducir animaciones en conexiones lentas o dispositivos de bajo rendimiento */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Modo oscuro automático del sistema */
@media (prefers-color-scheme: dark) {
    /* Las variables ya están definidas en 1-variables.css */
    /* Aquí solo ajustes específicos si son necesarios */
}

/* ==========================================================================
   LANDSCAPE ORIENTATION - Ajustes para orientación horizontal
   ========================================================================== */

@media (max-width: 768px) and (orientation: landscape) {

    /* Reducir altura de header en landscape */
    .header {
        height: 50px;
    }

    .sidebar {
        top: 50px;
        height: calc(100vh - 50px);
    }

    .main-content {
        margin-top: 50px;
        min-height: calc(100vh - 50px);
    }

    /* Modales más compactas en landscape */
    .modal-content {
        max-height: 90vh;
    }

    /* KPI cards en landscape móvil */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   MOBILE FIXES - Dashboard y Abonos
   ========================================================================== */

/* Dashboard en móvil (≤ 768px) */
@media (max-width: 768px) {

    /* KPI Grid - 1 columna en móvil */
    .kpi-grid {
        grid-template-columns: 1fr;
        gap: var(--space-16);
    }

    /* KPI Cards más compactas */
    .kpi-card {
        padding: var(--space-16);
        gap: var(--space-12);
    }

    .kpi-icon {
        width: 50px;
        height: 50px;
        font-size: var(--font-size-xl);
    }

    .kpi-content h3 {
        font-size: var(--font-size-2xl);
    }

    .kpi-content p {
        font-size: var(--font-size-xs);
    }

    /* Charts Grid - 1 columna */
    .charts-grid {
        grid-template-columns: 1fr;
        gap: var(--space-16);
    }

    .chart-container {
        min-height: 280px;
    }

    /* Card header con selector de año responsive */
    #dashboard .card__header {
        flex-wrap: wrap;
        gap: var(--space-8);
    }

    #dashboard .card__header h3 {
        font-size: var(--font-size-md);
    }

    #dashboard .card__header select {
        width: 100%;
        max-width: 100%;
    }

    /* Tables Grid - 1 columna */
    .tables-grid {
        grid-template-columns: 1fr;
        gap: var(--space-16);
    }

    /* Timeline más compacta */
    .timeline-item {
        gap: var(--space-10);
    }

    .timeline-icon {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .timeline-content h4 {
        font-size: 13px;
    }

    .timeline-content p {
        font-size: 12px;
    }

    /* Tabla de facturas por cobrar en dashboard */
    #facturasPorCobrarTable {
        font-size: 13px;
    }

    #facturasPorCobrarTable th,
    #facturasPorCobrarTable td {
        padding: var(--space-8);
    }

    /* Paginación del dashboard más compacta */
    #facturasPorCobrarPagination,
    #actividadPagination {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-8);
    }

    #facturasPorCobrarPagination>div,
    #actividadPagination>div {
        justify-content: center;
        width: 100%;
    }

    #facturasPorCobrarPagination .btn,
    #actividadPagination .btn {
        padding: 5px 10px !important;
        font-size: 12px !important;
        min-width: 32px !important;
    }
}

/* Abonos en móvil (≤ 768px) */
@media (max-width: 768px) {

    /* Filtros de abonos - 1 columna */
    #abonosFilters {
        grid-template-columns: 1fr !important;
        gap: var(--space-12) !important;
    }

    #abonosFilters .filter-field {
        width: 100%;
    }

    #abonosFilters .filter-actions {
        width: 100%;
    }

    #abonosFilters .filter-actions .btn {
        width: 100%;
    }

    /* Tabla de abonos más compacta */
    #abonosTable {
        font-size: 12px;
    }

    #abonosTable th,
    #abonosTable td {
        padding: var(--space-6) var(--space-8);
        white-space: nowrap;
    }

    /* Status badges más pequeños */
    #abonosTable .status {
        padding: 3px 8px;
        font-size: 11px;
    }

    /* Botones de acción más pequeños */
    #abonosTable .action-btn {
        padding: var(--space-4) var(--space-6);
        font-size: 11px;
    }

    /* Scroll horizontal suave en tabla de abonos */
    #abonos .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Móvil pequeño (≤ 480px) - Ajustes adicionales */
@media (max-width: 480px) {

    /* Dashboard ultra compacto */
    .kpi-card {
        padding: var(--space-12);
        gap: var(--space-10);
    }

    .kpi-icon {
        width: 42px;
        height: 42px;
        font-size: var(--font-size-lg);
    }

    .kpi-content h3 {
        font-size: var(--font-size-xl);
    }

    .kpi-content p {
        font-size: 11px;
    }

    .chart-container {
        min-height: 240px;
    }

    .timeline-icon {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .timeline-content h4 {
        font-size: 12px;
    }

    .timeline-content p {
        font-size: 11px;
    }

    /* Tabla de facturas por cobrar ultra compacta */
    #facturasPorCobrarTable {
        font-size: 11px;
    }

    #facturasPorCobrarTable th,
    #facturasPorCobrarTable td {
        padding: var(--space-6);
    }

    /* Abonos ultra compacto */
    #abonosTable {
        font-size: 11px;
    }

    #abonosTable th,
    #abonosTable td {
        padding: var(--space-4) var(--space-6);
    }

    #abonosTable .action-btn {
        padding: var(--space-3) var(--space-5);
        font-size: 10px;
    }
}