/* Define a fonte principal para toda a página. */
body { 
    font-family: 'Inter', sans-serif; 
}

/* Estiliza a barra de rolagem para navegadores baseados em WebKit (Chrome, Safari, Edge). */
::-webkit-scrollbar { 
    width: 6px; 
}
::-webkit-scrollbar-track { 
    background: #f3f4f6; 
}
::-webkit-scrollbar-thumb { 
    background: #9ca3af; 
    border-radius: 10px; 
}

/* Estiliza a barra de rolagem no modo escuro. */
html.dark ::-webkit-scrollbar-track { 
    background: #1e293b; 
}
html.dark ::-webkit-scrollbar-thumb { 
    background: #475569; 
}

/* Estilos para agrupar ícones (prefixo/sufixo) com campos de input. */
.input-group { 
    position: relative; 
}
.input-group .input-prefix { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    padding-left: 0.625rem; 
    color: #94a3b8; 
    pointer-events: none; 
}
.input-group .input-field { 
    padding-left: 2.125rem; 
}
.input-group .input-suffix { 
    position: absolute; 
    right: 0.625rem;
    top: 0; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    color: #94a3b8; 
    pointer-events: none; 
}
.input-group .input-field-suffix { 
    padding-right: 2.5rem; 
}

/* Esconde elementos que usam o atributo x-cloak do AlpineJS antes de serem inicializados. */
[x-cloak] { 
    display: none !important; 
}

/* Define variáveis CSS para as cores principais da aplicação, permitindo a personalização do tema. */
:root {
    --cor-principal-100: #dcfce7;
    --cor-principal-400: #4ade80;
    --cor-principal-500: #17a659;
    --cor-principal-600: #15803d;
}

/* Classes utilitárias que usam as variáveis de cor para aplicar estilos consistentes. */
.bg-principal-100 { background-color: var(--cor-principal-100); }
.text-principal-400 { color: var(--cor-principal-400); }
.text-principal-500 { color: var(--cor-principal-500); }
.text-principal-600 { color: var(--cor-principal-600); }
.hover\:text-principal-600:hover { color: var(--cor-principal-600); }
.dark .hover\:text-principal-400:hover { color: var(--cor-principal-400); }