/* Portal de envio. Fonte e cores neutras abaixo (a identidade visual vem em /marca.css: família, cores e `--fonte` do brand.yaml); /marca.css (brand.yaml do cliente) é carregado DEPOIS e as substitui. Sem fonte nem recurso externo.
   Escala tipográfica compacta 10,5/11/12/13(base)/14/15/17/20/22; espaçamento em múltiplos de 4/8 px; respeita prefers-reduced-motion. */
:root {
  --cor-primaria: #1f7a5a;
  --cor-escura: #12343b;
  --cor-alerta: #c0394f;
  --cor-aviso: #b7791f;
  --cor-fundo: #f1f5f4;
  --cor-borda: #dbe3e0;
  --cor-texto: #1d2b2a;
  --cor-suave: #55666a;
  --raio: 12px;
  --sombra: 0 1px 2px rgba(18, 52, 59, .05), 0 6px 20px rgba(18, 52, 59, .05);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--fonte, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif); color: var(--cor-texto); background: var(--cor-fundo); line-height: 1.5; font-size: 13px; }
.pular { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--cor-escura); padding: 8px 14px; border-radius: 8px; z-index: 20; }
.pular:focus { left: 8px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* estrutura: janela inteira em coluna; só as listas e o relatório rolam por dentro */
body { height: 100vh; height: 100dvh; overflow: hidden; }
.app { height: 100%; display: flex; flex-direction: column; }
main { flex: 1; min-height: 0; display: flex; flex-direction: column; outline: none; }
.conteudo { flex: 1; min-height: 0; width: 100%; max-width: 1240px; margin: 0 auto; padding: 20px 24px 8px; display: flex; flex-direction: column; }
.conteudo > .cartao { flex: 1; min-height: 0; }
.rodape { flex: none; text-align: center; color: var(--cor-suave); font-size: 11px; padding: 6px 20px 12px; }

/* cabeçalho */
.topo { flex: none; background: var(--cor-escura); color: #fff; }
.topo-conteudo { max-width: 1240px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 20px; }
.logo { height: 40px; width: auto; display: block; }
.topo h1 { font-size: 13px; margin: 0; font-weight: 600; flex: 1; opacity: .9; }
.topo-direita { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--cor-primaria); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; }
.usuario { font-weight: 600; }
.botao-topo { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .55); border-radius: 8px; padding: 5px 14px; font-size: 12px; cursor: pointer; margin: 0; }
.botao-topo:hover { background: rgba(255, 255, 255, .12); }

/* abas */
.abas { flex: none; background: #fff; border-bottom: 1px solid var(--cor-borda); }
.abas-conteudo { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: flex; gap: 4px; }
.aba { background: transparent; color: var(--cor-suave); border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 11px 16px 9px; margin: 0; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.aba:hover:not(:disabled) { color: var(--cor-escura); background: #f6f9f8; }
.aba.atual { color: var(--cor-escura); border-bottom-color: var(--cor-primaria); }
.aba:disabled { opacity: .5; cursor: not-allowed; }

/* cartão em coluna: título, corpo com rolagem própria, ações fixas embaixo */
.cartao { background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra); display: flex; flex-direction: column; overflow: hidden; }
.cartao-topo { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 24px; border-bottom: 1px solid var(--cor-borda); }
.cartao-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; }
.cartao-rodape { flex: none; display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 24px; border-top: 1px solid var(--cor-borda); background: #fafcfb; }
.cartao-miolo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
h2 { margin: 0; font-size: 17px; color: var(--cor-escura); line-height: 1.25; }
h3 { margin: 0; font-size: 13px; color: var(--cor-escura); }
.titulo-lista { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 20px 0 8px; }
.titulo-lista:first-child { margin-top: 0; }
.ajuda { color: var(--cor-suave); font-size: 12px; margin: 2px 0 0; }
.dica { color: var(--cor-suave); font-size: 11px; margin: 6px 0 0; }
.vazio { color: var(--cor-suave); font-size: 12px; padding: 20px; text-align: center; border: 1px dashed var(--cor-borda); border-radius: 10px; background: #fafcfb; margin: 0; }
.vazio-grande { text-align: center; padding: 36px 20px; border: 1px dashed var(--cor-borda); border-radius: 12px; background: #fafcfb; }
.vazio-grande p { margin: 4px 0; }
code { background: #eef3f1; padding: 1px 6px; border-radius: 4px; font-size: 11px; }
.link-botao { background: transparent; border: 0; color: var(--cor-primaria); font-weight: 600; font-size: 12px; cursor: pointer; padding: 0; margin: 0; font-family: inherit; }
.link-botao:hover { text-decoration: underline; }

/* formulário e botões */
label { display: block; margin: 14px 0 5px; font-size: 12px; font-weight: 600; }
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=date], textarea { width: 100%; height: 38px; padding: 0 12px; border: 1px solid #b9c7c3; border-radius: 8px; font-size: 13px; background: #fff; color: var(--cor-texto); font-family: inherit; }
input.codigo { font-size: 20px; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; padding-left: .5em; height: 44px; }
.campo-senha { position: relative; }
.campo-senha input { padding-right: 78px; }
.mostrar { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin: 0; background: transparent; color: var(--cor-primaria); border: 0; padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
section[tabindex="-1"]:focus, main:focus { outline: none; }
input:focus, button:focus-visible, .soltar:focus-visible, a:focus-visible, summary:focus-visible, main:focus-visible, section:focus-visible { outline: 3px solid color-mix(in srgb, var(--cor-primaria) 50%, white); outline-offset: 2px; }
input[aria-invalid=true] { border-color: var(--cor-alerta); }
button, a.botao { display: inline-flex; align-items: center; justify-content: center; height: 36px; background: var(--cor-primaria); color: #fff; border: 1px solid transparent; border-radius: 8px; padding: 0 18px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; margin: 0; font-family: inherit; white-space: nowrap; }
button:hover:not(:disabled), a.botao:hover { filter: brightness(.92); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.grande { min-width: 160px; }
.login-form button.grande, #form-login button.grande { width: 100%; height: 40px; font-size: 14px; margin-top: 18px; }
button.secundario, a.botao.secundario { background: #fff; color: var(--cor-escura); border-color: #b9c7c3; }
button.secundario:hover:not(:disabled), a.botao.secundario:hover { background: #f1f5f4; filter: none; }
button.pequeno { height: 30px; padding: 0 12px; font-size: 12px; }
.link { color: var(--cor-primaria); text-decoration: underline; cursor: pointer; display: inline; font-weight: 600; margin: 0; }
.erro { color: #8c2234; font-size: 13px; margin: 12px 0 0; padding: 8px 12px; background: #fdf0f2; border-left: 4px solid var(--cor-alerta); border-radius: 4px; }
.aviso { color: #6b4a0f; font-size: 12px; margin: 12px 0 0; padding: 8px 12px; background: #fdf6e7; border-left: 4px solid var(--cor-aviso); border-radius: 4px; }
/* ícones (Google Material Icons, sprite próprio) */
.ic { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; vertical-align: middle; }
.girar { animation: gira .9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
button .ic, a.botao .ic { width: 18px; height: 18px; margin-right: 8px; }
button[data-pos=depois] .ic { margin: 0 0 0 8px; }
.ic-titulo { width: 22px; height: 22px; margin-right: 8px; color: var(--cor-primaria); vertical-align: -5px; }
h3 .ic-titulo { width: 18px; height: 18px; vertical-align: -4px; }
.ic-kpi { width: 20px; height: 20px; color: var(--cor-primaria); }
.ic-faixa { width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; }
.aba .ic { width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px; }
.botao-topo .ic { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.remover .ic { margin: 0; width: 18px; height: 18px; }
.mostrar .ic { width: 18px; height: 18px; margin-right: 6px; }

/* cartões de números (início e revisão) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 8px; }
.kpi { border: 1px solid var(--cor-borda); border-radius: 12px; padding: 14px 18px; background: #fafcfb; }
.kpi-topo { display: flex; align-items: center; gap: 8px; }
.kpi .rotulo-kpi { font-size: 11px; color: var(--cor-suave); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.kpi b { display: block; font-size: 22px; line-height: 1.2; color: var(--cor-escura); margin: 4px 0 2px; }
.kpi .sub { font-size: 11px; color: var(--cor-suave); }
.kpi.destaque b { font-size: 15px; }
.kpi.ok b { color: #14613f; }
.kpi.alerta b { color: var(--cor-alerta); }

/* envio de arquivos */
.soltar { display: flex; align-items: center; justify-content: center; gap: 16px; border: 2px dashed #b9c7c3; border-radius: var(--raio); padding: 18px 20px; background: #fafcfb; cursor: pointer; transition: background .15s, border-color .15s; text-align: left; flex: none; }
.soltar p { margin: 0; }
.soltar:hover, .soltar.sobre { border-color: var(--cor-primaria); background: color-mix(in srgb, var(--cor-primaria) 8%, white); }
.soltar.compacto { padding: 8px 16px; }
.soltar.compacto #dica-soltar { display: none; }
.soltar.compacto .icone-soltar { width: 22px; height: 22px; }
.motivo { font-size: 11px; color: #8c2234; margin-top: 2px; }
.icone-soltar { color: var(--cor-primaria); flex: none; width: 32px; height: 32px; }
.corpo-envio, .cartao-corpo:has(.soltar) { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.duas-colunas { flex: 1; min-height: 0; display: grid; grid-template-columns: 3fr 2fr; gap: 28px; margin-top: 16px; }
.coluna { min-height: 0; display: flex; flex-direction: column; }
.lista-flex { flex: 1; min-height: 0; overflow: auto; }
.lateral { overflow-y: auto; }
.rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 12px; }
.tabela th, .tabela td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e8eeec; vertical-align: middle; height: 44px; }
.tabela td > * { vertical-align: middle; }
.tabela td.num { text-align: right; }
.tabela td > .etiqueta { display: flex; width: fit-content; }
.tabela th { color: var(--cor-suave); font-weight: 600; white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; background: #fafcfb; position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--cor-borda); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela tbody tr:hover { background: #f6faf8; }
.remover { background: transparent; color: var(--cor-suave); border: 0; font-size: 15px; line-height: 1; height: 28px; padding: 0 8px; border-radius: 6px; }
.remover:hover:not(:disabled) { color: var(--cor-alerta); background: #fdf0f2; filter: none; }
.lista-check { list-style: none; margin: 12px 0 0; padding: 0; font-size: 12px; }
.lista-check li { padding: 3px 0; display: flex; align-items: center; gap: 8px; color: var(--cor-suave); }
.lista-check li .ic { width: 18px; height: 18px; color: #b9c7c3; }
.lista-check li.ok { color: var(--cor-texto); }
.lista-check li.ok .ic { color: var(--cor-primaria); }

/* etiquetas de situação */
.etiqueta .ic { width: 14px; height: 14px; margin: 0; }
.etiqueta { display: inline-flex; align-items: center; gap: 5px; border-radius: 12px; padding: 2px 10px; font-size: 11px; font-weight: 600; border: 1px solid var(--cor-borda); background: #eef3f1; color: var(--cor-escura); white-space: nowrap; }
.etiqueta.ok { background: #e3f3ec; color: #14613f; border-color: color-mix(in srgb, var(--cor-primaria) 55%, white); }
.etiqueta.aviso { background: #fbf1de; color: #7a5410; border-color: color-mix(in srgb, var(--cor-aviso) 55%, white); }
.etiqueta.erro { background: #fbe6ea; color: #8c2234; border-color: color-mix(in srgb, var(--cor-alerta) 55%, white); }

/* etapas (no cabeçalho do cartão) */
.etapas ol { margin: 0; padding: 0; list-style: none; display: flex; gap: 6px; flex-wrap: wrap; }
.etapas li { display: flex; align-items: center; gap: 8px; color: var(--cor-suave); font-size: 12px; padding-right: 18px; position: relative; }
.etapas li:not(:last-child)::after { content: ""; position: absolute; right: 3px; top: 50%; width: 7px; height: 7px; border-top: 2px solid var(--cor-borda); border-right: 2px solid var(--cor-borda); transform: translateY(-50%) rotate(45deg); }
.etapas .num { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--cor-borda); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: #fff; }
.etapas li.atual { color: var(--cor-escura); font-weight: 700; }
.etapas li.atual .num { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }
.etapas li.feita .num { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.etapas .num .ic { width: 14px; height: 14px; margin: 0; }

/* andamento */
.geral { display: flex; align-items: center; gap: 14px; margin: 10px 0 14px; }
.geral .barra { flex: 1; }
.barra { height: 8px; background: #e4ebe9; border-radius: 4px; overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--cor-primaria); width: 0; transition: width .25s; }
.grande-barra { height: 10px; }
.passos { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.passos li { padding: 8px 0; border-bottom: 1px solid #e8eeec; display: flex; gap: 12px; align-items: center; }
.passos .icone { width: 20px; display: inline-flex; color: var(--cor-suave); flex: none; }
.passos .icone .ic { width: 20px; height: 20px; }
.passos .icone.ok { color: var(--cor-primaria); font-weight: 700; }
.passos .icone.falha { color: var(--cor-alerta); font-weight: 700; }
.passos .rotulo { flex: 1; word-break: break-word; }
.passos .barra { width: 140px; flex: none; }

/* relatório */
.faixa-status { border-radius: 10px; padding: 14px 18px; margin: 0 0 16px; border-left: 6px solid var(--cor-borda); background: #f3f6f5; }
.faixa-status.aceito { background: #e8f5ee; border-color: var(--cor-primaria); }
.faixa-status.aceito_ressalvas { background: #fdf6e7; border-color: var(--cor-aviso); }
.faixa-status.reprovado, .faixa-status.erro { background: #fdf0f2; border-color: var(--cor-alerta); }
.faixa-status strong { display: block; font-size: 15px; color: var(--cor-escura); }
.faixa-status p { margin: 4px 0 0; font-size: 13px; }
.resumo { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 12px; }
.resumo div { border: 1px solid var(--cor-borda); border-radius: 10px; padding: 8px 18px; min-width: 120px; background: #fff;  position: relative; }
.resumo .ic-kpi { position: absolute; right: 12px; top: 12px; }
.resumo .erros .ic-kpi { color: var(--cor-alerta); }
.resumo .alertas .ic-kpi { color: var(--cor-aviso); }
.resumo b { display: block; font-size: 20px; line-height: 1.2; }
.resumo .erros b { color: var(--cor-alerta); }
.resumo .alertas b { color: var(--cor-aviso); }
.grupo { border: 1px solid var(--cor-borda); border-radius: 10px; margin: 10px 0; background: #fff; }
.grupo > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; color: var(--cor-escura); list-style: none; display: flex; gap: 10px; align-items: center; }
.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary .seta { color: var(--cor-suave); transition: transform .15s; margin: 0; }
.grupo[open] > summary .seta { transform: rotate(90deg); }
.grupo .quantos { margin-left: auto; }
.grupo .corpo { padding: 0 14px 10px; }
.subgrupo { font-size: 11px; font-weight: 700; color: var(--cor-suave); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 2px; }
.achado { padding: 6px 0; border-bottom: 1px solid #edf1ef; font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.achado:last-child { border-bottom: 0; }
.achado .onde { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; background: #eef3f1; padding: 1px 7px; border-radius: 4px; }
.achado .texto { flex: 1; min-width: 220px; }
.dentro { color: #14613f; font-weight: 600; }
.fora { color: var(--cor-alerta); font-weight: 600; }
.espera { color: #7a5410; font-weight: 600; }                      /* âmbar: aguardando uma carga que a plataforma faz sozinha (não é erro do arquivo) */
.vazio-ok { color: var(--cor-suave); font-size: 12px; padding: 8px 0; }

/* telas estreitas: a página volta a rolar normalmente */
@media (max-width: 860px) {
  body:not(.login-ativo) { height: auto; overflow: auto; }
  body:not(.login-ativo) .app { height: auto; min-height: 100dvh; }
  main, .conteudo, .conteudo > .cartao { flex: none; min-height: auto; }
  .conteudo { padding: 12px; }
  .cartao-corpo { overflow: visible; }
  .duas-colunas { grid-template-columns: 1fr; gap: 0; }
  .topo-conteudo { flex-wrap: wrap; gap: 10px; }
  .topo h1 { display: none; }
  .passos .barra { width: 80px; }
  .cartao-topo, .cartao-corpo, .cartao-rodape { padding-left: 16px; padding-right: 16px; }
  .abas-conteudo { padding: 0 12px; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* administração (clientes e usuários) */
/* seta própria (ícone expand_more do Material, arquivo local por causa da CSP) com folga de 12 px da borda */
select { appearance: none; -webkit-appearance: none; width: 100%; height: 38px; padding: 0 38px 0 12px; border: 1px solid #b9c7c3; border-radius: 8px; font-size: 13px; color: var(--cor-texto); font-family: inherit; cursor: pointer;
  background: #fff url("/web/vendor/seta-select.svg") no-repeat right 10px center / 20px 20px; text-overflow: ellipsis; }
select:disabled { cursor: not-allowed; opacity: .6; }
.form-linha { display: grid; grid-template-columns: 1fr 1.6fr 1fr auto; gap: 12px 14px; align-items: end; margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--cor-borda); border-radius: 12px; background: #fafcfb; }
.form-linha label { margin: 0 0 4px; }
.form-linha .acao-form { display: flex; gap: 8px; }
#form-usuario { grid-template-columns: 1.4fr 1.6fr 1.2fr auto; }
.filtro { min-width: 220px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.acoes-linha { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.acoes-linha .pequeno .ic { margin-right: 5px; width: 16px; height: 16px; }
/* A classe .acoes-linha (flex) é usada também em <td>: uma célula com display:flex deixa de ser célula e quebra a linha (o divisor corta antes da coluna).
   Dentro da tabela ela volta a ser célula, com os botões alinhados à direita. */
.tabela td.acoes-linha { display: table-cell; text-align: right; white-space: nowrap; }
.tabela td.acoes-linha > button, .tabela td.acoes-linha > a { margin: 0 0 0 6px; }
button.perigo { background: #fdf0f2; border-color: var(--cor-alerta); color: #8c2234; }
.papel { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 10px; background: var(--cor-primaria); color: #fff; margin-left: 6px; }
.credencial { border: 2px solid var(--cor-primaria); border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; background: #f4fbf8; outline: none; }
.credencial h3 { margin-bottom: 4px; }
.rotulo-kpi { font-size: 11px; color: var(--cor-suave); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-top: 8px; }
.tabela td.detalhe { color: var(--cor-suave); font-size: 12px; }
.credencial-grade { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; margin: 12px 0; }
.credencial img { display: block; border: 1px solid var(--cor-borda); border-radius: 8px; background: #fff; padding: 6px; margin-top: 4px; }
.linha-copia { display: flex; gap: 10px; align-items: center; margin-top: 2px; }
.linha-copia code { font-size: 15px; background: #fff; border: 1px solid var(--cor-borda); padding: 6px 10px; border-radius: 6px; user-select: all; }
.estreito-cartao { max-width: 520px; margin: 4vh auto 0; flex: none !important; }
@media (max-width: 860px) { .form-linha, #form-usuario { grid-template-columns: 1fr; } .estreito-cartao { margin-top: 12px; } }

/* entrada: tela cheia (100dvh), sem rolagem da página; barra com a logo, ilustração à esquerda e formulário à direita */
body.login-ativo { overflow: hidden; height: 100vh; height: 100dvh; }
body.login-ativo .rodape { display: none; }
body.login-ativo main { max-width: none; margin: 0; padding: 0; }
.login { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; background: #fff; }
.login[hidden] { display: none !important; }
.login-topo { flex: none; height: 64px; background: var(--cor-escura); display: flex; align-items: center; padding: 0 28px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.login-corpo { flex: 1; min-height: 0; display: flex; }
.login-arte { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 40px; color: #fff; text-align: center;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--cor-primaria) 22%, var(--cor-escura)), var(--cor-escura) 70%); overflow: hidden; }
.arte { width: min(100%, 600px); max-height: 62vh; height: auto; flex: 0 1 auto; }
.arte-titulo { color: #fff; font-size: 20px; margin: 18px 0 6px; }
.arte-texto { color: rgba(255, 255, 255, .78); font-size: 13px; max-width: 460px; margin: 0; }
.login-form { flex: none; width: 480px; max-width: 100%; display: flex; flex-direction: column; background: #fff; box-shadow: -8px 0 24px rgba(18, 52, 59, .12); overflow-y: auto; }
.login-form-corpo { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px 52px; }
.login-form-corpo h2 { font-size: 22px; margin-bottom: 10px; }
.login-rodape { flex: none; margin: 0; padding: 12px 52px 18px; font-size: 10.5px; color: var(--cor-suave); text-align: center; }
@media (max-width: 860px) { .login-arte { display: none; } .login-form { width: 100%; box-shadow: none; } .login-form-corpo, .login-rodape { padding-left: 24px; padding-right: 24px; } }
@media (max-height: 560px) { .arte-texto { display: none; } .login-form-corpo { justify-content: flex-start; } }

/* ilustração (as cores vêm das variáveis da marca) */
.a-grade { fill: none; stroke: #fff; stroke-opacity: .06; stroke-width: 1; }
.a-card rect, .a-painel rect { fill: #fff; fill-opacity: .08; stroke: #fff; stroke-opacity: .3; stroke-width: 1.5; }
.a-icone path { fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.arte text { font-family: var(--fonte, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif); }
.a-texto text { fill: #fff; font-size: 15px; font-weight: 600; }
.a-texto-fraco text { fill: #fff; fill-opacity: .6; font-size: 12px; }
.a-texto-centro text { fill: #fff; fill-opacity: .8; font-size: 13px; text-anchor: middle; }
.a-fluxo path { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: 2; stroke-dasharray: 6 8; animation: fluxo 1.6s linear infinite; }
@keyframes fluxo { to { stroke-dashoffset: -28; } }
.a-hex { fill: var(--cor-primaria); stroke: #fff; stroke-opacity: .85; stroke-width: 2.5; }
.a-cadeado { fill: #fff; }
.a-linhas rect { fill: #fff; fill-opacity: .28; }
.a-ok circle { fill: var(--cor-primaria); }
.a-visto { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a-db path, .a-db ellipse { fill: #fff; fill-opacity: .1; stroke: #fff; stroke-opacity: .85; stroke-width: 2; }
.a-barras rect { fill: var(--cor-primaria); fill-opacity: .9; }

/* ETL automatizado */
#form-etl { grid-template-columns: 1fr 1fr 1.4fr 1.2fr 1fr auto; }
.passos-etl { margin: 8px 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.passos-etl .detalhe { margin-top: 2px; color: var(--cor-texto-suave, #52625f); word-break: break-word; }

/* Página de ativação do convite (Req. 31) */
body.ativar { min-height: 100dvh; background: var(--cor-fundo, #f2f6f4); display: flex; flex-direction: column; }
.ativar-topo { flex: none; height: 64px; background: var(--cor-escura); display: flex; align-items: center; padding: 0 28px; }
.ativar-corpo { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 28px 16px 48px; }
.ativar-cartao { width: 100%; max-width: 520px; background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(18, 52, 59, .12); padding: 28px 32px 32px; }
.ativar-cartao h1 { font-size: 22px; margin: 0 0 8px; }
.ativar-cartao .passo { font-size: 15px; margin: 26px 0 8px; display: flex; align-items: center; gap: 10px; }
.ativar-cartao .passo .num { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--cor-primaria); color: #fff; font-size: 13px; align-items: center; justify-content: center; flex: none; }
.ativar-qr { display: flex; justify-content: center; margin: 12px 0; }
.ativar-qr img { border: 1px solid #d7e2e0; border-radius: 8px; padding: 8px; background: #fff; }
.ativar-manual { font-size: 13px; margin: 4px 0 8px; }
.ativar-manual .mono { word-break: break-all; letter-spacing: .5px; }
.ativar-cartao button.grande { width: 100%; height: 42px; font-size: 15px; margin-top: 18px; }
.ativar-cartao .botao { display: inline-block; margin-top: 12px; }
@media (max-width: 560px) { .ativar-cartao { padding: 22px 18px 26px; } }

/* Modais de cadastro e edição da administração (Req. 21.6) */
.topo-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
dialog.modal { border: 0; border-radius: 14px; padding: 0; width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); color: var(--cor-texto); background: #fff;
  box-shadow: 0 24px 64px rgba(18, 52, 59, .38); overflow: hidden; }
dialog.modal[open] { display: flex; flex-direction: column; animation: modal-entra .16s ease-out; }
dialog.modal::backdrop { background: rgba(18, 52, 59, .55); }
@keyframes modal-entra { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.modal[open] { animation: none; } }
.modal-form { display: flex; flex-direction: column; min-height: 0; max-height: calc(100dvh - 32px); margin: 0; }
.modal-topo { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--cor-borda); background: #fafcfb; }
.modal-topo h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.modal-fechar { height: 32px; width: 32px; padding: 0; margin: 0; background: transparent; color: var(--cor-escura); border: 0; border-radius: 8px; }
.modal-fechar:hover:not(:disabled) { background: #e8f0ee; filter: none; }
.modal-fechar .ic { width: 20px; height: 20px; margin: 0; }
.modal-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 20px 12px; }
.modal-rodape { flex: none; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--cor-borda); background: #fafcfb; }
.campo { margin-bottom: 4px; }
.campo label { margin-top: 12px; }
.campo select, .campo input[type=email] { width: 100%; }
.campo .opcional { font-weight: 400; color: var(--cor-suave); }
.erro-campo { color: #8c2234; font-size: 12px; margin: 4px 0 0; }
.campo select[aria-invalid=true] { border-color: var(--cor-alerta); }
.modal-secao { border-top: 1px solid var(--cor-borda); padding-top: 12px; margin-top: 16px; }
.modal-secao h3 { font-size: 13px; margin: 0 0 4px; }
.modal-corpo .erro, .modal-corpo .aviso { margin-top: 14px; }
.resumo { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0 4px; font-size: 13px; }
.resumo dt { color: var(--cor-suave); font-weight: 600; }
.resumo dd { margin: 0; overflow-wrap: anywhere; }
.acoes-linha.esq { justify-content: flex-start; margin-top: 8px; }
@media (max-width: 560px) {
  dialog.modal { width: 100vw; max-width: 100vw; max-height: 100dvh; border-radius: 0; }
  .modal-form { max-height: 100dvh; }
  .modal-rodape { position: sticky; bottom: 0; }
}
dialog.modal.largo { width: min(780px, calc(100vw - 24px)); }
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.grade .larga { grid-column: 1 / -1; }
.contato { border: 1px solid var(--cor-borda); border-radius: 10px; padding: 2px 14px 10px; margin: 12px 0 0; min-width: 0; }
.contato legend { font-size: 12px; font-weight: 600; padding: 0 6px; }
.contato > .dica { margin: 0 0 2px; }
.obrig { color: var(--cor-alerta); font-weight: 700; }
textarea { width: 100%; min-height: 72px; padding: 8px 12px; resize: vertical; line-height: 1.45; }
.modal-secao.primeira { border-top: 0; margin-top: 6px; padding-top: 0; }
@media (max-width: 560px) { .grade { grid-template-columns: minmax(0, 1fr); } }

/* Ações da linha: botões só com ícone, sem contorno; o fundo aparece ao passar o mouse e ao receber foco (o nome fica no title e no aria-label) */
.tabela th.acoes { text-align: right; }
button.icone { width: 32px; height: 32px; padding: 0; background: transparent; color: var(--cor-escura); border: 0; border-radius: 8px; }
button.icone .ic { width: 16px; height: 16px; margin: 0; }
button.icone:hover:not(:disabled) { background: #e3ece9; filter: none; }
button.icone:focus-visible:not(:disabled) { background: #cfe0db; outline: 0; filter: none; }      /* foco por teclado: sem contorno, mas o fundo mais forte mantém o foco visível */
button.icone.perigo { background: var(--cor-alerta); color: #fff; }
button.icone.perigo:hover:not(:disabled), button.icone.perigo:focus-visible:not(:disabled) { background: var(--cor-alerta); filter: brightness(.92); }   /* sem isso o hover claro apaga o fundo vermelho da confirmação */
button.icone.inativo { opacity: .45; cursor: not-allowed; }
button.icone.inativo:hover:not(:disabled), button.icone.inativo:focus-visible:not(:disabled) { background: transparent; }
.tooltip { position: fixed; z-index: 1000; max-width: 280px; padding: 6px 10px; background: var(--cor-escura); color: #fff; border-radius: 6px; font-size: 12px; line-height: 1.35; pointer-events: none;
  box-shadow: 0 4px 14px rgba(18, 52, 59, .3); }