/* Define a fonte Inter e transições suaves para o tema */
:root {
    --color-primary: #3b82f6; /* Azul Primário */
    --color-primary-dark: #1e40af;
    --color-background-dark: #0f172a; /* Slate-900 */
    --color-card-dark: #1e293b; /* Slate-800 */
    --color-text-dark: #f1f5f9; /* Slate-100 */

    --color-background-light: #f8fafc; /* Slate-50 */
    --color-card-light: #ffffff; /* White */
    --color-text-light: #0f172a; /* Slate-900 */

    /* Cores de fundo nublado para os links */
    --color-link-background-dark: rgba(62, 79, 102, 0.4); 
    --color-link-background-light: rgba(255, 255, 255, 0.6); 

    /* Tons para a textura clara e escura */
    --color-texture-light-base: #f8fafc; /* Slate-50 */
    --color-texture-light-line: #e5e8eb; /* Slate-100 */
    --color-texture-dark-line: #172236; /* Tom escuro para as linhas */
    
    /* VARIÁVEIS DE ALINHAMENTO DA TIMELINE */
    --timeline-point-size: 1.5rem; /* 24px */
    --timeline-line-width: 3px;
    --timeline-mobile-left-offset: 1rem; 
    
    /* VARIÁVEIS DE CORREÇÃO DO NOVO SWITCH */
    --switch-bg: var(--color-link-background-dark);
    --switch-width: 48px;
    --switch-height: 20px;
    --circle-diameter: 28px; /* Reduzido de 32px para 28px */
    --circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2);
}

/* Base styles for smooth transitions and font */
html {
    scroll-behavior: smooth;
    font-family: 'Inter', sans-serif;
}

/* Transições suaves para todos os elementos relevantes na troca de tema */
body, header, nav, section, .bg-card, .btn-primary, input, textarea, a {
    transition: all 0.5s ease-in-out;
}

/* ---------------------------------------------------------------- */
/* --- Tema Escuro (DARK MODE - Padrão) --- */
/* ---------------------------------------------------------------- */
/* ... (Seção de Tema Escuro e Estilos do Header) ... */
body {
    color: var(--color-text-dark);
    background: 
        radial-gradient(circle at 10% 20%, rgba(30, 41, 59, 0.4) 0%, transparent 40%), 
        radial-gradient(circle at 90% 80%, rgba(30, 41, 59, 0.4) 0%, transparent 40%),
        repeating-linear-gradient(
            45deg,
            var(--color-background-dark),
            var(--color-background-dark) 10px,
            var(--color-texture-dark-line) 10px,
            var(--color-texture-dark-line) 11px
        );
    background-color: var(--color-background-dark); 
    background-size: 100%, 100%, 10px 10px;
    background-blend-mode: multiply, multiply, normal;
}
.dark header {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.dark .bg-card, body.dark .bg-card {
    background-color: var(--color-card-dark);
}
.dark .text-secondary-highlight {
    color: var(--color-text-dark);
}
.dark .timeline-item::before {
    border-color: var(--color-background-dark); 
}
.dark input, .dark textarea {
    color: var(--color-text-dark);
}


/* ---------------------------------------------------------------- */
/* --- Tema Claro (LIGHT MODE) --- */
/* ---------------------------------------------------------------- */
/* ... (Seção de Tema Claro e Estilos do Header) ... */
body:not(.dark) {
    color: var(--color-text-light);
    background: 
        radial-gradient(circle at 10% 20%, rgba(241, 245, 249, 0.4) 0%, transparent 40%), 
        radial-gradient(circle at 90% 80%, rgba(241, 245, 249, 0.4) 0%, transparent 40%),
        repeating-linear-gradient(
            45deg,
            var(--color-texture-light-base),
            var(--color-texture-light-base) 10px,
            var(--color-texture-light-line) 10px, 
            var(--color-texture-light-line) 11px
        );
    background-color: var(--color-background-light); 
    background-size: 100%, 100%, 10px 10px;
    background-blend-mode: multiply, multiply, normal;
}
body:not(.dark) header {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
body:not(.dark) .bg-card {
    background-color: var(--color-card-light);
}
body:not(.dark) .text-secondary-highlight {
    color: var(--color-text-light);
}
body:not(.dark) .timeline-item::before {
    border-color: var(--color-background-light); 
}
body:not(.dark) input, body:not(.dark) textarea {
    color: var(--color-text-light);
    border-color: #d1d5db;
}


/* ---------------------------------------------------------------- */
/* --- NOVO: ESTILO DO TOGGLE SWITCH (COMPLETO) --- */
/* ---------------------------------------------------------------- */
.ui-switch {
    display: flex;
    align-items: center;
    cursor: pointer;
    /* Herda o posicionamento, mas garante que não seja inline-block */
    position: relative;
    height: var(--circle-diameter); /* Garante que o container seja alto o suficiente */
}

.ui-switch input {
    display: none;
}

.slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: var(--switch-width);
    height: var(--switch-height);
    background: var(--switch-bg);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slider .circle {
    /* Posição vertical para centralizar o círculo na linha */
    top: calc(var(--circle-inset) * -1); 
    left: 0;
    width: var(--circle-diameter);
    height: var(--circle-diameter);
    position: absolute;
    background: var(--circle-bg); /* Cor base do círculo (Sol/Lua) */
    border-radius: inherit;
    
    /* SVG do SOL (Padrão/Não checado = Light Mode) */
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTkuMzA1IDEuNjY3VjMuNzVoMS4zODlWMS42NjdoLTEuMzl6bS00LjcwNyAxLjk1bC0uOTgyLjk4Mkw1LjA5IDYuMDcybC45ODItLjk4Mi0xLjQ3My0xLjQ3M3ptMTAuODAyIDBMMTMuOTI3IDUuMDlsLjk4Mi45ODIgMS40NzMtMS40NzMtLjk4Mi0uOTgyek0xMCA1LjEzOWE0Ljg3MiA0Ljg3MiAwIDAwLTQuODYyIDQuODZBNC44NzIgNC44NzIgMCAwMDEwIDE0Ljg2MiA0Ljg3MiA0Ljg3MiAwIDAwMTQuODYgMTAgNC44NzIgNC44NzIgMCAwMDEwIDUuMTM5em0wIDEuMzg5QTMuNDYyIDMuNDYyIDAgMDExMy40NzEgMTBhMy40NjIgMy40NjIgMCAwMS0zLjQ3MyAzLjQ3MkEzLjQ2MiAzLjQ2MiAwIDAxNi41MjcgMTAgMy40NjIgMy40NjIgMCAwMTEwIDYuNTI4ek0xLjY2NSA5LjMwNXYxLjM5aDIuMDgzdi0xLjM5SDEuNjY2em0xNC41ODMgMHYxLjM5aDIuMDg0di0xLjM5aC0yLjA4NHpNNS4wOSAxMy45MjhMMy42MTYgMTUuNGwuOTgyLjk4MiAxLjQ3My0xLjQ3My0uOTgyLS45ODJ6bTkuODIgMGwtLjk4Mi45ODIgMS40NzMgMS40NzMuOTgyLS45ODItMS40NzMtMS40NzN6TTkuMzA1IDE2LjI1djIuMDgzaDEuMzg5VjE2LjI1aC0xLjM5eiIgLz4KPC9zdmc+");
    
    background-repeat: no-repeat;
    background-position: center center;
    transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
}

.slider .circle::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.75);
    border-radius: inherit;
    transition: all 500ms;
    opacity: 0;
}

/* Define cores do círculo e background do slider baseadas no tema */

/* Dark Mode (Checked) - Deve ser Sol/Laranja */
.dark .ui-switch .circle {
    background-color: #f59e0b; /* Laranja do Sol */
}
/* Light Mode (Unchecked) - Deve ser Lua/Azul */
body:not(.dark) .ui-switch .circle {
    background-color: var(--color-primary-dark); /* Azul da Lua */
}

/* Ações (Dark Mode Ativo/Checkado) */
.ui-switch input:checked + .slider .circle {
    left: calc(100% - var(--circle-diameter));
    /* SVG da LUA (Checado = Dark Mode) */
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTQuMiAyLjVsLS43IDEuOC0xLjguNyAxLjguNy43IDEuOC42LTEuOEw2LjcgNWwtMS45LS43LS42LTEuOHptMTUgOC4zYTYuNyA2LjcgMCAxMS02LjYtNi42IDUuOCA1LjggMCAwMDYuNiA2LjZ6IiAvPgo8L3N2Zz4=");
    background-color: #182025; /* Usa a cor Laranja/Sol */
}

/* Cor do slider de fundo no estado checked */
.ui-switch input:checked + .slider {
    background: var(--color-primary-dark); /* Fundo escuro quando checado */
}


/* ... (Resto das seções CSS de Links, Scroll Reveal e Timeline) ... */


/* ---------------------------------------------------------------- */
/* --- Destaque do Link Ativo e Hover (Glassmorphism Discreto) --- */
/* ---------------------------------------------------------------- */

.nav-link {
    padding: 0.5rem 0.75rem; 
    border-radius: 0.5rem; 
    color: inherit !important; 
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.nav-link:hover {
    background-color: var(--color-link-background-dark) !important; 
    color: var(--color-primary) !important; 
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 1; 
}

.nav-link.active {
    background-color: var(--color-link-background-dark); 
    color: var(--color-primary) !important; 
    font-weight: 600; 
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 1; 
}

body:not(.dark) .nav-link:hover {
    background-color: var(--color-link-background-light) !important;
}

body:not(.dark) .nav-link.active {
    background-color: var(--color-link-background-light);
}


/* ---------------------------------------------------------------- */
/* --- Centralização e Estilo de Ícones Sociais (FIX) --- */
/* ---------------------------------------------------------------- */

.icon-center {
    display: flex;
    justify-content: center; 
    align-items: center; 
}

.icon-size {
    width: 1.5rem !important; 
    height: 1.5rem !important; 
    font-size: 1.5rem !important; 
    line-height: 0 !important; 
    display: inline-block;
    transform: translateY(1px); 
}

.flex a i {
    color: currentColor !important;
}

.icons_hv {
    transition: color 0.3s ease;
}

.icons_hv:hover {
    color: var(--color-primary) !important; 
}

/* ---------------------------------------------------------------- */
/* --- Animação de Scroll (Scroll Reveal) --- */
/* ---------------------------------------------------------------- */
.scroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.scroll-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* BOTÃO DE ENVIO (PERSONALIZADO PARA SOBRESCRITA DO TAILWIND) */
.form-submit-btn {
    /* Define o estilo base para que o Tailwind não o sobrescreva totalmente */
    font-family: 'Inter', sans-serif; 
    transition: all 0.3s ease; /* Mantém a transição do Tailwind */
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4); /* Sombra azul */
}

.form-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(59, 130, 246, 0.6); 
}