:root{
  /* Paleta do site: #89C2EB principal, #0B1A2E, #1A6FA8, #F47B20, #EEF5FC.
     O azul claro não tem contraste para texto, por isso serve de acento e de
     superfície; o azul médio é que assume os elementos interativos. */
  --tinta:#0B1A2E; --tinta-suave:#5a7290; --linha:#dbe7f3; --fundo:#f4f8fc;
  --papel:#fff; --marca:#1A6FA8; --marca-clara:#EEF5FC; --acento:#89C2EB;
  --destaque:#F47B20; --destaque-claro:#fdf0e6;
  --bom:#0f7a4d; --bom-claro:#e6f5ee; --alerta:#a8600a; --alerta-claro:#fdf3e3;
  --mau:#b3261e; --mau-claro:#fdeceb; --raio:10px;
  --letra:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
/* o atributo `hidden` vale display:none, mas qualquer regra que defina display
   — .entrada usa grid, #app usa grid — passa-lhe à frente. Sem isto, o ecrã de
   entrada continua a ocupar um ecrã inteiro por cima do painel já autenticado. */
[hidden]{display:none!important}
body{margin:0;font:14px/1.5 var(--letra);color:var(--tinta);background:var(--fundo)}
h1{font-size:20px;margin:0;letter-spacing:-.01em}
h2{font-size:15px;margin:0 0 12px}
/* Um rótulo de grupo dentro de um painel, não um título mais pequeno: sem
   isto o h3 sai a 18px por omissão do browser, maior do que o h2 a 15px que
   está por cima dele. Segue o vocabulário do `th`, que é o que já marca o
   princípio de uma tabela. */
h3{font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tinta-suave);font-weight:600;margin:14px 0 6px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.sub{color:var(--tinta-suave);margin:2px 0 0;font-size:13px}
button{font:inherit;cursor:pointer}
.ligacao{background:none;border:0;color:var(--marca);padding:0;text-align:left}
.ligacao:hover{text-decoration:underline}

/* entrada */
.entrada{min-height:100vh;display:grid;place-items:center;padding:24px}
.cartao-entrada{background:var(--papel);border:1px solid var(--linha);border-radius:14px;
  padding:32px;width:100%;max-width:380px;box-shadow:0 1px 3px rgba(18,32,58,.06)}
.cartao-entrada h1{margin:16px 0 4px}
.cartao-entrada label{display:block;font-size:12px;font-weight:600;margin:16px 0 6px;color:var(--tinta-suave)}
.cartao-entrada input{width:100%;padding:10px 12px;border:1px solid var(--linha);
  border-radius:var(--raio);font:inherit;background:#fcfdff}
.cartao-entrada input:focus{outline:2px solid var(--acento);border-color:var(--marca)}
#btn-entrar{width:100%;margin-top:20px;padding:11px;background:var(--marca);color:#fff;
  border:0;border-radius:var(--raio);font-weight:600}
#btn-entrar:disabled{opacity:.6;cursor:progress}
#alternar{margin-top:12px;font-size:13px}
.aviso{margin:14px 0 0;font-size:13px;min-height:20px}
.aviso.erro{color:var(--mau)} .aviso.ok{color:var(--bom)}
.marca{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--tinta-suave)}
.ponto{width:9px;height:9px;border-radius:50%;background:var(--acento);
  box-shadow:0 0 0 3px var(--marca-clara);flex:none}

/* estrutura */
#app{display:grid;grid-template-columns:216px 1fr;min-height:100vh}
.lateral{background:var(--papel);border-right:1px solid var(--linha);padding:20px 14px;
  display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh}
.lateral .marca{line-height:1.25;align-items:flex-start}
#menu{display:flex;flex-direction:column;gap:1px;flex:1;overflow-y:auto;
  margin:-4px -4px 0;padding:4px}
#menu .grupo{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:#93a6bd;font-weight:700;margin:14px 0 4px 10px}
#menu .grupo:first-child{margin-top:0}
#menu button{background:none;border:0;text-align:left;padding:8px 10px;border-radius:8px;
  color:var(--tinta-suave);font-size:13.5px}
#menu button:hover{background:var(--fundo);color:var(--tinta)}
#menu button.ativo{background:var(--marca-clara);color:var(--marca);font-weight:600}
.rodape-lateral{border-top:1px solid var(--linha);padding-top:14px;font-size:12px;color:var(--tinta-suave)}
#quem b{display:block;color:var(--tinta);font-size:13px}
main{min-width:0}
.topo{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  padding:22px 28px;border-bottom:1px solid var(--linha);background:var(--papel);
  box-shadow:inset 0 3px 0 var(--acento)}
.vista{padding:24px 28px}
.a-carregar{color:var(--tinta-suave);padding:40px 0}

/* peças */
.grelha{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.cartao{background:var(--papel);border:1px solid var(--linha);border-radius:12px;padding:16px 18px}
.kpi .valor{font-size:26px;font-weight:650;letter-spacing:-.02em;margin:6px 0 0;color:var(--tinta)}
.kpi .rotulo{font-size:12px;color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.04em}
.kpi .nota{font-size:12px;color:var(--tinta-suave);margin-top:6px}
.painel{background:var(--papel);border:1px solid var(--linha);border-radius:12px;padding:18px;margin-top:18px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tinta-suave);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--linha)}
td{padding:9px 10px;border-bottom:1px solid var(--fundo)}
tbody tr:hover{background:var(--fundo)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.etiqueta{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:600}
.et-bom{background:var(--bom-claro);color:var(--bom)}
.et-alerta{background:var(--destaque-claro);color:#9c4a06}
.et-mau{background:var(--mau-claro);color:var(--mau)}
.et-neutro{background:var(--fundo);color:var(--tinta-suave)}
.barra{height:6px;border-radius:3px;background:var(--fundo);overflow:hidden;min-width:80px}
.barra i{display:block;height:100%;background:var(--acento)}
.barra i.cheia{background:var(--marca)}
.procura{padding:8px 12px;border:1px solid var(--linha);border-radius:var(--raio);
  font:inherit;width:280px;background:var(--papel)}
.vazio{color:var(--tinta-suave);padding:28px 0;text-align:center}
@media (max-width:860px){#app{grid-template-columns:1fr}.lateral{position:static;height:auto}}

/* laranja da marca para o que exige atenção */
.cartao.atencao{border-color:var(--destaque);box-shadow:inset 3px 0 0 var(--destaque)}
.lateral .marca b{color:var(--marca)}

/* definir palavra-passe */
dialog{border:1px solid var(--linha);border-radius:14px;padding:26px;max-width:380px;width:92%;
  background:var(--papel);color:var(--tinta);box-shadow:0 8px 30px rgba(11,26,46,.14)}
dialog::backdrop{background:rgba(11,26,46,.35)}
dialog h2{margin:0 0 4px;font-size:16px}
dialog label{display:block;font-size:12px;font-weight:600;margin:16px 0 6px;color:var(--tinta-suave)}
dialog input{width:100%;padding:10px 12px;border:1px solid var(--linha);border-radius:var(--raio);
  font:inherit;background:#fcfdff}
dialog input:focus{outline:2px solid var(--acento);border-color:var(--marca)}
dialog .botoes{display:flex;justify-content:space-between;align-items:center;margin-top:20px}
#guardar-pass{background:var(--marca);color:#fff;border:0;border-radius:var(--raio);
  padding:10px 20px;font-weight:600}
#guardar-pass:disabled{opacity:.6;cursor:progress}

/* chamada de atenção no topo do resumo */
.chamada{display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:var(--destaque-claro);border:1px solid var(--destaque);
  border-radius:12px;padding:14px 18px;margin-bottom:18px}
.chamada b{display:block;color:#7d3c04}
.chamada span{color:#9c4a06;font-size:13px}
.chamada button{background:var(--destaque);color:#fff;border:0;border-radius:var(--raio);
  padding:10px 18px;font-weight:600;white-space:nowrap}

/* linhas que abrem ficha */
tr.clicavel{cursor:pointer}
tr.clicavel:hover{background:var(--marca-clara)}
tr.clicavel td:first-child{font-weight:500}
.painel table a{color:var(--marca)}

/* ações dentro de uma linha de tabela */
.acoes-linha{white-space:nowrap;display:flex;gap:8px;align-items:center}
button.mini{background:var(--papel);border:1px solid var(--linha);border-radius:7px;
  padding:4px 10px;font-size:12px;color:var(--marca)}
button.mini:hover{background:var(--marca-clara);border-color:var(--marca)}
button.mini:disabled{opacity:.5;cursor:progress}

/* secções por construir */
.porfazer{background:var(--papel);border:1px dashed var(--linha);border-radius:12px;
  padding:26px;max-width:680px}
.porfazer h2{margin-top:0}
.porfazer ul{margin:12px 0 0;padding-left:20px;color:var(--tinta-suave)}
.porfazer li{margin:6px 0}
.porfazer .falta{display:inline-block;margin-top:14px}

dialog select,dialog textarea{width:100%;padding:10px 12px;border:1px solid var(--linha);
  border-radius:var(--raio);font:inherit;background:#fcfdff}
dialog textarea{resize:vertical}
#oco-guardar{background:var(--marca);color:#fff;border:0;border-radius:var(--raio);
  padding:10px 20px;font-weight:600}
#oco-guardar:disabled{opacity:.6;cursor:progress}

/* agenda dos próximos dias */
.agenda .dia{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid var(--fundo)}
.agenda .dia:last-child{border-bottom:0}
.agenda .quando{width:46px;flex:none;text-align:center;line-height:1.1;padding-top:2px}
.agenda .quando b{display:block;font-size:19px}
.agenda .quando span{font-size:11px;color:var(--tinta-suave);text-transform:uppercase}
.agenda .quando.hoje b{color:var(--marca)}
.agenda .quando.hoje span{color:var(--marca);font-weight:600}
.agenda .eventos{flex:1;min-width:0}
.agenda .evento{padding:5px 10px;border-left:3px solid var(--acento);background:var(--marca-clara);
  border-radius:0 6px 6px 0;margin-bottom:5px;cursor:pointer}
.agenda .evento:hover{background:#e2eefb}
.agenda .nome{display:block;font-size:13.5px}
.agenda .det{font-size:11.5px;color:var(--tinta-suave)}

/* calendário mensal */
.semana{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.cabdia{font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tinta-suave);font-weight:600;text-align:center;padding:4px 0}
.mes{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cel{min-height:92px;border:1px solid var(--linha);border-radius:8px;padding:6px;background:var(--papel)}
.cel.vazia{border:0;background:none}
.cel.hoje{border-color:var(--marca);box-shadow:inset 0 0 0 1px var(--marca)}
.cel .num{font-size:12px;color:var(--tinta-suave);margin-bottom:4px}
.cel.hoje .num{color:var(--marca);font-weight:700}
.marca{font-size:11px;line-height:1.25;padding:3px 5px;border-radius:4px;margin-bottom:3px;
  background:var(--marca-clara);color:var(--tinta);cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.marca.sessao{background:var(--destaque-claro);color:#7d3c04}
.marca:hover{background:var(--acento);color:#0B1A2E}
.mais{font-size:11px;color:var(--tinta-suave);padding-left:5px}
@media (max-width:760px){.cel{min-height:64px}.marca{font-size:10px}}

/* espécies de evento, cores pedidas pela Catarina */
.evento.formacao{border-left-color:#1A6FA8;background:var(--marca-clara)}
.evento.momento{border-left-color:#F47B20;background:var(--destaque-claro)}
.evento.webinar{border-left-color:#E3B341;background:#fdf7e3}
.evento .sigla{color:var(--marca);font-weight:700;font-size:12px}
.conf{font-weight:600}
.conf.sim{color:var(--bom)} .conf.meio{color:var(--alerta)} .conf.nao{color:var(--mau)}
.marca.formacao{background:var(--marca-clara);border-left:3px solid #1A6FA8}
.marca.momento{background:var(--destaque-claro);border-left:3px solid #F47B20;color:#7d3c04}
.marca.webinar{background:#fdf7e3;border-left:3px solid #E3B341;color:#6b4e05}
.marca.duvida{border-style:dashed}
.marca b{color:inherit;font-weight:700}
.marca .quem{display:block;font-size:10px;opacity:.75;overflow:hidden;text-overflow:ellipsis}
.marca{white-space:normal}
.legenda{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:14px;font-size:12px;color:var(--tinta-suave)}
.legenda i.p{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.legenda i.formacao{background:#1A6FA8} .legenda i.momento{background:#F47B20}
.legenda i.webinar{background:#E3B341}
.legenda i.duvida{background:transparent;border:1px dashed var(--tinta-suave)}

#pl-guardar{background:var(--marca);color:#fff;border:0;border-radius:var(--raio);
  padding:10px 20px;font-weight:600}
#pl-guardar:disabled{opacity:.6;cursor:progress}
dialog input[type=number]{width:100%;padding:10px 12px;border:1px solid var(--linha);
  border-radius:var(--raio);font:inherit;background:#fcfdff}

/* Formulários curtos, como o de calendarizar por modelo. */
.formulario { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.formulario label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--tinta-suave);
}
.formulario input {
  min-width: 200px; padding: 9px 11px; font: inherit;
  border: 1px solid var(--linha); border-radius: 8px; background: var(--papel); color: var(--tinta);
}
.formulario input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.formulario button, .painel > button {
  padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer;
  border: 0; border-radius: 8px; background: var(--marca); color: #fff;
}
.formulario button:hover, .painel > button:hover { background: var(--tinta); }
.painel > button[disabled] { opacity: .6; cursor: default; }

/* Tabelas onde se escreve: campos discretos, para a tabela continuar legível. */
.editavel input, .editavel select {
  width: 100%; padding: 6px 8px; font: inherit; font-size: 13px;
  border: 1px solid var(--linha); border-radius: 6px;
  background: var(--papel); color: var(--tinta);
}
.editavel input.mini, .editavel select { min-width: 0; }
.editavel input:focus, .editavel select:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.editavel td { padding: 5px 6px; vertical-align: middle; }
.acoes-linha { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ligacao.perigo { color: var(--mau); }
.formulario select {
  min-width: 200px; max-width: 420px; padding: 9px 11px; font: inherit;
  border: 1px solid var(--linha); border-radius: 8px; background: var(--papel); color: var(--tinta);
}

/* ── Área do formando ──────────────────────────────────────────────────────
   Quem entra aqui tem uma formação ou duas, não dezasseis secções: o menu da
   equipa sai da frente e a página fica com a largura toda. */
/* `#menu` é um seletor de ID e ganha a qualquer combinação de classes: para o
   esconder é preciso um ID também. É a mesma armadilha do atributo `hidden`. */
body.sou-formando #menu,
body.sou-formando #definir-pass{display:none}
body.sou-formando #app{grid-template-columns:220px 1fr}
body.sou-formando .lateral{justify-content:space-between}

.destaque-sessao{border-left:3px solid var(--destaque)}
.botao-sala{display:inline-block;padding:10px 20px;background:var(--marca);color:#fff;
  text-decoration:none;border-radius:var(--raio);font-weight:600;font-size:15px}
.botao-sala:hover{background:var(--tinta)}

.meus-dados{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 18px;margin-top:4px}
.meus-dados label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--tinta-suave)}
.meus-dados .larga{grid-column:1/-1}
/* Uma nota que o formando tem de ler antes de assumir que o nome está certo:
   é o que vai sair no certificado, e corrigi-lo depois pode custar-lhe 5 €. */
.nota{border-left:3px solid var(--destaque);background:var(--fundo);padding:11px 13px;
  border-radius:var(--raio);font-size:13px;line-height:1.5;color:var(--tinta);margin:0}
.meus-dados input{padding:9px 11px;border:1px solid var(--linha);border-radius:var(--raio);
  font:inherit;font-size:14px;color:var(--tinta);background:var(--papel)}
.meus-dados input:disabled{background:var(--fundo);color:var(--tinta-suave)}
.meus-dados button{background:var(--marca);color:#fff;border:0;border-radius:var(--raio);
  padding:10px 22px;font:inherit;font-weight:600;cursor:pointer;margin-right:12px}
.meus-dados button:hover{background:var(--tinta)}

/* O regulamento à entrada: uma porta, não um painel entre outros. */
.porta{max-width:620px}
.porta p{line-height:1.6;color:var(--tinta)}
.concordo{display:flex;gap:10px;align-items:flex-start;margin-top:20px;padding:14px 16px;
  background:var(--marca-clara);border-radius:var(--raio);line-height:1.5;cursor:pointer}
.concordo input{margin-top:3px;flex:none;width:17px;height:17px;cursor:pointer}
.porta button{background:var(--marca);color:#fff;border:0;border-radius:var(--raio);
  padding:11px 24px;font:inherit;font-weight:600;cursor:pointer;margin-right:12px}
.porta button:disabled{background:var(--linha);color:var(--tinta-suave);cursor:not-allowed}
.porta button:not(:disabled):hover{background:var(--tinta)}

/* Testemunhos: cada um é um bloco de leitura, não uma linha de tabela — o texto
   é o que importa e uma célula esmaga-o. */
.testemunho{border:1px solid var(--linha);border-radius:var(--raio);padding:16px 18px;margin-bottom:12px}
.testemunho.pendente{border-left:3px solid var(--destaque)}
.testemunho.aprovado{border-left:3px solid var(--bom)}
.testemunho.rejeitado{border-left:3px solid var(--linha);opacity:.72}
.testemunho .cabeca{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.testemunho blockquote{margin:12px 0;padding-left:14px;border-left:2px solid var(--acento);
  line-height:1.6;white-space:pre-wrap}
.testemunho .motivo{margin-top:8px}
.testemunho .acoes-linha{margin-top:12px}
.dialogo-largo{max-width:560px;width:calc(100% - 32px)}
.dialogo-largo textarea{width:100%;min-height:150px;padding:10px;border:1px solid var(--linha);
  border-radius:var(--raio);font:inherit;resize:vertical}
.dialogo-largo select,.dialogo-largo input[type=url],.dialogo-largo input[type=file]{
  width:100%;padding:9px 11px;border:1px solid var(--linha);border-radius:var(--raio);font:inherit}
tr.atrasado td{background:var(--mau-claro)}

/* Os avisos são uma linha do tempo, não uma tabela: o que importa é a ordem e
   a data, e uma célula de tabela esconde as duas. */
.avisos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.avisos li{display:grid;grid-template-columns:88px 1fr;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--linha)}
.avisos li:last-child{border-bottom:0}
.avisos li.novo{background:var(--marca-clara);margin:0 -12px;padding:12px;border-radius:var(--raio)}
.avisos .quando{font-size:13px;color:var(--tinta-suave);font-variant-numeric:tabular-nums}