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

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

    /* Grid: 3 columnas fijas en tablet */
    #moduleContainer[data-module="documentacion"] .doc-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }

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

    /* Modal: centrado con ancho razonable */
    #moduleContainer[data-module="documentacion"] .doc-modal {
        max-width: 460px !important;
    }

    /* Vista previa: aprovecha el ancho de la tablet en vez de quedarse en los
       460px del diálogo. El padding de 16px del overlay marca el margen. */
    #moduleContainer[data-module="documentacion"] .doc-modal--lg {
        max-width: 94vw !important;
    }
    #moduleContainer[data-module="documentacion"] .doc-modal--lg .doc-preview-img {
        height: 68vh !important;
    }

    /* La cámara no se queda en los 460px del diálogo: encuadrar pide la
       pantalla entera, igual que en el teléfono. */
    #moduleContainer[data-module="documentacion"] .doc-modal--full {
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    /* Botones de header: tamaño cómodo para tablet */
    #moduleContainer[data-module="documentacion"] .btn-doc {
        min-height: 38px !important;
    }

    /* Botones ícono: área táctil en tablet */
    #moduleContainer[data-module="documentacion"] .btn-doc-icon {
        width: 32px !important;
        height: 32px !important;
    }
}