/* =============================================
   CORREÇÕES E MELHORIAS - AMERICANWAY
   Fixes para problemas específicos reportados
   ============================================= */

/* =============================================
   1. AGENDA - LARGURA E MOBILE FIX
   ============================================= */

/* Agenda mais larga no desktop */
.aba-agenda {
  max-width: 1600px;
}

/* Tabela da agenda - responsividade melhorada */
.semanas-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2);
}

@media (max-width: 768px) {
  .aba-agenda {
    padding: var(--space-4) var(--space-3) !important;
    gap: var(--space-4) !important;
  }
  
  .tabela-aulas {
    font-size: 0.75rem;
  }
  
  .tabela-aulas th,
  .tabela-aulas td {
    min-width: 100px !important;
    width: 100px !important;
    padding: var(--space-2) !important;
    font-size: 0.75rem !important;
  }
  
  .postit {
    font-size: 0.7rem !important;
    padding: var(--space-1) !important;
    min-height: 60px !important;
  }
  
  .cell-content {
    font-size: 0.7rem !important;
  }
  
  .cell-content strong {
    font-size: 0.75rem !important;
  }
}

/* =============================================
   2. CONTADORES - HORIZONTAL CENTRALIZADO
   ============================================= */
.contador-box {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: var(--space-4) !important;
  max-width: 100% !important;
}

.contador-box > div {
  flex: 0 0 auto !important;
  min-width: 180px !important;
  max-width: 240px !important;
}

.contador-coluna {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: var(--space-4) !important;
}

.contador-item {
  flex: 0 0 auto !important;
  min-width: 200px !important;
  max-width: 280px !important;
}

/* =============================================
   3. FORMULÁRIOS - ESTILO UNIFICADO
   ============================================= */

/* Todos os inputs, selects e textareas do site */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="tel"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  font-size: 0.9375rem;
  font-weight: 500;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transition: all var(--transition-fast);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  background: var(--bg-elevated);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary);
  font-weight: 500;
}

/* Selects com seta customizada */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.41 0L6 4.59L10.59 0L12 1.41l-6 6l-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
  cursor: pointer;
}

/* Labels */
label {
  display: block;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  font-size: 0.9375rem;
}

/* =============================================
   4. DARK MODE TOGGLE - ESTILO COMPLETO (CORRIGIDO)
   ============================================= */
.theme-toggle,
#theme-toggle {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-xl);
  z-index: var(--z-fixed);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-size: 1.5rem;
  padding: 0;
  line-height: 1;
}

.theme-toggle:hover,
#theme-toggle:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: var(--shadow-2xl);
}

.theme-toggle:active,
#theme-toggle:active {
  transform: translateY(-2px) scale(1.02);
}

@media (max-width: 768px) {
  .theme-toggle,
  #theme-toggle {
    width: 52px;
    height: 52px;
    bottom: var(--space-4);
    right: var(--space-4);
    font-size: 1.375rem;
  }
}

@media (max-width: 480px) {
  .theme-toggle,
  #theme-toggle {
    width: 48px;
    height: 48px;
    bottom: var(--space-3);
    right: var(--space-3);
    font-size: 1.25rem;
  }
}

/* =============================================
   5. LESSON-ITEM - ESTILO COMPLETO
   ============================================= */
.lesson-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  padding: var(--space-3) !important;
  border-radius: var(--radius-lg) !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  background: var(--bg-elevated) !important;
  border: 2px solid var(--border-light) !important;
  margin-bottom: var(--space-2) !important;
}

.lesson-item:hover {
  background: var(--bg-secondary) !important;
  transform: translateX(4px) !important;
  border-color: var(--border-medium) !important;
}

.lesson-item.active {
  background: var(--primary-50) !important;
  border-color: var(--primary-500) !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-theme="dark"] .lesson-item.active {
  background: rgba(37, 99, 235, 0.2) !important;
}

.lesson-item.locked {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background: var(--bg-secondary) !important;
}

.lesson-item .idx {
  font-weight: 800 !important;
  color: var(--primary-600) !important;
  font-size: 0.875rem !important;
  min-width: 24px !important;
}

.lesson-item .thumb {
  width: 60px !important;
  height: 40px !important;
  border-radius: var(--radius-sm) !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  background: var(--bg-secondary) !important;
}

.lesson-item .meta {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-1) !important;
  min-width: 0 !important;
}

.lesson-item .ttl {
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  font-size: 0.9375rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.lesson-item .desc {
  font-size: 0.8125rem !important;
  color: var(--text-tertiary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.lesson-item .chk {
  font-size: 1.25rem !important;
  color: var(--success-600) !important;
  flex-shrink: 0 !important;
}

/* =============================================
   6. ADMIN-TABS - LAYOUT VERTICAL
   ============================================= */
.admin-tabs {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-3) !important;
  margin-bottom: var(--space-6) !important;
}

.admin-accordion-button {
  width: 100% !important;
  background: var(--gradient-primary) !important;
  color: white !important;
  padding: var(--space-4) var(--space-6) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-align: left !important;
  border: none !important;
  border-radius: var(--radius-xl) !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
  box-shadow: var(--shadow-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
}

.admin-accordion-button::after {
  content: '▼' !important;
  font-size: 0.875rem !important;
  transition: transform var(--transition-base) !important;
  display: inline-block !important;
}

.admin-accordion-button.open::after {
  transform: rotate(180deg) !important;
}

.admin-accordion-button:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

.admin-accordion-button.open {
  background: var(--gradient-success) !important;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
}

/* Conteúdo do accordion */
.admin-accordion-content {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: var(--bg-elevated) !important;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
  border: 1px solid var(--border-light) !important;
  border-top: none !important;
}

.admin-accordion-content.show {
  max-height: 10000px !important;
  padding: var(--space-6) !important;
}

/* =============================================
   7. CURSOS CADASTRADOS - HORIZONTAL
   ============================================= */
#courses,
#lista-cursos,
.cursos-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: var(--space-6) !important;
  justify-items: center !important;
  width: 100% !important;
}

@media (min-width: 1024px) {
  #courses,
  #lista-cursos,
  .cursos-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  #courses,
  #lista-cursos,
  .cursos-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =============================================
   8. MODAL - FIX GLITCH
   ============================================= */

/* Modal começa invisível */
.modal.hidden {
  display: none !important;
  opacity: 0 !important;
}

.modal:not(.hidden) {
  display: flex !important;
  animation: fadeInModal 0.2s ease-out forwards !important;
}

.modal-content,
.modal-box {
  animation: slideInModal 0.25s ease-out forwards !important;
}

@keyframes fadeInModal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInModal {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Remove outras animações que causam conflito */
.modal {
  animation: none !important;
}

.modal-content.scaleIn,
.modal-box.scaleIn {
  animation: slideInModal 0.25s ease-out forwards !important;
}

/* =============================================
   9. MELHORIAS ADICIONAIS
   ============================================= */

/* Playlist em cursos */
.playlist {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-2) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Botões de ação consistentes */
.access-btn,
.access-direct {
  display: block !important;
  width: 100% !important;
}

/* Cards uniformes */
.book-card,
.livro-card,
.course-card {
  width: 100% !important;
  max-width: 360px !important;
}

/* Tabelas responsivas */
@media (max-width: 768px) {
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  table th,
  table td {
    min-width: 100px !important;
    font-size: 0.8125rem !important;
  }
}

/* Fix para inputs em modais */
.modal input,
.modal select,
.modal textarea,
.modal-content input,
.modal-content select,
.modal-content textarea,
.modal-box input,
.modal-box select,
.modal-box textarea {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Checkboxes melhorados */
input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  cursor: pointer !important;
  accent-color: var(--primary-600) !important;
  border-radius: var(--radius-xs) !important;
}

/* Radio buttons melhorados */
input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
  accent-color: var(--primary-600) !important;
}

/* File inputs melhorados */
input[type="file"] {
  padding: var(--space-3) var(--space-4) !important;
  border: 2px dashed var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  cursor: pointer !important;
  background: var(--bg-secondary) !important;
  transition: all var(--transition-fast) !important;
}

input[type="file"]:hover {
  border-color: var(--primary-500) !important;
  background: var(--primary-50) !important;
}

[data-theme="dark"] input[type="file"]:hover {
  background: rgba(37, 99, 235, 0.1) !important;
}

/* =============================================
   10. RESPONSIVIDADE GERAL
   ============================================= */
@media (max-width: 480px) {
  /* Botões full width em mobile */
  button,
  .btn,
  .tab-button,
  .admin-accordion-button {
    text-align: center !important;
  }
  
  /* Headers menores */
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.125rem !important; }
  
  /* Espaçamentos reduzidos */
  .admin-panel,
  .aba-agenda,
  .section {
    padding: var(--space-4) var(--space-3) !important;
  }
}

/* =============================================
   11. MODAL AULAS FIXAS - ESCONDER POR PADRÃO (CORRIGIDO)
   ============================================= */
#modalAulasFixas,
.modal#modalAulasFixas {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#modalAulasFixas.show,
.modal#modalAulasFixas.show {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Garantir que só mostra quando explicitamente ativado */
body:has(#modalAulasFixas:not(.show)) #modalAulasFixas {
  display: none !important;
}

/* =============================================
   12. BOTÃO X NA AGENDA - TAMANHO CORRIGIDO
   ============================================= */
.aluno-lista span button {
  background: var(--gradient-secondary) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  right: -6px !important;
  top: -6px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-fast) !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.aluno-lista span button:hover {
  transform: scale(1.15) !important;
  box-shadow: var(--shadow-md) !important;
}

/* =============================================
   13. COMMENTS - DARK MODE CORRIGIDO
   ============================================= */
.comment {
  background: var(--bg-elevated) !important;
  padding: var(--space-4) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-light) !important;
  margin-bottom: var(--space-3) !important;
}

.comment .meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: var(--space-2) !important;
  font-size: 0.875rem !important;
  color: var(--text-tertiary) !important;
  font-weight: 600 !important;
}

.comment .text {
  color: var(--text-primary) !important;
  line-height: 1.6 !important;
  font-size: 0.9375rem !important;
}

.comment .del-btn {
  background: transparent !important;
  border: none !important;
  color: var(--secondary-600) !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  padding: var(--space-1) !important;
  transition: all var(--transition-fast) !important;
}

.comment .del-btn:hover {
  color: var(--secondary-700) !important;
  transform: scale(1.2) !important;
}

.comments-list {
  background: var(--bg-secondary) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-4) !important;
}

/* =============================================
   14. LIKE-BTN - DARK MODE CORRIGIDO
   ============================================= */
.like-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  padding: var(--space-2) var(--space-4) !important;
  border: 2px solid var(--border-medium) !important;
  background: var(--bg-elevated) !important;
  border-radius: var(--radius-lg) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  font-size: 0.9375rem !important;
  color: var(--text-primary) !important;
}

.like-btn:hover {
  background: var(--bg-secondary) !important;
  transform: scale(1.05) !important;
  border-color: var(--border-heavy) !important;
}

.like-btn.liked {
  background: var(--gradient-secondary) !important;
  color: white !important;
  border-color: var(--secondary-600) !important;
}

.like-btn .heart {
  font-size: 1.125rem !important;
}

/* =============================================
   15. FLASHCARDS - DARK MODE E CORES VIBRANTES
   ============================================= */

/* Root com cores vibrantes */
.awfc2-root {
  --aw-blue-1: #2563eb !important;
  --aw-blue-2: #3b82f6 !important;
  --aw-purple: #8b5cf6 !important;
  --aw-pink: #ec4899 !important;
  --aw-orange: #f97316 !important;
  --aw-teal: #14b8a6 !important;
}

/* Cards com cores vibrantes */
.awfc2-card {
  background: var(--bg-elevated) !important;
  border: 2px solid var(--border-light) !important;
  box-shadow: var(--shadow-lg) !important;
}

.awfc2-listbox {
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%) !important;
  border: 2px solid var(--border-light) !important;
}

.awfc2-listbox:hover {
  border-color: var(--primary-500) !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2) !important;
}

/* Face dos flashcards - cores vibrantes */
.awfc2-face {
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--primary-50) 100%) !important;
  border: 3px solid var(--border-light) !important;
}

[data-theme="dark"] .awfc2-face {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(37, 99, 235, 0.1) 100%) !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
}

.awfc2-face.back {
  background: linear-gradient(135deg, var(--success-50) 0%, var(--primary-50) 100%) !important;
}

[data-theme="dark"] .awfc2-face.back {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
}

/* Termo - cores vibrantes */
.awfc2-term {
  color: var(--primary-600) !important;
  text-shadow: 0 2px 8px rgba(37, 99, 235, 0.1) !important;
  font-weight: 900 !important;
}

[data-theme="dark"] .awfc2-term {
  color: var(--primary-400) !important;
}

/* Tradução - cores vibrantes */
.awfc2-translation {
  background: var(--gradient-success) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 900 !important;
}

[data-theme="dark"] .awfc2-translation {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Botões dos flashcards - cores vibrantes */
.awfc2-btn {
  background: var(--gradient-primary) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.awfc2-btn:hover {
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4) !important;
}

.awfc2-btn.secondary {
  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%) !important;
}

.awfc2-arrowbtn {
  background: var(--gradient-primary) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

/* Icon buttons com cores */
.awfc2-ibtn.save {
  background: var(--gradient-success) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.awfc2-ibtn.remove {
  background: var(--gradient-secondary) !important;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3) !important;
}

/* Badge com cores vibrantes */
.awfc2-badge {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--purple-500) 100%) !important;
  color: white !important;
  font-weight: 900 !important;
  padding: var(--space-2) var(--space-3) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2) !important;
}

/* Progress bar com gradiente vibrante */
.awfc2-meterbar {
  background: var(--bg-secondary) !important;
  border: 2px solid var(--border-light) !important;
}

.awfc2-meterfill {
  background: linear-gradient(90deg, #10b981 0%, #34d399 50%, #10b981 100%) !important;
  background-size: 200% 100% !important;
  animation: progressShine 2s linear infinite !important;
}

@keyframes progressShine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Ordem badge colorido */
.awfc2-order {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--purple-500) 100%) !important;
  color: white !important;
  font-weight: 900 !important;
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2) !important;
}

/* Audio button com cor vibrante */
.awfc2-audiobtn {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.awfc2-audiobtn:hover {
  transform: scale(1.15) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4) !important;
}

/* Modal dos flashcards */
.awfc2-modal {
  background: var(--bg-elevated) !important;
  border: 2px solid var(--border-light) !important;
}

.awfc2-modalhead {
  background: var(--gradient-primary) !important;
  color: white !important;
  padding: var(--space-5) !important;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0 !important;
}

/* Tabela com cores */
.awfc2-table th {
  background: var(--gradient-primary) !important;
  color: white !important;
  font-weight: 800 !important;
}

.awfc2-table tr:hover {
  background: var(--primary-50) !important;
}

[data-theme="dark"] .awfc2-table tr:hover {
  background: rgba(37, 99, 235, 0.1) !important;
}

/* Toast com cores vibrantes */
.awfc2-toast {
  background: var(--bg-elevated) !important;
  border-left: 6px solid var(--primary-600) !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2) !important;
}

/* Finish box com cores vibrantes */
.awfc2-finishbox {
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--primary-50) 100%) !important;
  border: 3px solid var(--primary-500) !important;
  box-shadow: 0 20px 60px rgba(37, 99, 235, 0.3) !important;
}

[data-theme="dark"] .awfc2-finishbox {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(37, 99, 235, 0.1) 100%) !important;
}

.awfc2-scoretitle {
  background: linear-gradient(135deg, #2563eb 0%, #8b5cf6 50%, #ec4899 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  font-weight: 900 !important;
}

/* Input com foco vibrante */
.awfc2-input:focus,
.awfc2-text:focus {
  border-color: var(--primary-500) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2), 0 4px 12px rgba(37, 99, 235, 0.1) !important;
}

/* Header gradient */
.awfc2-h1 {
  background: var(--gradient-primary) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Backdrop com blur forte */
.awfc2-backdrop {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(15, 23, 42, 0.6) !important;
}

[data-theme="dark"] .awfc2-backdrop {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* Under card com sombra colorida */
.awfc2-under {
  background: var(--bg-elevated) !important;
  border: 2px solid var(--border-light) !important;
  box-shadow: 0 0 40px rgba(37, 99, 235, 0.1) !important;
}

[data-theme="dark"] .awfc2-under {
  box-shadow: 0 0 40px rgba(37, 99, 235, 0.2) !important;
}

/* =============================================
   16. SECTION-TOGGLE - ARREDONDADO NO MOBILE
   ============================================= */
.section-toggle {
  border-radius: var(--radius-xl) !important;
}

@media (max-width: 768px) {
  .section-toggle {
    border-radius: var(--radius-xl) !important;
  }
}

/* =============================================
   17. FLASHCARDS - CORREÇÕES COMPLETAS
   ============================================= */

/* Botão de áudio - tamanho corrigido */
.awfc2-audiobtn,
#aw2-audio-btn {
  position: absolute !important;
  top: var(--space-4) !important;
  right: var(--space-4) !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  border-radius: var(--radius-full) !important;

  color: white !important;
  border: none !important;
  
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  transition: all 0.2s ease !important;
  z-index: 20 !important;
  padding: 0 !important;
}

.awfc2-audiobtn:hover,
#aw2-audio-btn:hover {
  transform: scale(1.15) rotate(5deg) !important;
}

.awfc2-audiobtn:active,
#aw2-audio-btn:active {
  transform: scale(1.05) !important;
}

/* Cards não transparentes - cores sólidas vibrantes */
.awfc2-face {
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%) !important;
  border: 3px solid #3b82f6 !important;
}

[data-theme="dark"] .awfc2-face {
  background: linear-gradient(135deg, #1e293b 0%, #1e3a5f 100%) !important;
  border-color: #60a5fa !important;

}

.awfc2-face.back {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border: 3px solid #22c55e !important;
  box-shadow: 0 8px 32px rgba(34, 197, 94, 0.2),
              0 4px 16px rgba(16, 185, 129, 0.1) !important;
}

[data-theme="dark"] .awfc2-face.back {
  background: linear-gradient(135deg, #1e293b 0%, #1e3b2f 100%) !important;
  border-color: #4ade80 !important;
  box-shadow: 0 8px 32px rgba(74, 222, 128, 0.3),
              0 4px 16px rgba(34, 197, 94, 0.2) !important;
}

/* Termo - cores mais chamativas */
.awfc2-term {
  color: #1e40af !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 12px rgba(37, 99, 235, 0.3),
               0 0 40px rgba(59, 130, 246, 0.2) !important;
  letter-spacing: -0.5px !important;
}

[data-theme="dark"] .awfc2-term {
  color: #60a5fa !important;
}

/* Tradução - cores vibrantes */
.awfc2-translation {
  background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 900 !important;
  filter: drop-shadow(0 2px 8px rgba(16, 185, 129, 0.3)) !important;
  letter-spacing: -0.3px !important;
}

[data-theme="dark"] .awfc2-translation {
  background: linear-gradient(135deg, #34d399 0%, #6ee7b7 50%, #a7f3d0 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* List boxes - cores sólidas chamativas */
.awfc2-listbox {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
  border: 3px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08),
              0 2px 8px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[data-theme="dark"] .awfc2-listbox {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  border-color: #475569 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
              0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.awfc2-listbox:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.25),
              0 4px 16px rgba(37, 99, 235, 0.15) !important;
  transform: translateY(-4px) scale(1.02) !important;
}

[data-theme="dark"] .awfc2-listbox:hover {
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.4),
              0 4px 16px rgba(37, 99, 235, 0.3) !important;
}

/* Botões Abrir e Excluir - estilizados */
.awfc2-iconbtn {
  padding: var(--space-3) var(--space-5) !important;
  border-radius: var(--radius-xl) !important;
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  min-width: 100px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-2) !important;
}

/* Botão Abrir - azul vibrante */
.awfc2-iconbtn:not(.danger) {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.awfc2-iconbtn:not(.danger):hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4) !important;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
}

.awfc2-iconbtn:not(.danger):active {
  transform: translateY(0) scale(1.02) !important;
}

/* Botão Excluir - vermelho vibrante */
.awfc2-iconbtn.danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

.awfc2-iconbtn.danger:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4) !important;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
}

.awfc2-iconbtn.danger:active {
  transform: translateY(0) scale(1.02) !important;
}

/* Progress meter - mais chamativo */
.awfc2-meterbar {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  border: 2px solid #cbd5e1 !important;
  height: 14px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="dark"] .awfc2-meterbar {
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
  border-color: #475569 !important;
}

.awfc2-meterfill {
  background: linear-gradient(90deg, 
    #10b981 0%, 
    #34d399 25%, 
    #6ee7b7 50%, 
    #34d399 75%, 
    #10b981 100%) !important;
  background-size: 300% 100% !important;
  animation: progressShine 3s ease-in-out infinite !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.5),
              inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
}

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

/* Judge buttons - Wrong e Right melhorados */
.awfc2-judge {
  padding: var(--space-4) var(--space-8) !important;
  border-radius: var(--radius-2xl) !important;
  font-weight: 800 !important;
  font-size: 1.125rem !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-3) !important;
  min-width: 140px !important;
  position: relative !important;
  overflow: hidden !important;
}

.awfc2-judge::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.4) !important;
  transform: translate(-50%, -50%) !important;
  transition: width 0.6s, height 0.6s !important;
}

.awfc2-judge:active::before {
  width: 300px !important;
  height: 300px !important;
}

/* Wrong - Vermelho vibrante */
.awfc2-judge.wrong {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: white !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4),
              0 2px 8px rgba(220, 38, 38, 0.3) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.awfc2-judge.wrong:hover {
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 0 8px 28px rgba(239, 68, 68, 0.5),
              0 4px 12px rgba(220, 38, 38, 0.4) !important;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
}

.awfc2-judge.wrong:active {
  transform: translateY(-2px) scale(1.02) !important;
}

/* Right - Verde vibrante */
.awfc2-judge.right {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: white !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4),
              0 2px 8px rgba(5, 150, 105, 0.3) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.awfc2-judge.right:hover {
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 0 8px 28px rgba(16, 185, 129, 0.5),
              0 4px 12px rgba(5, 150, 105, 0.4) !important;
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

.awfc2-judge.right:active {
  transform: translateY(-2px) scale(1.02) !important;
}

/* Adicionar ícones aos botões */
.awfc2-judge.wrong::after {
  content: '✗' !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
}

.awfc2-judge.right::after {
  content: '✓' !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
}

/* Cards gerais mais opacos */
.awfc2-card {
  background: var(--bg-elevated) !important;
  border: 2px solid var(--border-light) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="dark"] .awfc2-card {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* H1 mais chamativo */
.awfc2-h1 {
  background: linear-gradient(135deg, #2563eb 0%, #8b5cf6 50%, #ec4899 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: clamp(1.5rem, 4vw, 2rem) !important;
  font-weight: 900 !important;
  text-align: center !important;
  letter-spacing: -0.5px !important;
}

/* Metertext mais visível */
.awfc2-metertext {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
  text-align: center !important;
  margin-top: var(--space-2) !important;
}

div#aba-atualizacoes {
    display: flex;
    flex-direction: column;
}

/* =============================================
   FIM DAS CORREÇÕES
   ============================================= */


   .checkbox-container h3 {
    padding: 10px;
}