/* ==========================================================================
   Modais de oportunidade educativa — Detalhe / Edição / Iniciar /
   Validação / Aprovação, e os elementos comuns que vivem dentro deles
   (formulários, botões, alertas, estado "a carregar").

   Partilhado por todas as páginas que incluem
   `ProgressoPessoal/_modais_oportunidade.html`:
     - Elementos/elemento_detalhe.html
     - ProgressoPessoal/acoes_pendentes.html

   Extraído de `css/elementos/elemento_detalhe.css` (sem alterações de
   comportamento) quando a página "Ações pendentes" passou a usar o mesmo
   modal de Detalhe — ver docs/specs/ProgressoPessoal/acoes-pendentes.md §9.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Badge de estado da oportunidade
   -------------------------------------------------------------------------- */
/* Afina o distintivo base de `styles.css` (as cores vêm de
   `.badge-estado--NN`, em abrigo-tokens.css). Fica aqui para que a mesma
   oportunidade tenha o mesmo aspeto na lista e dentro do modal. */
.badge-estado {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .2rem .55rem;
  border-radius: 20px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   MODAL — Detalhe / Edição / Validação / Aprovação
   -------------------------------------------------------------------------- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 28, .55);
  backdrop-filter: blur(3px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn .2s ease;
}

.modal-overlay.aberto { display: flex; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-caixa {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp .25s ease;
}

/* Modificador partilhado: um modal mais estreito, para confirmações e
   formulários curtos. Vivia em `equipa_modais.css` -- a folha da página de
   equipas -- e não aqui, ao lado de `.modal-caixa`, que é a sua base e já é
   carregada por quem quer que use modais. `equipas.html` carrega as duas
   folhas, pelo que a mudança não lhe custa nada. */
.modal-caixa--estreita { max-width: 460px; }

@keyframes slideUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modal-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid var(--color-border);
  gap: 1rem;
}

.modal-cabecalho__area {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.modal-cabecalho__area-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.modal-cabecalho__area-nome {
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.modal-cabecalho__trilho {
  font-family: var(--font-title);
  font-size: 1.15rem;
  color: var(--color-primary);
  line-height: 1.2;
}

/* FR19 – elemento dono da oportunidade: contexto para quem atua sobre
   oportunidades de outros (Animador, Guia / Sub-guia). */
.modal-cabecalho__elemento {
  font-size: .8rem;
  color: var(--color-text-soft);
  line-height: 1.3;
  margin-top: .15rem;
}

.modal-fechar {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  color: var(--color-text-faint);
  padding: .25rem;
  flex-shrink: 0;
  transition: var(--transicao);
  line-height: 1;
  /* FR02.4 — num modal aberto pelo servidor este `✕` é uma <a> e não um
     <button>, para ter saída sem JavaScript. Sem isto vinha sublinhado. */
  text-decoration: none;
}

.modal-fechar:hover { color: var(--color-text); }

.modal-corpo {
  padding: 1.25rem 1.5rem;
}

/* Título e estado da oportunidade */
.modal-oportunidade-titulo {
  font-family: var(--font-title);
  font-size: 1.35rem;
  color: var(--color-text);
  margin-bottom: .5rem;
  line-height: 1.3;
}

.modal-meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.modal-descricao {
  font-size: .93rem;
  color: var(--color-text-soft);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

/* Grid de datas no modal */
.modal-datas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem .75rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: var(--color-bg);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.modal-data-item__label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-faint);
  margin-bottom: .15rem;
}

.modal-data-item__valor {
  font-size: .88rem;
  color: var(--color-text);
}

/* Bloco de validação/aprovação */
.modal-bloco {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  margin-bottom: .75rem;
}

.modal-bloco__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}

.modal-bloco__tipo {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-faint);
}

.modal-bloco__quem {
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-primary);
}

.modal-bloco__data {
  font-size: .78rem;
  color: var(--color-text-faint);
}

.modal-bloco__comentario {
  font-size: .88rem;
  color: var(--color-text-soft);
  font-style: italic;
  margin-top: .4rem;
  line-height: 1.5;
}

/* Rodapé modal com botões de ação */
.modal-rodape {
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Formulários nos modais
   -------------------------------------------------------------------------- */
.form-grupo {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-soft);
  margin-bottom: .4rem;
}

/* FR04.1 de docs/specs/Notificacoes/correcoes-modal-mensagens.md — o
   `.form-select` entra no seletor que já existe, e não numa regra própria: os
   campos não ficam *parecidos*, ficam com as mesmas declarações. A seta continua
   a ser a do sistema (FR04.3) — nada de `appearance: none`. */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: .93rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: .6rem .85rem;
  transition: border-color .15s ease;
  resize: vertical;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary-dark);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(27,58,92,.08);
}

.form-textarea { min-height: 90px; }

/* FR06.2 de docs/specs/Notificacoes/correcoes-modal-mensagens.md — a ajuda por
   baixo de um campo. O aspeto vivia só no `.md-ajuda` da markdown.css, e por
   isso só a ajuda do Markdown estava desenhada: as outras apareciam do tamanho e
   da cor do texto normal, a competir com as etiquetas dos campos. Está aqui, na
   classe que **todas** levam, e não na que só uma leva. */
.form-ajuda {
  margin: .35rem 0 0;
  font-size: .8rem;
  color: var(--color-text-faint, #777);
}

.form-erro {
  font-size: .8rem;
  color: var(--color-accent-pink-dark);
  margin-top: .35rem;
  display: none;
}
.form-erro.visivel { display: block; }

/* --------------------------------------------------------------------------
   Botões

   A família `.btn` mudou de casa: vive agora em `shell.css`, que o
   `base.html` carrega em **todas** as páginas. Uma regra que tem de valer
   sempre — o Cancelar à esquerda, a ação à direita (R3.1/R3.2 de
   docs/specs/core/correcoes-apresentacao-e-acesso.md) — não podia morar
   numa folha condicional. E não era teoria: a página *Dúvida* da Ajuda usa
   `.btn` sem carregar esta folha, e os seus dois botões estavam sem estilo
   nenhum.
   -------------------------------------------------------------------------- */

/* O estado "a carregar" dos botões (`.a-carregar`) vive agora em `shell.css`:
   deixou de ser próprio destas modais e passou a ser o sinal de qualquer ação
   em curso, em qualquer página. Ver docs/specs/Elemento/
   correcoes-carregamento-e-saida-da-comunidade-implementacao.md §2.1 */

/* --------------------------------------------------------------------------
   Mensagem de erro/sucesso inline
   -------------------------------------------------------------------------- */
.alerta {
  padding: .7rem 1rem;
  border-radius: var(--radius);
  font-size: .88rem;
  margin-bottom: 1rem;
  display: none;
}
.alerta.visivel { display: block; }
.alerta--erro   { background: #fdf0f0; color: #b83232; border: 1px solid #f0c0c0; }
.alerta--sucesso{ background: #eef6e8; color: #2e6b18; border: 1px solid #b0d89a; }

/* Aviso permanente de ação irreversível (modal de Apagar). Distingue-se do
   .alerta--erro por estar sempre visível: não relata um erro, avisa do que a
   confirmação vai provocar. Mesma paleta, para não introduzir outro vermelho. */
.modal-aviso-perigo {
  padding: .7rem 1rem;
  border-radius: var(--radius);
  font-size: .88rem;
  margin-bottom: 1rem;
  background: #fdf0f0;
  color: #b83232;
  border: 1px solid #f0c0c0;
}

/* --------------------------------------------------------------------------
   Responsividade
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .modal-datas { grid-template-columns: 1fr; }

  .modal-rodape { justify-content: stretch; }
  .modal-rodape .btn { flex: 1; justify-content: center; }
  /* Q09 — em ecrã estreito os botões repartem a largura toda e a margem
     automática da saída (shell.css) só acrescentaria uma falga entre eles.
     A ordem — saída à esquerda, ação à direita — mantém-se pelo HTML. */
  .modal-rodape .btn--cancelar,
  .modal-rodape .btn--voltar { margin-right: 0; }
}

/* --------------------------------------------------------------------------
   Conversa sobre a oportunidade (FR04) e linha de contexto (FR06)

   Especificação: docs/specs/Notificacoes/mensagem-sobre-oportunidade.md

   A `.mensagem-contexto` vive aqui, e não numa folha do `Notificacoes`, porque
   aparece em **todos** os ecrãs que apresentam o corpo de uma mensagem — e este
   é o ficheiro do vocabulário partilhado dos modais, carregado por todos eles.
   -------------------------------------------------------------------------- */
.modal-conversa {
  border-top: 1px solid var(--color-border);
  padding: 1rem 1.5rem 1.5rem;
}

.modal-conversa__titulo {
  font-family: var(--font-title);
  font-size: 1rem;
  color: var(--color-text-soft);
  margin-bottom: .75rem;
}

.modal-conversa__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 0;
}

.modal-conversa__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, .5rem);
  padding: .6rem .8rem;
}

/* O triângulo de origem do <summary> desalinha o bloco de várias linhas; a
   informação de que abre e fecha fica no cursor e no estado do <details>. */
.modal-conversa__resumo {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  list-style: none;
}

.modal-conversa__resumo::-webkit-details-marker { display: none; }

.modal-conversa__corpo {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--color-border);
}

/* A linha que diz de que oportunidade fala a mensagem. Discreta de propósito:
   situa quem lê, não compete com o que foi escrito. */
.mensagem-contexto {
  font-size: .85rem;
  color: var(--color-text-soft);
  border-left: 3px solid var(--color-border);
  padding-left: .6rem;
  margin-bottom: .75rem;
}