/* ============================================
   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;
    }

    /* 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 */
    .dir-btn-edit,
    .dir-btn-delete,
    .dir-btn-duplicate,
    .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 sin scroll */
    .dir-table-wrapper {
        overflow-x: visible !important;
        overflow-y: visible !important;
        width: 100% !important;
    }

    /* Tabla ocupa 100% exacto */
    .dir-table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

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

    /* Columna nombre: 60% del ancho */
    .dir-table .col-nombre {
        width: 60% !important;
        min-width: 0 !important;
    }

    /* Columna apartamento: 15% del ancho (solo letra y número) */
    .dir-table .col-apartamento {
        width: 15% !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    /* Columna acciones: 25% del ancho */
    .dir-table .col-acciones {
        width: 25% !important;
        min-width: 0 !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 */
    .dir-actions {
        display: flex !important;
        gap: 4px !important;
        justify-content: center !important;
    }

    .dir-btn-edit,
    .dir-btn-delete,
    .dir-btn-duplicate {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !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;
    }
}

/* 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;
    }
}

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