/* =========================================================
   Projecto Miramar — área administrativa
   Conceito: barra lateral marinho, área de trabalho clara.
   As cores das hastes só codificam áreas de formação e estados.
   ========================================================= */
/* Fontes servidas pelo próprio site (as mesmas do Google Fonts, licença OFL em ../fonts/).
   Fontes variáveis: um ficheiro cobre todos os pesos. Subconjunto latino (inclui os acentos do português). */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/lexend-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(../fonts/source-sans-3-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --marinho: #07075a;
  --marinho-2: #15157d;
  --tinta: #17173d;
  --apagado: #5c5f84;
  --tenue: #66698c;   /* era #8a8db0 (3,2:1); escurecido para contraste AA também nas linhas marcadas */
  --linha: #e1e2ee;
  --fundo: #f4f5fa;
  --papel: #ffffff;
  --magenta: #f0096d;
  --magenta-botao: #dc0866;   /* 4,9:1 com texto branco (AA); --magenta fica para elementos decorativos */
  --amarelo: #ffb300;
  --verde: #00b8a2;
  --violeta: #5328a6;

  --st-inscrito: #5c5f84;   --st-inscrito-f: #eceef6;
  --st-analise: #1f5fc4;    --st-analise-f: #e4eeff;
  --st-seleccionado: #08704f; --st-seleccionado-f: #ddf5ec;   /* era #0a7d5a (4,48:1 na pílula); escurecido para AA */
  --st-espera: #8a5a00;     --st-espera-f: #fff2d6;
  --st-nao: #b0123c;        --st-nao-f: #fde5ec;

  --f-titulo: 'Lexend', 'Segoe UI', system-ui, sans-serif;
  --f-texto: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --r: 12px;
  --lateral: 248px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--f-texto); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--f-titulo); color: var(--marinho); margin: 0; line-height: 1.2; font-weight: 600; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0; }
a { color: var(--violeta); }
img { max-width: 100%; display: block; }
/* <picture> (WebP + PNG) não altera o layout: a imagem continua a ser o elemento que conta. */
picture { display: contents; }
[hidden] { display: none !important; }
.ic { width: 18px; height: 18px; flex: none; }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Botões e campos ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-family: var(--f-titulo); font-weight: 500; font-size: .9rem; padding: .6rem 1.1rem; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; }
.btn--primario { background: var(--magenta-botao); color: #fff; }
.btn--primario:hover { background: #b8065a; }
.btn--marinho { background: var(--marinho); color: #fff; }
.btn--marinho:hover { background: var(--marinho-2); }
.btn--linha { background: var(--papel); border-color: #cfd1e3; color: var(--marinho); }
.btn--linha:hover { border-color: var(--marinho); }
.btn--perigo { background: var(--papel); border-color: #f2b8c8; color: var(--st-nao); }
.btn--perigo:hover { background: var(--st-nao-f); }
.btn--texto { background: none; color: var(--violeta); padding-inline: .4rem; }
.btn--pequeno { padding: .4rem .8rem; font-size: .85rem; }
.btn--largo { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.icone-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--linha); background: var(--papel); color: var(--marinho); cursor: pointer; padding: 0; }
.icone-btn:hover { border-color: var(--marinho); }
.icone-btn[disabled] { opacity: .35; cursor: default; }

.campo { display: grid; gap: .35rem; min-width: 0; align-content: start; }
.campo > label, .rotulo { font-weight: 600; color: var(--marinho); font-size: .9rem; }
.campo .ajuda { color: var(--apagado); font-size: .84rem; }
.entrada, .seleccao, .area-texto {
  width: 100%; font: inherit; color: var(--tinta); background: var(--papel);
  border: 1.5px solid #cfd1e3; border-radius: 10px; padding: .55rem .75rem; min-height: 40px;
}
.area-texto { min-height: 96px; resize: vertical; line-height: 1.5; }
.seleccao { appearance: none; padding-right: 2.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307075a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .65rem center; background-size: 16px; }
.entrada:focus, .seleccao:focus, .area-texto:focus { outline: none; border-color: var(--violeta); box-shadow: 0 0 0 3px rgba(83,40,166,.16); }
.erro-msg { color: var(--st-nao); font-weight: 600; font-size: .88rem; }
.nota { color: var(--apagado); font-size: .86rem; }

.interruptor { position: relative; display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-weight: 600; color: var(--marinho); }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor i { width: 40px; height: 24px; border-radius: 999px; background: #c8cadc; position: relative; transition: background-color .15s; flex: none; }
.interruptor i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.interruptor input:checked + i { background: var(--verde); }
.interruptor input:checked + i::after { transform: translateX(16px); }
.interruptor input:focus-visible + i { outline: 3px solid var(--amarelo); outline-offset: 2px; }

.segmentos { justify-self: start; display: inline-flex; flex-wrap: wrap; border: 1.5px solid #cfd1e3; border-radius: 999px; padding: 3px; gap: 2px; background: var(--papel); }
.segmentos label { position: relative; }
.segmentos input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmentos span { display: block; padding: .4rem .95rem; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--apagado); }
.segmentos input:checked + span { background: var(--marinho); color: #fff; }
.segmentos input:focus-visible + span { outline: 3px solid var(--amarelo); }

/* ---------- Entrada ---------- */
.entrada-ecra { min-height: 100%; display: grid; place-items: center; padding: 2rem max(16px, env(safe-area-inset-right, 0px)) 2rem max(16px, env(safe-area-inset-left, 0px)); background: var(--marinho); }
.entrada-cartao { width: min(100%, 400px); background: var(--papel); border-radius: 20px; padding: 2rem; display: grid; gap: 1.1rem; }
.entrada-cartao h1 { font-size: 1.4rem; }
.entrada-cartao p { color: var(--apagado); }

/* ---------- Estrutura ---------- */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100%; }
.lateral { background: var(--marinho); color: #cfd0f5; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.25rem .85rem calc(1rem + env(safe-area-inset-bottom, 0px)) max(.85rem, env(safe-area-inset-left, 0px)); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.lateral__marca { display: flex; gap: .7rem; align-items: center; text-decoration: none; padding: .25rem .5rem; }
.lateral__marca img { width: 36px; height: 36px; }
.lateral__marca strong { display: block; font-family: var(--f-titulo); color: #fff; font-size: .95rem; font-weight: 600; }
.lateral__marca small { color: #a9abe2; font-size: .82rem; }
.lateral__nav { display: grid; gap: 2px; }
.lateral__pe { margin-top: auto; display: grid; gap: 2px; border-top: 1px solid rgba(255,255,255,.1); padding-top: .75rem; }
.nav-item { display: flex; align-items: center; gap: .75rem; padding: .62rem .75rem; border-radius: 10px; color: #cfd0f5; text-decoration: none; font-weight: 600; font-size: .95rem; background: none; border: 0; font-family: inherit; cursor: pointer; text-align: left; width: 100%; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item[aria-current="page"] { background: var(--papel); color: var(--marinho); }
.nav-item .ic { width: 20px; height: 20px; }
.nav-item__n { margin-left: auto; font-size: .78rem; background: var(--magenta-botao); color: #fff; border-radius: 999px; padding: 0 .5rem; font-variant-numeric: tabular-nums; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.barra { position: sticky; top: 0; z-index: 10; background: rgba(244,245,250,.94); backdrop-filter: blur(8px); display: flex; align-items: center; gap: 1rem; padding: .85rem max(16px, env(safe-area-inset-right, 0px)) .85rem 1.75rem; border-bottom: 1px solid var(--linha); }
.barra__titulo { font-size: 1.3rem; font-weight: 600; margin-right: auto; }
.barra__estado { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--apagado); }
.barra__utilizador { display: flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .9rem; color: var(--marinho); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--violeta); color: #fff; font-family: var(--f-titulo); font-size: .8rem; font-weight: 600; flex: none; }
.vista { padding: 1.5rem max(16px, env(safe-area-inset-right, 0px)) 4rem 1.75rem; display: grid; gap: 1.25rem; align-content: start; outline: none; }
.so-movel { display: none; }
.lateral-fundo { display: none; }

@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: min(280px, 85vw); z-index: 50; transform: translateX(-102%); transition: transform .2s; height: 100%; }
  .lateral.aberta { transform: none; }
  .lateral-fundo { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(7,7,90,.45); }
  .so-movel { display: inline-grid; }
  .barra { padding-left: max(16px, env(safe-area-inset-left, 0px)); }
  .vista { padding-left: max(16px, env(safe-area-inset-left, 0px)); }
  .barra__utilizador span { display: none; }
}
@media (max-width: 640px) { .barra__estado { display: none; } }

/* ---------- Blocos ---------- */
.bloco { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r); padding: 1.25rem; min-width: 0; }
.bloco__cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.bloco__cabeca p { color: var(--apagado); font-size: .88rem; }
.grelha-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.grelha-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 1100px) { .grelha-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grelha-2, .grelha-3 { grid-template-columns: 1fr; } }

/* Indicadores */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .kpis { grid-template-columns: 1fr; } }
.kpi { display: grid; gap: .35rem; align-content: start; }
.kpi__rotulo { color: var(--apagado); font-weight: 600; font-size: .88rem; }
.kpi__valor { font-family: var(--f-titulo); font-size: 2rem; font-weight: 600; color: var(--marinho); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1; }
.kpi__det { color: var(--apagado); font-size: .86rem; }
.kpi__det strong { color: var(--tinta); }
.progresso { height: 8px; background: var(--fundo); border-radius: 999px; overflow: hidden; margin-top: .3rem; }
.progresso span { display: block; height: 100%; background: var(--verde); border-radius: 999px; }

/* Gráfico por dia */
.grafico-dias { width: 100%; height: 220px; display: block; }
.grafico-dias text { fill: var(--apagado); font-size: 11px; font-family: var(--f-texto); }
.grafico-dias .grelha-l { stroke: var(--linha); stroke-width: 1; }
.grafico-dias .barra-d { fill: var(--violeta); }
.grafico-dias .barra-d--hoje { fill: var(--magenta); }
.grafico-dias .valor { fill: var(--marinho); font-weight: 600; }

/* Barras horizontais */
.barras { display: grid; gap: .55rem; }
.barras__linha { display: grid; grid-template-columns: minmax(90px, 9.5rem) minmax(0, 1fr) 4.2rem; gap: .75rem; align-items: center; font-size: .9rem; }
.barras__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras__trilho { height: 10px; background: var(--fundo); border-radius: 999px; overflow: hidden; }
.barras__trilho span { display: block; height: 100%; border-radius: 999px; background: var(--cor, var(--marinho)); min-width: 2px; }
.barras__n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--marinho); }
.barras__n small { color: var(--tenue); font-weight: 400; display: block; font-size: .76rem; line-height: 1; }
.barras--provincias { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; display: grid; }
@media (max-width: 900px) { .barras--provincias { grid-template-columns: 1fr; } }
.cor-magenta { --cor: var(--magenta); }
.cor-amarelo { --cor: var(--amarelo); }
.cor-verde { --cor: var(--verde); }
.cor-violeta { --cor: var(--violeta); }

.dividida { display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin: .25rem 0 .75rem; }
.dividida span { height: 100%; }
.legenda { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .88rem; }
.legenda span { display: inline-flex; align-items: center; gap: .4rem; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--cor); }

/* Estado das inscrições (painel) */
.estado-insc { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.estado-insc__texto { margin-right: auto; display: grid; gap: .15rem; }
.estado-insc__texto strong { font-family: var(--f-titulo); color: var(--marinho); font-size: 1.05rem; font-weight: 600; }
.estado-insc__texto span { color: var(--apagado); font-size: .9rem; }

/* Pílulas */
.pilula { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; color: var(--st-inscrito); background: var(--st-inscrito-f); }
.pilula::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pilula--analise { color: var(--st-analise); background: var(--st-analise-f); }
.pilula--seleccionado { color: var(--st-seleccionado); background: var(--st-seleccionado-f); }
.pilula--espera { color: var(--st-espera); background: var(--st-espera-f); }
.pilula--nao { color: var(--st-nao); background: var(--st-nao-f); }
.pilula--aberta { color: var(--st-seleccionado); background: var(--st-seleccionado-f); }
.pilula--embreve { color: var(--st-espera); background: var(--st-espera-f); }
.pilula--encerradas { color: var(--st-inscrito); background: var(--st-inscrito-f); }
.area-tag { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.area-tag i { width: 16px; height: 6px; border-radius: 999px; background: var(--cor); transform: rotate(-30deg); flex: none; }

/* ---------- Inscrições ---------- */
.filtros { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(130px, 1fr)); gap: .6rem; }
.filtros--mais { grid-template-columns: repeat(4, minmax(130px, 1fr)) auto; margin-top: .6rem; }
@media (max-width: 1200px) { .filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); } .filtros > :first-child { grid-column: 1 / -1; } .filtros--mais { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .filtros, .filtros--mais { grid-template-columns: 1fr 1fr; } }
.procura { position: relative; }
.procura .ic { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--tenue); }
.procura .entrada { padding-left: 2.2rem; }
.separadores { display: flex; gap: .35rem; flex-wrap: wrap; }
.separador { border: 1.5px solid transparent; background: none; padding: .4rem .8rem; border-radius: 999px; font: inherit; font-weight: 600; font-size: .88rem; color: var(--apagado); cursor: pointer; display: inline-flex; gap: .45rem; align-items: center; }
.separador:hover { background: var(--papel); }
.separador[aria-pressed="true"] { background: var(--marinho); color: #fff; }
.separador b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tenue); }   /* era opacity: .75 (3,3:1) */
.separador[aria-pressed="true"] b, .separador[aria-current="true"] b { color: #c9cbf2; }
.ferramentas { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }

.lote { position: sticky; top: 66px; z-index: 5; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; background: var(--marinho); color: #fff; padding: .65rem 1rem; border-radius: var(--r); }
.lote strong { font-family: var(--f-titulo); font-weight: 600; }
.lote .seleccao { width: auto; min-width: 190px; min-height: 36px; padding-block: .35rem; }
.lote .btn--texto { color: #fff; text-decoration: underline; }
.lote__confirmar { flex-basis: 100%; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; padding-top: .6rem; border-top: 1px solid rgba(255,255,255,.18); }
.lote__confirmar p { margin-right: auto; color: #e3e4ff; }

.tabela-caixa { overflow-x: auto; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r); }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 940px; }
.tabela th { text-align: left; font-weight: 600; color: var(--apagado); font-size: .82rem; padding: .7rem .75rem; border-bottom: 1px solid var(--linha); background: #fafbfe; white-space: nowrap; position: sticky; top: 0; }
.tabela td { padding: .65rem .75rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tbody tr { cursor: pointer; }
.tabela tbody tr:hover { background: #f8f8fd; }
.tabela tbody tr.marcada { background: #f1edfb; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .col-check { width: 40px; }
.tabela input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--marinho); cursor: pointer; }
.tabela__nome { font-weight: 600; color: var(--marinho); }
.tabela__sub { color: var(--tenue); font-size: .8rem; }
.tabela--simples { min-width: 600px; }
.tabela--simples tbody tr { cursor: default; }
.vazio { padding: 3rem 1rem; text-align: center; color: var(--apagado); display: grid; gap: .5rem; justify-items: center; }
.vazio strong { font-family: var(--f-titulo); color: var(--marinho); font-weight: 600; }
.paginacao { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; color: var(--apagado); font-size: .9rem; }
.paginacao div { display: flex; gap: .4rem; align-items: center; }

/* ---------- Gaveta (ficha) ---------- */
.gaveta-fundo { position: fixed; inset: 0; background: rgba(7,7,90,.4); z-index: 60; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--papel); z-index: 61; transform: translateX(102%); transition: transform .22s ease; overflow-y: auto; display: flex; flex-direction: column; box-shadow: -20px 0 40px -20px rgba(7,7,90,.4); padding-bottom: env(safe-area-inset-bottom, 0px); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
.gaveta.aberta { transform: none; visibility: visible; transition: transform .22s ease; }
@media (prefers-reduced-motion: reduce) { .gaveta, .lateral { transition: none; } }
.gaveta__cabeca { padding: 1.25rem max(1.25rem, env(safe-area-inset-right, 0px)) 1rem 1.25rem; border-bottom: 1px solid var(--linha); display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; position: sticky; top: 0; background: var(--papel); z-index: 1; }
.gaveta__cabeca h2 { font-size: 1.25rem; }
.gaveta__cabeca .meta { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; color: var(--apagado); font-size: .88rem; grid-column: 1 / -1; }
.gaveta__corpo { padding: 1.25rem; display: grid; gap: 1.5rem; }
.dados { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .45rem 1rem; margin: 0; font-size: .92rem; }
.dados dt { color: var(--apagado); }
.dados dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 460px) { .dados { grid-template-columns: 1fr; } .dados dd { margin-bottom: .4rem; } }
.decisao { background: var(--fundo); border-radius: var(--r); padding: 1rem; display: grid; gap: .75rem; }
.decisao__linha { display: flex; gap: .6rem; flex-wrap: wrap; }
.decisao__linha .seleccao { flex: 1 1 200px; width: auto; }
.cronologia { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; font-size: .9rem; }
.cronologia li { display: grid; grid-template-columns: auto 1fr; gap: .1rem .75rem; }
.cronologia li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--violeta); margin-top: .35rem; grid-row: span 2; }
.cronologia small { color: var(--tenue); }

/* ---------- Configurações ---------- */
.config { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.config__menu { display: grid; gap: 2px; position: sticky; top: 80px; }
.config__menu a { display: block; text-decoration: none; font-weight: 600; color: var(--apagado); padding: .55rem .8rem; border-radius: 10px; }
.config__menu a:hover { background: var(--papel); color: var(--marinho); }
.config__menu a[aria-current="true"] { background: var(--papel); color: var(--marinho); box-shadow: inset 3px 0 0 var(--magenta); }
@media (max-width: 860px) {
  .config { grid-template-columns: 1fr; }
  .config__menu { position: static; display: flex; overflow-x: auto; gap: .25rem; padding-bottom: .25rem; }
  .config__menu a { white-space: nowrap; }
}
.form-bloco { display: grid; gap: 1.1rem; }
.form-grelha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grelha .largo { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grelha { grid-template-columns: 1fr; } }
.form-pe { display: flex; justify-content: flex-end; gap: .75rem; align-items: center; padding-top: 1rem; border-top: 1px solid var(--linha); flex-wrap: wrap; }
.form-pe .nota { margin-right: auto; }
.explica { background: #f6f3ff; border-radius: 10px; padding: .75rem 1rem; color: #3b2a72; font-size: .9rem; }
.alerta { background: var(--st-espera-f); border-radius: 10px; padding: .75rem 1rem; color: #6c4600; font-size: .9rem; }

.lista-editavel { display: grid; gap: .75rem; }
.item-editavel { border: 1px solid var(--linha); border-radius: var(--r); padding: 1rem; display: grid; gap: .8rem; background: #fcfcfe; }
.item-editavel__topo { display: flex; align-items: center; gap: .5rem; }
.item-editavel__topo strong { margin-right: auto; font-family: var(--f-titulo); color: var(--marinho); font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.logo-prev { width: 48px; height: 48px; border-radius: 10px; background: var(--fundo); display: grid; place-items: center; overflow: hidden; font-family: var(--f-titulo); font-weight: 700; color: var(--marinho); flex: none; }
.logo-prev img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cores { display: flex; gap: .4rem; }
.cores label { position: relative; }
.cores input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cores span { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--cor); border: 3px solid var(--papel); box-shadow: 0 0 0 1.5px #cfd1e3; }
.cores input:checked + span { box-shadow: 0 0 0 2.5px var(--marinho); }
.cores input:focus-visible + span { outline: 3px solid var(--amarelo); outline-offset: 2px; }
.icones-escolha { display: flex; flex-wrap: wrap; gap: .35rem; }
.icones-escolha label { position: relative; }
.icones-escolha input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.icones-escolha span { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; border: 1.5px solid #cfd1e3; color: var(--marinho); background: var(--papel); }
.icones-escolha input:checked + span { border-color: var(--marinho); background: var(--marinho); color: #fff; }

/* ---------- Notificações ---------- */
.eventos { width: 100%; border-collapse: collapse; }
.eventos th, .eventos td { padding: .85rem .75rem; border-bottom: 1px solid var(--linha); text-align: left; }
.eventos th { color: var(--apagado); font-size: .82rem; font-weight: 600; }
.eventos td:not(:first-child), .eventos th:not(:first-child) { text-align: center; width: 120px; }
.eventos tr:last-child td { border-bottom: 0; }
.eventos .evento-nome { font-weight: 600; color: var(--marinho); }
.eventos .evento-desc { color: var(--apagado); font-size: .85rem; }
.variaveis { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .85rem; color: var(--apagado); }
.variavel { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; background: var(--fundo); border: 1px solid var(--linha); border-radius: 6px; padding: .15rem .45rem; color: var(--marinho); cursor: pointer; }
.variavel:hover { border-color: var(--violeta); }
.contador-sms { font-size: .84rem; color: var(--apagado); font-variant-numeric: tabular-nums; }
.contador-sms--excede { color: var(--st-nao); font-weight: 700; }
.estado-prov { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; }
.estado-prov::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cor, var(--tenue)); }
.estado-prov--ok { --cor: var(--verde); color: var(--st-seleccionado); }
.estado-prov--falta { --cor: var(--amarelo); color: var(--st-espera); }
.teste { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; padding-top: 1rem; border-top: 1px dashed var(--linha); }
.teste .campo { flex: 1 1 220px; }

/* ---------- Avisos ---------- */
.avisos { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 80; display: grid; gap: .5rem; justify-items: end; max-width: calc(100vw - 32px); }
.aviso { background: var(--marinho); color: #fff; border-radius: 12px; padding: .8rem 1rem; box-shadow: 0 12px 30px -12px rgba(7,7,90,.6); display: flex; gap: .6rem; align-items: center; font-weight: 600; max-width: 420px; animation: entra .2s ease both; }
.aviso .ic { color: var(--verde); }
.aviso a { color: var(--amarelo); }
@keyframes entra { from { transform: translateY(8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .aviso { animation: none; } }

.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Campos com erro (formulários do servidor) ---------- */
.campo--erro .entrada, .campo--erro .seleccao, .campo--erro .area-texto { border-color: var(--st-nao); }

/* ---------- Instalador e páginas de erro ---------- */
.entrada-cartao--largo { width: min(100%, 640px); }
.instalador fieldset { border: 0; margin: 0; padding: 1.1rem 0 0; border-top: 1px solid var(--linha); display: grid; gap: .9rem; min-width: 0; }
.instalador legend { font-family: var(--f-titulo); font-weight: 600; color: var(--marinho); font-size: 1rem; padding: 0 0 .4rem; }
.requisitos summary { cursor: pointer; padding: .4rem 0; min-height: 44px; display: flex; align-items: center; }
.requisitos__lista { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.requisitos__lista li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; }
.lista-passos { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; color: var(--apagado); }
.erro-detalhe { margin: 0; max-height: 50vh; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: .8rem; background: var(--fundo); border-radius: 10px; padding: .75rem; }

/* ---------- Classes em vez dos style="" do protótipo (a CSP não permite estilos em linha) ---------- */
.grafico-caixa { overflow-x: auto; }
.bloco__cabeca--espaco { margin-top: 1.5rem; }
.sem-margem { margin: 0; }
.sem-quebra { white-space: nowrap; }
.dividida__f { background: var(--magenta); }
.dividida__m { background: var(--violeta); }
.ic--esquerda { transform: rotate(180deg); }
/* Larguras das barras: data-largura no HTML, aplicada pelo admin.js. */
[data-largura] { width: 0; }

/* ---------- Utilizadores ---------- */
.utilizador-nome { display: flex; gap: .6rem; align-items: center; }
.accoes-utilizador { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.definir-senha { position: relative; }
.definir-senha summary { list-style: none; }
.definir-senha summary::-webkit-details-marker { display: none; }
.definir-senha form { display: flex; gap: .4rem; margin-top: .4rem; min-width: 260px; }
.form-estreito { max-width: 34rem; }

/* ---------- Inscrições (ligações do servidor no lugar dos botões do protótipo) ---------- */
.resultados { display: grid; gap: 1.25rem; }
/* Sem isto, a largura mínima da tabela alarga a página: o scroll horizontal fica só na tabela. */
.resultados, .resultados > * { min-width: 0; }
a.separador { text-decoration: none; }
.separador[aria-current="true"] { background: var(--marinho); color: #fff; }
a.tabela__nome { text-decoration: none; }
a.tabela__nome:hover, a.tabela__nome:focus-visible { text-decoration: underline; }
.tabela__ordem { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.tabela__ordem .ic { width: 14px; height: 14px; }
.ferramentas__accoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.lote__espaco { margin-left: auto; }
.lote__filtro { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.lote__filtro input { width: 18px; height: 18px; accent-color: var(--magenta); }
.lote__filtro:focus-within { outline: 2px solid #fff; outline-offset: 2px; }
.gaveta__corpo h3 { margin-bottom: .75rem; }
.ficha-accoes { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .75rem; }
.form-grelha--uma { grid-template-columns: 1fr; }

/* ---------- Configurações ---------- */
.caixa-simples { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--marinho); cursor: pointer; min-height: 32px; }
.caixa-simples input { width: 18px; height: 18px; accent-color: var(--marinho); }
.item-editavel__topo strong { min-width: 0; overflow-wrap: anywhere; }
.item-editavel__topo strong .nota { font-family: var(--f-texto); font-weight: 400; }

/* ---------- Notificações ---------- */
.tabela-rolar { overflow-x: auto; }
.aviso-entrada { background: var(--st-seleccionado-f); color: var(--st-seleccionado); border-radius: 10px; padding: .75rem 1rem; font-size: .92rem; font-weight: 600; }
.segmentos a { display: block; padding: .4rem .95rem; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--apagado); text-decoration: none; }
.segmentos a:hover { color: var(--marinho); }
.segmentos a[aria-current="true"] { background: var(--marinho); color: #fff; }
.previsao { background: var(--fundo); border-radius: 12px; padding: 1.25rem; min-width: 0; }
.previsao .nota { margin: 0; }
.previsao__assunto { font-weight: 600; margin: 0 0 .75rem; overflow-wrap: anywhere; }
.previsao__texto { white-space: pre-line; overflow-wrap: anywhere; margin: 0; }
.previsao hr { border: 0; border-top: 1px solid var(--linha); margin: .75rem 0; }
.separar-acima { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linha); }
.linha-accao { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin: .75rem 0; }
.estado-fila { display: grid; gap: .5rem; margin: .75rem 0; }
.erro-envio { color: var(--st-nao); overflow-wrap: anywhere; max-width: 32ch; }
.historico-filtros { grid-template-columns: minmax(200px, 2fr) repeat(2, minmax(130px, 1fr)) auto; margin-bottom: .75rem; }
@media (max-width: 760px) { .historico-filtros { grid-template-columns: 1fr; } }

/* ---------- Alvos de toque com pelo menos 44 px nos ecrãs tácteis ---------- */
@media (pointer: coarse) {
  .entrada, .seleccao { min-height: 44px; }
  .icone-btn { width: 44px; height: 44px; }
  .btn--pequeno, .nav-item, .separador, .segmentos a { min-height: 44px; }
  .interruptor { min-height: 44px; }
  /* Revisão da Fase 8: o alvo é a área à volta do controlo, sem mudar o desenho. */
  .toque-caixa { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; margin: -12px; cursor: pointer; }
  .tabela__ordem { display: inline-flex; align-items: center; min-height: 44px; }
  .cores { gap: 0; }
  .cores label { padding: 7px; }
  .icones-escolha { gap: 0; }
  .icones-escolha label { padding: 3px; }
  .variavel { min-height: 44px; }
  .caixa-simples { min-height: 44px; }
  .entrada-cartao a.nota { display: inline-flex; align-items: center; min-height: 44px; }
}
.item-editavel__topo .icone-btn { flex: none; }
/* Ecrãs estreitos: o título fica numa linha e os botões (44 px) na seguinte, à direita. */
@media (max-width: 480px) {
  .item-editavel__topo { flex-wrap: wrap; }
  .item-editavel__topo strong { flex: 1 0 100%; }
  .item-editavel__topo strong + .icone-btn { margin-left: auto; }
}