/* Módulo Practice da página Praticar. */

#container-z9x2 {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 48px;
    }
    .coluna-k4j1 {
        flex: 1 1 300px;
        display: flex;
        align-items: center;
        padding: 20px 10px 0 10px;
        border-radius: 8px;
    }
    .coluna-m8p5 {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        border-radius: 8px;
        white-space: nowrap;
    }
    @media (max-width: 820px) {
        .coluna-m8p5 {
            flex: 1 1 100%;
            text-align: center;
            justify-content: center;
        }

        #titulo_ch,
#subtitulo_ch,
.mh-etiquetas {
          text-align: center;
          justify-content: center;
        }

    }


.nuevo_conteiner.oculto {
    display: none !important;
}

.quiz-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 80%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 0px;
  flex-wrap: wrap;
}

/* O rodapé de recursos e o cartão usam a mesma coluna de leitura. */
.ep-practice-actions.quiz-footer {
  width: 80%;
  max-width: 960px;
  margin: 8px auto 0;
  padding: 0;
}

.footer-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  color: #555;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: 4px;
  transition: background 0.15s;
  white-space: nowrap;
}

.footer-btn.tema-escuro {
  color: #d6d6d6;
}

.footer-btn:hover {
  color: #292929;
}

.tema-escuro.footer-btn:hover {
  color: #ffffff;
}

.footer-btn i {
  flex-shrink: 0;
  font-size: 1.2rem;
}

/* quando a tela for pequena, tudo vai para coluna */
@media (max-width: 850px) {
  .quiz-footer {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-left,
.footer-right {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-left > div {
    flex-direction: column;
    align-items: flex-start;
    display: flex;
  }
}

@media (max-width: 820px) {
    .temas-container {
        justify-content: center !important;
    }
}


.rotulo_tema {
  background: rgb(200 200 200);
    padding: 1px 5px;
    color: #484848;
    font-size: 0.9rem;
    border-radius: 5px;
    border: 1px solid #bbb9b9;}

.rotulo_tema.tema-escuro {
    background: rgb(59 59 59);
    padding: 1px 5px;
    color: #fff;
    font-size: 0.9rem;
    border-radius: 5px;
    text-shadow: 1px 1px #000;
    border: 1px solid #525151;
}


.rotulo_an {
  background: #0061c4;
  padding: 1px 5px;
  color: #c2e9ff;
  font-size: 0.9rem;
  border-radius: 5px;
  border: 1px solid #0044af;
}

.rotulo_an.tema-escuro {
  background: #004993;
  color: #fff;
  text-shadow: 1px 1px #000;
  border: 1px solid #0061f8;
}

/* Ajustes para telas menores */
@media (max-width: 480px) {
  .separador-dot {
    display: none !important;
  }
  #subdosub {
    opacity: 0.6;
  }
  .mh-etiquetas {
    flex-direction: column; /* Empilha os itens */
  }
}

.pagination-circles-container {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px 0 10px 0;
    margin: 0 0 15px 0;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    scrollbar-width: thin;
    scrollbar-color: rgba(204, 204, 204, 0.4) transparent;
    margin-left: -15px;
    margin-right: -15px;
}
    
/* Firefox: Fica sólida ao passar o mouse */
.pagination-circles-container:hover {
    scrollbar-color: #777575 transparent;
}
/* Firefox Tema Escuro */
.tema-escuro .pagination-circles-container {
    scrollbar-color: rgba(85, 85, 85, 0.4) transparent;
}
.tema-escuro .pagination-circles-container:hover {
    scrollbar-color: #555 transparent;
}

/* Chrome, Edge, Safari */
.pagination-circles-container::-webkit-scrollbar { 
    height: 6px; 
}
.pagination-circles-container::-webkit-scrollbar-thumb { 
    background-color: rgba(204, 204, 204, 0.4); /* Tom transparente em estado normal */
    border-radius: 10px; 
}
.pagination-circles-container:hover::-webkit-scrollbar-thumb { 
    background-color: #ccc; /* Fica mais forte no hover */
}

/* Chrome/Safari Tema Escuro */
.tema-escuro .pagination-circles-container::-webkit-scrollbar-thumb { 
    background-color: rgba(85, 85, 85, 0.4); 
}
.tema-escuro .pagination-circles-container:hover::-webkit-scrollbar-thumb { 
    background-color: #555; 
}
    .pagination-circles-wrap {
        display: inline-flex;
        gap: 7px; 
        padding: 0 5px; 
        align-items: center;
    }
    
    /* Design base dos círculos */
    a.circle-page.pag-item {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 55px !important; 
        height: 55px !important; 
        border-radius: 50% !important;
        border: 1px solid #c8c8c8 !important;
        text-decoration: none !important;
        color: #666 !important;
        font-size: 1.2rem !important; 
        background-color: #fff !important;
        flex-shrink: 0 !important;
        transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important; 
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        font-weight: 700;
    }
    
    /* Efeito Hover Geral */
    a.circle-page.pag-item:hover { 
        background-color: #dbe7f6 !important; 
        z-index: 2 !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; 

            border-color: #007bff !important;
                color: #007bff !important;

    }


@media (max-width: 820px){


a.circle-page.pag-item {
  width: 44px !important;
  height: 44px !important;
  font-size: 1rem !important;
}

    .pagination-circles-wrap {
      gap: 5px;
    }

}

    
    /* ---------------------------------------------------
       ESTADOS NORMAIS (NÃO ATIVOS)
       --------------------------------------------------- */
    a.circle-page.pag-item.circle-correct { 
        background-color: #4CAF50 !important; 
        border-color: #4CAF50 !important; 
        color: #fff !important; 
    }
    a.circle-page.pag-item.circle-incorrect { 
        background-color: #F44336 !important; 
        border-color: #F44336 !important; 
        color: #fff !important; 
    }
    
    /* ---------------------------------------------------
       ESTADOS ATIVOS (A PÁGINA QUE O USUÁRIO ESTÁ VENDO)
       --------------------------------------------------- */
    
    /* 1. Ativa e Não Respondida (Azul) */
    a.circle-page.pag-item.circle-active {
        border-color: #007bff !important; 
        color: #007bff !important; 
        font-weight: bold !important;
        border-width: 2px !important;
        box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.2) !important; 
        z-index: 3 !important;
    }

    /* 2. Ativa e Correta (Verde com Anel) - Trava o texto em branco */
    a.circle-page.pag-item.circle-correct.circle-active {
        background-color: #4CAF50 !important;
        border-color: #2E7D32 !important; 
        color: #fff !important; 
        box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.3) !important; 
    }

    /* 3. Ativa e Incorreta (Vermelha com Anel) - Trava o texto em branco */
    a.circle-page.pag-item.circle-incorrect.circle-active {
        background-color: #F44336 !important;
        border-color: #C62828 !important; 
        color: #fff !important; 
        box-shadow: 0 0 0 4px rgba(244, 67, 54, 0.3) !important; 
    }

    /* ---------------------------------------------------
       ADAPTAÇÃO PARA TEMA ESCURO
       --------------------------------------------------- */
    .tema-escuro a.circle-page.pag-item { background-color: #1b1a1a !important; border-color: #333 !important; color: #ccc !important; }
    .tema-escuro a.circle-page.pag-item:hover { background-color: #2a2a2a !important; box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important; 
            border-color: #007bff !important;
                color: #007bff !important;}
    
    /* Cores Normais - Escuro */
    .tema-escuro a.circle-page.pag-item.circle-correct { background-color: #2e7d32 !important; border-color: #2e7d32 !important; color: #fff !important; }
    .tema-escuro a.circle-page.pag-item.circle-incorrect { background-color: #c62828 !important; border-color: #c62828 !important; color: #fff !important; }
    
    /* Ativos - Escuro */
    .tema-escuro a.circle-page.pag-item.circle-active { 
        border-color: #4dabf7 !important; 
        color: #4dabf7 !important; 
        box-shadow: 0 0 0 4px rgba(77, 171, 247, 0.2) !important;
    }
    .tema-escuro a.circle-page.pag-item.circle-correct.circle-active {
        border-color: #1b5e20 !important;
        color: #fff !important; /* Trava de segurança no dark mode */
        box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.4) !important;
    }
    .tema-escuro a.circle-page.pag-item.circle-incorrect.circle-active {
        border-color: #8e0000 !important;
        color: #fff !important; /* Trava de segurança no dark mode */
        box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.4) !important;
    }

.practicar-ferramentas-runtime { display: none !important; }
.practicar-carregando-questoes {
  position: fixed;
  inset: 0;
  z-index: 100000100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #f5f7fb;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: wait;
  transition: opacity .3s ease, visibility .3s ease;
}

.practicar-carregando-questoes[hidden] {
  display: none !important;
}

.practicar-carregando-questoes.ativo {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.practicar-carregando-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(255, 255, 255, .24);
  border-top-color: #4d91ff;
  border-radius: 50%;
  animation: practicar-girar-spinner .8s linear infinite;
}

@keyframes practicar-girar-spinner {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .practicar-carregando-spinner { animation-duration: 1.8s; }
}
#ajax-questoes {
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Espaço para a navegação fixa inferior não cobrir ações da questão. */
  padding-top: 76px;
  padding-bottom: 76px;
  box-sizing: border-box;
}
#ajax-questoes.praticar-seletor-sem-questoes {
  min-height: 0;
  display: none;
}
#ajax-questoes > .container-maior {
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
}

@media (max-width: 768px) {
  #ajax-questoes {
    min-height: calc(100vh - 112px);
    padding-top: 96px;
    padding-bottom: 96px;
  }
}
.questoes-container-wrapper .questao,
.questoes-container-wrapper .alternativa {
  border-radius: 20px;
}

.questoes-container-wrapper .alternativa {
  margin-block: 0;
}
.questao > .row-split,
.questao > .cod_aleat,
.questao > .responsive-img-wrapper,
.questao > #enunciado_pregunta,
.questao > form,
.questao > .contenedor,
.questao > .rpt-texto,
.questao > .ad-acoes-wrap {
  margin-left: 10px;
  margin-right: 10px;
}
.questao-funcoes { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:58px; margin:0 0 12px; padding:8px 10px; box-sizing:border-box; background:transparent !important; }
.questao-funcoes-esquerda { display:inline-flex; align-items:center; gap:6px; min-width:0; }
.questao-funcoes-grupo { display:inline-flex; align-items:center; gap:4px; }
.questao-marcar-wrap { display:inline-flex; align-items:center; gap:6px; }
.questao-funcao { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:38px; height:40px; padding:0 12px; border:2px solid #555; border-radius:20px; background:transparent; color:#202020; cursor:pointer; font:inherit; font-size:.9rem; transition:background .18s ease, color .18s ease, border-color .18s ease; }
.questao-funcoes-grupo .questao-funcao { width:40px; min-width:40px; padding:0; border-radius:50%; }
.questao-reportar.reportadook {
  color:#289d00;
  cursor:default;
}
.questao-fonte-diminuir,
.questao-fonte-aumentar {
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  aspect-ratio:1 / 1;
  padding:0 !important;
  border-radius:50% !important;
}
.questao-fonte-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.questao-fonte-menu-trigger {
  display: none !important;
}
.questao-fonte-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.questao-fonte-menu-seta {
  transition: transform .18s ease;
}
.questao-fonte-svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.questao-mais-menu {
  position:relative;
  display:none;
}

/* Estado transitório usado apenas para medir a largura natural da toolbar.
   Impede que o Flexbox esconda a falta de espaço comprimindo os rótulos. */
.questao-funcoes.questao-funcoes--medindo > :is(
  .questao-funcoes-esquerda,
  .questao-marcar-wrap,
  .questao-funcoes-grupo
) {
  flex: 0 0 auto !important;
}

.questao-funcoes.questao-funcoes--medindo .questao-funcao {
  white-space: nowrap;
}

.questao-funcoes.questao-funcoes--compacta .questao-fonte-menu,
.questao-funcoes.questao-funcoes--compacta .questao-funcoes-grupo > .questao-tema,
.questao-funcoes.questao-funcoes--compacta .questao-funcoes-grupo > .questao-reportar {
  display:none;
}

.questao-funcoes.questao-funcoes--compacta .questao-mais-menu {
  display:inline-flex;
}

.questao-funcoes.questao-funcoes--compacta {
  --ep-questao-controle-compacto: 44px;
}

.questao-funcoes.questao-funcoes--compacta
  :is(
    .questao-info,
    .questao-marcar,
    .questao-reiniciar,
    .questao-fixar,
    .questao-mais-trigger,
    .questao-cronometro.tempo-oculto
  ) {
  flex: 0 0 var(--ep-questao-controle-compacto);
  width: var(--ep-questao-controle-compacto);
  min-width: var(--ep-questao-controle-compacto);
  max-width: var(--ep-questao-controle-compacto);
  height: var(--ep-questao-controle-compacto);
  min-height: var(--ep-questao-controle-compacto);
  max-height: var(--ep-questao-controle-compacto);
  padding:0;
  border-radius:50%;
  aspect-ratio:1 / 1;
}

.questao-funcoes.questao-funcoes--compacta .questao-info-label,
.questao-funcoes.questao-funcoes--compacta .questao-marcar-label {
  display:none;
}
.questao-mais-dropdown {
  position:absolute;
  z-index:3000;
  top:calc(100% + 8px);
  right:0;
  width:min(270px, calc(100vw - 32px));
  max-height:calc(100dvh - 96px);
  overflow-y:auto;
  box-sizing:border-box;
  padding:10px;
  border:1px solid #d1d5db;
  border-radius:18px;
  background:#fff;
  color:#292929;
  box-shadow:0 14px 36px rgba(0,0,0,.18);
}
.questao-mais-dropdown[hidden] {
  display:none !important;
}
.questao-mais-menu.aberto .questao-mais-trigger::after {
  display:none;
}
.questao-mais-fonte {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:3px 3px 10px;
}
.questao-mais-titulo {
  font-size:.9rem;
  font-weight:600;
}
.questao-mais-fonte-botoes {
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.questao-mais-fonte-botao {
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff;
  color:#4b5563;
  cursor:pointer;
}
.questao-mais-fonte-botao-destaque {
  border-color:#0e3aa9;
  background:#0e3aa9;
  color:#fff;
}
.questao-mais-item {
  width:100%;
  min-height:40px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 7px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:.9rem;
  text-align:left;
  cursor:pointer;
}
.questao-mais-item:hover,
.questao-mais-item:focus-visible {
  background:#f3f4f6;
}
.questao-mais-item i {
  flex:0 0 22px;
  font-size:1.2rem;
  text-align:center;
}
.questao-mais-separador {
  height:1px;
  margin:5px 3px;
  background:#d1d5db;
}
.questao-mais-separador[hidden] {
  display:none;
}
.tema-escuro .questao-mais-dropdown {
  border-color:#3f3f46;
  background:#171717;
  color:#f5f5f5;
  box-shadow:0 14px 36px rgba(0,0,0,.55);
}
.tema-escuro .questao-mais-fonte-botao {
  border-color:#52525b;
  background:#242424;
  color:#f5f5f5;
}
.tema-escuro .questao-mais-fonte-botao-destaque {
  border-color:#0e3aa9;
  background:#0e3aa9;
}
.tema-escuro .questao-mais-item:hover,
.tema-escuro .questao-mais-item:focus-visible {
  background:#242424;
}
.tema-escuro .questao-mais-separador {
  background:#3f3f46;
}
.questao-fixar.ativo { background:transparent; color:inherit; }
.questao-fixar.ativo i { color:#c40000; }
.questao-fixar:hover { background:rgba(255,212,0,.16); color:#8a7100; }
.questao-funcao i { font-size:1.25rem; }
.questao-cronometro,
.questao-info,
.questao-marcar { font-size:1rem; }
.questao-cronometro-tempo { min-width:42px; font-variant-numeric:tabular-nums; }
.questao-funcao:hover { background: #f4f4f4; color:inherit; }
.questao-funcao.ativo { background:#fff; color:#fff; }
.questao-cronometro { color:#2f80ed; border-color:#2f80ed; }
.questao-cronometro i { color:#2f80ed; }
.questao-cronometro:hover { color:#2369c7; background:rgba(47,128,237,.08); }
.questao-cronometro.ativo { background:rgba(47,128,237,.1); color:#2369c7; }
.questao-cronometro.tempo-oculto .questao-cronometro-tempo { display:none; }
.questao-cronometro.tempo-oculto {
  width:40px;
  min-width:40px;
  height:40px;
  padding:0;
  border-radius:50%;
  position:relative;
  border-color:transparent;
  background:transparent;
}
.questao-cronometro::before {
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:conic-gradient(currentColor var(--cronometro-progresso, 0%), var(--cronometro-trilho, #555) 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  padding:2px;
  pointer-events:none;
}
.questao-cronometro.tempo-oculto::before {
  display:none;
}
.questao-cronometro > * { position:relative; z-index:1; }
.questao-info-wrap { position:relative; display:inline-flex; align-items:center; }
  .questao-info { width:auto; min-width:64px; padding:0 12px; border-radius:20px; color:#6366a8; border-color:#6366a8; }
  .questao-info-label { line-height:1; }
.questao-info:hover { color:#4f52a0; background:rgba(99,102,168,.1); }
.questao-info-dropdown { position:absolute; top:calc(100% + 8px); left:0; z-index:1000; display:flex; flex-direction:column; gap:8px; box-sizing:border-box; width:max-content; max-width:min(400px, calc(100vw - 32px)); padding:12px; border:1px solid #d1d5db; border-radius:10px; background:#fff; color:#25282d; box-shadow:0 10px 28px rgba(0,0,0,.18); }
.questao-info-dropdown[hidden] { display:none; }
.questao-info-item { display:flex; flex-direction:column; gap:2px; min-width:0; }
.questao-info-item span { color:#6b7280; font-size:1rem; line-height:1.1; }
.questao-info-item strong { overflow:hidden; font-size:1rem; line-height:1.25; text-overflow:ellipsis; }
.tema-escuro .questao-info { color:#a5a6ff; border-color:#8586d8; }
.tema-escuro .questao-info:hover { color:#c0c1ff; background:rgba(165,166,255,.12); }
.tema-escuro .questao-info-dropdown { border-color:#444; background:#242424; color:#f3f3f3; box-shadow:0 10px 28px rgba(0,0,0,.5); }
.tema-escuro .questao-info-item span { color:#a8a8a8; }
.questao-marcar.ativo { background:#ffd400; border-color:#d1ad00 !important; color:#171717 !important; }
.questao-desfazer-marcacao { display:none; flex:0 0 24px; width:24px; height:24px; align-items:center; justify-content:center; padding:0; margin:0; border:2px solid #111; border-radius:50%; background:transparent; color:#111; cursor:pointer; font:inherit; font-size:.85rem; line-height:1; }
.questao-desfazer-marcacao i { display:block; font-size:1rem; line-height:1; }
.questao-marcar.has-marcacao + .questao-desfazer-marcacao { display:inline-flex; }
.questao-desfazer-marcacao:hover { background:rgba(0,0,0,.08); color:#111; }
.tema-escuro .questao-desfazer-marcacao { border-color:#888; color:#bdbdbd; }
.tema-escuro .questao-desfazer-marcacao:hover { background:rgba(255,255,255,.1); color:#d6d6d6; }
.tema-escuro .questao-funcoes { background:transparent !important; }
.tema-escuro .questao-funcao { border-color:#606060; color:#f3f3f3; }
.tema-escuro .questao-funcao:hover { background:rgba(255,255,255,.08); color:inherit; }
.tema-escuro .questao-funcao.ativo { background:#f3f3f3; color:#171717; }
.tema-escuro .questao-cronometro { color:#63a4ff; border-color:#63a4ff; }
.tema-escuro .questao-cronometro { --cronometro-trilho:#606060; }
.tema-escuro .questao-cronometro i { color:#63a4ff; }
.tema-escuro .questao-cronometro:hover { color:#8abaff; background:rgba(99,164,255,.12); }
.tema-escuro .questao-cronometro.ativo { background:rgba(99,164,255,.14); color:#8abaff; }
.tema-escuro .questao-marcar.ativo { background:#c9aa00; border-color:#aa8e00 !important; color:#111 !important; }
.tema-escuro .questao-fixar.ativo { background:transparent; color:inherit; }
.tema-escuro .questao-fixar.ativo i { color:#e00808; }
@media (max-width:640px) {
  .questao-funcoes.questao-funcoes--compacta {
    --ep-questao-controle-compacto: 36px;
  }

  .questao-funcoes { gap:5px; padding-inline:2px; }
  .questao-funcao { min-width:34px; padding:0 8px; }
  .questao-funcoes-grupo .questao-funcao,
.questao-marcar,
.questao-cronometro.tempo-oculto {
    width:36px;
    min-width:36px;
    height:36px;
    padding:0;
    aspect-ratio:1 / 1;
    border-radius:50%;
  }
  .questao-info {
    width:auto;
    min-width:56px;
    height:36px;
    padding:0 10px;
    border-radius:18px;
  }
  .questao-fonte-diminuir,
.questao-fonte-aumentar {
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
  }
}

.ordenar-wrapper {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-left:auto;
  margin-top:0;
  margin-bottom:14px;
  padding-top:72px;
  width:100%;
}
.ordenar-label {
  color:#6b7280;
  font-size:.9rem;
  font-weight:600;
}
.filtro-situacao-questoes {
  width:min(100%, 290px);
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 14px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff;
  color:#1f2937;
  font:inherit;
  cursor:pointer;
  outline:none;
}
.filtro-situacao-pagina {
  position:relative;
  width:min(100%, 290px);
}
.filtro-situacao-pagina .filtro-situacao-questoes { width:100%; }
.filtro-situacao-pagina-panel {
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:1000;
  width:min(320px, calc(100vw - 28px));
  padding:8px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff;
  box-shadow:0 14px 35px rgba(15,23,42,.18);
}
.filtro-situacao-pagina-panel[hidden] { display:none !important; }
.filtro-situacao-pagina-panel label {
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 8px;
  border-radius:8px;
  color:#334155;
  font-size:.88rem;
  cursor:pointer;
}
.filtro-situacao-pagina-panel label:hover { background:#f1f5f9; }
.filtro-situacao-pagina-panel input { accent-color:#2563eb; }
.filtro-situacao-pagina-aplicar {
  width:100%;
  margin-top:6px;
  padding:9px 12px;
  border:0;
  border-radius:8px;
  background:#1746b7;
  color:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.filtro-situacao-questoes:focus {
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.14);
}
.tema-escuro .ordenar-label { color:#9ca3af; }
.tema-escuro .filtro-situacao-questoes {
  border-color:#3f3f46;
  background:#1f1f1f;
  color:#f3f4f6;
}
.tema-escuro .filtro-situacao-pagina-panel {
  border-color:#3f3f46;
  background:#202020;
}
.tema-escuro .filtro-situacao-pagina-panel label { color:#e5e7eb; }
.tema-escuro .filtro-situacao-pagina-panel label:hover { background:#2b2b2b; }
.practicar-sem-resultados-situacao {
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:32px 20px;
  text-align:center;
  color:#6b7280;
}
.practicar-sem-resultados-situacao i {
  margin-bottom:4px;
  color:#2563eb;
  font-size:2rem;
}
.practicar-sem-resultados-situacao strong {
  color:#1f2937;
  font-size:1.05rem;
}
.tema-escuro .practicar-sem-resultados-situacao { color:#9ca3af; }
.tema-escuro .practicar-sem-resultados-situacao strong { color:#f3f4f6; }
@media (max-width: 820px){
  .ordenar-wrapper {
    justify-content: center;
    gap: 0;
    padding-top:68px;
  }

  .ordenar-label {
    display: none;
  }

  .filtro-situacao-questoes {
    width:100%;
  }

  .filtro-situacao-pagina {
    width:100%;
  }

}


/* ---------------------------------------------------
       EFEITO DE PISCAR (CARREGANDO)
       --------------------------------------------------- */
    @keyframes piscarCarregando {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.4; transform: scale(0.9); background-color: #e0e0e0; }
    }
    
    @keyframes piscarCarregandoEscuro {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.4; transform: scale(0.9); background-color: #111; }
    }

    /* Classe que será injetada pelo JavaScript no momento do clique */
    a.circle-page.pag-item.circle-loading {
        animation: piscarCarregando 0.6s infinite ease-in-out !important;
        pointer-events: none !important; /* Trava o botão para evitar cliques duplos acidentais */
        border-color: #aaa !important;
        /* A cor do texto foi removida daqui para não alterar durante o clique */
        box-shadow: none !important;
    }

    /* Versão do piscar para o Tema Escuro */
    .tema-escuro a.circle-page.pag-item.circle-loading {
        animation: piscarCarregandoEscuro 0.6s infinite ease-in-out !important;
        border-color: #444 !important;
        /* A cor do texto foi removida daqui para não alterar durante o clique */
    }

    /* Efeito de ondulação lenta para a div ajax-questoes */
    @keyframes ondulacaoLenta {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.4; }
    }
    .ajax-loading-wave {
        animation: ondulacaoLenta 1.2s infinite ease-in-out !important;
        pointer-events: none !important; /* Evita duplo clique acidental no conteúdo antigo */
    }

.notification-bar {
    background: #c71515;
    color: #fff;
    border-radius: 5px;
    padding: 10px 16px;
    font-weight: 400;
    font-size: 1rem;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #f5c6c6;
    transition: opacity 0.3s ease;
    flex-wrap: wrap; /* permite quebrar linha no mobile */
}

.notification-bar.tema-escuro {
    background: #a50000;
    color: #fff !important;
    border-bottom: 1px solid #d90a07;

}


.alert-glyph {
    font-size: 1.2rem;
    color: #fff;
    flex-shrink: 0;
}

.alert-glyph.tema-escuro {
  color: #fff;
}

.message-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 4px;
    row-gap: 2px;
}

.headline-text {
    font-weight: 600;
    display: block;
    width: max-content;
    max-width: 100%;
    margin-right: 0;
}

.supporting-text {
    display: block;
    width: max-content;
    max-width: 100%;
}

.upgrade-trigger {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-family: inherit;
    font-size: inherit;
    white-space: nowrap;
    margin-left: auto; /* empurra pra direita no desktop */
    transition: color 0.2s;
    border: 0;
    border-radius: 10px;
    background: transparent;
    padding: 6px 10px;
    flex-shrink: 0;
    cursor: pointer;
}


.upgrade-trigger:hover {
    color: #fff;
    background: #b21011;
    text-decoration: none;
}

.upgrade-trigger.tema-escuro {
  color: #ffa7a6;
}

.upgrade-trigger.tema-escuro:hover {
background: #910403;
text-decoration: none;
}


.dismiss-action {
    cursor: pointer;
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.2s, color 0.2s;
    padding: 6px;
    border-radius: 999px;
    align-self: center;
}

.dismiss-action:hover {
    color: #fff;
    background: #b21011;
}

.dismiss-action.tema-escuro {
color: #ffa7a6;
}
.dismiss-action.tema-escuro:hover {
background: #910403;
}

@media (max-width: 480px) {
    .notification-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
        font-size: 0.92rem;
    }

    .alert-glyph {
        display: none; /* ícone some pra ganhar espaço */
    }

    .message-content {
        width: 100%;
        padding-right: 15px;
    }

    .upgrade-trigger {
        margin-left: 0;
        padding: 6px 12px;
        background: #ad0f11;
        color: #fff;
        border-radius: 8px;
        font-size: 0.9rem;
        text-align: center;
        width: 100%;
    }

    .upgrade-trigger.tema-escuro {
        background: #910403;
        color: #fff;
    }

    .dismiss-action {
        position: absolute;
        top: 8px;
        right: 8px;
        margin-left: 0;
    }
}

.rpt-texto {
    /* fechado: NÃO ocupar espaço vertical */
    margin-top: 0;
    padding: 0;

    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    word-break: normal;
    overflow-wrap: break-word;
    background: #e0f4df;
    border-radius: 5px;

    /* animação */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      max-height 0.30s ease,
      opacity    0.30s ease,
      margin-top 0.30s ease,
      padding    0.30s ease;
}

.rpt-texto.aberta { 
    padding: 2rem;
    max-height: 8000px; 
    opacity: 1;
}


@media (max-width: 640px){
  .rpt-texto.aberta {
    padding: 1rem;
  }


}

.rpt-texto.tema-escuro {
    background: #073004;
}

.ad-acoes-wrap {
  display:flex;
  width:100%;
  gap:12px;
  margin-top:3rem;
}

.ad-acoes-wrap.ad-acoes-usadas {
  justify-content:center;
}

.ad-acao-msg {
  width: 100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 18px;
  border-radius:999px;
  background:#c6e3c5;
  color:#146b3f;
  font-weight:600;
  font-size:1rem;
  margin:0 auto;
}

.ad-acao-msg i {
  font-size:1.2rem;
}

.tema-escuro .ad-acao-msg {
  background:#051e02;
  color:#e4f8ee;
  
}

.ad-acao {
  flex:1;                 /* cada uma ocupa 50% */
  user-select:none;
  cursor:pointer;
  padding:10px 18px;
  border-radius:7px;
font-weight:600;
  font-size:1rem;
  text-align:center;
  letter-spacing:.2px;
  transition: transform .2s ease;
  box-shadow:0 3px 8px rgba(0,0,0,.12);
}

.ad-acao:hover {
  transform: scale(1.04);
}

.ad-acao:active {
  transform:translateY(1px);
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}

.ad-ok {
  background:#24b26b;
  color:#ffffff;
}

.ad-ok:hover {
  opacity:.92;
}

.ad-fail {
  background:#e04b4b;
  color:#ffffff;
}

.ad-fail:hover {
  opacity:.92;
}


.tema-escuro .ad-acao {
  box-shadow:0 3px 8px rgba(0,0,0,.4);
}

.tema-escuro .ad-ok {
  background:#1e8f58;
  color:#eaf7f0;
}

.tema-escuro .ad-fail {
  background:#b23a3a;
  color:#fdecec;
}

.tema-escuro .ad-ok:hover,
.tema-escuro .ad-fail:hover {
  opacity:.95;
}


/* 📱 mobile: empilha */
@media (max-width: 640px){
  .ad-acoes-wrap {
    flex-direction:column;
  }

  .ad-acao {
    width:100%;
  }
}


.conteudo_dinamico {
  margin: 5px 0 10px 0;
}

.contenedor {
  display:flex;
  gap:6px;
  margin-top: 20px;
}
.columna-a {
  flex:0 0 auto;
  width:fit-content;
}

.columna-b {
  flex:1 1 auto;
  display:flex;
  align-items:center;
}

.columna-right {
  flex: 0 1 auto;
  display:flex;
  align-items:center;
}

/* As explicações ficam dentro do cartão da alternativa, como um painel interno. */
.alternativa:has(.justificacion_individual) {
    flex-wrap: wrap;
}

.alternativa .justificacion_individual {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 12px 0 0;
    border: 0;
    border-left: 0 !important;
    border-radius: 22px;
    padding: 15px 16px;
    font-size: 1rem;
}

.tema-escuro .alternativa .justificacion_individual.justificacionCorrecta {
    background: #052f1a;
    color: #f1f5f3;
}

.tema-escuro .alternativa .justificacion_individual.justificacionIncorrecta {
    background: #350000;
    color: #f8eeee;
}

/* Estado base das justificativas (escondidas e transparentes) */
.justificacion_individual {
    display: none;
    opacity: 0;
    transform: translateY(-20px); /* Começa 20px acima */
}

.exibir_justif {
    display: block !important;
    animation: slideFadeDown 0.5s ease forwards;
}

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

.justificacion_individual {
    padding: 15px;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* Estilos para o drag-to-scroll na paginação */
.pagination-circles-container {
    cursor: grab; /* Mãozinha aberta indicando que pode puxar */
}
.pagination-circles-container:active {
    cursor: grabbing; /* Mãozinha fechada ao clicar e segurar */
}
/* Evita que o usuário selecione o texto do número sem querer enquanto arrasta */
.pagination-circles-container * {
    user-select: none;
    -webkit-user-drag: none;
}

/* Estilos para o drag-to-scroll na paginação */
.pagination-circles-container {
    cursor: grab;
}
.pagination-circles-container:active {
    cursor: grabbing;
}
/* Evita que o usuário selecione o texto do número sem querer enquanto arrasta */
.pagination-circles-container * {
    user-select: none;
    -webkit-user-drag: none;
}


#__loading-spin {
    display: none;
    position: fixed;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.__spin-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #007bff;
    animation: __dotBounce 1s ease-in-out infinite;
}

.__spin-dot:nth-child(1) { animation-delay: 0s; }
.__spin-dot:nth-child(2) { animation-delay: 0.18s; }
.__spin-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes __dotBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1.1); opacity: 1; }
}

.tema-escuro .__spin-dot {
    background: #4dabf7;
}

#__skeleton-loading {
    display: none;
    padding: 20px 0;
    width: 100%;
}

.sk-line {
    border-radius: 6px;
    background: #2a2a2a;
    animation: __skShimmer 1.4s ease-in-out infinite;
}

.sk-line {
    background: linear-gradient(90deg, #c8c8c8 25%, #d6d6d6 50%, #c8c8c8 75%);
    background-size: 200% 100%;
    animation: __skShimmer 1.4s ease-in-out infinite;
}

.tema-escuro .sk-line {
    background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: __skShimmer 1.4s ease-in-out infinite;
}

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

.sk-tag { height: 22px; width: 80px; margin-bottom: 20px; }
.sk-title { height: 14px; margin-bottom: 6px; }
.sk-title.w100 { width: 100%; }
.sk-title.w70 { width: 70%; }
.sk-option { height: 44px; width: 100%; margin-bottom: 8px; border-radius: 8px; }
.sk-gap { margin-bottom: 24px; }

.sk-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    flex-wrap: wrap;
    gap: 8px;
}
.sk-footer-left {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.sk-footer-right {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
}
@media (max-width: 850px) {
    .sk-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    .sk-footer-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .sk-footer-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

.concepto-inner-box {
    padding: 14px 18px;
    border-radius: 8px;
    border-left: 4px solid #2563eb;
    background: #eff6ff;
    font-size: 1rem;
    line-height: 1.7;
    color: #1e3a5f;
    font-style: normal;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.tema-escuro .concepto-inner-box {
    background: #0f1e3a;
    color: #d7e9fd;
    border-left-color: #3b82f6;
}
.questoes-container-wrapper.practicar-simulacro-wrapper {
  display: grid;
  place-items: center;
  min-height: min(68vh, 660px);
  padding: clamp(24px, 5vw, 64px) 18px;
}

.questoes-container-wrapper .practicar-simulacro-preparado {
  width: min(100%, 680px);
  padding: clamp(24px, 5vw, 42px);
  border: 1px solid #dde3ee;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(26, 42, 73, .1);
  color: #172033;
}

.questoes-container-wrapper .practicar-simulacro-etiqueta {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eaf0ff;
  color: #1949b6;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.questoes-container-wrapper .practicar-simulacro-preparado h1 {
  margin: 0 0 10px;
  color: inherit;
  font-size: clamp(1.55rem, 4vw, 2.2rem);
  line-height: 1.15;
}

.questoes-container-wrapper .practicar-simulacro-preparado p {
  margin: 0;
  color: #5c687d;
  line-height: 1.6;
}

.questoes-container-wrapper .practicar-simulacro-resumen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0;
}

.questoes-container-wrapper .practicar-simulacro-resumen div {
  min-width: 0;
  padding: 14px;
  border: 1px solid #e4e8f0;
  border-radius: 12px;
  background: #f7f9fc;
}

.questoes-container-wrapper .practicar-simulacro-resumen dt {
  color: #69758a;
  font-size: .75rem;
  font-weight: 700;
}

.questoes-container-wrapper .practicar-simulacro-resumen dd {
  margin: 5px 0 0;
  color: #142b65;
  font-size: 1.15rem;
  font-weight: 800;
}

.questoes-container-wrapper .practicar-simulacro-aviso {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border-radius: 10px;
  background: #fff8e6;
  color: #755316;
  font-size: .86rem;
}

.questoes-container-wrapper .practicar-simulacro-volver {
  display: inline-flex;
  justify-content: center;
  margin-top: 22px;
  padding: 10px 17px;
  border-radius: 10px;
  background: #0e3aa9;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.tema-escuro .questoes-container-wrapper .practicar-simulacro-preparado {
  border-color: #394356;
  background: #202633;
  color: #f3f6fb;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

.tema-escuro .questoes-container-wrapper .practicar-simulacro-etiqueta {
  background: #263b6c;
  color: #a9c5ff;
}

.tema-escuro .questoes-container-wrapper .practicar-simulacro-preparado p {
  color: #b6c0d2;
}

.tema-escuro .questoes-container-wrapper .practicar-simulacro-resumen div {
  border-color: #3a4354;
  background: #282f3d;
}

.tema-escuro .questoes-container-wrapper .practicar-simulacro-resumen dt {
  color: #aeb8ca;
}

.tema-escuro .questoes-container-wrapper .practicar-simulacro-resumen dd {
  color: #d8e5ff;
}

.tema-escuro .questoes-container-wrapper .practicar-simulacro-aviso {
  background: #493c1f;
  color: #f5d990;
}

@media (max-width: 620px) {
  .questoes-container-wrapper .practicar-simulacro-resumen {
    grid-template-columns: 1fr;
  }

  .questoes-container-wrapper .practicar-simulacro-volver {
    width: 100%;
  }
}

/* =========================================================
   INTERFACE COMPARTILHADA — MODO LIBRE + MODO SIMULACRO

   O markup correspondente vive em componentes/visual.php. Alterações no
   card, imagens, alternativas, ações, revisão ou navegação devem ocorrer
   nestes seletores únicos e afetam as duas modalidades.
   ========================================================= */
.ep-practice-shell,
.ep-practice-shell *,
.ep-practice-shell *::before,
.ep-practice-shell *::after {
  box-sizing: border-box;
}

/* Coluna única de leitura usada por Libre e Simulacro.
   O cartão ocupa os mesmos 80% dessa coluna nos dois fluxos. */
.ep-practice-question-container {
  width: 1200px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.ep-practice-question-container > .ep-practice-question {
  width: 80%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

body:has(.ep-practice-shell) {
  overflow-x: clip;
}

/* A estrutura geral mantém uma margem superior de 65px em #main. No exame
   essa margem deslocava o centro útil para baixo, mesmo com o stage centrado. */
body:has(.ep-practice-shell--simulacro) #main {
  margin-top: 0;
}

.ep-practice-shell--simulacro {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #172033;
}

.ep-practice-shell--simulacro #ajax-questoes {
  min-height: calc(100dvh - 45px);
  display: grid;
  align-items: center;
  padding-top: 76px;
  padding-bottom: 76px;
}

.ep-practice-shell--simulacro #ajax-questoes > .container-maior {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
}

.sim-exam-contexto-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ep-practice-question {
  overflow: visible;
}

.ep-practice-question-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-bottom: 10px;
}

.ep-practice-question-header > .questao-funcoes {
  order: -1;
}

.ep-practice-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 0 10px 18px;
}

.ep-practice-images .lightbox-trigger {
  min-width: 0;
}

.ep-practice-images .responsive-img {
  width: 100%;
  max-height: 360px;
  border: 1px solid #e0e4eb;
  border-radius: 12px;
  object-fit: contain;
}

.ep-practice-prompt {
  margin: 0 10px;
  color: #202938;
  font-size: clamp(1rem, 2vw, 1.14rem);
  font-weight: 400;
  line-height: 1.62;
}

.ep-practice-options {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin: 18px 10px 0;
}

.ep-practice-option-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
}

.ep-practice-option-main {
  flex: 1 1 auto;
  min-width: 0;
}

.ep-practice-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 6px;
  row-gap: 6px;
  width: 100%;
  min-height: 52px;
  padding: 9px 12px;
  border: 1px solid #dfe4ec;
  background: #fff;
  color: #28364c;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}

/* A folha global legada declara `.questoes-container-wrapper .alternativa`
   como flex. Reforça o grid do componente para manter ícone e texto na mesma
   linha, inclusive após a alternativa receber seu estado de correção. */
.questoes-container-wrapper .alternativa.ep-practice-option {
  display: grid;
}

.ep-practice-option:hover {
  border-color: #89a5e8;
  background: #f8faff;
}

.ep-practice-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ep-practice-option-letter {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  margin-top: 4px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  aspect-ratio: 1 / 1;
  place-items: center;
  border: 2px solid #cfd6e3;
  border-radius: 50%;
  color: #526178;
  font-size: .78rem;
  font-weight: 850;
}

.ep-practice-option-letter .checkbox-icon {
  grid-area: 1 / 1;
}

.ep-practice-option:has(input:focus-visible) {
  outline: 3px solid rgba(38, 91, 205, .22);
  outline-offset: 2px;
}

.ep-practice-option:has(input:checked) {
  border-color: #2d61cd;
  background: #eff4ff;
}

.ep-practice-option:has(input:checked) .ep-practice-option-letter {
  border-color: #2458c2;
  background: #2458c2;
  color: #fff;
}

.ep-practice-option-text {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  font-size: 1em;
  line-height: 1.5;
}

.ep-practice-option-status,
.pct-alternativa {
  grid-column: 3;
  grid-row: 1;
  margin-left: auto;
  color: #62718a;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}

.pct-alternativa {
  display: none;
}

.pct-alternativa.is-visible {
  display: inline-block;
}

.ep-practice-option-status + .pct-alternativa {
  grid-row: 2;
}

.ep-practice-option.rpt_correcta .pct-alternativa,
.ep-practice-option.rpt_incorrecta .pct-alternativa {
  color: rgba(255, 255, 255, .76);
}

.ep-practice-option.is-correct-answer {
  border-color: #55ba79;
  background: #effbf3;
}

.ep-practice-option.is-correct-answer .ep-practice-option-letter {
  border-color: #23864a;
  background: #23864a;
  color: #fff;
}

.ep-practice-option.is-correct-answer .checkbox-icon-correct,
.ep-practice-option.is-user-wrong .checkbox-icon-incorrect {
  display: block;
}

/* Mantém o X centrado dentro do próprio círculo sem exibi-lo antes da correção. */
.questoes-container-wrapper .alternativa.ep-practice-option.rpt_incorrecta .alternativa-checkbox .checkbox-icon-incorrect,
.ep-practice-option.is-user-wrong .checkbox-icon-incorrect {
  display: grid;
  width: 1em;
  height: 1em;
  place-items: center;
  line-height: 1;
}

.ep-practice-option.is-user-wrong {
  border-color: #df7b7b;
  background: #fff1f1;
}

.ep-practice-option.is-user-wrong .ep-practice-option-letter {
  border-color: #bd3a3a;
  background: #bd3a3a;
  color: #fff;
}

/* Alternativas de /practicar/examen — tema claro.
   O CSS legado usa fundos escuros nos estados `rpt_*`. Mantemos essa
   apresentação apenas no tema escuro e, no claro, usamos superfícies suaves
   para que texto, percentuais e ícones continuem legíveis. */
.ep-practice-shell:not(.tema-escuro) .ep-practice-option {
  background: #f6f6f6;
  color: #243247 !important;
}

.ep-practice-shell:not(.tema-escuro) .ep-practice-option:not(:has(input:checked)):not(.rpt_correcta):not(.rpt_incorrecta) {
  border-color: transparent !important;
}

.ep-practice-shell:not(.tema-escuro) .ep-practice-option:hover {
  border-color: #9bb8ed;
  background: #f1f6ff;
}

.ep-practice-shell:not(.tema-escuro) .ep-practice-option:has(input:checked):not(.rpt_correcta):not(.rpt_incorrecta) {
  border-color: #2d61cd;
  background: #eaeaea;
}

.ep-practice-shell:not(.tema-escuro) .ep-practice-option:not(:has(input:checked)) .ep-practice-option-letter {
  border-color: #aebaca;
  background: transparent;
  box-shadow: none;
  color: #526178;
}

.ep-practice-shell:not(.tema-escuro) .ep-practice-option.rpt_correcta {
  border: 1px solid #46a96f !important;
  background: #eaf7ef !important;
  color: #173d29 !important;
}

.ep-practice-shell:not(.tema-escuro) .ep-practice-option.rpt_incorrecta {
  border-color: transparent !important;
  background: #fff0f1 !important;
  color: #000 !important;
}

/* Entre as alternativas incorretas, a que foi marcada pelo usuário mantém
   um contorno claro no tema claro. Assim o erro permanece identificável sem
   recorrer ao fundo vinho reservado ao tema escuro. */
.ep-practice-shell:not(.tema-escuro) .ep-practice-option.rpt_incorrecta:has(input:checked) {
  border: 2px solid #bd3a46 !important;
  background: #fff0f1 !important;
}

.ep-practice-shell:not(.tema-escuro) .ep-practice-option.rpt_correcta .alternativa-checkbox {
  border-color: #23864a;
  color: #23864a;
}

.ep-practice-shell:not(.tema-escuro) .ep-practice-option.rpt_incorrecta .alternativa-checkbox {
  border-color: #bd3a46;
  color: #bd3a46;
}

.ep-practice-shell:not(.tema-escuro) .ep-practice-option.rpt_correcta .pct-alternativa {
  color: #277348;
}

.ep-practice-shell:not(.tema-escuro) .ep-practice-option.rpt_incorrecta .pct-alternativa {
  color: #a33540;
}

/* A explicação interna mantém a diferença proporcional do tema escuro:
   a superfície clara do cartão fica mais suave e o painel da explicação
   recebe a cor correspondente do estado. */
.ep-practice-shell:not(.tema-escuro) .ep-practice-option.rpt_correcta .justificacion_individual.justificacionCorrecta {
  background: #c8e8d4 !important;
  border-left-color: #2d920d;
  color: #304c3b;
}

.ep-practice-shell:not(.tema-escuro) .ep-practice-option.rpt_incorrecta .justificacion_individual.justificacionIncorrecta {
  background: #f6cbcd !important;
  border-left-color: #c70701;
  color: #5e3034;
}

/* Os indicadores circulares devem acompanhar o estado corrigido no tema claro. */
.ep-practice-shell:not(.tema-escuro) .ep-practice-option.rpt_incorrecta .alternativa-checkbox,
.ep-practice-shell:not(.tema-escuro) .ep-practice-option.rpt_incorrecta .ep-practice-option-letter {
  border-color: #bd3a46 !important;
  background: transparent;
  box-shadow: none;
  color: #bd3a46 !important;
}

.ep-practice-shell:not(.tema-escuro) .ep-practice-option.rpt_incorrecta .checkbox-icon-incorrect {
  color: #bd3a46 !important;
}

.ep-practice-shell:not(.tema-escuro) .ep-practice-option.rpt_correcta .alternativa-checkbox,
.ep-practice-shell:not(.tema-escuro) .ep-practice-option.rpt_correcta .ep-practice-option-letter {
  border-color: #23864a !important;
  background: transparent;
  box-shadow: none;
  color: #23864a !important;
}

.ep-practice-shell:not(.tema-escuro) .ep-practice-option.rpt_correcta .checkbox-icon-correct {
  color: #23864a !important;
}

/* Tooltip padrão dentro de /practicar/examen no tema claro. */
.ep-practice-shell:not(.tema-escuro) .ep-tooltip::after {
  border-color: #d8e0eb;
  background: #ffffff;
  color: #2d394b;
  box-shadow: 0 10px 24px rgba(35, 53, 79, .16);
}

/* Controles do cabeçalho: bordas leves para acompanhar a superfície clara. */
.ep-practice-shell:not(.tema-escuro) .questao-funcao {
  border-color: #c7d0dc;
  color: #4b596b;
}

.ep-practice-shell:not(.tema-escuro) .questao-cronometro {
  border-color: #8fafea;
}

.ep-practice-shell:not(.tema-escuro) .questao-cronometro {
  --cronometro-trilho: #d5ddea;
}

.ep-practice-shell:not(.tema-escuro) .questao-info {
  border-color: #a9addb;
}

.ep-practice-shell:not(.tema-escuro) .questao-desfazer-marcacao {
  border-color: #c7d0dc;
  color: #4b596b;
}

.ep-practice-option-trailing {
  display: grid;
  flex: 0 0 50px;
  place-items: center;
}

.ep-practice-option-trailing .toggleLink {
  width: 42px;
  height: 42px;
  margin: 0;
  border: 2px solid #b9c2d1;
  border-radius: 50%;
  background: transparent;
  color: #667085;
  opacity: .78;
}

.ep-practice-option-trailing .toggleLink:hover {
  border-color: #8091aa;
  background: #f4f6f9;
  color: #344054;
}

.ep-practice-option-trailing .toggleLink.toggle-ativo {
  border-color: #8e98a8;
  background: #e3e7ed;
  color: #4c5769;
}

.ep-practice-actions {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 20px 10px 0;
}

.ep-practice-review {
  margin: 18px 10px 0;
  padding: 16px;
  border: 1px solid #dfe5ed;
  border-radius: 12px;
  background: #fafbfd;
  color: #35445d;
}

.ep-practice-review h2 {
  margin: 0 0 11px;
  color: #253757;
  font-size: .98rem;
}

.ep-practice-review details {
  padding: 8px 0;
  border-top: 1px solid #e4e8ef;
}

.ep-practice-review details:first-of-type {
  border-top: 0;
}

.ep-practice-review summary {
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}

.ep-practice-review details > div,
.ep-practice-review > div {
  font-size: .86rem;
  line-height: 1.6;
}

.ep-practice-review-answer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ep-practice-review-answer > div {
  padding: 13px;
  border: 1px solid #dfe5ed;
  border-radius: 11px;
  background: #f8fafc;
}

.ep-practice-review-answer span,
.ep-practice-review-answer strong {
  display: block;
}

.ep-practice-review-answer span {
  color: #718097;
  font-size: .72rem;
  font-weight: 700;
}

/* No Libre, cada justificativa usa o mesmo componente de revisão dentro da
   alternativa; `contents` evita reservar espaço enquanto o painel está fechado. */
.ep-practice-review.justificacion-opcion {
  display: contents;
}

.ep-practice-option .justificacion_individual {
  grid-column: 1 / -1;
}

.ep-practice-navigation {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  background: #fff;
}

.ep-practice-navigation.is-fixed {
  position: fixed !important;
  z-index: 999999;
  bottom: 0;
  left: 50%;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%);
  pointer-events: none;
}

.ep-practice-navigation-inner {
  display: flex;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center;
  pointer-events: auto;
}

.ep-practice-navigation-link {
  display: inline-flex;
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 45px;
  min-height: 45px;
  padding: 8px 13px;
  border: 0;
  background: #fff;
  color: #667085;
  font-size: .88rem;
  font-weight: 750;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .16s ease, color .16s ease;
}

.ep-practice-navigation-link:not(.is-disabled):hover {
  background: #f5f6f8;
  color: #344054;
  text-decoration: none;
}

.ep-practice-navigation-link.is-disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

.ep-practice-navigation-count {
  flex: 0 0 auto;
  margin: 0 9px;
  padding: 2px 8px;
  border-radius: 5px;
  background: #e9e9e9;
  color: #667085;
  font-size: .88rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Cabeçalho da página e resumo: dados próprios, estrutura do exame comum. */
.ep-practice-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.ep-practice-page-header h1 {
  margin: 0;
  font-size: clamp(1.55rem, 3.8vw, 2.35rem);
  line-height: 1.15;
}

.ep-practice-page-header p {
  max-width: 820px;
  margin: 9px 0 0;
  color: #68748a;
  font-size: .9rem;
  line-height: 1.5;
}

.ep-practice-page-kicker {
  display: inline-flex;
  margin-bottom: 7px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #e9efff;
  color: #1748b2;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.ep-practice-page-back {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid #d9dfeb;
  border-radius: 10px;
  background: #fff;
  color: #31405d;
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
}

.sim-exam-save {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 20px !important;
  font: inherit;
}

.sim-exam-save:disabled {
  opacity: .4;
  cursor: not-allowed;
}

#sim-exam-save-status {
  color: #647188;
  font-size: .78rem;
}

#sim-exam-save-status[data-type="success"] { color: #18713c; }
#sim-exam-save-status[data-type="error"] { color: #b12727; }

.sim-exam-question-warning {
  margin: 20px 10px 0;
  padding: 12px;
  border-radius: 10px;
  background: #fff6df;
  color: #745315;
}

/* Cópia do indicador usado pelo Libre. No Simulacro ele é movido para o
   body junto da navegação, escapando do #wrapper transformado. */
.sim-exam-progress.floating-progress-mini {
  position: fixed;
  left: 0;
  bottom: 42px;
  z-index: 9999998;
  display: block;
  width: 100vw;
  height: 4.48px;
  margin: 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(176 176 176 / 40%);
}

.tema-escuro .sim-exam-progress.floating-progress-mini {
  background: rgb(54 54 54 / 40%);
}

.sim-exam-progress .floating-progress-mini-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1683ff, #7dd3fc, #1683ff);
  background-size: 200% 100%;
  animation: crystal-liquid-shine 1.7s linear infinite;
  transition: width .25s ease;
}

@keyframes crystal-liquid-shine {
  from { background-position: 0% 0; }
  to { background-position: 200% 0; }
}

/* Modal de entrega: específico da ação, sem duplicar o exame. */
.sim-exam-modal {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(4px);
}

.sim-exam-modal[hidden] { display: none; }

.sim-exam-modal-card {
  width: min(100%, 440px);
  padding: 26px;
  border: 1px solid #2f3338;
  border-radius: 10px;
  background: #1b1b1b;
  color: #f3f4f6;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
  font-size: 1rem;
  text-align: center;
}

.sim-exam-modal-icon {
  display: grid;
  width: 50px;
  height: 50px;
  margin: 0 auto 12px;
  place-items: center;
  border-radius: 20px;
  background: #263653;
  color: #8fb4ff;
  font-size: 1.35rem;
}

.sim-exam-modal-card h2 { margin: 0; color: #f3f4f6; font-size: 1rem !important; }
.sim-exam-modal-card p { margin: 10px 0 20px; color: #aeb6c3; font-size: 1rem; line-height: 1.55; }
.sim-exam-modal-card > div { width: 100%; display: flex; justify-content: center; gap: 9px; }
.sim-exam-modal-card button {
  min-width: 0;
  flex: 1 1 0;
  min-height: 41px;
  padding: 9px 13px;
  border: 1px solid #4a4a4a;
  border-radius: 9px;
  background: #2b2b2b;
  color: #e5e5e5;
  font: inherit;
  font-size: 1rem;
  font-weight: 750;
  cursor: pointer;
}

#sim-exam-modal-confirm { border-color: #1748ad; background: #1748ad; color: #fff; }

.sim-exam-modal-icon--reset {
  background: #fff0f0;
  color: #bd2c2c;
}

#sim-exam-reset-modal-confirm {
  border-color: #b42318;
  background: #b42318;
  color: #fff;
}

.tema-escuro .ep-practice-shell--simulacro { color: #edf2fb; }
.tema-escuro .ep-practice-prompt { color: #edf2fb; }
.tema-escuro .ep-practice-option {
  border-color: #3b4558;
  background: #202633;
  color: #e8edf6;
}
.tema-escuro .ep-practice-option:hover { border-color: #667cae; background: #272f40; }
.tema-escuro .ep-practice-option:has(input:checked) { border-color: #6388dc; background: #283858; }
.tema-escuro .ep-practice-option.is-correct-answer { border-color: #3d8f5c; background: #233a2d; }
.tema-escuro .ep-practice-option.is-user-wrong { border-color: #9d5454; background: #41292c; }
.tema-escuro .ep-practice-option-trailing .toggleLink {
  border-color: #606060;
  background: transparent;
  color: #aeb8c8;
  opacity: 0.4;
  transition: ease 0.4s all;
}
.tema-escuro .ep-practice-option-trailing .toggleLink:hover {
  border-color: #606060;
  background: #262626;
  color: #eef2f8;
  opacity: 1;
}
.tema-escuro .ep-practice-option-trailing .toggleLink.toggle-ativo {
  background: #262626;
  color: #eef2f8;
  opacity: 1;
}
.tema-escuro .ep-practice-review,
.tema-escuro .ep-practice-review-answer > div {
  border-color: #3b4557;
  background: #282f3d;
  color: #d6deeb;
}
.tema-escuro .ep-practice-review h2,
.tema-escuro .ep-practice-review-answer strong { color: #edf2fb; }
.tema-escuro .ep-practice-navigation,
.tema-escuro .ep-practice-navigation-link { background: #202225; color: #c5cbd5; }
.tema-escuro .ep-practice-navigation-link:not(.is-disabled):hover { background: #2c2f34; color: #fff; }
.tema-escuro .ep-practice-navigation-count { background: #111317; color: #aeb6c3; }
.tema-escuro .ep-practice-page-header p { color: #aeb9ca; }
.tema-escuro .ep-practice-page-kicker { background: #263c6d; color: #b8ceff; }
.tema-escuro .ep-practice-page-back {
  border-color: #3b4558;
  background: #202633;
  color: #e8edf6;
}
.tema-escuro .sim-exam-modal-card { border-color: #2f3338; background: #1b1b1b; color: #f3f4f6; }
.tema-escuro .sim-exam-modal-card h2 { color: #f3f4f6; }
.tema-escuro .sim-exam-modal-card p { color: #aeb6c3; }
.tema-escuro .sim-exam-modal-card button { border-color: #4a4a4a; background: #2b2b2b; color: #e5e5e5; }
.tema-escuro .sim-exam-modal-icon--reset { background: #5a1f22; color: #ff9a9a; }
.tema-escuro #sim-exam-reset-modal-confirm { border-color: #d64545; background: #d64545; color: #fff; }

@media (max-width: 768px) {
  .ep-practice-question-container > .ep-practice-question {
    width: 100%;
  }

  .ep-practice-shell--simulacro {
    padding: 0;
  }

  .ep-practice-shell--simulacro #ajax-questoes {
    min-height: calc(100dvh - 45px);
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .ep-practice-page-header {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .ep-practice-page-back {
    align-self: flex-start;
  }

  .ep-practice-option {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .ep-practice-actions.quiz-footer {
    width: 100%;
  }

  .ep-practice-option-status,
.pct-alternativa {
    grid-column: 2;
    grid-row: 2;
    margin-left: 0;
  }

  .ep-practice-option-status + .pct-alternativa {
    grid-row: 3;
  }

  .ep-practice-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .sim-exam-save {
    width: 100%;
  }

  .ep-practice-review-answer {
    grid-template-columns: 1fr;
  }

  .sim-exam-modal-card > div {
    flex-direction: column-reverse;
  }

  .sim-exam-modal-card button {
    flex: 0 0 auto;
    width: 100%;
  }
}
.no-scroll {
  overflow: hidden !important;
}

#modalOverlay {
  display: none;
  z-index: 2147480000;
}

#modalOverlay .modal {
  width: min(100%, 590px);
  max-height: calc(100dvh - 32px);
}

#modalOverlay #form-container,
#modalOverlay #suggestionForm {
  min-height: 0;
}

#modalOverlay #suggestionForm {
  display: flex;
  flex-direction: column;
}

#modalOverlay .reportar-modal-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 20px 20px;
}

#modalOverlay .reportar-modal-header {
  position: relative;
  justify-content: center;
}

#modalOverlay .reportar-modal-header .fp-popup-fechar {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

#modalOverlay .reportar-modal-body input,
#modalOverlay .reportar-modal-body select,
#modalOverlay .reportar-modal-body textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #d4d4d8;
  background-color: #f7f7f8;
  color: #18181b;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

#modalOverlay .reportar-modal-body select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  color-scheme: light;
  cursor: pointer;
}

#modalOverlay .reportar-modal-body textarea {
  min-height: 128px;
  resize: vertical;
}

#modalOverlay .reportar-modal-body textarea::placeholder,
#modalOverlay .reportar-modal-body select:invalid {
  color: #71717a;
}

#modalOverlay .reportar-modal-body select:hover,
#modalOverlay .reportar-modal-body textarea:hover {
  border-color: #a1a1aa;
  background-color: #f4f4f5;
}

#modalOverlay .reportar-modal-body select:focus,
#modalOverlay .reportar-modal-body textarea:focus {
  border-color: #71717a;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(24, 24, 27, .08);
}

#modalOverlay #timerMessage {
  display: none;
  margin: 6px 0 0;
  color: #cf262d;
  font-size: .8rem;
  text-align: center;
}

.reportar-feedback-sucesso {
  position: fixed;
  inset: 0;
  z-index: 2147480001;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.reportar-feedback-sucesso[hidden] {
  display: none;
}

.reportar-feedback-sucesso.visivel {
  opacity: 1;
}

.reportar-feedback-sucesso-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 330px);
  min-height: 180px;
  padding: 28px 24px;
  border: 1px solid #d4d4d8;
  border-radius: 18px;
  background: #fff;
  color: #18181b;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .22);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  transform: scale(.94);
  transition: transform .18s ease;
}

.reportar-feedback-sucesso.visivel .reportar-feedback-sucesso-card {
  transform: scale(1);
}

.reportar-feedback-sucesso-card i {
  flex: 0 0 auto;
  color: #16a34a;
  font-size: 4.25rem;
  line-height: 1;
  filter: drop-shadow(0 6px 12px rgba(22, 163, 74, .2));
}

.reportar-feedback-sucesso-card span {
  display: block;
  max-width: 250px;
  font-size: 1.05rem;
}

.tema-escuro .reportar-feedback-sucesso-card {
  border-color: #3f3f46;
  background: #0a0a0a;
  color: #f4f4f5;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .64);
}

#modalOverlay .fp-popup-footer .btn-base {
  width: auto;
  min-width: 88px;
  margin: 0;
}

#modalOverlay .reportar-voltar {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #292929;
}

#modalOverlay .fp-popup-fechar:hover {
  background: transparent;
  color: #475569;
}

.tema-escuro #modalOverlay .reportar-voltar,
#modalOverlay .modal.tema-escuro .reportar-voltar {
  border-color: #3f3f46;
  background: #171717;
  color: #f5f5f5;
}

.tema-escuro #modalOverlay .reportar-modal-body select,
.tema-escuro #modalOverlay .reportar-modal-body textarea,
#modalOverlay .modal.tema-escuro .reportar-modal-body select,
#modalOverlay .modal.tema-escuro .reportar-modal-body textarea {
  border-color: #3f3f46;
  background-color: #0a0a0a;
  color: #f4f4f5;
}

.tema-escuro #modalOverlay .reportar-modal-body select,
#modalOverlay .modal.tema-escuro .reportar-modal-body select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: dark;
}

.tema-escuro #modalOverlay .reportar-modal-body textarea::placeholder,
.tema-escuro #modalOverlay .reportar-modal-body select:invalid,
#modalOverlay .modal.tema-escuro .reportar-modal-body textarea::placeholder,
#modalOverlay .modal.tema-escuro .reportar-modal-body select:invalid {
  color: #a1a1aa;
}

.tema-escuro #modalOverlay .reportar-modal-body select:hover,
.tema-escuro #modalOverlay .reportar-modal-body textarea:hover,
#modalOverlay .modal.tema-escuro .reportar-modal-body select:hover,
#modalOverlay .modal.tema-escuro .reportar-modal-body textarea:hover {
  border-color: #71717a;
  background-color: #111;
}

.tema-escuro #modalOverlay .reportar-modal-body select:focus,
.tema-escuro #modalOverlay .reportar-modal-body textarea:focus,
#modalOverlay .modal.tema-escuro .reportar-modal-body select:focus,
#modalOverlay .modal.tema-escuro .reportar-modal-body textarea:focus {
  border-color: #a1a1aa;
  background-color: #000;
  box-shadow: 0 0 0 3px rgba(212, 212, 216, .12);
}

.tema-escuro #modalOverlay .fp-popup-fechar:hover,
#modalOverlay .modal.tema-escuro .fp-popup-fechar:hover {
  background: transparent;
  color: #cbd5e1;
}

@media (max-width: 430px) {
  #modalOverlay {
    padding: 16px;
  }

  #modalOverlay .modal {
    width: 100%;
  }
}