:root {
  --prf-blue: #001552;
  --prf-yellow: #ffb100;
}

/* --- Preloader --- */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000; /* fundo preto */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 1;
  transition: opacity 0.8s ease;
}

#preloader img {
  width: 200px; /* ajuste conforme necessário */
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.table-custom-blue th {
  background-color: #00131d;
  color: #a5ffff;
  letter-spacing: 1px;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

body {
  scroll-behavior: smooth;
  background-color: #FFF;
}

main {
  flex: 1; /* Faz o conteúdo principal crescer e empurrar o rodapé para baixo */
}

.main-default {
  margin-top: 89px;
}

.main-dashboard {
  margin-top: 100px;
}


.equal-height {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.badge-top-right {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.navbar {
    background-color: #00131d;
}

#navbar-thin-yellow{
  width: 100%;
  height: 20px;
  background-color: #91b0b8;
  position: absolute;
  bottom: -20px;
  left: 0;
}

#navbar-thin-blue{
  width: 100%;
  height: 5px;
  background-color: #00131d;
  position: absolute;
  bottom: -25px;
  left: 0;
}

#navbar-thin-white{
  width: 100%;
  height: 10px;        /* ajuste a espessura */
  background-color: #a5ffff;
  position: absolute;
  bottom: -35px;
  left: 0;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.45);
}

.navbar-brand, .nav-link, .navbar-text {
	color: white;
	font-size:18px;
}

.navbar-brand{
	position: absolute;
	z-index: 1;
	margin: 0;
	padding: 0;
	top: 5px;
}

/* Garante que o item do menu seja o "contêiner" relativo */
.navbar .nav-item.dropdown {
  position: relative;
}

/* Força o dropdown a flutuar por cima, alinhado à direita do gatilho */
.navbar .profile-dropdown {
  position: absolute !important; /* importante caso outro CSS tenha sobrescrito */
  top: calc(100% + 8px);         /* 8px de gap abaixo do header (ajuste se quiser) */
  right: 0;
  z-index: 2050;                 /* alto o suficiente para ficar sobre tudo */
  width: 280px;
  border-radius: 6px;
  animation: fadeIn 0.15s ease-in-out;
  transform-origin: top right;
}

/* Impede que o dropdown altere a altura do header quando aberto */
.navbar .dropdown-menu.show {
  display: block; /* normal */
  position: absolute !important;
}

#profileDropdown span {
  color: #fff !important;
}
#profileDropdown:hover span {
  color: #fff !important;
}

.btn-yellow, .btn-navbar {
  background-color: #00131d;
  color: #fff;
  border: 1px solid #a5ffff;
}

.btn-yellow:hover {
  background-color: #91b0b8;
  color: #00131d;
  border: 1px solid #a5ffff;
}

.btn-menu{
  background-color: #00131d;
  color: #a5ffff;
}

.btn-menu:hover {
  background-color: #91b0b8;
  color: #00131d;
}

.btn-navbar:hover {
  background-color: #a5ffff;
  color: #00131d;
  border: 1px solid #91b0b8;
}

.btn-blue {
  background-color: var(--prf-blue);
  color: #fff;
}

.btn-blue:hover {
  color: var(--prf-blue);
}

.btn-telegram {
  background-color: #30acec;
  color: #fff;
}

.btn-telegram:hover {
  background-color: #fff;
  color: #30acec;
  border: 1px solid #30acec;
}


footer {
  background-color: #00131d;
  color: white;
  padding: 20px 0;
}

.nav-item{
	border: 1px 0 solid var(--prf-yellow);
	width: 100%;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

#login-box{
	min-width:450px;
}

.logosmall{
  max-width: 120px;
  height: auto;
}

.card-pf {
  background-color: #000000;
  color: #ffffff;
  box-shadow: 0px 0px 20px -10px #ffffff;
  border: 1px solid #ffffff40 !important;
}

.card-prf {
    background-color: #141847;
    color: #ffffff;
    box-shadow: 0px 0px 20px -10px #ffb100;
    border: 1px solid #ffb10040 !important;
}

.card-pmerj {
  background-color: #2c3e50;
  color:#ffffff;
  box-shadow: 0px 0px 20px -10px #2f3e8b;
  border: 1px solid #2f3e8b40 !important;
}

.card-pcsp, .card-pcrs, .card-pcdf{
  background-color: #000000;
  color:#b59f5a;
  box-shadow: 0px 0px 20px -10px #b59f5a;
  border: 1px solid #b59f5a40 !important;
}

.card-instituicao {
  min-height: 150px; /* você pode ajustar esse valor */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
}

#carrosselInstituicoes .carousel-indicators {
  position: static;      /* remove o absolute padrão */
  margin-top: 1rem;      /* distância entre os cards e os paginadores */
  justify-content: center; /* centraliza horizontalmente as bolinhas */
}

.accordion-button:not(.collapsed){
	background-color: #00131d;
  color: #a5ffff;
}

/* SETA FECHADA – cor #00131d */
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300131d' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* SETA ABERTA – cor #a5ffff */
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23a5ffff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 11.354a.5.5 0 0 0 .708 0L8 5.707l5.646 5.647a.5.5 0 0 0 .708-.708l-6-6a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 0 .708z'/%3E%3C/svg%3E");
}

.sidebar {
  background-color: #f8f9fa;
  padding-top: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.03);
  overflow-wrap: break-word;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sidebar h6 {
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 1rem;
}

.sidebar .nav-link {
  white-space: normal;
  word-break: break-word;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  color: #495057;
  transition: all 0.2s ease-in-out;
}

.sidebar .nav-link:hover {
  background-color: #e9ecef;
  text-decoration: none;
}

.sidebar .nav-link i {
  width: 20px;
  text-align: center;
  margin-right: 10px;
  font-size: 1rem;
}

.sidebar h6 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-picture{
  width: 120px; 
  height: 120px; 
  object-fit: cover;
  border-color: #a5ffff !important;
  cursor: pointer;
}

/* Título do carrossel (mais forte) */
.carousel-inner h1 {
  text-shadow: 0px 0px 10px #000,0px 0px 10px #000,0px 0px 10px #000,0px 0px 10px #000;
}

/* Parágrafo do carrossel (mais suave) */
.carousel-inner p {
  text-shadow: 0px 0px 10px #000,0px 0px 10px #000,0px 0px 10px #000,0px 0px 10px #000;
}

.linkpoliticaprivacidade{
  font-size: 14px;
}

#table-resultado-cartao-resposta{
  font-size: 12px;
}

#table-resultado-cartao-resposta thead{
  font-size: 11px;
}

.header-change-password{
  letter-spacing: 1px;
}

/* Ranking */

.progress { border-radius: 0.5rem; overflow: hidden; }
.progress-bar { border-radius: 0.5rem; }

.medal-gold {
    color: #FFD700; /* Dourado */
}

.medal-silver {
    color: #C0C0C0; /* Prata */
}

.medal-bronze {
    color: #CD7F32; /* Bronze */
}

.table-hover>tbody>tr:hover>* {
    --bs-table-color-state: #000;
    --bs-table-bg-state: #00000013;
}

#table-historico-simuladosgratuitos{
  font-size: 12px;
}

#table-historico-simuladosgratuitos thead{
  font-size: 11px;
}

.font-11px{
  font-size: 11px;
}

.font-12px{
  font-size: 12px;
}

.font-13px{
  font-size: 13px;
}

.font-14px{
  font-size: 14px;
}

.font-15px{
  font-size: 15px;
}

.font-16px{
  font-size: 16px;
}

.font-17px{
  font-size: 17px;
}

.font-18px{
  font-size: 18px;
}

#powered_by_mp{
  max-height: 40px; width: auto; object-fit: contain;
}

#divisor_powered_by_mp{
  width:1px;
  height:22px;
  background-color:rgb(0, 0, 0);
  display:inline-block;
}

.romanos {
  list-style-type: upper-roman;
}

.letras {
  list-style-type: lower-alpha;
}

.letras li::marker {
  content: counter(list-item, lower-alpha) ") ";
}

.numeros {
  list-style-type: decimal; /* usa números */
}

.numeros li::marker {
  content: counter(list-item) ". ";
}

#toggleSidebarBtn{
  letter-spacing: 1px; 
  text-transform:uppercase; 
  font-size: 0.75rem;
}

#avatarPreview{
  width: 50px; 
  height: 50px; 
  object-fit: cover; 
  cursor: pointer;
}

#profileDropdown{
  white-space: nowrap;
}

#nomeHeader{
  font-size: 0.75rem; 
  letter-spacing: 1px; 
  text-transform: uppercase;
}

#containerImagePreview{
  max-width: 100%;
  height: 400px;
}

#imagePreview{
  max-width: 100%; 
  display: none;
}

/* Estrutura base */
#sidebar {
  background: #fff;
  position: relative;
}

/* Área expansível */
#sidebarContent {
  overflow: hidden;
  transition: height .33s ease;
  height: auto;
}

/* Botão fixo no rodapé */
#toggleSidebarBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 0;
}

#sidebarMotivacional{
  text-transform: none;
  letter-spacing: 0px;
}

.img-max-250{
  max-width:250px;
}

.dropdown-toggle::after {
  display: none !important;
}

/* Animação da rotação da seta personalizada */
#setaPerfil {
  transition: transform 0.1s ease;
}

/* Classe aplicada quando o menu está aberto */
#setaPerfil.rotated {
  transform: rotate(180deg);
}


/* A card inteira vira */
.flashcard {
  width: 100%;
  height: auto; /* agora é dinâmica */
  position: relative;
  transform-style: preserve-3d;
  transition: transform .6s ease;
  cursor: pointer;
  perspective: 1200px;
  margin: 0 auto;
  background-color: #a5ffff!important;
  color: #000000!important;
}

/* Quando virar */
.flashcard.flipped {
  transform: rotateY(180deg);
}

/* Faces */
.flashcard .face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

  backface-visibility: hidden;
  padding: 1.5rem;
  overflow: visible; /* melhora cálculos de altura */
}

.flashcard .face .conteudo {
  flex: 1;
  display: flex;         /* <-- novo */
  flex-direction: column;/* <-- novo */
}

.conteudo-centralizado {
  flex: 1;
  display: flex;
  align-items: center;      /* centraliza verticalmente */
  justify-content: center;  /* centraliza horizontalmente */
}

/* rodapé vai automaticamente para o final */
.flashcard .face .rodape {
  margin-top: auto;
}

/* Frente */
.flashcard .front {
  z-index: 2;
}

/* Verso */
.flashcard .back {
  transform: rotateY(180deg);
}

.flashcard-voltar-frente-verso{
  color: var(--prf-blue);
}

mjx-container {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

mjx-container svg {
  max-width: 100%;
  height: auto;
}


.border-blue-cop {
    --bs-border-opacity: 1;
    border-color: rgb(165 255 255) !important;
}


@media (max-width: 500px) {
  #header-logo {
    max-width: 120px;
    height: auto;
  }

  #login-box{
    min-width:300px;
  }

}

@media (max-width: 768px) {
  #table-resultado-cartao-resposta td:nth-child(2),
  #table-resultado-cartao-resposta th:nth-child(2){ 
    display:none;
  }

  #sidebar {
    width: 100% !important;
    padding-bottom: 16px; /* espaço para o botão */
  }

  /* Fechado por padrão ao iniciar */
  #sidebar.initialized #sidebarContent {
    height: 0;
  }

  #toggleSidebarBtn {
    display: block;
  }
}

@media (max-width: 991.98px) {
  #table-historico-simuladosgratuitos td:nth-child(7),
  #table-historico-simuladosgratuitos th:nth-child(7),
  #table-historico-simuladosgratuitos td:nth-child(6),
  #table-historico-simuladosgratuitos th:nth-child(6),
  #table-historico-simuladosgratuitos td:nth-child(5),
  #table-historico-simuladosgratuitos th:nth-child(5){
    display:none;
  }
}

@media (min-width: 768px) {
  #toggleSidebarBtn { display: none; }
  #sidebarContent { height: auto !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.card-instituicao {
		min-height: 250px;
	}
}

/* Ajustes para telas pequenas */
@media (max-width: 576px) {
  .theme-toggle-btn {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }

  .navbar .profile-dropdown {
    right: 8px;
    left: auto;
    width: 240px;
  }

}

/* Não mostrar na impressão */
@media print {
  .theme-toggle-btn { display: none !important; }
}

.brasao-prf-bg {
  position: absolute;
  top: 0;
  right: -25%;
  width: 50%;
  height: 100%;
  background: url("../img/brasao_PRF.png") no-repeat right center;
  background-size: contain;
  opacity: 0.2;
  pointer-events: none;
}

.brasao-titulo{
    max-height: 110px;
    width: auto;
}

.bg-blue-cop{
  background-color: #00131d;
  color: #fff;
}

.shadow-blue-cop{
    box-shadow: 0 0 1rem #a5ffff !important;
}

.a-blue-cop{
    color: #00131d;
    text-decoration: underline;
}

/* ================================
   MODO NOTURNO
================================== */
body.dark-mode {
  background-color: #121212;
  color: #f1f1f1;
}

.dark-mode .navbar {
  background-color: #1e1e1e !important;
}

.dark-mode .navbar #navbar-thin-yellow {
  background-color: #91b0b8 !important;
}

.dark-mode .navbar #navbar-thin-blue {
  background-color: #1e1e1e !important;
}

.dark-mode .sidebar {
  background-color: #1b1b1b !important;
  color: #f1f1f1;
}

.dark-mode .sidebar .nav-link {
  color: #f1f1f1 !important;
}

.dark-mode .sidebar .nav-link:hover {
  background-color: #333 !important;
  color: #ffc107 !important;
}

.dark-mode .card {
  background-color: #1e1e1e;
  border: 1px solid #333!important;
  color: #f1f1f1;
}

.dark-mode .card .card-title,
.dark-mode .card .card-text {
  color: #f1f1f1 !important;
}

.dark-mode footer {
  background-color: #1e1e1e;
  color: #bbb;
}


.dark-mode .btn-yellow:hover {
  background-color: #404040;
  color: #fff;
}

.dark-mode .btn-menu {
  background-color: #404040;
  color: #fff;
}

.dark-mode .btn-menu:hover {
  background-color: #a5ffff;
  color: #00131d;
}

.dark-mode h3, .dark-mode h5 {
  color: #fff !important;
}

.dark-mode .questao_comentarios h3{
  color: unset!important;
}

.dark-mode .form-control{
  background-color: #404040;
  color: #ffffff;
  border-color: #000000;
}

.dark-mode .form-control::placeholder {
  color: #aaaaaa;
  opacity: 1;
}

.dark-mode .form-control:disabled {
  color: #666666; 
  background-color: #303030;
}

.dark-mode .form-select {
  background-color: #404040;
  color: #ffffff;
  border-color: #000000;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* seta branca em SVG */
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 6l5 5 5-5H3z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;

  padding-right: 2rem; /* espaço para a seta */
}


.dark-mode .navbar{
    background-color: #00131d!important;
}


.dark-mode .table{
  --bs-table-bg: #1e1e1e;
  --bs-table-color: #fff;
  --bs-table-border-color: #303030;
}

.dark-mode .sidebar .nav-link:hover {
    background-color: #333 !important;
    color: #ffffff !important;
}

.dark-mode .table-custom-blue th {
    background-color: #303030;
    color: #FFF;
}

.dark-mode .modal{
  --bs-modal-bg: #303030;
}

.dark-mode .accordion{
  --bs-accordion-border-color:none;
}

.dark-mode .accordion-item {
    background-color: #1e1e1e;
    border: 1px solid #333!important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2)!important;
}

.dark-mode .accordion-button {
    background-color: #1e1e1e;
    color: #f1f1f1;
    text-transform: uppercase;
    border: none;
}

.dark-mode .accordion-button:not(.collapsed) {
    background-color: #404040; /* destaque quando aberto */
}

.dark-mode .accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.281);
}

.dark-mode .accordion-body .card {
    background-color: #2a2a2a; /* tom ligeiramente diferente dos cards principais */
    border: 1px solid #333!important;
    color: #f1f1f1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15)!important;
}

.dark-mode .accordion-body .card .card-body h6,
.dark-mode .accordion-body .card .card-body h3 {
    color: #f1f1f1!important;
}

.dark-mode .accordion-body .card .card-body h3.text-success {
    color: #198754!important; /* verde já definido, mantendo contraste */
}

.dark-mode .accordion-body .card .card-body h3.text-danger {
    color: #dc3545!important; /* vermelho */
}

.dark-mode .accordion-body .card .card-body h3.text-primary {
    color: #0d6efd!important; /* azul bootstrap */
}

.dark-mode .accordion-body .card .card-body h3.text-warning {
    color: #ffc107!important; /* amarelo bootstrap */
}

/* SETA SEMPRE #a5ffff (aberto e fechado) */
.dark-mode .accordion-button::after,
.darj-mode .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23a5ffff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.dark-mode .header-change-password{
  color: #ffffff!important;
}

.dark-mode .table-hover>tbody>tr:hover>* {
    --bs-table-color-state: #fff;
    --bs-table-bg-state: #404040;
}

.dark-mode .modal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.dark-mode #table-ranking-acertos .table-success{
    --bs-table-color: #ffffff;
    --bs-table-bg: #000000;
    --bs-table-border-color: #303030;
    --bs-table-striped-bg: #000000;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #000000;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #000000;
    --bs-table-hover-color: #000;
    color: #ffffff;
    border-color: var(--bs-table-border-color);
}

.dark-mode #divisor_powered_by_mp{
  background-color:rgba(255,255,255,0.2);
}

.dark-mode #accordionCTB .accordion-item {
  color: #f1f1f1;
}

/* Botão flutuante de alternar tema */
.theme-toggle-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1060;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  line-height: 1;
  font-size: 1.1rem;
}

.dark-mode .theme-toggle-btn {
  /* Mantém botão visível no escuro; ajuste se quiser outro visual */
  background-color: #ffffff; /* mantém btn-yellow */
  color: #000;
}

.dark-mode .flashcard {
  background-color: #b7b7b7!important;
  color: #000000!important;
}

.dark-mode .flashcard-voltar-frente-verso{
  color: #000000;
}