/* css/style.css (Apenas para as páginas visualizador_C-XX.html) */

/* Reset para garantir que não haja margens ou paddings indesejados */
html, body {
    margin: 0;
    padding: 0;
    /* A altura é crucial. Usamos 100dvh (dynamic viewport height) para mobile moderno,
       com fallbacks para 100vh e 100% para maior compatibilidade. */
    height: 100dvh; /* Preferencial: se ajusta à barra de endereço dinâmica em mobile */
    height: 100vh;  /* Fallback: 100% da altura da viewport */
    width: 100%;    /* Ocupa a largura total */
    overflow: hidden; /* Remove barras de rolagem para uma experiência de tela cheia */
    background-color: #000; /* Cor de fundo preta, ideal para visualização de imagens */
}

/* Estilo para o corpo da página, centralizando o conteúdo */
body {
    display: flex; /* Utiliza flexbox para alinhamento */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    align-items: center;    /* Centraliza o conteúdo verticalmente */
    height: 100%; /* Garante que o body ocupe a altura total do html/viewport */
    width: 100%;
}

/* Estilo para a imagem em tela cheia */
.fullscreen-image {
    /* Define que a imagem deve tentar ocupar 100% da largura e altura do seu container (body) */
    width: 100%;
    height: 100%;
    /* object-fit: contain; para mostrar a imagem INTEIRA sem cortes, adicionando barras pretas se necessário.
       object-fit: cover; para fazer a imagem COBRIR toda a área, cortando as bordas se necessário.
       Escolhi 'contain' para garantir que a imagem seja vista por completo. */
    object-fit: contain;
    display: block; /* Garante que não haja espaços extras */
    /* Nenhuma borda, padding ou margin para uma experiência pura */
}

/* Estilo para o botão de fechar */
.close-button {
    position: absolute; /* Posiciona o botão de forma flutuante sobre o conteúdo */
    top: 20px; /* 20px de distância do topo */
    right: 20px; /* 20px de distância da direita */
    background-color: rgba(0, 0, 0, 0.4); /* Fundo preto semi-transparente (40% de opacidade) */
    color: white; /* Cor do texto/ícone branca */
    border: none; /* Remove a borda padrão do botão */
    border-radius: 50%; /* Torna o botão completamente redondo */
    width: 40px; /* Largura fixa para o botão */
    height: 40px; /* Altura fixa para o botão */
    font-size: 1.5em; /* Tamanho do "X" */
    line-height: 1; /* Ajuda a centralizar o "X" verticalmente */
    cursor: pointer; /* Muda o cursor para indicar que o elemento é clicável */
    display: flex; /* Utiliza flexbox para centralizar o "X" dentro do botão */
    justify-content: center; /* Centraliza "X" horizontalmente */
    align-items: center; /* Centraliza "X" verticalmente */
    z-index: 10; /* Garante que o botão fique acima de outros elementos, como a imagem */
    transition: background-color 0.3s ease; /* Transição suave para o efeito hover */
    -webkit-appearance: none; /* Reset para remover estilos padrão de botões em navegadores Webkit (Chrome, Safari) */
    -moz-appearance: none; /* Reset para navegadores Mozilla (Firefox) */
    appearance: none; /* Reset padrão */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Uma pequena sombra para dar profundidade ao botão */
}

/* Efeito ao passar o mouse sobre o botão de fechar */
.close-button:hover {
    background-color: rgba(0, 0, 0, 0.6); /* Aumenta a opacidade do fundo no hover */
}

/* Responsividade para o botão em telas muito pequenas */
@media (max-width: 480px) {
    .close-button {
        top: 10px; /* Posiciona um pouco mais próximo da borda */
        right: 10px; /* Posiciona um pouco mais próximo da borda */
        width: 35px; /* Reduz a largura do botão */
        height: 35px; /* Reduz a altura do botão */
        font-size: 1.2em; /* Reduz o tamanho do "X" */
    }
}