/* Veyron - estilos base. Sem dependencias externas (a politica de seguranca so permite arquivos do proprio sistema). */
:root {
  /* Identidade "Grafite e dourado" (opcao 1, aprovada em 2026-10-23). Contrastes em docs/DESIGN.md. */
  --fundo: #f4f4f3;
  --superficie: #ffffff;
  --borda: #e3e3e1;
  --borda-controle: #8d8f96;   /* bordas de campos: 3,23:1 sobre branco */
  --texto: #1A1B1F;
  --texto-suave: #5a5b61;
  --primaria: #1A1B1F;         /* botoes e links: grafite escuro */
  --primaria-escura: #0B0B0C;
  --primaria-suave: #ececec;
  --marca-dourado: #D4AF37;    /* SO marca: filete do menu ativo e destaque do saldo. Nunca texto sobre fundo claro (2,10:1) nem estado */
  --marca-creme: #F5E6C8;
  --lateral-fundo: #0B0B0C;
  --lateral-texto: #c9cacd;
  --lateral-realce: #a9aab0;   /* filete cinza de hover/foco no menu (7,11:1 sobre o hover). Nao e o dourado do ativo */
  --beta: #5b3fc4;             /* lilas: SO o selo "Beta" (6,20:1 sobre --beta-suave). Nao e estado */
  --beta-suave: #f1edff;
  --beta-borda: #c9bdf5;
  --beta-escuro: #d4ccff;      /* selo Beta no menu escuro (13,00:1 sobre #0B0B0C) */
  --beta-borda-escuro: #8f80d9;
  --topo-fundo: #1A1B1F;
  --topo-texto: #ffffff;
  --topo-suave: #a9aab0;
  --ok: #1d7a46;
  --ok-suave: #e5f4ec;
  --ok-borda: #a6d9bb;         /* borda decorativa das etiquetas verdes com contorno */
  --aviso: #b54708;            /* laranja: distinto do dourado da marca */
  --aviso-suave: #fff1e5;
  --aviso-borda: #f5c7a1;
  --ok-sobre-escuro: #75e0a7;  /* verde claro: so o visto "Pronto para aplicar" na barra escura (10,63:1 sobre #1A1B1F) */
  --erro: #b42318;
  --erro-suave: #fdecea;
  --info: #175cd3;             /* azul de estado: "a vencer" (5,50:1 sobre --info-suave). Nao confundir com --serie-1 (graficos) */
  --info-suave: #eff6ff;
  --info-borda: #b2ccff;
  --vencido: #912018;          /* vermelho escuro de "vencido" (7,97:1 sobre --vencido-suave) */
  --vencido-suave: #fef3f2;
  --vencido-borda: #fecdca;
  --raio: 8px;
  --lateral: 240px;
  --conteudo-max: 1680px;      /* = 1920px de monitor - menu lateral: monitor Full HD usado inteiro; so sobra margem em telas maiores */
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--texto);
  background: var(--fundo);
}
h1 { font-size: 1.5rem; margin: 0; line-height: 1.25; }
h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
a { color: var(--primaria); }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--primaria-suave); padding: .1em .35em; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Estrutura -------------------------------------------------------- */
.layout { display: flex; min-height: 100vh; }
.lateral {
  width: var(--lateral); flex-shrink: 0; background: var(--lateral-fundo); color: #fff;
  padding: 20px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topo {
  display: flex; align-items: center; gap: 16px; padding: 12px 24px;
  background: var(--topo-fundo); color: var(--topo-texto); border-bottom: 1px solid var(--primaria-escura);
}
.topo__usuario { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.topo__nome small { color: var(--topo-suave); }
.topo__org { font-weight: 600; }
.topo .link-discreto { color: var(--marca-creme); }
.topo .botao--secundario { background: transparent; color: var(--topo-texto); border-color: var(--topo-suave); }
.topo .botao--secundario:hover { background: rgba(255, 255, 255, .1); }
.topo :focus-visible, .lateral :focus-visible, .heroi :focus-visible { outline-color: var(--marca-dourado); }
.conteudo { padding: 24px; max-width: var(--conteudo-max); width: 100%; }

.marca { display: flex; align-items: center; padding: 0 4px 20px; }
.marca--centro { justify-content: center; padding: 0; }
/* Logo em PNG (provisorio ate chegar o vetorial); width/height no HTML evitam salto de layout. */
.marca__logo { display: block; width: 188px; max-width: 100%; height: auto; }
.marca__logo--grande { width: 240px; }

.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* Itens e subitens. Passar o mouse (ou o foco do teclado): texto branco, fundo leve e um filete CINZA curto que
   cresce do centro. O filete DOURADO, cheio, fica so para o item ativo ("estou aqui"). */
.menu__item, .menu__subitem {
  position: relative; display: block; border-radius: 6px; color: var(--lateral-texto); text-decoration: none;
  border-left: 3px solid transparent; transition: background-color .15s ease, color .15s ease;
}
.menu__item { padding: 10px 12px 10px 11px; }
.menu__subitem { padding: 7px 10px 7px 9px; font-size: .9rem; }
.menu__item::before, .menu__subitem::before {
  content: ""; position: absolute; left: -3px; top: 25%; bottom: 25%; width: 3px; border-radius: 2px;
  background: var(--lateral-realce); transform: scaleY(0); transition: transform .18s ease;
}
.menu__item:hover, .menu__item:focus-visible, .menu__subitem:hover, .menu__subitem:focus-visible {
  background: rgba(255, 255, 255, .08); color: #fff;
}
.menu__item:hover::before, .menu__item:focus-visible::before,
.menu__subitem:hover::before, .menu__subitem:focus-visible::before { transform: scaleY(1); }
.menu__item--ativo, .menu__subitem--ativo {
  background: rgba(255, 255, 255, .08); color: #fff; font-weight: 600; border-left-color: var(--marca-dourado);
}
.menu__item--ativo::before, .menu__subitem--ativo::before { display: none; }

/* Grupo com subitens (Dashboard Geral): o link leva ao dashboard; o botao com a seta so abre e fecha. */
.menu__grupo-topo { position: relative; }
.menu__grupo-topo .menu__item { padding-right: 44px; }
.menu__alternar {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent;
  color: var(--lateral-texto); cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.menu__alternar::before {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translate(-1px, 0) rotate(-45deg); transition: transform .2s ease; /* fechado: aponta para a direita */
}
.menu__grupo--aberto .menu__alternar::before { transform: translate(0, -2px) rotate(45deg); } /* aberto: para baixo */
.menu__alternar:hover, .menu__alternar:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; }
html:not(.js) .menu__alternar { display: none; } /* sem JavaScript o grupo fica sempre aberto */

/* Subitens (dashboards de cada area): recuados, com um fio guia a esquerda. Recolhem com grid 0fr -> 1fr. */
.menu__sub-envoltorio { display: grid; grid-template-rows: 1fr; }
.menu__sub {
  list-style: none; margin: 0 0 0 14px; padding: 0 0 0 8px; border-left: 1px solid rgba(255, 255, 255, .16);
  display: grid; gap: 1px; min-height: 0; overflow: hidden;
}
/* Margens nos itens (e nao na lista): dentro do recolhimento elas somem junto. */
.menu__sub > li:first-child { margin-top: 2px; }
.menu__sub > li:last-child { margin-bottom: 6px; }
.js .menu__grupo:not(.menu__grupo--aberto) .menu__sub-envoltorio { grid-template-rows: 0fr; visibility: hidden; }
.js .menu__grupo:not(.menu__grupo--aberto) .menu__sub > li { opacity: 0; transform: translateY(-4px); }
/* Animacao so depois de um clique (o JavaScript poe --animado): ao carregar a pagina nada "pisca". */
.menu__grupo--animado .menu__sub-envoltorio { transition: grid-template-rows .2s ease, visibility 0s linear .2s; }
.menu__grupo--animado.menu__grupo--aberto .menu__sub-envoltorio { transition: grid-template-rows .2s ease, visibility 0s; }
.menu__grupo--animado .menu__sub > li { transition: opacity .12s ease, transform .12s ease; }
/* Ao abrir, efeito cascata: cada subitem entra um pouco depois do anterior. */
.menu__grupo--animado.menu__grupo--aberto .menu__sub > li { transition-duration: .22s; transition-delay: 40ms; }
.menu__grupo--animado.menu__grupo--aberto .menu__sub > li:nth-child(2) { transition-delay: 90ms; }
.menu__grupo--animado.menu__grupo--aberto .menu__sub > li:nth-child(3) { transition-delay: 140ms; }
.menu__grupo--animado.menu__grupo--aberto .menu__sub > li:nth-child(n+4) { transition-delay: 190ms; }

/* Selo "Beta" no menu: contorno lilas (cor exclusiva de "Beta"; o contador laranja e cheio). */
.menu__selo {
  flex-shrink: 0; padding: 0 7px; border: 1px solid var(--beta-borda-escuro); border-radius: 999px;
  color: var(--beta-escuro); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.6;
}
/* Selo "Beta" ao lado do titulo da pagina (fundo claro). */
.selo-beta {
  display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 9px; border-radius: 999px;
  border: 1px solid var(--beta-borda); background: var(--beta-suave); color: var(--beta);
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5;
  position: relative; top: -2px;
}

.botao-menu { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.botao-menu__barras, .botao-menu__barras::before, .botao-menu__barras::after {
  display: block; width: 22px; height: 2px; background: var(--topo-texto); position: relative; content: "";
}
.botao-menu__barras::before { position: absolute; top: -7px; }
.botao-menu__barras::after { position: absolute; top: 7px; }
.fundo-menu { position: fixed; inset: 0; background: rgba(16, 24, 40, .45); z-index: 15; }

/* ---- Blocos ----------------------------------------------------------- */
.cabecalho { margin-bottom: 20px; }
.cabecalho--acoes { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.subtitulo { color: var(--texto-suave); margin: 4px 0 0; }
.trilha { font-size: .85rem; color: var(--texto-suave); text-decoration: none; }
.trilha::after { content: " /"; }

.painel {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 20px; box-shadow: var(--sombra); margin-bottom: 20px;
}
.painel--vazio { max-width: 720px; }
.painel--vazio p { color: var(--texto-suave); }
.selo {
  display: inline-block; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--primaria); background: var(--primaria-suave); padding: 2px 8px; border-radius: 999px; margin-bottom: 10px;
}
.grade-cartoes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.cartao-link {
  display: block; padding: 20px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  text-decoration: none; color: inherit; box-shadow: var(--sombra);
}
.cartao-link:hover { border-color: var(--primaria); }
.cartao-link p { color: var(--texto-suave); margin: 0; }

/* ---- Formularios ------------------------------------------------------ */
.formulario { display: grid; gap: 14px; max-width: 560px; }
.campo { display: grid; gap: 4px; }
.campo label { font-weight: 600; font-size: .9rem; }
.campo--caixa { display: flex; align-items: center; gap: 8px; }
.campo--caixa label { font-weight: 400; }
input[type=text], input[type=password], input[type=email], input[type=date], select {
  width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--borda-controle); border-radius: 6px; background: #fff; color: var(--texto);
}
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--primaria); outline-offset: 1px; }
.campo--erro input, .campo--erro select { border-color: var(--erro); }
.ajuda { color: var(--texto-suave); }
.ajuda ul { margin: 4px 0 0; padding-left: 18px; }
.erro { color: var(--erro); }
.obrigatorio { color: var(--erro); }
.acoes { display: flex; align-items: center; gap: 16px; }
.nota { color: var(--texto-suave); font-size: .9rem; }
.perfis { margin: 0; font-size: .9rem; }
.perfis dt { font-weight: 600; }
.perfis dd { margin: 0 0 8px; color: var(--texto-suave); }

.botao {
  display: inline-block; font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--primaria); background: var(--primaria); color: #fff; text-decoration: none; text-align: center;
}
.botao:hover { background: var(--primaria-escura); }
.botao--secundario { background: #fff; color: var(--primaria); }
.botao--secundario:hover { background: var(--primaria-suave); }
.botao--largo { width: 100%; }
/* Links em grafite: o sublinhado discreto os distingue do texto comum. */
.link-discreto {
  color: var(--primaria); font-weight: 500; text-decoration: underline; text-decoration-color: var(--borda-controle);
  text-underline-offset: 3px;
}
.link-discreto:hover { text-decoration-color: currentColor; }
.link-botao {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--primaria); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--borda-controle); text-underline-offset: 3px;
}
.link-botao:hover { text-decoration-color: currentColor; }
.link-botao--perigo { color: var(--erro); }

.filtros { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.filtros select { width: auto; }
/* auto-fill (so acima de 860px; no celular os campos ficam como antes): em tela larga os campos mantem largura de campo (sobram colunas vazias a direita) em vez de esticar. */
.filtros--grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; }
/* Desktop: campos em linha que crescem ate ocupar a largura do painel; busca ganha mais espaco, datas menos.
   min-width: 0 impede que um campo largo (lista, data) invada o vizinho. */
@media (min-width: 861px) {
  .filtros--grade { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; }
  .filtros--grade > .campo { flex: 1 1 190px; min-width: 0; }
  .filtros--grade > .campo:has(input[type=text]) { flex: 2 1 260px; }
  .filtros--grade > .campo:has(input[type=date]) { flex: 1 1 160px; max-width: 220px; }
  .filtros--grade > .campo--botao { flex: 0 0 auto; }
  .filtros--grade .botao { white-space: nowrap; padding-left: 22px; padding-right: 22px; }
}
.filtros--grade > * { min-width: 0; }
.filtros--grade input, .filtros--grade select { height: 42px; }
.campo--botao { align-self: end; }

/* ---- Alertas e etiquetas --------------------------------------------- */
.alerta { padding: 10px 14px; border-radius: 6px; border: 1px solid; }
.alerta--erro { background: var(--erro-suave); border-color: #f5c2bd; color: var(--erro); }
.alerta--aviso { background: var(--aviso-suave); border-color: var(--aviso-borda); border-left: 4px solid var(--aviso); color: var(--aviso); margin-bottom: 14px; }
.mensagens { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.mensagem { padding: 10px 14px; border-radius: 6px; background: var(--primaria-suave); }
.mensagem--success { background: var(--ok-suave); color: var(--ok); }
.mensagem--error { background: var(--erro-suave); color: var(--erro); }
.etiqueta { display: inline-block; font-size: .8rem; padding: 2px 8px; border-radius: 999px; background: var(--primaria-suave); color: var(--texto-suave); }
/* Sinal antes da palavra (significado nunca so pela cor). Escapes CSS: o arquivo precisa continuar ASCII. */
.etiqueta::before { content: var(--sinal); content: var(--sinal) / ""; margin-right: .3em; font-weight: 800; }
.etiqueta--em_aberto, .etiqueta--contato-promessa { --sinal: "\25CB"; }                     /* circulo vazio */
.etiqueta--parcial { --sinal: "\25D0"; }                                                   /* meio circulo */
.etiqueta--quitado, .etiqueta--rec-validado, .etiqueta--ok, .etiqueta--alterado,
.etiqueta--analisada, .etiqueta--aplicada { --sinal: "\2713"; }                            /* visto */
.etiqueta--invalido { --sinal: "!"; }
.etiqueta--rec-informado_origem { --sinal: "?"; }
.etiqueta--aviso, .etiqueta--ambiguo, .etiqueta--duplicidade, .etiqueta--divergencia { --sinal: "\25B3"; } /* triangulo */
.etiqueta--rejeitada, .etiqueta--rec-estornado, .etiqueta--contato-recusa { --sinal: "\2715"; }        /* x */
.etiqueta--cancelado, .etiqueta--substituido, .etiqueta--rec-rejeitado, .etiqueta--descartada { --sinal: "\2013"; }
.etiqueta--novo { --sinal: "+"; }
.etiqueta--inalterado { --sinal: "="; }
.etiqueta--ok { background: var(--ok-suave); color: var(--ok); }
.etiqueta--aviso { background: var(--aviso-suave); color: var(--aviso); }
.passos { padding-left: 20px; display: grid; gap: 10px; }
.qr-code { margin: 10px 0 6px; width: 200px; max-width: 100%; background: #fff; border: 1px solid var(--borda); border-radius: 6px; padding: 6px; }
.qr-code svg { display: block; width: 100%; height: auto; }
.chave { word-break: break-all; }
.codigos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.codigos code { display: block; text-align: center; padding: 6px; font-size: 1rem; }
.senha-temporaria code { font-size: 1.5rem; padding: .3em .6em; letter-spacing: .05em; user-select: all; }
.codigo { color: var(--texto-suave); display: block; }

/* ---- Conciliador ------------------------------------------------------ */
.grade-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.resumo-item {
  display: block; padding: 12px 14px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  font-size: 1.5rem; font-weight: 700; color: var(--texto); text-decoration: none; box-shadow: var(--sombra);
}
.resumo-item span { display: block; font-size: .8rem; font-weight: 500; color: var(--texto-suave); }
.resumo-item--ativo { border-color: var(--primaria); }
.resumo-item--pendentes, .resumo-item--ambiguo, .resumo-item--duplicidade, .resumo-item--divergencia { color: var(--aviso); }
.resumo-item--invalido { color: var(--erro); }
.etiqueta--novo { background: var(--primaria-suave); color: var(--primaria); }
/* Importacao aplicada (gravou dados) em verde; conferida sem alteracoes (nada gravado) em azul. */
.etiqueta--aplicada { background: var(--ok-suave); color: var(--ok); }
.etiqueta--inalterado { background: var(--primaria-suave); }
.etiqueta--alterado, .etiqueta--analisada { background: var(--ok-suave); color: var(--ok); }
.etiqueta--ambiguo, .etiqueta--duplicidade, .etiqueta--divergencia { background: var(--aviso-suave); color: var(--aviso); }
.etiqueta--invalido, .etiqueta--rejeitada { background: var(--erro-suave); color: var(--erro); }
.abas { display: flex; gap: 4px; flex-wrap: wrap; margin: 16px 0 10px; }
.aba { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--texto-suave); border: 1px solid var(--borda); background: var(--superficie); font-size: .9rem; }
.aba--ativa { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.tabela--compacta td, .tabela--compacta th { padding: 8px 10px; font-size: .9rem; }
.mensagem-linha { color: var(--aviso); }
.diferenca s { color: var(--texto-suave); }
.form-decisao { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.form-decisao select { width: auto; padding: 6px 8px; }
.form-decisao .botao { padding: 6px 10px; }
.lote { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Conciliador: cores da previa (?v=22) -------------------------------
   Familias, cada uma com sinal + palavra (a cor nunca fala sozinha):
   decisao (acao do usuario) = laranja --aviso, destacado; invalido (fica de fora) = vermelho escuro --vencido,
   discreto; novo = verde; alterado = azul; inalterado = cinza. So nesta tela: as mesmas classes de resumo
   (--pendentes, --invalido) e a etiqueta "Ausente na planilha" (--ambiguo) seguem como antes nas outras telas. */
.grade-resumo--previa .resumo-item { border-left: 4px solid var(--borda); }
.grade-resumo--previa .resumo-item--pendentes {
  background: var(--aviso-suave); border-color: var(--aviso-borda); border-left-color: var(--aviso); color: var(--aviso);
}
.grade-resumo--previa .resumo-item--pendentes span { color: var(--aviso); font-weight: 600; }
.grade-resumo--previa .resumo-item--ambiguo, .grade-resumo--previa .resumo-item--duplicidade,
.grade-resumo--previa .resumo-item--divergencia { border-left-color: var(--aviso); color: var(--aviso); }
.grade-resumo--previa .resumo-item--invalido { border-left-color: var(--vencido); color: var(--vencido); }
.grade-resumo--previa .resumo-item--novo { border-left-color: var(--ok); color: var(--ok); }
.grade-resumo--previa .resumo-item--alterado { border-left-color: var(--info); color: var(--info); }
.grade-resumo--previa .resumo-item--inalterado { border-left-color: var(--borda-controle); }
.grade-resumo--previa .resumo-item--ativo { border-color: var(--primaria); border-left-color: var(--primaria); }
.grade-resumo--previa .resumo-item--pendentes.resumo-item--ativo { border-left-color: var(--aviso); }

/* Etiquetas da coluna "Classificacao" (todas com borda fina, mesma altura: 23px). */
.tabela--previa .etiqueta { white-space: nowrap; }
.etiqueta--novo, .etiqueta--alterado, .etiqueta--inalterado, .etiqueta--invalido,
.tabela--previa .etiqueta--ambiguo, .tabela--previa .etiqueta--duplicidade, .tabela--previa .etiqueta--divergencia {
  border: 1px solid; padding: 1px 8px;
}
.etiqueta.etiqueta--novo { background: var(--ok-suave); color: var(--ok); border-color: var(--ok-borda); }
.etiqueta.etiqueta--alterado { --sinal: "\270E"; background: var(--info-suave); color: var(--info); border-color: var(--info-borda); } /* lapis */
.etiqueta.etiqueta--inalterado { background: var(--primaria-suave); color: var(--texto-suave); border-color: var(--borda); }
.etiqueta.etiqueta--invalido { --sinal: "\2715"; background: var(--vencido-suave); color: var(--vencido); border-color: var(--vencido-borda); } /* x: nao entra */
.tabela--previa .etiqueta--ambiguo, .tabela--previa .etiqueta--duplicidade, .tabela--previa .etiqueta--divergencia {
  border-color: var(--aviso-borda); font-weight: 600;
}
/* Linha que ainda pede decisao: filete laranja na 1a celula; mensagens no tom da familia da linha. */
.tabela--previa tr.linha--pendente td:first-child { box-shadow: inset 4px 0 0 var(--aviso); }
.tabela--previa .mensagem-linha { color: var(--texto); }
.tabela--previa .linha-previa--invalido .mensagem-linha { color: var(--vencido); }
.tabela--previa .linha-previa--ambiguo .mensagem-linha, .tabela--previa .linha-previa--duplicidade .mensagem-linha,
.tabela--previa .linha-previa--divergencia .mensagem-linha { color: var(--aviso); }

/* Barra de aplicar: pilula escura e compacta fixa no rodape (mesmo padrao da barra de selecao).
   Estado em texto curto + Descartar + Aplicar. O aviso de confirmacao (app.js) abre acima da barra. */
.barra-aplicar {
  position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap;
  width: fit-content; max-width: 100%; margin: 16px 0 0 auto; padding: 8px 8px 8px 18px;
  background: var(--primaria); color: #fff; border-radius: 999px; box-shadow: 0 8px 24px rgba(16, 24, 40, .22);
}
.barra-aplicar__estado { margin: 0; font-weight: 600; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.barra-aplicar__estado a { color: #fff; text-underline-offset: 3px; }
.barra-aplicar__contador {
  min-width: 24px; padding: 1px 8px; border-radius: 999px; background: var(--aviso); color: #fff;
  font-size: .85rem; font-weight: 700; text-align: center; line-height: 1.5;
}
.barra-aplicar__pronto { color: var(--ok-sobre-escuro); font-weight: 800; }
.barra-aplicar__acoes { display: flex; align-items: center; gap: 12px; }
.barra-aplicar form { margin: 0; }
.barra-aplicar .botao { background: #fff; color: var(--primaria); border-color: #fff; border-radius: 999px; padding: 8px 18px; }
.barra-aplicar .botao:hover:not([disabled]) { background: var(--primaria-suave); }
.barra-aplicar .link-botao { color: var(--topo-suave); font-size: .9rem; padding: 4px; text-decoration-color: currentColor; }
.barra-aplicar .link-botao:hover { color: #fff; }
.barra-aplicar :focus-visible { outline-color: var(--marca-dourado); }
.barra-aplicar .confirmacao {
  position: absolute; right: 0; bottom: calc(100% + 8px); width: max-content; max-width: min(420px, 100%); margin: 0;
  box-shadow: var(--sombra);
}
@media (max-width: 860px) {
  .barra-aplicar { width: 100%; border-radius: var(--raio); bottom: 8px; justify-content: space-between; padding: 8px 8px 8px 14px; }
  .barra-aplicar__acoes { margin-left: auto; }
  .grade-resumo--previa { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .tabela--previa tr.linha--pendente { border-left: 4px solid var(--aviso); }
  .tabela--previa tr.linha--pendente td:first-child { box-shadow: none; }
  .barra-aplicar .botao, .barra-aplicar .link-botao { min-height: 44px; }
  .barra-aplicar .confirmacao { left: 0; width: auto; max-width: none; }
}
/* Texto so para leitores de tela. */
.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.botao[disabled] { opacity: .45; cursor: not-allowed; }
.confirmacao {
  flex-basis: 100%; margin-top: 8px; padding: 8px 12px; border-radius: 6px; font-size: .9rem;
  background: var(--aviso-suave); color: var(--aviso); border: 1px solid var(--aviso-borda);
}
.opcao { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.opcoes-linha { display: flex; gap: 14px; flex-wrap: wrap; }
fieldset.campo { border: 0; padding: 0; margin: 0; }
fieldset.campo legend { font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.lista-nota { padding-left: 18px; margin: 0; }
input[type=file] { font: inherit; }

/* ---- Financeiro ------------------------------------------------------- */
.resumo-item--texto { font-size: 1.15rem; }
/* Destaque claro: o dourado entra so como filete (como texto sobre branco reprovaria). */
.resumo-item--destaque { border-left: 4px solid var(--marca-dourado); color: var(--texto); }
/* Ficha do paciente: faixa lateral pelo significado (azul = em aberto, verde = recebido, vermelho = vencido) */
.resumo-item--faixa-info { border-left: 4px solid var(--info); }
.resumo-item--faixa-ok { border-left: 4px solid var(--ok); }
.resumo-item--faixa-vencido { border-left: 4px solid var(--vencido); }
.resumo-item--com-vencido { color: var(--vencido); }
.etiqueta--em_aberto { background: var(--primaria-suave); color: #3B3C41; }
.etiqueta--parcial { background: var(--aviso-suave); color: var(--aviso); }
.etiqueta--quitado, .etiqueta--rec-validado { background: var(--ok-suave); color: var(--ok); }
.etiqueta--cancelado, .etiqueta--substituido, .etiqueta--rec-rejeitado { background: var(--primaria-suave); color: var(--texto-suave); }
.etiqueta--rec-informado_origem { background: var(--aviso-suave); color: var(--aviso); }
.etiqueta--rec-estornado { background: var(--erro-suave); color: var(--erro); }
.etiqueta--contato-promessa { background: var(--primaria-suave); color: var(--primaria); }
.etiqueta--contato-recusa { background: var(--erro-suave); color: var(--erro); }
/* Situacao do titulo pela data de hoje: uma etiqueta so (a vencer / vence hoje / vencido) + detalhe embaixo.
   Borda de 1px no tom da familia: so contorno decorativo (o texto e o sinal carregam o significado). */
.etiqueta--prazo-a_vencer, .etiqueta--prazo-vence_hoje, .etiqueta--prazo-vencido { border: 1px solid; padding: 1px 8px; }
.etiqueta--prazo-a_vencer { --sinal: "\25CB"; background: var(--info-suave); color: var(--info); border-color: var(--info-borda); }       /* circulo vazio: ainda no prazo */
.etiqueta--prazo-vence_hoje { --sinal: "\25C9"; background: var(--aviso-suave); color: var(--aviso); border-color: var(--aviso-borda); } /* alvo: e hoje */
.etiqueta--prazo-vencido { --sinal: "!"; background: var(--vencido-suave); color: var(--vencido); border-color: var(--vencido-borda); font-weight: 600; }
.situacao { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.situacao .etiqueta { white-space: nowrap; }
.situacao__detalhe { font-size: .8rem; line-height: 1.3; color: var(--texto-suave); }
@media (max-width: 860px) {
  /* No cartao do celular: etiqueta e detalhe na mesma linha (quebra so se faltar espaco). */
  .situacao { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 8px; }
}
.atraso { font-weight: 600; }
.atraso--medio { color: var(--aviso); }
.atraso--grave { color: var(--erro); }
details.acao, details.bloco-form { margin: 4px 0; }
details > summary { list-style: none; cursor: pointer; display: inline-block; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary { margin-bottom: 10px; }
.bloco-form { margin-top: 14px; }
.formulario--compacto { min-width: 240px; gap: 8px; background: #fafbfc; border: 1px solid var(--borda); border-radius: 6px; padding: 10px; }
.acoes-recebimento { min-width: 150px; }
.contato { border-left: 3px solid var(--borda); padding: 4px 0 4px 12px; margin-bottom: 14px; }
.contato p { margin: 4px 0; }
.linha-do-tempo { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.linha-do-tempo li { border-left: 3px solid var(--primaria-suave); padding-left: 10px; }
textarea { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--borda-controle); border-radius: 6px; }

/* ---- Pacientes -------------------------------------------------------- */
.grade-tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.grade-tres h3 { font-size: .95rem; margin: 0 0 6px; }
h3 { font-size: 1rem; }

/* ---- Dashboard e graficos --------------------------------------------- */
:root {
  --serie-1: #2a78d6;          /* paleta validada, posicao 1 (azul) */
  --grafico-grade: #e1e0d9;
  --grafico-base: #c3c2b7;
  --grafico-texto: #52514e;
  --grafico-texto-suave: #898781;
}
/* Cartao "Saldo em aberto" escuro: unico ponto em que o dourado aparece como texto (8,18:1 sobre #1A1B1F). */
.heroi {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  background: var(--topo-fundo); border-color: var(--topo-fundo); border-top: 3px solid var(--marca-dourado); color: var(--topo-texto);
}
.heroi > div { display: grid; gap: 2px; }
.heroi__rotulo { font-weight: 600; color: var(--topo-suave); }
.heroi__valor { font-size: 3rem; font-weight: 700; line-height: 1.1; color: var(--marca-dourado); font-variant-numeric: tabular-nums; }
.heroi .nota { color: var(--lateral-texto); }
.heroi .link-discreto { color: var(--marca-creme); text-decoration-color: currentColor; }
.grade-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 20px; }
.indicador {
  display: grid; gap: 4px; align-content: start; padding: 14px 16px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); color: inherit; text-decoration: none;
}
a.indicador:hover { border-color: var(--primaria); }
.indicador__rotulo { font-size: .85rem; font-weight: 600; color: var(--texto-suave); }
.indicador__valor { font-size: 1.45rem; font-weight: 700; }
.indicador__detalhe { font-size: .8rem; color: var(--texto-suave); }
.indicador--aviso { border-left: 4px solid var(--aviso); }
/* No maximo 2 por linha (os blocos tem 2 ou 4 graficos): 3 colunas deixariam um grafico sozinho na ultima linha. */
.grade-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(420px, calc(50% - 10px)), 1fr)); gap: 0 20px; }
/* O SVG escala junto com o texto (viewBox 480): o teto evita letras e barras gigantes em monitor largo. */
.grafico { width: 100%; height: auto; display: block; font-family: inherit; }
@media (min-width: 861px) { .grafico { max-width: 640px; margin: 0 auto; } }
.grafico__grade { stroke: var(--grafico-grade); stroke-width: 1; }
.grafico__base { stroke: var(--grafico-base); stroke-width: 1; }
.grafico__marca { fill: var(--serie-1); }
.grafico__alvo { fill: transparent; }
.grafico__item:hover .grafico__alvo { fill: rgba(42, 120, 214, .06); }
.grafico__eixo { fill: var(--grafico-texto-suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico__eixo--categoria { fill: var(--grafico-texto); font-size: 12px; }
.grafico__valor { fill: var(--grafico-texto); font-size: 12px; font-weight: 600; }
.grafico-vazio { padding: 28px 0; text-align: center; }
.sem-quebra { white-space: nowrap; }
.tabela-grafico { margin-top: 8px; }
.tabela-grafico[open] summary { margin-bottom: 8px; }
.como-calculamos summary { cursor: pointer; }
.como-calculamos[open] summary { margin-bottom: 12px; }
@media (max-width: 860px) {
  .grade-graficos { grid-template-columns: 1fr; }
  .heroi__valor { font-size: 2.3rem; }
}

/* ---- Tabelas ---------------------------------------------------------- */
.tabela-rolagem { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave); background: #fafbfc; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .vazio { text-align: center; color: var(--texto-suave); padding: 24px; }
.acoes-linha { display: flex; gap: 12px; flex-wrap: wrap; }
.linha-alterada td { background: var(--aviso-suave); }
.paginacao { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 16px; }
.detalhes { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; }
.detalhes dt { color: var(--texto-suave); }
.detalhes dd { margin: 0; }

/* ---- Paginas simples (login, erros) ---------------------------------- */
/* Moldura escura com o logo prateado acima do cartao claro (coerente com o menu lateral). */
.pagina-simples {
  display: grid; place-items: center; align-content: center; gap: 24px; min-height: 100vh; padding: 24px 16px;
  margin: 0; background: var(--lateral-fundo);
}
.cartao-central {
  width: 100%; max-width: 400px; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 12px; padding: 28px; box-shadow: var(--sombra); border-top: 3px solid var(--marca-dourado);
}
.titulo-central { text-align: center; font-size: 1.2rem; margin-bottom: 18px; }
.cartao-central .formulario { max-width: none; }
.rodape-form { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }

/* ---- Celular ---------------------------------------------------------- */
@media (max-width: 860px) {
  .lateral {
    position: fixed; left: 0; top: 0; z-index: 20; transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .layout--menu-aberto .lateral { transform: none; box-shadow: 4px 0 16px rgba(0, 0, 0, .2); }
  .botao-menu { display: inline-block; }
  /* Alvos de toque de 44px no menu aberto pelo botao. */
  .menu__item { min-height: 44px; }
  .menu__subitem { display: flex; align-items: center; min-height: 44px; }
  .menu__alternar { width: 44px; height: 44px; right: 0; }
  .menu__grupo-topo .menu__item { padding-right: 50px; }
  .topo { padding: 10px 16px; gap: 10px; flex-wrap: wrap; }
  .topo__nome, .topo__usuario .link-discreto { display: none; }
  .seletor-org { flex: 1; min-width: 0; }
  .conteudo { padding: 16px; }

  /* Tabelas viram cartoes empilhados. */
  .tabela-rolagem { background: none; border: 0; box-shadow: none; }
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 10px; padding: 8px 0; }
  .tabela td { border: 0; padding: 4px 14px; }
  .tabela td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: .75rem; color: var(--texto-suave); }
  .detalhes { grid-template-columns: 1fr; }
  .detalhes dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .lateral, .menu__item, .menu__subitem, .menu__item::before, .menu__subitem::before, .menu__alternar,
  .menu__alternar::before, .menu__sub-envoltorio, .menu__sub > li { transition: none !important; }
}

/* ---- Configuracoes da organizacao ------------------------------------- */
.painel__topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.painel__topo h2, .painel__topo h3 { margin: 0; }
.painel > .painel__topo { margin-bottom: 12px; }
.painel--destaque { border-left: 4px solid var(--marca-dourado); }
.canal { border-top: 1px solid var(--borda); padding-top: 14px; margin-top: 14px; }
.canal .subtitulo { margin: 4px 0 10px; font-size: .9rem; }
.taxas { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.taxas span, .canal .etiqueta { white-space: nowrap; }
.coluna-caixa { width: 36px; }
.coluna-caixa input { width: 18px; height: 18px; }
.rodape-lote { margin-top: 14px; }
.lista-caixas { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.formulario--largo { max-width: 860px; }
.grade-campos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
.grade-parcelas { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); margin-top: 8px; }
.alerta a { color: inherit; }

/* ---- Orcamentos, contratos e procedimentos do paciente ---------------- */
.etiqueta--orc-em_aberto, .etiqueta--ctr-pendente, .etiqueta--proc-previsto { --sinal: "\25CB"; }
.etiqueta--orc-aprovado, .etiqueta--ctr-assinado, .etiqueta--proc-realizado { --sinal: "\2713"; background: var(--ok-suave); color: var(--ok); }
.etiqueta--orc-recusado, .etiqueta--orc-expirado, .etiqueta--ctr-cancelado, .etiqueta--proc-cancelado { --sinal: "\2013"; }
.alerta--ok { background: var(--ok-suave); border-color: var(--ok); color: var(--ok); margin-bottom: 14px; }
.alerta--ok a { color: inherit; }
.itens-orcamento { display: grid; gap: 10px; }
.item-orcamento {
  border: 1px solid var(--borda); border-radius: 6px; padding: 10px; margin: 0; display: grid; gap: 10px;
  grid-template-columns: minmax(220px, 3fr) minmax(120px, 2fr) 70px minmax(110px, 1fr) minmax(110px, 1fr); align-items: start;
}
.tabela tfoot th, .tabela tfoot td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--borda); }
@media (max-width: 860px) {
  .item-orcamento { grid-template-columns: 1fr 1fr; }
  .item-orcamento .campo:first-of-type { grid-column: 1 / -1; }
}
.titulo-secao { font-size: 1.15rem; margin: 28px 0 12px; padding-top: 16px; border-top: 1px solid var(--borda); }
.titulo-secao::first-letter { text-transform: uppercase; }
.etiqueta--conferida { --sinal: "\2713"; background: var(--info-suave); color: var(--info); }

/* ---- Selecao de titulos (pagamento unico) ------------------------------ */
/* Barra flutuante e compacta: so aparece com titulos marcados (o JavaScript controla o hidden). */
.barra-selecao {
  position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 14px;
  width: fit-content; max-width: 100%; margin: 12px 0 0 auto; padding: 8px 8px 8px 18px;
  background: var(--primaria); color: #fff; border-radius: 999px; box-shadow: 0 8px 24px rgba(16, 24, 40, .22);
}
.barra-selecao[hidden] { display: none; }
.barra-selecao p { margin: 0; font-weight: 600; white-space: nowrap; }
.barra-selecao .botao { background: #fff; color: var(--primaria); border-color: #fff; border-radius: 999px; padding: 8px 16px; }
.barra-selecao .botao:hover { background: var(--primaria-suave); }
.barra-selecao__limpar {
  background: none; border: 0; color: var(--topo-suave); font: inherit; font-size: .9rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 4px;
}
.barra-selecao__limpar:hover { color: #fff; }
.barra-selecao__limpar[hidden] { display: none; }
.barra-selecao :focus-visible { outline-color: var(--marca-dourado); }
@media (max-width: 860px) {
  .barra-selecao { width: 100%; border-radius: var(--raio); bottom: 8px; justify-content: space-between; flex-wrap: wrap; }
}

/* Linhas selecionaveis: a linha inteira marca o titulo; a marcada fica destacada. */
.tabela--selecionavel tbody tr { cursor: pointer; }
.tabela--selecionavel tbody tr:hover td { background: #fafafa; }
.tabela--selecionavel tbody tr.linha--selecionada td { background: var(--primaria-suave); }
.coluna-caixa input { cursor: pointer; }

/* ---- Contador no menu (ex.: Em conferencia) ---------------------------- */
.menu__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.menu__contador {
  min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--aviso); color: #fff;
  font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.5;
}

/* ---- Conciliador: quadros de importacao por tipo ---------------------- */
/* Um quadro por planilha. 1 coluna no celular, 2 em tela larga (os 2 ativos vem primeiro, na 1a linha). */
:root { --borda-tracejada: #b9babe; } /* so contorno decorativo dos quadros "em preparacao" (1,76:1 sobre o fundo) */
.grade-importacoes { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 8px; }
@media (min-width: 861px) { .grade-importacoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.importacao { display: flex; flex-direction: column; gap: 14px; margin: 0; min-width: 0; }
.importacao > * { margin: 0; }
.importacao__topo {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icone titulo etiqueta";
  align-items: center; column-gap: 12px; row-gap: 4px;
}
.importacao__topo h2 { grid-area: titulo; margin: 0; font-size: 1.15rem; line-height: 1.3; }
.importacao__topo .etiqueta { grid-area: etiqueta; white-space: nowrap; justify-self: start; }
.importacao__icone {
  grid-area: icone; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--raio);
  background: var(--primaria-suave); color: var(--texto);
}
.importacao__icone svg { display: block; }
@media (max-width: 520px) {
  /* Celular: a etiqueta desce para baixo do titulo (nao disputa espaco com ele). */
  .importacao__topo { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icone titulo" "icone etiqueta"; }
}
.importacao__descricao { color: var(--texto-suave); font-size: .92rem; }

/* Situacao: faixa clara com "ultimo envio" e "ultima gravada". */
.importacao__situacao {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; align-items: center;
  padding: 10px 14px; background: var(--fundo); border-radius: 6px; font-size: .92rem;
}
.importacao__situacao dt { color: var(--texto-suave); }
.importacao__situacao dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.importacao__situacao .etiqueta { white-space: nowrap; }
@media (max-width: 520px) {
  .importacao__situacao { grid-template-columns: 1fr; gap: 0; }
  .importacao__situacao dd + dt { margin-top: 8px; }
}

/* Envio: fica no rodape do quadro (os botoes dos 2 quadros ativos alinham entre si). */
.importacao__envio { display: grid; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--borda); }
.importacao__rotulo { font-weight: 600; font-size: .92rem; }
.importacao__rotulo small { display: block; font-weight: 400; font-size: .82rem; color: var(--texto-suave); overflow-wrap: anywhere; }
/* Campo de arquivo sem JavaScript: area tracejada (aceita arrastar o arquivo) com o botao nativo no estilo secundario. */
.importacao__envio input[type=file] {
  width: 100%; min-width: 0; padding: 10px; border: 1px dashed var(--borda-controle); border-radius: 6px;
  background: var(--superficie); color: var(--texto-suave); cursor: pointer; font-size: .9rem;
}
.importacao__envio input[type=file]:hover { border-color: var(--primaria); }
.importacao__envio input[type=file]::file-selector-button {
  font: inherit; font-weight: 600; margin-right: 12px; padding: 7px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--primaria); background: var(--superficie); color: var(--primaria);
}
.importacao__envio input[type=file]:hover::file-selector-button { background: var(--primaria-suave); }
.importacao__envio .botao { justify-self: start; }
.importacao__envio--erro input[type=file] { border-style: solid; border-color: var(--erro); }
.importacao__erro {
  margin: 0; padding: 8px 12px; border-radius: 6px; font-size: .9rem;
  background: var(--erro-suave); color: var(--erro); border-left: 4px solid var(--erro);
}
.importacao .alerta--aviso { margin: 0; font-size: .92rem; }
@media (max-width: 860px) {
  .importacao__envio .botao { justify-self: stretch; min-height: 44px; }
  .importacao__envio input[type=file] { min-height: 44px; }
}

/* Etiquetas do topo: frequencia (neutra, seta de repeticao) e "Em preparacao" (neutra, tracejada: nao e erro nem aviso). */
.etiqueta--frequencia { --sinal: "\21BB"; background: var(--primaria-suave); color: #3B3C41; }
.etiqueta--em-preparo { --sinal: "\25CC"; background: var(--superficie); color: var(--texto-suave); border: 1px dashed var(--borda-controle); padding: 1px 8px; }

/* Quadros "em preparacao": secundarios (sem sombra, fundo da pagina, contorno tracejado). */
.importacao--em-preparo { background: transparent; box-shadow: none; border: 1px dashed var(--borda-tracejada); }
.importacao--em-preparo .importacao__icone { background: transparent; color: var(--texto-suave); border: 1px dashed var(--borda-tracejada); }
.importacao--em-preparo h2 { color: var(--texto-suave); }
.importacao__pendencia { font-size: .9rem; color: var(--texto); margin-top: auto; }
.importacao__previsto { font-size: .85rem; color: var(--texto-suave); }