/* Tema Gamificado para AulasDeFrances */
:root {
    /* Cores principais */
    --adf-primary-dark: #4527a0;
    --adf-primary: #673ab7;
    --adf-primary-light: #7c4dff;
    --adf-primary-hover: #5e35b1; /* Adicionado - tom mais escuro para hover */
    --adf-secondary: #ff6d00;
    --adf-secondary-hover: #e65100; /* Adicionado - tom mais escuro para hover */
    --adf-success: #388e3c;
    --adf-light-purple: #ede7f6;
    --adf-gray-light: #f5f8ff;
    --adf-gray-medium: #9e9e9e;
    --adf-gray-dark: #757575;
    --adf-completed: #69f0ae;
    --adf-locked: #b0bec5;
    
    /* Variáveis gerais */
    --adf-background: #f7f7f7;
    --adf-text: #3c3c3c;
    --adf-error: #ea2b2b;
    --adf-correct: #4caf50;
    --adf-neutral: #e5e5e5;
    --adf-shadow: rgba(0, 0, 0, 0.1);
    --adf-border-radius: 12px;
}

/* Padrão de fundo em grade */
body {
    background-color: var(--adf-gray-light);
    background-image: linear-gradient(#eef2ff 1px, transparent 1px), 
                      linear-gradient(90deg, #eef2ff 1px, transparent 1px);
    background-size: 30px 30px;
}

/* Estilos básicos do container */
.adf-container {
    font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
    background-color: var(--adf-background);
    color: var(--adf-text);
    padding: 20px;
    border-radius: var(--adf-border-radius);
    margin: 20px 0;
    padding-bottom: 60px; /* Para dar espaço à navegação fixa */
}

/* Cabeçalho com gradiente */
.adf-header {
    background: linear-gradient(to bottom, var(--adf-primary-dark), var(--adf-primary));
    color: white;
    padding: 20px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    border-radius: var(--adf-border-radius);
    margin-bottom: 20px;
}

.adf-logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.adf-logo span {
    color: white;
}

/* Informações do usuário no cabeçalho */
.adf-user-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.adf-user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 15px;
}

.adf-user-level {
    font-size: 18px;
    font-weight: bold;
}

.adf-streak {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #ffdf59;
    color: #885c00;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: bold;
}

/* Barra de XP */
.adf-xp-bar-container {
    margin-top: 10px;
    width: 100%;
    padding: 0 15px;
}

.adf-xp-bar {
    height: 15px;
    background-color: var(--adf-primary-dark);
    border-radius: 7.5px;
    overflow: hidden;
    width: 80%;
    display: inline-block;
}

.adf-xp-fill {
    height: 100%;
    background-color: var(--adf-primary-light);
    border-radius: 7.5px;
}

.adf-xp-text {
    display: inline-block;
    margin-left: 15px;
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.adf-level-progress {
    text-align: right;
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    margin-top: 3px;
}

/* Dashboard */
.adf-dashboard {
    max-width: 800px;
    margin: 0 auto;
}

.adf-dashboard-title {
    margin-bottom: 20px;
    font-size: 24px;
    text-align: center;
    color: var(--adf-primary-dark);
}

/* Mapa de jornada */
.adf-journey-map {
    background-color: var(--adf-primary);
    padding: 15px;
    margin-bottom: 20px;
    position: relative;
    opacity: 0.95;
    border-radius: var(--adf-border-radius);
}

.adf-journey-title {
    color: white;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.adf-journey-path {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 15px 0;
}

.adf-journey-node {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: relative;
}

.adf-journey-node.completed {
    background-color: var(--adf-completed);
}

.adf-journey-node.current {
    background-color: white;
    border: 3px solid var(--adf-completed);
    width: 24px;
    height: 24px;
}

.adf-journey-node.locked {
    background-color: var(--adf-locked);
}

.adf-journey-line {
    flex-grow: 1;
    height: 3px;
    margin: 0 5px;
}

.adf-journey-line.completed {
    background-color: var(--adf-completed);
}

.adf-journey-line.locked {
    background-color: var(--adf-locked);
}

/* Títulos de seção */
.adf-section-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--adf-primary-dark);
    margin: 20px 15px;
}

/* Módulos (desafios) */
.adf-module-progress {
    background-color: white;
    border-radius: 12px;
    padding: 0;
    margin-bottom: 15px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.adf-module-progress:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

/* Estado dos módulos */
.adf-module-completed {
    border: 2px solid #e0e0e0;
}

.adf-module-current {
    border: 3px solid var(--adf-primary);
}

.adf-module-locked {
    border: 2px solid #e0e0e0;
    opacity: 0.9;
}

/* Conteúdo do módulo */
.adf-module-content {
    display: flex;
    padding: 15px;
    align-items: center;
}

.adf-module-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 15px;
    flex-shrink: 0;
}

.adf-module-completed .adf-module-icon {
    background-color: var(--adf-light-purple);
    color: var(--adf-primary-dark);
}

.adf-module-current .adf-module-icon {
    background-color: var(--adf-primary);
    color: white;
}

.adf-module-locked .adf-module-icon {
    background-color: #eeeeee;
    color: var(--adf-gray-medium);
}

.adf-module-info {
    flex-grow: 1;
}

.adf-module-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.adf-module-completed .adf-module-title {
    color: var(--adf-primary-dark);
}

.adf-module-current .adf-module-title {
    color: var(--adf-primary);
}

.adf-module-locked .adf-module-title {
    color: var(--adf-gray-dark);
}

/* Barra de progresso do módulo */
.adf-progress-bar {
    height: 12px;
    background-color: var(--adf-light-purple);
    border-radius: 6px;
    overflow: hidden;
    margin: 5px 0;
    width: 100%;
    max-width: 200px;
}

.adf-progress-fill {
    height: 100%;
    border-radius: 6px;
}

.adf-module-current .adf-progress-fill {
    background-color: var(--adf-primary-light);
}

/* Estatísticas e status do módulo */
.adf-progress-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin-top: 5px;
}

.adf-module-status {
    font-size: 12px;
    font-weight: bold;
}

.adf-module-completed .adf-module-status {
    color: var(--adf-success);
}

.adf-module-current .adf-module-status {
    color: var(--adf-secondary);
}

.adf-module-locked .adf-module-status {
    color: var(--adf-gray-dark);
}

/* Botão de ação do módulo */
.adf-module-action {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    flex-shrink: 0;
}

.adf-module-completed .adf-module-action {
    background-color: #e0e0e0;
    color: var(--adf-gray-medium);
}

.adf-module-current .adf-module-action {
    background-color: var(--adf-primary);
    color: white;
    transform: scale(1.1);
}

.adf-module-locked .adf-module-action {
    background-color: #eeeeee;
    color: var(--adf-gray-medium);
}

/* Missões diárias */
.adf-daily-goal {
    background-color: white;
    border-radius: 12px;
    padding: 15px;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.adf-daily-goal-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--adf-primary-dark);
    margin-bottom: 15px;
}

.adf-quest {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.adf-quest:last-child {
    border-bottom: none;
}

.adf-quest-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffe082;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--adf-secondary);
    font-size: 20px;
    margin-right: 15px;
}

.adf-quest-info {
    flex-grow: 1;
}

.adf-quest-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--adf-primary-dark);
}

.adf-quest-reward {
    font-size: 12px;
    color: var(--adf-gray-dark);
}

.adf-quest-progress {
    width: 80px;
    height: 20px;
    border-radius: 10px;
    background-color: var(--adf-light-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--adf-primary-dark);
}

.adf-daily-goal-progress {
    display: flex;
    gap: 5px;
}

.adf-goal-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--adf-neutral);
}

.adf-goal-circle.adf-completed {
    background-color: var(--adf-primary);
}

/* Lições */
.adf-lessons-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.adf-lesson {
    background-color: white;
    padding: 20px;
    border-radius: var(--adf-border-radius);
    box-shadow: 0 2px 4px var(--adf-shadow);
    cursor: pointer;
    transition: transform 0.2s;
}

.adf-lesson:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.adf-lesson-title {
    font-size: 18px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.adf-lesson-icon {
    width: 40px;
    height: 40px;
    background-color: var(--adf-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
}

.adf-lesson-description {
    color: #666;
    margin-bottom: 15px;
}

.adf-lesson-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


/* Estilos para áudios da lição */
.adf-lesson-audios {
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

.adf-audios-title {
    margin-bottom: 20px;
    color: #6c42f5;
    font-size: 1.3em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.adf-audios-list {
    display: grid;
    gap: 15px;
}

.adf-audio-item {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.adf-audio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.adf-audio-title {
    font-weight: 600;
    color: #333;
}

.adf-audio-status i {
    color: #28a745;
}

.adf-audio-player audio {
    width: 100%;
    margin-bottom: 10px;
}

.adf-audio-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
}

.adf-replay-button {
    background: #6c42f5;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.adf-replay-button:hover {
    background: #5835d4;
}

.adf-listen-count {
    color: #666;
}


.adf-topic {
    background-color: var(--adf-neutral);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 14px;
}

.adf-lesson-status {
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
    color: var(--adf-correct);
}

.adf-lesson-status-pending {
    color: #f57c00;
}





/* Outros estilos existentes no arquivo */

/* Estilos para funcionalidade de conteúdo colapsável */
.adf-content-toggle-btn {
    background-color: #5a3585;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 15px;
    margin: 10px 0;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    transition: background-color 0.3s;
}

.adf-content-toggle-btn:hover {
    background-color: #4a2aff;
}

.adf-toggle-icon {
    margin-right: 8px;
    font-size: 16px;
}

.adf-content-collapsed {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    opacity: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.adf-content-visible {
    max-height: 10000px;
    opacity: 1;
    transition: max-height 0.5s ease-in, opacity 0.5s ease-in;
    pointer-events: auto;
}

/* Se for necessário destacar o botão para maior visibilidade */
.adf-content-toggle-btn.attention {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(90, 53, 133, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(90, 53, 133, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(90, 53, 133, 0);
    }
}







/* Botão flutuante de ação */
.adf-floating-button {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: var(--adf-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    border: 3px solid white;
    z-index: 100;
    cursor: pointer;
    transition: transform 0.2s;
}

.adf-floating-button:hover {
    transform: scale(1.1);
}

/* Navegação inferior */
.adf-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    z-index: 10;
}

.adf-nav-item {
    position: relative;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--adf-gray-medium);
    cursor: pointer;
    transition: color 0.2s;
    width: 25%;
}

.adf-nav-item.active {
    color: var(--adf-primary);
}

.adf-nav-item.active::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    background-color: var(--adf-light-purple);
    border-radius: 50%;
    z-index: -1;
}

/* Estilos para módulos completos com estrelas */
.adf-module-stars {
    display: flex;
    margin-top: 5px;
}

.adf-star {
    color: #FFD700;
    font-size: 24px;
    margin-right: 5px;
}

/* Estilo do botão de XP */
.adf-xp-badge {
    background-color: #7c4dff;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
}

.adf-xp-badge .adf-xp-value {
    font-size: 16px;
    line-height: 1;
}

.adf-xp-badge .adf-xp-label {
    font-size: 10px;
    text-transform: uppercase;
}

.adf-module-current {
    position: relative;
    padding-left: 75px;
}

/* Notificações de XP */
.adf-xp-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #673ab7;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: bold;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
    z-index: 1000;
}

.adf-xp-notification-show {
    transform: translateY(0);
    opacity: 1;
}

/* Modal de subida de nível */
.adf-level-up-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.adf-level-up-modal-show {
    opacity: 1;
    visibility: visible;
}

.adf-level-up-content {
    background-color: white;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    max-width: 350px;
    transform: scale(0.8);
    transition: transform 0.3s;
}

.adf-level-up-modal-show .adf-level-up-content {
    transform: scale(1);
}

.adf-level-up-icon {
    font-size: 60px;
    margin-bottom: 20px;
}

.adf-level-up-button {
    background-color: #673ab7;
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 25px;
    font-weight: bold;
    margin-top: 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.adf-level-up-button:hover {
    background-color: #7c4dff;
}

/* Estilos para badges e conquistas */
.adf-achievements {
    margin: 20px 0;
    background-color: white;
    border-radius: var(--adf-border-radius);
    padding: 15px;
    box-shadow: 0 2px 4px var(--adf-shadow);
}

.adf-achievements-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.adf-achievements-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.adf-achievement {
    background-color: #f8f8f8;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(50% - 5px);
    transition: transform 0.2s;
}

.adf-achievement:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.adf-achievement-icon {
    font-size: 24px;
    background-color: #e9f5ff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adf-achievement-info {
    flex-grow: 1;
}

.adf-achievement-title {
    font-weight: bold;
    margin: 0 0 5px 0;
    font-size: 14px;
}

.adf-achievement-description {
    font-size: 12px;
    color: #666;
    margin: 0;
}

/* Modal de notificação de badge */
.adf-badge-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.adf-badge-modal-show {
    opacity: 1;
    visibility: visible;
}

.adf-badge-content {
    background-color: white;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    max-width: 350px;
    transform: scale(0.8);
    transition: transform 0.3s;
    animation: adf-badge-glow 2s infinite alternate;
}

@keyframes adf-badge-glow {
    from { box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); }
    to { box-shadow: 0 0 30px rgba(255, 215, 0, 0.8); }
}

.adf-badge-modal-show .adf-badge-content {
    transform: scale(1);
}

.adf-badge-header {
    margin-bottom: 15px;
}

.adf-badge-icon {
    font-size: 60px;
    margin-bottom: 10px;
    animation: adf-badge-bounce 0.5s ease 0.5s;
}

@keyframes adf-badge-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}

.adf-badge-info h3 {
    color: #333;
    margin: 0 0 10px 0;
}

.adf-badge-reward {
    margin: 15px 0;
    font-size: 18px;
    font-weight: bold;
    color: var(--adf-primary);
}

.adf-badge-button {
    background-color: var(--adf-primary);
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: bold;
    margin-top: 15px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.adf-badge-button:hover {
    background-color: var(--adf-primary-hover);
}

/* Login requerido */
.adf-login-required {
    text-align: center;
    background-color: white;
    padding: 30px;
    border-radius: var(--adf-border-radius);
    box-shadow: 0 2px 4px var(--adf-shadow);
    max-width: 500px;
    margin: 0 auto;
}

.adf-button {
    display: inline-block;
    background-color: var(--adf-primary);
    color: white !important; /* Importante para prevenir sobrescrição */
    font-weight: bold;
    padding: 10px 20px;
    border-radius: var(--adf-border-radius);
    text-decoration: none;
    margin-top: 15px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.adf-button:hover {
    background-color: var(--adf-primary-hover);
    color: white !important; /* Importante para garantir que o texto permaneça branco */
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.adf-button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.adf-button-small {
    padding: 5px 10px;
    font-size: 14px;
}

/* Correção específica para os botões roxos na página de lição */
.wp-block-button__link,
a.wp-block-button__link,
.page-licao-frances a.wp-block-button__link,
.page-licao-frances .wp-block-button__link,
.page-licao-frances button:not(.adf-toggle-content-btn),
.page-licao-frances a.button {
    background-color: var(--adf-primary) !important;
    color: white !important;
    transition: all 0.3s ease;
}

.wp-block-button__link:hover,
a.wp-block-button__link:hover,
.page-licao-frances a.wp-block-button__link:hover,
.page-licao-frances .wp-block-button__link:hover,
.page-licao-frances button:not(.adf-toggle-content-btn):hover,
.page-licao-frances a.button:hover {
    background-color: var(--adf-primary-hover) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Responsividade */
@media (max-width: 600px) {
    .adf-container {
        padding: 10px;
    }
    
    .adf-header {
        padding: 10px;
    }
    
    .adf-logo {
        font-size: 18px;
    }
    
    .adf-journey-path {
        margin: 15px 20px;
    }
    
    .adf-module-info {
        max-width: 160px;
    }
    
    .adf-achievement {
        width: 100%;
    }
    
    .adf-lesson {
        padding: 15px;
    }
    
    .adf-result-stats {
        flex-direction: column;
        gap: 10px;
    }
}

/* Arquivo: assets/css/adf-styles.css */
/* Adicionar ao final do arquivo */

/* Seção de gamificação e desbloqueio de módulos */
/* Estilos para módulos */
.adf-modules-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 30px;
}

/* Estilos para cabeçalhos de nível */
.adf-level-header {
    background-color: #6a3caf;
    border-radius: 12px;
    padding: 15px 20px;
    margin-top: 20px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    box-shadow: 0 3px 10px rgba(106, 60, 175, 0.2);
}

.adf-level-title {
    font-size: 1.6rem;
    margin: 0;
    font-weight: 600;
}

.adf-level-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.adf-level-lessons-count {
    font-size: 1rem;
    opacity: 0.9;
    padding: 5px 10px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
}

/* Estilos para o container de módulos de um nível */
.adf-level-modules {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: 15px;
    border-left: 4px solid #6a3caf;
    margin-left: 10px;
}

.adf-module-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: relative;
    transition: all 0.3s ease;
}

/* Outros estilos para módulos... */

.adf-module-unlocked {
    border-left: 5px solid #4CAF50;
}

.adf-module-locked {
    border-left: 5px solid #F44336;
    opacity: 0.9;
}

.adf-module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.adf-module-status {
    display: flex;
    align-items: center;
}

.adf-progress-bar {
    width: 100px;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 10px;
}

.adf-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.adf-lock-icon {
    color: #F44336;
    font-size: 18px;
}

.adf-unlock-requirements {
    background: #fff9c4;
    padding: 10px 15px;
    border-radius: 0 0 5px 5px;
}

.adf-unlock-requirements h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #795548;
}

.adf-unlock-requirements ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.adf-req {
    padding: 5px 0;
    font-size: 13px;
    color: #616161;
    display: flex;
    align-items: center;
}

.adf-req i {
    margin-right: 8px;
    width: 20px;
    text-align: center;
}

.adf-req-progress {
    margin-left: 5px;
    font-size: 12px;
    color: #9E9E9E;
}

.adf-req-met {
    color: #4CAF50;
    text-decoration: line-through;
}

.adf-req-missing {
    color: #FF5722;
}

.adf-module-content {
    padding: 15px;
}

/* Animações para gamificação */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.adf-level-up-notification {
    animation: pulse 0.5s ease infinite;
}

/* Medalhas e conquistas */
.adf-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.adf-badge {
    width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 50%;
    position: relative;
}

.adf-badge-locked {
    filter: grayscale(100%);
    opacity: 0.5;
}

.adf-badge i {
    font-size: 24px;
    color: #FF9800;
}

.adf-badge-name {
    font-size: 10px;
    text-align: center;
    margin-top: 5px;
}

/* Estilos para requisitos de desbloqueio */
.adf-unlock-requirements {
    background: #fff9c4;
    padding: 10px 15px;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.adf-unlock-requirements h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #795548;
}

.adf-unlock-requirements ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.adf-req {
    padding: 5px 0;
    font-size: 13px;
    color: #616161;
    display: flex;
    align-items: center;
}

.adf-req i {
    margin-right: 8px;
    width: 20px;
    text-align: center;
}

.adf-req-progress {
    margin-left: 5px;
    font-size: 12px;
    color: #9E9E9E;
}

.adf-req-met {
    color: #4CAF50;
    text-decoration: line-through;
}

.adf-req-missing {
    color: #FF5722;
}

/* Estilos para requisitos de desbloqueio */
.adf-unlock-requirements {
    background: #fff9c4;
    padding: 10px 15px;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.adf-unlock-requirements h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #795548;
    font-weight: bold;
}

.adf-unlock-requirements ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.adf-req {
    padding: 5px 0;
    font-size: 13px;
    color: #616161;
    display: flex;
    align-items: center;
}

.adf-req i {
    margin-right: 8px;
    width: 20px;
    text-align: center;
}

.adf-req-progress {
    margin-left: 5px;
    font-size: 12px;
    color: #9E9E9E;
}

.adf-req-met {
    color: #4CAF50;
    text-decoration: line-through;
}

.adf-req-missing {
    color: #FF5722;
}


/* Adicione ao seu arquivo CSS (assets/css/adf-styles.css) */

/* Contador de pontos */
.adf-score-counter {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #3f51b5;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10;
}

/* Animação de pontos XP */
.adf-xp-animation {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #4CAF50;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 24px;
    opacity: 0;
    z-index: 9999;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.adf-xp-animation-show {
    opacity: 1;
    transform: translate(-50%, -80px);
}

.adf-xp-animation-hide {
    opacity: 0;
    transform: translate(-50%, -120px);
}

/* Resumo do exercício */
.adf-exercise-summary {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.95);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.adf-summary-header {
    text-align: center;
    margin-bottom: 20px;
    padding: 10px 30px;
    border-radius: 30px;
}

.adf-summary-header.adf-excellent {
    background-color: #4CAF50;
    color: white;
}

.adf-summary-header.adf-good {
    background-color: #2196F3;
    color: white;
}

.adf-summary-header.adf-keep-trying {
    background-color: #FF9800;
    color: white;
}

.adf-summary-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.adf-score-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.adf-score-value {
    font-size: 48px;
    font-weight: 700;
    color: #3f51b5;
}

.adf-score-label {
    font-size: 16px;
    color: #757575;
}
















/* Final do arquivo */

/* Estilos para conteúdo colapsável da lição */
.lesson-content-wrapper.collapsed-content,
.adf-lesson-body.collapsed-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0;
    margin: 0;
    border: none;
}

.lesson-content-wrapper,
.adf-lesson-body {
    max-height: 2000px; /* Valor alto o suficiente para conter todo o conteúdo */
    overflow: hidden;
    transition: max-height 0.3s ease-in;
}

.content-expand-button {
    background-color: #FFC107; /* Amarelo para combinar com o tema */
    color: #333;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    margin: 15px 0;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.content-expand-button:hover {
    background-color: #FFD54F;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.content-expand-button i {
    margin-right: 8px;
}























/* Estilos para a mensagem de transição */
.adf-success-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.adf-success-transition-show {
    opacity: 1;
}

.adf-success-icon {
    font-size: 5rem;
    color: #4CAF50;
    margin-bottom: 1rem;
}


/* Estilos prioritários para módulos bloqueados */
.adf-module-locked,
[data-locked="true"] {
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* Forçar texto de status para módulos bloqueados */
.adf-module-locked .adf-module-status,
[data-locked="true"] .adf-module-status {
    color: #721c24 !important;
    font-weight: bold !important;
}

/* Impedir que qualquer status de completado seja mostrado em módulos bloqueados */
.adf-module-locked.completed,
.adf-module-locked .completed,
[data-locked="true"].completed,
[data-locked="true"] .completed {
    /* Reverter estilos de completado */
    border-left-color: #eaeaea !important;
    background-color: #f9f9f9 !important;
}






/* Garantir que ícone de bloqueio seja sempre mostrado */
.adf-module-locked .adf-module-icon,
[data-locked="true"] .adf-module-icon {
    content: "🔒" !important;
    color: #999 !important;
    background-color: #f0f0f0 !important;
}



.adf-success-message {
    font-size: 1.5rem;
    color: #333;
    text-align: center;
    max-width: 80%;
}

.module.locked {
    opacity: 0.6;
    filter: grayscale(100%);
    pointer-events: none;
}
.module.unlocked {
    transition: all 0.3s ease;
}


/* Espaçamento vertical entre botões principais da lição */
.adf-toggle-content-btn,
.adf-toggle-audios {
    margin-bottom: 14px; /* ajuste o valor conforme preferir */
    display: inline-block;
}

@media (max-width: 600px) {
    .adf-toggle-content-btn,
    .adf-toggle-audios {
        display: block;
        width: 100%;
        margin-bottom: 14px;
    }
}



.adf-loading-indicator {
    margin-top: 2rem;
    width: 3rem;
    height: 3rem;
    border: 0.3rem solid #f3f3f3;
    border-top: 0.3rem solid #4CAF50;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}