/* =====================================================================
   percurso.css — o percurso de especialidades de um elemento

   O seletor Etapas / Especialidades (FR10), o sumário por área e a lista de
   cartões (FR11), e a lista de provas dentro dos modais.

   O que **não** está aqui: os modais em si e as pílulas de estado. Esses vêm
   de `css/progresso/oportunidade_modais.css` e de `styles.css` — são o mesmo
   componente com outro conteúdo (NFR01), e duplicá-los era garantir que um
   ajuste de cor só chegava a metade da aplicação.

   Requisitos: docs/specs/SistemaDeEspecialidades/especialidades-dos-elementos.md
   ===================================================================== */

/* As três cores do anel do sumário, num sítio só: são o vocabulário do estado
   de uma especialidade e repetem-se no anel e nas legendas. */
.especialidades-percurso {
  --esp-cor-aprovada: #2f9e5e;
  --esp-cor-em-curso: #e08a2b;
  --esp-cor-por-iniciar: color-mix(in srgb, var(--color-border) 70%, transparent);
}

/* ---------------------------------------------------------------------
   FR10.3 — seletor do percurso, e as margens dos painéis
   --------------------------------------------------------------------- */
/* O seletor é um **interruptor**, não dois separadores: são duas opções que se
   excluem. É a mesma peça do "Mostrar inativos" da lista de elementos
   (css/elementos/lista_elementos.css) — as classes são próprias porque aquele
   ficheiro não é carregado nesta página, mas as medidas são as mesmas para que
   os dois se leiam como o mesmo controlo. */
.percurso-seletor {
  display: flex;
  padding: 1rem 1.5rem 1rem;
}

.percurso-interruptor {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: .88rem;
  cursor: pointer;
}

.percurso-interruptor__opcao {
  color: var(--color-text-soft);
  transition: color var(--transicao-tempo), font-weight var(--transicao-tempo);
  user-select: none;
}

.percurso-interruptor__opcao.ativa {
  color: var(--color-primary);
  font-weight: 700;
}

.percurso-interruptor__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.percurso-interruptor__calha {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  transition: background var(--transicao-tempo), border-color var(--transicao-tempo);
}

.percurso-interruptor__calha::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(30, 20, 60, .35);
  transition: transform var(--transicao-tempo);
}

.percurso-interruptor__input:checked ~ .percurso-interruptor__calha {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.percurso-interruptor__input:checked ~ .percurso-interruptor__calha::after {
  transform: translateX(16px);
}

.percurso-interruptor__input:focus-visible ~ .percurso-interruptor__calha {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.percurso-painel[hidden] {
  display: none;
}

/* O painel das Etapas **não** leva margem: a `.tabs-nav` e a `.tabs-painel` já
   trazem a sua, e a barra dos separadores precisa de a ter em si própria para
   que o traço de baixo atravesse o cartão de lado a lado. O das Especialidades
   leva, porque os seus filhos não têm nenhuma. */
.percurso-painel--especialidades {
  padding: 0 1.5rem 1.5rem;
}

.percurso-painel__titulo {
  font-family: var(--font-title);
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 .85rem;
}

/* No painel das Etapas o título está fora da zona com margem — dá-lha aqui,
   alinhado com o cabeçalho da secção. */
#percurso-etapas > .percurso-painel__titulo {
  padding: 0 1.5rem;
}

/* ---------------------------------------------------------------------
   As duas insígnias do percurso — a de Mérito (seis áreas distintas) e a de
   Especialista (seis especialidades da mesma área). Mesma anatomia, mesmo anel:
   respondem à mesma pergunta em dois eixos, amplitude e profundidade.
   docs/specs/SistemaDeEspecialidades/insignia-de-merito.md
   docs/specs/SistemaDeEspecialidades/insignia-de-especialista.md
   --------------------------------------------------------------------- */

/* A margem é do conjunto e não de cada bloco: entre os dois o que separa é o
   filete abaixo. */
.insignias {
  margin: 0 0 1.5rem;
}

.insignia-bloco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
}

/* O filete impede que os dois blocos se leiam como uma frase só. São duas
   leituras do mesmo percurso, e não uma continuação. */
.insignia-bloco + .insignia-bloco {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border);
}

.anel-insignia {
  position: relative;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  flex: none;
}

/* O anel é um `conic-gradient` com dois cortes — verde o que está alcançado,
   laranja o que anda, esbatido o que falta —, mascarado por um
   `repeating-conic-gradient` que abre o intervalo entre os seis setores: seis
   blocos contados de relance valem mais do que um arco que obriga a estimar
   uma percentagem.

   Os cortes chegam em setores inteiros (0 a 6) e a conversão para graus é feita
   aqui. Assim nenhum decimal entra no gradiente, e a vírgula que o pt-PT
   escreveria não o pode invalidar em silêncio.

   Vai num `::before` e não no próprio elemento: uma máscara aplicada ao
   elemento recortaria também a insígnia lá dentro. */
.anel-insignia::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from -3deg,
    var(--esp-cor-aprovada)    0                                            calc(var(--setores-conquistados, 0) * 60deg),
    var(--esp-cor-em-curso)    calc(var(--setores-conquistados, 0) * 60deg) calc(var(--setores-em-curso, 0) * 60deg),
    var(--esp-cor-por-iniciar) calc(var(--setores-em-curso, 0) * 60deg)     360deg
  );
  -webkit-mask: repeating-conic-gradient(from -3deg, #000 0 54deg, transparent 54deg 60deg);
  mask: repeating-conic-gradient(from -3deg, #000 0 54deg, transparent 54deg 60deg);
}

.anel-insignia__interior {
  position: relative;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--color-surface);
}

.anel-insignia__insignia {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

/* Por alcançar, a insígnia reconhece-se e vê-se que não está ganha. A cor plena
   chega com a elegibilidade: mantê-la esbatida depois de as seis áreas estarem
   feitas era o ecrã a negar trabalho concluído. */
.anel-insignia--por-alcancar .anel-insignia__insignia {
  filter: grayscale(1);
  opacity: .45;
}

.insignia-bloco__texto {
  flex: 1 1 12rem;
}

.insignia-bloco__titulo {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.insignia-bloco__estado {
  margin: .15rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
}

.insignia-bloco__estado--elegivel {
  color: var(--esp-cor-aprovada);
}

.insignia-bloco__falta {
  margin: .1rem 0 0;
  font-size: .86rem;
  color: var(--color-text-soft);
}

/* As áreas onde uma especialidade nova conta — só do Mérito. */
.merito-areas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.merito-areas__item {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--esp-cor-por-iniciar);
  background: var(--color-surface);
  cursor: default;
}

/* Em disputa: a área já tem especialidades, mas estão a contar por outra. A
   diferença não é só de cor — o contorno passa a tracejado —, porque a cor
   sozinha não chega a quem não a distingue. */
.merito-areas__item--disputa {
  border-style: dashed;
  opacity: .55;
}

.merito-areas__simbolo {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.merito-areas__simbolo--letra {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 700;
}

/* A área líder da Especialista, com o nome por extenso. Ao contrário dos
   círculos do mérito — que são uma sugestão de onde ir a seguir e vivem numa
   coluna própria —, esta é o assunto do bloco e vive dentro do texto. */
.especialista-areas {
  list-style: none;
  margin: .45rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
}

.especialista-areas__item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .18rem .7rem .18rem .22rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
}

.especialista-areas__simbolo {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.especialista-areas__simbolo--letra {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: .72rem;
  font-weight: 700;
}

.especialista-areas__nome {
  font-size: .82rem;
  color: var(--color-text);
}

/* ---------------------------------------------------------------------
   FR11.2 — lista de cartões
   --------------------------------------------------------------------- */
.esp-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.esp-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem;
  border: 1px solid var(--cor-borda, #e4e4e4);
  border-radius: 10px;
}

.esp-item__insignia {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.esp-item__insignia--letra {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cor-fundo-suave, #f0ece7);
  font-weight: 700;
}

.esp-item__info {
  flex: 1;
  min-width: 0;
}

.esp-item__titulo {
  margin: 0 0 0.25rem;
  font-weight: 600;
}

.esp-item__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
}

.esp-item__data {
  opacity: 0.75;
}

/* NFR02 — em ecrã estreito o cartão empilha em vez de espremer o texto. */
@media (max-width: 480px) {
  .esp-item {
    flex-wrap: wrap;
  }

  .esp-item__info {
    flex: 1 1 calc(100% - 60px);
  }
}

/* ---------------------------------------------------------------------
   Lista de provas, dentro dos modais
   --------------------------------------------------------------------- */
.esp-provas {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.esp-prova {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--cor-borda, #e8e8e8);
  border-radius: 8px;
}

.esp-prova__caixa {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
}

/* RN11 — no modal de leitura a caixa está desativada. Sem isto ficava
   esbatida ao ponto de não se distinguir uma prova feita de uma por fazer,
   que é justamente a informação que a lista existe para dar. */
.esp-provas--leitura .esp-prova__caixa {
  opacity: 1;
  cursor: default;
}

.esp-prova__corpo {
  flex: 1;
  min-width: 0;
}

.esp-prova__nivel {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.esp-prova__texto {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
}

.esp-prova__data,
.esp-prova__comentario {
  display: block;
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  opacity: 0.75;
}

.esp-relatorio {
  margin: 0.5rem 0 1rem;
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------
   FR04 — a barra de topo da página de detalhe de uma especialidade
   --------------------------------------------------------------------- */
/* O "Regressar" à esquerda, a ação à direita, à mesma altura. Sem a ação, o
   `space-between` não faz diferença nenhuma: o "Regressar" fica onde sempre
   esteve. */
.detalhe-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

/* ---------------------------------------------------------------------
   Fase 2 — edição, decisão e eliminação
   --------------------------------------------------------------------- */
/* Nomes próprios, e não `.modal-caixa--estreita` / `.btn--pequeno`: essas
   existem em `css/elementos/equipa_modais.css`, que não é carregado nestas
   páginas. Redeclará-las aqui criava duas definições do mesmo nome global, a
   divergir ao primeiro ajuste. */

.esp-modal--estreito {
  max-width: 460px;
}

.esp-btn--pequeno {
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
}

.form-opcional {
  font-weight: 400;
  opacity: 0.7;
}

/* RN18 — o motivo de o botão estar desativado, ao lado dele e não num
   `title`: um `title` não se lê em telemóvel, que é onde a maior parte dos
   Pioneiros usa o Abrigo. */
.esp-motivos {
  flex: 1;
  font-size: 0.8rem;
  opacity: 0.85;
  text-align: right;
}

.esp-prova__campo {
  margin-top: 0.35rem;
  font-size: 0.85rem;
}

/* No modal de edição a caixa é acionável e tem de o parecer. */
.esp-provas:not(.esp-provas--leitura) .esp-prova__caixa {
  cursor: pointer;
}

@media (max-width: 560px) {
  .esp-motivos {
    flex: 1 1 100%;
    text-align: left;
    order: -1;
    margin-bottom: 0.4rem;
  }
}