/* ================================================
   EXERCÍCIOS — Descomplica Marinha
   Layout compartilhado por todos os exercícios
   ================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: #f0f4fb; min-height: 100vh; color: #1f2937; }

/* ---- Topo ---- */
.page-topo {
  background: #0b5f93;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.link-voltar {
  color: #fff;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: color 0.2s;
}
.link-voltar:hover { color: #fff; }
.page-disciplina { font-size: 0.8rem; color: rgba(255,255,255,0.86); }

/* ---- Container ---- */
.ex-container {
  max-width: 980px;
  margin: 24px auto;
  padding: 0 16px 40px;
}

/* ---- Header ---- */
.ex-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #0b5f93;
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 16px;
}
.ex-titulo-bloco { display: flex; align-items: center; gap: 10px; }
.ex-titulo-texto { font-size: 1rem; font-weight: 700; color: #fff; }
.ex-badge-total { background: rgba(255,255,255,0.2); color: #fff; border-radius: 20px; padding: 2px 10px; font-size: 0.82rem; }

.ex-timer-wrap { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.ex-timer-label { font-size: 0.75rem; color: #888; white-space: nowrap; flex-shrink: 0; }
.ex-timer { font-size: 1.1rem; font-weight: 700; color: #0071bc; font-variant-numeric: tabular-nums; min-width: 58px; text-align: center; flex-shrink: 0; }
.ex-timer-btns { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; }
.ex-btn-ctrl { background: #D3DBE4; color: #0071bc;   border: 0.1px solid hsl(210, 1%, 71%); border-radius: 6px; padding: 0 7px; height: 32px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.74rem; cursor: pointer; transition: background 0.2s; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; }
.ex-btn-ctrl:hover { background: #c6d7f2; }

.btn-tema{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:0 10px;
  min-height:32px;
  height:32px;
  background:#D3DBE4;
  color:#0071bc;
  border: 0.1px solid hsl(210, 1%, 71%);
  border-radius:6px;
  box-shadow:none;
  font-family:inherit;
  font-size:0.78rem;
  font-weight:400;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
  flex-shrink: 0;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease;
}

.btn-tema:hover{
  background:#c6d7f2;
  color:#ffffff;
  border-color:#0071bc;
  box-shadow:0 0 0 3px rgba(0,113,188,.16);
  transform:translateY(-1px);
}

.btn-tema .tema-icone{
  display:inline-flex;
  align-items:center;
}

.btn-tema .tema-icone svg{
  width:0.95em;
  height:0.95em;
}

body.dark-mode .btn-tema{
  background:#015185;
  color:#ffffff;
  border-color:#013e66;
}

body.dark-mode .btn-tema:hover{
  background:#0b5d96;
  color:#ffffff;
  box-shadow:0 0 0 3px rgba(255,255,255,.12);
}

/* ---- Ícones circulares (Marcador / Reportar Erro) — barra de controles ---- */
.ex-icon-circle-btn {
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: 50%;
  background: #0071bc;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
}
.ex-icon-circle-btn:hover {
  background: #0056a0;
  transform: scale(1.06);
}
.ex-icon-circle-btn#exBtnFavorito.ativo {
  background: #f5a623 !important;
}
.ex-icon-circle-btn#exBtnFavorito.ativo:hover {
  background: #d98c0f !important;
}
.ex-icon-circle-btn.ex-icon-reportar:hover {
  background: #0056a0;
}

/* ---- Body ---- */
.ex-body { display: flex; gap: 16px; align-items: flex-start; }

/* ---- Painel lateral ---- */
.ex-painel {
  width: 230px;
  min-width: 230px;
  background: #D3DBE4;
  border-radius: 12px;
  border: 0.1px solid hsl(210, 1%, 71%);

  padding: 16px 16px 18px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,113,188,0.07);
}
.ex-painel.oculto { display: none; }
.ex-painel-titulo {
  font-weight: 700;
  color: #0071bc;
  font-size: 0.95rem;
  margin-bottom: 3px;
  text-align: center;
}
.ex-painel-count {
  font-size: 0.78rem;
  color: #888;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5ecf9;
  text-align: center;
}
.ex-painel-count strong { color: #0071bc; font-size: 1rem; }

/* Grid de navegação */
.ex-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
  gap: 6px;
  margin-bottom: 14px;
}

.ex-grid-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  width: 100%;
  transition: all 0.15s;
}

/* Caixa com borda — número dentro */
.ex-grid-box {
  width: 34px;
  height: 30px;
  border: 2px solid #d0dff0;
  border-radius: 6px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a2d4e;
  transition: all 0.15s;
}
.ex-grid-btn:hover .ex-grid-box { border-color: #0071bc; background: #eef4fd; }

/* Indicador (letra ou ?) abaixo da caixa */
.ex-grid-resp {
  font-size: 0.68rem;
  font-weight: 700;
  color: #aaa;
  line-height: 1;
}

/* ---- Estados do grid ---- */

/* Questão ativa (atual, sem validar) */
.ex-grid-btn.ativa .ex-grid-box {
  background: #1a2d4e;
  border-color: #1a2d4e;
  color: #fff;
  box-shadow: 0 2px 5px rgba(26,45,78,0.3);
}
.ex-grid-btn.ativa .ex-grid-resp { color: #f5c842; }

/* Respondida (com resposta, ainda não validada) */
.ex-grid-btn.respondida .ex-grid-box {
  border-color: #d4a017;
  color: #1a2d4e;
  background: #fff;
}
.ex-grid-btn.respondida .ex-grid-resp { color: #d4a017; }

/* Respondida + ativa */
.ex-grid-btn.respondida.ativa .ex-grid-box {
  background: #1a2d4e;
  border-color: #1a2d4e;
  color: #fff;
}
.ex-grid-btn.respondida.ativa .ex-grid-resp { color: #f5c842; }

/* Correta (validada como certa) — sobrescreve respondida */
.ex-grid-btn.correta .ex-grid-box {
  border-color: #27ae60 !important;
  background: #eafaf1 !important;
  color: #27ae60 !important;
}
.ex-grid-btn.correta .ex-grid-resp { color: #27ae60 !important; }

/* Correta + ativa */
.ex-grid-btn.correta.ativa .ex-grid-box {
  background: #27ae60 !important;
  border-color: #27ae60 !important;
  color: #fff !important;
}
.ex-grid-btn.correta.ativa .ex-grid-resp { color: #27ae60 !important; }

/* Incorreta (validada como errada) — sobrescreve respondida */
.ex-grid-btn.incorreta .ex-grid-box {
  border-color: #e74c3c !important;
  background: #fef0ef !important;
  color: #e74c3c !important;
}
.ex-grid-btn.incorreta .ex-grid-resp { color: #e74c3c !important; }

/* Incorreta + ativa */
.ex-grid-btn.incorreta.ativa .ex-grid-box {
  background: #e74c3c !important;
  border-color: #e74c3c !important;
  color: #fff !important;
}
.ex-grid-btn.incorreta.ativa .ex-grid-resp { color: #e74c3c !important; }

.ex-btn-gabarito {
  width: 100%;
  background: #1a2d4e;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ex-btn-gabarito:hover { background: #243d63; }

.ex-btn-reiniciar {
  width: 100%;
  background: transparent;
  color: #c0392b;
  border: 1px solid #e74c3c;
  border-radius: 8px;
  padding: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
}
.ex-btn-reiniciar:hover { background: #fef0ef; }


.ex-reportar-erro-textarea {
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #e0e7f0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  color: #1f2937;
  resize: vertical;
  box-sizing: border-box;
}
.ex-reportar-erro-textarea:focus { outline: none; border-color: #0071bc; }

.ex-reportar-erro-status {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #1e8e5a;
  min-height: 1.2em;
}

/* ---- Área da questão ---- */
.ex-questao-area { flex: 1; min-width: 0; }
.ex-topo-area { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.ex-ocultar-btn { background: #D3DBE4;   border: 0.1px solid hsl(210, 1%, 71%); color: #0071bc; border-radius: 6px; padding: 0 8px; height: 32px; font-size: 0.74rem; cursor: pointer; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; }
.ex-ocultar-btn:hover { background: #e5ecf9; }

.ex-questao-wrap { background: #D3DBE4;   border: 0.1px solid hsl(210, 1%, 71%); border-radius: 10px; padding: 22px 24px; margin-bottom: 14px; min-height: 200px; }
.ex-questao-num { color: #0071bc; font-weight: 700; font-size: 0.88rem; margin-bottom: 10px; }
.ex-questao-texto { font-size: 0.95rem; color: #1f2937; text-align: justify; text-indent: 30px; line-height: 1.7; margin-bottom: 18px; }
.ex-alternativas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

/* ---- Tesoura (eliminar alternativa) ---- */
.ex-alt-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.ex-tesoura-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1px solid #d0dff0;
  border-radius: 50%;
  background: #f5f8fd;
  color: #bbb;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-top: 0;
  align-self: center;
}
.ex-tesoura-btn:hover { border-color: #0071bc; color: #0071bc; background: #e5ecf9; }
.ex-tesoura-btn.restaurar { border-color: #0071bc; color: #0071bc; background: #e5ecf9; }

.ex-alt-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 2px solid #e0e7f0; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-size: 0.92rem; color: #1f2937; text-align: justify; line-height: 1.5; flex: 1; min-width: 0; background: #F8FAFC; }
.ex-alt-item.eliminada { opacity: 0.38; text-decoration: line-through; cursor: default; pointer-events: none; }
.ex-alt-item.eliminada .ex-alt-letra { color: #aaa; }
.ex-alt-item:not(.eliminada):hover { border-color: #0071bc; background: #e5ecf9; }
.ex-alt-item.selecionada { border-color: #0071bc; background: #c6d7f2; }
.ex-alt-item.correta { border-color: #27ae60; background: #e8f8f0; color: #155724; }
.ex-alt-item.incorreta { border-color: #e74c3c; background: #fdecea; color: #7b1f1f; }
.ex-alt-radio {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #9fb0c4;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  margin-right: 2px;
}
.ex-alt-item.selecionada .ex-alt-radio {
  border-color: #0071bc;
  background: #fff;
  box-shadow: inset 0 0 0 4px #0071bc;
}
.ex-alt-item.correta .ex-alt-radio {
  border-color: #27ae60;
  background: #eafaf1;
  box-shadow: inset 0 0 0 4px #27ae60;
}
.ex-alt-item.incorreta .ex-alt-radio {
  border-color: #e74c3c;
  background: #fef0ef;
  box-shadow: inset 0 0 0 4px #e74c3c;
}
.ex-alt-letra { font-weight: 700; color: #0071bc; flex-shrink: 0; width: 22px; }
.ex-alt-item.correta .ex-alt-letra { color: #27ae60; }
.ex-alt-item.incorreta .ex-alt-letra { color: #e74c3c; }

/* ---- Gabarito ---- */
.ex-gabarito-wrap { background: #e5ecf9; border-radius: 10px; padding: 18px 20px; margin-bottom: 14px; display: none; }
.ex-gabarito-titulo { font-weight: 700; color: #0071bc; font-size: 0.95rem; margin-bottom: 12px; }
.ex-gabarito-item { display: flex; gap: 10px; font-size: 0.88rem; padding: 6px 0; border-bottom: 1px solid #c6d7f2; color: #1f2937; flex-wrap: wrap; }
.ex-gabarito-item:last-child { border-bottom: none; }
.ex-gabarito-num { font-weight: 700; color: #0071bc; min-width: 90px; }
.ex-gabarito-resp { font-weight: 700; color: #27ae60; }

/* ---- Solução ---- */
.ex-solucao-btn-wrap { display: flex; justify-content: flex-end; margin-top: 18px; }
.ex-solucao-btn { background: #1f2937; color: #fff; border: none; border-radius: 7px; padding: 8px 18px; font-size: 0.85rem; cursor: pointer; transition: background 0.2s; }
.ex-solucao-btn:hover { background: #374151; }
.ex-solucao-painel { border: 1px solid #c6d7f2; border-radius: 10px; margin-top: 18px; overflow: hidden; }
.ex-solucao-label { background: #e5ecf9; color: #0071bc; font-size: 0.78rem; font-weight: 700; padding: 6px 16px; border-bottom: 1px solid #c6d7f2; letter-spacing: 0.03em; }
.ex-solucao-corpo { padding: 16px 20px; background: #fff; }
.ex-solucao-gabarito-linha { font-weight: 700; font-size: 0.95rem; color: #1f2937; margin-bottom: 14px; }
.ex-solucao-gabarito-letra { color: #27ae60; font-size: 1.05rem; }
.ex-solucao-analise-titulo { font-weight: 700; font-size: 0.88rem; color: #1f2937; margin-bottom: 12px; border-bottom: 1px solid #e5ecf9; padding-bottom: 6px; }
.ex-solucao-bloco {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 8px;
  border-left: 5px solid #0071bc;
  background: #ffffff;
  transition: all 0.3s;
}

.ex-solucao-bloco.correta {
  border-left-color: #27ae60;
  background: linear-gradient(135deg, #f0fdf4, #ffffff);
}

.ex-solucao-bloco.incorreta {
  border-left-color: #e74c3c;
  background: linear-gradient(135deg, #fef5f5, #ffffff);
}

.ex-solucao-bloco:hover {
  box-shadow: 0 4px 12px rgba(0, 113, 188, 0.1);
}

.ex-solucao-bloco-titulo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 0.88rem;
  color: #1f2937;
  margin-bottom: 8px;
}

.ex-solucao-letra {
  font-weight: 800;
  flex: 1;
}

.ex-solucao-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.ex-solucao-status.correta {
  background: #d5f4e6;
  color: #27ae60;
}

.ex-solucao-status.incorreta {
  background: #fadad5;
  color: #e74c3c;
}

.ex-solucao-bloco-texto {
  font-size: 0.88rem;
  color: #374151;
  text-align: justify;
  line-height: 1.65;
}
.ex-solucao-fonte { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e5ecf9; font-size: 0.82rem; color: #555; display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.ex-fonte-badge { background: #f0a500; color: #fff; border-radius: 5px; padding: 2px 9px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }

/* ---- Botões de ação da questão ---- */
.ex-acoes-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.ex-acoes-wrap > button {
  width: 100%;
  min-height: 42px;
  background: #edf3fb;
  color: #9fb0c4;
  border: 1px solid #c6d7f2;
  border-radius: 7px;
  padding: 9px 22px;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s;
}
.ex-acoes-wrap > button:hover { background: #e6eef8; }
.ex-acoes-wrap > button:disabled {
  background: #edf3fb;
  color: #9fb0c4;
  cursor: not-allowed;
}
.ex-acao-principal {
  background: #1a2d4e !important;
  color: #fff !important;
}
.ex-acao-principal:hover {
  background: #243d63 !important;
}
.ex-acao-perigo {
  background: #1a2d4e !important;
  color: #fff !important;
  border: none !important;
}
.ex-acao-perigo:hover {
  background: #243d63 !important;
}
.ex-acao-secundaria {
  background: #1a2d4e !important;
  color: #fff !important;
}

.ex-acao-secundaria:hover {
  background: #243d63 !important;
}

.ex-nav-btn:disabled {
  background: #B8C6D8 !important;
  color: #616870 !important;
  border: 1px solid #c6d7f2 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.ex-nav-btn:disabled:hover {
  background: #B8C6D8 !important;
}

/* Mostrar Solução bloqueado (antes de validar) */
.ex-solucao-btn--bloqueado {
  background: #edf3fb !important;
  color: #9fb0c4 !important;
  border-color: #c6d7f2 !important;
  cursor: not-allowed !important;
  opacity: 1;
}
.ex-solucao-btn--bloqueado:hover { background: #edf3fb !important; }

/* =========================================================
   MODO DARK
   Funcao: altera cores do exercicio quando body recebe .dark-mode.
========================================================= */
body.dark-mode{
  background:#2B2B2B;
  color:#f2f6fb;
}

body.dark-mode .page-topo{
  background:#0b466c;
}

body.dark-mode .link-voltar,
body.dark-mode .page-disciplina{
  color:#d5e7f5;
}

body.dark-mode .ex-container{
  color:#f2f6fb;
}

body.dark-mode .ex-header,
body.dark-mode .ex-painel,
body.dark-mode .ex-questao-wrap,
body.dark-mode .ex-gabarito-wrap,
body.dark-mode .ex-solucao-painel{
  background:#3F5668;
  color:#ffffff;
  border-color:#1f2c35;
}

body.dark-mode .ex-header{
  box-shadow:none;
}

body.dark-mode .ex-titulo-texto,
body.dark-mode .ex-painel-titulo,
body.dark-mode .ex-questao-num,
body.dark-mode .ex-gabarito-titulo,
body.dark-mode .ex-solucao-label,
body.dark-mode .ex-solucao-gabarito-linha,
body.dark-mode .ex-solucao-analise-titulo,
body.dark-mode .ex-solucao-bloco-titulo{
  color:#ffffff;
}

body.dark-mode .ex-badge-total{
  background:rgba(255,255,255,.16);
  color:#ffffff;
}

body.dark-mode .ex-timer-label,
body.dark-mode .ex-timer,
body.dark-mode .ex-painel-count,
body.dark-mode .ex-gabarito-item,
body.dark-mode .ex-solucao-bloco-texto,
body.dark-mode .ex-solucao-fonte,
body.dark-mode .ex-questao-texto,
body.dark-mode .ex-meta-pill,
body.dark-mode .ex-grid-resp{
  color:#ffffff;
}

body.dark-mode .ex-timer{
  color:#8fc7ff;
}

body.dark-mode .ex-solucao-bloco {
  background: #3a3a3a;
  border-left-color: #0071bc;
}

body.dark-mode .ex-solucao-bloco.correta {
  background: #2a3a2a;
  border-left-color: #27ae60;
}

body.dark-mode .ex-solucao-bloco.incorreta {
  background: #3a2a2a;
  border-left-color: #e74c3c;
}

body.dark-mode .ex-solucao-bloco-titulo {
  color: #ffffff;
}

body.dark-mode .ex-solucao-status.correta {
  background: rgba(39, 174, 96, 0.2);
  color: #27ae60;
}

body.dark-mode .ex-solucao-status.incorreta {
  background: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
}

body.dark-mode .ex-btn-ctrl,
body.dark-mode .ex-ocultar-btn{
  background:#3F5668;
  color:#ffffff;
  border-color:#1f2c35;
  box-shadow:0 2px 0 rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
}

body.dark-mode .ex-btn-ctrl:hover,
body.dark-mode .ex-ocultar-btn:hover{
  background:#4a667a;
  border-color:#ffffff;
  box-shadow:0 10px 18px rgba(0,0,0,.30);
}

body.dark-mode .ex-grid-box{
  background:#2f3f4b;
  border-color:#5f7386;
  color:#ffffff;
}

body.dark-mode .ex-grid-btn:hover .ex-grid-box{
  background:#4a667a;
  border-color:#ffffff;
}

body.dark-mode .ex-grid-btn.ativa .ex-grid-box{
  background:#0d2b47;
  border-color:#0d2b47;
  color:#ffffff;
}

body.dark-mode .ex-grid-btn.respondida .ex-grid-box{
  background:#3f5668;
  color:#ffffff;
  border-color:#8ea6ba;
}

body.dark-mode .ex-grid-btn.correta .ex-grid-box{
  background:#1e8449 !important;
  border-color:#1e8449 !important;
  color:#ffffff !important;
}

body.dark-mode .ex-grid-btn.incorreta .ex-grid-box{
  background:#c0392b !important;
  border-color:#c0392b !important;
  color:#ffffff !important;
}

body.dark-mode .ex-grid-btn.ativa .ex-grid-resp,
body.dark-mode .ex-grid-btn.respondida .ex-grid-resp{
  color:#f0c44a;
}

body.dark-mode .ex-grid-btn.correta .ex-grid-resp{
  color:#22c55e !important;
}

body.dark-mode .ex-grid-btn.incorreta .ex-grid-resp{
  color:#ff7b73 !important;
}

body.dark-mode .ex-alt-item{
  background:#4a667a;
  color:#ffffff;
  border-color:#1f2c35;
}

body.dark-mode .ex-alt-radio{
  border-color:#d5e7f5;
  background:#2f3f4b;
}

body.dark-mode .ex-alt-item:hover{
  background:#56758b;
  border-color:#ffffff;
}

body.dark-mode .ex-alt-item.selecionada{
  background:#c6d7f2;
  color:#0d2340;
  border-color:#0d2340;
}

body.dark-mode .ex-alt-item.selecionada .ex-alt-radio{
  border-color:#0b5d96;
  box-shadow: inset 0 0 0 4px #0b5d96;
  background:#eaf2ff;
}

body.dark-mode .ex-alt-item.correta{
  background:#dff6e9;
  color:#0d2340;
  border-color:#1e8449;
}

body.dark-mode .ex-alt-item.correta .ex-alt-radio{
  border-color:#1e8449;
  background:#eafaf1;
  box-shadow: inset 0 0 0 4px #1e8449;
}

body.dark-mode .ex-alt-item.incorreta{
  background:#f8d7da;
  color:#0d2340;
  border-color:#c0392b;
}

body.dark-mode .ex-alt-item.incorreta .ex-alt-radio{
  border-color:#c0392b;
  background:#fef0ef;
  box-shadow: inset 0 0 0 4px #c0392b;
}

body.dark-mode .ex-alt-letra{
  color:#ffffff;
}

body.dark-mode .ex-alt-item.correta .ex-alt-letra{
  color:#1e8449;
}

body.dark-mode .ex-alt-item.incorreta .ex-alt-letra{
  color:#c0392b;
}

body.dark-mode .ex-tesoura-btn{
  background:#3F5668;
  color:#ffffff;
  border-color:#1f2c35;
}

body.dark-mode .ex-tesoura-btn:hover,
body.dark-mode .ex-tesoura-btn.restaurar{
  background:#4a667a;
  color:#ffffff;
  border-color:#ffffff;
}

body.dark-mode .ex-solucao-btn{
  background:#0b5d96;
  color:#ffffff;
  border-color:#013e66;
}

body.dark-mode .ex-solucao-btn:hover{
  background:#0f6aa8;
}

body.dark-mode .ex-solucao-btn--bloqueado{
  background:#2f3f4b !important;
  color:#ffffff !important;
  border-color:#1f2c35 !important;
}

body.dark-mode .ex-solucao-btn--bloqueado:hover{
  background:#2f3f4b !important;
}

body.dark-mode .ex-validar-btn,
body.dark-mode .ex-btn-gabarito{
  background:#015185;
  color:#ffffff;
  border-color:#013e66;
}

body.dark-mode .ex-validar-btn:hover,
body.dark-mode .ex-btn-gabarito:hover{
  background:#0b5d96;
}

body.dark-mode .ex-btn-reiniciar{
  background:transparent;
  color:#ff7b73;
  border-color:#ff7b73;
}

body.dark-mode .ex-btn-reiniciar:hover{
  background:rgba(255,123,115,.12);
}

body.dark-mode .ex-resultado-resumo > div{
  background:#3F5668;
  border-color:#1f2c35;
}

body.dark-mode .ex-resultado-resumo strong{
  color:#8fc7ff;
}

body.dark-mode .ex-resultado-resumo span,
body.dark-mode .ex-gabarito-num,
body.dark-mode .ex-gabarito-resp,
body.dark-mode .ex-gabarito-item{
  color:#ffffff;
}

body.dark-mode .ex-fv2--ok{
  background:#1e8449;
  border-color:#17683a;
}

body.dark-mode .ex-fv2--erro{
  background:#c0392b;
  border-color:#922b21;
}

body.dark-mode .ex-fv2-status,
body.dark-mode .ex-fv2-gabarito,
body.dark-mode .ex-fv2-letra{
  color:#ffffff;
}


body.dark-mode .ex-meta-pill{
  background:#2f3f4b;
  color:#ffffff;
  border-color:#1f2c35;
}

body.dark-mode .ex-meta-pill--nivel{
  background:#6b4f16;
  color:#fff2c2;
  border-color:#9a6a00;
}

/* Botao Modo Dark - base desktop */
.dark-toggle-wrap{
  width:100%;
  display:flex;
  justify-content:flex-end;
  margin:0 0 6px;
}

.dark-toggle{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:auto;
  padding:4px 8px;
  background:rgba(255,255,255,.94);
  color:#0b1f33;
  border:1px solid rgba(11,31,51,.25);
  border-radius:999px;
  box-shadow:0 2px 6px rgba(2,6,23,.12);
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:1;
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .15s ease;
}

.dark-toggle:hover{
  background:#EF8721;
  color:#033550;
  border-color:#0b1f33;
  box-shadow:0 0 0 3px rgba(239,135,33,.28);
  transform:translateY(-1px);
}

.dark-toggle input{
  width:13px;
  height:13px;
  margin:0;
  accent-color:#0b5f93;
}

body.dark-mode .dark-toggle{
  background:#3F5668;
  color:#ffffff;
  border-color:#1f2c35;
}

body.dark-mode .dark-toggle:hover{
  background:#4a667a;
  color:#ffffff;
  box-shadow:0 0 0 3px rgba(255,255,255,.16);
}

body.dark-mode .dark-toggle input{
  accent-color:#8fc7ff;
}

/* ============================================================
   PADRAO APROVADO - CONTROLES DO EXERCICIO
   Serve para todas as paginas que carregam css/exercicio-layout.css
   ============================================================ */
.ex-acoes-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  gap: 10px;
}

.ex-validar-btn,
.ex-solucao-btn,
.ex-btn-gabarito {
  min-height: 38px;
  border-radius: 8px;
  font-weight: 800;
}

.ex-validar-btn {
  padding: 10px 24px;
  background: #edf3fb;
  color: #9fb0c4;
  box-shadow: 0 8px 16px rgba(0, 113, 188, 0.16);
  width: 100%;
}

.ex-validar-btn:hover {
  background: #d9e3f1;
}

.ex-estado-btn {
  min-height: 38px;
  border-radius: 8px;
  border: none;
  padding: 10px 18px;
  font-weight: 800;
  width: 100%;
  cursor: pointer;
}

button.ex-validar-btn--ativo {
  background: #1a2d4e !important;
  color: #fff !important;
  border: 1px solid #12233f !important;
}

button.ex-validar-btn--bloqueado {
  background: #edf3fb !important;
  color: #7d8ca2 !important;
  border: 1px solid #c6d7f2 !important;
  box-shadow: none !important;
}

button.ex-validar-btn--bloqueado:hover {
  background: #edf3fb !important;
}

button.ex-estado-btn--ativo {
  background: #1a2d4e !important;
  color: #fff !important;
  border: 1px solid #12233f !important;
}

button.ex-estado-btn--ok {
  background: #19a84a !important;
  color: #fff !important;
  border: 1px solid #15943f !important;
}

button.ex-estado-btn--erro {
  background: #e02828 !important;
  color: #fff !important;
  border: 1px solid #c61f1f !important;
}

button.ex-estado-btn--bloqueado {
  background: #B8C6D8 !important;
  color: #616870 !important;
  border: 1px solid #c6d7f2 !important;
}

button.ex-estado-btn--ok:disabled,
button.ex-estado-btn--erro:disabled {
  opacity: 1;
  cursor: default;
}

.ex-solucao-btn {
  padding: 10px 20px;
  background: #1a2d4e !important;
  color: #fff !important;
  border: none !important;
  width: 100%;
}

.ex-solucao-btn:hover {
  background: #243d63 !important;
}

button.ex-solucao-btn--bloqueado {
  background: #B8C6D8 !important;
  color: #6e747b !important;
  border-color: #c6d7f2 !important;
  box-shadow: none !important;
}

button.ex-solucao-btn--bloqueado:hover {
  background: #edf3fb !important;
}

.ex-btn-gabarito {
  background: #1a2d4e;
  color: #fff;
  box-shadow: 0 8px 16px rgba(0, 113, 188, 0.14);
  margin-top: 2px;
}

.ex-btn-gabarito:hover {
  background: #243d63;
}

.ex-btn-reiniciar {
  background: #edf3fb;
  color: #7d8ca2;
  margin-top: 8px;
}


.ex-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 12px;
}

.ex-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e8f3ff;
  color: #0064a7;
  border: 1px solid #b8d9f4;
  font-size: 0.76rem;
  font-weight: 800;
}

.ex-meta-pill--nivel {
  background: #fff8e6;
  color: #9a6a00;
  border-color: #f2d58b;
}

.ex-resultado-resumo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.ex-resultado-resumo > div {
  background: #ffffff;
  border: 1px solid #c6d7f2;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}

.ex-resultado-resumo strong {
  display: block;
  color: #0071bc;
  font-size: 1rem;
  line-height: 1.1;
}

.ex-resultado-resumo span {
  display: block;
  margin-top: 4px;
  color: #52657a;
  font-size: 0.74rem;
  font-weight: 700;
}

.ex-gabarito-sua.ok { color: #1e8449; }
.ex-gabarito-sua.erro { color: #c0392b; }
.ex-gabarito-sua.em-branco { color: #8a98a8; }

/* ---- Feedback inline (novo modelo) ---- */
.ex-fv2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.88rem;
  flex-wrap: wrap;
  min-height: 48px;
  justify-content: space-between;
}
.ex-fv2--ok  { background: #19a84a; border: 1px solid #14853b; }
.ex-fv2--erro { background: #e02828; border: 1px solid #b51f1f; }

.ex-fv2-status {
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
}

.ex-fv2-gabarito {
  color: rgba(255,255,255,0.95);
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ex-fv2-letra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}


footer { text-align: center; padding: 20px; color: #888; font-size: 0.8rem; }

/* ============================================================
   MOBILE — max-width: 680px
   ============================================================ */
@media (max-width: 680px) {

  /* Topo */
  .page-topo { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 14px; }
  .page-disciplina { font-size: 0.75rem; }

  /* Container */
  .ex-container { width: 100%; max-width: 100%; margin: 12px auto; padding: 0 10px 24px; }

  /* Header */
  .ex-header { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
  .ex-titulo-bloco { min-width: 0; flex-wrap: wrap; }
  .ex-titulo-texto { font-size: 0.88rem; }
  .ex-timer-wrap { width: 100%; min-width: 0; justify-content: flex-start; flex-wrap: wrap; }
  .ex-timer-btns { width: 100%; min-width: 0; flex-wrap: wrap; }
  .ex-timer-btns .ex-btn-ctrl { flex: 1 1 auto; }
  .ex-timer { font-size: 1.15rem; min-width: 58px; }
  .ex-btn-ctrl { padding: 5px 8px; font-size: 0.75rem; }

  /* Body — painel acima da questão */
  .ex-body { flex-direction: column; width: 100%; min-width: 0; }
  .ex-painel { max-width: 100%; min-width: 0; width: 100%; }
  .ex-questao-area,
  .ex-topo-area,
  .ex-dificuldade-wrapper { width: 100%; max-width: 100%; min-width: 0; }
  .ex-dificuldade-wrapper { align-items: stretch; }
  .ex-filtro-grupo { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .ex-dificuldade-wrapper .ex-favorito-btn,
  .ex-dificuldade-wrapper .ex-favorito-btn.ex-reportar-erro-inline { margin-left: 0; }

  /* Grid de questões — mais colunas em linha */
  .ex-grid { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .ex-painel { width: 100%; min-width: 0; }
  .ex-grid-box { width: 100%; height: 30px; font-size: 0.76rem; }

  /* Questão */
  .ex-questao-wrap { padding: 14px 14px; }
  .ex-questao-texto { font-size: 0.88rem; text-indent: 16px; }
  .ex-alt-item { font-size: 0.85rem; padding: 9px 10px; }
  .ex-tesoura-btn { width: 30px; height: 30px; font-size: 0.92rem; }

  /* Botões de ação */
  .ex-acoes-wrap { grid-template-columns: 1fr; gap: 8px; }
  .ex-validar-btn, .ex-solucao-btn { width: 100%; text-align: center; }

  /* Navegação */
  .ex-navegacao { gap: 8px; }
  .ex-nav-btn { padding: 9px 10px; font-size: 0.82rem; }

  /* Gabarito */
  .ex-gabarito-item { flex-direction: column; gap: 2px; }
  .ex-resultado-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Solução */
  .ex-solucao-corpo { padding: 12px 14px; }
  .ex-solucao-bloco-texto { font-size: 0.82rem; }
}

/* ============================================================
   BOTÕES DE AÇÃO EM 2 COLUNAS — celular e tablet (até 900px)
   Mantém a mesma ordem do DOM (igual à tela grande): Mostrar
   solução / Validar Resposta — Anterior / Próxima — Finalizar /
   Reiniciar. Não usar `order` aqui — Anterior e Próxima
   compartilham a classe .ex-acao-secundaria, então dar `order`
   a ela sozinha embaralha as duas.
   ============================================================ */
@media (max-width: 900px) {
  .ex-acoes-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .ex-solucao-btn { width: 100%; text-align: center; }
}

/* ============================================================
   MOBILE PEQUENO — max-width: 400px
   ============================================================ */
@media (max-width: 400px) {
  .ex-timer-btns { flex-wrap: wrap; gap: 4px; }
  .ex-btn-ctrl { padding: 4px 7px; font-size: 0.72rem; }
  .ex-grid { grid-template-columns: repeat(5, 1fr); }
  .ex-titulo-texto { font-size: 0.8rem; }
  .ex-filtro-grupo { flex-basis: 100%; }
  .ex-dificuldade-wrapper .ex-favorito-btn { flex: 1 1 calc(50% - 4px); }
  .ex-questao-wrap { padding: 12px 10px; }
  .ex-alt-wrapper { gap: 6px; }
}
/* Padrao de fonte dos botoes superiores do exercicio: Segoe UI Regular */
.ex-topo-area button,
.ex-timer-wrap button,
.ex-btn-ctrl,
.btn-tema,
.ex-ocultar-btn {
  font-family: 'Segoe UI', Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  line-height: 1.1;
}

/* ============================================================
   FILTRO DE DIFICULDADE E ORDEM
   ============================================================ */
.ex-dificuldade-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 20px;
  padding: 10px 12px;
  background: #D3DBE4;
  border: 0.1px solid hsl(210, 1%, 71%);
  border-radius: 8px;
  flex-wrap: wrap;
}

.ex-dificuldade-wrapper .ex-favorito-btn {
  align-self: flex-end;
  width: auto;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  gap: 6px;
  margin-left: 8px;
  flex-shrink: 0;
}

.ex-dificuldade-wrapper .ex-favorito-btn.ex-reportar-erro-inline {
  margin-left: 4px;
}

.ex-filtro-grupo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 100px;
  min-width: 90px;
}

.ex-dificuldade-wrapper label {
  font-weight: 600;
  color: #1f2937;
  font-size: 0.9rem;
}

.ex-dificuldade-wrapper select {
  padding: 8px 8px;
  border: 0.1px solid hsl(210, 1%, 71%);
  border-radius: 6px;
  background: #ffffff;
  color: #1f2937;
  font-size: 0.82rem;
  cursor: pointer;
  min-width: 96px;
  width: 100%;
  transition: all 0.2s;
  font-weight: 500;
}

.ex-dificuldade-wrapper select:hover {
  background: #e5ecf9;
}

.ex-dificuldade-wrapper select:focus {
  outline: none;
  border-color: #0056a0;
  box-shadow: 0 0 0 3px rgba(0, 113, 188, 0.1);
}

/* ---- Destaque da pergunta ---- */
.ex-questao-texto {
  background: #EAF2F8;
  border-left: 2px solid #0071bc;
  padding: 14px;
  border-radius: 8px;
  margin-left: 1px;
  margin-right: 1px;
  margin-bottom: 18px;
  padding-left: 20px;
  font-weight: 600;
  font-size: 0.9rem;
}

/* ============================================================
   MODAL DE DESEMPENHO
   ============================================================ */
.overlay-desempenho {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.overlay-desempenho.ativo {
  display: block;
}

.modal-desempenho {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
  z-index: 1000;
  width: 90%;
  max-width: 560px;
  overflow: hidden;
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-desempenho.ativo {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.modal-desempenho-header {
  background: linear-gradient(135deg, #1a3a52 0%, #0d1f2d 100%);
  padding: 18px 24px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
  position: relative;
  overflow: hidden;
}

.modal-desempenho-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 113, 188, 0.15), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 113, 188, 0.1), transparent 50%);
  pointer-events: none;
}

.modal-header-content {
  text-align: center;
  position: relative;
  z-index: 1;
}

.modal-header-logo {
  font-size: 2.5rem;
  margin-bottom: 8px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.modal-header-titulo {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.5px;
}

.modal-header-subtitulo {
  font-size: 0.88rem;
  color: #ffa500;
  margin: 6px 0 0 0;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.modal-desempenho-body {
  padding: 28px 32px 24px;
  text-align: center;
  background: #ffffff;
}

.modal-desempenho-body h2 {
  margin: 0 0 14px;
  font-size: 1.4rem;
  color: #1f2937;
  font-weight: 900;
  letter-spacing: 0.3px;
}

#modalTextoDesempenho {
  margin: 0 0 32px;
  font-size: 1.06rem;
  line-height: 1.75;
  color: #4b5563;
  white-space: pre-wrap;
  font-weight: 500;
}

.modal-desempenho-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0;
}

.stat-item {
  background: linear-gradient(135deg, #f9fafb, #f5f8fd);
  padding: 18px 14px;
  border-radius: 10px;
  border-left: 4px solid #0071bc;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(0, 113, 188, 0.08), transparent);
  border-radius: 0 0 0 100%;
  pointer-events: none;
}

.stat-item:hover {
  transform: translateY(-4px);
  background: linear-gradient(135deg, #f0f4fb, #e5ecf9);
  box-shadow: 0 8px 20px rgba(0, 113, 188, 0.12);
}

.stat-item strong {
  display: block;
  font-size: 1.9rem;
  color: #0071bc;
  margin-bottom: 6px;
  font-weight: 800;
  position: relative;
  z-index: 1;
}

.stat-item span {
  display: block;
  font-size: 0.88rem;
  color: #6b7280;
  font-weight: 600;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 1;
}

.modal-desempenho-footer {
  padding: 20px 32px;
  background: #ffffff;
  display: flex;
  justify-content: center;
  border-top: 1px solid #e5ecf9;
}


.btn-ok {
  padding: 12px 48px;
  background: linear-gradient(135deg, #0071bc, #0056a0);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 6px 20px rgba(0, 113, 188, 0.3);
  letter-spacing: 0.5px;
}

.btn-ok:hover {
  background: linear-gradient(135deg, #0056a0, #003d7a);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 113, 188, 0.4);
}

.btn-ok:active {
  transform: translateY(-1px);
}

/* ============================================================
   COMPARATIVO COM MÉDIA
   ============================================================ */
.modal-comparativo {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px solid #e5ecf9;
}

.comparativo-titulo {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 20px;
  text-align: center;
}

.comparativo-barras {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 18px;
}

.barra-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.barra-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #4b5563;
  text-align: left;
}

.barra-container {
  position: relative;
  width: 100%;
  height: 32px;
  background: #f0f4fb;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #dce8f5;
}

.barra-preenchida {
  height: 100%;
  background: linear-gradient(90deg, #0071bc, #0056a0);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 12px;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 32px;
  color: #ffffff;
}

.barra-preenchida.barra-media {
  background: linear-gradient(90deg, #6b7280, #4b5563);
}

.barra-texto {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.comparativo-resultado {
  text-align: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, #f9fafb, #f5f8fd);
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.6;
}

/* ============================================================
   PONTOS E BADGES
   ============================================================ */
.pontos-badges-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #e5ecf9;
}

.modal-pontos {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffa500;
  margin: 0 0 12px;
  animation: slideDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-badges {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fff3cd, #fffacd);
  border-radius: 8px;
  border-left: 4px solid #ffa500;
  animation: slideDown 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* Simetria de cores: filtros e números usam o mesmo fundo das alternativas. */
body:not(.dark-mode) .ex-dificuldade-wrapper select,
body:not(.dark-mode) .ex-grid-btn:not(.ativa):not(.correta):not(.incorreta) .ex-grid-box {
  background-color: #f8fafc;
}

/* Contraste final do tema escuro: elimina superfícies claras residuais. */
body.dark-mode .ex-dificuldade-wrapper {
  background: #344b5c;
  border-color: #1f2c35;
}

body.dark-mode .ex-dificuldade-wrapper label {
  color: #f2f6fb;
}

body.dark-mode .ex-dificuldade-wrapper select {
  background: #2f3f4b;
  color: #f2f6fb;
  border-color: #5f7386;
  color-scheme: dark;
}

body.dark-mode .ex-dificuldade-wrapper select:hover,
body.dark-mode .ex-dificuldade-wrapper select:focus {
  background: #3f5668;
  border-color: #8fc7ff;
}

body.dark-mode .ex-questao-texto {
  background: #2f3f4b;
  color: #ffffff;
  border-color: #5f7386;
}

body.dark-mode .ex-acoes-wrap > button:disabled,
body.dark-mode .ex-estado-btn--bloqueado,
body.dark-mode .ex-solucao-btn--bloqueado,
body.dark-mode .ex-nav-btn:disabled {
  background: #2f3f4b !important;
  color: #aebfd0 !important;
  border-color: #5f7386 !important;
}

body.dark-mode .ex-acoes-wrap > button:disabled:hover,
body.dark-mode .ex-estado-btn--bloqueado:hover,
body.dark-mode .ex-solucao-btn--bloqueado:hover,
body.dark-mode .ex-nav-btn:disabled:hover {
  background: #2f3f4b !important;
}

/* ============================================================
   MODAL REINICIAR EXERCÍCIO — PREMIUM DESIGN
   ============================================================ */
.overlay-reiniciar {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1001;
  backdrop-filter: blur(2px);
}

.overlay-reiniciar.ativo {
  display: block;
}

.modal-reiniciar {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
  z-index: 1002;
  width: 90%;
  max-width: 480px;
  overflow: hidden;
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-reiniciar.ativo {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Header */
.modal-reiniciar-header {
  background: linear-gradient(135deg, #d63031 0%, #b82e2e 100%);
  padding: 28px 24px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.modal-reiniciar-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08), transparent 50%);
  pointer-events: none;
}

.modal-reiniciar-icon {
  font-size: 3.2rem;
  margin-bottom: 12px;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
  position: relative;
  z-index: 1;
  line-height: 1;
}

.modal-reiniciar-title {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  margin: 0;
  position: relative;
  z-index: 1;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Body */
.modal-reiniciar-body {
  padding: 24px 32px;
  background: #ffffff;
}

.modal-reiniciar-content-title {
  font-size: 1.4rem;
  color: #1f2937;
  margin: 0 0 12px 0;
  font-weight: 900;
  letter-spacing: 0.3px;
  line-height: 1.3;
}

.modal-reiniciar-separator {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, #ff6b6b 25%, #ff6b6b 75%, transparent 100%);
  border-radius: 2px;
  margin-bottom: 20px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08) inset,
    0 -1px 2px rgba(255, 255, 255, 0.5) inset,
    0 1px 3px rgba(255, 107, 107, 0.25);
}

.modal-reiniciar-content-text {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #4b5563;
  margin: 0;
  font-weight: 500;
}

/* Footer */
.modal-reiniciar-footer {
  padding: 20px 32px;
  background: #ffffff;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  border-top: 1px solid #e5ecf9;
}

.btn-reiniciar-cancelar {
  padding: 10px 32px;
  background: #ffffff;
  color: #0071bc;
  border: 2px solid #0071bc;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 0.5px;
}

.btn-reiniciar-cancelar:hover {
  background: #e5ecf9;
  transform: translateY(-2px);
}

.btn-reiniciar-confirmar {
  padding: 10px 32px;
  background: linear-gradient(135deg, #d63031, #b82e2e);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 6px 20px rgba(214, 48, 49, 0.3);
  letter-spacing: 0.5px;
}

.btn-reiniciar-confirmar:hover {
  background: linear-gradient(135deg, #b82e2e, #9a2424);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(214, 48, 49, 0.4);
}

.btn-reiniciar-confirmar:active {
  transform: translateY(-1px);
}

/* Mobile responsive */
@media (max-width: 600px) {
  .modal-reiniciar {
    width: 96%;
    max-width: none;
  }

  .modal-reiniciar-icon {
    font-size: 2.8rem;
    margin-bottom: 10px;
  }

  .modal-reiniciar-title {
    font-size: 1.5rem;
    letter-spacing: 1px;
  }

  .modal-reiniciar-body {
    padding: 20px 24px;
  }

  .modal-reiniciar-content-title {
    font-size: 1.15rem;
    margin-bottom: 10px;
  }

  .modal-reiniciar-separator {
    margin-bottom: 16px;
    height: 3px;
  }

  .modal-reiniciar-content-text {
    font-size: 0.9rem;
  }

  .modal-reiniciar-footer {
    padding: 16px 20px;
    gap: 10px;
  }

  .btn-reiniciar-cancelar,
  .btn-reiniciar-confirmar {
    padding: 8px 20px;
    font-size: 0.9rem;
    flex: 1;
  }
}

/* ============================================================
   GABARITO — CARDS STACKED PREMIUM
   ============================================================ */
#exGabaritoLista {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.gabarito-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  border-left: 5px solid #0071bc;
  box-shadow: 0 2px 8px rgba(0, 113, 188, 0.1);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gabarito-card:hover {
  box-shadow: 0 6px 20px rgba(0, 113, 188, 0.15);
  transform: translateY(-2px);
}

.gabarito-card.correto {
  border-left-color: #27ae60;
  background: linear-gradient(135deg, #f0fdf4, #ffffff);
}

.gabarito-card.incorreto {
  border-left-color: #e74c3c;
  background: linear-gradient(135deg, #fef5f5, #ffffff);
}

.gabarito-card.neutro {
  border-left-color: #95a5a6;
  background: linear-gradient(135deg, #f9fafb, #ffffff);
}

.gabarito-card-header {
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #f9fafb, #f5f8fd);
  border-bottom: 1px solid #e5ecf9;
}

.gabarito-questao {
  font-size: 0.95rem;
  font-weight: 800;
  color: #1f2937;
  letter-spacing: 0.3px;
}

.gabarito-icone {
  font-size: 1.3rem;
  line-height: 1;
}

.gabarito-card-body {
  padding: 14px 16px;
}

.gabarito-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 0.92rem;
}

.gabarito-linha:not(:last-child) {
  margin-bottom: 4px;
}

.gabarito-label {
  font-weight: 600;
  color: #4b5563;
  flex: 1;
}

.gabarito-valor {
  font-weight: 700;
  color: #0071bc;
  font-family: 'Courier New', monospace;
  padding: 4px 8px;
  background: #e5ecf9;
  border-radius: 4px;
  min-width: 50px;
  text-align: center;
}

.gabarito-valor.respondida {
  color: #0071bc;
}

.gabarito-valor.vazia {
  color: #95a5a6;
  background: #f9fafb;
}

.gabarito-valor.correta {
  color: #27ae60;
  background: #d5f4e6;
}

.gabarito-card.correto .gabarito-valor.correta {
  color: #27ae60;
  background: #d5f4e6;
}

.gabarito-card.incorreto .gabarito-valor.correta {
  color: #27ae60;
  background: #d5f4e6;
}

/* Mobile Responsive */
@media (max-width: 600px) {
  #exGabaritoLista {
    gap: 12px;
    margin-top: 14px;
  }

  .gabarito-card-header {
    padding: 12px 14px;
  }

  .gabarito-questao {
    font-size: 0.9rem;
  }

  .gabarito-card-body {
    padding: 12px 14px;
  }

  .gabarito-linha {
    font-size: 0.88rem;
    flex-wrap: wrap;
    gap: 8px;
  }

  .gabarito-label {
    flex: 0 0 100%;
  }

  .gabarito-valor {
    font-size: 0.9rem;
    padding: 6px 10px;
  }
}

/* ============================================================
   BOTÃO FAVORITAR QUESTÃO — BOOKMARK PREMIUM
   ============================================================ */
.ex-favorito-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 14px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  line-height: 1;
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ex-favorito-btn {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ex-favorito-btn svg {
  width: 32px;
  height: 32px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.ex-favorito-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0071bc;
  transition: all 0.3s ease;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.ex-favorito-btn:hover svg {
  filter: drop-shadow(0 2px 6px rgba(0, 113, 188, 0.3));
  transform: scale(1.1);
}

.ex-favorito-btn.ativo .ex-favorito-label {
  color: #ffa500;
}

.ex-favorito-btn.ativo {
  animation: bookmark-flip 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ex-favorito-btn.ativo:hover svg {
  filter: drop-shadow(0 3px 8px rgba(255, 165, 0, 0.5));
  transform: scale(1.15);
}

@keyframes bookmark-flip {
  0% {
    transform: rotateY(0deg) scale(0.9);
  }
  50% {
    transform: rotateY(90deg) scale(1.05);
  }
  100% {
    transform: rotateY(0deg) scale(1);
  }
}

.ex-bookmark-outline {
  stroke: #0071bc;
  stroke-width: 1.5;
  fill: none;
  transition: opacity 0.4s ease;
}

.ex-bookmark-fill {
  fill: #ffa500;
  transition: opacity 0.4s ease;
  filter: drop-shadow(0 2px 4px rgba(255, 165, 0, 0.2));
}

/* Botão "Reportar Erro" — mesmo estilo do Marcador (ex-bookmark-icon), cor de alerta */
.ex-reportar-erro-inline .ex-favorito-label { color: #b45309; }
.ex-reportar-erro-inline:hover svg { transform: scale(1.1); }
.ex-reportar-erro-inline:hover .ex-favorito-label { color: #92400e; }

/* Dark mode */
body.dark-mode .ex-bookmark-outline {
  stroke: #8fc7ff;
}

body.dark-mode .ex-bookmark-fill {
  fill: #ffa500;
}

/* Mobile */
@media (max-width: 600px) {
  .ex-favorito-btn {
    padding: 8px 12px;
    gap: 6px;
  }

  .ex-favorito-btn svg {
    width: 28px;
    height: 28px;
  }

  .ex-favorito-label {
    font-size: 0.85rem;
  }

  .ex-favorito-btn:hover svg,
  .ex-favorito-btn.ativo:hover svg {
    transform: scale(1.15);
  }
}

/* Tablet: o painel lateral passa para cima da questão e os controles podem
   quebrar linha sem criar uma largura mínima maior que a tela. */
@media (max-width: 900px) {
  .ex-body {
    flex-direction: column;
    width: 100%;
    min-width: 0;
  }

  .ex-painel,
  .ex-questao-area,
  .ex-topo-area {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .ex-timer-wrap,
  .ex-timer-btns {
    min-width: 0;
    flex-wrap: wrap;
  }
}

/* Ritmo e alinhamento dos blocos superiores. */
.ex-container {
  margin-top: 12px;
}

.ex-header {
  margin-bottom: 12px;
}

.ex-body {
  gap: 12px;
}

.ex-dificuldade-wrapper,
.ex-topo-area {
  margin-bottom: 12px;
}

.ex-topo-area,
.ex-timer-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.ex-timer-wrap {
  flex-wrap: wrap;
}

.ex-timer-btns {
  flex: 1 1 360px;
  min-width: 0;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

/* Ajustes responsivos finais: mantidos após os estilos de filtros/favoritos
   para que a ordem da cascata não reative larguras mínimas no celular. */
@media (max-width: 680px) {
  .ex-dificuldade-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-items: stretch;
  }

  .ex-filtro-grupo {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  .ex-dificuldade-wrapper select {
    min-width: 0;
  }

  .ex-dificuldade-wrapper .ex-favorito-btn,
  .ex-dificuldade-wrapper .ex-favorito-btn.ex-reportar-erro-inline {
    margin-left: 0;
  }
}

@media (max-width: 400px) {
  .ex-filtro-grupo {
    flex-basis: 100%;
  }

  .ex-dificuldade-wrapper .ex-favorito-btn {
    flex: 1 1 calc(50% - 4px);
  }
}