/* ARQUIVO: assets/css/style.css */
/* HELPE.APP - CSS MASTER 2026 - BRANDING & VISUAL WEIGHT */

/* === 1. BASE & TIPOGRAFIA === */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Outfit', sans-serif;
    /* Suavização de fontes para telas de alta resolução (Premium UX) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* === 2. SELEÇÃO DE TEXTO (Branding Cyan) === */
::selection {
    background-color: #00D1FF;
    color: #0F172A;
}

.dark ::selection {
    background-color: #00B8E0;
    color: #ffffff;
}

/* === 3. SCROLLBAR PERSONALIZADA (Minimalista) === */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 10px;
}

.dark ::-webkit-scrollbar-thumb {
    background: #334155; /* slate-700 */
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #475569; /* slate-600 */
}

/* === 4. EFEITO DE VIDRO (GLASSMORPHISM) === */
.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.dark .glass {
    background: rgba(15, 23, 42, 0.85);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* === 5. BRANDING: CORES FIXAS POR CATEGORIA (SAFELIST) === */
/* Essas regras garantem o contraste "Expert" no Light e Dark Mode */

/* Trabalhista (Blue) */
.text-blue-600 { color: #2563eb !important; }
.bg-blue-50 { background-color: #eff6ff !important; }
.dark .text-blue-400 { color: #60a5fa !important; }
.dark .bg-blue-900\/20 { background-color: rgba(30, 58, 138, 0.2) !important; }

/* Financeiro (Green) */
.text-green-600 { color: #16a34a !important; }
.bg-green-50 { background-color: #f0fdf4 !important; }
.dark .text-green-400 { color: #4ade80 !important; }
.dark .bg-green-900\/20 { background-color: rgba(20, 83, 45, 0.2) !important; }

/* Marketing (Purple) */
.text-purple-600 { color: #9333ea !important; }
.bg-purple-50 { background-color: #faf5ff !important; }
.dark .text-purple-400 { color: #c084fc !important; }
.dark .bg-purple-900\/20 { background-color: rgba(88, 28, 135, 0.2) !important; }

/* Texto & SEO (Pink) */
.text-pink-600 { color: #db2777 !important; }
.bg-pink-50 { background-color: #fdf2f8 !important; }
.dark .text-pink-400 { color: #f472b6 !important; }
.dark .bg-pink-900\/20 { background-color: rgba(131, 24, 67, 0.2) !important; }

/* Dev & Web (Indigo) */
.text-indigo-600 { color: #4f46e5 !important; }
.bg-indigo-50 { background-color: #eef2ff !important; }
.dark .text-indigo-400 { color: #818cf8 !important; }
.dark .bg-indigo-900\/20 { background-color: rgba(49, 46, 129, 0.2) !important; }

/* Social & Utils (Teal) */
.text-teal-600 { color: #0d9488 !important; }
.bg-teal-50 { background-color: #f0fdfa !important; }
.dark .text-teal-400 { color: #2dd4bf !important; }
.dark .bg-teal-900\/20 { background-color: rgba(19, 78, 74, 0.2) !important; }

/* Datas & Tempo (Orange) */
.text-orange-600 { color: #ea580c !important; }
.bg-orange-50 { background-color: #fff7ed !important; }
.dark .text-orange-400 { color: #fb923c !important; }
.dark .bg-orange-900\/20 { background-color: rgba(124, 45, 18, 0.2) !important; }

/* Saúde (Red) */
.text-red-600 { color: #dc2626 !important; }
.bg-red-50 { background-color: #fef2f2 !important; }
.dark .text-red-400 { color: #f87171 !important; }
.dark .bg-red-900\/20 { background-color: rgba(127, 29, 29, 0.2) !important; }

/* Matemática (Amber) */
.text-amber-600 { color: #d97706 !important; }
.bg-amber-50 { background-color: #fffbeb !important; }
.dark .text-amber-400 { color: #fbbf24 !important; }
.dark .bg-amber-900\/20 { background-color: rgba(120, 53, 15, 0.2) !important; }

/* Veículos (Slate) */
.text-slate-600 { color: #475569 !important; }
.  bg-gray-50 { background-color: #f8fafc !important; }
.dark .text-slate-400 { color: #94a3b8 !important; }
.dark .bg-slate-900\/20 { background-color: rgba(15, 23, 42, 0.2) !important; }

/* Sorte (Emerald) */
.text-emerald-600 { color: #059669 !important; }
.bg-emerald-50 { background-color: #ecfdf5 !important; }
.dark .text-emerald-400 { color: #34d399 !important; }
.dark .bg-emerald-900\/20 { background-color: rgba(6, 78, 59, 0.2) !important; }

/* Conversores (Cyan) */
.text-cyan-600 { color: #0891b2 !important; }
.bg-cyan-50 { background-color: #ecfeff !important; }
.dark .text-cyan-400 { color: #22d3ee !important; }
.dark .bg-cyan-900\/20 { background-color: rgba(22, 78, 99, 0.2) !important; }

/* === 6. ANIMAÇÕES === */
.gradient-text {
    background-size: 200% auto;
    animation: gradientMove 4s ease infinite;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-fade-up {
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === 7. CORREÇÕES DE INPUTS & UX === */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input:focus, textarea:focus, select:focus {
    outline: none;
}

/* Garante que o container master não quebre no mobile */
.max-w-6xl {
    width: 100%;
}