/* =========================================================================
   Livro de Ponto de Estágio — folha de estilo única.
   Organização: tokens → base → layout → componentes → gráfico → impressão.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Superfícies e texto */
  --fundo:        #f4f5f7;
  --superficie:   #ffffff;
  --superficie-2: #f7f8fa;
  --superficie-3: #eef0f4;
  --borda:        #dfe3e8;
  --borda-forte:  #c3cad3;
  --texto:        #14181d;
  --texto-2:      #4d5560;
  --texto-3:      #79828e;

  /* Marca */
  --marca:        #1f4a8f;
  --marca-forte:  #163a72;
  --marca-suave:  #e9eff8;
  --marca-contraste: #ffffff;

  /* Estado */
  --sucesso:      #157347;
  --sucesso-suave:#e4f4ec;
  --atencao:      #96590a;
  --atencao-suave:#fdf1de;
  --perigo:       #bf2626;
  --perigo-suave: #fbe9e9;
  --info-suave:   #e9eff8;

  /* Séries do gráfico (validadas para contraste e daltonismo) */
  --serie-obs:  #2a78d6;
  --serie-coad: #eb6834;
  --serie-reg:  #1baf7a;
  --serie-nlet: #eda100;

  /* Forma */
  --raio-s: 6px;
  --raio-m: 10px;
  --raio-l: 14px;
  --sombra-1: 0 1px 2px rgba(16, 24, 40, .05);
  --sombra-2: 0 4px 16px -4px rgba(16, 24, 40, .12);
  --sombra-3: 0 20px 48px -12px rgba(16, 24, 40, .28);

  /* Ritmo */
  --esp-1: .25rem;  --esp-2: .5rem;   --esp-3: .75rem;
  --esp-4: 1rem;    --esp-5: 1.5rem;  --esp-6: 2rem;   --esp-7: 3rem;

  --nav-largura: 232px;
  --topo-altura: 60px;
  --largura-max: 1180px;

  --fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
}

/* O modo escuro é escolhido, não é uma inversão automática. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fundo:        #0f1216;
    --superficie:   #191d24;
    --superficie-2: #20252d;
    --superficie-3: #262c35;
    --borda:        #2c333d;
    --borda-forte:  #3d4652;
    --texto:        #eef1f5;
    --texto-2:      #aab3bf;
    --texto-3:      #7d8794;
    --marca:        #6f9de8;
    --marca-forte:  #8db4f0;
    --marca-suave:  #1b2637;
    --marca-contraste: #0f1216;
    --sucesso:      #4ec38a;
    --sucesso-suave:#14271f;
    --atencao:      #e0a558;
    --atencao-suave:#2a2116;
    --perigo:       #ef7f7f;
    --perigo-suave: #2b1a1a;
    --info-suave:   #1b2637;
    --serie-obs:  #3987e5;
    --serie-coad: #d95926;
    --serie-reg:  #199e70;
    --serie-nlet: #c98500;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-2: 0 4px 16px -4px rgba(0, 0, 0, .5);
    --sombra-3: 0 20px 48px -12px rgba(0, 0, 0, .7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fundo:        #0f1216;
  --superficie:   #191d24;
  --superficie-2: #20252d;
  --superficie-3: #262c35;
  --borda:        #2c333d;
  --borda-forte:  #3d4652;
  --texto:        #eef1f5;
  --texto-2:      #aab3bf;
  --texto-3:      #7d8794;
  --marca:        #6f9de8;
  --marca-forte:  #8db4f0;
  --marca-suave:  #1b2637;
  --marca-contraste: #0f1216;
  --sucesso:      #4ec38a;
  --sucesso-suave:#14271f;
  --atencao:      #e0a558;
  --atencao-suave:#2a2116;
  --perigo:       #ef7f7f;
  --perigo-suave: #2b1a1a;
  --info-suave:   #1b2637;
  --serie-obs:  #3987e5;
  --serie-coad: #d95926;
  --serie-reg:  #199e70;
  --serie-nlet: #c98500;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-2: 0 4px 16px -4px rgba(0, 0, 0, .5);
  --sombra-3: 0 20px 48px -12px rgba(0, 0, 0, .7);
}

/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Os componentes definem display, que de outra forma venceria a regra do
   agente do utilizador para [hidden]. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
p  { margin: 0; }

a { color: var(--marca); text-decoration-color: color-mix(in srgb, var(--marca) 35%, transparent); }
a:hover { text-decoration-color: currentColor; }

:where(a, button, input, select, textarea, dialog, [tabindex]):focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: var(--raio-s);
}

.icon { width: 18px; height: 18px; flex: none; }

.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.salto {
  position: absolute; left: -9999px; top: var(--esp-2); z-index: 100;
  background: var(--superficie); padding: var(--esp-2) var(--esp-4);
  border-radius: var(--raio-m); box-shadow: var(--sombra-2);
}
.salto:focus { left: var(--esp-4); }

.ausente { color: var(--texto-3); }

/* -------------------------------------------------------------------------
   3. Layout
   ---------------------------------------------------------------------- */

.topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--esp-4);
  height: var(--topo-altura);
  padding: 0 var(--esp-5);
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

.topo__marca { display: flex; align-items: baseline; gap: var(--esp-3); min-width: 0; }

.marca__sigla {
  font-weight: 700; font-size: .75rem; letter-spacing: .09em;
  color: var(--marca-contraste); background: var(--marca);
  padding: .25rem .45rem; border-radius: var(--raio-s);
}
.marca__nome {
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topo__acoes { display: flex; align-items: center; gap: var(--esp-3); margin-left: auto; }

.utilizador { display: flex; align-items: center; gap: var(--esp-2); }
.utilizador__nome { font-weight: 500; font-size: .875rem; }

.etiqueta {
  font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: .15rem .4rem; border-radius: var(--raio-s);
  background: var(--superficie-3); color: var(--texto-2);
}
/* Cada perfil com a sua cor: a etiqueta é lida de relance, não decorada. */
.etiqueta--admin      { background: var(--marca-suave);  color: var(--marca); }
.etiqueta--supervisor { background: var(--ambar-suave, var(--atencao-suave)); color: var(--atencao); }
.etiqueta--orientador { background: var(--sucesso-suave); color: var(--sucesso); }
.etiqueta--estagiario { background: var(--superficie-3); color: var(--texto-2); }

.corpo {
  display: grid;
  grid-template-columns: var(--nav-largura) minmax(0, 1fr);
  align-items: start;
}

.nav {
  position: sticky; top: var(--topo-altura);
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--esp-4) var(--esp-3);
  height: calc(100dvh - var(--topo-altura));
  border-right: 1px solid var(--borda);
  background: var(--superficie);
  overflow-y: auto;
}

.nav__item {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: .5rem .625rem;
  border-radius: var(--raio-m);
  color: var(--texto-2); text-decoration: none; font-size: .9375rem; font-weight: 500;
}
.nav__item:hover { background: var(--superficie-2); color: var(--texto); }
.nav__item.is-ativo { background: var(--marca-suave); color: var(--marca); font-weight: 600; }
.nav__item .icon { opacity: .8; }

.conteudo {
  padding: var(--esp-5);
  max-width: var(--largura-max);
  width: 100%;
  min-width: 0;   /* sem isto, uma tabela larga alarga a página toda */
  display: flex; flex-direction: column; gap: var(--esp-5);
}

.cabecalho-seccao {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--esp-4); flex-wrap: wrap;
}
.cabecalho-seccao__sub { color: var(--texto-2); font-size: .9375rem; margin-top: 2px; }

/* Autenticação */
.app--auth { display: grid; place-items: center; min-height: 100dvh; padding: var(--esp-5); }
.auth { width: 100%; max-width: 400px; }
.auth__cabecalho { text-align: center; margin-bottom: var(--esp-5); }
.auth__sigla {
  display: inline-block; font-weight: 700; font-size: .75rem; letter-spacing: .09em;
  color: var(--marca-contraste); background: var(--marca);
  padding: .3rem .5rem; border-radius: var(--raio-s); margin-bottom: var(--esp-3);
}
.auth__titulo { font-size: 1.25rem; }
.auth__sub { color: var(--texto-2); font-size: .9375rem; margin-top: var(--esp-1); }
/* A explicação do primeiro arranque: quem chega aqui não sabe o que é
   esta página, e o formulário sozinho não lho diz. */
.auth__nota {
  margin: 0 0 var(--esp-4); padding: var(--esp-3);
  background: var(--superficie-2); border-radius: var(--raio-m);
  color: var(--texto-2); font-size: .9375rem; line-height: 1.55;
}

/* -------------------------------------------------------------------------
   4. Componentes
   ---------------------------------------------------------------------- */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-l);
  padding: var(--esp-5);
  box-shadow: var(--sombra-1);
  min-width: 0;   /* deixa o conteúdo largo deslizar dentro, em vez de esticar a página */
}

/*
   A cadeia inteira tem de poder encolher. Um item de flex ou de grelha tem
   min-width:auto por omissão, e basta um elo esquecido para uma tabela larga
   arrastar a página toda para o lado.
*/
.corpo > *, .conteudo > *, .cartoes > *, .grelha-2 > *, .grelha-3 > * { min-width: 0; }
.tabela-caixa { max-width: 100%; }
.cartao--estreito { max-width: 560px; }
.cartao--compacto { padding: var(--esp-4); }
.cartao--auth { padding: var(--esp-6); box-shadow: var(--sombra-2); }
.cartao__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; }
.cartao__titulo { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; min-width: 0; }
.cartao__sub { color: var(--texto-2); font-size: .875rem; margin-top: var(--esp-2); }
.cartao__acoes { margin-top: var(--esp-4); }
.cartao > * + *:not(.tabela-caixa) { margin-top: var(--esp-4); }
.cartao > .tabela-caixa { margin-top: var(--esp-4); }

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--esp-4);
}

.contagem {
  font-size: .8125rem; font-weight: 600; color: var(--texto-2);
  background: var(--superficie-3); padding: .1rem .45rem; border-radius: 999px;
}

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  padding: .5rem .875rem;
  font: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-m);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.botao:hover { background: var(--superficie-2); }
.botao:active { transform: translateY(1px); }

.botao--primario {
  background: var(--marca); border-color: var(--marca); color: var(--marca-contraste);
}
.botao--primario:hover { background: var(--marca-forte); border-color: var(--marca-forte); }

.botao--perigo { color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 35%, var(--borda)); }
.botao--perigo:hover { background: var(--perigo-suave); }

.botao--discreto { background: transparent; border-color: transparent; color: var(--texto-2); }
.botao--discreto:hover { background: var(--superficie-2); color: var(--texto); }

.botao--icone { padding: .45rem; border-color: transparent; background: transparent; color: var(--texto-2); }
.botao--icone:hover { background: var(--superficie-2); color: var(--texto); }

.botao--pequeno { padding: .3rem .55rem; font-size: .8125rem; border-radius: var(--raio-s); }
.botao--largo { width: 100%; }

/* O par de ícones do tema: só um está visível de cada vez. */
.so-escuro { display: none; }
:root[data-theme="dark"] .so-claro { display: none; }
:root[data-theme="dark"] .so-escuro { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .so-claro  { display: none; }
  :root:not([data-theme="light"]) .so-escuro { display: inline-flex; }
}

/* Formulários */
.formulario { display: flex; flex-direction: column; gap: var(--esp-4); align-items: stretch; }
/* Um botão solto no formulário toma a largura do seu texto, não a da coluna.
   .botao--largo continua a poder ocupar tudo (é o caso do login). */
.formulario > .botao:not(.botao--largo) { align-self: flex-start; }
.campo { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.campo label { font-size: .875rem; font-weight: 500; color: var(--texto-2); }
/* Um grupo de vistos não tem um <label> só — cada visto tem o seu. O rótulo
   do grupo é texto, e tem de se parecer com os outros rótulos. */
.campo__rotulo {
  display: block; font-size: .875rem; font-weight: 500; color: var(--texto-2);
}
.campo__ajuda { font-size: .8125rem; color: var(--texto-3); }

.campo--inline { flex-direction: row; align-items: center; gap: var(--esp-2); }
.campo--inline label { white-space: nowrap; }

input[type="text"], input[type="password"], input[type="date"],
input[type="number"], select, textarea {
  width: 100%; padding: .5rem .7rem;
  font: inherit; font-size: .9375rem;
  color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-m);
}
textarea { resize: vertical; min-height: 4.5rem; }
input[readonly] { background: var(--superficie-3); color: var(--texto-2); }
input::placeholder, textarea::placeholder { color: var(--texto-3); }

select {
  appearance: none;
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.05rem center, right .75rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.entrada-composta { display: flex; align-items: center; gap: var(--esp-2); }
.entrada-composta__sufixo { font-size: .875rem; color: var(--texto-3); white-space: nowrap; }

.grelha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-4); }

.filtros, .seletor {
  display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap;
  padding-bottom: var(--esp-4);
  border-bottom: 1px solid var(--borda);
}
.seletor { border-bottom: 0; padding-bottom: 0; }
.seletor--unico { color: var(--texto-2); font-size: .875rem; }
.seletor__rotulo { color: var(--texto-2); }
.filtros select, .seletor select { width: auto; min-width: 11rem; }

/* Avisos */
.aviso {
  display: flex; align-items: center; gap: .35rem var(--esp-2);
  flex-wrap: wrap;
  padding: .75rem 1rem;
  border-radius: var(--raio-m);
  border: 1px solid transparent;
  font-size: .9375rem;
}
/* Uma ação no fim do aviso encosta à direita — sozinha, ou em grupo, e mesmo
   quando o texto é longo e a empurra para a linha de baixo. O texto ocupa o
   resto: sem isto, um aviso curto deixava o botão a meio da linha. */
.aviso > span:first-child { flex: 1 1 20rem; min-width: 0; }
.aviso > :is(.botao, form, .acoes) { margin-left: auto; }
.aviso > .acoes { gap: var(--esp-2); }
.aviso--sucesso { background: var(--sucesso-suave); border-color: color-mix(in srgb, var(--sucesso) 30%, transparent); color: var(--sucesso); }
.aviso--erro    { background: var(--perigo-suave);  border-color: color-mix(in srgb, var(--perigo) 30%, transparent);  color: var(--perigo); }
.aviso--atencao { background: var(--atencao-suave); border-color: color-mix(in srgb, var(--atencao) 30%, transparent); color: var(--atencao); }
.aviso--info    { background: var(--info-suave);    border-color: color-mix(in srgb, var(--marca) 25%, transparent);   color: var(--marca); }
.aviso strong { font-weight: 700; }

.barra-acoes {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-4); flex-wrap: wrap;
  padding-bottom: var(--esp-4); border-bottom: 1px solid var(--borda);
}

/* Pastilhas e etiquetas de função */
.pastilha {
  display: inline-block; font-size: .75rem; font-weight: 600;
  padding: .15rem .45rem; border-radius: 999px;
  background: var(--superficie-3); color: var(--texto-2);
  white-space: nowrap;
}
.pastilha--atencao { background: var(--atencao-suave); color: var(--atencao); }
.pastilha--info    { background: var(--info-suave);    color: var(--marca); }
/* De quem é a aula. A cor separa as suas das do núcleo de relance; o texto
   di-lo por extenso, para quem não distingue as duas cores e para quem ouve
   a página. A borda esquerda do cartão está tomada pelo estado da
   planificação — este sinal é outro, e por isso vive noutro sítio. */
.pastilha--sua    { background: var(--marca); color: var(--marca-contraste); }
.pastilha--dequem { background: var(--superficie-3); color: var(--texto-2); font-weight: 500; }

.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8125rem; font-weight: 500; white-space: nowrap;
  color: var(--texto);
}
.badge::before {
  content: ""; width: 9px; height: 9px; border-radius: 3px; flex: none;
  background: var(--cor-serie, var(--texto-3));
}
.badge--obs  { --cor-serie: var(--serie-obs); }
.badge--coad { --cor-serie: var(--serie-coad); }
.badge--reg  { --cor-serie: var(--serie-reg); }
.badge--nlet { --cor-serie: var(--serie-nlet); }

/* Tabelas */
.tabela-caixa {
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio-m);
}
.tabela { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabela th, .tabela td {
  padding: .625rem .875rem;
  text-align: left;
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}
.tabela thead th {
  position: sticky; top: 0;
  background: var(--superficie-2);
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-2);
  white-space: nowrap;
}
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela tfoot td {
  background: var(--superficie-2);
  font-size: .875rem; color: var(--texto-2); border-bottom: 0; border-top: 1px solid var(--borda);
}
.col-data  { white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-num   { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-acoes { width: 1%; white-space: nowrap; }
.col-descricao { max-width: 28rem; }
/* Na fila de decisões há três botões por linha: a descrição cede espaço para
   a tabela caber sem deslizar na horizontal. */
.tabela .col-descricao:has(+ .col-acoes) { max-width: 18rem; }
.col-acoes .acoes { flex-wrap: nowrap; }
/* A contagem de dias por baixo da data: a coluna não cresce por causa dela. */
.col-data__nota { display: block; font-size: .75rem; }
.lista-nomes { font-size: .875rem; color: var(--texto-2); }
.lista-nomes--bloco { display: block; margin-top: .15rem; }

.acoes { display: flex; align-items: center; gap: var(--esp-2); justify-content: flex-end; }
.acoes form { display: contents; }

/* Estado vazio */
.vazio {
  padding: var(--esp-6) var(--esp-4);
  text-align: center;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-m);
  background: var(--superficie-2);
}
.vazio__titulo { font-weight: 500; }
.vazio__sub { color: var(--texto-2); font-size: .875rem; margin-top: var(--esp-1); }

/* Primeiros passos numa instalação nova. A numeração não é decoração: cada
   passo depende do anterior — sem orientador não há escola nem estagiários. */
.passos {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  margin-top: var(--esp-4);
  counter-reset: passo;
}
.passo {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
}
.passo::before {
  counter-increment: passo;
  content: counter(passo);
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--superficie-3);
  color: var(--marca);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.passo h3 { font-size: .9375rem; font-weight: 600; }
.passo p  { color: var(--texto-2); font-size: .875rem; margin-top: var(--esp-1); }

/* Destaques do panorama: os casos que não podem esperar. */
.destaques {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--esp-3); margin-top: var(--esp-4);
}
.destaque {
  border: 1px solid var(--borda); border-radius: var(--raio-m);
  padding: var(--esp-3); background: var(--superficie-2);
  display: flex; flex-direction: column; gap: .15rem;
}
.destaque--atencao { border-color: color-mix(in srgb, var(--atencao) 40%, var(--borda)); }
.destaque--bom     { border-color: color-mix(in srgb, var(--sucesso) 40%, var(--borda)); }
.destaque__rotulo  { font-size: .75rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; }
.destaque strong   { font-size: 1rem; }
.destaque__valor   { font-size: .8125rem; color: var(--texto-2); }

/* Coluna de acompanhamento: uma barra fina com o número ao lado. */
.col-indice { white-space: nowrap; }
.col-indice__valor { font-size: .8125rem; color: var(--texto-2); font-variant-numeric: tabular-nums; margin-left: var(--esp-2); }
/* A frente que puxa a percentagem para baixo, por baixo dela. A célula não
   deixa quebrar linha — é o que mantém a barra e o número juntos —, mas esta
   frase precisa de quebrar: sem isso saía da tabela e ficava cortada. */
.col-indice .lista-nomes--bloco {
  white-space: normal; font-size: .75rem; color: var(--texto-3);
  max-width: 14rem;
}
.barra--fina { display: inline-block; width: 5rem; height: 6px; vertical-align: middle; }
.barra__fill--baixo { background: var(--atencao); }
.col-faltas { font-size: .8125rem; }

/* O ficheiro que seguiu com um aviso. */
.aviso-item__anexo {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  margin-top: .2rem; font-size: .8125rem;
}
.aviso-item__anexo .icon { width: .9rem; height: .9rem; }

/* Drive: as pastas em cima, o conteúdo por baixo. */
.pastas { display: flex; flex-wrap: wrap; gap: var(--esp-2); padding-bottom: var(--esp-4); border-bottom: 1px solid var(--borda); }
.pasta {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  padding: .45rem .8rem; border: 1px solid var(--borda); border-radius: 999px;
  font-size: .875rem; color: var(--texto-2); text-decoration: none;
}
.pasta:hover { border-color: var(--borda-forte); color: var(--texto); }
.pasta.is-ativa { border-color: var(--marca); color: var(--marca); background: var(--marca-suave); }
.pasta .icon { width: 1rem; height: 1rem; }
.pasta__conta {
  font-size: .75rem; padding: 0 .35rem; border-radius: 999px;
  background: var(--superficie-3); color: var(--texto-2);
}
.pasta.is-ativa .pasta__conta { background: var(--marca); color: #fff; }

/* Índice do webfólio: é navegação, não uma lista de âncoras. A secção aberta
   fica marcada como um separador escolhido — quem lê sabe onde está. */
.webfolio-indice li { transition: background-color .12s ease; }
.webfolio-indice li:hover { background: var(--superficie-2); }
.webfolio-indice li.is-aberta { background: var(--marca-suave); }
.webfolio-indice li.is-aberta > a { color: var(--marca); font-weight: 600; }
.webfolio-indice li.is-aberta::before { background: var(--marca); color: #fff; }
.webfolio-indice li a { display: block; min-width: 0; }
.webfolio-indice li a::after {
  /* A linha toda é o alvo: o índice tem sete entradas, e acertar só no texto
     de cada uma seria pontaria a mais para um menu. */
  content: ''; position: absolute; inset: 0;
}
.webfolio-indice li { position: relative; }

/* Blog, definições e leitura seguida: o que não é uma das sete secções. */
.webfolio-atalhos {
  display: flex; flex-wrap: wrap; gap: var(--esp-2);
  margin-top: var(--esp-4); padding-top: var(--esp-3);
  border-top: 1px solid var(--borda);
}
.webfolio-atalhos .atalho {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto-2); text-decoration: none; font-size: .8125rem;
}
.webfolio-atalhos .atalho:hover { border-color: var(--borda-forte); color: var(--texto); }
.webfolio-atalhos .atalho.is-aberto {
  border-color: var(--marca); background: var(--marca-suave); color: var(--marca); font-weight: 600;
}
.webfolio-atalhos .atalho .icon { width: 1rem; height: 1rem; }
.webfolio-atalhos .contagem {
  font-size: .75rem; padding: 0 .35rem; border-radius: 999px;
  background: var(--superficie-3); color: var(--texto-2);
}

/* Chegou coisa nova enquanto se estava a ler: diz-se, não se recarrega a
   página por baixo de quem está a escrever. */
.novidade {
  position: fixed; left: 50%; bottom: var(--esp-4); z-index: 60;
  transform: translate(-50%, 1rem); opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1rem; border-radius: 999px; border: 0;
  background: var(--marca); color: #fff; cursor: pointer;
  font: inherit; font-size: .875rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.novidade.is-visivel { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .novidade { transition: none; } }

/* Aulas marcadas: a barra à esquerda diz em que pé está a planificação. */
.cartao--atencao { border-left: 3px solid var(--atencao); }
.marcacao { border-left: 3px solid var(--borda-forte); }
.marcacao--entregue { border-left-color: var(--sucesso); }
.marcacao--urgente  { border-left-color: var(--atencao); }
.marcacao--atrasada,
.marcacao--dada     { border-left-color: var(--perigo); }
/* Uma aula é uma linha de calendário: o essencial em duas linhas, o resto a
   um clique. Numa página com dez aulas, o que se quer é correr os olhos. */
.marcacao { padding: var(--esp-4); }
.marcacao__topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--esp-3); flex-wrap: wrap;
}
.marcacao__quando { display: flex; align-items: baseline; gap: var(--esp-2); flex-wrap: wrap; }
.marcacao__marcas { display: flex; align-items: baseline; gap: var(--esp-2); flex-wrap: wrap; }
/* Vistos lado a lado, em vez de um por linha: são poucos e curtos — os
   colegas de um núcleo —, e empilhados ocupavam meio formulário. */
.opcoes-linha {
  display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4);
  margin-top: var(--esp-2);
}
.opcoes-linha .visto { margin: 0; }

/* Uma conta do ano, à cabeça da lista: diz-se e não se ilustra. */
.grupo-nota--conta {
  margin-top: var(--esp-4); padding: var(--esp-3) var(--esp-4);
  border-left: 3px solid var(--borda-forte); background: var(--superficie-2);
  border-radius: 0 var(--raio-m) var(--raio-m) 0;
}
.marcacao__quando strong { font-size: 1rem; }
.marcacao__aula { margin-top: .2rem; font-size: .9375rem; }
.marcacao__aula .pastilha { margin-left: .25rem; }
.marcacao__estado { margin-top: .3rem; font-size: .8125rem; color: var(--atencao); font-weight: 500; }
.marcacao__publico { margin-top: var(--esp-3); font-size: .8125rem; }
.marcacao__acoes { margin-top: var(--esp-3); }
/* «Quem esteve nesta aula?»: uma linha por colega, com as duas respostas ao
   lado do nome. Recolhido, para não competir com o que decide a aula. */
.marcacao__observadores {
  margin-top: var(--esp-3); padding-top: var(--esp-3);
  border-top: 1px dashed var(--borda);
}
.marcacao__observadores .marcacao__estado { margin-top: 0; color: var(--texto-2); }
.marcacao__observadores .lista-simples { margin-top: var(--esp-2); }

.marcacao__detalhe { margin-top: var(--esp-3); }
.marcacao__detalhe > summary {
  display: inline-flex; align-items: center; gap: .4rem;
  cursor: pointer; list-style: none;
  font-size: .8125rem; color: var(--texto-2);
  padding: .2rem 0;
}
.marcacao__detalhe > summary::-webkit-details-marker { display: none; }
.marcacao__detalhe > summary::after {
  content: "▸"; font-size: .7rem; color: var(--texto-3); transition: transform .15s ease;
}
.marcacao__detalhe[open] > summary::after { transform: rotate(90deg); }
.marcacao__detalhe > summary:hover { color: var(--texto); }
.marcacao__detalhe > summary .icon { width: .95rem; height: .95rem; }
.marcacao__detalhe > *:not(summary) { margin-top: var(--esp-3); }
@media (prefers-reduced-motion: reduce) { .marcacao__detalhe > summary::after { transition: none; } }

/* Listas de ficheiros que não têm de ocupar meio ecrã. */
.anexos--compacta .anexo { padding: .3rem 0; gap: var(--esp-2); }
.anexos--compacta .anexo__nome { font-size: .875rem; }
.anexar--compacta { margin-top: var(--esp-2); padding-top: var(--esp-2); }
.anexo__miniatura--pequena { width: 2rem; height: 2rem; }

/* Carregar um ficheiro é o gesto raro: fica atrás de um clique. */
.anexar-fecho { margin-top: var(--esp-3); }
.anexar-fecho > summary {
  display: inline-flex; align-items: center; gap: .4rem;
  cursor: pointer; list-style: none;
  font-size: .8125rem; color: var(--texto-2); padding: .2rem 0;
}
.anexar-fecho > summary::-webkit-details-marker { display: none; }
.anexar-fecho > summary:hover { color: var(--texto); }
.anexar-fecho > summary .icon { width: .95rem; height: .95rem; }

/* Campo reposto de um rascunho: assinala-se, para não passar por guardado. */
.is-recuperado {
  border-color: var(--atencao) !important;
  box-shadow: inset 3px 0 0 var(--atencao);
}

/* Relatórios e tarefas: grupos com nome, para não serem uma pilha só. */
.titulo-grupo {
  display: flex; align-items: center; gap: var(--esp-2);
  margin: var(--esp-6) 0 var(--esp-3);
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2);
}
.titulo-grupo::after {
  content: ''; flex: 1; height: 1px; background: var(--borda);
}
.titulo-grupo .contagem { text-transform: none; letter-spacing: 0; }
/* Uma linha por baixo do título a dizer o que o grupo junta: sem ela, quem
   chega tem de deduzir a regra a partir do que lá está. */
.grupo-nota { margin: calc(-1 * var(--esp-2)) 0 var(--esp-3); font-size: .8125rem; color: var(--texto-2); }

.tarefa--minha { border-left: 3px solid var(--marca); }

.tarefa-progresso { display: flex; align-items: center; gap: var(--esp-3); margin-top: var(--esp-3); }
.tarefa-progresso .barra { flex: 1; max-width: 14rem; }

/* Uma entrega por pessoa, fechada até se querer ler. */
.entregas { list-style: none; margin: var(--esp-3) 0 0; padding: 0; display: flex; flex-direction: column; }
.entregas > li { border-top: 1px solid var(--borda); }
.entrega-fecho > summary {
  display: flex; align-items: center; gap: var(--esp-2);
  padding: .55rem .25rem; cursor: pointer; list-style: none;
  border-radius: var(--raio-s);
}
.entrega-fecho > summary::-webkit-details-marker { display: none; }
.entrega-fecho > summary::after {
  content: "▸"; margin-left: auto; font-size: .75rem; color: var(--texto-3);
  transition: transform .15s ease;
}
.entrega-fecho[open] > summary::after { transform: rotate(90deg); }
.entrega-fecho > summary:hover { background: var(--superficie-2); }
.entrega-fecho__nome { font-weight: 600; font-size: .9375rem; }
.entrega-fecho > summary time { font-size: .75rem; color: var(--texto-3); }
.entrega-fecho__estrelas { font-size: .75rem; }
.entrega { padding: var(--esp-3) 0 var(--esp-4) var(--esp-3); border-left: 2px solid var(--borda); }

/* Cada tarefa é um fecho: o cabeçalho diz o essencial — título, estado,
   quantas entregas há e quantas faltam ler — e o corpo abre-se a pedido. Com
   dezenas de tarefas no ano, tudo aberto era uma parede de formulários. */
.tarefa-fecho > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2);
  cursor: pointer; list-style: none; padding: .15rem 0;
}
.tarefa-fecho > summary::-webkit-details-marker { display: none; }
.tarefa-fecho > summary::after {
  content: "▸"; margin-left: auto; font-size: .8rem; color: var(--texto-3);
  transition: transform .15s ease;
}
.tarefa-fecho[open] > summary::after { transform: rotate(90deg); }
.tarefa-fecho > summary:hover .cartao__titulo { color: var(--acento); }
.tarefa-fecho > summary .cartao__titulo { margin: 0; }
.tarefa-fecho[open] > summary { margin-bottom: var(--esp-3); }
.tarefa-fecho__barra { flex: 0 0 6rem; }
@media (prefers-reduced-motion: reduce) { .tarefa-fecho > summary::after { transition: none; } }

/* A barra por cima da lista de entregas: o resumo à esquerda, o filtro à
   direita. O filtro só existe com JavaScript — sem ele, veem-se todas. */
.entregas-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2);
  margin-top: var(--esp-3);
}
.entregas-barra > p { margin: 0; }
.entregas-filtro { display: flex; flex-wrap: wrap; gap: .25rem; margin-left: auto; }
.entregas-filtro .botao.is-escolhido {
  background: var(--acento); border-color: var(--acento); color: #fff;
}

/* Entregue, o formulário dobra-se e fica esta linha no lugar dele: o estado,
   quando foi, e até quando se pode voltar atrás. */
/* O editor da grelha: uma tabela de campos, com o peso à direita e estreito —
   é um número de um dígito, não precisa da largura de uma frase. */
/* Uma lista de explicações, sem os traços e a folga de uma lista de linhas
   com ações: aqui cada item é um parágrafo, não uma coisa em que se carrega. */
.lista-simples--seca > li {
  display: block; border: 0; padding: .35rem 0;
  font-size: .9375rem; line-height: 1.55; color: var(--texto-2);
}

/* Como se faz a conta da classificação: um bloco à parte, porque é a única
   coisa da página que se lê antes de se mexer em alguma coisa. */
.grelha-editor__conta {
  margin-top: var(--esp-4); padding: var(--esp-4);
  background: var(--superficie-2); border-radius: var(--raio-m);
  font-size: .9375rem; line-height: 1.6;
}
.grelha-editor__conta h3 { margin: 0 0 var(--esp-2); font-size: 1rem; }
.grelha-editor__conta p { margin: 0 0 var(--esp-2); color: var(--texto-2); }
.grelha-editor__conta p:last-child { margin-bottom: 0; }
.grelha-editor__exemplo code {
  display: inline-block; margin-top: .35rem; padding: .25rem .5rem;
  background: var(--superficie); border-radius: var(--raio-s);
}

.grelha-editor__grupo {
  margin-top: var(--esp-4); padding-top: var(--esp-3);
  border-top: 1px solid var(--borda);
}
.tabela--grelha-editor input[type="text"] { width: 100%; }
.campo--peso { width: 5rem; text-align: right; }

.entrega-estado {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2);
  margin: 0 0 var(--esp-2); font-size: .875rem;
}
@media (prefers-reduced-motion: reduce) { .entrega-fecho > summary::after { transition: none; } }

/* Cada pessoa por avaliar é o seu próprio caminho. */
.por-avaliar { display: inline-flex; flex-wrap: wrap; gap: .35rem; vertical-align: middle; }

/* O que a observação compara: o que estava planeado e o que o estagiário
   pensou da aula, à mão de quem preenche a ficha. */
.ficha-contexto {
  display: flex; flex-direction: column; gap: .35rem;
  margin: var(--esp-3) 0 0; padding: var(--esp-3);
  border-radius: var(--raio-m); background: var(--superficie-2);
  font-size: .875rem;
}
.ficha-contexto p { display: flex; align-items: center; gap: .45rem; }
.ficha-contexto .icon { width: 1rem; height: 1rem; flex: none; color: var(--texto-3); }

/* Uma lista de coisas com um nome à esquerda e o estado à direita. */
.lista-simples { list-style: none; margin: var(--esp-3) 0; padding: 0; display: flex; flex-direction: column; }
.lista-simples li {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: .5rem 0; border-bottom: 1px solid var(--borda);
}
.lista-simples li:last-child { border-bottom: 0; }
.lista-simples li > :last-child { margin-left: auto; font-size: .8125rem; }
@media (max-width: 639px) {
  .lista-simples li { flex-wrap: wrap; }
  .lista-simples li > :last-child { margin-left: 0; }
}

/* Um nome que leva ao perfil de quem se está a ler. */
.ligacao-pessoa { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.ligacao-pessoa:hover { color: var(--marca); border-bottom-color: currentColor; }

/* Aparência do webfólio: escolhe-se vendo, não lendo o nome de uma cor. */
.escolha-visual { border: 0; padding: 0; margin: 0 0 var(--esp-4); }
.escolha-visual legend {
  padding: 0; margin-bottom: var(--esp-2);
  font-size: .8125rem; font-weight: 600; color: var(--texto-2);
}
.escolha-visual__opcoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.amostra {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .75rem .4rem .5rem; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--superficie);
  font-size: .8125rem; color: var(--texto-2); cursor: pointer;
}
.amostra:hover { border-color: var(--borda-forte); color: var(--texto); }
.amostra input { position: absolute; opacity: 0; width: 0; height: 0; }
.amostra:focus-within { outline: 2px solid var(--marca); outline-offset: 2px; }
.amostra.is-escolhida { border-color: var(--marca); background: var(--marca-suave); color: var(--texto); font-weight: 600; }
.amostra__cor {
  width: 1.25rem; height: 1.25rem; border-radius: 50%; flex: none;
  background: var(--amostra); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.amostra__letra {
  width: 1.6rem; text-align: center; flex: none;
  font-size: 1rem; color: var(--texto);
}
.amostra--classica .amostra__letra,
.amostra--mista .amostra__letra { font-family: Georgia, "Times New Roman", serif; }

.campo--estreito { max-width: 22rem; }

/* Passo a passo: seguir a ordem do regulamento sem voltar ao índice. */
.passo-a-passo {
  display: flex; justify-content: space-between; gap: var(--esp-3);
  margin-top: var(--esp-4);
}
.passo-a-passo .botao { max-width: 48%; }

/* Métricas */
.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--esp-3);
}
.metrica {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-m);
  padding: var(--esp-4);
  display: flex; flex-direction: column; gap: var(--esp-1);
}
.metrica--atencao { border-color: color-mix(in srgb, var(--atencao) 45%, var(--borda)); }
.metrica__valor { font-size: 1.75rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.metrica__rotulo { font-size: .8125rem; color: var(--texto-2); }

/* Anel de progresso */
.anel { position: relative; width: 128px; height: 128px; flex: none; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel__fundo  { fill: none; stroke: var(--superficie-3); stroke-width: 10; }
.anel__frente {
  fill: none; stroke: var(--marca); stroke-width: 10; stroke-linecap: round;
  transition: stroke-dasharray .6s ease;
}
.anel__centro {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.15;
}
.anel__centro strong { font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.anel__centro strong span { font-size: .875rem; font-weight: 500; color: var(--texto-2); }
.anel__rotulo { font-size: .75rem; color: var(--texto-2); }

/* Resumo */
.resumo { display: flex; align-items: center; gap: var(--esp-6); flex-wrap: wrap; }
.mini-resumo { display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap; }
.resumo__numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--esp-4); margin: 0; flex: 1; min-width: 0;
}
.resumo__numeros--coluna { grid-template-columns: 1fr; gap: var(--esp-3); }
.resumo__numeros dt { font-size: .8125rem; color: var(--texto-2); }
.resumo__numeros dd {
  margin: 0; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
/* Qualificadores («· 18 regências sem ficha») não competem com o número. */
.resumo__numeros dd .ausente,
.resumo__numeros dd small {
  font-size: .8125rem; font-weight: 400;
}

/* Requisitos */
/* São sempre quatro funções. Deixar a grelha adivinhar dava 3+1, com um cartão
   órfão na segunda linha; com um número fixo, a divisão pode ser exata. */
.requisitos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--esp-4);
}
@media (min-width: 1024px) { .requisitos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .requisitos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.requisito {
  border: 1px solid var(--borda); border-radius: var(--raio-m);
  padding: var(--esp-4); background: var(--superficie-2);
  display: flex; flex-direction: column; gap: var(--esp-3);
}
.requisito.is-completo { border-color: color-mix(in srgb, var(--sucesso) 40%, var(--borda)); }
.requisito__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.requisito__pct { font-weight: 650; font-variant-numeric: tabular-nums; }
.requisito__detalhe { font-size: .8125rem; color: var(--texto-2); }
.requisito__detalhe strong { color: var(--texto); }

.barra {
  height: 8px; border-radius: 999px; background: var(--superficie-3); overflow: hidden;
}
.barra__fill { display: block; height: 100%; border-radius: 999px; background: var(--texto-3); }
.barra__fill--obs  { background: var(--serie-obs); }
.barra__fill--coad { background: var(--serie-coad); }
.barra__fill--reg  { background: var(--serie-reg); }
.barra__fill--nlet { background: var(--serie-nlet); }
/* O tempo letivo da semana junta três funções numa só barra: fica com a cor da
   marca, e o não-letivo mantém a sua, a mesma de todos os outros gráficos. */
.barra__fill--letivo { background: var(--marca); }

.semanas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--esp-3);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--borda);
  font-size: .9375rem;
}
.semanas strong { font-variant-numeric: tabular-nums; }

/* A semana em curso, e as anteriores ao lado dela.
   Sem cor de alarme em lado nenhum: as oito e as quatro horas são a referência
   das Normas, não um limiar que se falha — há interrupções letivas, e a
   distribuição pode ser gerida de forma flexível. O que distingue a semana em
   curso é ela estar ainda a encher, e isso diz-se com um fundo mais claro e
   não com uma cor de aviso. */
.semana-atual {
  padding-top: var(--esp-4);
  border-top: 1px solid var(--borda);
  display: flex; flex-direction: column; gap: var(--esp-4);
}
.semana-atual h3 {
  margin: 0; font-size: .9375rem; font-weight: 650;
  display: flex; align-items: baseline; gap: var(--esp-2); flex-wrap: wrap;
}
.semana-atual__linhas { display: flex; flex-direction: column; gap: var(--esp-2); }
.semana-atual__linha {
  display: grid; grid-template-columns: 5.5rem minmax(90px, 1fr) auto;
  align-items: center; gap: var(--esp-3);
  font-size: .875rem;
}
.semana-atual__linha .barra { height: 10px; }
.semana-atual__rotulo { color: var(--texto-2); }
.semana-atual__conta { font-variant-numeric: tabular-nums; white-space: nowrap; }
.semana-atual__conta strong { color: var(--texto); }
@media (max-width: 560px) {
  .semana-atual__linha { grid-template-columns: 5.5rem 1fr; row-gap: var(--esp-1); }
  .semana-atual__conta { grid-column: 2; }
}

/* Uma chave de cor, para as barras empilhadas se poderem ler. */
.chave { display: inline-flex; align-items: center; gap: .35rem; color: var(--texto-2); }
.chave::before {
  content: ""; width: .55rem; height: .55rem; border-radius: 3px; background: var(--texto-3);
}
.chave--letivo::before { background: var(--marca); }
.chave--nlet::before   { background: var(--serie-nlet); }

.faixa-semanas { display: flex; flex-direction: column; gap: var(--esp-2); }
.faixa-semanas__topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--esp-3); flex-wrap: wrap;
  font-size: .8125rem; color: var(--texto-2);
}
.faixa-semanas__legenda { display: inline-flex; gap: var(--esp-3); }
/* A faixa tem largura própria, e não a do cartão: com barras de dezoito pontos
   num cartão de oitocentos, a linha de referência atravessava meio ecrã vazio
   e o eixo ficava a apontar para onde não há barra nenhuma. */
.faixa-semanas__grafico {
  /* Exatamente a largura das barras: com folga à direita, a linha tracejada e
     o eixo passavam do último bloco e ficavam a marcar espaço vazio. */
  width: max-content; max-width: 100%;
  display: flex; flex-direction: column; gap: var(--esp-2);
}
.faixa-semanas__barras {
  position: relative;
  display: flex; align-items: flex-end; gap: 10px;
  height: 60px;
}
/* A altura da semana que as Normas pedem, atravessada a tracejado: é o que dá
   sentido à altura das barras — «cheio» passa a querer dizer alguma coisa. */
.faixa-semanas__barras::before {
  content: ""; position: absolute; left: 0; right: 0; z-index: 2;
  bottom: var(--referencia, 100%); height: 0;
  border-top: 1px dashed var(--borda-forte);
  pointer-events: none;
}
/* Uma semana são duas barras lado a lado, cada uma no seu carril: a azul
   contra as horas letivas, a âmbar contra as não letivas. Juntas num par
   apertado, com folga entre semanas, para se lerem como oito grupos e não
   como dezasseis barras. */
.faixa-semanas__semana {
  position: relative;
  display: flex; align-items: flex-end; gap: 3px;
  flex: 0 0 auto; width: 34px; height: 100%;
}
.faixa-semanas__carril {
  flex: 1 1 0; height: 100%;
  /* Coluna invertida: o primeiro elemento assenta no fundo, e o que espera
     validação empilha-se por cima — como o segmento sombreado das outras
     barras da plataforma. */
  display: flex; flex-direction: column-reverse; justify-content: flex-start;
  border-radius: var(--raio-s);
  background: var(--superficie-3);
  overflow: hidden;
}
/* A semana em curso ainda está a encher: distingue-se pelo fundo dos carris e
   pela etiqueta do eixo por baixo. Nada de cor de aviso — não está em falta,
   está a meio. */
.faixa-semanas__semana.is-atual .faixa-semanas__carril { background: var(--marca-suave); }
.faixa-semanas__barra {
  display: block; width: 100%;
  border-radius: var(--raio-s) var(--raio-s) 0 0;
  /* Meia hora de trabalho validado não pode desenhar-se com um pixel e meio e
     passar por semana vazia. Havendo registo, há barra que se veja. */
  min-height: 4px;
}
.faixa-semanas__barra--letivo { background: var(--marca); }
.faixa-semanas__barra--nlet   { background: var(--serie-nlet); }
/* O que ainda espera o orientador: a mesma cor, mais apagada. */
.faixa-semanas__barra.is-pendente { opacity: .32; border-radius: var(--raio-s) var(--raio-s) 0 0; }
/* O topo arredondado é do segmento de cima, seja ele qual for. Numa coluna
   invertida, o de cima é o último — e os que valem zero não se desenham. */
.faixa-semanas__carril > .faixa-semanas__barra:not(:last-child) { border-radius: 0; }
.faixa-semanas__eixo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--esp-3); font-size: .75rem; color: var(--texto-3);
}
.faixa-semanas__nota { margin: 0; font-size: .75rem; color: var(--texto-3); }

.semana-atual__ritmo {
  margin: 0; font-size: .875rem; color: var(--texto-2);
  padding: .6rem .8rem;
  border-radius: var(--raio-m);
  background: var(--marca-suave);
}
.semana-atual__ritmo strong { color: var(--texto); font-variant-numeric: tabular-nums; }

/* Diálogos */
.modal {
  width: min(560px, calc(100vw - 2rem));
  padding: var(--esp-5);
  border: 1px solid var(--borda);
  border-radius: var(--raio-l);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-3);
}
.modal::backdrop { background: rgba(10, 14, 20, .55); backdrop-filter: blur(2px); }
.modal__topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  margin-bottom: var(--esp-2);
}
.modal__topo .botao--icone { font-size: 1.375rem; line-height: 1; }
.modal__rodape {
  display: flex; justify-content: flex-end; gap: var(--esp-2);
  padding-top: var(--esp-4); border-top: 1px solid var(--borda);
}

/* -------------------------------------------------------------------------
   5. Gráfico
   ---------------------------------------------------------------------- */

.grafico__titulo { font-size: 1.125rem; font-weight: 600; margin-bottom: var(--esp-4); }
.grafico__area { overflow-x: auto; }
.grafico svg { display: block; width: 100%; min-width: 520px; height: auto; }

.g-grelha { stroke: var(--borda); stroke-width: 1; }
.g-base   { stroke: var(--borda-forte); stroke-width: 1; }
.g-eixo   { fill: var(--texto-3); font-size: 11px; font-family: var(--fonte); }
.g-total  { fill: var(--texto-2); font-size: 11px; font-weight: 600; font-family: var(--fonte); }

.g-barra { transition: opacity .12s; }
.g-barra:hover { opacity: .78; }
.g-barra--obs  { fill: var(--serie-obs); }
.g-barra--coad { fill: var(--serie-coad); }
.g-barra--reg  { fill: var(--serie-reg); }
.g-barra--nlet { fill: var(--serie-nlet); }

.legenda {
  display: flex; flex-wrap: wrap; gap: var(--esp-4);
  margin-top: var(--esp-4); padding-top: var(--esp-3);
  border-top: 1px solid var(--borda);
  font-size: .8125rem; color: var(--texto-2);
}
.legenda__item { display: inline-flex; align-items: center; gap: .4rem; }
.legenda__marca { width: 10px; height: 10px; border-radius: 3px; background: var(--texto-3); }
.legenda__marca--obs  { background: var(--serie-obs); }
.legenda__marca--coad { background: var(--serie-coad); }
.legenda__marca--reg  { background: var(--serie-reg); }
.legenda__marca--nlet { background: var(--serie-nlet); }

/* -------------------------------------------------------------------------
   6. Responsivo
   ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   6. Responsivo
   ---------------------------------------------------------------------- */

/*
   Três formatos, e não um encolhimento do mesmo:

   · computador (≥ 1024px) — navegação lateral fixa, conteúdo em coluna larga
   · tablet     (640–1023) — navegação passa ao topo, conteúdo a toda a largura
   · telemóvel  (< 640px)  — uma coluna, alvos de toque maiores, tabelas que
                             deslizam dentro da sua caixa

   Regra que atravessa tudo: nada faz a página deslizar na horizontal. O que é
   largo (tabelas, grelhas, gráficos) desliza dentro do seu próprio contentor.
*/

/* --- Tablet e abaixo: a navegação sai da lateral ----------------------- */
@media (max-width: 1023px) {
  .corpo { grid-template-columns: minmax(0, 1fr); }

  .nav {
    position: sticky; top: var(--topo-altura); z-index: 15;
    height: auto;
    flex-direction: row; gap: var(--esp-1);
    padding: var(--esp-2) var(--esp-4);
    border-right: 0; border-bottom: 1px solid var(--borda);
    overflow-x: auto;
    scrollbar-width: thin;
    /* A barra de deslize não deve empurrar o conteúdo. */
    scroll-padding-inline: var(--esp-4);
  }
  .nav__item {
    white-space: nowrap;
    padding: .45rem .7rem;
  }
  .nav__conta { margin-left: .35rem; }

  .conteudo { padding: var(--esp-4); max-width: none; }

  /* Dois painéis lado a lado deixam de caber com conforto. */
  .grelha-3   { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

/* --- Tablet: aproveitar a largura que ainda há ------------------------- */
@media (min-width: 640px) and (max-width: 1023px) {
  .resumo { gap: var(--esp-5); }
  .requisitos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metricas   { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .cartoes    { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
  .autonomo   { padding: var(--esp-5) var(--esp-4) var(--esp-6); }
}

/* --- Telemóvel -------------------------------------------------------- */
@media (max-width: 639px) {
  :root { --topo-altura: 54px; }

  .topo { padding: 0 var(--esp-3); gap: var(--esp-2); }
  .marca__nome, .utilizador__nome { display: none; }
  .topo__acoes { gap: var(--esp-1); }
  .etiqueta { font-size: .625rem; padding: .1rem .3rem; }

  .nav { padding: var(--esp-2) var(--esp-3); }
  .conteudo { padding: var(--esp-3); gap: var(--esp-4); }

  .cartao { padding: var(--esp-4); border-radius: var(--raio-m); }
  .cartao--auth { padding: var(--esp-5); }

  h1 { font-size: 1.3rem; }
  .cabecalho-seccao { align-items: stretch; gap: var(--esp-3); }
  .cabecalho-seccao > .acoes,
  .cabecalho-seccao > .botao { width: 100%; justify-content: center; }

  /* Uma coluna em tudo o que era grelha. */
  .grelha-2, .grelha-3, .requisitos,
  .cartoes, .semanas, .ficha-id, .impresso__meta { grid-template-columns: 1fr; }
  .metricas { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
  .metrica__valor { font-size: 1.5rem; }

  .resumo { flex-direction: column; align-items: flex-start; gap: var(--esp-4); }
  .resumo__numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .mini-resumo { flex-direction: column; align-items: flex-start; }
  .anel { width: 104px; height: 104px; }

  /* Filtros e seletores empilham, com alvos de toque decentes. */
  .filtros, .seletor { flex-direction: column; align-items: stretch; gap: var(--esp-3); }
  .campo--inline { flex-direction: column; align-items: stretch; gap: var(--esp-1); }
  .filtros select, .seletor select { width: 100%; min-width: 0; }

  .barra-acoes { flex-direction: column; align-items: stretch; }
  .barra-acoes .botao { width: 100%; justify-content: center; }

  /* A lista de registos tem sete colunas: num ecrã de 390px, deslizar para a
     direita para chegar ao botão da reflexão não é uma interface. Cada linha
     passa a cartão, com o nome da coluna à esquerda do valor. */
  .tabela--registos,
  .tabela--registos thead,
  .tabela--registos tbody,
  .tabela--registos tfoot,
  .tabela--registos tr,
  .tabela--registos td { display: block; width: auto; }
  .tabela--registos thead { display: none; }
  .tabela--registos .tabela-caixa { overflow: visible; }
  .tabela--registos tbody tr {
    border: 1px solid var(--borda); border-radius: var(--raio-m);
    padding: var(--esp-3); margin-bottom: var(--esp-3);
    background: var(--superficie);
  }
  /* Em cartão, a marca de «por validar» é o cartão inteiro; as células não
     podem continuar a pintar-se, ou o realce fica cortado a meio. */
  .tabela--registos tbody tr.linha--pendente {
    background: color-mix(in srgb, var(--atencao) 7%, transparent);
    border-color: color-mix(in srgb, var(--atencao) 35%, var(--borda));
  }
  .tabela--registos tbody tr.linha--pendente > td,
  .tabela--registos tbody tr.linha--pendente:hover > td { background: none; }
  .tabela--registos tbody tr:hover { background: var(--superficie); }
  .tabela--registos tbody td {
    border: 0; padding: .2rem 0; text-align: left;
    display: flex; align-items: baseline; gap: var(--esp-3);
  }
  .tabela--registos tbody td::before {
    content: attr(data-rotulo);
    flex: 0 0 5.5rem;
    color: var(--texto-3); font-size: .75rem;
    text-transform: uppercase; letter-spacing: .04em;
  }
  /* O botão da reflexão e as ações ficam em baixo, à largura toda. */
  .tabela--registos tbody td.col-atividade,
  .tabela--registos tbody td.col-acoes {
    display: block; margin-top: var(--esp-3);
  }
  .tabela--registos tbody td.col-atividade::before,
  .tabela--registos tbody td.col-acoes::before { content: none; }
  .tabela--registos .botao--atividade { width: 100%; justify-content: center; }
  .tabela--registos .col-acoes .acoes { justify-content: stretch; }
  .tabela--registos .col-acoes .acoes > * { flex: 1; }
  .tabela--registos .col-acoes .botao { width: 100%; justify-content: center; }
  .tabela--registos tfoot td { display: block; padding: var(--esp-2) 0 0; }
  .tabela--registos tfoot td:first-child { border-top: 1px solid var(--borda); }

  /* Um dedo precisa de mais do que 24px. */
  .botao { padding: .6rem 1rem; }
  .botao--pequeno { padding: .45rem .7rem; font-size: .8125rem; }
  .acoes { flex-wrap: wrap; justify-content: flex-start; gap: var(--esp-2); }

  .tabela th, .tabela td { padding: .5rem .6rem; }
  .col-descricao { max-width: 14rem; }

  .modal { padding: var(--esp-4); width: calc(100vw - 1.5rem); }
  .modal__rodape { flex-direction: column-reverse; }
  .modal__rodape .botao { width: 100%; justify-content: center; }

  .avisos .aviso-item { gap: var(--esp-2); }
  /* No telemóvel o aviso é uma coluna: o texto por cima, a ação por baixo,
     de lado a lado. Aqui o eixo principal passa a ser o vertical, e por isso
     a base do texto tem de ser reposta — senão «flex-basis» vira altura e
     abre um vazio entre a frase e o botão. */
  .aviso { flex-direction: column; align-items: stretch; }
  .aviso > span:first-child { flex: 0 1 auto; }
  .aviso > :is(.botao, form, .acoes) { margin-left: 0; width: 100%; }
  .aviso > .acoes { justify-content: stretch; }
  .aviso .botao { width: 100%; justify-content: center; }

  .anexo { flex-wrap: wrap; }
  .anexo form { margin-left: 0; width: 100%; }
  .anexar { flex-direction: column; align-items: stretch; }
  .anexar .botao { justify-content: center; }

  .endereco { flex-direction: column; align-items: flex-start; }
  .endereco code { max-width: 100%; overflow-x: auto; }

  .autonomo { padding: var(--esp-4) var(--esp-3) var(--esp-6); }
  .wf__capa h1 { font-size: 1.6rem; }

  .impresso { padding: var(--esp-4); }
  .conteudo { max-width: none; }
}

/* --- A grelha de observação em ecrã estreito --------------------------- */
/*
   24 indicadores por 5 colunas não cabem num telemóvel. Em vez de encolher até
   ficar ilegível, cada indicador passa a um bloco: o texto por cima, as opções
   por baixo, em linha e com espaço para o dedo.
*/
@media (max-width: 719px) {
  .grelha__tabela, .grelha__tabela tbody, .grelha__tabela tr { display: block; }
  .grelha__tabela thead { display: none; }

  .grelha__tabela tr {
    padding: var(--esp-3) var(--esp-3) var(--esp-2);
    border-top: 1px solid var(--borda);
  }
  .grelha__tabela tbody tr:first-child { border-top: 0; }
  .grelha__tabela tbody tr + tr th,
  .grelha__tabela tbody tr + tr td { border-top: 0; }

  .grelha__indicador {
    display: block; width: auto;
    padding: 0 0 var(--esp-2) !important;
    font-size: .875rem;
  }
  .grelha__num { min-width: 1.2rem; }
  .grelha__notas { margin-left: 1.2rem; }

  /* As cinco opções passam a uma fila, com o nível escrito por baixo. */
  .grelha__tabela td {
    display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
    width: 19%; padding: .3rem 0;
    text-align: center; vertical-align: top;
  }
  .grelha__tabela td::after {
    content: attr(data-nivel);
    font-size: .625rem; color: var(--texto-3); letter-spacing: .03em;
  }
  .radio input { width: 1.4rem; height: 1.4rem; }

  .grelha__dim-topo { flex-wrap: wrap; }
  .grelha__grupo-topo { padding: 0 var(--esp-3) .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* -------------------------------------------------------------------------
   6b. Estado dos registos, fichas, avisos e webfólio
   ---------------------------------------------------------------------- */

/* Contador na navegação */
.nav__conta {
  margin-left: auto;
  min-width: 1.35rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--atencao);
  color: var(--superficie);
  font-size: .6875rem; font-weight: 700; line-height: 1.35rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nav__item.is-ativo .nav__conta { background: var(--marca); }

/* Pastilhas de estado */
.pastilha--ok     { background: var(--sucesso-suave); color: var(--sucesso); }
.pastilha--perigo { background: var(--perigo-suave);  color: var(--perigo); }

/* Linhas da tabela conforme o estado */
.linha--pendente > td { background: color-mix(in srgb, var(--atencao) 6%, transparent); }
.linha--eliminar > td { background: color-mix(in srgb, var(--perigo) 7%, transparent); }
.tabela tbody tr.linha--pendente:hover > td { background: color-mix(in srgb, var(--atencao) 11%, transparent); }

/* Valor proposto ao lado do validado */
.proposto {
  display: inline-block;
  margin-left: .35rem;
  font-size: .8125rem;
  color: var(--atencao);
  white-space: nowrap;
}
.antes-depois {
  margin-top: .15rem;
  font-size: .75rem;
  color: var(--atencao);
  white-space: nowrap;
}

/* Barra de progresso com segmento por validar */
.barra { position: relative; display: flex; }
.barra__fill, .barra__pendente { display: block; height: 100%; }
.barra__fill { border-radius: 999px 0 0 999px; }
.barra__fill:only-child { border-radius: 999px; }
.barra__pendente {
  border-radius: 0 999px 999px 0;
  opacity: .32;
  background: var(--texto-3);
}
.barra__pendente--obs  { background: var(--serie-obs); }
.barra__pendente--coad { background: var(--serie-coad); }
.barra__pendente--reg  { background: var(--serie-reg); }
.barra__pendente--nlet { background: var(--serie-nlet); }
.barra__pendente--letivo { background: var(--marca); }
.barra--linha { width: 8rem; }


.valor--pendente { color: var(--atencao); }
.nota-pendente {
  padding: .7rem .9rem;
  border-radius: var(--raio-m);
  background: var(--atencao-suave);
  color: var(--atencao);
  font-size: .875rem;
}

.acoes--esquerda { justify-content: flex-start; }

/* Etiquetas do tipo de ficha */
.badge-ficha {
  display: inline-flex; align-items: center;
  font-size: .75rem; font-weight: 600;
  padding: .15rem .5rem; border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.badge-ficha--auto       { color: var(--serie-obs); }
.badge-ficha--hetero     { color: var(--serie-coad); }
.badge-ficha--orientador { color: var(--serie-reg); }
.badge-ficha--supervisor { color: var(--serie-nlet); }

/* Níveis da escala 1–4 */
.nivel {
  display: inline-flex; flex-direction: column; line-height: 1.2;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.nivel small { font-size: .6875rem; font-weight: 500; color: var(--texto-2); }
.nivel--n1 { color: var(--perigo); }
.nivel--n2 { color: var(--atencao); }
.nivel--n3 { color: var(--marca); }
.nivel--n4 { color: var(--sucesso); }
.nivel--n0 { color: var(--texto-3); }

.nivel-grande {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 8rem; padding: var(--esp-4);
  border: 2px solid currentColor; border-radius: var(--raio-l);
}
.nivel-grande strong { font-size: 2.25rem; line-height: 1; font-variant-numeric: tabular-nums; }
.nivel-grande span   { font-size: .8125rem; margin-top: .2rem; }

.resumo--ficha { align-items: stretch; }

/* Grelha de observação */
.grelha { display: flex; flex-direction: column; gap: var(--esp-5); }
.grelha__dim {
  border: 1px solid var(--borda); border-radius: var(--raio-m); overflow: hidden;
}
.grelha__dim-topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  padding: .7rem 1rem;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
}
.grelha__dim-topo h3 { font-size: 1rem; }
.grelha__grupo { padding: var(--esp-3) 0; }
.grelha__grupo + .grelha__grupo { border-top: 1px solid var(--borda); }
.grelha__grupo-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3);
  padding: 0 1rem .5rem;
}
.grelha__grupo-topo h4 { font-size: .875rem; color: var(--texto-2); font-weight: 600; }
.grelha__media { font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.grelha__tabela { width: 100%; border-collapse: collapse; }
.grelha__tabela th, .grelha__tabela td { padding: .4rem .5rem; }
.grelha__tabela thead th {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-3); font-weight: 600;
  border-bottom: 1px solid var(--borda);
}
.grelha__tabela tbody tr + tr th, .grelha__tabela tbody tr + tr td {
  border-top: 1px solid var(--borda);
}
.grelha__indicador {
  text-align: left; font-weight: 400; font-size: .875rem;
  padding-left: 1rem !important;
  display: table-cell;
}
.grelha__indicador > span:first-child + span { display: inline; }
.grelha__num {
  display: inline-block; min-width: 1.5rem;
  color: var(--texto-3); font-variant-numeric: tabular-nums; font-size: .8125rem;
}
.grelha__notas {
  margin: .3rem 0 0 1.5rem; padding: 0;
  font-size: .8125rem; color: var(--texto-2);
}
.grelha__nivel { width: 3rem; text-align: center; }
.grelha__tabela tbody tr:hover th, .grelha__tabela tbody tr:hover td { background: var(--superficie-2); }

.radio { display: inline-flex; cursor: pointer; padding: .25rem; }
.radio input { width: 1.1rem; height: 1.1rem; accent-color: var(--marca); cursor: pointer; }

.marca { font-size: 1.1rem; line-height: 1; }
.marca--vazia { color: var(--borda-forte); }
.marca--n1 { color: var(--perigo); }
.marca--n2 { color: var(--atencao); }
.marca--n3 { color: var(--marca); }
.marca--n4 { color: var(--sucesso); }
.marca--na { font-size: .6875rem; font-weight: 600; color: var(--texto-3); }

.grelha__legenda {
  display: flex; flex-wrap: wrap; gap: var(--esp-4);
  margin-top: var(--esp-4); padding-top: var(--esp-3);
  border-top: 1px solid var(--borda);
  font-size: .8125rem; color: var(--texto-2);
}
.grelha__legenda b { color: var(--texto); }

.ficha-id {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--esp-3); margin: 0;
  padding-top: var(--esp-4); border-top: 1px solid var(--borda);
}
.ficha-id dt { font-size: .75rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; }
/* A descrição da aula é uma frase, não um par de palavras: ocupa a linha. */
.ficha-id__largo { grid-column: 1 / -1; }
.ficha-id dd { margin: 0; font-size: .9375rem; }

.bloco-texto + .bloco-texto { margin-top: var(--esp-4); }
.bloco-texto h3 { font-size: .9375rem; color: var(--texto-2); margin-bottom: .3rem; }
.bloco-texto p { line-height: 1.65; max-width: 68ch; }

/* Avisos */
.avisos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.aviso-item {
  display: flex; gap: var(--esp-3); align-items: flex-start;
  padding: .7rem 0;
  border-bottom: 1px solid var(--borda);
}
.aviso-item:last-child { border-bottom: 0; }
.aviso-item__icone {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; flex: none;
  border-radius: 50%;
  background: var(--superficie-3); color: var(--texto-2);
}
.aviso-item.is-por-ler .aviso-item__icone { background: var(--marca-suave); color: var(--marca); }

/* A cor do ícone diz de que tipo é o aviso, sem obrigar a ler o texto todo. */
.aviso-item__icone--ficha_auto,
.aviso-item__icone--ficha_colega,
.aviso-item__icone--ficha_orientador,
.aviso-item__icone--ficha_supervisor { background: var(--info-suave); color: var(--marca); }
.aviso-item__icone--por_validar      { background: var(--atencao-suave); color: var(--atencao); }
.aviso-item__icone--validado         { background: var(--sucesso-suave); color: var(--sucesso); }
.aviso-item__icone--rejeitado        { background: var(--perigo-suave);  color: var(--perigo); }
.aviso-item__icone--planificacao     { background: var(--atencao-suave); color: var(--atencao); }
.aviso-item__corpo { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.aviso-item__corpo a { color: var(--texto); text-decoration: none; font-size: .9375rem; }
.aviso-item__corpo a:hover { text-decoration: underline; }
.aviso-item.is-por-ler .aviso-item__corpo a { font-weight: 600; }
.aviso-item__corpo time { font-size: .75rem; color: var(--texto-3); }
/* O × de apagar só aparece quando se passa o rato ou se chega pelo teclado:
   é uma saída, não uma coisa a olhar. Encostado à direita da linha e alinhado
   pelo topo, com moldura própria — a meio do texto lia-se como parte dele. */
.aviso-item__apagar { margin-left: auto; align-self: flex-start; flex: none;
                      opacity: 0; transition: opacity .12s ease; }
.aviso-item__apagar .botao--icone {
  width: 1.75rem; height: 1.75rem; padding: 0; border-radius: 50%;
  border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto-3); font-size: 1rem; line-height: 1;
}
.aviso-item__apagar .botao--icone:hover {
  border-color: color-mix(in srgb, var(--perigo) 45%, var(--borda));
  color: var(--perigo); background: var(--perigo-suave);
}
.aviso-item:hover .aviso-item__apagar,
.aviso-item__apagar:focus-within { opacity: 1; }
@media (hover: none) { .aviso-item__apagar { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .aviso-item__apagar { transition: none; } }

/* Webfólio */
.webfolio-indice { flex: 1; min-width: 0; }
.webfolio-indice ol {
  margin: var(--esp-3) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .3rem;
  counter-reset: wf;
}
.webfolio-indice li {
  display: flex; align-items: center; gap: var(--esp-2);
  padding: .35rem .5rem; border-radius: var(--raio-s);
  font-size: .9375rem;
}
.webfolio-indice li::before {
  counter-increment: wf; content: counter(wf);
  width: 1.4rem; height: 1.4rem; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--superficie-3); color: var(--texto-3);
  font-size: .6875rem; font-weight: 600;
}
.webfolio-indice li.is-feita::before { background: var(--sucesso-suave); color: var(--sucesso); }
.webfolio-indice li a { color: inherit; text-decoration: none; }
.webfolio-indice li a:hover { text-decoration: underline; }
.webfolio-indice li > :last-child { margin-left: auto; font-size: .75rem; }
.indice-estrelas { font-size: .6875rem; letter-spacing: -.02em; }

.webfolio-seccao { border-left: 3px solid var(--borda-forte); }
.webfolio-seccao.is-preenchida { border-left-color: var(--sucesso); }

.anexos { list-style: none; margin: var(--esp-4) 0 0; padding: 0; display: flex; flex-direction: column; }
.anexo {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: .5rem 0; border-bottom: 1px solid var(--borda);
  flex-wrap: wrap;
}
.anexo:last-child { border-bottom: 0; }
.anexo__icone { color: var(--texto-3); display: grid; place-items: center; }
.anexo__nome { font-size: .9375rem; word-break: break-word; }
.anexo__meta { font-size: .75rem; color: var(--texto-3); }
.anexo form { margin-left: auto; }
/* Miniatura das imagens: o nome do ficheiro raramente diz o que lá está. */
.anexo__miniatura {
  width: 2.75rem; height: 2.75rem; flex: 0 0 auto;
  object-fit: cover; border-radius: var(--raio-s);
  border: 1px solid var(--borda); background: var(--superficie-2);
}
/* A marcação pronta a colar no texto da secção. */
.anexo__marcacao {
  font-size: .75rem; padding: .15rem .4rem;
  border: 1px solid var(--borda); border-radius: var(--raio-s);
  background: var(--superficie-2); color: var(--texto-2);
  cursor: pointer; user-select: all; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.anexo__marcacao:hover,
.anexo__marcacao:focus-visible { border-color: var(--marca); color: var(--marca); }
.anexo__marcacao.is-copiado { border-color: var(--sucesso); color: var(--sucesso); }

.anexar {
  display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap;
  margin-top: var(--esp-4); padding-top: var(--esp-4);
  border-top: 1px dashed var(--borda-forte);
}
.anexar input[type="file"] { font-size: .875rem; max-width: 100%; }

.grelha-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--esp-4); }
.grelha-3--cartoes { align-items: start; }

.campo--largo { grid-column: 1 / -1; }

@media (max-width: 639px) {
  .nivel-grande { min-width: 100%; }
  .resumo--ficha { flex-direction: column; }
}

/* -------------------------------------------------------------------------
   7. Impressão — o livro de ponto em papel
   ---------------------------------------------------------------------- */

@media print {
  :root { --superficie: #fff; --fundo: #fff; --texto: #000; --texto-2: #333; --borda: #bbb; }
  .topo, .nav, .filtros, .seletor, .acoes, .col-acoes,
  .botao, .modal, .salto, .aviso, .cartao__acoes,
  .anexar, .avisos, .nav__conta, .radio,
  .anexo__marcacao, .editar-seccao, .comentar,
  .estrelas-escolha { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .corpo { display: block; }
  .conteudo { padding: 0; max-width: none; gap: 1rem; }
  .cartao {
    border: 0; box-shadow: none; padding: 0; break-inside: avoid;
    page-break-inside: avoid;
  }
  .tabela-caixa { overflow: visible; border: 1px solid #999; }
  .tabela thead { display: table-header-group; }
  .tabela tr { break-inside: avoid; }
  .grafico svg { min-width: 0; }
  a[href]::after { content: ""; }
}


/* -------------------------------------------------------------------------
   6c. Cronograma de regências
   ---------------------------------------------------------------------- */

.cronograma { display: flex; flex-direction: column; gap: var(--esp-4); }

.barra--alta { height: 14px; position: relative; }
/* Marca dos 75% exigidos para aprovação. */
.barra__marca {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--texto); opacity: .55; border-radius: 1px;
}
.cronograma__legenda { font-size: .875rem; color: var(--texto-2); }

.fichas-linha { display: flex; flex-wrap: wrap; gap: .3rem; }
.ficha-atalho {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.6rem; padding: .1rem .35rem;
  border: 1px solid currentColor; border-radius: var(--raio-s);
  font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.ficha-atalho:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.ficha-atalho--auto       { color: var(--serie-obs); }
.ficha-atalho--hetero     { color: var(--serie-coad); }
.ficha-atalho--orientador { color: var(--serie-reg); }
.ficha-atalho--supervisor { color: var(--serie-nlet); }

/* -------------------------------------------------------------------------
   6d. Comentários no webfólio
   ---------------------------------------------------------------------- */

.comentarios {
  margin-top: var(--esp-4); padding-top: var(--esp-4);
  border-top: 1px solid var(--borda);
  display: flex; flex-direction: column; gap: var(--esp-3);
}
/* Quando os comentários são a única coisa do cartão — a atividade, o relatório
   — a linha de cima separava-os de nada. */
.cartao > .comentarios:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* No cartão dos comentários, a avaliação rápida vem primeiro e sem linha por
   cima: são o mesmo gesto, não dois blocos separados. */
.cartao > .estrelas-bloco:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Os documentos de um relatório, entre o texto entregue e os comentários. */
.relatorio-anexos {
  margin-top: var(--esp-4); padding-top: var(--esp-4);
  border-top: 1px solid var(--borda);
  display: flex; flex-direction: column; gap: var(--esp-2);
}
.relatorio-anexos .anexos { margin-top: 0; }

/* Matriz de auto e heteroavaliação: uma caixa por pessoa a avaliar. */
.avaliar {
  margin-top: var(--esp-4); padding-top: var(--esp-4);
  border-top: 1px solid var(--borda);
  display: flex; flex-direction: column; gap: var(--esp-3);
}
.avaliar__caixa {
  border: 1px solid var(--borda); border-radius: var(--raio-m);
  padding: var(--esp-4); background: var(--superficie-2);
  display: flex; flex-direction: column; gap: var(--esp-3);
}
.avaliar__caixa.is-feita { border-color: color-mix(in srgb, var(--sucesso) 40%, var(--borda)); }
.avaliar__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.avaliar__topo h4 { font-size: .9375rem; font-weight: 600; display: flex; align-items: center; gap: var(--esp-2); }
.avaliar__nota { flex-wrap: wrap; gap: var(--esp-3); }
.avaliar__nota .botao { margin-left: auto; }
.avaliar--recebidas .comentarios__lista { gap: var(--esp-3); }
/* A escala do referencial, lembrada a quem classifica. */
.escala-referencial {
  display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-3);
  margin-top: var(--esp-2); font-size: .8125rem;
}
.escala-referencial span { white-space: nowrap; }
.escala-referencial strong { color: var(--texto); font-weight: 600; }

/* Pedir uma tarefa: as linhas de campo e as ações de cada tarefa. */
.campos-tarefa {
  border: 1px solid var(--borda); border-radius: var(--raio-m);
  padding: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-3);
}
.campos-tarefa legend { font-size: .875rem; font-weight: 600; padding: 0 var(--esp-2); }
.campo-tarefa {
  display: grid; gap: var(--esp-2);
  /* nome · tipo · opções · obrigatório */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.5fr) auto;
  align-items: center;
}
.campo-tarefa__obrig { flex-direction: row; align-items: center; gap: var(--esp-2); white-space: nowrap; }
.campo-tarefa__obrig span { font-size: .8125rem; color: var(--texto-2); }
.tarefa-gestao { display: flex; align-items: flex-start; gap: var(--esp-3); flex-wrap: wrap; }
/* Um visto com explicação por baixo, para as opções que mudam quem vê o quê. */
.campo--caixa {
  flex-direction: row; align-items: flex-start; gap: var(--esp-3);
  padding: var(--esp-3); border: 1px solid var(--borda); border-radius: var(--raio-m);
  background: var(--superficie-2);
}
.campo--caixa input[type="checkbox"] { margin-top: .2rem; flex: 0 0 auto; }
.campo--caixa > span { display: flex; flex-direction: column; gap: .15rem; }
.campo--caixa .campo__ajuda { margin: 0; }
/* Campo só de leitura que espelha o que foi escrito noutro sítio: sem moldura
   de edição, mas com as quebras de linha respeitadas. */
.campo--espelho {
  resize: none; background: var(--superficie-2); color: var(--texto-2);
  min-height: 0;
}

/* Conversa do núcleo. Não é um chat em tempo real — é um mural com dias. */
.conversa { list-style: none; margin: var(--esp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-2); }
.conversa__dia {
  display: flex; align-items: center; gap: var(--esp-3);
  margin: var(--esp-3) 0 var(--esp-1);
  font-size: .75rem; color: var(--texto-3);
  text-transform: uppercase; letter-spacing: .04em;
}
.conversa__dia::before, .conversa__dia::after {
  content: ""; flex: 1; height: 1px; background: var(--borda);
}
.conversa__msg {
  max-width: 42rem; padding: .6rem .8rem;
  border-radius: var(--raio-m); background: var(--superficie-2);
  border: 1px solid var(--borda);
}
.conversa__msg.is-minha {
  margin-left: auto; background: var(--marca-suave, var(--superficie-3));
  border-color: color-mix(in srgb, var(--marca) 30%, var(--borda));
}
.conversa__msg.is-nova { border-left: 3px solid var(--marca); }
.conversa__topo {
  display: flex; align-items: baseline; gap: var(--esp-2); flex-wrap: wrap;
  margin-bottom: .25rem; font-size: .8125rem;
}
.conversa__topo time { color: var(--texto-3); font-size: .75rem; }
.conversa__msg p { font-size: .9375rem; line-height: 1.55; }

/* -------------------------------------------------------------------------
   Identidade do webfólio
   Escolha fechada: uma paleta, uma tipografia, uma disposição. Aplica-se à
   página do webfólio, não à aplicação — a plataforma tem a sua identidade e
   o webfólio é de quem o escreve.
   ---------------------------------------------------------------------- */
.wf--paleta-tinta    { --wf-cor: #1f4a8f; --wf-cor-suave: #eaf0fa; }
.wf--paleta-petroleo { --wf-cor: #145c66; --wf-cor-suave: #e4f1f2; }
.wf--paleta-oliveira { --wf-cor: #4a6b32; --wf-cor-suave: #eef3e8; }
.wf--paleta-musgo    { --wf-cor: #2f5d4a; --wf-cor-suave: #e8f2ed; }
.wf--paleta-bordo    { --wf-cor: #7d2b3d; --wf-cor-suave: #f8ecef; }
.wf--paleta-ameixa   { --wf-cor: #6b2f57; --wf-cor-suave: #f7eaf3; }
.wf--paleta-ferrugem { --wf-cor: #a4482a; --wf-cor-suave: #fdeee7; }
.wf--paleta-ocre     { --wf-cor: #96590a; --wf-cor-suave: #fdf1de; }
.wf--paleta-grafite  { --wf-cor: #3d4652; --wf-cor-suave: #eef0f4; }
.wf--paleta-violeta  { --wf-cor: #5b3f8c; --wf-cor-suave: #f0ecf8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wf--paleta-tinta    { --wf-cor: #6f9de8; --wf-cor-suave: #17202e; }
  :root:not([data-theme="light"]) .wf--paleta-oliveira { --wf-cor: #93bd6f; --wf-cor-suave: #1a2216; }
  :root:not([data-theme="light"]) .wf--paleta-bordo    { --wf-cor: #d98b9c; --wf-cor-suave: #2a1a1e; }
  :root:not([data-theme="light"]) .wf--paleta-ocre     { --wf-cor: #e0a854; --wf-cor-suave: #2a2015; }
  :root:not([data-theme="light"]) .wf--paleta-grafite  { --wf-cor: #a8b3c2; --wf-cor-suave: #20252d; }
  :root:not([data-theme="light"]) .wf--paleta-violeta  { --wf-cor: #a68cd8; --wf-cor-suave: #221c2e; }
  :root:not([data-theme="light"]) .wf--paleta-petroleo { --wf-cor: #5fb3bd; --wf-cor-suave: #122427; }
  :root:not([data-theme="light"]) .wf--paleta-musgo    { --wf-cor: #79bd9d; --wf-cor-suave: #16241e; }
  :root:not([data-theme="light"]) .wf--paleta-ameixa   { --wf-cor: #cf8cba; --wf-cor-suave: #291a24; }
  :root:not([data-theme="light"]) .wf--paleta-ferrugem { --wf-cor: #e3906f; --wf-cor-suave: #2b1c16; }
}
:root[data-theme="dark"] .wf--paleta-tinta    { --wf-cor: #6f9de8; --wf-cor-suave: #17202e; }
:root[data-theme="dark"] .wf--paleta-oliveira { --wf-cor: #93bd6f; --wf-cor-suave: #1a2216; }
:root[data-theme="dark"] .wf--paleta-bordo    { --wf-cor: #d98b9c; --wf-cor-suave: #2a1a1e; }
:root[data-theme="dark"] .wf--paleta-ocre     { --wf-cor: #e0a854; --wf-cor-suave: #2a2015; }
:root[data-theme="dark"] .wf--paleta-grafite  { --wf-cor: #a8b3c2; --wf-cor-suave: #20252d; }
:root[data-theme="dark"] .wf--paleta-violeta  { --wf-cor: #a68cd8; --wf-cor-suave: #221c2e; }
:root[data-theme="dark"] .wf--paleta-petroleo { --wf-cor: #5fb3bd; --wf-cor-suave: #122427; }
:root[data-theme="dark"] .wf--paleta-musgo    { --wf-cor: #79bd9d; --wf-cor-suave: #16241e; }
:root[data-theme="dark"] .wf--paleta-ameixa   { --wf-cor: #cf8cba; --wf-cor-suave: #291a24; }
:root[data-theme="dark"] .wf--paleta-ferrugem { --wf-cor: #e3906f; --wf-cor-suave: #2b1c16; }

.wf[class*="wf--paleta-"] { --marca: var(--wf-cor); }
.wf[class*="wf--paleta-"] h1,
.wf[class*="wf--paleta-"] .wf__seccao h2 { color: var(--wf-cor); }
.wf[class*="wf--paleta-"] .wf__indice a { border-color: var(--wf-cor); color: var(--wf-cor); }
.wf[class*="wf--paleta-"] .wf__seccao { border-top-color: var(--wf-cor); }

.wf--tipo-classica { font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; }
.wf--tipo-mista h1, .wf--tipo-mista h2, .wf--tipo-mista h3 {
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}

/* Índice numa coluna à esquerda, quando há largura para isso. É a disposição
   de omissão: as secções todas à vista, sem rolar à procura delas. */
@media (min-width: 900px) {
  /* Com uma coluna ao lado, a medida de leitura cabe na outra: a página pode
     ser mais larga sem o texto passar a linha longa. */
  .autonomo:has(.wf--disp-lateral) { max-width: 60rem; }

  .wf--disp-lateral {
    display: grid; grid-template-columns: 12rem minmax(0, 1fr);
    gap: var(--esp-6); align-items: start;
  }
  .wf--disp-lateral .wf__capa,
  .wf--disp-lateral .wf__numeros-rodape,
  .wf--disp-lateral .wf__rodape { grid-column: 1 / -1; }
  .wf--disp-lateral .wf__indice {
    position: sticky; top: var(--esp-4);
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    margin: var(--esp-6) 0 0;
    grid-column: 1;
    border-left: 1px solid var(--borda);
  }
  /* O conteúdo é uma célula só, na segunda coluna. Quando não era — quando o
     índice se esticava por dezenas de linhas para o conteúdo não voltar à
     coluna dele — o rodapé caía para o fim dessas linhas, muito abaixo do
     texto, com um vazio no meio. */
  .wf--disp-lateral .wf__conteudo { grid-column: 2; }
  .wf--disp-lateral .wf__indice-titulo { display: block; }
  .wf--disp-lateral .wf__indice a {
    border: 0; border-radius: 0; padding: .4rem 0 .4rem var(--esp-3);
    margin-left: -1px; border-left: 2px solid transparent;
  }
  .wf--disp-lateral .wf__indice a:hover { border-left-color: var(--borda-forte); background: none; }
  .wf--disp-lateral .wf__indice a.is-atual {
    border-left-color: var(--wf-cor, var(--marca));
    color: var(--wf-cor, var(--marca)); font-weight: 600;
  }
  /* A primeira secção alinha com o topo do índice. */
  .wf--disp-lateral .wf__conteudo > :first-child,
  .wf--disp-lateral .wf__seccao:first-of-type { margin-top: var(--esp-6); }
}

/* Blog: entradas datadas, da mais recente para a mais antiga. */
.blog { list-style: none; margin: var(--esp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-5); }
.blog__post { display: flex; flex-direction: column; gap: var(--esp-2); }
.blog__post + .blog__post { border-top: 1px solid var(--borda); padding-top: var(--esp-5); }
.blog__topo { display: flex; align-items: baseline; gap: var(--esp-3); flex-wrap: wrap; }
.blog__topo h3 { font-size: 1.0625rem; font-weight: 600; }
.blog__topo time { font-size: .8125rem; color: var(--texto-3); }
.blog__topo .acoes { margin-left: auto; }
@media (max-width: 639px) {
  .campo-tarefa { grid-template-columns: 1fr; }
}

/* Prazos de entrega. Em atraso não impede nada — assinala. */
.em-atraso { color: var(--atencao); font-weight: 500; }
.prazo { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.prazo input[type="date"] { width: auto; min-width: 8.5rem; }
.prazo__eco { display: block; margin-top: .2rem; font-size: .75rem; color: var(--texto-3); }
.formulario--linha {
  flex-direction: row; align-items: center; gap: var(--esp-2); flex-wrap: wrap;
}
.formulario--linha input[type="date"] { width: auto; min-width: 9rem; }

.comentarios__titulo {
  display: flex; align-items: center; gap: var(--esp-2);
  font-size: .875rem; color: var(--texto-2); font-weight: 600;
}
/* Fechado por omissão, num <details>: uma caixa de comentário aberta em cada
   secção enchia a página de campos vazios. */
summary.comentarios__titulo { cursor: pointer; list-style: none; padding: .2rem 0; }
summary.comentarios__titulo::-webkit-details-marker { display: none; }
summary.comentarios__titulo::after {
  content: "▸"; margin-left: auto; font-size: .75rem; color: var(--texto-3);
  transition: transform .15s ease;
}
details[open] > summary.comentarios__titulo::after { transform: rotate(90deg); }
summary.comentarios__titulo:hover { color: var(--texto); }
summary.comentarios__titulo .icon { width: .95rem; height: .95rem; }
details.comentarios > *:not(summary) { margin-top: var(--esp-3); }
.comentarios__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-3); }

.comentario {
  padding: .7rem .9rem;
  border-radius: var(--raio-m);
  background: var(--superficie-2);
  border-left: 3px solid var(--borda-forte);
}
/* Quem escreveu distingue-se pela cor da barra, sem depender só do texto. */
.comentario--orientador { border-left-color: var(--serie-reg); }
.comentario--supervisor { border-left-color: var(--serie-nlet); }
.comentario--admin      { border-left-color: var(--marca); }
.comentario--estagiario { border-left-color: var(--serie-obs); }

/* Avaliação rápida em estrelas.
   Uma escala de cinco pontos para o que não justifica a grelha de 24
   indicadores — o registo de uma reunião, uma aula assistida. */
.estrelas-bloco {
  display: flex; flex-direction: column; gap: var(--esp-3);
  margin-top: var(--esp-4); padding-top: var(--esp-4);
  border-top: 1px solid var(--borda);
}
.estrelas-bloco__resumo { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.estrelas-bloco__rotulo { font-weight: 500; margin-right: var(--esp-1); }
.estrelas { display: inline-flex; gap: .1rem; letter-spacing: .05em; }
.estrelas .estrela { color: var(--borda-forte); font-size: 1rem; line-height: 1; }
.estrelas .estrela.is-cheia { color: var(--atencao); }

/* Os botões de escolha são maiores: são alvos de toque. */
.estrelas-escolha { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }
.estrelas-escolha__eco {
  margin-left: var(--esp-2); font-size: .8125rem; color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.estrelas-escolha form { display: contents; }
button.estrela {
  background: none; border: 0; cursor: pointer; padding: .15rem .2rem;
  font-size: 1.5rem; line-height: 1; color: var(--borda-forte);
  border-radius: var(--raio-s);
}
button.estrela:hover, button.estrela:focus-visible { color: var(--atencao); }
button.estrela.is-cheia { color: var(--atencao); }
.estrelas-escolha > form:last-of-type + .botao,
.estrelas-escolha .botao { margin-left: var(--esp-2); }

.estrelas-quem { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-1); }
.estrelas-quem li { display: flex; align-items: center; gap: var(--esp-2); font-size: .875rem; }

/* Botão que abre a atividade, com os sinais do que já lá está dentro:
   reflexão escrita, ficheiros, comentários, avaliação rápida. */
.col-atividade { white-space: nowrap; width: 1%; }
.botao--atividade { gap: var(--esp-2); }
.atividade-sinais {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  padding-left: var(--esp-2); border-left: 1px solid var(--borda);
}
.sinal {
  display: inline-flex; align-items: center; gap: .15rem;
  font-size: .75rem; color: var(--texto-3);
}
.sinal .icon { width: .85rem; height: .85rem; }
.sinal--feito { color: var(--sucesso); font-weight: 700; }
.sinal--estrelas { color: var(--atencao); font-variant-numeric: tabular-nums; }

.comentario__topo {
  display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap;
  margin-bottom: .35rem;
  font-size: .8125rem;
}
.comentario__topo time { color: var(--texto-3); }
/* O botão de apagar fica ancorado ao canto em vez de participar na quebra de
   linha: num telemóvel estreito ia sozinho para a linha seguinte e abria um
   buraco entre o cabeçalho e o texto. */
.comentario { position: relative; }
.comentario__topo { padding-right: 1.5rem; }
.comentario__topo form {
  position: absolute; top: .45rem; right: .5rem; margin-left: 0;
}
.comentario p { font-size: .9375rem; line-height: 1.6; }

.comentar { display: flex; flex-direction: column; gap: var(--esp-2); align-items: flex-start; }
.comentar textarea { min-height: 3rem; }

/* -------------------------------------------------------------------------
   6e. Webfólio em documento (ecrã e papel)
   ---------------------------------------------------------------------- */

.impresso {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-l);
  padding: var(--esp-6);
  max-width: 52rem;
}
.impresso__capa {
  padding-bottom: var(--esp-5);
  margin-bottom: var(--esp-5);
  border-bottom: 2px solid var(--texto);
}
.impresso__instituicao {
  font-size: .75rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-2); font-weight: 600;
}
.impresso__capa h1 { font-size: 2rem; margin: var(--esp-2) 0 var(--esp-1); }
.impresso__autor { font-size: 1.125rem; color: var(--texto-2); }
.impresso__meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--esp-3); margin: var(--esp-5) 0 0;
}
.impresso__meta dt { font-size: .75rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; }
.impresso__meta dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.impresso__seccao { margin-top: var(--esp-6); break-inside: auto; }
.impresso__seccao > h2 {
  font-size: 1.25rem;
  padding-bottom: var(--esp-2);
  border-bottom: 1px solid var(--borda);
  margin-bottom: var(--esp-4);
  break-after: avoid;
}
.impresso__rotulo {
  margin-top: var(--esp-4);
  font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-3); font-weight: 600;
}
.impresso__anexos { margin: var(--esp-2) 0 0 1.2rem; font-size: .9375rem; }
.impresso__comentario {
  margin-top: var(--esp-3); padding-left: var(--esp-4);
  border-left: 2px solid var(--borda-forte);
}
.impresso__comentario-topo { font-size: .8125rem; color: var(--texto-2); margin-bottom: .2rem; }

@media print {
  .nao-imprimir { display: none !important; }
  .impresso { border: 0; padding: 0; max-width: none; }
  .impresso__seccao { break-before: page; }
  .impresso__seccao:first-of-type { break-before: avoid; }
  .cronograma .metricas { grid-template-columns: repeat(4, 1fr); }
}
.anexar__limite { font-size: .75rem; color: var(--texto-3); }

.ligacao-externa {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .875rem; text-decoration: none;
}
.ligacao-externa:hover span { text-decoration: underline; }
.ligacao-externa .icon { width: 14px; height: 14px; }

/* -------------------------------------------------------------------------
   6f. Conteúdo escrito, visibilidade e página pública do webfólio
   ---------------------------------------------------------------------- */

/* Texto do webfólio: HTML ou marcação leve, já sanitizado. */
.texto-rico { max-width: 68ch; line-height: 1.7; }
.texto-rico > * + * { margin-top: var(--esp-3); }
.texto-rico h2 { font-size: 1.25rem; margin-top: var(--esp-5); }
.texto-rico h3 { font-size: 1.0625rem; margin-top: var(--esp-4); }
.texto-rico h4, .texto-rico h5, .texto-rico h6 { font-size: .9375rem; margin-top: var(--esp-4); }
.texto-rico p { line-height: 1.7; }
.texto-rico ul, .texto-rico ol { padding-left: 1.4rem; }
.texto-rico li + li { margin-top: .25rem; }
.texto-rico blockquote {
  border-left: 3px solid var(--borda-forte);
  padding-left: var(--esp-4); color: var(--texto-2);
}
.texto-rico code {
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: var(--raio-s); padding: .05em .3em; font-size: .875em;
}
.texto-rico pre {
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: var(--raio-m); padding: var(--esp-3); overflow-x: auto;
}
.texto-rico pre code { background: none; border: 0; padding: 0; }
.texto-rico img { max-width: 100%; height: auto; border-radius: var(--raio-m); }
.texto-rico figure { margin: 0; }
.texto-rico figcaption { font-size: .8125rem; color: var(--texto-2); margin-top: .3rem; }
.texto-rico table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.texto-rico th, .texto-rico td { border: 1px solid var(--borda); padding: .4rem .6rem; text-align: left; }
.texto-rico th { background: var(--superficie-2); font-weight: 600; }
.texto-rico hr { border: 0; border-top: 1px solid var(--borda); }

.editor { font-family: var(--fonte); line-height: 1.6; }

/* Escolha de visibilidade */
.visibilidade { display: flex; flex-direction: column; gap: var(--esp-2); align-items: flex-start; }
.opcao {
  display: flex; gap: var(--esp-3); align-items: flex-start;
  width: 100%; padding: .7rem .9rem;
  border: 1px solid var(--borda); border-radius: var(--raio-m);
  cursor: pointer;
}
.opcao:hover { background: var(--superficie-2); }
.opcao.is-escolhida { border-color: var(--marca); background: var(--marca-suave); }
.opcao input { margin-top: .2rem; accent-color: var(--marca); }
.opcao span { display: flex; flex-direction: column; gap: .1rem; }
.opcao small { font-size: .8125rem; color: var(--texto-2); }

.endereco {
  display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap;
  padding-top: var(--esp-3); border-top: 1px solid var(--borda);
}
.endereco__rotulo { font-size: .8125rem; color: var(--texto-3); }
.endereco code {
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: var(--raio-s); padding: .15rem .4rem; font-size: .875rem;
}

/* Página pública do webfólio */
.app--autonomo { background: var(--fundo); }
.autonomo { max-width: 52rem; margin: 0 auto; padding: var(--esp-6) var(--esp-5) var(--esp-7); }

.wf__capa { padding-bottom: var(--esp-5); border-bottom: 2px solid var(--texto); }
.wf__instituicao {
  font-size: .75rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-2); font-weight: 600;
}
.wf__capa h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: var(--esp-2) 0 var(--esp-1); letter-spacing: -.02em; }
.wf__autor { font-size: 1.0625rem; color: var(--texto-2); }
.wf__completo { margin-top: var(--esp-4); }
.wf__nota { margin-top: var(--esp-2); font-size: .875rem; color: var(--texto-3); }


.wf__indice {
  display: flex; flex-wrap: wrap; gap: var(--esp-2);
  margin: var(--esp-5) 0;
}
/* O rótulo só faz sentido na coluna lateral; em cima, as pastilhas falam
   por si e um título a mais só empurra o conteúdo para baixo. */
.wf__indice-titulo {
  display: none;
  font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-3); font-weight: 600;
  padding: 0 0 var(--esp-2) var(--esp-3);
}
.wf__indice a {
  font-size: .875rem; padding: .3rem .7rem;
  border: 1px solid var(--borda); border-radius: 999px;
  text-decoration: none; color: var(--texto-2);
}
.wf__indice a:hover { border-color: var(--marca); color: var(--marca); }

.wf__seccao { margin-top: var(--esp-7); scroll-margin-top: var(--esp-4); }
.wf__seccao > h2 {
  font-size: 1.375rem; padding-bottom: var(--esp-2);
  border-bottom: 1px solid var(--borda); margin-bottom: var(--esp-4);
  text-wrap: balance;
}
/* Um portefólio lê-se: o texto merece a medida e o ritmo de um texto. */
.wf .texto-rico { max-width: 62ch; line-height: 1.7; }
.wf .texto-rico > * + * { margin-top: var(--esp-3); }
.wf__anexos { list-style: none; margin: var(--esp-4) 0 0; padding: 0; }
.wf__anexos li {
  display: flex; align-items: center; gap: var(--esp-2);
  padding: .4rem 0; border-bottom: 1px solid var(--borda);
}
.wf__anexos a { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.wf__anexos a:hover span { text-decoration: underline; }

.wf__rodape {
  margin-top: var(--esp-7); padding-top: var(--esp-4);
  border-top: 1px solid var(--borda);
  font-size: .8125rem; color: var(--texto-3);
  display: flex; flex-direction: column; gap: var(--esp-2);
}
.wf__privado {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--atencao);
}
.wf--vazio .wf__capa { border-bottom: 0; }

/* -------------------------------------------------------------------------
   Webfólio: capa, índice em cartões e passo a passo
   A página lê-se como um sítio — o início apresenta e o menu leva a uma
   secção de cada vez. As peças abaixo são as dessa leitura.
   ---------------------------------------------------------------------- */

.wf__capa-imagem {
  display: block; width: 100%; max-height: 22rem; object-fit: cover;
  border-radius: var(--raio-m); margin-bottom: var(--esp-4);
}
.wf__lema { font-size: 1.0625rem; color: var(--texto-2); font-style: italic; margin-bottom: .15rem; }

/* Capa destacada: o título assenta numa faixa da cor escolhida. */
.wf--capa-destacada .wf__capa {
  border-bottom: 0; padding: 0; margin-bottom: var(--esp-5);
}
.wf--capa-destacada .wf__capa-texto {
  background: var(--wf-cor-suave, var(--superficie-2));
  border-left: 4px solid var(--wf-cor, var(--marca));
  border-radius: 0 var(--raio-m) var(--raio-m) 0;
  padding: var(--esp-5) var(--esp-5) var(--esp-5) var(--esp-4);
}
.wf--capa-destacada .wf__capa-imagem { border-radius: var(--raio-m) var(--raio-m) 0 0; margin-bottom: 0; }

/* Texto maior, para quem quer a página mais legível de longe. */
.wf--tam-grande .texto-rico { font-size: 1.0625rem; }
.wf--tam-grande .wf__seccao > h2 { font-size: 1.5rem; }

/* Por dentro, a capa é uma assinatura e não uma capa: o que interessa na
   página é a secção que se foi ler, não voltar a apresentar o webfólio. */
.wf--interior .wf__capa h1 { font-size: 1.375rem; margin-top: .3rem; }
.wf--interior .wf__autor { font-size: .9375rem; }
.wf--interior .wf__capa { padding-bottom: var(--esp-3); }
.wf--interior.wf--capa-destacada .wf__capa-texto { padding: var(--esp-4); }

/* O início: cada secção é um cartão que diz o que lá está e leva lá. */
.wf__cartoes {
  display: grid; gap: var(--esp-4); margin-top: var(--esp-6);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.wf__cartao {
  display: flex; flex-direction: column; gap: var(--esp-2);
  padding: var(--esp-4); text-decoration: none; color: inherit;
  border: 1px solid var(--borda); border-radius: var(--raio-m);
  border-top: 3px solid var(--wf-cor, var(--marca));
  background: var(--superficie);
  transition: border-color .15s ease, transform .15s ease;
}
.wf__cartao:hover { border-color: var(--wf-cor, var(--marca)); transform: translateY(-2px); }
.wf__cartao h2 { font-size: 1.0625rem; color: var(--wf-cor, var(--marca)); }
.wf__cartao p { font-size: .875rem; color: var(--texto-2); line-height: 1.55; }
.wf__cartao-meta {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: auto; font-size: .8125rem; color: var(--texto-3);
}
.wf__cartao-meta .icon { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) {
  .wf__cartao:hover { transform: none; }
}

.wf__ultimas .wf__lista-posts { list-style: none; margin: var(--esp-3) 0; padding: 0; }
.wf__ultimas .wf__lista-posts li {
  display: flex; align-items: baseline; gap: var(--esp-3);
  padding: .4rem 0; border-bottom: 1px solid var(--borda);
}
.wf__ultimas .wf__lista-posts time { margin-left: auto; font-size: .8125rem; color: var(--texto-3); }

/* Anterior e seguinte, no fim de cada secção. */
.wf__passos {
  display: flex; justify-content: space-between; gap: var(--esp-4);
  margin-top: var(--esp-6); padding-top: var(--esp-4);
  border-top: 1px solid var(--borda); font-size: .9375rem;
}
.wf__passos a { text-decoration: none; }
.wf__passos a:hover { text-decoration: underline; }

/* A secção aberta, no menu. */
.wf__indice a.is-atual {
  border-color: var(--wf-cor, var(--marca));
  background: var(--wf-cor-suave, var(--superficie-2));
  color: var(--wf-cor, var(--marca)); font-weight: 600;
}

/* Hierarquia: secção e subsecção, dois níveis e não mais. */
.wf__indice a.is-sub { margin-left: var(--esp-4); font-size: .8125rem; }
.wf--disp-lateral .wf__indice a.is-sub { margin-left: 0; padding-left: var(--esp-5); }
.wf__caminho { font-size: .875rem; color: var(--texto-3); margin-bottom: var(--esp-2); }
.wf__caminho a { color: inherit; }
.wf__seccao--sub > h3 {
  font-size: 1.125rem; padding-bottom: var(--esp-2);
  border-bottom: 1px solid var(--borda); margin-bottom: var(--esp-3);
}
.wf__cartao-titulo { text-decoration: none; color: inherit; }
.wf__cartao-filhas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem var(--esp-3); }
.wf__cartao-filhas a { font-size: .875rem; }
.wf__filhas { margin-top: var(--esp-6); padding-top: var(--esp-4); border-top: 1px solid var(--borda); }
.wf__filhas ul { list-style: none; margin: var(--esp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-2); }
.wf__filhas li { display: flex; gap: var(--esp-3); align-items: baseline; flex-wrap: wrap; }
.wf__filhas .ausente { font-size: .8125rem; }
.impresso__seccao--sub { margin-left: 1.2rem; }

/* No índice de edição, a subsecção recua e a tecla explica-se. */
.lista-ordenavel > li.is-subseccao .lista-ordenavel__nome { padding-left: var(--esp-4); }
.webfolio-indice li.is-subseccao > a { padding-left: var(--esp-4); }
.tecla {
  display: inline-block; padding: 0 .3rem; border: 1px solid var(--borda-forte);
  border-radius: var(--raio-s); font-size: .8125rem; line-height: 1.4;
  background: var(--superficie-2);
}

/* -------------------------------------------------------------------------
   Escrever: barra do editor
   ---------------------------------------------------------------------- */

.editor-barra {
  display: flex; flex-wrap: wrap; gap: var(--esp-2);
  margin-bottom: var(--esp-2);
}
.editor-barra .botao { padding: .2rem .55rem; font-size: .8125rem; }

/* Índice do webfólio, em edição: mover uma secção e renomear as próprias. */
.lista-ordenavel { list-style: none; margin: var(--esp-4) 0; padding: 0; counter-reset: sec; }
.lista-ordenavel > li {
  display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap;
  padding: .5rem 0; border-bottom: 1px solid var(--borda);
}
.lista-ordenavel__nome { font-weight: 500; text-decoration: none; }
.lista-ordenavel__nome:hover { text-decoration: underline; }
.lista-ordenavel .acoes { margin-left: auto; }
.lista-ordenavel .is-inerte { opacity: .25; cursor: default; }
.renomear > summary {
  display: inline-flex; cursor: pointer; list-style: none;
}
.renomear > summary::-webkit-details-marker { display: none; }
.renomear[open] { flex-basis: 100%; margin-top: var(--esp-2); }

.wf-amostra-capa {
  display: block; margin-top: var(--esp-2); max-height: 7rem;
  border-radius: var(--raio-s); border: 1px solid var(--borda);
}
.webfolio-seccao__ficheiros {
  margin-top: var(--esp-5); font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3);
}

.editar-seccao { margin-top: var(--esp-4); }
.editar-seccao > summary {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  cursor: pointer; list-style: none;
  font-size: .875rem; font-weight: 500; color: var(--texto-2);
  padding: .3rem .6rem; border: 1px solid var(--borda-forte); border-radius: var(--raio-m);
}
.editar-seccao > summary::-webkit-details-marker { display: none; }
.editar-seccao > summary:hover { background: var(--superficie-2); color: var(--texto); }
.editar-seccao[open] > summary { margin-bottom: var(--esp-4); }

/* Dentro de um cartão de aula o formulário de alteração é secundário: entra
   com menos espaço à volta e mais apertado, para o cartão não crescer. */
.editar-seccao--discreta { margin-top: var(--esp-3); }
.editar-seccao--discreta > summary { font-size: .8125rem; padding: .2rem .5rem; }
.editar-seccao--discreta[open] > summary { margin-bottom: var(--esp-3); }
.formulario--apertado { gap: var(--esp-3); }

.cabecalho-seccao__regencia {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: var(--esp-2); padding: .25rem .6rem;
  background: var(--superficie-3); border-radius: var(--raio-m);
  font-size: .875rem; color: var(--texto-2);
}
.cabecalho-seccao__regencia .icon { width: 15px; height: 15px; flex: none; }
.col-regencia { max-width: 22rem; }
.regencia-rotulo { display: block; font-size: .875rem; }

/* -------------------------------------------------------------------------
   Mensagens de resultado: entram, e saem quando já não interessam
   ---------------------------------------------------------------------- */

.js-dispensavel {
  align-items: center;
  opacity: 0;
  transform: translateY(-.4rem);
  transition: opacity .18s ease, transform .18s ease;
}
.js-dispensavel.is-visivel { opacity: 1; transform: none; }
.js-dispensavel.is-a-sair  { opacity: 0; transform: translateY(-.4rem); }
.js-dispensavel > span { flex: 1; min-width: 0; }
.js-dispensavel .js-dispensar {
  font-size: 1.25rem; line-height: 1; color: inherit; opacity: .6;
  margin-left: auto; flex: none;
}
.js-dispensavel .js-dispensar:hover { opacity: 1; background: transparent; }

/* Sem JavaScript a mensagem tem de estar visível à mesma. */
@media (scripting: none) {
  .js-dispensavel { opacity: 1; transform: none; }
  .js-dispensar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js-dispensavel { transition: none; }
}

/* Visto de «aula supervisionada» */
.campo--visto { padding: .1rem 0; }
.visto {
  display: flex; gap: var(--esp-3); align-items: flex-start;
  padding: .7rem .9rem; cursor: pointer;
  border: 1px solid var(--borda); border-radius: var(--raio-m);
  background: var(--superficie-2);
}
.visto:hover { border-color: var(--borda-forte); }
.visto input { margin-top: .2rem; width: 1.1rem; height: 1.1rem; accent-color: var(--marca); }
.visto span { display: flex; flex-direction: column; gap: .15rem; }
.visto small { font-size: .8125rem; color: var(--texto-2); }
.visto:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); }

/* Os números de uma secção — as aulas regidas, em «Regências». Ficam onde o
   assunto está, e não na capa: a capa é do webfólio, não do ponto. */
.wf__numeros {
  display: flex; gap: var(--esp-6); flex-wrap: wrap;
  margin: 0 0 var(--esp-5); padding-bottom: var(--esp-4);
  border-bottom: 1px solid var(--borda);
}
.wf__numeros div { display: flex; flex-direction: column; }
.wf__numeros strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.wf__numeros span { font-size: .8125rem; color: var(--texto-2); }

/* Menu no topo, segunda fila: as subsecções da secção onde se está. Recuar
   pastilhas numa fila horizontal não se lê — o que se lê é uma fila por
   nível, com o nome da secção à cabeça. */
.wf__indice--sub {
  margin-top: calc(var(--esp-4) * -1); margin-bottom: var(--esp-5);
  padding-left: var(--esp-3);
  border-left: 2px solid var(--wf-cor, var(--marca));
  align-items: baseline;
}
.wf__indice--sub .wf__indice-titulo {
  display: block; padding: 0; margin-right: var(--esp-2);
  font-size: .6875rem;
}
.wf__indice--sub a { font-size: .8125rem; padding: .2rem .55rem; }
/* Na coluna à esquerda a segunda fila não existe: lá a hierarquia é o recuo. */
.wf--disp-lateral .wf__indice--sub { display: none; }

/* Galeria de imagens de uma secção: num portefólio, uma imagem é para se ver. */
.wf__galeria {
  list-style: none; margin: var(--esp-4) 0 0; padding: 0;
  display: grid; gap: var(--esp-3);
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.wf__galeria img {
  display: block; width: 100%; height: 9rem; object-fit: cover;
  border-radius: var(--raio-m); border: 1px solid var(--borda);
  transition: border-color .15s ease;
}
.wf__galeria a:hover img { border-color: var(--wf-cor, var(--marca)); }
.wf__cronograma { margin-top: var(--esp-2); font-size: .9375rem; }

/* Escolher de uma lista de pessoas: o âmbito de quem acompanha. */
.escolha-lista {
  display: grid; gap: .3rem var(--esp-4); margin-top: var(--esp-3);
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.escolha-lista .visto { padding: .2rem 0; }

/* -------------------------------------------------------------------------
   A cor da plataforma, à escolha de cada pessoa.
   Claro e escuro continuam a seguir o sistema; isto muda só a marca — botões,
   ligações, destaques —, e por isso cada cor tem o seu par para fundo escuro.
   ---------------------------------------------------------------------- */
:root[data-cor="petroleo"] { --marca: #145c66; --marca-forte: #0e454d; --marca-suave: #e4f1f2; }
:root[data-cor="verde"]    { --marca: #2f5d4a; --marca-forte: #234838; --marca-suave: #e8f2ed; }
:root[data-cor="bordo"]    { --marca: #7d2b3d; --marca-forte: #61212f; --marca-suave: #f8ecef; }
:root[data-cor="violeta"]  { --marca: #5b3f8c; --marca-forte: #48316e; --marca-suave: #f0ecf8; }
:root[data-cor="grafite"]  { --marca: #3d4652; --marca-forte: #2c333d; --marca-suave: #eef0f4; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-cor="petroleo"] { --marca: #5fb3bd; --marca-forte: #86ccd4; --marca-suave: #122427; }
  :root:not([data-theme="light"])[data-cor="verde"]    { --marca: #79bd9d; --marca-forte: #9ad3b7; --marca-suave: #16241e; }
  :root:not([data-theme="light"])[data-cor="bordo"]    { --marca: #d98b9c; --marca-forte: #e8a9b7; --marca-suave: #2a1a1e; }
  :root:not([data-theme="light"])[data-cor="violeta"]  { --marca: #a68cd8; --marca-forte: #bda6e6; --marca-suave: #221c2e; }
  :root:not([data-theme="light"])[data-cor="grafite"]  { --marca: #a8b3c2; --marca-forte: #c2cad5; --marca-suave: #20252d; }
}
:root[data-theme="dark"][data-cor="petroleo"] { --marca: #5fb3bd; --marca-forte: #86ccd4; --marca-suave: #122427; }
:root[data-theme="dark"][data-cor="verde"]    { --marca: #79bd9d; --marca-forte: #9ad3b7; --marca-suave: #16241e; }
:root[data-theme="dark"][data-cor="bordo"]    { --marca: #d98b9c; --marca-forte: #e8a9b7; --marca-suave: #2a1a1e; }
:root[data-theme="dark"][data-cor="violeta"]  { --marca: #a68cd8; --marca-forte: #bda6e6; --marca-suave: #221c2e; }
:root[data-theme="dark"][data-cor="grafite"]  { --marca: #a8b3c2; --marca-forte: #c2cad5; --marca-suave: #20252d; }

/* As marcas de um modelo próprio: o que se escreve e o que aparece. */
.lista-marcas { list-style: none; margin: var(--esp-2) 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.lista-marcas li { display: flex; gap: var(--esp-3); align-items: baseline; flex-wrap: wrap; }
.lista-marcas code { font-size: .8125rem; }

/* -------------------------------------------------------------------------
   Calendário

   Um mês lê-se de relance ou não se lê. Por isso o desenho é o de qualquer
   calendário de secretária: fios de um pixel entre os dias, o número do dia
   pequeno e sempre no mesmo canto, o dia de hoje com o número dentro de um
   disco, e cada coisa marcada reduzida a um ponto de cor e uma linha de texto.
   O que ainda espera validação leva o ponto vazado — vê-se sem se ler.
   ---------------------------------------------------------------------- */
.cal {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-l);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  margin-bottom: var(--esp-5);
}

.cal__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-5);
}
.cal__mes {
  margin: 0;
  font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em;
  text-wrap: balance;
}
/* Os meses escrevem-se em minúscula em português; como título, a maiúscula
   inicial é a única concessão — «Setembro de 2026». */
.cal__mes::first-letter { text-transform: uppercase; }

/* Controlo segmentado: anterior · hoje · seguinte, num só bloco. */
.cal__setas {
  display: inline-flex; align-items: stretch; flex: none;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-s);
  overflow: hidden;
}
.cal__seta, .cal__hoje {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 2rem; padding: 0 .7rem;
  color: var(--texto-2); text-decoration: none;
  font-size: .875rem; font-weight: 500; white-space: nowrap;
  border-right: 1px solid var(--borda);
  transition: background .12s ease, color .12s ease;
}
.cal__setas > :last-child { border-right: 0; }
.cal__seta:hover, .cal__hoje:hover { background: var(--superficie-3); color: var(--texto); }
.cal__seta:focus-visible, .cal__hoje:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.cal__seta .icon { width: 16px; height: 16px; }
.cal__hoje.is-atual { color: var(--marca); font-weight: 600; }

.cal__grelha { border-top: 1px solid var(--borda); }
.cal__semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

.cal__semana--nomes {
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
}
.cal__nome {
  padding: .45rem .25rem; text-align: center;
  font-size: .6875rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--texto-3);
}
.cal__nome abbr { text-decoration: none; border: 0; cursor: help; }

.cal__dia {
  display: flex; flex-direction: column; gap: .25rem;
  min-height: 7.25rem; min-width: 0;
  padding: .35rem .35rem .5rem;
  background: var(--superficie);
  border-right: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
}
.cal__semana > .cal__dia:last-child { border-right: 0; }
.cal__grelha > .cal__semana:last-child .cal__dia { border-bottom: 0; }
/* Fim de semana: um tom, não uma cor. */
.cal__dia--fds  { background: color-mix(in srgb, var(--superficie-2) 55%, var(--superficie)); }
.cal__dia--fora { background: var(--superficie-2); }
.cal__dia--fora .cal__numero { color: var(--texto-3); }
.cal__dia--fora .cal__eventos { opacity: .55; }
.cal__dia--hoje { background: color-mix(in srgb, var(--marca-suave) 65%, var(--superficie)); }

.cal__numero {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start; flex: none;
  min-width: 1.625rem; height: 1.625rem; border-radius: 999px;
  font-size: .8125rem; font-weight: 600; color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.cal__dia--hoje .cal__numero {
  background: var(--marca); color: var(--marca-contraste); font-weight: 700;
}

.cal__eventos {
  list-style: none; margin: 0; padding: 0; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.cal__evento {
  display: flex; align-items: center; gap: .35rem; min-width: 0;
  padding: .12rem .3rem; border-radius: 5px;
  font-size: .75rem; line-height: 1.4; color: var(--texto);
  text-decoration: none; white-space: nowrap; overflow: hidden;
  transition: background .12s ease;
}
.cal__evento:hover { background: var(--superficie-3); }
.cal__evento:focus-visible { outline: 2px solid var(--marca); outline-offset: -1px; }
.cal__ponto {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--cor-serie, var(--texto-3));
}
/* Por validar: o ponto fica vazado. Distingue-se sem se ler. */
.cal__evento.is-pendente .cal__ponto {
  background: transparent;
  border: 2px solid var(--cor-serie, var(--texto-3));
  width: 8px; height: 8px; box-sizing: border-box;
}
.cal__rotulo { overflow: hidden; text-overflow: ellipsis; }
.cal__evento--obs   { --cor-serie: var(--serie-obs); }
.cal__evento--coad  { --cor-serie: var(--serie-coad); }
.cal__evento--reg   { --cor-serie: var(--serie-reg); }
.cal__evento--nlet  { --cor-serie: var(--serie-nlet); }
.cal__evento--prazo { --cor-serie: var(--atencao); }
.cal__mais {
  display: inline-block; padding: 0 .3rem;
  font-size: .6875rem; color: var(--texto-3); text-decoration: none;
}
.cal__mais:hover { color: var(--marca); text-decoration: underline; }

.cal__legenda {
  display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5);
  list-style: none; margin: 0;
  padding: var(--esp-3) var(--esp-5);
  border-top: 1px solid var(--borda);
  background: var(--superficie-2);
}
.badge--prazo { --cor-serie: var(--atencao); }

/* --- A agenda do mês, em texto ---------------------------------------- */
.agenda { list-style: none; margin: 0; padding: 0; }
.agenda__dia {
  display: flex; gap: var(--esp-4);
  padding: var(--esp-3) 0;
  border-top: 1px solid var(--borda);
  scroll-margin-top: calc(var(--topo-altura) + var(--esp-4));
}
.agenda > .agenda__dia:first-child { border-top: 0; padding-top: 0; }
.agenda__data { flex: none; width: 3rem; text-align: center; }
.agenda__numero {
  display: block; font-size: 1.375rem; font-weight: 600; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.agenda__semana {
  display: block; font-size: .6875rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-3);
}
.agenda__dia.is-hoje .agenda__numero,
.agenda__dia.is-hoje .agenda__semana { color: var(--marca); }

.agenda__lista {
  list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: .45rem;
}
.agenda__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; }
.agenda__titulo { font-weight: 500; color: var(--texto); text-decoration: none; }
.agenda__titulo:hover { text-decoration: underline; }
.agenda__detalhe { flex-basis: 100%; font-size: .8125rem; color: var(--texto-2); }

/* --- Ecrãs estreitos ---------------------------------------------------
   O mês passa a ser um mapa de pontos e a agenda passa a ser a leitura: é
   assim que um calendário se lê no telemóvel. */
@media (max-width: 860px) {
  .cal__dia { min-height: 4.5rem; padding: .3rem .2rem; gap: .2rem; align-items: center; }
  .cal__numero { align-self: center; min-width: 1.5rem; height: 1.5rem; font-size: .75rem; }
  .cal__eventos { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 3px; }
  .cal__evento { padding: 0; gap: 0; }
  .cal__rotulo, .cal__mais { display: none; }
}
@media (max-width: 560px) {
  .cal__topo { padding: var(--esp-3) var(--esp-4); }
  .cal__mes { font-size: 1.1875rem; }
  .cal__legenda { padding: var(--esp-3) var(--esp-4); gap: var(--esp-2) var(--esp-4); }
  .agenda__dia { gap: var(--esp-3); }
  .agenda__data { width: 2.5rem; }
}
.agenda__meta { font-size: .8125rem; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.agenda__semana abbr { text-decoration: none; border: 0; }

/* O «+» de cada dia: aparece com o rato em cima, como num calendário de
   secretária. No telemóvel não existe — lá o botão do topo é o caminho. */
.cal__dia { position: relative; }
.cal__numero--liga { text-decoration: none; color: var(--texto-2); }
.cal__numero--liga:hover { background: var(--superficie-3); color: var(--texto); }
.cal__dia--hoje .cal__numero--liga:hover { background: var(--marca-forte); color: var(--marca-contraste); }
.cal__marcar {
  position: absolute; top: .3rem; right: .3rem;
  width: 1.25rem; height: 1.25rem; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: var(--superficie-3); color: var(--texto-2);
  font-size: .9375rem; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.cal__dia:hover .cal__marcar { opacity: 1; }
.cal__marcar:focus-visible { opacity: 1; outline: 2px solid var(--marca); outline-offset: 1px; }
.cal__marcar:hover { background: var(--marca); color: var(--marca-contraste); }
@media (max-width: 860px) { .cal__marcar { display: none; } }
/* A segunda linha do subtítulo de uma secção: a escola por baixo do orientador. */
.cabecalho-seccao__linha { display: block; }

/* Trabalho parado: um espelho para quem coordena, não uma lista de tarefas. */
.cartao--atencao { border-color: color-mix(in srgb, var(--atencao) 35%, var(--borda)); }
.atrasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.atraso {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-3) 0; border-top: 1px solid var(--borda);
}
.atrasos > .atraso:first-child { border-top: 0; }
.atraso__quantos {
  flex: none; min-width: 2.25rem; text-align: center;
  font-size: 1.125rem; font-weight: 700; color: var(--atencao);
  font-variant-numeric: tabular-nums;
}
.atraso__texto { flex: 1; min-width: 0; }
.atraso .botao { flex: none; margin-left: auto; }

/* A barra de ações dos avisos: dois botões que se veem. Antes eram discretos
   ao ponto de ninguém dar por eles. */
.barra-acoes--avisos {
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-m);
  padding: var(--esp-3) var(--esp-4);
  margin-bottom: var(--esp-4);
}
.barra-acoes--avisos .acoes { flex-wrap: wrap; }
.aviso-item__icone--atraso { background: var(--atencao-suave); color: var(--atencao); }
/* Uma aula supervisionada é uma deslocação marcada: distingue-se das outras. */
.cal__evento--super { --cor-serie: var(--marca); }
.badge--super { --cor-serie: var(--marca); }

/* --- Webfólio: procura, rodapé com números, avaliação, reflexões --------- */
/* Na capa, e não na coluna do menu: ali a caixa não cabia na largura da
   coluna e transbordava por cima do conteúdo. */
.wf__procura { display: flex; gap: .35rem; margin-top: var(--esp-4); max-width: 22rem; }
.wf__procura input[type="search"] {
  flex: 1; min-width: 0; padding: .35rem .6rem;
  border: 1px solid var(--borda); border-radius: var(--raio-s);
  background: var(--superficie); color: var(--texto); font: inherit; font-size: .875rem;
}
.wf__procura button {
  display: grid; place-items: center; width: 2rem; flex: none;
  border: 1px solid var(--borda); border-radius: var(--raio-s);
  background: var(--superficie); color: var(--texto-2); cursor: pointer;
}
.wf__procura button:hover { color: var(--marca); border-color: var(--marca); }
.wf__achados { list-style: none; margin: var(--esp-3) 0 0; padding: 0;
               display: flex; flex-direction: column; gap: var(--esp-3); }
.wf__achados li { padding-bottom: var(--esp-3); border-bottom: 1px solid var(--borda); }
.wf__achados li:last-child { border-bottom: 0; }
.wf__achados a { font-weight: 600; }
.wf__achados p { margin: .2rem 0 0; font-size: .875rem; color: var(--texto-2); }

.wf__numeros-rodape {
  font-size: .8125rem; color: var(--texto-3);
  display: flex; flex-wrap: wrap; gap: .2rem var(--esp-3);
}
.wf__atualizado time { font-variant-numeric: tabular-nums; }
.wf__rss { white-space: nowrap; }

.wf__reflexao { margin-top: .3rem; }
.wf__reflexao > summary {
  cursor: pointer; font-size: .8125rem; color: var(--marca);
  list-style: none; display: inline-flex; align-items: center; gap: .25rem;
}
.wf__reflexao > summary::-webkit-details-marker { display: none; }
.wf__reflexao > summary::before { content: "▸"; font-size: .75rem; }
.wf__reflexao[open] > summary::before { content: "▾"; }
.wf__reflexao > .texto-rico { margin-top: .4rem; font-size: .875rem; }

.wf__peca { margin-top: var(--esp-5); }
.wf__peca > h3 { margin-bottom: .3rem; }
.wf__apreciacao { margin-top: var(--esp-4); padding-left: var(--esp-4);
                  border-left: 3px solid var(--borda); }
.wf__apreciacao h4 { margin: 0 0 .2rem; font-size: 1rem; }
.wf__apreciacao h4 .ausente { font-weight: 400; font-size: .8125rem; }
.wf__nota-avaliacao { margin: 0 0 .3rem; }
.wf__fichas { list-style: none; margin: var(--esp-3) 0 0; padding: 0;
              display: flex; flex-direction: column; gap: var(--esp-2); }
.wf__fichas li {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem var(--esp-3);
  padding: var(--esp-3); border: 1px solid var(--borda); border-radius: var(--raio-m);
}
.wf__fichas li p { grid-column: 1 / -1; margin: 0; font-size: .875rem; color: var(--texto-2); }
.wf__fichas .ausente { font-weight: 400; margin-left: .4rem; font-size: .8125rem; }
.wf__media {
  align-self: start; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--marca);
}

/* Como se chega aos 100 %: o que conta, quanto vale e qual é o passo seguinte. */
.webfolio-medida { display: flex; flex-direction: column; gap: var(--esp-2); align-items: flex-start; }
.webfolio-medida__partes { max-width: 34rem; }
.webfolio-medida__partes > summary {
  cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--marca);
}
.webfolio-medida__principio { margin: var(--esp-3) 0 var(--esp-2); font-size: .875rem; color: var(--texto-2); }
.webfolio-medida__lista {
  list-style: none; margin: 0 0 var(--esp-3); padding: 0;
  display: flex; flex-direction: column; gap: var(--esp-3);
}
.webfolio-parte { display: flex; flex-direction: column; gap: .25rem; }
.webfolio-parte__topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--esp-3); margin: 0;
}
.webfolio-parte__rotulo { font-size: .875rem; font-weight: 600; }
.webfolio-parte__conta { font-size: .8125rem; color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.webfolio-parte.is-completa .webfolio-parte__conta { color: var(--sucesso); }
.webfolio-parte__nota { margin: 0; font-size: .8125rem; color: var(--texto-2); }
.webfolio-parte__ritmo {
  display: inline-block; margin-left: .3rem; padding: .05rem .4rem;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 999px; font-size: .6875rem; color: var(--texto-3);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Modelo próprio: a plataforma sai da frente.

   Quem escreve o seu HTML e o seu CSS não quer estar a lutar contra o desenho
   da casa — uma borda por baixo da capa, um traço por cima de cada secção, uma
   largura máxima no texto. Aqui esses restos são anulados, ficando só o que é
   estrutura (grelhas, listas, imagens que não rebentam a caixa). Tudo o resto
   passa a ser decisão de quem escreveu o modelo.
   ---------------------------------------------------------------------- */
.wf--proprio .wf__capa,
.wf--proprio .wf__seccao,
.wf--proprio .wf__rodape,
.wf--proprio .wf__indice,
.wf--proprio .wf__numeros-rodape {
  border: 0; padding: 0; margin: 0; background: none;
}
.wf--proprio .wf__seccao > h2,
.wf--proprio .wf__capa h1 { border: 0; padding: 0; color: inherit; font-size: inherit; }
.wf--proprio .wf__seccao > h2 { font-size: 1.5em; }
.wf--proprio .wf__capa h1 { font-size: 2em; }
.wf--proprio .wf__indice a {
  border: 0; padding: 0; border-radius: 0; background: none; color: inherit;
}
.wf--proprio .texto-rico { max-width: none; }
.wf--proprio .wf__conteudo { padding: 0; }
/* Espaço entre irmãos, que é o mínimo para o texto se ler; quem escreve o
   modelo substitui-o à vontade, porque a sua folha vem depois desta. */
.wf--proprio .wf__seccao + .wf__seccao { margin-top: 2em; }

/* As cores da plataforma seguem o tema de quem lê — claro ou escuro. Dentro de
   um modelo próprio isso era um desastre: quem escreveu um fundo claro via os
   cartões pintados de escuro por baixo do seu texto. Aqui tudo herda a cor do
   autor, e as molduras passam a ser feitas da própria cor do texto. */
.wf--proprio,
.wf--proprio * { color: inherit; }
.wf--proprio .wf__cartao,
.wf--proprio .wf__anexos li,
.wf--proprio .wf__filhas,
.wf--proprio .wf__passos,
.wf--proprio .wf__cronograma th,
.wf--proprio .wf__cronograma td,
.wf--proprio .tabela-caixa {
  background: none;
  border-color: color-mix(in srgb, currentColor 25%, transparent);
}
.wf--proprio .wf__cartao { border-top-width: 1px; border-radius: 0; }
.wf--proprio .wf__cartao:hover { transform: none; }
.wf--proprio .wf__cartao h2,
.wf--proprio .wf__cartao p,
.wf--proprio .wf__cartao-meta,
.wf--proprio .ausente,
.wf--proprio .wf__numeros-rodape { color: inherit; }
.wf--proprio .ausente,
.wf--proprio .wf__cartao p,
.wf--proprio .wf__numeros-rodape { opacity: .75; }
.wf--proprio .wf__procura input[type="search"],
.wf--proprio .wf__procura button {
  background: none; border-color: color-mix(in srgb, currentColor 30%, transparent);
}
/* A grelha dos cartões é estrutura, e fica; o desenho é de quem escreve. */
.wf--proprio .wf__cartoes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem;
}

/* Como se reparte o tempo pelas funções — outra leitura que não a dos
   requisitos: ali vê-se o que falta, aqui vê-se o equilíbrio do que já se fez. */
.distribuicao { margin-top: var(--esp-5); }
.distribuicao__titulo { font-size: .8125rem; font-weight: 600; color: var(--texto-2); margin-bottom: var(--esp-2); }
.distribuicao__barra {
  display: flex; height: 14px; border-radius: 999px; overflow: hidden;
  background: var(--superficie-3); gap: 2px;
}
.distribuicao__fatia { background: var(--cor-serie, var(--texto-3)); min-width: 2px; }
.distribuicao__fatia--obs  { --cor-serie: var(--serie-obs); }
.distribuicao__fatia--coad { --cor-serie: var(--serie-coad); }
.distribuicao__fatia--reg  { --cor-serie: var(--serie-reg); }
.distribuicao__fatia--nlet { --cor-serie: var(--serie-nlet); }
.distribuicao__legenda {
  list-style: none; margin: var(--esp-3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4);
}
.distribuicao__legenda strong { font-variant-numeric: tabular-nums; }
/* A planificação entregue, dentro da linha da regência. */
.wf__planificacao { list-style: none; margin: .3rem 0 0; padding: 0; font-size: .8125rem; }
.wf__planificacao li { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.wf__planificacao a { display: inline-flex; align-items: center; gap: .3rem; }
.wf__planificacao .icon { width: .9rem; height: .9rem; }
/* O que outros escreveram sobre esta pessoa: só quem acompanha o vê, e a
   página diz por que é que quem chega de fora não o vê. */
.wf__so-nucleo {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .05rem .45rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  font-size: .75rem;
}
/* As regências dos colegas: outro tom, porque é trabalho de observação e não
   trabalho de dar aula. */
.cal__evento--colega { --cor-serie: var(--serie-coad); }
.badge--colega { --cor-serie: var(--serie-coad); }
/* A ligação para o sítio próprio: um complemento, não uma chamada à ação. */
.wf__externo {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .875rem; color: var(--texto-2); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
.wf__externo:hover { color: var(--marca); }
.wf__externo .icon { width: .9rem; height: .9rem; }
.aviso-item__icone--lembrete { background: var(--info-suave); color: var(--marca); }