/**
 * Paralelo — Design System do "Banco de dados de Gestão de Dados" (Front-end)
 *
 * Componentes reutilizáveis para as páginas de dados (Províncias e,
 * progressivamente, as restantes entidades) — tabela, toolbar, drawer,
 * estados de loading/vazio/erro, badges, comparação de duplicados.
 * Reaproveita sempre os tokens `--paralelo-*` já gerados por
 * `ThemeOutput::css_variables()` (claro/escuro) e as classes já
 * existentes em `frontend.css` (`.paralelo-btn-*`, `.paralelo-modal-*`,
 * `.paralelo-empty-state`) — nunca reinventa cor/tipografia.
 */

/* CORRIGIDO (pedido "Ajustes Finais de Navegação, Selects, Preferências
   e Estatísticas" — Parte 3, "Selects duplicados"): a causa raiz real —
   auditada ponto a ponto, nunca assumida. `searchable-select.js`
   (`enhanceSelect()`) já fazia exactamente o que devia:
   `selectEl.hidden = true` no `<select>` original, substituído
   visualmente por um combobox novo. O que faltava era o navegador
   conseguir OBEDECER a esse `hidden` — pelo menos três regras nesta
   folha de estilos (`.paralelo-data-field select`,
   `.paralelo-data-toolbar select`, `.paralelo-data-location-level
   select`, todas mais abaixo) definem `display:block`/`display` sem
   condição nenhuma, com a mesma especificidade do `[hidden]` nativo do
   navegador — como carregam depois da folha de estilos do próprio
   browser, ganhavam sempre, e o `<select>` original ficava sempre
   visível ao lado do combobox novo. É a mesma causa exacta já corrigida
   para `.paralelo-combobox__panel` numa fase anterior — desta vez
   resolvida de uma só vez, para QUALQUER select actual ou futuro desta
   folha de estilos (nunca mais precisar de corrigir regra a regra):
   nunca é "esconder com CSS" um problema (Requisito 3.7) — é restaurar
   o comportamento nativo e correcto do próprio atributo `hidden`, que
   uma colisão de especificidade tinha quebrado. */
select[hidden] {
	display: none !important;
}

/* ---------- Cabeçalho de página + toolbar ---------- */

.paralelo-data-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.paralelo-data-header h1 {
	margin: 0 0 6px;
}

.paralelo-data-header p {
	margin: 0;
	opacity: 0.7;
	font-size: var(--paralelo-text-sm);
	max-width: 60ch;
}

/* NOVO (Parte E — "Resumo da Unidade Sanitária"): agrupa o botão "+
   Novo registo" existente com o novo link "Resumo da Unidade
   Sanitária" — sem isto, `.paralelo-data-header`'s `justify-content:
   space-between` (2 filhos directos) empurraria os 2 botões para
   sítios diferentes do cabeçalho em vez de os manter juntos. */
.paralelo-data-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* A tabela do Resumo NÃO tem coluna "Ações" — a última coluna real é
   "Dis." do Mês 2, que nunca deve herdar o `position: sticky`/sombra
   pensados para a coluna de acções (Parte A, secção 1.3 do pedido).
   Selector composto (2 classes na MESMA tabela) para vencer sempre a
   regra global `.paralelo-data-table th:last-child`, independentemente
   da ordem no ficheiro. */
.paralelo-data-table.paralelo-data-table--summary th:last-child,
.paralelo-data-table.paralelo-data-table--summary td:last-child {
	position: static;
	box-shadow: none;
	z-index: auto;
	background: transparent;
}

/* AJUSTADO (pedido original "ajuste o container... para que todos
   tenham a mesma largura, suficiente para caber o texto mais longo...
   para que o conteúdo de uma coluna não atrapalhe ou sobreponha o
   conteúdo de outras colunas"; ajustado de novo depois de "retire os
   rótulos/textos... deixe apenas as percentagens" — o conteúdo real
   ficou muito mais curto, `min-width` reduzido de 150px para 64px
   para não sobrar espaço vazio enorme): cabe confortavelmente "100%"
   (o texto mais longo agora possível — 3 dígitos + "%", medido em
   Chrome real ≈ 61px) + `text-align:center` — como TODAS as pílulas
   partilham este mesmo `min-width`, e nenhuma o ultrapassa em uso
   normal, o resultado visual é sempre a MESMA largura em toda a
   coluna. `box-sizing:border-box` para o padding nunca somar por cima
   do `min-width` pedido (mesmo motivo já documentado para `th/td`,
   mais abaixo). */
.paralelo-rdqa-summary-classification {
	display: inline-block;
	box-sizing: border-box;
	min-width: 64px;
	padding: 4px 14px;
	border-radius: 999px;
	font-weight: 600;
	font-size: var(--paralelo-text-sm);
	text-align: center;
	white-space: nowrap;
}

/* AJUSTADO (pedido seguinte à Parte E: "reorganize os campos de
   filtros para que todos fiquem numa só linha, pode colocar 3 ou 4
   campos em cada linha"): grelha própria (nunca a genérica
   `.paralelo-data-toolbar-filters`, pensada só para a cascata
   território) — cada filtro (Serviço/Variável/Ronda/Mês/Datas/
   território) ocupa uma célula igual, tantas por linha quantas
   couberem (nunca um número fixo — mantém-se responsivo em Tablet/
   Mobile, secção 9 do pedido original). Selector composto
   (`.paralelo-data-toolbar.paralelo-rdqa-summary-filters`) para vencer
   sempre `display: flex` de `.paralelo-data-toolbar` (mesma
   especificidade de 1 classe cada — sem o composto, a ordem no
   ficheiro decidiria, frágil). A cascata território
   (`[data-paralelo-rdqa-summary-location]`) participa da MESMA grelha
   via `display: contents` — o wrapper desaparece da árvore de caixas,
   promovendo os seus filhos (Província/Distrito/Unidade Sanitária) a
   células directas desta grelha, sem precisar de reestruturar
   `setupCascadingPicker()`. */
/* AJUSTADO (pedido "faça com que em cada linha caibam 4 filtros"):
   `repeat(4, 1fr)` — SEMPRE 4 por linha em ecrãs largos (nunca "tantos
   quantos couberem", que podia dar 3, 5 ou 6 dependendo da largura).
   Reduz para 2 e depois 1 por linha nos breakpoints mais estreitos
   (Tablet/Mobile) — nunca força scroll horizontal nem esmaga os
   campos (secção 9 do pedido original de tabelas globais, reutilizada
   aqui para os filtros). */
.paralelo-data-toolbar.paralelo-rdqa-summary-filters {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px 16px;
	align-items: end;
}

@media (max-width: 900px) {
	.paralelo-data-toolbar.paralelo-rdqa-summary-filters {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.paralelo-data-toolbar.paralelo-rdqa-summary-filters {
		grid-template-columns: 1fr;
	}
}

.paralelo-rdqa-summary-filters > [data-paralelo-rdqa-summary-location] {
	display: contents;
}

.paralelo-rdqa-summary-filters .paralelo-data-location-level {
	min-width: 0;
	flex: initial;
}

.paralelo-rdqa-summary-filters input[type="date"] {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--paralelo-border);
	background: var(--paralelo-bg);
	color: var(--paralelo-text);
	font-size: var(--paralelo-text-sm);
	font-family: inherit;
}

.paralelo-rdqa-summary-filters input[type="date"]:focus {
	outline: 2px solid var(--paralelo-primary);
	outline-offset: 1px;
}

/* NOVO (pedido "Ajustes Finais de Tabelas, RDQA, Discrepâncias,
   Eliminação e Código SISMA" — Parte A, secções 7-9): as 3 tabelas
   novas de agregação (por Ronda; por Serviço+Ronda; por Distrito+Ronda),
   abaixo da tabela "Resumo da Unidade Sanitária" existente — cada uma
   na sua própria secção, com espaçamento vertical claro entre elas
   (nunca coladas umas às outras). O filtro de cada uma
   (`.paralelo-rdqa-agg-filters`) é deliberadamente mais estreito do que
   a grelha de 4 colunas da tabela principal — "por Distrito e Ronda" só
   tem 1 campo; "por Ronda" tem 2 (Província + Distrito); "por Serviço e
   Ronda" tem 3 (Província + Distrito + Unidade Sanitária) — todos
   quebram para a linha seguinte em ecrãs estreitos via o
   `flex-wrap: wrap` já herdado de `.paralelo-data-toolbar`.

   AJUSTADO (pedido "Concerte os filtros das 3 tabelas... campos devem
   ser dependentes... na mesma linha dos filtros de Província e
   Distrito"): os filtros passaram a usar a cascata território em
   campo único (`.paralelo-data-location-picker`, JS
   `setupCascadingPicker()`) — MESMO truque `display: contents` já
   usado por `.paralelo-rdqa-summary-filters` (tabela principal) para o
   wrapper desaparecer da árvore de caixas e promover cada nível
   (Província/Distrito/Unidade Sanitária) a célula directa do `flex`
   deste toolbar, garantindo que ficam sempre na MESMA linha (sujeito
   só ao `flex-wrap` em ecrãs estreitos). */
.paralelo-rdqa-agg-section {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--paralelo-border);
}

.paralelo-rdqa-agg-section h2 {
	margin: 0 0 12px;
	font-size: var(--paralelo-text-lg);
}

.paralelo-rdqa-agg-filters {
	max-width: 760px;
}

.paralelo-rdqa-agg-filters > .paralelo-data-location-picker {
	display: contents;
}

.paralelo-rdqa-agg-filters .paralelo-data-location-level {
	flex: 1 1 auto;
}

/* Linha "Total/Global" (secções 8/9 do pedido) — destacada visualmente
   (nunca só mais uma linha igual às outras), sem depender de nenhuma
   cor fixa (funciona em claro/escuro, mesmos tokens `--paralelo-*` já
   usados em toda a parte). */
.paralelo-rdqa-agg-total-row {
	font-weight: 700;
	background: var(--paralelo-bg);
	border-top: 2px solid var(--paralelo-border);
}

.paralelo-rdqa-summary-filters .paralelo-data-count {
	margin-left: 0;
	align-self: center;
}

.paralelo-data-toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: var(--paralelo-content-gap) 0;
}

/* CORRIGIDO (pedido "Correcção do App Shell + Perfis" — Parte 4, secção
   20: "a pesquisa deve ficar significativamente mais larga"): antes só
   `min-width: 240px`, sem `flex-grow` — ficava estreita mesmo com muito
   espaço livre na toolbar. `flex: 1 1 280px` ocupa o máximo de espaço
   disponível depois dos restantes filtros/contagem, sem nunca ficar
   menor que 280px.

   CORRIGIDO (pedido "o filtro de Mês da RDQA está com altura
   desajustada"): causa real — auditada, nunca assumida. Esta regra
   também acertava, sem intenção, no `<input type="text">` interno de
   QUALQUER combobox pesquisável dentro de `.paralelo-data-toolbar`
   (`.paralelo-combobox__input`, criado por `searchable-select.js`) —
   o Mês da RDQA foi o 1º campo de tags/multi-selecção alguma vez
   colocado dentro de uma toolbar (todos os anteriores viviam dentro de
   `.paralelo-data-field`, nunca aqui). O pai imediato desse input em
   modo multi (`.paralelo-combobox--tags`) é um flex CONTAINER EM
   COLUNA — nessa orientação, `flex-basis` (o "280px" do `flex: 1 1
   280px`) controla o eixo VERTICAL, não a largura: o campo ficava com
   280px de ALTURA, não de largura. `:not(.paralelo-combobox__input)`
   exclui sempre o combobox desta regra, qualquer que seja a
   profundidade a que esteja aninhado — o combobox mantém-se com as
   SUAS próprias regras (`.paralelo-combobox__input`/`.paralelo-combobox--tags .paralelo-combobox__input`), nunca as da toolbar genérica. */
.paralelo-data-toolbar input[type="search"],
.paralelo-data-toolbar input[type="text"]:not(.paralelo-combobox__input) {
	flex: 1 1 280px;
	min-width: 200px;
	padding: 10px 14px;
	border-radius: 8px;
	border: 1px solid var(--paralelo-border);
	background: var(--paralelo-surface);
	color: var(--paralelo-text);
	font-family: inherit;
	font-size: var(--paralelo-text-sm);
}

/* NOVO (módulo "Plano de Actividades" — Fase 3): filtro de data solto
   numa toolbar (ex.: "actividades a decorrer nesta data") — mesmo
   visual do resto dos controlos da toolbar, nunca o estilo por omissão
   do navegador. */
.paralelo-data-toolbar input[type="date"] {
	flex: 0 1 200px;
	min-width: 160px;
	padding: 9px 14px;
	border-radius: 8px;
	border: 1px solid var(--paralelo-border);
	background: var(--paralelo-surface);
	color: var(--paralelo-text);
	font-family: inherit;
	font-size: var(--paralelo-text-sm);
}

/* NOVO (Parte 4, secções 4/34/35 — filtros como `<select>`, ex.: "Todas
   as roles" em Utilizadores): antes sem estilo próprio dentro da
   toolbar, ficava com a aparência nativa do navegador, inconsistente
   com o campo de pesquisa ao lado. */
.paralelo-data-toolbar select {
	flex: 0 1 200px;
	min-width: 160px;
	padding: 10px 14px;
	border-radius: 8px;
	border: 1px solid var(--paralelo-border);
	background: var(--paralelo-surface);
	color: var(--paralelo-text);
	font-family: inherit;
	font-size: var(--paralelo-text-sm);
}

.paralelo-data-toolbar input:focus,
.paralelo-data-toolbar select:focus {
	outline: 2px solid var(--paralelo-primary);
	outline-offset: 1px;
}

/* CORRIGIDO (Parte 4, secção 18/19 — "os filtros devem ficar lado a
   lado" no Desktop): `.paralelo-data-location-picker` (o filtro
   hierárquico Província/Distrito/…) é partilhada com os campos de
   localização DENTRO do formulário, onde `display:grid;
   grid-template-columns: 1fr` os empilha um abaixo do outro de propósito
   (Parte 2, secção 10 — "campos verticais"). Usada aqui como filtro da
   listagem (dentro de `.paralelo-data-toolbar`, nunca dentro do drawer),
   precisa do comportamento oposto — esta classe extra
   (`.paralelo-data-toolbar-filters`, só nesta posição) substitui o grid
   de coluna única por uma linha flexível, quebrando para a linha
   seguinte só quando não cabe (Tablet/Mobile, Requisito 19). */
.paralelo-data-toolbar-filters.paralelo-data-location-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	flex: 2 1 auto;
	margin: 0;
}

.paralelo-data-toolbar-filters .paralelo-data-location-level {
	flex: 1 1 160px;
	min-width: 140px;
}

.paralelo-data-toolbar-filters .paralelo-data-location-level label {
	/* NOVO: dentro da toolbar (uma só linha, sem cabeçalho de secção), o
	   rótulo de cada nível ("Província", "Distrito", …) já é redundante
	   com o placeholder "Todos" do próprio select — mantém-se só para
	   leitores de ecrã. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.paralelo-data-toolbar-filters .paralelo-data-location-level select {
	margin: 0;
}

.paralelo-data-count {
	font-size: var(--paralelo-text-xs);
	opacity: 0.65;
	margin-left: auto;
	white-space: nowrap;
}

@media (max-width: 900px) {
	.paralelo-data-toolbar-filters.paralelo-data-location-picker {
		flex-basis: 100%;
	}
}

/* AJUSTADO (pedido "Filtros AJAX no Dashboard, Estatísticas e
   Relatórios" — secção 1): barra de filtros do Dashboard/Estatísticas
   reutiliza inteiramente `.paralelo-data-toolbar`/`.paralelo-data-toolbar-filters.paralelo-data-location-picker`
   acima (mesma marcação/CSS da tabela) — os botões "Aplicar"/"Limpar"
   foram removidos (cada mudança actualiza sozinha via AJAX); só falta
   o estado discreto de carregamento/anúncio de acessibilidade. */
.paralelo-stats-filter-status {
	font-size: var(--paralelo-text-sm);
	color: var(--paralelo-text);
	opacity: 0.65;
	white-space: nowrap;
}

/* NOVO (pedido "Dados, Geolocalização, Códigos Únicos e Exportação" —
   Parte 2, Requisitos 23/24/37): barra de exportação, sempre junto da
   toolbar de pesquisa/filtros e antes da tabela (Requisito 21 — separação
   visual clara). Desktop: tudo numa linha; sem espaço suficiente, os
   botões quebram para a linha seguinte antes de haver overflow
   horizontal (nunca uma barra de scroll lateral só por causa disto). */
.paralelo-data-export-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: var(--paralelo-content-gap);
}

.paralelo-data-export-bar__label {
	font-size: var(--paralelo-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.6;
}

/* NOVO (pedido "Refinamento de UX..." — página "Capacidades", Requisito
   41): matriz Role × Acção, leitura apenas — mesmo `.paralelo-data-table`
   partilhado, só com as células de estado centradas. */
.paralelo-capabilities-table th,
.paralelo-capabilities-table td {
	text-align: center;
}

.paralelo-capabilities-table th:first-child,
.paralelo-capabilities-table td:first-child {
	text-align: left;
}

.paralelo-capabilities-cell {
	opacity: 0.35;
}

.paralelo-capabilities-cell.is-granted {
	opacity: 1;
	color: #16a34a;
	font-weight: 700;
}

/* NOVO (pedido "Refinamento de UX..." — Parte 1, Requisitos 1-9):
   Searchable Select / Combobox — mesmo visual dos inputs já existentes
   (`.paralelo-data-field input`), sempre que substitui um `<select>`
   dentro de um formulário ou de um filtro. */
.paralelo-combobox {
	position: relative;
}

.paralelo-combobox__input {
	width: 100%;
	padding: 10px 60px 10px 14px;
	border-radius: 8px;
	border: 1px solid var(--paralelo-border);
	background: var(--paralelo-surface);
	color: var(--paralelo-text);
	font-family: inherit;
	font-size: var(--paralelo-text-sm);
	cursor: pointer;
}

.paralelo-combobox__input:focus {
	outline: 2px solid var(--paralelo-primary);
	outline-offset: 1px;
}

.paralelo-combobox.is-disabled .paralelo-combobox__input {
	opacity: 0.6;
	cursor: not-allowed;
	background: var(--paralelo-border);
}

.paralelo-combobox__arrow {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.5;
	pointer-events: none;
	font-size: 16px;
}

.paralelo-combobox__clear {
	position: absolute;
	right: 32px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	opacity: 0.5;
	font-size: 16px;
	line-height: 1;
	padding: 4px;
	color: var(--paralelo-text);
}

.paralelo-combobox__clear:hover {
	opacity: 1;
}

.paralelo-combobox__panel {
	position: absolute;
	z-index: 40;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var(--paralelo-surface);
	border: 1px solid var(--paralelo-border);
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	max-height: 280px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* CORRIGIDO (pedido "Refinamento da Interface e Tutoriais" — Parte 1,
   Requisitos 1-8: "a pesquisa não deve aparecer fora do select,
   permanentemente"): a causa real era esta regra — `display:flex` acima
   tem a mesma especificidade do `[hidden]` nativo do navegador
   (`[hidden] { display:none }`), e como esta folha de estilos carrega
   DEPOIS da folha de estilos nativa do browser, `display:flex` ganhava
   sempre, tornando o atributo `hidden` (já correctamente alternado por
   `openPanel()`/`closePanel()` em `searchable-select.js` — a lógica JS
   sempre esteve certa) sem qualquer efeito visual. O painel (e a
   pesquisa lá dentro) ficava sempre visível, em qualquer select da
   plataforma — corrigido aqui, uma única vez, para todas as instâncias. */
.paralelo-combobox__panel[hidden] {
	display: none;
}

/* AJUSTADO (Requisito 4 — "pequeno; discreto; sem aparência de outro
   formulário"): padding reduzido, sem moldura própria à volta do campo
   (só a borda do próprio input) — a única separação visual do resto do
   painel é a linha fina abaixo, discreta o suficiente para não parecer
   um segundo formulário dentro do dropdown. */
.paralelo-combobox__search {
	padding: 6px;
	border-bottom: 1px solid var(--paralelo-border);
	flex-shrink: 0;
}

.paralelo-combobox__search input {
	width: 100%;
	padding: 6px 8px;
	border-radius: 5px;
	border: 1px solid var(--paralelo-border);
	background: var(--paralelo-bg);
	color: var(--paralelo-text);
	font-family: inherit;
	font-size: var(--paralelo-text-xs);
}

.paralelo-combobox__search input:focus {
	outline: 2px solid var(--paralelo-primary);
	outline-offset: 1px;
}

.paralelo-combobox__listbox {
	list-style: none;
	margin: 0;
	padding: 4px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--paralelo-border) transparent;
}

.paralelo-combobox__option {
	padding: 9px 12px;
	border-radius: 6px;
	font-size: var(--paralelo-text-sm);
	cursor: pointer;
}

.paralelo-combobox__option.is-active,
.paralelo-combobox__option:hover {
	background: var(--paralelo-primary);
	color: #fff;
}

.paralelo-combobox__option.is-selected {
	font-weight: 600;
}

/* NOVO (correcção crítica "Facilitadores: Componentes, Popups e
   Estatísticas" — Parte B, "Motivo de saída" como tags/multi-selecção):
   mesma família visual do combobox single (tokens/bordas/painel
   idênticos), só a área do campo em si ganha uma fila de tags acima do
   input de pesquisa. */
/* CORRIGIDO (pedido "outra modificação" — "as opções selecionadas
   estão ficando fora do campo"): antes, só o `.paralelo-combobox__input`
   tinha borda/fundo — a fila de tags (acrescentada por cima dele no
   mesmo `wrap`, ver `searchable-select.js::enhanceSelect()`) ficava
   visualmente solta, sem nenhuma moldura a envolver tags+campo como UM
   único campo. Agora é o `wrap` (`.paralelo-combobox--tags`) que ganha a
   borda/fundo do campo, e o input por dentro perde a sua própria borda —
   tags e campo de pesquisa passam a ler-se como uma coisa só. */
.paralelo-combobox--tags {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px 8px;
	border-radius: 8px;
	border: 1px solid var(--paralelo-border);
	background: var(--paralelo-surface);
}

.paralelo-combobox--tags:focus-within {
	outline: 2px solid var(--paralelo-primary);
	outline-offset: 1px;
}

.paralelo-combobox--tags .paralelo-combobox__input {
	border: none;
	background: transparent;
	padding: 4px 28px 4px 4px;
}

.paralelo-combobox--tags .paralelo-combobox__input:focus {
	outline: none;
}

.paralelo-combobox--tags .paralelo-combobox__arrow {
	top: auto;
	bottom: 10px;
	transform: none;
}

.paralelo-combobox__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.paralelo-combobox__tags:empty {
	display: none;
}

.paralelo-combobox__tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--paralelo-primary);
	color: #fff;
	border-radius: 999px;
	padding: 4px 6px 4px 10px;
	font-size: var(--paralelo-text-xs);
}

.paralelo-combobox__tag button {
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 2px;
	opacity: 0.85;
}

.paralelo-combobox__tag button:hover {
	opacity: 1;
}

.paralelo-combobox__option-check {
	display: inline-block;
	width: 1.4em;
	margin-right: 4px;
}

/* AJUSTADO (pedido "3 aspectos" — 1: calendário com Mês/Ano
   selecionáveis de forma isolada + dia clicável + digitação manual):
   volta a existir uma grelha de dias (painel `.paralelo-combobox__panel`
   reutilizado, mesma família visual do combobox), mas a navegação deixa
   de ser só "anterior/seguinte" — 2 selects independentes (Mês, Ano) no
   topo do painel. O campo de texto (`__display`) deixa de ser só-leitura
   — cursor de texto normal, não o cursor de "campo clicável" herdado de
   `.paralelo-combobox__input`. */
.paralelo-datepicker {
	position: relative;
}

.paralelo-datepicker__display {
	cursor: text;
	padding-right: 36px;
}

.paralelo-datepicker__panel {
	padding: 10px;
}

.paralelo-datepicker__toolbar {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.paralelo-datepicker__toolbar select {
	flex: 1 1 auto;
	min-width: 0;
	padding: 6px 8px;
	border-radius: 6px;
	border: 1px solid var(--paralelo-border);
	background: var(--paralelo-bg);
	color: var(--paralelo-text);
	font-family: inherit;
	font-size: var(--paralelo-text-xs);
}

.paralelo-datepicker__toolbar .paralelo-datepicker__year {
	flex: 0 0 90px;
}

.paralelo-datepicker__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.paralelo-datepicker__weekday {
	text-align: center;
	font-size: var(--paralelo-text-xs);
	opacity: 0.6;
	padding: 4px 0;
}

.paralelo-datepicker__day {
	background: none;
	border: none;
	border-radius: 6px;
	color: var(--paralelo-text);
	cursor: pointer;
	font-size: var(--paralelo-text-sm);
	padding: 7px 0;
	text-align: center;
}

.paralelo-datepicker__day--blank {
	cursor: default;
}

.paralelo-datepicker__day:not(.paralelo-datepicker__day--blank):hover {
	background: var(--paralelo-primary);
	color: #fff;
}

.paralelo-datepicker__day.is-today {
	font-weight: 700;
	text-decoration: underline;
}

.paralelo-datepicker__day.is-selected {
	background: var(--paralelo-primary);
	color: #fff;
}

.paralelo-combobox__empty {
	padding: 14px 12px;
	font-size: var(--paralelo-text-sm);
	opacity: 0.6;
	text-align: center;
}

/* ---------- Tabela ---------- */

/* AJUSTADO (pedido "Tabelas Globais, Resumo da Unidade Sanitária e
   Remoção do Código Aleatório" — Parte A): scrollbar horizontal fina e
   discreta (mesmo padrão já usado em `.paralelo-sidebar`,
   `frontend.css:665-684`, adaptado de vertical para horizontal) —
   aparece só quando a tabela ultrapassa mesmo a largura disponível
   (`overflow-x:auto`, já existente), nunca esconde informação, nunca
   reduz a tabela artificialmente. */
.paralelo-data-table-wrap {
	background: var(--paralelo-surface);
	border: 1px solid var(--paralelo-border);
	border-radius: 12px;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--paralelo-border) transparent;
}

.paralelo-data-table-wrap::-webkit-scrollbar {
	height: 6px;
}

.paralelo-data-table-wrap::-webkit-scrollbar-track {
	background: transparent;
}

.paralelo-data-table-wrap::-webkit-scrollbar-thumb {
	background-color: var(--paralelo-border);
	border-radius: 3px;
}

.paralelo-data-table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
}

.paralelo-data-table th,
.paralelo-data-table td {
	/* NOVO (Parte B — resize de colunas): `border-box` — a largura que
	   `table-resize.js` calcula/grava é sempre medida via
	   `getBoundingClientRect()` (border-box, o que se vê no ecrã); sem
	   isto, `content-box` (o padrão do CSS) somaria o padding por cima
	   do `width` pedido, e a coluna renderizava sempre maior do que o
	   utilizador arrastou. */
	box-sizing: border-box;
	text-align: left;
	padding: 12px 16px;
	border-bottom: 1px solid var(--paralelo-border);
	font-size: var(--paralelo-text-sm);
	vertical-align: middle;
	/* NOVO (Parte A, secção 1.1 do pedido — "cabeçalhos... NÃO utilizar
	   wrap text... NÃO pode haver wrap text"): aplicado a `td` também,
	   nunca só ao cabeçalho — mantém as linhas da tabela alinhadas com o
	   cabeçalho de largura fixa; colunas genuinamente longas (nomes,
	   moradas) continuam legíveis através do scroll horizontal do
	   wrapper, nunca cortadas silenciosamente (`text-overflow` não é
	   usado aqui de propósito — cortar texto seria esconder informação,
	   secção 1.2 do pedido proíbe isso). */
	white-space: nowrap;
}

.paralelo-data-table th {
	font-weight: 600;
	font-size: var(--paralelo-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.6;
}

.paralelo-data-table tbody tr:last-child td {
	border-bottom: none;
}

.paralelo-data-table tbody tr:hover {
	background: var(--paralelo-bg);
}

/* NOVO (Parte A, secção 1.3 do pedido — "as ações devem permanecer
   sempre visíveis... a coluna de ações não deve desaparecer"): a
   última coluna (`renderTable()` gera sempre um `<th></th>`/`<td>` em
   branco por linha, exclusivamente para os botões Ver/Editar/Eliminar)
   fica fixa à direita. `background` explícito (nunca transparente) +
   `z-index` + a mesma técnica já comprovada em
   `.paralelo-data-matrix__var-label` (matriz da RDQA, já sticky à
   esquerda) — aqui à direita, para nunca deixar o texto de outra
   coluna aparecer por cima ao fazer scroll. Sombra suave em vez de
   borda sólida, para sinalizar a sobreposição sem depender de uma cor
   fixa (funciona em claro/escuro). */
.paralelo-data-table th:last-child,
.paralelo-data-table td:last-child {
	position: sticky;
	right: 0;
	z-index: 2;
	background: var(--paralelo-surface);
	box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);
	white-space: nowrap;
}

.paralelo-data-table tbody tr:hover td:last-child {
	background: var(--paralelo-bg);
}

/* NOVO (pedido "Serviços Aplicáveis por Unidade Sanitária" — secção 4):
   colunas fixas à ESQUERDA (ex.: "Unidade Sanitária"+"Variável" na
   tabela "Resumo da Unidade Sanitária") — `left` é sempre definido
   inline por `table-resize.js::applyStickyLeft()` (soma das larguras
   REAIS das colunas sticky anteriores, nunca hardcoded aqui); esta
   classe só trata do aspecto visual (fundo sólido para o resto da
   tabela nunca aparecer por baixo ao fazer scroll, sombra a indicar a
   sobreposição, `z-index` acima do conteúdo normal — mais alto no
   cabeçalho para nunca ficar por baixo de uma célula do corpo). Só
   aplicada às tabelas que passam `stickyLeftCount` a `enhance()` —
   nunca afecta as restantes. */
.paralelo-data-table__sticky-left {
	position: sticky;
	z-index: 2;
	background: var(--paralelo-surface);
	box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);
	white-space: nowrap;
}

thead .paralelo-data-table__sticky-left {
	z-index: 3;
}

.paralelo-data-table tbody tr:hover td.paralelo-data-table__sticky-left {
	background: var(--paralelo-bg);
}

/* NOVO (pedido "Tabelas Globais, Resumo da Unidade Sanitária e Remoção
   do Código Aleatório" — Parte B): divisor de redimensionamento,
   inserido por `table-resize.js` na extremidade direita de cada `<th
   data-key>` (excepto a coluna Ações, nunca redimensionável). Cursor
   `col-resize` sinaliza que o limite pode ser arrastado (secção 1.4 do
   pedido). Faixa fina; o fundo (largura total do "alvo" de arrasto,
   8px) só aparece a `:hover`/durante o arrasto, mas o próprio divisor
   (`::after`, abaixo) fica sempre visível — sinal PERMANENTE de que a
   coluna é redimensionável, nunca só descoberto por acaso ao passar o
   rato perto da margem (pedido "deixe um sinal nas colunas que mostre
   que a coluna pode ser redimensionada"). */
.paralelo-col-resize-handle {
	position: absolute;
	top: 0;
	right: -4px;
	width: 8px;
	height: 100%;
	cursor: col-resize;
	z-index: 3;
	background: transparent;
}

.paralelo-col-resize-handle::after {
	content: '';
	position: absolute;
	top: 22%;
	bottom: 22%;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: var(--paralelo-border);
	border-radius: 1px;
	opacity: 0.9;
}

.paralelo-col-resize-handle:hover,
.paralelo-col-resize-handle:active {
	background: var(--paralelo-primary);
	opacity: 0.4;
}

.paralelo-col-resize-handle:hover::after,
.paralelo-col-resize-handle:active::after {
	background: var(--paralelo-primary);
	opacity: 1;
}

/* Aplicado ao `<body>` enquanto um arrasto está em curso (secção 1.4 —
   "não provocar deslocamento incorreto"): impede que o cursor mude
   sozinho ao passar por cima de texto/botões a meio do arrasto, e
   impede a selecção acidental de texto da página. */
body.paralelo-col-resizing {
	cursor: col-resize !important;
	user-select: none;
}

/* NOVO (pedido "Refinamento de UX..." — Parte 2/3, Requisitos 10-17):
   densidade das tabelas, controlada por UMA preferência global
   (`data-paralelo-table-density`, no próprio `.paralelo-app-shell` — ver
   `Components::app_shell_open()`), nunca um padding específico por
   página/entidade. "Normal" (sem atributo correspondente aqui) é
   deliberadamente igual à regra base de `.paralelo-data-table th/td`
   acima — o "padrão actual equilibrado" (Requisito 15) nunca muda. */
[data-paralelo-table-density="compact"] .paralelo-data-table th,
[data-paralelo-table-density="compact"] .paralelo-data-table td {
	padding: 7px 12px;
	font-size: calc(var(--paralelo-text-sm) - 1px);
}

[data-paralelo-table-density="comfortable"] .paralelo-data-table th,
[data-paralelo-table-density="comfortable"] .paralelo-data-table td {
	padding: 18px 20px;
}

.paralelo-data-row-actions {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
}

.paralelo-data-row-actions .paralelo-btn-secondary,
.paralelo-data-row-actions .paralelo-btn-danger {
	padding: 7px 12px;
	font-size: var(--paralelo-text-xs);
}

.paralelo-data-pagination {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	font-size: var(--paralelo-text-xs);
}

.paralelo-data-pagination .paralelo-btn-secondary {
	padding: 8px 14px;
	font-size: var(--paralelo-text-xs);
}

/* ---------- Estados: loading / erro ---------- */

.paralelo-data-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 48px 24px;
	color: var(--paralelo-text);
	opacity: 0.7;
	font-size: var(--paralelo-text-sm);
}

.paralelo-data-spinner {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 3px solid var(--paralelo-border);
	border-top-color: var(--paralelo-primary);
	animation: paralelo-data-spin 0.7s linear infinite;
}

.paralelo-data-spinner--small {
	width: 16px;
	height: 16px;
	border-width: 2px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 6px;
}

@keyframes paralelo-data-spin {
	to {
		transform: rotate(360deg);
	}
}

.paralelo-data-alert {
	padding: 12px 16px;
	border-radius: 8px;
	font-size: var(--paralelo-text-sm);
	margin-bottom: 16px;
}

.paralelo-data-alert--error {
	background: rgba(220, 38, 38, 0.12);
	color: #dc2626;
	border: 1px solid rgba(220, 38, 38, 0.3);
}

/* NOVO (atribuição de Supervisores): aviso informativo — nem erro nem
   sucesso (ex.: "ainda não existe nenhum utilizador com permissão para
   aprovar"), que explica o que fazer a seguir em vez de mostrar uma
   lista vazia sem explicação. */
.paralelo-data-alert--warning {
	background: rgba(217, 119, 6, 0.12);
	color: #b45309;
	border: 1px solid rgba(217, 119, 6, 0.3);
}

.paralelo-data-alert--warning a {
	color: inherit;
	font-weight: 600;
}

/* ---------- Campo de formulário (estados) ---------- */

.paralelo-data-field {
	display: block;
	margin-bottom: 20px;
}

.paralelo-data-field label {
	display: block;
	font-size: var(--paralelo-text-xs);
	font-weight: 500;
	margin-bottom: 8px;
}

.paralelo-data-field input,
.paralelo-data-field select {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid var(--paralelo-border);
	background: var(--paralelo-bg);
	color: var(--paralelo-text);
	font-size: var(--paralelo-text-sm);
	font-family: inherit;
}

.paralelo-data-field input:focus,
.paralelo-data-field select:focus {
	outline: 2px solid var(--paralelo-primary);
	outline-offset: 1px;
}

.paralelo-data-field__message {
	display: block;
	margin-top: 6px;
	font-size: var(--paralelo-text-xs);
}

.paralelo-data-field[data-state="error"] input,
.paralelo-data-field[data-state="error"] select {
	border-color: #dc2626;
}

.paralelo-data-field[data-state="error"] .paralelo-data-field__message {
	color: #dc2626;
}

/* NOVO (módulo "Plano de Actividades"): tipo `textarea` — `.paralelo-data-field
   input, .paralelo-data-field select` acima não cobre `<textarea>`, precisa
   da sua própria regra com o mesmo visual. */
.paralelo-data-field textarea {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid var(--paralelo-border);
	background: var(--paralelo-bg);
	color: var(--paralelo-text);
	font-size: var(--paralelo-text-sm);
	font-family: inherit;
	resize: vertical;
}

.paralelo-data-field textarea:focus {
	outline: 2px solid var(--paralelo-primary);
	outline-offset: 1px;
}

/* NOVO (módulo "Plano de Actividades"): tipo `richtext` — editor
   `contenteditable` nativo, mesmo visual/variáveis de tema do resto dos
   campos do formulário. */
.paralelo-richtext-toolbar {
	display: flex;
	gap: 4px;
	margin-bottom: 6px;
}

.paralelo-richtext-toolbar__btn {
	border: 1px solid var(--paralelo-border);
	background: var(--paralelo-bg);
	color: var(--paralelo-text);
	border-radius: 6px;
	padding: 4px 10px;
	cursor: pointer;
	font-weight: 600;
	font-size: var(--paralelo-text-sm);
}

.paralelo-richtext-toolbar__btn:hover {
	background: var(--paralelo-border);
}

.paralelo-richtext-editor {
	min-height: 120px;
	border: 1px solid var(--paralelo-border);
	border-radius: 8px;
	padding: 12px 14px;
	background: var(--paralelo-bg);
	color: var(--paralelo-text);
	font-size: var(--paralelo-text-sm);
}

.paralelo-richtext-editor:focus {
	outline: 2px solid var(--paralelo-primary);
	outline-offset: 1px;
}

/* NOVO (Facilitadores — Sexo/Estado como radio buttons, Motivo de saída
   como grupo de checkboxes): `.paralelo-data-field input` acima aplica
   `display:block; width:100%` a QUALQUER `<input>` descendente, incluindo
   estes — sem esta redefinição, cada opção ficava esticada à largura
   total, uma por linha, com o padding de um campo de texto normal. */
.paralelo-data-radio-group,
.paralelo-data-checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.paralelo-data-radio-option,
.paralelo-data-checkbox-option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--paralelo-text-sm);
	color: var(--paralelo-text);
	cursor: pointer;
}

.paralelo-data-field--radio input,
.paralelo-data-field--checkbox-group input {
	display: inline-block;
	width: auto;
	padding: 0;
	margin: 0;
}

.paralelo-data-field--radio[hidden],
.paralelo-data-field--checkbox-group[hidden] {
	display: none;
}

/* NOVO (pedido "Serviços Aplicáveis por Unidade Sanitária" — "Utilizar
   um switch ON/OFF, e não um simples checkbox visual"): visual de
   switch por cima do MESMO `<input type="checkbox">` de
   `.paralelo-data-checkbox-option` (reutiliza toda a marcação/lógica
   de `checkbox-group` já existente — nunca um 2º tipo de campo) —
   activado só quando `field.switchStyle` estiver definido
   (`checkboxGroupFieldMarkup()` em `data-app.js`), nunca afecta outros
   campos `checkbox-group` já existentes (ex.: "Motivo de saída"). */
.paralelo-data-checkbox-group--switches {
	gap: 12px 24px;
}

.paralelo-data-checkbox-option--switch input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	width: 38px;
	height: 21px;
	border-radius: 11px;
	background: var(--paralelo-border);
	border: none;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s ease;
}

.paralelo-data-checkbox-option--switch input[type="checkbox"]::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--paralelo-surface);
	transition: transform 0.15s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.paralelo-data-checkbox-option--switch input[type="checkbox"]:checked {
	background: var(--paralelo-primary);
}

.paralelo-data-checkbox-option--switch input[type="checkbox"]:checked::before {
	transform: translateX(17px);
}

.paralelo-data-checkbox-option--switch input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--paralelo-primary);
	outline-offset: 2px;
}

.paralelo-data-field[data-state="success"] input,
.paralelo-data-field[data-state="success"] select {
	border-color: #16a34a;
}

.paralelo-data-field[data-state="success"] .paralelo-data-field__message {
	color: #16a34a;
}

/* Estilo genérico para qualquer `<input>` `disabled` dentro de um campo
   de formulário (ex.: campos só-de-leitura) e o rótulo "(opcional)" dos
   campos GPS. */
.paralelo-data-field input:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	background: var(--paralelo-border);
}

.paralelo-data-field__optional {
	font-weight: 400;
	opacity: 0.6;
	text-transform: none;
	letter-spacing: normal;
}

/* RENOMEADO (pedido "Ajustes de Sidebars, Padding e Scrollbar dos
   Formulários" — "reutilizar os componentes e tokens de design
   existentes"): era `.paralelo-data-gps-precision`, com um nome
   específico demais para um padrão puramente visual (input + sufixo de
   unidade) — reutilizado agora também pelo campo "Padding dos itens de
   menu" em Preferências (`PreferencesPage::number_field()`), nunca uma
   segunda cópia destas 3 regras. */
.paralelo-input-with-suffix {
	display: flex;
	align-items: center;
	gap: 8px;
}

.paralelo-input-with-suffix input {
	flex: 1;
}

.paralelo-input-with-suffix span {
	font-size: var(--paralelo-text-sm);
	opacity: 0.7;
	white-space: nowrap;
}

/* Seletor hierárquico em cascata (Requisito 13), dentro do drawer de
   criação/edição — Distritos, Postos Administrativos, Localidades,
   Povoados, Unidades Sanitárias e Escolas (Requisito 6/Fase F).
   AJUSTADO (ajustes de UI — "cada campo um abaixo do outro, nunca lado
   a lado por defeito"): era uma grelha `auto-fit` (vários níveis lado a
   lado em ecrãs largos) — passa a uma coluna só, mesmo padrão do resto
   do formulário. */
.paralelo-data-location-picker {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px 16px;
}

/* Quando este seletor é usado como filtro da listagem (não dentro do
   formulário), fica entre a barra de pesquisa e a tabela — precisa da
   sua própria separação vertical (Requisito 16/17: "área de filtros"
   claramente distinta da "área de conteúdo/tabela"). */
[data-paralelo-data-filters] {
	margin-bottom: var(--paralelo-content-gap);
}

.paralelo-data-location-level label {
	display: block;
	font-size: var(--paralelo-text-xs);
	font-weight: 500;
	margin-bottom: 6px;
}

.paralelo-data-location-level select {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--paralelo-border);
	background: var(--paralelo-bg);
	color: var(--paralelo-text);
	font-size: var(--paralelo-text-sm);
	font-family: inherit;
}

.paralelo-data-location-level select:focus {
	outline: 2px solid var(--paralelo-primary);
	outline-offset: 1px;
}

.paralelo-data-location-level select:disabled {
	opacity: 0.5;
}

/* ---------- Drawer (painel lateral — Requisito 6) ---------- */

.paralelo-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10000;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.paralelo-drawer-backdrop.is-open {
	opacity: 1;
}

.paralelo-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 440px;
	background: var(--paralelo-surface);
	box-shadow: -20px 0 60px rgba(0, 0, 0, 0.35);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.25s ease;
	z-index: 10001;
}

.paralelo-drawer-backdrop.is-open .paralelo-drawer {
	transform: translateX(0);
}

.paralelo-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 24px;
	border-bottom: 1px solid var(--paralelo-border);
}

.paralelo-drawer__header h2 {
	margin: 0;
	font-size: var(--paralelo-text-md);
}

.paralelo-drawer__close {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--paralelo-text);
	opacity: 0.6;
	padding: 6px;
	display: inline-flex;
}

.paralelo-drawer__close:hover {
	opacity: 1;
}

/* CORRIGIDO (pedido "Ajustes de Sidebars, Padding e Scrollbar dos
   Formulários" — Parte 3, Requisitos 18-24): scrollbar mais fina, exactamente
   os mesmos valores (6px, `var(--paralelo-border)`) já usados no conteúdo
   central (`.paralelo-app-main`, `frontend.css`) — antes usava a
   scrollbar larga por omissão do browser. Só a aparência da scrollbar
   muda; `overflow-y:auto`/`flex:1` (área/capacidade de scroll) ficam
   exactamente como estavam (Requisito 22). */
.paralelo-drawer__body {
	padding: 24px;
	overflow-y: auto;
	flex: 1;
	scrollbar-width: thin;
	scrollbar-color: var(--paralelo-border) transparent;
}

.paralelo-drawer__body::-webkit-scrollbar {
	width: 6px;
}

.paralelo-drawer__body::-webkit-scrollbar-track {
	background: transparent;
}

.paralelo-drawer__body::-webkit-scrollbar-thumb {
	background-color: var(--paralelo-border);
	border-radius: 3px;
}

.paralelo-drawer__footer {
	padding: 16px 24px;
	border-top: 1px solid var(--paralelo-border);
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

@media (max-width: 480px) {
	.paralelo-drawer {
		max-width: 100%;
	}
}

/* NOVO (pedido "Novo Módulo Dados e Ficha RDQA" — Etapa 6: "o
   formulário deve possuir uma largura maior que os formulários
   normais"): modificador aditivo — o `.paralelo-drawer` normal
   (440px) fica inalterado para todos os formulários que não pedirem
   isto explicitamente (`pageConfig.wideForm`). */
.paralelo-drawer--wide {
	max-width: 900px;
}

@media (max-width: 960px) {
	.paralelo-drawer--wide {
		max-width: 100%;
	}
}

/* NOVO (pedido "Novo Módulo Dados e Ficha RDQA" — Etapa 8/9: matriz
   Livro/Resumo/SIS-MA × Mês1/Mês2 × variável): mesmo padrão de
   `.paralelo-data-table-wrap` (`overflow-x:auto`) — scroll horizontal
   só na área da matriz, nunca em toda a página (Etapa 9.1). Cabeçalho
   fixo (Etapa 9.2) via `position: sticky`. */
.paralelo-data-matrix-wrap {
	overflow-x: auto;
	overflow-y: auto;
	max-height: 480px;
	border: 1px solid var(--paralelo-border);
	border-radius: 10px;
	margin-top: 6px;
}

.paralelo-data-matrix {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-size: var(--paralelo-text-xs);
}

.paralelo-data-matrix thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--paralelo-surface);
	border-bottom: 1px solid var(--paralelo-border);
	padding: 6px 8px;
	text-align: center;
	white-space: nowrap;
}

.paralelo-data-matrix__var-header {
	position: sticky;
	left: 0;
	z-index: 3;
	text-align: left !important;
}

.paralelo-data-matrix__mes-header {
	background: var(--paralelo-primary);
	color: #fff;
}

.paralelo-data-matrix__group-row th {
	background: var(--paralelo-bg);
	text-align: left;
	padding: 6px 8px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: var(--paralelo-text-xs);
}

.paralelo-data-matrix__var-label {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--paralelo-surface);
	text-align: left;
	padding: 6px 8px;
	white-space: nowrap;
	border-right: 1px solid var(--paralelo-border);
	font-weight: 400;
}

.paralelo-data-matrix td {
	padding: 3px;
	border-bottom: 1px solid var(--paralelo-border);
	text-align: center;
}

.paralelo-data-matrix td input[type="number"] {
	width: 64px;
	padding: 5px 4px;
	text-align: center;
	border-radius: 5px;
	border: 1px solid var(--paralelo-border);
	background: var(--paralelo-bg);
	color: var(--paralelo-text);
	font-family: inherit;
	font-size: inherit;
}

.paralelo-data-matrix td input[type="number"]:focus {
	outline: 2px solid var(--paralelo-primary);
	outline-offset: 1px;
}

/* NOVO (Etapa 11 — "Plano" repetível): Constatação/Recomendação/
   Responsável/Prazo, N linhas + "Adicionar linha"/remover por linha. */
.paralelo-data-repeat-rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 6px;
}

.paralelo-data-repeat-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--paralelo-border);
	border-radius: 10px;
	background: var(--paralelo-surface);
	position: relative;
}

.paralelo-data-repeat-row__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.paralelo-data-repeat-row__field label {
	font-size: var(--paralelo-text-xs);
	opacity: 0.75;
}

.paralelo-data-repeat-row__field input[type="text"] {
	padding: 8px 10px;
	border-radius: 6px;
	border: 1px solid var(--paralelo-border);
	background: var(--paralelo-bg);
	color: var(--paralelo-text);
	font-family: inherit;
	font-size: var(--paralelo-text-sm);
}

.paralelo-data-repeat-remove {
	grid-column: 1 / -1;
	justify-self: end;
}

.paralelo-data-repeat-add {
	margin-top: 10px;
}

@media (max-width: 640px) {
	.paralelo-data-repeat-row {
		grid-template-columns: 1fr;
	}
}

/* ---------- Ficha de detalhes (dentro do drawer de visualização) ---------- */

.paralelo-data-detail dl {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}

.paralelo-data-detail dt {
	font-size: var(--paralelo-text-xs);
	opacity: 0.6;
	margin: 0 0 4px;
}

.paralelo-data-detail dd {
	margin: 0;
	font-size: var(--paralelo-text-sm);
}

.paralelo-data-detail dd a {
	color: var(--paralelo-primary);
	font-weight: 600;
	text-decoration: none;
}

.paralelo-data-detail dd a:hover {
	text-decoration: underline;
}

/* CORRIGIDO (pedido "a parte de comentário não tem bom contraste...
   melhore o design"): `.paralelo-card` era uma classe FANTASMA — usada
   em 4 sítios reais (`Components::render_forbidden_page()`,
   `Router.php`, `import-app.js`, `plano-app.js`) mas NUNCA definida em
   folha de estilos nenhuma. Todos esses blocos apareciam como `<div>`
   sem fundo, sem espaçamento e sem separação — era essa a maior parte
   do "sem contraste" no drawer de aprovação do Plano (Decisão,
   Avaliar, Comentários, Histórico eram só texto solto).

   Definida aqui, na folha partilhada, porque os consumidores são de
   módulos diferentes — nunca uma cópia por módulo. Fundo e texto vêm
   sempre os dois dos tokens do tema, para funcionar em claro e escuro
   (foi precisamente a mistura "fundo fixo + texto herdado" que criou o
   branco-sobre-branco corrigido em `plano-app.css`). */
.paralelo-card {
	background: var(--paralelo-surface);
	color: var(--paralelo-text);
	border: 1px solid var(--paralelo-border);
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 16px;
}

.paralelo-card > h2 {
	margin: 0 0 14px;
	font-size: var(--paralelo-text-md);
}

.paralelo-card > h2:first-child {
	margin-top: 0;
}

.paralelo-card > p:last-child,
.paralelo-card > ul:last-child {
	margin-bottom: 0;
}

/* Dentro de um drawer, o fundo do painel JÁ é `--paralelo-surface` — um
   cartão da mesma cor desapareceria. Aí usa-se o fundo de página para o
   cartão se destacar do painel, mantendo o texto do tema. */
.paralelo-drawer__body .paralelo-card {
	background: var(--paralelo-bg);
}

/* ---------- Comparação de duplicados (Requisito 13) ---------- */

.paralelo-data-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 16px 0;
}

.paralelo-data-compare__card {
	border: 1px solid var(--paralelo-border);
	border-radius: 10px;
	padding: 14px 16px;
}

.paralelo-data-compare__card--existing {
	border-color: #d97706;
	background: rgba(217, 119, 6, 0.08);
}

.paralelo-data-compare__card h4 {
	margin: 0 0 8px;
	font-size: var(--paralelo-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
}

.paralelo-data-compare__card strong {
	display: block;
	font-size: var(--paralelo-text-sm);
	margin-bottom: 6px;
}

.paralelo-data-compare__card small {
	display: block;
	font-size: var(--paralelo-text-xs);
	opacity: 0.7;
	margin-top: 2px;
}

@media (max-width: 480px) {
	.paralelo-data-compare {
		grid-template-columns: 1fr;
	}
}

/* ---------- Toasts ---------- */

.paralelo-data-toast-container {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 10002;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.paralelo-data-toast {
	min-width: 240px;
	max-width: 360px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: var(--paralelo-text-sm);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	color: #fff;
	animation: paralelo-data-toast-in 0.2s ease;
}

.paralelo-data-toast--success {
	background: #16a34a;
}

.paralelo-data-toast--error {
	background: #dc2626;
}

@keyframes paralelo-data-toast-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}