body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased; /* Texto mais nítido */
}

.font-display {
    font-family: 'Montserrat', sans-serif;
}

/* Suavizar rolagem da página */
html {
    scroll-behavior: smooth;
}

/* Hero Background */
.hero-bg {
    background-image: url('https://images.unsplash.com/photo-1525926477800-7a3be5800ccb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

/* Remover outline padrão do details/summary */
details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}

/* Animação simples para o modal */
#modalLead:not(.hidden) {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- ESTILIZAÇÃO GLOBAL DE DROPDOWNS (SELECT) --- */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Seta SVG Personalizada (Cinza Escuro para Modo Claro) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.5rem !important; /* Espaço garantido para a seta não ficar em cima do texto */
    cursor: pointer;
    line-height: 1.5;
}

.dark select {
    /* Seta SVG Personalizada (Cinza Claro para Modo Escuro) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* --- ESTILIZAÇÃO AVANÇADA DE FORMULÁRIOS E TEMA --- */

/* Define que o navegador deve renderizar controles nativos (calendar, select) 
   respeitando o tema claro/escuro */
:root {
    color-scheme: light;
}

.dark {
    color-scheme: dark;
}

/* Correção de contraste para inputs na tela de login em modo escuro */
.dark #loginEmail,
.dark #loginPassword {
    color-scheme: light;
}

/* Estilizando o ícone do Calendário (Date Picker) */
/* Inverte cores e ajusta para um tom alaranjado/amber */
::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: 0.2s;
    background-size: 20px;
}

::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Estilizando as opções do Select (Dropdown) */
/* Nota: O suporte a CSS em <option> é limitado pelos navegadores, 
   mas isso garante fundo escuro no dark mode */
select option {
    padding: 12px 16px; /* Mais espaçamento interno */
    background-color: #ffffff;
    color: #374151; /* gray-700 */
    font-family: 'Inter', sans-serif; /* Garante a fonte do sistema */
    font-size: 0.95rem;
    min-height: 40px; /* Tenta forçar uma altura maior para facilitar o clique */
}

.dark select option {
    background-color: #1f2937; /* gray-800 */
    color: #f3f4f6; /* gray-100 */
}

/* Hack para tentar estilizar o item selecionado/hover (Suporte varia por navegador) */
select option:checked,
select option:hover {
    background-color: #d97706 !important; /* amber-600 */
    color: #ffffff !important;
    box-shadow: 0 0 10px 100px #d97706 inset; /* Truque para forçar cor de fundo em navegadores Webkit */
}

/* Calendário */
.calendar-day {
    min-height: 100px;
    transition: background-color 0.2s;
}
@media (min-width: 768px) {
    .calendar-day { min-height: 120px; }
}
.calendar-day:hover {
    background-color: rgba(249, 250, 251, 0.5);
}
.dark .calendar-day:hover {
    background-color: rgba(31, 41, 55, 0.5);
}

/* Galeria de Fotos */
.photo-thumb {
    aspect-ratio: 1;
    object-fit: cover;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.dark .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* gray-300 */
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #d97706; /* amber-600 */
}

/* --- TRANSIÇÕES DE PÁGINA --- */

/* Define a cor de fundo do HTML para evitar o flash branco na troca de páginas */
html {
    background-color: #f8fafc; /* slate-50 (mais frio/limpo que gray-50) */
}
html.dark {
    background-color: #111827; /* gray-900 */
}

/* --- ANIMAÇÕES DECORATIVAS --- */
@keyframes float {
    0% { transform: translate(0, 0px); }
    50% { transform: translate(0, 20px); }
    100% { transform: translate(0, 0px); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float 8s ease-in-out infinite;
    animation-delay: 2s;
}

/* Utilitários Modernos */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}
.dark .glass-panel {
    background: rgba(17, 24, 39, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Loader Personalizado (Violão) */
.guitar-loader {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.guitar-loader::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(217, 119, 6, 0.2); /* amber-600 opacity */
    border-top-color: #d97706; /* amber-600 */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* --- FIX PARA MENU LATERAL (MOBILE) --- */
@media (max-width: 768px) {
    #sidebar {
        /* Garante que o menu role se o conteúdo for alto */
        overflow-y: auto !important;
        /* Espaço extra no final para o botão de Sair não ficar escondido atrás da barra do navegador */
        padding-bottom: 150px !important;
    }
}
@keyframes spin { to { transform: rotate(360deg); } }