/* =========================================
   1. VARIÁVEIS DE TEMA & CONFIGURAÇÃO
   ========================================= */
:root {
    /* Tema Claro (Padrão) */
    --bg-body: #FDFBF7;
    --bg-card: #FFFFFF;
    --bg-input: #FFFFFF;     /* Fundo de Inputs */
    --bg-cream: #FDFBF7;     /* Fundo Cremoso */
    
    --text-primary: #5D4037;       /* Marrom Chocolate */
    --text-secondary: rgba(93, 64, 55, 0.7);
    --text-placeholder: rgba(93, 64, 55, 0.4);
    
    --accent: #D2691E;             /* Caramelo */
    --accent-hover: #b8570f;
    
    --border-light: rgba(93, 64, 55, 0.1);
    --shadow-color: rgba(210, 105, 30, 0.15);
    
    --scrollbar-track: #FDFBF7;
    --scrollbar-thumb: #D2691E;
}

/* Tema Escuro (Dark Chocolate Mode) */
body.dark-mode {
    --bg-body: #1A1614;            /* Café Expresso */
    --bg-card: #26201E;            /* Chocolate Amargo */
    --bg-input: #2C2523;           /* Input Escuro */
    --bg-cream: #26201E;           /* Cream vira Escuro */

    --text-primary: #E6DAC8;       /* Creme Claro */
    --text-secondary: rgba(230, 218, 200, 0.6);
    --text-placeholder: rgba(230, 218, 200, 0.3);

    --accent: #E68A45;             /* Caramelo Brilhante */
    --accent-hover: #D2691E;

    --border-light: rgba(230, 218, 200, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.5);

    --scrollbar-track: #1A1614;
    --scrollbar-thumb: #E68A45;
}

/* =========================================
   2. RESET & BASE
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- FORÇAR CORES DO TAILWIND NO DARK MODE --- 
   Isso garante que seus componentes HTML mudem de cor 
   sem precisar alterar o código HTML deles. */

body.dark-mode .bg-white { background-color: var(--bg-card) !important; }
body.dark-mode .bg-cream { background-color: var(--bg-input) !important; }
body.dark-mode .text-chocolate { color: var(--text-primary) !important; }
body.dark-mode .text-chocolate\/70 { color: var(--text-secondary) !important; }
body.dark-mode .text-chocolate\/60 { color: var(--text-secondary) !important; }
body.dark-mode .text-chocolate\/50 { color: var(--text-secondary) !important; }
body.dark-mode .text-chocolate\/40 { color: var(--text-placeholder) !important; }
body.dark-mode .placeholder-chocolate\/40::placeholder { color: var(--text-placeholder) !important; }
body.dark-mode .border-chocolate\/10 { border-color: var(--border-light) !important; }
body.dark-mode .shadow-chocolate\/5 { box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color) !important; }

/* Menus e Paineis */
body.dark-mode aside { background-color: var(--bg-card) !important; border-right: 1px solid var(--border-light); }
body.dark-mode header { background-color: var(--bg-card) !important; border-bottom: 1px solid var(--border-light); }
body.dark-mode #mobileMenuPanel { background-color: var(--bg-card) !important; }

/* =========================================
   3. COMPONENTES CUSTOMIZADOS
   ========================================= */

/* Inputs & Forms */
input {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: transparent !important;
}
input:focus {
    border-color: var(--accent) !important;
}

/* Botão Flutuante de Tema */
.theme-toggle-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: var(--bg-card);
    border: 2px solid var(--accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 15px var(--shadow-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 100;
    transition: all 0.3s ease;
}
.theme-toggle-btn:hover { transform: scale(1.1); }

/* Sidebar Item */
.sidebar-item { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.sidebar-item:hover { transform: translateX(8px); background-color: var(--bg-body) !important; }

/* Video Container */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000; /* Fundo preto para o vídeo */
}
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Check Circle */
.check-circle {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0; cursor: pointer; z-index: 10;
}
.check-circle:hover { transform: scale(1.1); border-color: var(--accent-hover); }
.check-circle.completed {
    background: linear-gradient(135deg, var(--accent), #CD853F);
    border-color: var(--accent);
}

/* Cards (Modules & Lessons) */
.module-card, .lesson-item {
    background-color: var(--bg-card);
    transition: all 0.3s ease;
    padding: 1.10rem !important;
    border: 1px solid var(--border-light);
    border-radius: 0.9rem;
}
.module-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 10px 25px var(--shadow-color);
}
/* Adicione isso ao final do seu style.css ou junto com os outros cards */

.next-lessons-card {
    padding: 1.12rem !important; /* Padroniza com os módulos */
}
.lesson-item:hover {
    background-color: var(--bg-body);
    border-color: var(--accent);
    transform: translateX(4px);
}
.lesson-item.current {
    background: linear-gradient(135deg, rgba(210, 105, 30, 0.1), rgba(205, 133, 63, 0.1));
    border-color: var(--accent);
}

/* Texts & Icons */
.lesson-title { font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; }
.lesson-item.current .lesson-title { color: var(--accent); }

.lesson-number {
    display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem;
    background: rgba(210, 105, 30, 0.15);
    border-radius: 0.5rem; font-weight: 600; font-size: 0.875rem;
    color: var(--accent); flex-shrink: 0;
}
.lesson-item.current .lesson-number {
    background: linear-gradient(135deg, var(--accent), #CD853F);
    color: white;
}

.lesson-play-icon {
    width: 2rem; height: 2rem;
    background: linear-gradient(135deg, var(--accent), #CD853F);
    border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lesson-play-icon svg { width: 1rem; height: 1rem; color: white; margin-left: 2px; }

/* Progress Bar */
.progress-bar { height: 6px; background: var(--border-light); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #CD853F); transition: width 0.5s ease; }

/* Headers & Badges */
.next-module-header {
    display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;
    padding-bottom: 0.75rem; border-bottom: 2px solid var(--border-light);
}
.next-module-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; background: linear-gradient(135deg, var(--accent), #CD853F);
    color: white; border-radius: 0.5rem; font-weight: 700; font-size: 0.875rem;
}
.badge-secondary {
    
    background: transparent;       /* Remove o fundo laranja */
    color: var(--accent);          /* Mantém a cor do texto */
    padding: 0;                    /* Remove o espaçamento extra */
    font-weight: 700;              /* Deixa um pouco mais negrito para ler melhor */
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-hover); }

/* Animations */
.fade-out { animation: fadeOut 0.5s ease-out forwards; }
.fade-in { animation: fadeIn 0.5s ease-in forwards; }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.error-shake { animation: shake 0.5s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }

/* Ajustes Específicos para Componentes */
.bg-cream\/50 { background-color: rgba(253, 251, 247, 0.5); }
body.dark-mode .bg-cream\/50 { background-color: rgba(255, 255, 255, 0.05); }

/* Borda das capas de cada Módulo */

.module-thumbnail {
    width: 100%;          /* Garante que ocupe a largura do card */
    height: 180px;        /* Mantém uma altura padrão para todas */
    object-fit: cover;    /* Evita que a imagem fique esticada/distorcida */
    border-radius: 14px; /* O arredondamento que você definiu! */
}