body {
  background-color: #f8f8fb;
}

footer {
  background-color: #65259d;
  color: white;
  text-align: center;
  padding: 10px 0;
  margin-top: 3rem;
}

.navbar-logo {
  max-width: 100px;
}

.material-symbols-outlined {
  color: white;
}

.container {
  max-width: 960px;
}

.btn-primary {
  background-color: #65259d !important;
  border-color: #65259d !important;
  color: white !important;
}

.btn-primary:hover {
  background-color: #441961 !important;
  border-color: #441961 !important;
  color: white !important;
  text-decoration: none !important;
}

.btn-outline-primary {
  background-color: transparent !important;
  border-color: #65259d !important;
  color: #65259d !important;
}

.btn-outline-primary:hover {
  background-color: #65259d !important;
  border-color: #65259d !important;
  color: white !important;
  text-decoration: none;
}

.btn-outline-secondary {
  background-color: transparent !important;
  border-color: #3fa1de !important;
  color: #3fa1de !important;
}

.btn-outline-secondary:hover {
  background-color: #3fa1de !important;
  border-color: #3fa1de !important;
  color: white !important;
  text-decoration: none;
}

.btn-secondary {
  background-color: #3fa1de !important;
  border-color: #3fa1de !important;
  color: white !important;
}

.btn-secondary:hover {
  background-color: #2c7daf !important;
  border-color: #2c7daf !important;
  color: white !important;
  text-decoration: none !important;
}

/* Estilo para o botão secundário (azul/turquesa) quando desativado */
.btn-secondary:disabled,
.btn-secondary.disabled {
  background-color: #2c7daf !important; /* Versão suavizada do #25bbb1 */
  border-color: #2c7daf !important;
  color: #ffffff !important;
  opacity: 0.65;
  cursor: not-allowed; /* Altera o cursor para indicar bloqueio */
  pointer-events: none; /* Impede qualquer interação de clique */
  box-shadow: none !important;
}

.bg-primary {
  background-color: #65259d !important;
}

.bg-secondary {
  background-color: #3fa1de !important;
}

.border-primary {
  border-color: #65259d !important;
}

.border-secondary {
  border-color: #3fa1de !important;
}

.tab-content {
  background-color: white;
}

.text-primary {
  color: #65259d !important;
}

.text-secondary {
  color: #3fa1de !important;
}

.text-tertiary {
  color: #e2713b !important;
}

a {
  color: #65259d !important;
}

a:hover {
  color: #441961 !important;
  text-decoration: underline;
}

.navbar a {
  color: #212529 !important;
}

.navbar a:hover {
  color: #65259d !important;
  text-decoration: none;
}

.nav-pills {
  --bs-nav-pills-link-active-bg: #65259d;
}

.nav-link {
  color: #65259d;
}

.nav-link:hover {
  color: #65259d;
}

ol li::marker {
  color: #65259d;
  font-weight: bold;
}

.accordion-button:focus {
  box-shadow: none;
}

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

.accordion-button.collapsed {
  background-color: #f8f9fa;
  color: #121212;
}

.card__indicators {
  min-height: 240px;
}

.tag-ipr {
  min-width: 200px;
  height: auto;
}
/* --- Componente D.U.A.L.E --- */

.duale-wrapper {
  /* Gradiente baseado na cor primária (#65259d) para criar profundidade */
  background: linear-gradient(135deg, #65259d 0%, #3e1663 100%);
  color: #ffffff;
}

.duale-step {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  transition: background-color 0.3s ease;
}

.duale-step:last-child {
  border-right: none;
}

/* Efeito hover sutil no fundo de cada coluna */
.duale-step:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.duale-icon {
  font-size: 3.5rem;
  color: rgba(255, 255, 255, 0.2);
  transition:
    color 0.3s ease,
    transform 0.3s ease;
  /* Sombreamento sutil imitando o gradiente de profundidade da imagem original */
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2));
}

/* Animação da seta ao passar o rato na coluna inteira */
.duale-step:hover .duale-icon {
  color: rgba(255, 255, 255, 0.9);
  transform: translateX(12px);
}

/* Responsividade: Transforma as setas e as bordas em telas menores (Mobile/Tablet) */
@media (max-width: 991.98px) {
  .duale-step {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
  .duale-step:last-child {
    border-bottom: none;
  }

  /* Gira a seta para baixo no layout mobile */
  .duale-icon {
    transform: rotate(90deg);
  }

  .duale-step:hover .duale-icon {
    transform: rotate(90deg) translateY(12px);
  }
}

/* --- Timeline Percurso DUALE --- */
.timeline-duale {
  position: relative;
  padding-left: 3rem; /* Espaço para o ícone */
}

/* Linha vertical conectora */
.timeline-duale::before {
  content: "";
  position: absolute;
  left: 1.5rem; /* Centralizado com o ícone */
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #e9ecef;
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
  margin-bottom: 2rem;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-content {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Efeito sutil de elevação ao passar o mouse */
.timeline-content:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Ajustes Mobile */
@media (max-width: 767.98px) {
  .timeline-duale {
    padding-left: 2.5rem;
  }
  .timeline-duale::before {
    left: 1rem;
  }
  .timeline-icon {
    left: -2.5rem;
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
    box-shadow: 0 0 0 4px #f8f9fa;
  }
}
/* --- Cartões da Secção Final (Dual) --- */
.card-dual {
  /* Reutiliza a cor primária #65259d e cria um gradiente suave para dar profundidade */
  background: linear-gradient(135deg, #65259d 0%, #441961 100%);
  border-radius: 1.5rem; /* Cantos bem arredondados conforme a referência */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Efeito de elevação interativo (opcional mas recomendado) */
.card-dual:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1.5rem rgba(101, 37, 157, 0.4) !important;
}

/* --- Cartões do Calendário --- */
.card-calendario {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card-calendario:hover {
  transform: translateY(-8px);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15) !important;
}

/* --- Melhorias para o Menu Lateral (Pills) --- */
.nav-pills .nav-link {
  border-radius: 0.5rem;
  color: #495057;
  transition: all 0.3s ease;
  background-color: #ffffff;
}

/* Estado normal e hover */
.nav-pills .nav-link:hover {
  background-color: #65259d;
  color: #fff;
  transform: translateX(5px); /* Efeito sutil de movimento */
}

/* Estado Ativo (O roxo já é coberto pela variável, ajustamos só a borda/texto) */
.nav-pills .nav-link.active {
  color: #ffffff !important;
  border-color: #65259d !important;
}

/* Container do Microsoft Forms */
.forms-container {
  position: relative;
  width: 100%;
}

.forms-container iframe {
  width: 100%;
  border: none;
  min-height: 600px;
}

/* --- Formulário de Upload de Aplicação Prática --- */

/* Container do formulário */
.upload-section {
  background-color: #ffffff;
  border-top: 5px solid #65259d; /* Barra superior no roxo primário para reforçar a marca */
  border-radius: 0.5rem;
}

/* Título */
.title-upload {
  color: #65259d;
  font-weight: 700;
}

/* Campos de entrada (Inputs) */
.custom-input {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  color: #495057;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Estado de foco nos inputs (quando o usuário clica para digitar/anexar) */
.custom-input:focus {
  border-color: #25bbb1; /* Foco no turquesa secundário */
  box-shadow: 0 0 0 0.25rem rgba(37, 187, 177, 0.25); /* Brilho suave turquesa */
  outline: none;
}

/* Estilização do input de arquivo (File) para ficar mais elegante */
.custom-input[type="file"]::file-selector-button {
  background-color: #f8f9fa;
  color: #65259d;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
  margin-inline-end: 1rem;
  font-weight: 600;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  cursor: pointer;
}

.custom-input[type="file"]::file-selector-button:hover {
  background-color: #65259d;
  color: #ffffff;
}

/* Botão de Envio com Gradiente */
.btn-gradient {
  background: linear-gradient(135deg, #65259d 0%, #441961 100%);
  color: #ffffff;
  font-weight: 700;
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Efeito Hover no botão */
.btn-gradient:hover {
  background: linear-gradient(
    135deg,
    #441961 0%,
    #2b0f3d 100%
  ); /* Escurece levemente */
  color: #ffffff;
  transform: translateY(-2px); /* Efeito de elevação */
  box-shadow: 0 0.5;
}
/* --- Painel de Controle Administrativo --- */

/* Container principal do painel */
.admin-panel-section {
  background-color: #ffffff;
  border-top: 5px solid #25bbb1; /* Borda turquesa para diferenciar do form de usuário */
  border-radius: 0.5rem;
}

/* Título principal do painel */
.title-admin {
  color: #65259d;
  font-weight: 700;
}

/* --- Personalização da Tabela --- */
.admin-panel-section .table {
  margin-bottom: 0; /* Remove a margem extra no final do container */
}

/* Cabeçalho da tabela */
.admin-panel-section .table-light th {
  background-color: #f8f8fb; /* O mesmo fundo cinza claro do body */
  color: #65259d; /* Texto em roxo para manter a hierarquia */
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  border-bottom: 2px solid #e9ecef;
}

/* Células do corpo da tabela */
.admin-panel-section .table td {
  color: #495057;
  border-bottom: 1px solid #f1f1f1;
}

/* Efeito de hover suave nas linhas (usando um turquesa bem transparente) */
.admin-panel-section .table-hover tbody tr:hover td {
  background-color: rgba(37, 187, 177, 0.05);
}

/* Ajustes para o botão de Excluir (Danger) não destoar da elegância do painel */
.btn-outline-danger {
  color: #e25c5c;
  border-color: #e25c5c;
  transition: all 0.3s ease;
}

.btn-outline-danger:hover {
  background-color: #e25c5c;
  border-color: #e25c5c;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(226, 92, 92, 0.2);
}