/* ==========================================================================
   ESTILOS GLOBAIS E FONTES
   ========================================================================== */
body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

/* ==========================================================================
   ESTILOS DO MENU MOBILE
   ========================================================================== */
#mobile-menu {
    transition: all 0.3s ease-in-out;
    transform-origin: top;
}

#mobile-menu.hidden {
    display: none;
    opacity: 0;
    transform: scaleY(0);
}

#mobile-menu:not(.hidden) {
    display: block;
    opacity: 1;
    transform: scaleY(1);
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu {
    display: none;
}

/* ==========================================================================
   ESTILOS DA LOGO E SEÇÃO "SOBRE"
   ========================================================================== */
.about-image-container {
    width: 100%;
    max-width: 400px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
}

.about-image-container img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Lógica de Cores da Logo */
html:not(.dark) .logo-img { filter: invert(1); }
html.dark .logo-img { filter: invert(0); }

/* ==========================================================================
   CARROSSEL (SWIPER) - Home
   ========================================================================== */
.swiper-slide {
    height: auto !important;
    display: flex;
}

.swiper-pagination-bullet-active {
    background-color: #0D47A1 !important;
}
.dark .swiper-pagination-bullet-active {
    background-color: #63B3ED !important;
}

/* Botões de Navegação Customizados */
.swiper-button-next, .swiper-button-prev {
    color: #0D47A1 !important;
    background: rgba(255, 255, 255, 0.9);
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 18px !important;
    font-weight: bold;
}
.dark .swiper-button-next, .dark .swiper-button-prev {
    background: rgba(30, 41, 59, 0.9);
    color: #63B3ED !important;
}

/* Hover nos botões */
@media (hover: hover) {
    .swiper-button-next:hover, .swiper-button-prev:hover {
        background-color: #0D47A1;
        border-color: #0D47A1;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(13, 71, 161, 0.2);
    }
    .dark .swiper-button-next:hover, .dark .swiper-button-prev:hover {
        background-color: #63B3ED;
        border-color: #63B3ED;
        color: #1A202C;
    }
}

/* ==========================================================================
   ESTILOS GERAIS DE CONTEÚDO (Notícias e Admin)
   ========================================================================== */
.news-content-wrapper { max-width: 75ch; margin: 0 auto; }
.news-content h2 { font-size: 1.75rem; font-weight: 800; margin: 3rem 0 1rem; border-bottom: 2px solid #e0e0e0; padding-bottom: 0.5rem; }
.dark .news-content h2 { border-color: #2D3748; }
.news-content p { margin-bottom: 1rem; line-height: 1.8; font-size: 1.15rem; }
.news-content a { color: #0D47A1; text-decoration: underline; font-weight: 600; }
.dark .news-content a { color: #60a5fa; }

/* ==========================================================================
   ESTILOS DO PAINEL ADMINISTRATIVO (Novos)
   ========================================================================== */

/* Container de Upload de Imagem */
.image-preview-container {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #cbd5e0;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}
.image-preview-container:hover { border-color: #0D47A1; background-color: #E3F2FD; }
.dark .image-preview-container { background-color: #2d3748; border-color: #4a5568; }
.dark .image-preview-container:hover { background-color: #2C5282; border-color: #63B3ED; }

#image-preview { width: 100%; height: 100%; object-fit: cover; display: block; }
#image-preview.hidden { display: none; }

/* Modal de Crop e Mídia (Overlay) */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 60;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 20px;
}
.crop-container {
    max-width: 90%; max-height: 80vh; background: #fff;
    overflow: hidden; border-radius: 8px;
}
.crop-container img { max-width: 100%; max-height: 70vh; display: block; }

/* Editor Fullscreen */
#editor-wrapper.fullscreen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 100; background: white; padding: 20px;
    display: flex; flex-direction: column;
}
.dark #editor-wrapper.fullscreen { background: #1A202C; }
#editor-wrapper.fullscreen #editor { flex-grow: 1; height: auto; }

/* Loading Overlay */
.processing-overlay {
    position: absolute; inset: 0; background: rgba(255,255,255,0.9);
    display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10;
}
.dark .processing-overlay { background: rgba(0,0,0,0.9); }

/* Animação Botão IA */
.ai-btn-gradient {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    transition: all 0.3s ease;
}
.ai-btn-gradient:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}