/*
 * Atalaia :: Avaliação de Exposição Externa
 * Propriedade de Netseg.ai Ibérica
 * Elaborado por Fernando Condeço · Netseg.ai Ibérica
 * NAFS Ibérica · NIF ESY8741922G · Huelva, Espanha · https://netseg.ai
 * Ficheiro: app/web/static/estilo.css · versão 0.47.0
 * :: fim do cabeçalho
 */
/* Cores da marca vêm de /marca.css (editáveis na administração). */
:root {
  --largura: 1280px;
  --marca: #1F3A5F; --destaque: #E8792B;
  --fundo: #f4f6f9; --superficie: #ffffff; --linha: #dde3ea; --texto: #16202c; --suave: #5b6878;
  --critico: #b42318; --alto: #d9480f; --medio: #b7791f; --baixo: #4a6fa5; --ok: #1f7a4d;
  --raio: 6px;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--texto); background: var(--fundo); font-size: 15px; line-height: 1.5;
}
* { box-sizing: border-box; }
/* Reserva sempre a barra de scroll vertical → todas as páginas têm a MESMA largura útil,
   tenham ou não conteúdo que role (evita o salto horizontal entre páginas curtas e longas). */
html { overflow-y: scroll; scrollbar-gutter: stable; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--fundo); }
a { color: var(--marca); }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 1.75rem 0 .75rem; font-weight: 600; }
p.sub { color: var(--suave); margin: 0 0 1.5rem; }

/* Barra de topo */
.topo { background: var(--marca); color: #fff; }
.topo-interno { display: flex; align-items: center; gap: 1.5rem; height: 56px;
                max-width: var(--largura); margin: 0 auto; padding: 0 2.25rem; }
.topo .nome { font-weight: 700; letter-spacing: .02em; display: flex; align-items: center; gap: .6rem;
  color: #fff; text-decoration: none; }
.topo a.nome:hover { opacity: .9; }
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.topo .trocar { color: #fff; text-decoration: none; font-size: .85rem; opacity: .8; padding: .35rem .7rem;
                border: 1px solid rgba(255,255,255,.3); border-radius: var(--raio); white-space: nowrap; }
.topo .trocar:hover { opacity: 1; background: rgba(255,255,255,.1); }
.topo .nome small { font-weight: 400; opacity: .75; margin-left: .5rem; }
.marca-ic { height: 30px; width: 30px; flex: 0 0 auto; border-radius: 7px; }
.marca-login { height: 56px; width: 56px; display: block; margin: 0 0 .7rem; }
/* --- Menu em hambúrguer no topo (só em mobile; no desktop a navegação é a barra lateral) --- */
.topo-interno { position: relative; }
.menu-toggle { display: none; align-items: center; gap: .5rem; background: rgba(255,255,255,.1);
  color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: var(--raio);
  padding: .4rem .7rem; cursor: pointer; font: inherit; font-size: .9rem; line-height: 1; }
.menu-toggle:hover { background: rgba(255,255,255,.18); }
.menu-toggle .menu-ic { position: relative; width: 18px; height: 2px; background: #fff; border-radius: 2px;
  transition: background .15s; }
.menu-toggle .menu-ic::before, .menu-toggle .menu-ic::after { content: ""; position: absolute; left: 0;
  width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform .15s; }
.menu-toggle .menu-ic::before { top: -6px; }
.menu-toggle .menu-ic::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-ic { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-ic::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-ic::after { transform: translateY(-6px) rotate(-45deg); }
.menu-toggle .menu-rot { font-weight: 600; letter-spacing: .01em; }
/* Painel: escondido por omissão, abre por baixo do topo (JS alterna .aberto + aria-expanded) */
.topo-menu { position: absolute; top: calc(100% + 3px); left: 2.25rem; z-index: 60;
  display: none; flex-direction: column; min-width: 250px; max-width: calc(100vw - 2rem);
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(16,32,44,.18); padding: .5rem; overflow: hidden; }
.topo-menu.aberto { display: flex; }
.topo-menu::after { content: ""; position: absolute; right: -28px; bottom: -34px; width: 150px; height: 150px;
  opacity: .05; pointer-events: none; background: center/contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%231F3A5F' stroke-width='3'%3E%3Ccircle cx='45' cy='55' r='11'/%3E%3Ccircle cx='45' cy='55' r='23'/%3E%3Ccircle cx='45' cy='55' r='35'/%3E%3C/g%3E%3Ccircle cx='71' cy='29' r='8' fill='%23E8792B'/%3E%3C/svg%3E"); }
.topo-menu a { position: relative; display: block; color: var(--texto); text-decoration: none;
  padding: .55rem .8rem; border-radius: var(--raio-ctrl); font-size: .92rem; opacity: 1; }
.topo-menu a:hover { background: var(--superficie-2); }
.topo-menu a.activo { background: color-mix(in srgb, var(--marca) 9%, var(--superficie));
  color: var(--marca); font-weight: 700; }
.topo-menu a.activo::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 3px; background: var(--destaque); }
.topo-menu .lateral-rot { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--suave-2); padding: .3rem .8rem .5rem; }
/* --- Barra lateral de marca (desktop) --- */
.corpo > .lateral { align-self: flex-start; position: sticky; top: 1.25rem; flex: 0 0 auto;
  width: 226px; margin: 1.75rem 0 1.5rem 1.5rem; padding: .55rem .6rem 3.2rem;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 12px; box-shadow: var(--sombra); overflow: hidden; }
.corpo > .lateral .lateral-rot { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--suave-2); padding: .45rem .8rem .55rem; }
.corpo > .lateral a { display: block; border-radius: var(--raio-ctrl); padding: .5rem .8rem; margin-bottom: .05rem;
  color: var(--texto); text-decoration: none; font-size: .9rem; position: relative; }
.corpo > .lateral a:hover { background: var(--superficie-2); }
.corpo > .lateral a.activo { background: color-mix(in srgb, var(--marca) 9%, var(--superficie));
  color: var(--marca); font-weight: 700; }
.corpo > .lateral a.activo::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 3px; background: var(--destaque); }
.corpo > .lateral::after { content: ""; position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
  width: 168px; height: 168px; opacity: .055; pointer-events: none; background: center/contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%231F3A5F' stroke-width='3'%3E%3Ccircle cx='45' cy='55' r='11'/%3E%3Ccircle cx='45' cy='55' r='23'/%3E%3Ccircle cx='45' cy='55' r='35'/%3E%3C/g%3E%3Ccircle cx='71' cy='29' r='8' fill='%23E8792B'/%3E%3C/svg%3E"); }
.topo .quem { display: flex; align-items: center; gap: .75rem; font-size: .9rem; }
.topo .quem form { margin: 0; }
.topo .quem button { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.faixa { height: 3px; background: var(--destaque); }

/* Corpo: conteúdo centrado a toda a largura (navegação é o menu de topo) */
.corpo { display: flex; flex: 1; width: 100%; max-width: var(--largura); margin: 0 auto; }
main { flex: 1; padding: 1.5rem; min-width: 0; }

/* Superfícies */
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.25rem; margin-bottom: 1rem; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.numero { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem 1.25rem; }
.numero b { display: block; font-size: 1.75rem; font-weight: 600; color: var(--marca); }
.numero span { color: var(--suave); font-size: .85rem; }

table { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--linha); vertical-align: top; font-size: .92rem; }
th { background: #f8fafc; font-weight: 600; color: var(--suave); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
tr:last-child td { border-bottom: 0; }
td.accoes { white-space: nowrap; }
td.accoes form { display: inline; }

/* Formulários */
label { display: block; font-weight: 600; font-size: .85rem; margin: .9rem 0 .3rem; }
label small { font-weight: 400; color: var(--suave); }
input[type=text], input[type=email], input[type=password], input[type=search], select, textarea {
  width: 100%; padding: .55rem .7rem; border: 1px solid #c7d0db; border-radius: var(--raio);
  font: inherit; background: #fff; color: var(--texto); }
input[type=color] { width: 4rem; height: 2.4rem; border: 1px solid #c7d0db; border-radius: var(--raio); padding: 2px; }
textarea { min-height: 5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marca); outline-offset: 1px; border-color: var(--marca); }
.grelha { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1rem; }
form .grelha { row-gap: .6rem; margin-bottom: .6rem; align-items: start; }
button, .botao { display: inline-block; font: inherit; font-weight: 600; padding: .5rem 1rem; border-radius: var(--raio);
  border: 1px solid var(--marca); background: var(--marca); color: #fff; cursor: pointer; text-decoration: none; }
button.secundario, .botao.secundario { background: #fff; color: var(--marca); }
button.pequeno { padding: .25rem .6rem; font-size: .82rem; }
button.perigo { background: #fff; color: var(--critico); border-color: var(--critico); }
.linha-botoes { display: flex; gap: .5rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }

/* Mensagens */
.aviso { padding: .7rem 1rem; border-radius: var(--raio); margin-bottom: 1rem; border: 1px solid; }
.aviso.ok { background: #eef8f2; border-color: #b5dfc6; color: var(--ok); }
.aviso.erro { background: #fdf0ef; border-color: #f2c3be; color: var(--critico); }
.aviso.info { background: #eef3fa; border-color: #c6d6ec; color: var(--marca); }
.temporaria { font-family: ui-monospace, Consolas, monospace; font-size: 1.1rem; background: #fff; padding: .2rem .5rem; border-radius: 4px; border: 1px dashed var(--marca); }

/* Etiquetas */
.etiqueta { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #eef1f5; color: var(--suave); }
.etiqueta.critico { background: #fdecea; color: var(--critico); }
.etiqueta.alto { background: #fff0e6; color: var(--alto); }
.etiqueta.medio { background: #fff7e0; color: var(--medio); }
.etiqueta.baixo { background: #eaf1fb; color: var(--baixo); }
.etiqueta.ok, .etiqueta.concluida, .etiqueta.concluido, .etiqueta.validado { background: #e8f5ee; color: var(--ok); }
.etiqueta.falhou, .etiqueta.rejeitado { background: #fdecea; color: var(--critico); }
.etiqueta.alterado { background: #fff4e5; color: var(--alto); }
.faixa-score { font-weight: 700; color: var(--marca); }

/* Textos editáveis */
details.texto { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: .5rem; }
details.texto summary { padding: .7rem 1rem; cursor: pointer; display: flex; gap: .75rem; align-items: baseline; }
details.texto summary .chave { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; color: var(--suave); margin-left: auto; }
details.texto form { padding: 0 1rem 1rem; }
.marcadores { font-size: .8rem; color: var(--suave); margin-top: .35rem; }
.marcadores code { background: #eef1f5; padding: 0 .3rem; border-radius: 3px; }

/* Páginas de entrada */
.entrada { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.entrada .cartao { width: 100%; max-width: 420px; padding: 2rem; }
.entrada h1 { margin-bottom: .25rem; }
.qr { display: flex; justify-content: center; margin: 1rem 0; }
.qr svg { width: 200px; height: 200px; }
.segredo { font-family: ui-monospace, Consolas, monospace; word-break: break-all; font-size: .85rem; background: #f4f6f9; padding: .5rem; border-radius: 4px; }
input.codigo { font-size: 1.6rem; letter-spacing: .5em; text-align: center; font-family: ui-monospace, Consolas, monospace;
  width: 14rem; max-width: 100%; display: block; margin: .4rem 0 .2rem; padding: .55rem .5rem .55rem .9rem; }

/* Rodapé com autoria + legal */
footer { color: var(--suave); font-size: .78rem; text-align: center; padding: 1.25rem 1rem; border-top: 1px solid var(--linha); background: var(--superficie); }
footer b { color: var(--texto); font-weight: 600; }
.rodape-legal { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem 1.1rem; margin-bottom: .55rem; }
.rodape-legal a { color: var(--marca); text-decoration: none; font-weight: 600; }
.rodape-legal a:hover { text-decoration: underline; }
.rodape-resp { margin-bottom: .3rem; }
.rodape-marca { opacity: .85; }

/* Botão flutuante: voltar ao topo */
.ir-topo { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 50; width: 2.6rem; height: 2.6rem;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--marca); color: #fff; text-decoration: none; font-size: 1.2rem; line-height: 1;
  box-shadow: 0 2px 8px rgba(16,32,44,.22); border: 0; }
.ir-topo:hover { background: #16304f; }
.ir-topo[hidden] { display: none; }

/* Banner de cookies (apenas essenciais) */
.cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60; max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--linha-forte); border-radius: var(--raio);
  box-shadow: 0 6px 24px rgba(16,32,44,.18); padding: .85rem 1.1rem; }
.cookie-banner[hidden] { display: none; }
.cookie-banner .cookie-txt { flex: 1; min-width: 16rem; font-size: .85rem; color: var(--texto); line-height: 1.5; }
.cookie-banner .cookie-txt a { color: var(--marca); font-weight: 600; }
.cookie-banner button { flex: 0 0 auto; }

/* Páginas legais (RGPD, cookies, termos) */
main.legal { max-width: none; margin: 0; width: 100%; }
main.legal h1 { margin-bottom: .2rem; }
main.legal h2 { font-size: 1.05rem; color: var(--marca); margin: 1.4rem 0 .4rem; }
main.legal p, main.legal li { font-size: .92rem; line-height: 1.6; }
main.legal ul { padding-left: 1.2rem; }
main.legal li { margin: .25rem 0; }
.tab-legal { width: 100%; border-collapse: collapse; margin: .5rem 0; font-size: .88rem; }
.tab-legal th, .tab-legal td { border: 1px solid var(--linha); padding: .45rem .6rem; text-align: left; vertical-align: top; }
.tab-legal th { background: #f6f8fb; }
.legal-nota { margin-top: 1.6rem; padding-top: .8rem; border-top: 1px solid var(--linha); color: var(--suave); font-size: .82rem; }
.legal-voltar { margin-top: .6rem; }
.legal-voltar a { color: var(--marca); font-weight: 600; text-decoration: none; }

.vazio { color: var(--suave); text-align: center; padding: 2rem; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.direita { text-align: right; }

@media (max-width: 760px) {
  .corpo { flex-direction: column; }
  main { padding: 1rem; }
  .topo-interno { padding: .5rem 1rem; gap: .75rem; height: auto; min-height: 56px; flex-wrap: wrap; }
  .topo .nome small { display: none; }
  table { display: block; overflow-x: auto; }
}

/* Validação de achados */
form.rejeitar input[type=text] { width: 9rem; padding: .25rem .5rem; font-size: .82rem; display: inline-block; }
.etiqueta.por_validar, .etiqueta.pendente, .etiqueta.a_correr { background: #eef3fa; color: var(--marca); }
tr:target { outline: 2px solid var(--destaque); outline-offset: -2px; }

/* Fluxo da avaliação */
.fluxo .passo { color: var(--suave); }
.fluxo .passo.actual { color: var(--marca); font-weight: 700; border-bottom: 2px solid var(--destaque); }
.fluxo p { margin: .5rem 0 0; }

/* Autorização de ensaio activo */
.etiqueta.confirmada { background: #e8f5ee; color: var(--ok); }
.etiqueta.recusada, .etiqueta.revogada { background: #fdecea; color: var(--critico); }
.etiqueta.expirada { background: #eef1f5; color: var(--suave); }
.cartao.publico { max-width: 640px; }
.lista-ambito { margin: .5rem 0 1rem; padding-left: 1.1rem; }
.lista-ambito li { margin: .3rem 0; }
.formulario fieldset { border: 1px solid var(--linha); border-radius: var(--raio); padding: .75rem 1rem; margin: 0 0 1rem; }
.formulario legend { font-weight: 600; color: var(--marca); padding: 0 .4rem; }
.escolha { display: block; margin: .35rem 0; font-weight: 500; }
.escolha input { width: auto; margin-right: .4rem; }
form.recusar, form.revogar { display: inline-flex; gap: .4rem; align-items: center; }
form.recusar input[type=text], form.revogar input[type=text] { width: 11rem; padding: .3rem .5rem; font-size: .82rem; }
button.perigo, .botao.perigo { border-color: var(--critico); color: var(--critico); background: #fff; }
button.perigo:hover, .botao.perigo:hover { background: var(--critico); color: #fff; }
.tabela-campos td, .tabela-campos th { vertical-align: middle; }
.tabela-campos .centro { text-align: center; }
.tabela-campos input[type=text] { width: 100%; }
.logo-previa { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .3rem 0 .6rem; }
.logo-amostra { max-height: 56px; max-width: 280px; border: 1px solid var(--linha); border-radius: var(--raio); padding: 6px 10px; background: #fff; }
.zona-perigo { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linha); }
.zona-perigo h2 { color: var(--critico); }
form.acao-linha { display: inline; margin: 0; }
.trilho { list-style: none; margin: .5rem 0 0; padding: 0; }
.trilho li { padding: .2rem 0; border-top: 1px dashed var(--linha); font-size: .84rem; }
tr.trilho-linha td { padding-top: 0; border-top: none; background: #fafbfd; }
details summary { cursor: pointer; }

/* Barra de progresso do varrimento (front office) */
.varrimento { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: .8rem 1rem; margin-bottom: 1rem; }
.v-topo { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; margin-bottom: .45rem; }
.v-num { font-weight: 500; color: var(--suave); font-size: .9rem; }
progress.pb { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border: 1px solid var(--linha); border-radius: 999px; background: #eef1f5; overflow: hidden; }
progress.pb::-webkit-progress-bar { background: #eef1f5; border-radius: 999px; }
progress.pb::-webkit-progress-value { background: var(--marca); border-radius: 999px; transition: width .4s ease; }
progress.pb::-moz-progress-bar { background: var(--marca); border-radius: 999px; }
.varrimento.a-correr progress.pb::-webkit-progress-value { background: linear-gradient(90deg, var(--marca), var(--destaque)); }
.varrimento.a-correr progress.pb::-moz-progress-bar { background: var(--destaque); }
.varrimento.a-correr .v-topo span:first-child::after { content: " ●"; color: var(--destaque); }
.escolha-inline { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; color: var(--suave); margin-left: .5rem; }
.escolha-inline input { width: auto; }

/* Chips (lista de testes de um módulo) e .sub genérico — página Módulos de teste (0.24.0) */
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.chip { display: inline-block; background: #eef1f5; border: 1px solid var(--linha); border-radius: 999px; padding: .1rem .55rem; font-size: .76rem; color: var(--marca); }
span.sub, div.sub { color: var(--suave); font-size: .85rem; }
td.accoes form.enfileira { display: inline; }

/* ===== Polimento do painel + componentes (0.24.0) ===== */
:root { --sombra: 0 1px 2px rgba(16,32,44,.05), 0 1px 3px rgba(16,32,44,.07); }
.cartao, table, .numero { box-shadow: var(--sombra); }
button, .botao { transition: background .12s, border-color .12s, box-shadow .12s; }
button:hover, .botao:hover { box-shadow: var(--sombra); }
tbody tr:hover > td { background: #fafbfd; }
th { background: #f6f8fb; }

/* Interruptor (toggle) — é um <button> dentro de um form: submete sozinho, sem JS. */
.switch { width: 44px; height: 24px; padding: 0; border: 1px solid #c2ccd8; background: #c7d0db;
  border-radius: 999px; position: relative; cursor: pointer; vertical-align: middle; flex: 0 0 auto; }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff;
  border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.28); transition: transform .15s; }
.switch:hover { box-shadow: none; }
.switch.on { background: var(--ok); border-color: var(--ok); }
.switch.on .knob { transform: translateX(20px); }
.switch.laranja.on { background: var(--destaque); border-color: var(--destaque); }
.switch:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
/* ofuscação por achado (front) */
.of-toggle { display: flex; align-items: center; gap: .5rem; margin: 0; }
.of-rot { font-size: .82rem; color: var(--suave); }
.of-cel { min-width: 15rem; }
.of-cel .of-fonte { font-size: .72rem; color: var(--suave-2); margin-top: .45rem; line-height: 1.45;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .4rem; }
.of-herdar { display: inline; margin: 0; }
.of-herdar button { background: none; border: 0; box-shadow: none; padding: 0; font-size: .72rem; color: var(--marca); cursor: pointer; }
.of-herdar button:hover { text-decoration: underline; background: none; box-shadow: none; }
/* Ofuscação imposta pelo admin: interruptor preso em ON, a vermelho, não clicável */
.switch.vermelha.on { background: #d92d20; border-color: #d92d20; }
.switch.preso { cursor: not-allowed; }
.of-rot.vermelho { color: #b42318; font-weight: 600; }
.of-mod { color: var(--marca); font-weight: 600; white-space: normal; }
/* Tabela de achados: linhas com mais ar e TODO o conteúdo centrado na vertical */
.tabela-achados td { padding-top: .95rem; padding-bottom: .95rem; line-height: 1.5; vertical-align: middle; }
.tabela-achados td.of-cel { text-align: left; }
.tabela-achados .of-toggle { margin-bottom: .1rem; }
.of-cel .of-fonte.of-admin { color: #b42318; }
.campo-toggle { display: inline-flex; align-items: center; gap: .5rem; }
.campo-toggle .rot { font-size: .82rem; color: var(--suave); }

/* Arrasto para reordenar (módulos de teste) */
tr.arrastavel td:first-child { width: 34px; text-align: center; }
.pega { cursor: grab; color: #9aa7b6; font-size: 1.15rem; line-height: 1; user-select: none; }
.pega:active { cursor: grabbing; }
tr.a-arrastar { opacity: .45; }
tr.alvo-drop > td { box-shadow: inset 0 2px 0 var(--destaque); }
td .meta { color: var(--suave); font-size: .8rem; margin-top: .15rem; }
details.config { margin-top: .6rem; }
details.config > summary { cursor: pointer; color: var(--marca); font-size: .85rem; font-weight: 600; }
details.config > summary::marker { color: var(--suave); }

/* ========================================================================
   REDESIGN "consola de dados" (0.24.0) — sobrepõe o anterior.
   Densidade controlada, ar entre blocos, monospace nos DADOS, hairlines
   como estrutura, barra de estado por linha. Só fontes de sistema (CSP).
   ======================================================================== */
:root {
  --fundo: #e9edf2; --superficie: #ffffff; --superficie-2: #f5f8fc;
  --linha: #dbe1ea; --linha-forte: #c3ccd9;
  --texto: #141a22; --suave: #5f6b7a; --suave-2: #8b95a3;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", monospace;
  --sombra: 0 1px 2px rgba(20,32,48,.05), 0 6px 20px rgba(20,32,48,.05);
  --raio: 10px;
}
body { background: var(--fundo); }
main { padding: 2rem 2.25rem; }
/* Conteúdo a toda a largura (sem barra lateral — navegação no menu de topo). */
.corpo.sem-lateral > main { width: 100%; }
/* Ferramentas de CSV (import/minuta) */
.csv-ferramentas { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; margin: 0 0 .7rem; }
.csv-ferramentas .csv-upload { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
.csv-ferramentas .csv-upload input[type=file] { font-size: .82rem; }
/* Validação em lote dos achados */
.lote-barra { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin: 0 0 .8rem;
  padding: .7rem .9rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); }
.lote-barra .lote-conta { font-size: .85rem; color: var(--suave); min-width: 8.5rem; }
.lote-barra .lote-rej { display: inline-flex; align-items: center; gap: .4rem; }
.lote-barra .lote-rej input { margin: 0; width: 13rem; }
.lote-barra button[disabled] { opacity: .5; cursor: not-allowed; }
.lote-barra .secundario { margin-left: auto; }
.tabela-achados .col-chk { width: 2.2rem; text-align: center; }
.tabela-achados .col-chk input { width: 1.05rem; height: 1.05rem; }
.lote-barra .chk-todos-lbl { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .85rem; font-weight: 400; color: var(--suave); white-space: nowrap; }
.lote-barra .chk-todos-lbl input { width: 1.05rem; height: 1.05rem; }
/* Mostrador de gravidade (ponteiro) */
.grav-cel { min-width: 6.5rem; }
.grav-medidor { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.grav-medidor .grav-svg { display: block; }
.grav-rot { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.grav-rot.critico { color: #B42318; }
.grav-rot.alto { color: #D9480F; }
.grav-rot.medio { color: #B7791F; }
.grav-rot.baixo { color: #0070C0; }
h1 { font-size: 1.55rem; letter-spacing: -.015em; margin-bottom: .35rem; }
p.sub { max-width: 74ch; line-height: 1.6; margin-bottom: 1.75rem; }

/* Navegação */
.topo { height: 60px; }

/* Superfícies com mais ar */
.cartao { padding: 1.5rem 1.6rem; border-radius: var(--raio); }

/* Tabelas (restantes páginas) — respiram mais */
table { border-radius: var(--raio); box-shadow: var(--sombra); }
th, td { padding: .85rem 1.1rem; font-size: .9rem; }
th { background: var(--superficie-2); font-size: .72rem; color: var(--suave-2); }
tbody tr:hover > td { background: var(--superficie-2); }
.mono { font-family: var(--mono); }

/* Barra de uma definição (ex.: aplicar ordem no relatório) */
.barra { display: flex; align-items: center; gap: 1rem; background: var(--superficie);
  border: 1px solid var(--linha); border-left: 3px solid var(--destaque);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.barra .txt { color: var(--suave); font-size: .9rem; line-height: 1.55; }
.barra .txt b { color: var(--texto); }
.barra .ordenar-num { margin: 0 0 0 auto; flex: 0 0 auto; }

/* ---- Lista-consola de módulos ---- */
.modulos { background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.mod { display: grid; grid-template-columns: 2.4rem 26px minmax(0,1fr) auto; gap: 0 1.1rem;
  align-items: start; padding: 1.4rem 1.6rem; border-top: 1px solid var(--linha); position: relative; }
.mod > .mod-num { font-size: .95rem; font-weight: 800; color: var(--marca); line-height: 1.4;
  font-variant-numeric: tabular-nums; }
.mod:first-child { border-top: 0; }
.mod::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--linha-forte); }
.mod.on::before { background: var(--ok); }
.mod.a-arrastar { opacity: .5; }
.mod.alvo-drop { box-shadow: inset 0 2px 0 var(--destaque); }
.mod .pega { cursor: grab; color: #a9b4c2; font-size: 1.2rem; line-height: 1.4; user-select: none; }
.mod .pega:active { cursor: grabbing; }
.mod .nome { font-size: 1.04rem; font-weight: 650; letter-spacing: -.01em; }
.mod .addr { font-family: var(--mono); font-size: .78rem; color: var(--suave-2); margin-top: .2rem; }
.mod .desc { color: var(--suave); font-size: .9rem; line-height: 1.62; max-width: 64ch; margin-top: .6rem; }
.mod .chips { margin-top: .7rem; }
.mod .conf { margin-top: .85rem; }
.mod .conf > summary { color: var(--marca); font-weight: 600; font-size: .85rem; cursor: pointer; }

/* Grupo de controlos à direita, com respiração e divisória */
.ctrl { display: flex; gap: 2rem; padding-left: 1.5rem; border-left: 1px solid var(--linha); }
.ctrl .campo { display: flex; flex-direction: column; align-items: center; gap: .5rem; min-width: 68px; }
.ctrl .campo .rot { font-size: .74rem; color: var(--suave-2); white-space: nowrap; }
.ctrl .campo .estado { font-size: .72rem; color: var(--suave); }
.ctrl .campo .estado.aviso-fonte { color: var(--alto); }

/* Chips mais calmos */
.chip { background: var(--superficie-2); border-color: var(--linha); color: var(--marca); padding: .2rem .65rem; font-size: .78rem; }

@media (max-width: 760px) {
  main { padding: 1.1rem; }
  /* barra de definição: empilha para o texto não ficar espremido numa coluna estreita */
  .barra { flex-direction: column; align-items: stretch; gap: .75rem; }
  .barra .ordenar-num { margin: 0; }
  /* cartão de módulo: nº + pega na 1.ª linha; descrição e controlos ocupam a largura toda */
  .mod { grid-template-columns: 2.4rem 1fr; gap: .4rem .9rem; padding: 1.2rem 1.1rem; }
  .mod > .corpo-mod { grid-column: 1 / -1; }
  .mod .desc { max-width: none; }
  .ctrl { grid-column: 1 / -1; margin-top: 1rem; padding-left: 0; border-left: 0;
    justify-content: flex-start; flex-wrap: wrap; gap: 1.25rem; }
  /* Campos da empresa: cada linha vira um cartão (a coluna Etiqueta deixa de ficar escondida) */
  .tabela-campos, .tabela-campos > tbody { display: block; }
  .tabela-campos > tbody > tr:first-child { display: none; }
  .tabela-campos > tbody > tr { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .9rem;
    align-items: center; padding: .95rem .2rem; border-top: 1px solid var(--linha); }
  .tabela-campos > tbody > tr:nth-child(2) { border-top: 0; }
  .tabela-campos > tbody > tr > td { display: flex; align-items: center; gap: .5rem; border: 0; padding: 0; }
  .tabela-campos > tbody > tr > td.mono { grid-column: 1 / -1; font-weight: 600; font-size: .95rem; }
  .tabela-campos > tbody > tr > td.centro { justify-content: flex-start; text-align: left; }
  .tabela-campos > tbody > tr > td.centro::before { content: attr(data-rot); font-size: .82rem; color: var(--suave); }
  .tabela-campos > tbody > tr > td:last-child { grid-column: 1 / -1; flex-direction: column; align-items: stretch; gap: .3rem; }
  .tabela-campos > tbody > tr > td:last-child::before { content: attr(data-rot); font-size: .82rem; color: var(--suave); }
  /* Utilizadores: cada linha vira um cartão com os controlos (papel, acções) à vista */
  .tabela-utilizadores, .tabela-utilizadores > tbody { display: block; max-width: 100%; }
  .tabela-utilizadores { overflow: visible; }
  .tabela-utilizadores > tbody > tr:first-child { display: none; }
  .tabela-utilizadores > tbody > tr { display: block; padding: 1.1rem 0; border-top: 1px solid var(--linha); }
  .tabela-utilizadores > tbody > tr:nth-child(2) { border-top: 0; }
  .tabela-utilizadores > tbody > tr > td { display: block; border: 0; padding: .35rem 0; white-space: normal; }
  .tabela-utilizadores > tbody > tr > td.u-nome { font-weight: 700; font-size: 1.05rem; color: var(--marca); padding-top: 0; }
  .tabela-utilizadores > tbody > tr > td[data-rot]::before { content: attr(data-rot); display: block;
    font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave-2); margin-bottom: .2rem; }
  .tabela-utilizadores .papel-form { display: flex; gap: .5rem; align-items: center; }
  .tabela-utilizadores .papel-form select { flex: 1 1 auto; }
  .tabela-utilizadores .grupo-accoes { display: flex; flex-wrap: wrap; gap: .5rem; }
  /* Padrão genérico: tabela que vira cartões em mobile (1.ª célula = título, restantes rotuladas) */
  .tabela-empilha, .tabela-empilha > tbody { display: block; max-width: 100%; overflow: visible; }
  .tabela-empilha > tbody > tr:first-child { display: none; }
  .tabela-empilha > tbody > tr { display: block; padding: 1.1rem 0; border-top: 1px solid var(--linha); }
  .tabela-empilha > tbody > tr:nth-child(2) { border-top: 0; }
  .tabela-empilha > tbody > tr > td { display: block; border: 0; padding: .35rem 0; white-space: normal; text-align: left; }
  .tabela-empilha > tbody > tr > td.celula-titulo { font-weight: 700; font-size: 1.05rem; color: var(--marca); padding-top: 0; }
  .tabela-empilha > tbody > tr > td[data-rot]::before { content: attr(data-rot); display: block;
    font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave-2); margin-bottom: .2rem; }
  /* linha-par do trilho de auditoria: cola-se ao cartão anterior em vez de abrir novo */
  .tabela-empilha > tbody > tr.trilho-linha { border-top: 0; padding-top: 0; }
  .tabela-empilha > tbody > tr.trilho-linha > td:first-child { display: none; }
  /* grupos de acções e formulário de revogar dentro de um cartão empilhado */
  .tabela-empilha .acao-linha, .tabela-empilha form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
  .tabela-empilha .revogar input[type=text] { flex: 1 1 10rem; }
  /* tabela de achados empilhada: anula larguras mínimas e alinha o medidor à esquerda */
  .tabela-achados.tabela-empilha .of-cel, .tabela-achados.tabela-empilha .grav-cel { min-width: 0; }
  .tabela-achados.tabela-empilha .grav-medidor { flex-direction: row; align-items: center; gap: .5rem; }
  .tabela-achados.tabela-empilha .accoes { white-space: normal; }
  .tabela-achados.tabela-empilha .col-chk { text-align: left; width: auto; }
  .lote-barra .secundario { margin-left: 0; }
  .lote-barra .lote-rej { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
  .lote-barra .lote-rej input { flex: 1 1 8rem; width: auto; min-width: 0; }
}

/* ---- Leitura técnica em tabelas (0.24.0) ---- */
table td { vertical-align: middle; }
td .mono, .dado { font-family: var(--mono); font-size: .85rem; color: var(--texto); }
/* números e códigos não partem a meio (0.37.1) */
td.dado, td.direita, th.direita { white-space: nowrap; }
.cel-vazia { color: var(--suave-2); }
/* Listagens longas: ~10 linhas visíveis, depois scroll, com cabeçalho fixo (0.37.2) */
.tabela-scroll { max-height: 34rem; overflow: auto; border: 1px solid var(--linha-forte);
  border-radius: var(--raio); box-shadow: var(--sombra); margin-bottom: 1rem; }
.tabela-scroll table { border: 0; border-radius: 0; box-shadow: none; }
.tabela-scroll thead th { position: sticky; top: 0; z-index: 2; }
/* Base de empresas: nome com largura e designação numa linha só (0.37.1) */
.tab-emp td { vertical-align: middle; }
.tab-emp td:first-child { min-width: 15rem; font-weight: 600; }
.tab-emp td:first-child .flags { margin-top: .15rem; }
.tab-emp td:first-child .flags span { display: block; font-weight: 400; font-size: .76rem; color: var(--suave-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; }
/* Estado: ponto + palavra, com flags discretas por baixo (em vez de bolinhas empilhadas) */
.estado-rot { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .86rem; }
.estado-rot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.estado-rot.ok { color: var(--ok); }
.estado-rot.off { color: var(--suave-2); }
.estado-rot.aviso { color: var(--alto); }
.flags { margin-top: .3rem; display: flex; flex-direction: column; gap: .1rem; }
.flags span { font-size: .74rem; color: var(--suave-2); }
/* Campo papel compacto e acções alinhadas */
.papel-form { display: flex; gap: .4rem; align-items: center; }
.papel-form select { width: auto; min-width: 7.5rem; padding: .35rem .5rem; }
.grupo-accoes { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; }
.grupo-accoes form { margin: 0; }

.pequeno { white-space: nowrap; }

/* ===== Controlos unificados em TODO o painel (seguem os Módulos de teste) ===== */
:root { --raio-ctrl: 6px; }
/* Inputs, selects e textarea — mesma borda, raio crespo, tipografia e altura */
input[type=text], input[type=email], input[type=password], input[type=search], select, textarea {
  border: 1px solid var(--linha-forte); border-radius: var(--raio-ctrl);
  font-size: .9rem; color: var(--texto); padding: .5rem .7rem; line-height: 1.3; }
input::placeholder, textarea::placeholder { color: var(--suave-2); }
/* Select: sem aspecto nativo; seta própria consistente */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2rem; background-color: #fff; cursor: pointer;
  background-repeat: no-repeat; background-position: right .65rem center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6b7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* Botões — mesmo raio crespo, lettering e peso em todo o lado */
button, .botao { border-radius: var(--raio-ctrl); font-weight: 600; font-size: .9rem; letter-spacing: 0; }
button.pequeno, .botao.pequeno { padding: .4rem .75rem; font-size: .82rem; }
button.secundario, .botao.secundario { border-color: var(--linha-forte); color: var(--marca); }
button.secundario:hover { background: var(--superficie-2); box-shadow: none; }

.papel-form select { min-width: 9.5rem; }

/* ---- Área CAE · NIS2/DORA — listagens (0.30.0) ---- */
.duas-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
.duas-col > * { min-width: 0; }   /* impede que conteúdo largo numa coluna alargue a página */
.duas-col h3 { font-size: .82rem; color: var(--suave-2); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .4rem; }
@media (max-width: 860px) { .duas-col { grid-template-columns: 1fr; } }
td.dado, td .et { font-family: var(--mono); font-size: .82rem; }

/* ---- Campo CAE com pesquisa (front, 0.30.0) ---- */
.cae-campo { position: relative; }
.cae-lista { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 4px;
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio-ctrl);
  box-shadow: var(--sombra); max-height: 19rem; overflow-y: auto; }
.cae-item { display: flex; align-items: baseline; gap: .6rem; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid var(--linha); padding: .5rem .7rem; border-radius: 0; box-shadow: none;
  font-weight: 400; cursor: pointer; }
.cae-item:last-child { border-bottom: 0; }
.cae-item:hover, .cae-item.activo { background: var(--superficie-2); box-shadow: none; }
.cae-cod { font-family: var(--mono); font-size: .82rem; font-weight: 700; color: var(--marca); flex: 0 0 auto; min-width: 3.4rem; }
.cae-desc { flex: 1; font-size: .86rem; color: var(--texto); }
.cae-flags { display: flex; gap: .3rem; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.cae-flag { font-family: var(--mono); font-size: .66rem; letter-spacing: .02em; padding: .1rem .4rem;
  border-radius: 4px; border: 1px solid var(--linha-forte); color: var(--suave-2); white-space: nowrap; }
.cae-flag.ok { color: var(--ok); border-color: var(--ok); }
.cae-flag.aviso { color: var(--alto); border-color: var(--alto); }
.cae-vazio { padding: .55rem .7rem; font-size: .84rem; color: var(--suave-2); }
.cae-nota { margin: .35rem 0 0; font-size: .78rem; color: var(--suave); font-family: var(--mono); }
/* escolha de regime NIS2/DORA — cartões seleccionáveis (mais visual) */
.cae-regime { margin-top: .6rem; }
.cae-escolha-rot { font-size: .8rem; color: var(--suave); font-weight: 600; margin-bottom: .45rem; }
.cae-cartoes { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.cae-card { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; text-align: left;
  padding: .6rem .7rem; border-radius: var(--raio-ctrl); border: 2px solid var(--linha-forte);
  background: var(--superficie); cursor: pointer; box-shadow: none; font-weight: 400; }
.cae-card:hover { background: var(--superficie-2); box-shadow: none; }
.cae-card-top { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.cae-card-tit { font-family: var(--mono); font-weight: 700; font-size: .92rem; letter-spacing: .02em; color: var(--texto); }
.cae-card-marca { font-weight: 800; font-size: .95rem; color: inherit; min-width: 1rem; text-align: right; }
.cae-card-sub { font-size: .76rem; color: var(--suave-2); }
.cae-card.ativo.tom-nis2 { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--superficie)); }
.cae-card.ativo.tom-nis2 .cae-card-tit, .cae-card.ativo.tom-nis2 .cae-card-marca { color: var(--ok); }
.cae-card.ativo.tom-dora { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 10%, var(--superficie)); }
.cae-card.ativo.tom-dora .cae-card-tit, .cae-card.ativo.tom-dora .cae-card-marca { color: var(--marca); }
.cae-card.off { opacity: .5; cursor: not-allowed; background: var(--superficie-2); border-style: dashed; }
.cae-card.off:hover { background: var(--superficie-2); }
.cae-escolha-pe { margin-top: .4rem; min-height: 1.1rem; }
.cae-limpar { background: none; border: 0; box-shadow: none; padding: 0; font-size: .78rem; font-weight: 600;
  color: var(--alto); cursor: pointer; }
.cae-limpar:hover { text-decoration: underline; background: none; box-shadow: none; }
.cae-escolha-aviso { font-size: .76rem; color: var(--suave-2); }

/* consulta por NIF (VIES + duplicados) */
.nif-linha { display: flex; gap: .4rem; align-items: stretch; }
.nif-linha input { flex: 1; }
.nif-linha button { white-space: nowrap; }
.nif-nota { margin-top: .4rem; display: flex; flex-direction: column; gap: .3rem; }
.nif-item { font-size: .8rem; color: var(--suave); padding: .4rem .55rem; border-radius: var(--raio-ctrl);
  border: 1px solid var(--linha); background: var(--superficie-2); }
.nif-item.ok { border-left: 3px solid var(--ok); }
.nif-item.aviso { border-left: 3px solid var(--alto); }
.nif-item a { font-weight: 600; }
.nif-morada { font-family: var(--mono); font-size: .74rem; color: var(--suave-2); margin-top: .2rem; }
.nif-usar { margin-top: .35rem; background: none; border: 0; box-shadow: none; padding: 0;
  font-size: .76rem; font-weight: 600; color: var(--marca); cursor: pointer; }
.nif-usar:hover { text-decoration: underline; background: none; box-shadow: none; }
.dim-nota { margin-top: .3rem; font-size: .74rem; color: var(--suave-2); }
.nif-copiar { background: var(--superficie); border: 1px solid var(--linha-forte); box-shadow: none;
  padding: .1rem .5rem; font-size: .72rem; font-weight: 600; color: var(--marca); cursor: pointer;
  border-radius: 4px; vertical-align: baseline; }
.nif-copiar:hover { background: var(--superficie-2); box-shadow: none; }

/* ---- Ajuda por área (0.29.0) ---- */
details.ajuda { background: var(--superficie-2); border: 1px solid var(--linha); border-left: 3px solid var(--marca);
  border-radius: var(--raio-ctrl); padding: .55rem .9rem; margin: 0 0 1.25rem; }
details.ajuda > summary { cursor: pointer; font-weight: 600; color: var(--marca); font-size: .88rem; }
details.ajuda > summary::marker { color: var(--suave-2); }
details.ajuda ul { margin: .55rem 0 .2rem; padding-left: 1.15rem; }
details.ajuda li { margin: .28rem 0; font-size: .86rem; line-height: 1.5; }
details.ajuda li b { color: var(--marca); }

/* ========================================================================
   0.46.0 — Identidade Netseg + polimento do painel de administração.
   Moldura de marca (topo com remate, lateral como painel com marca-de-água
   "radar" do logótipo), títulos com acento, tabelas com cabeçalho de marca e
   zebra, controlos na cor da marca. Só CSS; segue as cores editáveis (--marca/
   --destaque) e respeita o CSP (SVG em data-URI, como a seta dos selects).
   ======================================================================== */

/* Controlos de selecção na cor da marca, com mais presença */
input[type=checkbox], input[type=radio] { accent-color: var(--marca); width: 1.05rem; height: 1.05rem; cursor: pointer; }

/* Foco de marca, suave, em todos os campos (mantém foco de teclado visível) */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 16%, transparent); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

/* Barra de topo: remate inferior e leve profundidade */
.topo { box-shadow: 0 2px 10px rgba(16,32,44,.12); }

/* Títulos de página com acento de marca (todas as áreas) */
.corpo > main > h1:first-of-type { position: relative; padding-bottom: .8rem;
  margin-bottom: .4rem; border-bottom: 1px solid var(--linha); }
.corpo > main > h1:first-of-type::after { content: ""; position: absolute; left: 0; bottom: -1px;
  width: 48px; height: 2px; background: var(--destaque); }

/* Tabelas: cabeçalho de marca + zebra subtil + realce de linha na cor de destaque.
   Usa 'th' (não 'thead th') porque vários quadros não têm <thead>. */
th { background: color-mix(in srgb, var(--marca) 7%, var(--superficie-2)); color: var(--marca);
  border-bottom: 1px solid color-mix(in srgb, var(--marca) 16%, var(--linha)); }
tbody tr:nth-child(even) > td { background: color-mix(in srgb, var(--marca) 3%, var(--superficie)); }
tbody tr:hover > td { background: color-mix(in srgb, var(--destaque) 8%, var(--superficie)); }

/* Cartões: sombra com um pouco mais de corpo */
.cartao { box-shadow: 0 1px 2px rgba(20,32,48,.05), 0 8px 24px rgba(20,32,48,.06); }

/* Tabela de campos/definições: caixas centradas, maiores, e realce de linha */
.tabela-campos .centro input { width: 1.15rem; height: 1.15rem; }
.tabela-campos tbody tr:hover > td { background: color-mix(in srgb, var(--destaque) 8%, var(--superficie)); }

/* Botão primário: hover de marca mais escuro (em vez de só sombra) */
button:not(.secundario):not(.perigo):hover, .botao:not(.secundario):not(.perigo):hover {
  background: color-mix(in srgb, var(--marca) 86%, #000); border-color: color-mix(in srgb, var(--marca) 86%, #000); }

/* LARGURA CONSISTENTE EM TODAS AS ÁREAS (desktop + mobile, admin + front):
   uma tabela larga nunca alarga a página — contém-se e faz scroll horizontal DENTRO da própria
   área. Assim a largura de visualização é a mesma em todos os ecrãs do menu. */
main > table { display: block; overflow-x: auto; max-width: 100%; }
main > table > thead, main > table > tbody { display: table; width: 100%; }   /* mantém as colunas alinhadas */

/* Consistência de dimensão entre áreas: nos formulários do admin, os campos ficam numa coluna
   confortável e igual em todas as páginas (em vez de esticarem a toda a largura). As tabelas e
   listas continuam a preencher o canvas. Assim, Marca, Campos, Textos legais, Utilizadores (form
   de novo), etc. têm todos a mesma largura de campos. */
.corpo .cartao input[type=text],
.corpo .cartao input[type=email],
.corpo .cartao input[type=password],
.corpo .cartao input[type=search],
.corpo .cartao select,
.corpo .cartao textarea { max-width: 680px; }
/* Dentro de uma tabela (ex.: etiqueta dos campos) o campo preenche a célula, sem o limite acima. */
.corpo .cartao table input[type=text],
.corpo .cartao table select { max-width: none; }
/* A grelha de dois campos (ex.: cores da marca) alinha com a mesma coluna. */
.corpo .cartao .grelha { max-width: 680px; }
.corpo .cartao .grelha input,
.corpo .cartao .grelha select,
.corpo .cartao .grelha textarea { max-width: none; }

@media (max-width: 760px) {
  /* Barra de topo cresce para o conteúdo (não corta) e o lado direito quebra/encolhe */
  .topo { height: auto; }
  .topo-dir { margin-left: 0; width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: .5rem; }
  .topo .quem { flex-wrap: wrap; min-width: 0; }
  .topo .quem span { min-width: 0; }
  .topo .trocar { white-space: normal; }
  /* Mobile: a barra lateral dá lugar ao menu em hambúrguer no topo */
  .corpo > .lateral { display: none; }
  .menu-toggle { display: inline-flex; }
  /* Recuo lateral no container; main sem margem horizontal própria → sem overflow */
  .corpo { padding-left: 1rem; padding-right: 1rem; }
  main { padding-left: 0; padding-right: 0; }
  /* Painel do menu ocupa a largura do ecrã (dentro do recuo) */
  .topo-menu { left: 1rem; right: 1rem; min-width: 0; max-width: none; }
  .corpo .cartao input, .corpo .cartao select,
  .corpo .cartao textarea, .corpo .cartao .grelha { max-width: none; }
}