/* ============================================
   RESPONSIVE.CSS - ESTILOS RESPONSIVE GLOBALES
   Sistema de Administración de Condominios
   ============================================

   Este archivo contiene TODOS los estilos responsive
   para móvil, tablet y desktop del proyecto completo.

   Breakpoints:
   - Mobile: max-width 480px
   - Mobile Large: max-width 768px
   - Tablet: max-width 1024px
   - Desktop: min-width 1025px

   ============================================ */

/* ============================================
   1. VARIABLES Y RESET MÓVIL
   ============================================ */

:root {
    --touch-target-min: 44px;
    --mobile-padding: 12px;
    --mobile-gap: 12px;
    --mobile-font-input: 16px;
    --mobile-border-radius: 10px;
}

/* ============================================
   RESET CRÍTICO PARA MÓVIL - EVITAR OVERFLOW
   ============================================ */
@media screen and (max-width: 768px) {
    /* Scroll táctil suave - SOLO en el contenedor principal */
    html {
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        width: 100% !important;
        max-width: 100vw !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: manipulation !important;
    }

    body {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-height: 100vh !important;
    }

    /* RESET GLOBAL: Todo elemento debe respetar el ancho */
    *, *::before, *::after {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /* Excepciones para tablas internas (no aplica a dir-table en móvil) */
    table:not(.dir-table),
    thead, tbody, tr {
        max-width: none !important;
    }

    /* Excepciones para botones de acciones del directorio */
    .dir-actions,
    .dir-btn-edit,
    .dir-btn-delete,
    .dir-btn-duplicate,
    .dir-btn-change-type,
    .col-acciones {
        max-width: none !important;
        overflow: visible !important;
    }

    /* dir-table debe respetar el ancho en móvil */
    .dir-table {
        max-width: 100% !important;
    }

    /* OCULTAR COLUMNAS EN MÓVIL - Prioridad alta */
    .hide-mobile,
    .col-index,
    .col-apellido,
    .col-documento,
    .col-telefono,
    .col-email,
    .col-tipo,
    .col-contrato {
        display: none !important;
    }

    /* Contenedor de la app - permitir scroll */
    .app-container {
        overflow: visible !important;
        width: 100% !important;
    }

    /* Main content - permitir scroll */
    .main-content,
    #mainContent {
        overflow: visible !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .content-wrapper,
    #moduleContainer {
        overflow: visible !important;
        width: 100% !important;
        max-width: calc(100vw - 16px) !important;
    }

    /* FORMULARIOS - Forzar ancho con calc para respetar padding */
    form,
    .form-container,
    #directoryForm,
    .form-panel,
    .unified-panel,
    .form-panel.unified-panel,
    .panel-content,
    .form-section,
    .form-section-unified,
    .form-row-flex,
    .input-group-modern,
    .form-group {
        width: 100% !important;
        max-width: calc(100vw - 16px) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* INPUTS - Forzar 100% ancho siempre */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .input-modern,
    .select-modern,
    .textarea-modern {
        width: 100% !important;
        max-width: calc(100vw - 32px) !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* Selects de apartamentos con inline styles problemáticos */
    .apartment-select,
    .apartment-select-prop,
    select[name^="apartamento_"] {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* Contenedores de apartamentos */
    #apartmentsListPropietario,
    #apartmentsListRepresentante,
    #apartmentsListInquilino,
    .apartments-list {
        width: 100% !important;
    }

    /* Filas de apartamento */
    .apartment-row,
    .apartment-field-row,
    [class*="apartment"] > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .apartment-field-row select {
        width: 100% !important;
        display: block !important;
    }

    /* Botón eliminar apartamento */
    .btn-remove-apartment {
        width: 100% !important;
        margin-top: 4px !important;
        min-height: 40px !important;
    }

    /* Checkboxes pequeños del formulario de inquilinos */
    .checkbox-inline-row {
        flex-wrap: wrap !important;
    }

    .checkbox-inline-row label {
        width: auto !important;
        min-width: auto !important;
    }

    /* Campos con clases específicas del directorio */
    .fg-expand,
    .fg-narrow,
    .fg-narrow-md,
    .fg-reside,
    .info-adicional-left,
    .info-adicional-right {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    /* Corregir form-actions que se extienden fuera */
    .form-actions {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Corregir paneles que podrían tener padding negativo */
    .panel-content,
    .form-section-unified {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ============================================
   2. LAYOUT PRINCIPAL - HEADER Y SIDEBAR
   ============================================ */

@media screen and (max-width: 768px) {
    /* Header más compacto */
    .top-header {
        padding: 0 10px !important;
        height: 50px !important;
    }

    .app-title {
        font-size: 0.75rem !important;
        max-width: 180px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .user-name {
        display: none !important;
    }

    .user-info {
        padding: 4px 8px !important;
        font-size: 0.7rem !important;
    }

    /* Sidebar oculto por defecto en móvil */
    .sidebar {
        transform: translateX(-100%) !important;
        width: 260px !important;
        z-index: 1001 !important;
    }

    .sidebar.active {
        transform: translateX(0) !important;
    }

    /* Contenido principal full width */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 8px !important;
        margin-top: 50px !important;
    }

    .main-content.expanded {
        margin-left: 0 !important;
    }

    .content-wrapper {
        padding: 0 !important;
        max-width: 100% !important;
    }

    /* Menu toggle más grande */
    .menu-toggle {
        padding: 10px 12px !important;
        font-size: 1.1rem !important;
    }

    /* Items del menú más grandes para touch */
    .menu-item a {
        padding: 12px 15px !important;
        font-size: 0.85rem !important;
    }

    .menu-item i {
        font-size: 1rem !important;
        width: 24px !important;
    }

    .submenu-item a {
        padding: 10px 15px 10px 40px !important;
        font-size: 0.8rem !important;
    }
}

/* ============================================
   3. MÓDULOS - HEADER Y CONTROLES
   ============================================ */

@media screen and (max-width: 768px) {
    /* Header de módulos */
    .module-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 12px !important;
        margin-bottom: 8px !important;
    }

    .module-header h2 {
        font-size: 1rem !important;
        text-align: center !important;
    }

    .module-header .btn,
    .module-header button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Search box */
    .search-box {
        width: 100% !important;
    }

    .search-box input {
        width: 100% !important;
        padding: 12px 12px 12px 40px !important;
        font-size: var(--mobile-font-input) !important;
        min-height: var(--touch-target-min) !important;
    }

    /* Filter controls */
    .filter-controls {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .filter-controls select,
    .filter-group select {
        width: 100% !important;
        min-height: var(--touch-target-min) !important;
        padding: 12px !important;
        font-size: var(--mobile-font-input) !important;
    }

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

    .date-filter input {
        width: 100% !important;
        min-height: var(--touch-target-min) !important;
        padding: 12px !important;
        font-size: var(--mobile-font-input) !important;
    }
}

/* ============================================
   4. BOTONES
   ============================================ */

@media screen and (max-width: 768px) {
    .btn,
    button:not(.menu-toggle):not(.tab-btn):not(.dir-tab) {
        min-height: var(--touch-target-min) !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    .btn-sm {
        min-height: 36px !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .action-buttons,
    .btn-group {
        gap: 8px !important;
    }

    .action-buttons .btn,
    .btn-group .btn {
        min-width: 40px !important;
        min-height: 40px !important;
    }

    /* Botones de acción en tablas */
    .btn-action {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
    }
}

/* ============================================
   5. FORMULARIOS - CONTENEDORES
   ============================================ */

@media screen and (max-width: 768px) {
    /* Contenedor principal */
    .form-container,
    #directoryForm {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Paneles */
    .form-panel,
    .unified-panel,
    .form-panel.unified-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px 0 !important;
        border-radius: 0 !important;
    }

    .panel-header {
        padding: 14px var(--mobile-padding) !important;
        text-align: center !important;
    }

    .panel-header h3 {
        font-size: 0.95rem !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .panel-content {
        padding: var(--mobile-padding) !important;
    }

    /* Secciones */
    .form-section,
    .form-section-unified {
        padding: 12px 0 !important;
        margin-bottom: 8px !important;
    }

    .section-header {
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    .section-header h4 {
        font-size: 0.9rem !important;
        justify-content: center !important;
    }
}

/* ============================================
   6. FORMULARIOS - GRIDS Y FILAS
   ============================================ */

@media screen and (max-width: 1024px) {
    /* Tablet: 2 columnas */
    .form-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media screen and (max-width: 768px) {
    /* Móvil: 1 columna */
    .form-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--mobile-gap) !important;
    }

    .form-column {
        width: 100% !important;
    }

    /* Filas flexibles */
    .form-row-flex {
        flex-direction: column !important;
        gap: var(--mobile-gap) !important;
    }

    .form-row-flex > div,
    .form-row-flex .fg-expand,
    .form-row-flex .fg-narrow,
    .form-row-flex .fg-narrow-md,
    .form-row-flex .fg-reside {
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }

    /* Grupos de input */
    .input-group-modern,
    .form-group {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    /* Info adicional */
    .info-adicional-row {
        flex-direction: column !important;
        gap: var(--mobile-gap) !important;
    }

    .info-adicional-left,
    .info-adicional-right {
        flex: none !important;
        width: 100% !important;
    }
}

/* ============================================
   7. FORMULARIOS - INPUTS
   ============================================ */

@media screen and (max-width: 768px) {
    /* Labels */
    .label-modern,
    .form-label,
    label {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    /* Inputs, Selects, Textareas */
    .input-modern,
    .select-modern,
    .textarea-modern,
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea {
        width: 100% !important;
        min-height: 50px !important;
        padding: 14px 12px !important;
        font-size: var(--mobile-font-input) !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: var(--mobile-border-radius) !important;
        background-color: #f8fafc !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    input:focus,
    select:focus,
    textarea:focus,
    .input-modern:focus,
    .select-modern:focus,
    .textarea-modern:focus {
        border-color: #3b82f6 !important;
        background-color: #fff !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    }

    /* Select con flecha personalizada */
    select,
    .select-modern {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
        background-position: right 12px center !important;
        background-repeat: no-repeat !important;
        background-size: 20px !important;
        padding-right: 44px !important;
    }

    /* Textarea */
    textarea,
    .textarea-modern {
        min-height: 100px !important;
        resize: vertical !important;
    }

    /* Checkbox y Radio más grandes */
    input[type="checkbox"],
    input[type="radio"] {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
    }

    .checkbox-label {
        padding: 14px !important;
        min-height: var(--touch-target-min) !important;
        gap: 12px !important;
    }
}

/* ============================================
   8. FORMULARIOS - BOTONES DE ACCIÓN
   ============================================ */

@media screen and (max-width: 768px) {
    .form-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 16px var(--mobile-padding) !important;
        background: #fff !important;
        border-top: 1px solid #e5e7eb !important;
        margin-top: 20px !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 100 !important;
    }

    .form-actions button,
    .form-actions .btn {
        width: 100% !important;
        min-height: 50px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        border-radius: var(--mobile-border-radius) !important;
        justify-content: center !important;
    }

    .form-actions .btn-primary {
        order: -1 !important;
    }
}

/* ============================================
   9. TABLAS
   ============================================ */

@media screen and (max-width: 768px) {
    /* Contenedor de tabla con scroll */
    .table-responsive,
    .dir-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -8px !important;
        padding: 0 8px !important;
    }

    /* Tabla base */
    table,
    .data-table,
    .dir-table,
    .propietarios-table {
        min-width: 600px !important;
        font-size: 12px !important;
    }

    table th,
    table td,
    .data-table th,
    .data-table td,
    .dir-table th,
    .dir-table td {
        padding: 10px 8px !important;
        font-size: 12px !important;
    }

    /* Headers de tabla */
    table th,
    .dir-table th {
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    /* Sección de tabla */
    .dir-table-section {
        margin: 0 -8px 12px -8px !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    .dir-table-header {
        padding: 10px 12px !important;
    }

    .dir-table-header h3 {
        font-size: 13px !important;
    }

    /* Hint de scroll */
    .dir-table-scroll-hint {
        display: block !important;
        text-align: center !important;
        padding: 8px !important;
        font-size: 11px !important;
        color: #64748b !important;
        background: #f1f5f9 !important;
    }

    /* Celdas específicas */
    .dir-nombre-cell {
        min-width: 150px !important;
    }

    .dir-nombre-cell span {
        font-size: 13px !important;
    }
}

/* ============================================
   10. TABS Y NAVEGACIÓN
   ============================================ */

@media screen and (max-width: 768px) {
    /* Tabs de directorio */
    .dir-tabs-container {
        margin: 8px !important;
        padding: 8px !important;
    }

    .dir-tabs {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .dir-tab {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 16px !important;
        font-size: 14px !important;
    }

    /* Tabs genéricos */
    .nav-tabs,
    .directory-tabs {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .tab-btn {
        width: 100% !important;
        padding: 12px 16px !important;
        justify-content: center !important;
    }

    /* Filtros de directorio */
    .dir-filters-container {
        padding: var(--mobile-padding) !important;
    }

    .dir-filters {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .dir-search-box,
    .dir-filter-item {
        width: 100% !important;
    }

    .dir-search-box input {
        padding: 14px 14px 14px 44px !important;
        font-size: var(--mobile-font-input) !important;
        min-height: 50px !important;
    }

    .dir-filter-item select {
        min-height: 50px !important;
        padding: 14px !important;
        font-size: var(--mobile-font-input) !important;
    }
}

/* ============================================
   11. MODALES
   ============================================ */

@media screen and (max-width: 768px) {
    .modal-content,
    .details-content {
        width: 95% !important;
        max-width: none !important;
        margin: 10px auto !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
    }

    .modal-header,
    .details-header {
        padding: 16px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }

    .modal-body,
    .details-body {
        padding: 16px !important;
    }

    .modal-footer {
        padding: 16px !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .modal-footer .btn {
        width: 100% !important;
    }
}

@media screen and (max-width: 480px) {
    .modal-content,
    .details-content {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
}

/* ============================================
   12. CARDS Y GRIDS
   ============================================ */

@media screen and (max-width: 768px) {
    /* Stats grid */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .stat-card {
        padding: 16px !important;
    }

    .stat-value {
        font-size: 1.5rem !important;
    }

    /* Quick actions */
    .quick-actions {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Report types */
    .report-types {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .report-card {
        padding: 16px !important;
    }

    /* Directory grid */
    .directory-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Cards generales */
    .card {
        margin-bottom: 12px !important;
    }

    .card-header {
        padding: 14px !important;
    }

    .card-body {
        padding: 14px !important;
    }

    .card-footer {
        padding: 12px 14px !important;
    }

    /* Comunicados */
    .comunicado-item {
        padding: 14px !important;
    }

    .comunicado-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .comunicado-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
}

@media screen and (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   13. SELECTORES DE APARTAMENTOS
   ============================================ */

@media screen and (max-width: 768px) {
    /* Grid de apartamentos */
    .apartments-grid-radio {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: flex-start !important;
    }

    .apartment-radio-item {
        flex: 0 0 calc(25% - 8px) !important;
        min-width: 70px !important;
    }

    .apartment-radio-content {
        padding: 12px 8px !important;
        min-height: var(--touch-target-min) !important;
        justify-content: center !important;
    }

    .apartment-number {
        font-size: 14px !important;
    }

    /* Dropdown de apartamentos */
    .apartment-dropdown,
    .apartment-dropdown-modern {
        position: fixed !important;
        top: 10% !important;
        left: 5% !important;
        right: 5% !important;
        bottom: 10% !important;
        max-height: 80vh !important;
        border-radius: 12px !important;
        z-index: 2000 !important;
    }

    .dropdown-list,
    .dropdown-list-modern {
        max-height: calc(80vh - 100px) !important;
    }

    /* Sección de edificios */
    .building-section {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }

    .building-header-radio {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .building-name {
        font-size: 14px !important;
    }

    /* Selected display */
    .selected-display,
    .selected-display-modern {
        min-height: 50px !important;
        padding: 12px !important;
    }
}

@media screen and (max-width: 480px) {
    .apartment-radio-item {
        flex: 0 0 calc(33.33% - 8px) !important;
    }
}

/* ============================================
   14. TOGGLES Y SWITCHES
   ============================================ */

@media screen and (max-width: 768px) {
    /* Toggle de residencia */
    .residence-toggle {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .toggle-option {
        width: 100% !important;
    }

    .toggle-option .option-content {
        padding: 14px !important;
        justify-content: center !important;
        min-height: var(--touch-target-min) !important;
    }

    /* Status options */
    .status-options {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .status-option {
        width: 100% !important;
    }

    .status-label {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px !important;
        min-height: var(--touch-target-min) !important;
    }

    /* Residence toggle field */
    .residence-toggle-field {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
}

/* ============================================
   15. CONTACTO DE EMERGENCIA Y VEHÍCULOS
   ============================================ */

@media screen and (max-width: 768px) {
    .emergency-contact-row {
        flex-direction: column !important;
        gap: var(--mobile-gap) !important;
    }

    .emergency-contact-row .input-group-modern {
        width: 100% !important;
        flex: none !important;
        margin-right: 0 !important;
    }

    .vehicle-inputs {
        flex-direction: column !important;
        gap: var(--mobile-gap) !important;
    }

    .vehicle-inputs .input-modern {
        width: 100% !important;
    }
}

/* ============================================
   16. EDIFICIOS
   ============================================ */

@media screen and (max-width: 768px) {
    /* Form de edificios */
    .edificio-form-container {
        flex-direction: column !important;
    }

    .edificio-form-left,
    .edificio-form-right {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Nomenclatura */
    .nomenclatura-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 8px !important;
    }

    .nomenclatura-item {
        min-height: 40px !important;
        font-size: 12px !important;
    }

    /* Tabla de apartamentos preview */
    .apartments-preview-table {
        font-size: 11px !important;
    }
}

/* ============================================
   17. FACTURACIÓN
   ============================================ */

@media screen and (max-width: 768px) {
    /* Tabs de facturación */
    .facturacion-tabs {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Conceptos grid */
    .conceptos-grid {
        grid-template-columns: 1fr !important;
    }

    /* Cost inputs */
    .cost-inputs-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .cost-distribution {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Custom concept row */
    .custom-concept-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .custom-concept-row > * {
        width: 100% !important;
    }
}

/* ============================================
   18. PAGOS Y RECIBOS
   ============================================ */

@media screen and (max-width: 768px) {
    /* Selector de período */
    .period-selector {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .period-selector select,
    .period-selector input {
        width: 100% !important;
    }

    /* Vista de recibo para impresión */
    .recibo-preview {
        width: 100% !important;
        padding: 12px !important;
    }
}

/* ============================================
   19. CONFIGURACIÓN
   ============================================ */

@media screen and (max-width: 768px) {
    /* Secciones de configuración */
    .config-section {
        padding: 12px !important;
    }

    .config-grid {
        grid-template-columns: 1fr !important;
    }

    /* Cuentas bancarias */
    .bank-accounts-list {
        gap: 12px !important;
    }

    .bank-account-card {
        padding: 14px !important;
    }
}

/* ============================================
   20. NÓMINA
   ============================================ */

@media screen and (max-width: 768px) {
    /* Lista de empleados */
    .employee-list {
        gap: 12px !important;
    }

    .employee-card {
        padding: 14px !important;
    }

    /* Generación de nómina */
    .nomina-generation-form {
        flex-direction: column !important;
        gap: 12px !important;
    }
}

/* ============================================
   21. EMPTY STATES Y LOADING
   ============================================ */

@media screen and (max-width: 768px) {
    .empty-state {
        padding: 40px 20px !important;
    }

    .empty-state i {
        font-size: 3rem !important;
    }

    .empty-state h3 {
        font-size: 1.1rem !important;
    }

    .empty-state p {
        font-size: 0.9rem !important;
    }

    .loading {
        padding: 30px !important;
    }
}

/* ============================================
   22. BADGES Y ESTADOS
   ============================================ */

@media screen and (max-width: 768px) {
    .badge {
        padding: 4px 10px !important;
        font-size: 11px !important;
    }

    .dir-tab-badge,
    .dir-table-count {
        padding: 3px 10px !important;
        font-size: 12px !important;
    }
}

/* ============================================
   23. UTILIDADES RESPONSIVE
   ============================================ */

/* Ocultar en móvil */
@media screen and (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

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

    .show-mobile-only {
        display: inline !important;
    }

    /* Ocultar columna # en móvil */
    .col-index {
        display: none !important;
    }

    /* =============================================
       TABLAS DIRECTORIO - SIN SCROLL HORIZONTAL
       ============================================= */

    /* Contenedor de tabla con scroll horizontal si no cabe */
    .dir-table-wrapper {
        overflow-x: auto !important;
        overflow-y: visible !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Tabla: ancho mínimo para que todos los botones quepan */
    .dir-table {
        width: 100% !important;
        min-width: 340px !important;
        max-width: none !important;
        table-layout: auto !important;
    }

    /* Celdas con tamaño proporcional */
    .dir-table th,
    .dir-table td {
        padding: 8px 4px !important;
        font-size: 13px !important;
        word-wrap: break-word !important;
    }

    /* Columna nombre: se comprime para dar espacio a acciones */
    .dir-table .col-nombre {
        width: auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Columna apartamento: compacta */
    .dir-table .col-apartamento {
        width: 1% !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    /* Columna acciones: nunca recortar, sin padding extra */
    .dir-table .col-acciones {
        width: 1% !important;
        white-space: nowrap !important;
        overflow: visible !important;
        padding: 4px 2px !important;
    }

    /* Nombre cell más compacto */
    .dir-nombre-cell {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .dir-nombre-cell i {
        font-size: 14px !important;
        flex-shrink: 0 !important;
    }

    .dir-nombre-cell span {
        font-size: 13px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Apartamento badge compacto */
    .dir-apt {
        font-size: 11px !important;
        padding: 3px 6px !important;
        background: #e0e7ff !important;
        border-radius: 4px !important;
        display: inline-block !important;
        font-weight: 600 !important;
    }

    /* Botones de acción compactos — fila lineal sin espacio */
    .dir-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0px !important;
        justify-content: center !important;
    }

    .dir-btn-edit,
    .dir-btn-delete,
    .dir-btn-duplicate,
    .dir-btn-change-type {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        padding: 0 !important;
        font-size: 9px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 3px !important;
    }

    /* Header de la tabla */
    .dir-table-header {
        padding: 10px 12px !important;
    }

    .dir-table-header h3 {
        font-size: 12px !important;
    }

    /* Ocultar hint de scroll */
    .dir-table-scroll-hint {
        display: none !important;
    }

    /* Section sin márgenes negativos */
    .dir-table-section {
        margin: 0 0 12px 0 !important;
        border-radius: 8px !important;
        border: 1px solid #e5e7eb !important;
        overflow: hidden !important;
    }

    /* Contenedores de tablas */
    .propietarios-table-container,
    .representantes-table-container,
    .inquilinos-table-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
}

/* Directorio - Móvil pequeño */
@media screen and (max-width: 480px) {
    .dir-btn-edit,
    .dir-btn-delete,
    .dir-btn-duplicate,
    .dir-btn-change-type {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        font-size: 8px !important;
    }

    .dir-actions {
        gap: 0px !important;
    }

    .dir-table .col-acciones {
        width: 1% !important;
        white-space: nowrap !important;
    }

    .dir-nombre-cell span {
        font-size: 11px !important;
    }

    .dir-apt {
        font-size: 9px !important;
        padding: 2px 4px !important;
    }
}

/* Ocultar en desktop, mostrar en móvil */
.show-mobile-inline {
    display: none;
}

/* Mostrar solo en móvil */
@media screen and (min-width: 769px) {
    .show-mobile-only {
        display: none !important;
    }

    .show-mobile-inline {
        display: none !important;
    }
}

/* Ocultar en tablet */
@media screen and (max-width: 1024px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Full width en móvil */
@media screen and (max-width: 768px) {
    .full-width-mobile {
        width: 100% !important;
    }
}

/* Stack en móvil */
@media screen and (max-width: 768px) {
    .stack-mobile {
        flex-direction: column !important;
    }
}

/* ============================================
   24. MEJORAS PARA TOUCH
   ============================================ */

@media (pointer: coarse) {
    /* Todos los elementos interactivos con tamaño mínimo */
    a,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .btn,
    .clickable {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
    }

    /* Links en tablas */
    table a,
    .dir-table a {
        display: inline-block;
        padding: 8px 4px;
    }

    /* Mejor scroll en contenedores */
    .table-responsive,
    .dir-table-wrapper,
    .dropdown-list,
    .modal-body {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Desactivar hover en touch */
    .card:hover,
    .btn:hover,
    .report-card:hover {
        transform: none !important;
    }
}

/* ============================================
   25. MOBILE PEQUEÑO (480px)
   ============================================ */

@media screen and (max-width: 480px) {
    /* Header aún más compacto */
    .top-header {
        padding: 0 8px !important;
    }

    .app-title {
        font-size: 0.7rem !important;
        max-width: 140px !important;
    }

    /* Contenido */
    .main-content {
        padding: 6px !important;
    }

    /* Paneles */
    .panel-content {
        padding: 10px !important;
    }

    /* Inputs más compactos pero legibles */
    .input-modern,
    .select-modern,
    input,
    select {
        min-height: 46px !important;
        padding: 12px 10px !important;
    }

    /* Tablas */
    table th,
    table td {
        padding: 8px 6px !important;
        font-size: 11px !important;
    }

    /* Apartamentos en 3 columnas */
    .apartment-radio-item {
        flex: 0 0 calc(33.33% - 8px) !important;
        min-width: 60px !important;
    }

    /* Botones de formulario */
    .form-actions {
        padding: 12px 10px !important;
    }

    .form-actions button {
        min-height: 46px !important;
        font-size: 15px !important;
    }
}

/* ============================================
   26. TABS DE PAGOS Y ALQUILER
   ============================================ */

@media screen and (max-width: 768px) {
    /* Tab bars de Pagos y Alquiler */
    .pagos-tab,
    .alquiler-tab {
        flex: 1 1 auto !important;
        text-align: center !important;
        padding: 10px 8px !important;
        font-size: 11px !important;
        min-height: 40px !important;
    }

    /* Contenedor padre de tabs — flex-wrap */
    .pagos-tab:first-child,
    .alquiler-tab:first-child {
        border-radius: 4px 4px 0 0 !important;
    }

    .pagos-tab:last-child,
    .alquiler-tab:last-child {
        border-radius: 0 0 4px 4px !important;
    }

    .pagos-tab:not(:first-child):not(:last-child),
    .alquiler-tab:not(:first-child):not(:last-child) {
        border-radius: 0 !important;
    }

    /* Contenedor directo de tabs necesita flex-wrap */
    .pagos-tab:first-child ~ .pagos-tab,
    .alquiler-tab:first-child ~ .alquiler-tab {
        /* siblings exist — parent needs wrap */
    }

    /* Module header layout en mobile */
    .module-header > div[style*="display: flex"] {
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    /* Tab group container (gap:0 div) */
    .module-header div[style*="gap: 0"],
    .module-header div[style*="gap:0"] {
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    /* Buscador wrap containers */
    #buscadorAlquilerWrap,
    #buscadorEstadoCuentaWrap {
        width: 100% !important;
    }
}

@media screen and (max-width: 480px) {
    .pagos-tab,
    .alquiler-tab {
        flex: 1 1 45% !important;
        font-size: 10px !important;
        padding: 8px 4px !important;
    }
}

/* ============================================
   27. MODALES INLINE (position: fixed en JS)
   ============================================ */

@media screen and (max-width: 768px) {
    /* Catch-all para modales creados inline en JS */
    div[style*="position: fixed"][style*="z-index"] > div[style*="background: white"],
    div[style*="position: fixed"][style*="z-index"] > div[style*="background:white"],
    div[style*="position:fixed"][style*="z-index"] > div[style*="background: white"],
    div[style*="position:fixed"][style*="z-index"] > div[style*="background:white"] {
        width: 95% !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        border-radius: 8px !important;
    }

    /* Los overlays deben permitir scroll */
    div[style*="position: fixed"][style*="z-index"][style*="display: flex"],
    div[style*="position: fixed"][style*="z-index"][style*="display:flex"],
    div[style*="position:fixed"][style*="z-index"][style*="display: flex"],
    div[style*="position:fixed"][style*="z-index"][style*="display:flex"] {
        padding: 10px !important;
        overflow-y: auto !important;
    }

    /* Headers de modales inline */
    div[style*="position: fixed"] div[style*="background: #0a2463"],
    div[style*="position:fixed"] div[style*="background: #0a2463"],
    div[style*="position: fixed"] div[style*="background:#0a2463"],
    div[style*="position:fixed"] div[style*="background:#0a2463"] {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Botones dentro de headers de modales */
    div[style*="position: fixed"] div[style*="background: #0a2463"] button,
    div[style*="position:fixed"] div[style*="background: #0a2463"] button,
    div[style*="position: fixed"] div[style*="background:#0a2463"] button,
    div[style*="position:fixed"] div[style*="background:#0a2463"] button {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
}

@media screen and (max-width: 480px) {
    div[style*="position: fixed"][style*="z-index"] > div[style*="background: white"],
    div[style*="position: fixed"][style*="z-index"] > div[style*="background:white"],
    div[style*="position:fixed"][style*="z-index"] > div[style*="background: white"],
    div[style*="position:fixed"][style*="z-index"] > div[style*="background:white"] {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }

    div[style*="position: fixed"][style*="z-index"][style*="display: flex"],
    div[style*="position: fixed"][style*="z-index"][style*="display:flex"],
    div[style*="position:fixed"][style*="z-index"][style*="display: flex"],
    div[style*="position:fixed"][style*="z-index"][style*="display:flex"] {
        padding: 0 !important;
    }
}

/* ============================================
   28. INPUTS DE BÚSQUEDA CON ANCHO FIJO
   ============================================ */

@media screen and (max-width: 768px) {
    /* Buscadores de Pagos y Alquiler con anchos fijos inline */
    #buscadorEstadoCuenta,
    #buscadorHistorial,
    #buscadorAlquiler {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 12px !important;
    }

    /* Contenedores de buscadores */
    #buscadorEstadoCuentaWrap,
    #buscadorAlquiler {
        width: 100% !important;
    }

    /* Select de concepto en Estado de Cuenta */
    #estadoCuentaConcepto {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Barras de herramientas de tabs - apilar verticalmente */
    div[style*="display: flex"][style*="align-items: center"][style*="gap: 8px"] {
        flex-wrap: wrap !important;
    }
}

/* ============================================
   29. GRIDS DE FORMULARIOS INLINE (JS)
   ============================================ */

/* --- TABLET 1024px --- */
@media screen and (max-width: 1024px) {
    /* 4+ columnas → 2 columnas */
    div[style*="grid-template-columns: repeat(4"],
    div[style*="grid-template-columns: repeat(5"],
    div[style*="grid-template-columns: repeat(6"],
    div[style*="grid-template-columns:repeat(4"],
    div[style*="grid-template-columns:repeat(5"],
    div[style*="grid-template-columns:repeat(6"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Layout 2fr 1fr sidebar → full width */
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns:2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Sidebar grids 1fr 220px → full width */
    div[style*="grid-template-columns: 1fr 220px"],
    div[style*="grid-template-columns:1fr 220px"] {
        grid-template-columns: 1fr !important;
    }
}

/* --- MÓVIL 768px --- */
@media screen and (max-width: 768px) {
    /* 1fr 1fr → 1 columna */
    div[style*="grid-template-columns: 1fr 1fr"]:not([style*="grid-template-columns: 1fr 1fr 1fr"]),
    div[style*="grid-template-columns:1fr 1fr"]:not([style*="grid-template-columns:1fr 1fr 1fr"]) {
        grid-template-columns: 1fr !important;
    }

    /* 1fr 1fr 1fr / repeat(3,1fr) → 1 columna */
    div[style*="grid-template-columns: 1fr 1fr 1fr"],
    div[style*="grid-template-columns:1fr 1fr 1fr"],
    div[style*="grid-template-columns: repeat(3"],
    div[style*="grid-template-columns:repeat(3"],
    div[style*="grid-template-columns: repeat(3, 1fr)"],
    div[style*="grid-template-columns:repeat(3, 1fr)"],
    div[style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* repeat(2, 1fr) → 1 columna */
    div[style*="grid-template-columns: repeat(2"],
    div[style*="grid-template-columns:repeat(2"] {
        grid-template-columns: 1fr !important;
    }

    /* repeat(4+, 1fr) → 1 columna en móvil */
    div[style*="grid-template-columns: repeat(4"],
    div[style*="grid-template-columns: repeat(5"],
    div[style*="grid-template-columns: repeat(6"],
    div[style*="grid-template-columns:repeat(4"],
    div[style*="grid-template-columns:repeat(5"],
    div[style*="grid-template-columns:repeat(6"] {
        grid-template-columns: 1fr !important;
    }

    /* Ratios complejos → 1 columna */
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns:2fr 1fr"],
    div[style*="grid-template-columns: 2fr 1.2fr"],
    div[style*="grid-template-columns:2fr 1.2fr"],
    div[style*="grid-template-columns: 1.5fr 0.9fr"],
    div[style*="grid-template-columns:1.5fr 0.9fr"],
    div[style*="grid-template-columns: 1.5fr 0.9fr 1.3fr"],
    div[style*="grid-template-columns:1.5fr 0.9fr 1.3fr"],
    div[style*="grid-template-columns: 1.8fr 0.8fr 1.3fr"],
    div[style*="grid-template-columns:1.8fr 0.8fr 1.3fr"],
    div[style*="grid-template-columns: 0.9fr 0.9fr 0.8fr 1.4fr"],
    div[style*="grid-template-columns:0.9fr 0.9fr 0.8fr 1.4fr"],
    div[style*="grid-template-columns: 1.5fr 0.6fr 0.6fr"],
    div[style*="grid-template-columns:1.5fr 0.6fr 0.6fr"],
    div[style*="grid-template-columns: 1fr 2fr"],
    div[style*="grid-template-columns:1fr 2fr"],
    div[style*="grid-template-columns: 3fr 1fr 1fr"],
    div[style*="grid-template-columns:3fr 1fr 1fr"],
    div[style*="grid-template-columns: 3fr 1fr"],
    div[style*="grid-template-columns:3fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Sidebar grids → 1 columna */
    div[style*="grid-template-columns: 1fr 220px"],
    div[style*="grid-template-columns:1fr 220px"] {
        grid-template-columns: 1fr !important;
    }

    /* Nómina grids complejos → 1 columna */
    div[style*="grid-template-columns: 1.5fr 1.5fr 55px"],
    div[style*="grid-template-columns:1.5fr 1.5fr 55px"],
    div[style*="grid-template-columns: 0.8fr 0.7fr 0.7fr"],
    div[style*="grid-template-columns:0.8fr 0.7fr 0.7fr"],
    div[style*="grid-template-columns: 1.2fr 1fr 1fr 1fr"],
    div[style*="grid-template-columns:1.2fr 1fr 1fr 1fr"],
    div[style*="grid-template-columns: 1.2fr 1fr 1fr 0.8fr"],
    div[style*="grid-template-columns:1.2fr 1fr 1fr 0.8fr"],
    div[style*="grid-template-columns: 0.8fr 1fr 1.2fr 1.2fr 1fr"],
    div[style*="grid-template-columns:0.8fr 1fr 1.2fr 1.2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Grids con 1fr 1fr 80px → 1 columna */
    div[style*="grid-template-columns: 1fr 1fr 80px"],
    div[style*="grid-template-columns:1fr 1fr 80px"] {
        grid-template-columns: 1fr !important;
    }

    /* Grid-template-columns con display:grid sin espacio (alquiler.js) */
    div[style*="display:grid"][style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]) {
        grid-template-columns: 1fr !important;
    }

    /* Gap más amplio en móvil para grids colapsados */
    div[style*="display: grid"],
    div[style*="display:grid"] {
        gap: 10px !important;
    }

    /* EXCEPCIÓN: Calendario (7 columnas) - NO colapsar */
    div[style*="grid-template-columns: repeat(7"],
    div[style*="grid-template-columns:repeat(7"] {
        grid-template-columns: repeat(7, 1fr) !important;
    }

    /* EXCEPCIÓN: auto-fit/auto-fill con minmax — ya son responsive por diseño.
       Restaurar sus valores originales para que no sean afectados por reglas anteriores.
       Usamos initial para que el inline style prevalezca. */

    /* EXCEPCIÓN: auto 1fr (labels de recibo) - mantener */
    div[style*="grid-template-columns: auto 1fr"],
    div[style*="grid-template-columns:auto 1fr"] {
        grid-template-columns: auto 1fr !important;
    }
}

/* --- Dense grids (120px 1fr 80px 70px...) at mobile --- */
@media screen and (max-width: 768px) {
    div[style*="grid-template-columns: 120px 1fr"],
    div[style*="grid-template-columns:120px 1fr"] {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media screen and (max-width: 480px) {
    div[style*="grid-template-columns: 120px 1fr"],
    div[style*="grid-template-columns:120px 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   30. ESTADO DE CUENTA - TABLA RESPONSIVE
   ============================================ */

@media screen and (max-width: 768px) {
    /* Columna sticky más estrecha */
    .data-table th[style*="position: sticky"],
    .data-table td[style*="position: sticky"],
    .data-table th[style*="position:sticky"],
    .data-table td[style*="position:sticky"] {
        min-width: 120px !important;
        max-width: 120px !important;
        font-size: 9px !important;
    }

    /* Columnas de meses más estrechas */
    .data-table th[style*="min-width: 55px"],
    .data-table th[style*="min-width:55px"] {
        min-width: 40px !important;
        font-size: 8px !important;
        padding: 4px 2px !important;
    }

    /* Contenedor de Estado de Cuenta con scroll */
    #estadoCuentaTableBody {
        font-size: 9px !important;
    }

    /* Celdas de mes en tbody */
    #estadoCuentaTableBody td {
        font-size: 9px !important;
        padding: 4px 2px !important;
    }

    /* Reducir tamaño de nombres en Estado de Cuenta */
    #estadoCuentaTableBody td[style*="position: sticky"] div,
    #estadoCuentaTableBody td[style*="position:sticky"] div {
        font-size: 9px !important;
    }

    #estadoCuentaTableBody td[style*="position: sticky"] div[style*="font-size: 9px"],
    #estadoCuentaTableBody td[style*="position:sticky"] div[style*="font-size: 9px"] {
        font-size: 8px !important;
    }
}

/* ============================================
   31. TABLAS DE ALQUILER - OCULTAR COLUMNAS
   ============================================ */

@media screen and (max-width: 768px) {
    /* Las tablas de alquiler usan .table-responsive (OK scroll) */
    /* Reducir font-size general en tablas de alquiler */
    #tablaContratos,
    #tablaPagosAlquiler,
    #tablaDepositosAlquiler,
    #tablaAnuladosAlquiler {
        font-size: 10px !important;
    }

    #tablaContratos th,
    #tablaContratos td,
    #tablaPagosAlquiler th,
    #tablaPagosAlquiler td,
    #tablaDepositosAlquiler th,
    #tablaDepositosAlquiler td,
    #tablaAnuladosAlquiler th,
    #tablaAnuladosAlquiler td {
        padding: 6px 4px !important;
        font-size: 10px !important;
    }
}

/* ============================================
   32. BARRA DE STATS DE PAGOS
   ============================================ */

@media screen and (max-width: 768px) {
    /* Stats bars con dividers verticales */
    div[style*="display: flex"][style*="background: white"][style*="border-radius"] {
        flex-wrap: wrap !important;
    }

    /* Items de stats con border-right (dividers) */
    div[style*="border-right: 1px solid"][style*="padding"][style*="text-align: center"] {
        border-right: none !important;
        border-bottom: 1px solid #e5e7eb !important;
        flex: 1 1 45% !important;
        min-width: 0 !important;
    }

    /* Último stat item sin border */
    div[style*="padding"][style*="text-align: center"]:last-child {
        border-bottom: none !important;
    }
}

/* ============================================
   33. FILTROS DE AUDITORÍA (Configuración)
   ============================================ */

@media screen and (max-width: 768px) {
    /* Contenedor de filtros de auditoría */
    #filtroAudModulo,
    #filtroAudAccion,
    #filtroAudUsuario,
    #filtroAudFechaDesde,
    #filtroAudFechaHasta,
    #buscadorAuditoria {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Contenedor flex de filtros → columna */
    div[style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 10px"][style*="background: #f9fafb"] {
        flex-direction: column !important;
    }

    div[style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 10px"][style*="background: #f9fafb"] > div {
        min-width: 0 !important;
        width: 100% !important;
        flex: none !important;
    }
}

/* ============================================
   34. CONCEPTO LINES (Alquiler)
   ============================================ */

@media screen and (max-width: 768px) {
    /* Líneas de concepto en alquiler: 120px 1fr 80px 70px 50px 30px */
    div[style*="120px 1fr 80px 70px 50px 30px"],
    div[style*="120px 1fr 80px 70px"] {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
}

/* ============================================
   35. PROGRAMACIÓN FACTURACIÓN - LAYOUT
   ============================================ */

@media screen and (max-width: 1024px) {
    /* Layout principal calendario + panel lateral */
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns:2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   36. COMUNICADOS - STATS PANEL
   ============================================ */

@media screen and (max-width: 768px) {
    /* Stats de comunicados: repeat(4,1fr) → 2 columnas */
    div[style*="grid-template-columns: repeat(4, 1fr)"],
    div[style*="grid-template-columns:repeat(4, 1fr)"],
    div[style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   37. NOMINA - CALCULADORA Y PRESTACIONES
   ============================================ */

@media screen and (max-width: 768px) {
    /* Calculadora botones: repeat(5,1fr) → 3 columnas */
    div[style*="grid-template-columns: repeat(5, 1fr)"],
    div[style*="grid-template-columns:repeat(5, 1fr)"],
    div[style*="grid-template-columns:repeat(5,1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ============================================
   38. GASTOS - PROVEEDOR FORM (6 columnas)
   ============================================ */

@media screen and (max-width: 768px) {
    /* repeat(6,1fr) → 1 columna en móvil */
    div[style*="grid-template-columns: repeat(6"],
    div[style*="grid-template-columns:repeat(6"] {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   39. RECIBO DE ALQUILER - PREVIEW MÓVIL
   ============================================ */

@media screen and (max-width: 768px) {
    /* Escalar el recibo de alquiler en modal */
    #reciboAlquilerParaPDF {
        transform: scale(0.5) !important;
        transform-origin: top left !important;
        margin-bottom: -45% !important;
    }

    /* Modal de detalle de alquiler */
    #modalDetalleAlquiler > div {
        width: 95% !important;
        max-width: 95vw !important;
    }

    /* Botones de acción del recibo */
    #modalDetalleAlquiler div[style*="display: flex"][style*="gap: 6px"] button,
    #modalDetalleAlquiler div[style*="display:flex"][style*="gap:6px"] button {
        font-size: 9px !important;
        padding: 3px 6px !important;
    }
}

@media screen and (max-width: 480px) {
    #reciboAlquilerParaPDF {
        transform: scale(0.38) !important;
        margin-bottom: -55% !important;
    }
}

/* ============================================
   40. INFORMES - GRIDS ASIMÉTRICOS
   ============================================ */

@media screen and (max-width: 768px) {
    /* informes grids 3fr 1fr 1fr y 3fr 1fr → 1 columna (ya cubierto en sección 29) */

    /* Contenedor principal de informe con 2 columnas */
    div[style*="grid-template-columns: 1fr 1fr"][style*="gap"] {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   41. CUENTAS POR PAGAR - MODALES
   ============================================ */

@media screen and (max-width: 768px) {
    /* Los modales de CxP usan divs con max-width fijo */
    div[style*="width: 600px"],
    div[style*="width:600px"],
    div[style*="width: 680px"],
    div[style*="width:680px"],
    div[style*="width: 700px"],
    div[style*="width:700px"],
    div[style*="width: 750px"],
    div[style*="width:750px"],
    div[style*="width: 800px"],
    div[style*="width:800px"],
    div[style*="width: 900px"],
    div[style*="width:900px"] {
        width: 95% !important;
        max-width: 95vw !important;
    }
}

@media screen and (max-width: 480px) {
    div[style*="width: 400px"],
    div[style*="width:400px"],
    div[style*="width: 450px"],
    div[style*="width:450px"] {
        width: 95% !important;
        max-width: 95vw !important;
    }
}

/* ============================================
   42. FLEX CONTAINERS CON ANCHOS FIJOS EN JS
   ============================================ */

@media screen and (max-width: 768px) {
    /* Divs con display flex y gap en barras de herramientas */
    div[style*="display: flex"][style*="justify-content: space-between"][style*="align-items: center"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Selectores con max-width fijo */
    select[style*="max-width: 200px"],
    select[style*="max-width:200px"] {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Inputs con width fijo */
    input[style*="width: 220px"],
    input[style*="width:220px"],
    input[style*="width: 180px"],
    input[style*="width:180px"] {
        width: 100% !important;
    }
}

/* ============================================
   FIN DE RESPONSIVE.CSS
   ============================================ */