/**
 * Padrão de UI: Modal Visualizador de Documentos Responsivo
 * @version 1.0.0
 *
 * RESPONSABILIDADE: Garantir que o modal e seu conteúdo (imagem ou iframe)
 * se adaptem a qualquer tamanho de tela, de mobile a desktop, sem quebrar
 * o layout ou gerar barras de rolagem indesejadas.
 */

/* ==========================================================
   1. ESTRUTURA E DIMENSÕES DO MODAL - RESPONSIVO
   ========================================================== */

.locamais-modal.locamais-modal--document-viewer {
    /* Dimensões flexíveis usando unidades de viewport e max-width */
    width: 90vw; /* Ocupa 90% da largura da tela */
    max-width: 1200px; /* Mas nunca maior que 1200px */
    
    height: 90vh; /* Ocupa 90% da altura da tela */
    max-height: 900px; /* Mas nunca maior que 900px */
    
    /* Layout flex para controle interno */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Essencial para o scroll interno do body funcionar */
}

/* Garante que o conteúdo interno se estique corretamente */
.locamais-modal--document-viewer .locamais-modal__content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* O cabeçalho e o rodapé têm altura fixa */
.locamais-modal--document-viewer .locamais-modal__header,
.locamais-modal--document-viewer .locamais-modal__footer {
    flex-shrink: 0; /* Impede que encolham */
}

/* O corpo do modal ocupa todo o espaço restante e controla seu próprio scroll */
.locamais-modal--document-viewer .locamais-modal__body {
    flex-grow: 1; /* Ocupa todo o espaço vertical disponível */
    overflow: auto; /* Adiciona scroll (vertical ou horizontal) SE necessário */
    padding: 0; /* Remove padding para o conteúdo ocupar 100% do espaço */
    display: flex; /* Centraliza a mensagem de loading */
    align-items: center;
    justify-content: center;
    background-color: var(--lm-bg-subtle, #f8fafc); /* Fundo sutil para a área de visualização */
}

/* ==========================================================
   2. ESTILOS DO CONTEÚDO (IMAGEM E IFRAME)
   ========================================================== */

.locamais-modal--document-viewer #documento-modal-body img,
.locamais-modal--document-viewer #documento-modal-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block; /* Remove espaços em branco indesejados */
}

.locamais-modal--document-viewer #documento-modal-body img {
    object-fit: contain; /* Garante que a imagem inteira seja visível, sem cortar */
    padding: 1rem; /* Adiciona um respiro em volta da imagem */
}

/* ==========================================================
   3. AJUSTES FINOS PARA MOBILE
   ========================================================== */
@media (max-width: 600px) {
    .locamais-modal.locamais-modal--document-viewer {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
}