/* ============================================
   DOCUMENTACIÓN - MOBILE (<768px)
   Sistema de Administración de Condominios
   ============================================

   PROBLEMAS QUE RESUELVE:
   - Dispositivos touch no tienen hover → botones de acción siempre visibles
   - Touch targets mínimo 44px para todos los elementos interactivos
   - Modal se convierte en bottom-sheet (desliza desde abajo)
   - Grid se ajusta a 2 columnas o auto-fill de mínimo 130px
   - Header apilado verticalmente para no desbordar
   - Breadcrumb con scroll horizontal si es muy largo

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

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

    /* ============================================
       HEADER
       ============================================ */

    #moduleContainer[data-module="documentacion"] .doc-module .module-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    #moduleContainer[data-module="documentacion"] .doc-header-actions {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    /* Nueva Carpeta: fila completa */
    #moduleContainer[data-module="documentacion"] #btnNuevaCarpeta {
        grid-column: 1 / -1 !important;
    }

    /* Botones de acción del header */
    #moduleContainer[data-module="documentacion"] .btn-doc {
        min-height: 38px !important;
        height: 100% !important;
        padding: 6px 4px !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ============================================
       BREADCRUMB: scroll horizontal en pantalla chica
       ============================================ */

    #moduleContainer[data-module="documentacion"] .doc-breadcrumb {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
    }

    #moduleContainer[data-module="documentacion"] .doc-breadcrumb::-webkit-scrollbar {
        display: none !important;
    }

    /* ============================================
       TOOLBAR
       ============================================ */

    #moduleContainer[data-module="documentacion"] .doc-toolbar {
        margin-bottom: 8px !important;
    }

    /* Toggle vista: área táctil mínima */
    #moduleContainer[data-module="documentacion"] .btn-view-toggle {
        min-width: 36px !important;
        min-height: 36px !important;
        font-size: 0.9rem !important;
    }

    /* ============================================
       GRID DE CARDS: 2 columnas en móvil
       ============================================ */

    #moduleContainer[data-module="documentacion"] .doc-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* ============================================
       CARDS: botones de acción SIEMPRE visibles
       (en touch no hay hover)
       ============================================ */

    #moduleContainer[data-module="documentacion"] .doc-card-actions {
        display: flex !important;
        margin-top: 6px !important;
    }

    /* Botones ícono dentro de cards: área táctil mínima */
    #moduleContainer[data-module="documentacion"] .doc-item-card .btn-doc-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.82rem !important;
    }

    /* Icono de carpeta en card: un poco más pequeño para que quepan 2 cols */
    #moduleContainer[data-module="documentacion"] .doc-card-icon {
        font-size: 2rem !important;
        padding: 8px !important;
        margin-bottom: 6px !important;
    }

    /* Miniatura de imagen en card: altura menor */
    #moduleContainer[data-module="documentacion"] .doc-card-thumb {
        height: 75px !important;
    }

    /* ============================================
       LISTA: botones de acción SIEMPRE visibles
       ============================================ */

    #moduleContainer[data-module="documentacion"] .doc-item-actions {
        opacity: 1 !important;
    }

    /* Botones ícono en lista: área táctil mínima */
    #moduleContainer[data-module="documentacion"] .doc-item-list .btn-doc-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.82rem !important;
    }

    /* ============================================
       MODAL → BOTTOM SHEET
       ============================================ */

    #moduleContainer[data-module="documentacion"] .doc-modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    #moduleContainer[data-module="documentacion"] .doc-modal {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        animation: docModalMobileIn 0.25s ease !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
    }

    @keyframes docModalMobileIn {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* Footer del modal: botones apilados en móvil */
    #moduleContainer[data-module="documentacion"] .doc-modal-footer {
        flex-direction: column-reverse !important;
        gap: 8px !important;
        padding: 12px 16px 20px !important;
    }

    #moduleContainer[data-module="documentacion"] .doc-modal-footer .btn-doc {
        width: 100% !important;
        justify-content: center !important;
        min-height: 44px !important;
    }

    /* ============================================
       PREVIEW DE IMAGEN: más altura en móvil
       ============================================ */

    #moduleContainer[data-module="documentacion"] .doc-preview-img img {
        max-height: 55vh !important;
    }

    #moduleContainer[data-module="documentacion"] .doc-photo-preview img {
        max-height: 160px !important;
    }

    /* ============================================
       EMPTY STATE: padding reducido
       ============================================ */

    #moduleContainer[data-module="documentacion"] .doc-empty {
        padding: 30px 16px !important;
    }

    #moduleContainer[data-module="documentacion"] .doc-empty i {
        font-size: 2.8rem !important;
    }
}