/* =========================================================================
   Escolinha — sistema de desenho
   Valores retirados do ficheiro de redesenho: IBM Plex, verde #0E5A47,
   barra lateral #F6F7F5, tabelas de linha 44px. Nada vem de CDN.
   ========================================================================= */


:root {
    --verde: #0E5A47;
    --verde-escuro: #0A4636;
    --verde-anel: #DDEDE7;
    --verde-claro: #9CC9B8;

    --tinta: #151917;
    --tinta-2: #4A524E;
    --tinta-3: #5E6662;
    --tinta-4: #7A817D;
    --tinta-5: #8A918D;
    --tinta-6: #C3C8C4;

    --fundo: #FFFFFF;
    --fundo-lateral: #F6F7F5;
    --fundo-suave: #F8F9F7;
    --fundo-hover: #ECEDEA;
    --fundo-activo: #E6E8E4;
    --fundo-sel: #F0F6F3;
    --fundo-aberto: #EEF4F1;

    --linha: #E8EAE6;
    --linha-fraca: #F0F1EE;
    --linha-campo: #E2E4E0;
    --linha-tracejada: #D3D6D1;
    --linha-forte: #A9AFAB;

    --vermelho: #B42318;
    --vermelho-fraco: #E9B3AB;
    --ambar: #A85C08;

    --lateral: 228px;

    /* Largura util do conteudo. Acima disto nao cresce: centra-se. */
    --conteudo: 1280px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Qualquer classe que defina display vence a regra [hidden] do navegador, porque
   o estilo do autor ganha ao do agente. Sem isto, esconder um .grelha ou um .f
   não faz nada — e foi o que aconteceu com os passos do assistente. */
[hidden] { display: none !important; }

body {
    background: var(--fundo);
    color: var(--tinta);
    font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    font-size: 13.5px;
    -webkit-font-smoothing: antialiased;
}

h1 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: 15px; font-weight: 600; }

a { color: var(--verde); text-decoration: none; }
a:hover { color: var(--verde-escuro); }

:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: 5px; }

.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12.5px; }
.muted { color: var(--tinta-4); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.debt { color: var(--vermelho); font-weight: 500; }
.bom { color: #1F8A6A; }
.mau { color: var(--vermelho); }
.rolar { overflow-x: auto; }

/* ============================== Estrutura ============================== */

/* O ecra nao rola: a casca ocupa a altura toda e e o conteudo que rola por
   dentro. Assim a barra lateral fica onde esta, em vez de desaparecer para
   cima quando a lista e longa. */
.app {
    display: flex; flex-wrap: wrap; align-items: stretch;
    height: 100vh; height: 100dvh; overflow: hidden;
}

.lateral {
    flex: 1 1 var(--lateral);
    background: var(--fundo-lateral);
    border-right: 1px solid var(--linha);
    padding: 14px 10px;
    display: flex; flex-direction: column;
    height: 100%; overflow-y: auto; overscroll-behavior: contain;
}

/* O logótipo manda, e o nome vem por baixo: ao lado nunca sobrava largura para
   nenhum dos dois na barra de 228px. */
.marca { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 2px 10px 16px; }
.marca-selo {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--verde); color: #fff;
    display: grid; place-items: center;
    font-weight: 600; font-size: 13px; flex: none;
}
/* Ocupa a largura da barra: é a marca da casa, e à altura de uma linha de texto
   não se distinguia o que lá está desenhado. */
/* Os logótipos vêm quase sempre em JPEG, que não tem transparência: o «multiply»
   faz o branco à volta desaparecer contra o fundo da barra, sem obrigar a
   escolinha a arranjar um PNG recortado. */
.marca-logo {
    width: 100%; height: auto; max-height: 120px; object-fit: contain;
    mix-blend-mode: multiply;
}

/* O nome passa a duas linhas em vez de ser cortado; o ano fica por baixo. */
.marca-texto {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    min-width: 0; text-align: center;
}
/* «balance» reparte as palavras pelas linhas em vez de encher a primeira:
   quatro palavras ficam duas e duas, e não três e uma órfã. */
.marca-nome { font-size: 13.5px; font-weight: 600; line-height: 1.25; text-wrap: balance; }
.marca-ano { font-size: 11.5px; color: var(--tinta-4); }

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-item {
    display: flex; align-items: center; gap: 10px;
    height: 32px; padding: 0 10px;
    border-radius: 6px;
    color: var(--tinta-2); font-size: 13.5px; text-decoration: none;
}
.nav-item:hover { background: var(--fundo-hover); color: var(--tinta); }
.nav-item.active { background: var(--fundo-activo); color: var(--tinta); font-weight: 500; }
.nav-item svg { flex: none; color: var(--tinta-4); }
.nav-item.active svg { color: var(--verde); }
.nav-label { font-size: 12px; color: var(--tinta-4); padding: 0 10px; margin: 18px 0 4px; }
.nav-n { margin-left: auto; font-size: 12px; color: var(--tinta-4); font-variant-numeric: tabular-nums; }
.nav-n.red { color: var(--vermelho); font-weight: 500; }

.lateral-espaco { flex: 1; min-height: 20px; }
.lateral-rodape { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.lateral-rodape .av { background: #D9DCD7; color: var(--tinta); }
.lateral-email {
    font-size: 13px; color: var(--tinta-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
}

.principal {
    flex: 999 1 560px; min-width: 0;
    padding: 24px 32px 32px;
    display: flex; flex-direction: column;
    height: 100%; overflow-y: auto; overscroll-behavior: contain;
}

.cabecalho {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.cabecalho-titulo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cabecalho-sub { font-size: 13px; color: var(--tinta-4); }
.cabecalho-accoes { display: flex; gap: 8px; }

/* ============================== Botões ============================== */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 32px; padding: 0 12px;
    border-radius: 6px;
    font: inherit; font-size: 13px; font-weight: 500;
    cursor: pointer; border: 1px solid transparent;
    white-space: nowrap; text-decoration: none;
}
.btn-primary { background: var(--verde); color: #fff; }
.btn-primary:hover { background: var(--verde-escuro); color: #fff; }
.btn-quiet { background: var(--fundo); border-color: var(--linha-campo); color: var(--tinta); }
.btn-quiet:hover { background: var(--fundo-suave); color: var(--tinta); }
.btn-danger { background: var(--fundo); border-color: var(--vermelho-fraco); color: var(--vermelho); }
.btn-danger:hover { background: #FDF3F2; color: var(--vermelho); }
.btn-plain { background: none; height: 30px; padding: 0 8px; color: var(--tinta-3); }
.btn-plain:hover { background: var(--fundo-hover); color: var(--tinta); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: default; }
.btn-bloco { width: 100%; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; }

/* Um <svg> sem medida vale 300x150 px: o certo do aviso de sucesso saia do
   tamanho de um prato. A classe .ico era usada em tres sitios e nunca foi
   definida aqui. */
.ico { width: 16px; height: 16px; flex: none; }

.icon-btn {
    width: 28px; height: 28px; border-radius: 6px;
    display: inline-grid; place-items: center;
    color: var(--tinta-4); text-decoration: none;
    background: none; border: 0; cursor: pointer; padding: 0;
}
.icon-btn:hover { background: var(--fundo-hover); color: var(--tinta); }

.link-btn {
    background: none; border: 0; padding: 0;
    font: inherit; color: var(--vermelho); cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--vermelho-fraco);
}
.link-btn:hover { text-decoration-color: var(--vermelho); }
.link-btn.verde { color: var(--verde); text-decoration-color: var(--verde-claro); }
.link-btn.verde:hover { text-decoration-color: var(--verde); }

.bulk-btn {
    background: none; border: 0; color: #fff;
    height: 28px; padding: 0 10px; border-radius: 5px;
    font: inherit; font-size: 12.5px; cursor: pointer;
}
.bulk-btn:hover { background: #2A302D; }

/* ============================== Separadores ============================== */

.tabs {
    display: flex; gap: 20px;
    border-bottom: 1px solid var(--linha);
    margin-top: 14px;
    overflow-x: auto;
    overflow-y: hidden;
}
.tab {
    background: none; border: 0; border-bottom: 2px solid transparent;
    font: inherit; font-size: 13.5px; color: var(--tinta-3);
    padding: 10px 2px; margin-bottom: -1px;
    cursor: pointer; display: inline-flex; gap: 6px; align-items: center;
    white-space: nowrap; text-decoration: none;
}
.tab:hover { color: var(--tinta); }
.tab.on { color: var(--tinta); font-weight: 500; border-bottom-color: var(--tinta); }
.tab .n { font-size: 12px; color: var(--tinta-5); font-variant-numeric: tabular-nums; }

/* ============================== Filtros ============================== */

.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; }

.search { position: relative; width: 280px; max-width: 100%; }

/* O selector leva o [type] de propósito: sem ele empata em especificidade com a
   regra genérica de input mais abaixo, que vence por vir depois e repõe o
   padding da esquerda — deixando o texto por baixo da lupa. */
.search input[type=search] {
    width: 100%; height: 30px;
    border: 1px solid var(--linha-campo); border-radius: 6px;
    padding: 0 10px 0 30px;
    font: inherit; font-size: 13px; color: var(--tinta);
    background: var(--fundo); outline: none;
}
.search input[type=search]::placeholder { color: var(--tinta-5); }
.search input[type=search]:focus { border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-anel); }

/* Lupa centrada na altura de 30px: (30 − 14) / 2. */
.search svg { position: absolute; left: 9px; top: 8px; color: var(--tinta-5); pointer-events: none; }

.toggle {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 10px;
    border: 1px dashed var(--linha-tracejada); border-radius: 6px;
    background: var(--fundo);
    font: inherit; font-size: 12.5px; color: var(--tinta-2);
    cursor: pointer; white-space: nowrap; text-decoration: none;
}
.toggle:hover { border-color: var(--linha-forte); color: var(--tinta-2); }
.toggle.on { border-style: solid; border-color: var(--tinta); background: var(--tinta); color: #fff; }

.barra-seleccao {
    margin-left: auto; display: flex; align-items: center; gap: 2px;
    height: 32px; padding: 0 4px 0 12px;
    background: var(--tinta); color: #fff;
    border-radius: 7px; font-size: 12.5px;
}
/* Sem isto a regra acima vence o [hidden] do navegador e a barra fica sempre visível. */
.barra-seleccao[hidden] { display: none; }

/* ============================== Tabelas ============================== */

.tabela-envolvente { overflow-x: auto; overflow-y: hidden; }

table {
    width: 100%; border-collapse: collapse;
    min-width: 980px;
    font-variant-numeric: tabular-nums;
}
th {
    text-align: left; font-size: 12px; font-weight: 500; color: var(--tinta-4);
    padding: 0 12px; height: 34px;
    border-bottom: 1px solid var(--linha);
    white-space: nowrap; background: var(--fundo);
}
td {
    padding: 0 12px; height: 44px;
    border-bottom: 1px solid var(--linha-fraca);
    font-size: 13.5px; white-space: nowrap;
}
tr.row:hover td { background: var(--fundo-suave); }
tr.row.sel td { background: var(--fundo-sel); }
tr.row.open td { background: var(--fundo-aberto); }
tr.row.off td { color: var(--tinta-5); }

.sort {
    background: none; border: 0; font: inherit; color: inherit;
    padding: 0; cursor: pointer; display: inline-flex; gap: 4px; align-items: center;
    text-decoration: none;
}
.sort:hover { color: var(--tinta); }

.name {
    background: none; border: 0; padding: 0;
    font: inherit; font-weight: 500; color: var(--tinta);
    cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none;
}
.name:hover span.t { text-decoration: underline; }

.av {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--fundo-hover); color: var(--tinta-2);
    display: grid; place-items: center;
    font-size: 10.5px; font-weight: 600; flex: none;
}

.tag {
    font-size: 11.5px; color: var(--tinta-3);
    border: 1px solid var(--linha-campo); border-radius: 4px;
    padding: 1px 5px; margin-left: 8px;
}
.tag-verde { color: var(--verde); border-color: var(--verde-claro); }
.tag-vermelha { color: var(--vermelho); border-color: var(--vermelho-fraco); }
.tag-ambar { color: var(--ambar); border-color: #EBD5AE; }

/* Marcador de classe */
.k { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 8px; vertical-align: 1px; }
.c1 { background: #3B74C4; } .c2 { background: #1F8A6A; }
.c3 { background: #7B55C2; } .c4 { background: #C27A1E; }
.c5 { background: #B04A8A; } .c6 { background: #0F7B8A; } .c0 { background: #A9AFAB; }

input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--verde); cursor: pointer; margin: 0; vertical-align: middle; }

/* ============================== Paginação ============================== */

.paginacao {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: 12px; padding-top: 14px;
    font-size: 13px; color: var(--tinta-3);
}
.pg {
    min-width: 30px; height: 30px; padding: 0 8px;
    border-radius: 6px; border: 1px solid transparent;
    background: none; font: inherit; font-size: 13px; color: var(--tinta-2);
    cursor: pointer; font-variant-numeric: tabular-nums;
    display: inline-grid; place-items: center; text-decoration: none;
}
.pg:hover { background: var(--linha-fraca); color: var(--tinta); }
.pg.on { border-color: var(--linha-campo); background: var(--fundo); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 2px rgba(21, 25, 23, .06); }
.pg:disabled, .pg.off { color: var(--tinta-6); cursor: default; background: none; }
.ell { min-width: 20px; text-align: center; color: var(--tinta-5); font-size: 13px; }

select.ps, select {
    height: 30px; border: 1px solid var(--linha-campo); border-radius: 6px;
    padding: 0 26px 0 8px;
    font: inherit; font-size: 13px; color: var(--tinta);
    background: var(--fundo); cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238A918D' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 7px center;
}
select:focus { border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-anel); outline: none; }

/* ============================== Listas de definições ============================== */

.dl {
    display: grid; grid-template-columns: 120px minmax(0, 1fr);
    row-gap: 10px; column-gap: 12px; margin: 0; font-size: 13.5px;
}
.dl dt { color: var(--tinta-4); }
.dl dd { margin: 0; color: var(--tinta); }

.sec {
    font-size: 12px; font-weight: 500; color: var(--tinta-4);
    text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px;
}

/* ============================== Formulários ============================== */

.campos { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.c-1 { grid-column: span 1; } .c-2 { grid-column: span 2; } .c-3 { grid-column: span 3; }
.c-4 { grid-column: span 4; } .c-5 { grid-column: span 5; } .c-6 { grid-column: span 6; }
.c-7 { grid-column: span 7; } .c-8 { grid-column: span 8; } .c-12 { grid-column: span 12; }

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label, .rotulo { font-size: 13px; font-weight: 500; color: var(--tinta-2); }

/* Por exclusão, e não por lista de tipos: para o navegador um <input> sem type
   é um campo de texto, e ficava sem estilo nenhum — foi o que aconteceu à
   designação dos anos lectivos, das classes e dos planos. O :not() com lista
   vale a especificidade do argumento mais forte, (0,1,1), e por isso continua
   a não passar à frente de .search input[type=search]. */
input:not([type=checkbox], [type=radio], [type=file], [type=submit], [type=button]),
textarea {
    width: 100%; height: 32px;
    border: 1px solid var(--linha-campo); border-radius: 6px;
    padding: 0 10px;
    font: inherit; font-size: 13.5px; color: var(--tinta);
    background: var(--fundo); outline: none;
    transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; padding: 8px 10px; }
input:focus, textarea:focus { border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-anel); }
input::placeholder, textarea::placeholder { color: var(--tinta-5); }
input:disabled { background: var(--fundo-suave); color: var(--tinta-5); }

/* Campos de formulário: mais altos e mais folgados do que os das barras de
   filtros, e da mesma medida dos da ficha de cadastro. */
.campo input, .campo textarea, .campo select {
    height: 38px; border-radius: 8px;
    padding-left: 12px; padding-right: 12px; font-size: 13.5px;
}
.campo textarea { height: auto; padding-top: 10px; padding-bottom: 10px; }
.campo select { padding-right: 32px; background-position: right 11px center; }
.campo input[type=checkbox], .campo input[type=radio] { height: 15px; padding: 0; }
.campo input:hover:not(:focus, :disabled, [readonly]),
.campo select:hover:not(:focus, :disabled),
.campo textarea:hover:not(:focus) { border-color: var(--linha-tracejada); }
.campo input.mono, .campo input[type=number], .campo input[type=date] { font-variant-numeric: tabular-nums; }
.campo .sufixo-etiqueta { border-radius: 0 8px 8px 0; }
.campo .prefixo-etiqueta { border-radius: 8px 0 0 8px; }
.campo .sufixo input { border-radius: 8px 0 0 8px; }
.campo .sufixo .prefixo-etiqueta + input { border-radius: 0 8px 8px 0; }
.campo .btn { height: 38px; border-radius: 8px; }

/* Sem as setas de incremento: os valores aqui são montantes e dias, escritos
   de uma vez, e as setas só roubam largura ao campo. */
input[type=number] { appearance: textfield; -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* A cruz nativa do campo de pesquisa duplica o botão «Limpar». */
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }

.sufixo { display: flex; }
.sufixo input { border-radius: 6px 0 0 6px; }
.sufixo-etiqueta {
    display: inline-flex; align-items: center; padding: 0 10px;
    font-size: 12.5px; color: var(--tinta-4);
    background: var(--fundo-suave);
    border: 1px solid var(--linha-campo); border-left: 0; border-radius: 0 6px 6px 0;
}
.prefixo-etiqueta {
    display: inline-flex; align-items: center; padding: 0 10px;
    font-size: 12.5px; color: var(--tinta-4);
    background: var(--fundo-suave);
    border: 1px solid var(--linha-campo); border-right: 0; border-radius: 6px 0 0 6px;
}
.sufixo .prefixo-etiqueta + input { border-radius: 0 6px 6px 0; }

.caixa { display: flex; align-items: center; gap: 8px; }
.caixa label { font-size: 13px; color: var(--tinta-2); cursor: pointer; }

.dica { font-size: 12px; color: var(--tinta-4); }
.erro { font-size: 12px; color: var(--vermelho); }

.accoes-formulario { display: flex; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linha-fraca); }

/* Formulários longos: secções separadas por linha, em vez de um campo atrás do outro. */
.bloco { padding: 18px 20px; border-bottom: 1px solid var(--linha-fraca); }
.bloco:first-of-type { padding-top: 20px; }
.bloco-final { border-bottom: 0; }
.bloco .sec { margin-bottom: 14px; }

/* Retrato do aluno na ficha de cadastro. */
.retrato {
    width: 132px; height: 160px;
    border: 1px solid var(--linha-campo); border-radius: 8px;
    background: var(--fundo-lateral);
    display: grid; place-items: center;
    overflow: hidden;
}
.retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }
.retrato-vazio { font-size: 11.5px; color: var(--tinta-5); text-align: center; padding: 0 8px; }

.retrato-pequeno { width: 44px; height: 44px; border-radius: 50%; }

input[type=file].ficheiro {
    width: 100%; font-size: 12px; color: var(--tinta-3);
    border: 0; padding: 0; height: auto; background: none;
}
input[type=file].ficheiro::file-selector-button {
    font: inherit; font-size: 12px;
    padding: 5px 10px; margin-right: 8px;
    border: 1px solid var(--linha-campo); border-radius: 6px;
    background: var(--fundo); color: var(--tinta); cursor: pointer;
}
input[type=file].ficheiro::file-selector-button:hover { background: var(--fundo-suave); }

/* Campos só de leitura que espelham outra escolha: não se escrevem, informam. */
input[readonly] {
    background: var(--fundo-lateral);
    color: var(--tinta-3);
    border-color: var(--linha);
    cursor: default;
}
input[readonly]:focus { border-color: var(--linha); box-shadow: none; }

/* ============================== Painéis ============================== */

.painel { border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; background: var(--fundo); }
.painel + .painel { margin-top: 14px; }
.painel-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--linha-fraca); flex-wrap: wrap;
}
.painel-titulo { font-size: 13.5px; font-weight: 600; }
.painel-corpo { padding: 16px; }
.painel-rodape { padding: 12px 16px; border-top: 1px solid var(--linha-fraca); background: var(--fundo-lateral); }

/* ============================== Indicadores ============================== */

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 16px 0; }
.indicador { border: 1px solid var(--linha); border-radius: 8px; padding: 14px 16px; }
.indicador-rotulo { font-size: 12px; color: var(--tinta-4); margin-bottom: 6px; }
.indicador-valor { font-size: 22px; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.indicador-valor.mau { color: var(--vermelho); }
.indicador-valor.bom { color: #1F8A6A; }
.indicador-nota { font-size: 12px; color: var(--tinta-4); margin-top: 4px; }

/* ============================== Avisos ============================== */

.aviso {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 14px; border-radius: 8px;
    font-size: 13px; margin-bottom: 14px; border: 1px solid;
}
.aviso svg { flex: none; margin-top: 1px; }
.aviso-texto { flex: 1; min-width: 0; }
.aviso-ok { background: #EEF6F2; border-color: #BFDCCF; color: #0B5C3C; }
.aviso-erro { background: #FDF3F2; border-color: #EFCCC8; color: var(--vermelho); }
.aviso-atencao { background: #FDF7EC; border-color: #EBD5AE; color: var(--ambar); }
.aviso-nota { background: var(--fundo-lateral); border-color: var(--linha); color: var(--tinta-3); }
.aviso a { color: inherit; text-decoration: underline; }
.aviso-fechar { background: none; border: 0; color: inherit; opacity: .55; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.aviso-fechar:hover { opacity: 1; }

.vazio { padding: 48px 0; text-align: center; font-size: 13.5px; color: var(--tinta-3); }
.vazio-titulo { font-size: 14px; font-weight: 500; color: var(--tinta); margin-bottom: 4px; }

/* ============================== Gaveta ============================== */

.gaveta-fundo { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: flex-end; }
.gaveta-veu {
    position: absolute; inset: 0; border: 0; padding: 0;
    background: rgba(21, 25, 23, .18); cursor: default;
}
.gaveta {
    position: relative; width: 420px; max-width: 100%; height: 100%;
    background: var(--fundo); border-left: 1px solid var(--linha);
    box-shadow: -12px 0 32px rgba(21, 25, 23, .08);
    display: flex; flex-direction: column; overflow-y: auto;
    animation: entrar-gaveta .16s ease-out;
}
@keyframes entrar-gaveta { from { transform: translateX(14px); opacity: .6; } to { transform: none; opacity: 1; } }

.gaveta-topo {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid var(--linha-fraca);
}
.gaveta-seccao { padding: 24px 20px 0; }
.gaveta-rodape {
    display: flex; gap: 8px; padding: 16px 20px;
    border-top: 1px solid var(--linha-fraca); margin-top: 24px;
}
.gaveta-caixa {
    margin: 0 20px; padding: 14px 16px; border-radius: 8px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* ============================== Progresso ============================== */

#progresso { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100; pointer-events: none; }
#progresso::after {
    content: ""; display: block; height: 100%; width: 0;
    background: var(--verde); opacity: 0;
    transition: width .25s ease, opacity .25s ease;
}
#progresso.a-carregar::after { width: 72%; opacity: 1; transition: width 1.1s cubic-bezier(.22,.8,.3,1); }
#progresso.concluido::after { width: 100%; opacity: 1; transition: width .12s ease; }
.htmx-request .principal { opacity: .62; transition: opacity .12s ease .06s; }
/* O conteudo nao cresce para la do que se le bem: numa janela larga fica
   centrado, em vez de encostado a esquerda com meio ecra vazio a direita.
   Fica de fora tudo o que se posiciona por cima da pagina — dialogos, toasts
   e a gaveta: essas cobrem o ecra inteiro e nao sao conteudo. */
.principal > *:not(dialog, .toasts, .gaveta-fundo) {
    width: 100%;
    max-width: var(--conteudo);
    margin-inline: auto;

    /* O .principal e uma coluna flex de altura fixa: sem isto encolhe os
       filhos para caberem. Quem tem overflow escondido — a barra de
       separadores — perde a altura minima automatica e fica esmagado a 1px. */
    flex-shrink: 0;
}

.principal { transition: opacity .1s ease; }

/* ============================== Entrada ============================== */

.entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--fundo-lateral); }
.entrada-caixa { width: 100%; max-width: 360px; }
/* A marca da escolinha em cima, ao centro, como na barra lateral: o logotipo
   e, por baixo, o nome partido em duas linhas quando é comprido. */
.entrada-marca {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    margin-bottom: 22px; text-align: center;
}
/* O logótipo vem em JPEG com fundo branco; multiplicar funde-o no cinzento da
   página, como na barra lateral. */
.entrada-logo { width: 132px; height: 132px; object-fit: contain; mix-blend-mode: multiply; }
.entrada-selo {
    width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center;
    background: var(--verde); color: #FFFFFF; font-size: 24px; font-weight: 600;
}
.entrada-escola {
    font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3;
    max-width: 16ch; text-wrap: balance;
}
.entrada-cartao { background: var(--fundo); border: 1px solid var(--linha); border-radius: 10px; padding: 24px; }
.entrada-titulo { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.entrada-nota { font-size: 12.5px; color: var(--tinta-4); margin-bottom: 18px; }
.entrada-rodape { text-align: center; font-size: 12px; color: var(--tinta-5); margin-top: 18px; }
.entrada-app { font-weight: 600; letter-spacing: .02em; color: var(--tinta-4); }

/* ============================== Telemóvel ============================== */

.abrir-menu { display: none; }
#menu { position: absolute; opacity: 0; pointer-events: none; }
.veu { display: none; }

@media (max-width: 900px) {
    .lateral {
        position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 50;
        transform: translateX(-100%); transition: transform .18s ease;
        box-shadow: 0 0 32px rgba(21, 25, 23, .14);
    }
    #menu:checked ~ .app .lateral { transform: none; }
    #menu:checked ~ .app .veu { opacity: 1; pointer-events: auto; }

    .veu {
        display: block; position: fixed; inset: 0; z-index: 40;
        background: rgba(21, 25, 23, .25);
        opacity: 0; pointer-events: none; transition: opacity .18s;
    }

    .abrir-menu {
        display: inline-grid; place-items: center;
        width: 32px; height: 32px; margin-right: 4px;
        border: 1px solid var(--linha-campo); border-radius: 6px;
        background: var(--fundo); color: var(--tinta-2); cursor: pointer; flex: none;
    }

    .principal { padding: 16px; }
    .campos { gap: 12px; }
    .c-1, .c-2, .c-3, .c-4, .c-5, .c-6, .c-7, .c-8 { grid-column: span 12; }
    .gaveta { width: 100%; }
    .search { width: 100%; }
}

@media print {
    /* O papel não é uma janela: a casca tem altura fixa e scroll interno, e
       sem isto imprimia-se só o que estava à vista. Vale para todos os ecrãs,
       não só para a ficha. */
    html, body, .app, .principal {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .app { display: block !important; }
    .principal { display: block !important; padding: 10mm; }
    .principal > * { max-width: none !important; margin: 0 !important; }

    .lateral, .cabecalho-accoes, .filtros, .tabs, .abrir-menu, .veu,
    .paginacao, .toasts, #progresso { display: none !important; }

    body { font-size: 11px; }
}


/* Escolha de meses: etiquetas que se ligam e desligam. */
.meses-escolha { display: flex; flex-wrap: wrap; gap: 8px; }
.meses-escolha .chip { height: 34px; }

/* ============================== Toasts ============================== */

/* O recipiente não apanha cliques; cada toast apanha os seus. Sem isto, uma
   faixa invisível de 360 px ficava por cima da página. */
.toasts {
    position: fixed; z-index: 70; right: 16px; bottom: 16px;
    display: flex; flex-direction: column-reverse; gap: 8px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
.toast {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: 10px;
    border: 1px solid var(--linha); background: var(--fundo);
    box-shadow: 0 12px 32px rgba(21, 25, 23, .16), 0 2px 6px rgba(21, 25, 23, .06);
    font-size: 13px; color: var(--tinta);
    pointer-events: auto;
    animation: toast-entra .22s ease-out;
}
.toast-texto { flex: 1; min-width: 0; }
.toast .ico { margin-top: 1px; }
.toast-ok { border-color: #BFDCCF; }
.toast-ok .ico { color: var(--verde); }
.toast-erro { border-color: #EFCCC8; }
.toast-erro .ico { color: var(--vermelho); }
.toast-fechar {
    background: none; border: 0; color: var(--tinta-5); cursor: pointer;
    font-size: 16px; line-height: 1; padding: 0 2px; flex: none;
}
.toast-fechar:hover { color: var(--tinta); }
.toast.sai { animation: toast-sai .2s ease-in forwards; }

@keyframes toast-entra { from { opacity: 0; transform: translateY(10px); } }
@keyframes toast-sai { to { opacity: 0; transform: translateY(10px); } }

@media (max-width: 720px) {
    .toasts { left: 16px; right: 16px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .toast, .toast.sai { animation: none; }
}

/* ============================== Diálogo ============================== */

/* O reset `* { margin: 0 }` apaga o `margin: auto` com que o navegador centra
   um <dialog> modal — sem ele o diálogo encosta-se ao canto do ecrã. */
.dialogo {
    margin: auto;
    border: 0; border-radius: 12px; padding: 0;
    width: min(440px, calc(100vw - 32px));
    background: var(--fundo); color: var(--tinta);
    box-shadow: 0 24px 60px rgba(21, 25, 23, .24);
}
.dialogo::backdrop { background: rgba(21, 25, 23, .42); }
/* O alinhamento é do diálogo, não de onde ele foi escrito: dentro de uma célula
   alinhada à direita, o texto saía todo encostado. */
.dialogo-corpo { padding: 20px; display: flex; flex-direction: column; gap: 16px; text-align: left; }
.dialogo-titulo { font-size: 16px; font-weight: 600; }
.dialogo-texto { margin: 10px 0 0; font-size: 13.5px; color: var(--tinta-3); }
.dialogo-total {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-radius: 8px;
    background: var(--fundo-lateral); border: 1px solid var(--linha);
    font-size: 15px; font-weight: 600;
}
.dialogo-total span:last-child { font-variant-numeric: tabular-nums; }
.dialogo-accoes { display: flex; gap: 8px; }
.dialogo-accoes .btn { flex: 1; height: 38px; }

/* Diálogo largo: o detalhe de uma turma ou de um registo, com secções
   próprias. O corpo rola por dentro, para o diálogo nunca passar do ecrã. */
/* O [open] e preciso: sem ele, um display de autor venceria o display:none
   com que o navegador esconde um dialogo fechado, e ele ficaria sempre a
   vista. */
/* Diálogo de tamanho médio: um formulário curto, sem listas lá dentro. O
   navegador põe overflow:auto em todos os <dialog>, e sem isto rolariam dois,
   o diálogo e o corpo, com as barras encostadas uma à outra. */
.dialogo-medio {
    width: min(560px, calc(100vw - 32px));
    max-height: min(86dvh, 760px);
    overflow: hidden;
}
.dialogo-medio[open] { display: flex; }
.dialogo-medio .dialogo-corpo { flex: 1; min-height: 0; overflow-y: auto; }
/* Botões ao fundo e à direita, com o principal por último — é onde a mão vai.
   Quem precisar de uma acção à esquerda põe lá o seu `margin-right: auto`. */
.dialogo-medio .dialogo-accoes { justify-content: flex-end; }
.dialogo-medio .dialogo-accoes .btn { flex: none; }
.dialogo-topo {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.dialogo-topo .muted { font-size: 12.5px; }
.dialogo-seccao { border-top: 1px solid var(--linha-fraca); padding-top: 18px; }
.dialogo-seccao h2 { margin: 0; font-size: 14px; font-weight: 600; }

/* ---------- Acessos de uma conta, no diálogo ---------- */

.acessos { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.acesso {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.acesso:hover { background: var(--fundo-suave); }
.acesso.mexido { background: var(--fundo-sel); }
.acesso input { margin-top: 2px; }
.acesso span { display: flex; flex-direction: column; min-width: 0; }
.acesso-nome { font-size: 13.5px; font-weight: 500; flex-direction: row !important; gap: 8px; align-items: center; }
.acesso-nota { font-size: 12px; color: var(--tinta-4); }