/* ============================================
   RESPONSIVE GLOBAL — MOBILE
   Breakpoint: max-width 767px

   Contiene estilos responsive móviles compartidos
   por todos los módulos: layout, sidebar, formularios,
   tablas genéricas, botones, modales, utilidades.
   ============================================ */

/* --------------------------------------------
   VARIABLES MÓVIL
   -------------------------------------------- */
:root {
    --touch-target-min: 44px;
    --mobile-padding: 12px;
    --mobile-gap: 12px;
    --mobile-font-input: 16px;
    --mobile-border-radius: 10px;
}

/* --------------------------------------------
   RESET CRÍTICO — EVITAR OVERFLOW HORIZONTAL
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    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;
    }

    /* Todo elemento respeta el ancho del viewport */
    *, *::before, *::after {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /* Excepciones: tablas internas */
    table:not(.dir-table),
    thead, tbody, tr {
        max-width: none !important;
    }

    /* Excepciones: botones de acción 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 respeta el ancho en móvil */
    .dir-table {
        max-width: 100% !important;
    }

    /* Columnas ocultas en móvil */
    .hide-mobile,
    .col-index,
    .col-apellido,
    .col-documento,
    .col-telefono,
    .col-email,
    .col-tipo,
    .col-contrato {
        display: none !important;
    }

    /* Contenedor principal */
    .app-container {
        overflow: visible !important;
        width: 100% !important;
    }

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

/* --------------------------------------------
   LAYOUT — HEADER Y SIDEBAR
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    /* Header 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 */
    .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;
    }

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

    /* Items de menú con area táctil adecuada */
    .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;
    }
}

/* --------------------------------------------
   ENCABEZADOS Y CONTROLES DE MÓDULO
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    .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;
    }

    /* Caja de búsqueda */
    .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;
    }

    /* Controles de filtro */
    .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;
    }
}

/* --------------------------------------------
   BOTONES
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    .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;
    }

    .btn-action {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
    }
}

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

    .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;
    }

    .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;
    }
}

/* --------------------------------------------
   FORMULARIOS — GRIDS Y FILAS
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    .form-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--mobile-gap) !important;
    }

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

    .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;
    }

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

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

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

/* --------------------------------------------
   FORMULARIOS — INPUTS
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    .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;
    }

    .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,
    .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-modern {
        min-height: 100px !important;
        resize: vertical !important;
    }

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

/* --------------------------------------------
   FORMULARIOS — BOTONES DE ACCIÓN
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    .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;
    }
}

/* --------------------------------------------
   TABLAS GENÉRICAS
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    .table-responsive,
    .dir-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -8px !important;
        padding: 0 8px !important;
    }

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

    table th,
    .dir-table th {
        font-size: 11px !important;
        white-space: nowrap !important;
    }

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

/* --------------------------------------------
   TABS Y NAVEGACIÓN GENÉRICA
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    .nav-tabs,
    .directory-tabs {
        flex-direction: column !important;
        gap: 8px !important;
    }

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

/* --------------------------------------------
   MODALES GENÉRICOS
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    .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;
    }
}

/* --------------------------------------------
   CARDS Y GRIDS GENÉRICOS
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

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

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

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

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

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

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

    .card {
        margin-bottom: 12px !important;
    }

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

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

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

/* --------------------------------------------
   EMPTY STATES Y LOADING
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    .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;
    }
}

/* --------------------------------------------
   BADGES Y ESTADOS
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    .badge {
        padding: 4px 10px !important;
        font-size: 11px !important;
    }
}

/* --------------------------------------------
   UTILIDADES RESPONSIVE
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }

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

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

    .col-index {
        display: none !important;
    }

    .full-width-mobile {
        width: 100% !important;
    }

    .stack-mobile {
        flex-direction: column !important;
    }
}

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

@media screen and (min-width: 768px) {
    .show-mobile-only,
    .show-mobile-inline {
        display: none !important;
    }
}

/* --------------------------------------------
   MEJORAS PARA DISPOSITIVOS TOUCH
   -------------------------------------------- */
@media (pointer: coarse) {
    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);
    }

    table a,
    .dir-table a {
        display: inline-block;
        padding: 8px 4px;
    }

    .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;
    }
}

/* --------------------------------------------
   MOBILE PEQUEÑO (max-width: 480px)
   -------------------------------------------- */
@media screen and (max-width: 480px) {
    .top-header {
        padding: 0 8px !important;
    }

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

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

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

    .input-modern,
    .select-modern,
    input,
    select {
        min-height: 46px !important;
        padding: 12px 10px !important;
    }

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

    .form-actions {
        padding: 12px 10px !important;
    }

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

    .modal-content,
    .details-content {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
}

/* --------------------------------------------
   MODALES INLINE GENERADOS POR JS
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    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;
    }

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

@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;
    }
}

/* --------------------------------------------
   GRIDS CON ANCHOS INLINE (GENERADOS POR JS)
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    /* Múltiples columnas → 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"]),
    div[style*="grid-template-columns: 1fr 1fr 1fr"],
    div[style*="grid-template-columns:1fr 1fr 1fr"],
    div[style*="grid-template-columns: repeat(2"],
    div[style*="grid-template-columns:repeat(2"],
    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)"],
    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: 1fr 220px"],
    div[style*="grid-template-columns:1fr 220px"],
    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;
    }

    /* Gap estándar 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 1fr — mantener (labels de recibo) */
    div[style*="grid-template-columns: auto 1fr"],
    div[style*="grid-template-columns:auto 1fr"] {
        grid-template-columns: auto 1fr !important;
    }

    /* Flexbox con anchos fijos 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;
    }

    /* Divs con max-width fijo (modales) */
    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;
    }
}