/* BrokerLens.PT — estilos da aplicação (DESIGN-4).
 * Ficheiro local, sem CDN nem fontes externas: funciona sem internet.
 * Tela preta, superfícies em degraus de luminância, um único acento azul (#0063e1)
 * reservado à ação principal e ao estado ativo. Elevação por contorno interior, nunca por sombra.
 */

:root {
  /* Cores (DESIGN-4) */
  --azul: #0063e1;
  --azul-claro: #3d8bff;      /* só para texto/ligações azuis sobre fundo escuro (contraste) */
  --obsidiana: #000000;
  --carbono: #040910;
  --grafite: #0d0d0d;
  --ferro: #1f1f1f;
  --aco: #2b2c2e;
  --cinza: #858585;
  --fumo: #979797;
  --nevoa: #8c8c8c;
  --papel: #ffffff;

  /* Texto */
  --texto: var(--papel);
  --texto-2: #a3a3a3;          /* corpo secundário: acima do mínimo #858585 do guia */
  --texto-3: var(--cinza);

  /* Contornos e elevação */
  --contorno: rgba(255, 255, 255, 0.12);
  --contorno-fraco: rgba(255, 255, 255, 0.07);
  --sombra-cartao: rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset;
  --sombra-campo: rgba(255, 255, 255, 0.2) 0px 0px 1px 0px;

  /* Tipografia: substitutos do guia (Diatype → Inter/sistema; OCD-GARRI → mono) */
  --fonte: "Inter", "Söhne", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: "JetBrains Mono", "IBM Plex Mono", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Raios */
  --raio-nav: 2px;
  --raio-campo: 8px;
  --raio-cartao: 16px;
  --raio-grande: 30px;
  --raio-pilula: 59px;

  /* Espaçamento (base 4px) */
  --e4: 4px; --e8: 8px; --e12: 12px; --e16: 16px; --e20: 20px; --e24: 24px;
  --e32: 32px; --e40: 40px; --e48: 48px; --e56: 56px; --e80: 80px;

  --largura: 1200px;
  --altura-topo: 72px;

  /* Marcas de dados (monocromático + azul) */
  --serie-recebido: var(--azul);
  --serie-faturado: #d9d9d9;
  --serie-presumivel: #4a4b4f;
  --serie-objetivo: var(--papel);

  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--obsidiana);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.007em;
  font-feature-settings: "case";
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }

h1, h2, h3 { font-weight: 400; margin: 0; }

.mono, .rotulo, .etiqueta, th, code { font-family: var(--fonte-mono); }
code { font-size: 0.92em; color: var(--texto-2); }

/* ---------- Ícones (SVG inline) ---------- */
.icone { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

/* ---------- Barra superior ---------- */
.topo {
  position: sticky; top: 0; z-index: 40;
  height: var(--altura-topo);
  display: flex; align-items: center; gap: var(--e24);
  padding: 0 var(--e32);
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--contorno-fraco);
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.marca-sinal { width: 22px; height: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.marca-sinal span { background: var(--papel); }
.marca-sinal span:nth-child(2) { background: var(--azul); }
.marca-sinal span:nth-child(3) { opacity: .45; }
.marca-nome { font-size: 17px; letter-spacing: -0.027em; }
.marca-nome b { font-weight: 600; }

.nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  position: relative; white-space: nowrap; text-decoration: none;
  padding: 8px 12px; border-radius: var(--raio-nav);
  color: var(--cinza); font-size: 14px;
}
.nav a:hover { color: var(--papel); }
.nav a.ativo { color: var(--papel); }
.nav a.ativo::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--azul);
}

.topo-direita { display: flex; align-items: center; gap: var(--e12); white-space: nowrap; }
.utilizador { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.utilizador-nome { font-size: 13px; }
.utilizador-papel { font-family: var(--fonte-mono); font-size: 11px; color: var(--cinza); letter-spacing: 0.033em; }

.faixa-ambiente {
  display: flex; justify-content: center; gap: var(--e8); align-items: center;
  padding: 6px var(--e16); background: var(--carbono); border-bottom: 1px solid var(--contorno-fraco);
  font-family: var(--fonte-mono); font-size: 12px; letter-spacing: 0.033em; color: var(--texto-2);
}
.faixa-ambiente::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--azul); }

/* ---------- Página ---------- */
.pagina { max-width: var(--largura); margin: 0 auto; padding: var(--e48) var(--e32) var(--e80); display: flex; flex-direction: column; gap: var(--e24); }
.pagina-larga { max-width: 1360px; }

.cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e16); margin-bottom: var(--e8); }
.cabecalho h1 { font-size: 44px; line-height: 1.1; letter-spacing: -0.04em; }
.cabecalho .sub { margin: var(--e8) 0 0; color: var(--texto-2); font-size: 15px; max-width: 760px; }
.cabecalho-acoes { display: flex; gap: var(--e8); flex-wrap: wrap; }

.seccao-titulo { font-size: 24px; letter-spacing: -0.027em; margin-top: var(--e24); }
.seccao-sub { color: var(--texto-2); font-size: 14px; margin: 4px 0 0; }

.rotulo { font-size: 12px; letter-spacing: 0.033em; color: var(--cinza); }

/* ---------- Superfícies ---------- */
.cartao {
  background: var(--grafite); border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao);
  padding: var(--e24); min-width: 0;
}
.cartao-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e12); margin-bottom: var(--e20); flex-wrap: wrap; }
.cartao-cab h2 { font-size: 20px; letter-spacing: -0.027em; }
.cartao-cab .sub { color: var(--texto-3); font-size: 13px; margin: 0; }
.cartao.painel { background: var(--carbono); }
.cartao.plano { padding: 0; overflow: hidden; }
.cartao.plano .cartao-cab { padding: var(--e24) var(--e24) 0; }

.grelha { display: grid; gap: var(--e16); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.span-2 { grid-column: span 2; }

/* ---------- Indicadores ---------- */
.kpi { display: flex; flex-direction: column; gap: var(--e12); min-height: 148px; }
.kpi-valor { font-size: 36px; line-height: 1.05; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.kpi-detalhe { color: var(--texto-2); font-size: 13px; margin-top: auto; }
.kpi.destaque { background: var(--carbono); box-shadow: var(--sombra-cartao), inset 0 2px 0 0 var(--azul); }

.numero-grande { font-size: 36px; letter-spacing: -0.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* ---------- Tabelas ---------- */
.tabela-envolvente { overflow-x: auto; margin: 0 calc(-1 * var(--e24)); padding: 0 var(--e24); }
.cartao.plano .tabela-envolvente { margin: 0; padding: 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th {
  text-align: left; font-weight: 400; font-size: 12px; letter-spacing: 0.033em;
  color: var(--cinza); padding: 10px 12px; border-bottom: 1px solid var(--contorno); white-space: nowrap;
}
td { padding: 12px; border-bottom: 1px solid var(--contorno-fraco); vertical-align: middle; }
td:first-child { min-width: 140px; }
td.num, th.num { white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.cartao.plano th:first-child, .cartao.plano td:first-child { padding-left: var(--e24); }
.cartao.plano th:last-child, .cartao.plano td:last-child { padding-right: var(--e24); }
th.num, td.num { text-align: right; }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: rgba(255, 255, 255, 0.03); }
td .menor, .menor { display: block; color: var(--texto-3); font-size: 12px; margin-top: 2px; }
td.forte, .forte { font-weight: 600; }
td input, td select { min-width: 0; }

/* ---------- Controlos ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--raio-pilula); border: 0;
  font: inherit; font-size: 14px; letter-spacing: -0.007em; line-height: 1.2;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  background: transparent; color: var(--papel); box-shadow: var(--sombra-cartao);
}
.botao:hover { background: rgba(255, 255, 255, 0.06); }
.botao.primario { background: var(--azul); box-shadow: none; }
.botao.primario:hover { background: #0a6ff5; }
.botao.claro { background: var(--papel); color: var(--obsidiana); box-shadow: none; }
.botao.claro:hover { background: #e6e6e6; }
.botao.pequeno { padding: 7px 14px; font-size: 13px; }
.botao.grande { padding: 16px 28px; font-size: 16px; }
.botao:disabled { opacity: .45; cursor: not-allowed; }
.botao-texto { background: none; border: 0; padding: 0; font: inherit; color: var(--texto-2); cursor: pointer; text-decoration: underline; text-decoration-color: var(--contorno); text-underline-offset: 3px; }
.botao-texto:hover { color: var(--papel); }

input, select, textarea {
  font: inherit; font-size: 14px; color: var(--papel);
  background: var(--ferro); border: 0; border-radius: var(--raio-campo);
  box-shadow: var(--sombra-campo), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  padding: 9px 12px; min-height: 40px; width: 100%;
}
textarea { min-height: 120px; resize: vertical; font-family: var(--fonte-mono); font-size: 13px; }
input::placeholder, textarea::placeholder { color: var(--cinza); }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: var(--azul); box-shadow: none; vertical-align: -3px; }
input[type=file] { padding: 8px; }
input[type=date], input[type=month] { color-scheme: dark; }
select { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--cinza) 50%), linear-gradient(135deg, var(--cinza) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
select option { background: var(--ferro); color: var(--papel); }

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > span { font-family: var(--fonte-mono); font-size: 12px; letter-spacing: 0.033em; color: var(--cinza); }
.campo.curto { max-width: 220px; }

.formulario { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e12); }
.formulario .campo { flex: 1 1 180px; }
.formulario .campo.estreito { flex: 0 1 170px; }
.formulario .botao { flex: none; }
.formulario + .formulario { margin-top: var(--e12); }
.subformulario { margin-top: var(--e20); padding-top: var(--e20); border-top: 1px solid var(--contorno-fraco); }
.subformulario .rotulo { display: block; margin-bottom: var(--e12); }

.acoes-linha { display: flex; gap: var(--e8); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.acoes-linha input { width: 190px; }

/* ---------- Barra de filtros ---------- */
.filtros {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e12);
  padding: var(--e16) var(--e20); background: var(--carbono); border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao);
}
.filtros .campo { flex: 0 1 200px; }
.filtros .espaco { flex: 1; }
.trilho { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: 13px; padding-bottom: 8px; }
.trilho button { background: none; border: 0; font: inherit; color: var(--cinza); padding: 4px 6px; cursor: pointer; border-radius: var(--raio-nav); }
.trilho button:hover { color: var(--papel); }
.trilho button.atual { color: var(--papel); }
.trilho .sep { color: var(--aco); }

.chips { display: flex; flex-wrap: wrap; gap: var(--e8); }
.chip {
  border: 0; border-radius: var(--raio-pilula); padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer;
  background: transparent; color: var(--texto-2); box-shadow: var(--sombra-cartao);
}
.chip .n { font-family: var(--fonte-mono); font-size: 12px; color: var(--cinza); margin-left: 6px; }
.chip.ativo { background: var(--papel); color: var(--obsidiana); box-shadow: none; }
.chip.ativo .n { color: #555; }

/* ---------- Etiquetas de estado ---------- */
.etiqueta {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--raio-pilula);
  font-size: 12px; letter-spacing: 0.033em; background: var(--aco); color: var(--texto-2); white-space: nowrap;
}
.etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.etiqueta.sem-ponto::before { display: none; }
.etiqueta.azul { background: rgba(0, 99, 225, 0.18); color: #7fb2ff; }
.etiqueta.clara { background: var(--papel); color: var(--obsidiana); }
.etiqueta.contorno { background: transparent; box-shadow: var(--sombra-cartao); }
.etiqueta.apagada { background: transparent; color: var(--cinza); }

/* Semáforo de cumprimento (sem cores semânticas: luminância + texto) */
.estado-cumprido { color: var(--papel); }
.estado-risco { color: var(--texto-2); }
.estado-abaixo { color: var(--cinza); }

.progresso { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.progresso-barra { flex: 1; height: 4px; background: var(--aco); border-radius: 2px; overflow: hidden; }
.progresso-barra > span { display: block; height: 100%; background: var(--papel); }
.progresso-barra.abaixo > span { background: var(--cinza); }
.progresso-barra.cumprido > span { background: var(--azul); }
.progresso-valor { font-family: var(--fonte-mono); font-size: 12px; width: 52px; text-align: right; }

/* ---------- Mensagens ---------- */
.mensagem {
  display: flex; gap: var(--e12); align-items: flex-start; padding: var(--e16) var(--e20);
  border-radius: var(--raio-cartao); background: var(--carbono); box-shadow: var(--sombra-cartao); font-size: 14px; color: var(--texto-2);
}
.mensagem strong { color: var(--papel); font-weight: 600; }
.mensagem .rotulo { flex: none; padding-top: 2px; }
.mensagem.erro { background: var(--aco); color: var(--papel); box-shadow: inset 3px 0 0 0 var(--papel); }
.mensagem.sucesso { box-shadow: var(--sombra-cartao), inset 3px 0 0 0 var(--azul); color: var(--papel); }
.mensagem.atencao { box-shadow: var(--sombra-cartao), inset 3px 0 0 0 var(--cinza); }

.nota { display: flex; gap: 8px; color: var(--texto-3); font-size: 13px; max-width: 880px; }
.nota .icone { margin-top: 3px; }
.vazio { color: var(--texto-3); font-size: 14px; padding: var(--e24) 0; text-align: center; }

.carregando { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 50vh; color: var(--texto-2); font-size: 14px; }
.carregando::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--aco); border-top-color: var(--azul); animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Composição e gráficos ---------- */
.composicao { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--aco); }
.legenda { display: flex; flex-direction: column; gap: 10px; margin-top: var(--e20); font-size: 14px; }
.legenda-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e12); }
.legenda-linha > span:first-child { display: flex; align-items: center; gap: 10px; color: var(--texto-2); }
.amostra { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.legenda-linha .pct { color: var(--cinza); font-family: var(--fonte-mono); font-size: 12px; margin-left: 6px; }
.legenda-h { display: flex; flex-wrap: wrap; gap: var(--e20); margin-top: var(--e12); font-size: 13px; color: var(--texto-2); }
.legenda-h span { display: inline-flex; align-items: center; gap: 8px; }
.traco { width: 16px; border-top: 2px dashed var(--serie-objetivo); }

.grafico { width: 100%; height: auto; display: block; }
.grafico text { fill: var(--cinza); font-family: var(--fonte-mono); font-size: 10px; }
.grafico .grelha-linha { stroke: rgba(255, 255, 255, 0.08); }

.contagens { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e8); margin-top: var(--e20); padding-top: var(--e20); border-top: 1px solid var(--contorno-fraco); text-align: center; }
.contagens .n { font-size: 24px; letter-spacing: -0.027em; }
.contagens .r { font-size: 12px; color: var(--cinza); }

.mapa-calor td { padding: 3px; border: 0; }
.mapa-calor td:first-child { padding-right: 12px; white-space: nowrap; }
.celula-calor { height: 30px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: var(--fonte-mono); font-size: 11px; }

.barras-semana { display: flex; align-items: flex-end; gap: 6px; height: 170px; }
.barras-semana > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.barras-semana .b { width: 100%; background: var(--serie-recebido); border-radius: 3px 3px 0 0; }
.barras-semana .t { font-family: var(--fonte-mono); font-size: 10px; color: var(--cinza); }

.faixas { display: flex; flex-direction: column; gap: 14px; }
.faixa { display: grid; grid-template-columns: 90px 1fr 110px; align-items: center; gap: 12px; font-size: 14px; }
.faixa .r { color: var(--texto-2); }
.faixa .v { text-align: right; font-variant-numeric: tabular-nums; }
.faixa .t { height: 6px; background: var(--aco); border-radius: 3px; overflow: hidden; }
.faixa .t > span { display: block; height: 100%; background: var(--serie-faturado); }

/* ---------- Detalhe ---------- */
.pares { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 10px 20px; font-size: 14px; }
.pares dt { color: var(--texto-3); }
.pares dd { margin: 0; }
.parcela { border-radius: 12px; box-shadow: var(--sombra-cartao); overflow: hidden; }
.parcela-cab { display: flex; justify-content: space-between; gap: var(--e16); padding: var(--e16) var(--e20); background: var(--ferro); }
.parcela-corpo { padding: var(--e12) var(--e20); font-size: 14px; }
.parcela-corpo .linha { display: flex; justify-content: space-between; gap: var(--e12); padding: 6px 0; }
.voltar { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); text-decoration: none; font-size: 14px; }
.voltar:hover { color: var(--papel); }

/* ---------- Entrada (login) ---------- */
.entrada { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--e24) var(--e16); }
.entrada-caixa { width: 100%; max-width: 440px; }
.entrada h1 { font-size: 56px; letter-spacing: -0.04em; line-height: 1.05; margin: var(--e40) 0 var(--e12); }
.entrada .sub { color: var(--texto-2); margin: 0 0 var(--e32); font-size: 16px; }
.entrada form { display: flex; flex-direction: column; gap: var(--e16); }
.entrada input { min-height: 48px; padding: 12px 16px; font-size: 16px; }
.entrada .botao { width: 100%; margin-top: var(--e8); }
.entrada-demo { margin-top: var(--e32); padding-top: var(--e24); border-top: 1px solid var(--contorno-fraco); display: flex; flex-direction: column; gap: var(--e8); }
.entrada-demo button { display: flex; justify-content: space-between; align-items: center; width: 100%; background: var(--grafite); color: var(--texto-2); border: 0; box-shadow: var(--sombra-cartao); border-radius: 12px; padding: 12px 16px; font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.entrada-demo button:hover { color: var(--papel); background: var(--ferro); }
.entrada-rodape { margin-top: var(--e32); display: flex; justify-content: space-between; gap: var(--e16); font-size: 13px; color: var(--cinza); }

/* ---------- Rodapé ---------- */
.rodape { max-width: var(--largura); margin: 0 auto; padding: var(--e24) var(--e32) var(--e40); display: flex; justify-content: space-between; gap: var(--e16); flex-wrap: wrap; border-top: 1px solid var(--contorno-fraco); color: var(--cinza); font-size: 13px; }
.rodape button, .rodape a { background: none; border: 0; padding: 0; font: inherit; color: var(--cinza); cursor: pointer; text-decoration: none; }
.rodape button:hover, .rodape a:hover { color: var(--papel); }
.rodape .ligacoes { display: flex; gap: var(--e20); }

/* ---------- Diálogos ---------- */
dialog {
  width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0;
  border-radius: var(--raio-cartao); background: var(--aco); color: var(--papel); box-shadow: var(--sombra-cartao);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.72); }
.dialogo { padding: var(--e24); display: flex; flex-direction: column; gap: var(--e16); }
.dialogo-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e12); }
.dialogo-cab h2 { font-size: 22px; letter-spacing: -0.027em; }
.dialogo-corpo { color: var(--texto-2); font-size: 14px; overflow-y: auto; max-height: 60vh; display: flex; flex-direction: column; gap: var(--e16); }
.dialogo-corpo h3 { color: var(--papel); font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.dialogo-corpo p { margin: 0; }
.dialogo-rodape { display: flex; justify-content: flex-end; gap: var(--e8); }
.fechar { background: none; border: 0; color: var(--cinza); cursor: pointer; padding: 6px; border-radius: 50%; }
.fechar:hover { color: var(--papel); background: rgba(255,255,255,.06); }

/* ---------- Avisos temporários ---------- */
.avisos { position: fixed; right: var(--e24); bottom: var(--e24); z-index: 80; display: flex; flex-direction: column; gap: var(--e8); }
.aviso { padding: 12px 18px; border-radius: 12px; background: var(--aco); box-shadow: var(--sombra-cartao); font-size: 14px; max-width: 380px; transition: opacity .2s, transform .2s; }
.aviso.sucesso { box-shadow: var(--sombra-cartao), inset 3px 0 0 0 var(--azul); }
.aviso.erro { box-shadow: var(--sombra-cartao), inset 3px 0 0 0 var(--papel); }

/* ---------- Passos (carregar dados) ---------- */
.passos { display: flex; gap: var(--e8); flex-wrap: wrap; }
.passo { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cinza); padding: 6px 14px 6px 6px; border-radius: var(--raio-pilula); box-shadow: var(--sombra-cartao); }
.passo .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ferro); font-family: var(--fonte-mono); font-size: 11px; }
.passo.atual { color: var(--papel); }
.passo.atual .n { background: var(--azul); }
.passo.feito .n { background: var(--papel); color: var(--obsidiana); }

.hash { font-family: var(--fonte-mono); font-size: 11px; color: var(--cinza); word-break: break-all; }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-2-1, .g3 { grid-template-columns: minmax(0, 1fr); }
  .span-2 { grid-column: auto; }
}
@media (max-width: 760px) {
  .topo { padding: 0 var(--e16); gap: var(--e12); height: auto; min-height: var(--altura-topo); flex-wrap: wrap; padding-top: 12px; padding-bottom: 8px; }
  .nav { order: 3; flex-basis: 100%; }
  .utilizador { display: none; }
  .pagina { padding: var(--e32) var(--e16) var(--e56); }
  .cabecalho h1 { font-size: 34px; }
  .g2, .g4 { grid-template-columns: minmax(0, 1fr); }
  .filtros .campo { flex: 1 1 100%; }
  .pares { grid-template-columns: 1fr; gap: 2px; }
  .pares dd { margin-bottom: 10px; }
  .entrada h1 { font-size: 42px; }
  .rodape { padding: var(--e24) var(--e16); }
  .faixa { grid-template-columns: 80px 1fr 90px; }
}

/* Origem do registo (detalhe do negócio) */
.origem { display: flex; flex-wrap: wrap; gap: 8px 40px; font-size: 14px; }
.origem p { margin: 0; }
.origem-r { font-family: var(--fonte-mono); font-size: 12px; letter-spacing: 0.033em; color: var(--cinza); margin-right: 6px; }
.composicao > span { display: block; height: 100%; }

/* ---------- Cadastro: separadores ---------- */
.separadores {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--contorno); margin-top: var(--e8);
}
.separadores::-webkit-scrollbar { display: none; }
.separador {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--cinza); white-space: nowrap;
}
.separador:hover { color: var(--papel); }
.separador.ativo { color: var(--papel); }
.separador.ativo::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--azul); }
.separador .n { font-family: var(--fonte-mono); font-size: 11px; color: var(--cinza); }
.separador .pend { font-family: var(--fonte-mono); font-size: 11px; color: #7fb2ff; padding: 2px 8px; border-radius: var(--raio-pilula); background: rgba(0, 99, 225, 0.18); }
.painel-separador { display: flex; flex-direction: column; gap: var(--e24); }
#adm-msg:empty { display: none; }