/* components.css : botao, card, badge e estado vazio.
 *
 * A Fase 3 entrega so o que a CASCA usa. Tabela, formulario, SelectBusca,
 * modal e upload nascem nas Fases 5, 6 e 7, cada um com a sua nota lida na
 * hora. Escrever agora um `.tabela` sem ter lido `Padrao_Tabela` seria
 * exatamente o resumo mental que a regra petrea proibe.
 */

/* ====================================================================== *
 * BOTOES
 * ====================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), box-shadow var(--transicao);
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn.desabilitado { opacity: .55; cursor: not-allowed; }

.btn-primary {
  background: var(--cor-primaria);
  color: var(--texto-sobre-cor-primaria);   /* PRETO. Branco reprova em 2,69:1 */
  font-weight: 600;
  box-shadow: 0 1px 2px var(--cor-primaria-sombra);
}
.btn-primary:hover {
  background: var(--cor-primaria-hover);
  color: var(--texto-sobre-cor-primaria);
}

.btn-secundario {
  background: var(--branco);
  border-color: var(--borda-forte);
  color: var(--texto-secundario);
}
.btn-secundario:hover { background: var(--fundo); color: var(--texto); }

.btn-fantasma { background: transparent; border-color: transparent; color: var(--texto-secundario); }
.btn-fantasma:hover { background: var(--fundo); color: var(--texto); }

.btn-sm { min-height: 30px; padding: 6px 10px; font-size: 12px; }
.btn-icone { padding: 7px; min-height: 32px; }   /* quadrado, so icone */

@media (max-width: 720px) {
  /* Alvo de toque maior no celular. */
  .btn { min-height: 44px; padding: 11px 16px; }
  .btn-sm { min-height: 38px; }
}

/* ====================================================================== *
 * CARD
 * ====================================================================== */
.card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-sm);
}
.card-corpo { padding: var(--sp-5); }
.card-cab {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--borda);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
/* Boxes irmaos com a MESMA altura (Padrao_Box_Card). A altura vem do grid, e
 * nao de `height` chutada em cada card. */
.grid-cards { display: grid; gap: var(--sp-4); align-items: stretch; }
.grid-cards > .card { height: 100%; }

/* ====================================================================== *
 * BADGE
 * ====================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--raio-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
}
.badge-ok { background: #e7f6ec; color: #12693a; }
.badge-alerta { background: #fdf3e3; color: #8a5106; }
.badge-perigo { background: #fdeaea; color: #9b1c1c; }
.badge-neutro { background: var(--fundo); color: var(--texto-secundario); }

/* ====================================================================== *
 * ESTADO VAZIO
 * Bloco centrado, SEM card e SEM borda (Padrao_Estado_Vazio). Nunca cita nome
 * de tabela nem de coluna para o usuario.
 * ====================================================================== */
.vz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-2);
  padding: 60px 20px;
  color: var(--texto-fraco);
}
.vz i { font-size: 40px; opacity: .5; }
.vz .vz-titulo { font-weight: 600; font-size: var(--fs-lg); color: var(--texto-secundario); }
.vz .vz-frase { font-size: var(--fs-sm); max-width: 380px; }

/* ====================================================================== *
 * FAIXA DE AVISO (flash)
 * ====================================================================== */
.flash-area {
  position: fixed;
  top: 70px; right: var(--sp-5);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 420px;
}
.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 11px 14px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda);
  background: var(--branco);
  box-shadow: var(--sombra);
  font-size: var(--fs-sm);
}
.flash-ok { border-left: 3px solid var(--sucesso); }
.flash-erro { border-left: 3px solid var(--perigo); }
.flash-alerta { border-left: 3px solid var(--alerta); }

@media (max-width: 880px) {
  .flash-area { left: 16px; right: 16px; max-width: none; }
}

/* ====================================================================== *
 * FORMULARIO (Padrao_Formulario)
 *
 * A regra que mais quebra na pratica: TUDO na mesma altura de 40px. Nao 38,
 * nao 36. E label de form comum e 13px peso 600 SEM uppercase; uppercase com
 * peso 700 e padrao de sistema legado, e so vale em cabecalho categorial
 * (grupo de menu, cabecalho de tabela, label de KPI).
 * ====================================================================== */
.campo { display: flex; flex-direction: column; gap: 5px; }

.campo label {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-secundario);
  /* SEM text-transform e SEM letter-spacing forcado, de proposito. */
}

.input {
  height: 40px;
  box-sizing: border-box;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--branco);
  color: var(--texto);
  font-size: 14px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.input::placeholder { color: var(--texto-fraco); }
.input:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-soft);
}
.input:disabled { background: var(--fundo); cursor: not-allowed; }
.input.erro { border-color: var(--perigo); }

textarea.input { height: auto; min-height: 96px; padding: 10px 12px; }

/* Barra de formulario: linha de campos mais o botao de acao. */
.bf {
  display: flex;
  gap: 14px;
  align-items: flex-end;      /* alinha pela BASE, porque ha label acima */
  flex-wrap: wrap;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 18px;
  margin-bottom: 14px;
}
.bf .input { min-width: 240px; }
/* Filho DIRETO ou dentro de um `.campo.acao`: o botao da barra fica nos dois
 * lugares, e o seletor de filho direto sozinho deixava ele com os 36px do
 * `.btn` base, desalinhado dos campos de 40 ao lado (Padrao_Formulario:109). */
.bf .btn { height: 40px; box-sizing: border-box; }

/* O campo do botao TAMBEM leva <label>&nbsp;</label>. Sem ele, o `.campo` do
 * botao fica mais curto que os dos inputs e o `flex-end` empurra o botao para
 * cima, saindo desalinhado da linha. */
.bf .campo.acao label { visibility: hidden; }

/* ====================================================================== *
 * LOADING (Padrao_Loading_Estado)
 *
 * O botao NAO troca de texto durante a espera. A nota chama isso de
 * anti-padrao na linha 88: o usuario fica olhando o botao se mexer e nao
 * descobre ONDE o resultado vai aparecer. O que o botao faz e DESABILITAR,
 * contra clique duplo; o spinner aparece na area que vai receber o conteudo.
 * ====================================================================== */
@keyframes spinner-rotate { to { transform: rotate(360deg); } }

.spinner-circle {
  width: 44px; height: 44px;
  border: 4px solid var(--borda);
  border-top-color: var(--cor-primaria);
  border-radius: var(--raio-full);
  animation: spinner-rotate .8s linear infinite;
}

.loading-inline {
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

/* Texto DESCRITIVO, sempre. Spinner sozinho nao diz o que o sistema esta
 * fazendo, e "Carregando..." generico tambem nao. */
.loading-text { font-size: 14px; font-weight: 600; color: var(--texto); }

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.loading-overlay.aberto { display: flex; }
.loading-spinner {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 28px 44px;
  box-shadow: var(--sombra-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Respeita quem pediu menos animacao no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
  .spinner-circle { animation-duration: 2.4s; }
}

/* ====================================================================== *
 * TELA DE LOGIN
 * Pagina propria, sem sidebar nem topbar: nao ha navegacao antes de entrar.
 * ====================================================================== */
.login-tela {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--fundo);
}
.login-caixa { width: 100%; max-width: 400px; }

.login-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: 22px;
}
.login-marca .logo-quadro {
  width: 46px; height: 46px;
  border-radius: var(--raio-full);
  border: 2px solid var(--cor-primaria);
  color: var(--cor-primaria-escura);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.login-marca .logo-quadro i { font-size: 25px; }
.login-marca .nome {
  font-family: var(--font-titulo);       /* Sora, 3o dos pontos permitidos */
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.login-marca .sub { font-size: 12px; color: var(--texto-fraco); font-weight: 500; }

.login-card { padding: 26px 24px 24px; }
.login-card h1 { font-size: 19px; margin-bottom: 4px; }
.login-card .ajuda {
  font-size: var(--fs-sm);
  color: var(--texto-fraco);
  margin-bottom: 20px;
}
.login-card .campo + .campo { margin-top: 14px; }
.login-card .btn {
  width: 100%;
  justify-content: center;
  margin-top: 20px;
  /* 40px, igual aos inputs logo acima. O `.btn` base e 36px, que serve para
   * acao em linha de tabela; aqui ele fica empilhado sob campos de 40 e a
   * diferenca de 4px salta aos olhos (Padrao_Formulario:107-111). */
  height: 40px;
}

.login-aviso {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--raio-sm);
  font-size: var(--fs-sm);
  margin-bottom: 18px;
}
.login-aviso.alerta { background: #fdf3e3; color: #8a5106; }
.login-aviso.erro   { background: #fdeaea; color: #9b1c1c; }

.login-rodape {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--texto-fraco);
  margin-top: 18px;
}

/* Campo de senha com o olho de mostrar/esconder. */
.campo-senha { position: relative; }
.campo-senha .input { padding-right: 42px; }
.campo-senha .olho {
  position: absolute;
  right: 4px; bottom: 0;
  height: 40px; width: 36px;
  display: grid; place-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--texto-fraco);
  border-radius: var(--raio-sm);
}
.campo-senha .olho:hover { color: var(--texto-secundario); }

@media (max-width: 520px) {
  .login-card { padding: 20px 18px; }
}

/* A troca de senha voluntaria roda dentro do `base.html`, e la o `.pagina` e
 * larga. Sem teto, o card de 3 campos estica de ponta a ponta e a linha de
 * leitura fica desconfortavel. */
.pagina .login-card { max-width: 440px; }

/* O sair vive dentro de um <form> por causa do POST. Sem isto o form vira um
 * bloco e empurra o botao para a linha de baixo do rodape. */
.usuario-box .form-sair { display: inline-flex; margin: 0; }
.usuario-box .avatar { text-decoration: none; }
.usuario-box .avatar:hover { text-decoration: none; opacity: .9; }

/* ====================================================================== *
 * SELECTBUSCA (Componente_SelectBusca, Sem_Select_Nativo)
 *
 * Substitui o `<select>` nativo em TODO o sistema, sem excecao. O nativo
 * renderiza diferente em cada navegador, nao tem busca, e a seta nao aceita
 * estilo.
 *
 * MARCACAO ESCOLHIDA, e ha divergencia na vault: `Componente_SelectBusca:19-31`
 * desenha `.selectbusca`/`.sb-display`/`.sb-panel`, mas `Padrao_Formulario:51`
 * e `Padrao_Modal_Popup_Centrado:81` usam `.sb-control` com `data-sb-name`.
 * Vale `.sb-control`: e a marcacao das duas outras notas, e e a que a regra de
 * altura de 40px referencia.
 * ====================================================================== */
.sb-control { position: relative; min-width: 170px; }

.sb-btn {
  width: 100%;
  height: 40px;                 /* a mesma altura do `.input` (Padrao_Formulario) */
  box-sizing: border-box;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--branco);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  font: inherit;
  font-size: 14px;
  color: var(--texto);
  cursor: pointer;
  text-align: left;
}
.sb-control.aberto .sb-btn,
.sb-btn:focus-visible {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-soft);
}
.sb-btn .sb-valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-btn .sb-valor.vazio { color: var(--texto-fraco); }
.sb-btn i { flex-shrink: 0; color: var(--texto-fraco); font-size: 14px; }
.sb-control.aberto .sb-btn i { transform: rotate(180deg); }

.sb-popup {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  z-index: 80;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra);
  max-height: 280px;
  overflow-y: auto;
  display: none;
}
.sb-control.aberto .sb-popup { display: block; }

.sb-busca {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--borda);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.sb-opt {
  padding: 9px 12px;
  font-size: 13.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sb-opt:hover, .sb-opt.marcada {
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);
}
.sb-opt[hidden] { display: none; }
.sb-opt .ph-check { margin-left: auto; color: var(--cor-primaria-escura); }
.sb-vazio { padding: 14px 12px; font-size: 13px; color: var(--texto-fraco); text-align: center; }

/* Dentro de `<dialog>` top-layer o popup precisa de `absolute`, senao o
 * ancoramento sai errado (Padrao_Modal_Popup_Centrado:112-114). */
.sb-popup.sb-in-dialog { position: absolute; }

/* O hidden do SelectBusca nao e validado pelo navegador nem com `required`
 * (Padrao_Modal_Nao_Fecha_Sozinho:74). A marca de invalido vai no controle. */
.sb-control.campo-invalido .sb-btn { border-color: var(--perigo); }

/* ====================================================================== *
 * TABELA (Padrao_Tabela, Padrao_Cabecalho_da_Tabela, Padrao_Filtro_por_Coluna)
 * ====================================================================== */

/* O card NAO leva `overflow: hidden`. Ele existia so para o `border-radius`
 * recortar os cantos, mas com o menu DENTRO do card esse `hidden` corta o
 * popup do menu: no ACTUS, 3 de 6 itens ficaram invisiveis e sem clique
 * (Padrao_Cabecalho_da_Tabela:55-72). Quem recorta e o container de rolagem. */
.tabela-wrap {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-sm);
}
.tabela-scroll { overflow-x: auto; border-radius: 0 0 var(--raio) var(--raio); }

/* A faixa de titulo e a PRIMEIRA COISA DENTRO do card, e nao uma barra solta
 * acima dele: fora do card o titulo flutua no cinza e o olho le "um texto e uma
 * tabela", em vez de "uma tabela chamada X". */
.tb-faixa {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 13px 16px;
  border-bottom: 1px solid var(--borda);
}
.tb-faixa .tb-titulo {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.02em;
}
.tb-faixa .tb-contagem {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--texto-fraco);
}

.tb-menu-wrap { position: relative; }
.tb-menu-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--branco);
  cursor: pointer;
  color: var(--texto-secundario);
}
.tb-menu-btn:hover { border-color: var(--cor-primaria); color: var(--cor-primaria-escura); }
.tb-menu-btn i { font-size: 17px; }

.tb-menu {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  min-width: 210px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  display: none;
  z-index: 90;
  padding: 4px 0;
}
.tb-menu.aberto { display: block; }
.tb-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--texto);
  background: none; border: none; width: 100%; text-align: left;
  font-family: inherit;
}
.tb-menu-item:hover { background: var(--fundo); color: var(--cor-primaria-escura); }
.tb-menu-item i { font-size: 15px; color: var(--texto-fraco); }
.tb-menu-item:hover i { color: var(--cor-primaria-escura); }
.tb-menu-item.ativo { color: var(--cor-primaria-escura); font-weight: 600; }
.tb-menu-item.ativo i { color: var(--cor-primaria-escura); }
.tb-menu-sep { height: 1px; background: var(--borda); margin: 4px 0; }

/* --- a tabela --- */
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }

/* Header BRANCO, e nao cinza: faixa cinza entre o titulo e as linhas parte o
 * card em dois e desfaz o motivo de o cabecalho ter entrado nele. Quem separa
 * header de linha e a BORDA (Padrao_Cabecalho_da_Tabela:51-53). */
.tabela thead th {
  background: var(--branco);
  text-align: left;
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;      /* cabecalho de tabela: uppercase legitimo */
  letter-spacing: .06em;
  color: var(--texto-fraco);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
  user-select: none;
}
.tabela thead th[data-col-key] { cursor: pointer; }
.tabela thead th[data-col-key]:hover { color: var(--texto-secundario); }
.tabela thead th .ord { margin-left: 5px; font-size: 10px; opacity: .8; }

.tabela tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--borda);
  color: var(--texto);
  vertical-align: middle;
}
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover td { background: var(--fundo); }
.tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Linha de campos "contem", DENTRO do thead: assim a rolagem horizontal leva os
 * campos junto com as colunas que eles filtram. */
.tabela .th-filtro th { padding: 0 8px 8px; border-bottom: 1px solid var(--borda); }
.tabela .th-filtro input {
  width: 100%;
  height: 30px;                  /* menor que o input de form: mora no cabecalho */
  box-sizing: border-box;
  padding: 4px 8px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  font: inherit;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--texto);
}
.tabela .th-filtro input:focus {
  outline: none;
  border-color: var(--cor-primaria);
}

/* --- coluna de acoes: SLOTS FIXOS, nunca sumindo --- */
.celula-acoes {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}
.celula-acoes form { display: inline-flex; margin: 0; }

/* Slot indisponivel vira SPAN esmaecido, e nao some. Sumir desalinha a coluna e
 * faz o usuario achar que a acao nem existe; esmaecido com tooltip diz "existe,
 * mas nao para este registro, por causa de X" (Padrao_Tabela:392-401).
 * `<span>` e nao `<button disabled>`: o disabled engole o evento e alguns
 * navegadores cortam o tooltip. */
.btn-icone.desabilitado { opacity: .30; cursor: not-allowed; }
.btn-icone.desabilitado:hover { background: transparent; color: var(--texto-secundario); }
.btn-icone.perigo:hover { color: var(--perigo); }

/* ====================================================================== *
 * ESTADO VAZIO (Padrao_Estado_Vazio)
 * O `.vz` da Fase 3 ganha os nomes que a nota usa.
 * ====================================================================== */
.vz-icone { font-size: 40px; color: var(--texto-fraco); line-height: 1; margin-bottom: 16px; }
.vz-titulo {
  margin: 0;
  font-family: var(--font-titulo);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--texto);
}
.vz-sub { margin: 7px 0 0; font-size: 13.5px; color: var(--texto-suave); line-height: 1.5; max-width: 400px; }

/* Tabela que e SECAO de um card nao tem area sobrando para centrar. */
.vz-inline { flex: none; min-height: 150px; padding: 22px 16px; }
.vz-inline .vz-icone { font-size: 30px; margin-bottom: 10px; }
.vz-inline .vz-titulo { font-size: 14.5px; }
.vz-inline .vz-sub { font-size: 12.5px; }

/* ====================================================================== *
 * MODAL (Padrao_Modal, Padrao_Modal_Nao_Fecha_Sozinho,
 *        Padrao_Modal_Popup_Centrado)
 *
 * Tamanho em `vw`/`vh` pela sequencia 34-55-89, NUNCA em px: modal calibrado em
 * pixel num monitor de 1920 fica minusculo no ultrawide e estoura no notebook
 * de 1366 (Padrao_Modal:18).
 *
 * ESC e clique no backdrop NAO fecham. O modal deste sistema e formulario de
 * cadastro, e fechar por atalho joga fora a digitacao inteira
 * (Padrao_Modal_Nao_Fecha_Sozinho:14). Sai pelo X e pelo Cancelar.
 * ====================================================================== */
@keyframes modalSobe {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Variante `<dialog>` top-layer. OBRIGATORIA quando ha SelectBusca dentro: sem
 * `overflow: visible` o dropdown fica CORTADO pela borda do modal. O
 * `!important` e necessario porque e override de comportamento nativo. */
dialog.popup-centrado {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: 0;
  padding: 0;
  border-radius: var(--raio-lg);
  background: var(--branco);
  color: var(--texto);
  box-shadow: var(--sombra-lg);
  overflow: visible !important;
  animation: modalSobe .2s ease;
  width: 55vw;                    /* .modal-md */
  max-width: none;
}
dialog.popup-centrado.modal-sm { width: 34vw; }
dialog.popup-centrado.modal-lg { width: 89vw; }
dialog.popup-centrado::backdrop { background: rgba(15, 23, 42, .55); }

@media (max-width: 1280px) { dialog.popup-centrado { width: 68vw; } }
@media (max-width: 880px) {
  dialog.popup-centrado,
  dialog.popup-centrado.modal-sm,
  dialog.popup-centrado.modal-lg { width: 96vw; }
}

.modal-cab {
  padding: 16px 20px;
  border-bottom: 1px solid var(--borda);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.modal-cab h3 { font-size: 17px; }
.modal-x {
  background: none; border: none; cursor: pointer;
  font-size: 20px; color: var(--texto-fraco);
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--raio-sm);
}
.modal-x:hover { color: var(--texto); background: var(--fundo); }

/* O corpo rola; o modal inteiro nao, senao o cabecalho sai da tela junto. */
.modal-corpo { padding: 20px; max-height: 62vh; overflow-y: auto; }
.modal-corpo .campo + .campo { margin-top: 14px; }

.modal-rodape {
  padding: 14px 20px;
  border-top: 1px solid var(--borda);
  display: flex;
  gap: 10px;
  justify-content: flex-end;      /* primario a DIREITA, sempre */
}

/* Aviso de validacao, DENTRO do modal. Antes disto o padrao era `flash` mais
 * `redirect`: a pagina recarregava, o modal sumia e a digitacao inteira ia
 * embora por causa de um e-mail errado (Padrao_Modal_Nao_Fecha_Sozinho:52-55). */
.modal-aviso {
  display: none;
  margin-bottom: 16px;
  padding: 11px 13px;
  border-radius: var(--raio-sm);
  background: #fdeaea;
  color: #9b1c1c;
  font-size: var(--fs-sm);
}
.modal-aviso.visivel { display: block; }
.modal-aviso ul { margin: 6px 0 0; padding-left: 18px; }
.modal-aviso li { margin-top: 2px; }

.campo-invalido .input { border-color: var(--perigo); }

/* Variante de confirmacao destrutiva: texto centrado, icone vermelho. */
dialog.popup-centrado.modal-confirm { width: 34vw; text-align: center; }
@media (max-width: 880px) { dialog.popup-centrado.modal-confirm { width: 96vw; } }
.confirm-corpo { padding: 30px 26px 10px; }
.confirm-corpo h3 { font-size: 18px; margin-bottom: 8px; }
.confirm-corpo p { color: var(--texto-suave); font-size: 14px; line-height: 1.5; margin: 0; }
.confirm-icone {
  width: 66px; height: 66px;
  border-radius: var(--raio-full);
  display: grid; place-items: center;
  margin: 0 auto 16px;
  background: #fdeaea;
  color: var(--perigo);
}
.confirm-icone i { font-size: 34px; }
.modal-confirm .modal-rodape { justify-content: center; }

/* Acao que apaga dado NAO usa o laranja da marca: vermelho, para nao parecer a
 * acao recomendada da tela. */
.btn-perigo {
  background: var(--perigo);
  color: #ffffff;
  font-weight: 600;
}
.btn-perigo:hover { background: #b91c1c; color: #ffffff; }

/* ====================================================================== *
 * MATRIZ DE PERMISSOES
 *
 * NAO recebe o componente de tabela, e isso e excecao declarada em
 * `Padrao_Tabela:157`: e grade de checkbox, nao lista de registros comparaveis.
 * Ordenar ou esconder coluna aqui quebraria o significado da grade.
 * ====================================================================== */
.matriz { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.matriz th, .matriz td { padding: 9px 12px; border-bottom: 1px solid var(--borda); }
.matriz thead th {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texto-fraco); text-align: left;
}
.matriz th.col-marca, .matriz td.col-marca { width: 90px; text-align: center; }
.matriz tbody tr:hover td { background: var(--fundo); }

.matriz-grupo td {
  background: var(--fundo);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-secundario);
}
.matriz-grupo .acoes-grupo { display: inline-flex; gap: 6px; margin-left: 10px; }
.matriz-grupo .acoes-grupo button {
  background: none; border: 1px solid var(--borda); border-radius: var(--raio-sm);
  font: inherit; font-size: 11px; font-weight: 600; text-transform: none;
  letter-spacing: normal; padding: 2px 8px; cursor: pointer;
  color: var(--texto-secundario);
}
.matriz-grupo .acoes-grupo button:hover { border-color: var(--cor-primaria); color: var(--cor-primaria-escura); }

.matriz input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--cor-primaria); cursor: pointer; }

.matriz-auto td { background: #fbfcfd; }
.matriz-auto label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--texto-secundario); cursor: pointer;
}
.matriz-auto label + label { margin-left: 18px; }

/* ====================================================================== *
 * BARRA DE CHIPS (empresas de um usuario)
 * ====================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 26px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 6px 3px 10px;
  border-radius: var(--raio-full);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);
  font-size: 12.5px;
  font-weight: 500;
}
.chip button {
  background: none; border: none; cursor: pointer; padding: 0;
  display: grid; place-items: center;
  color: inherit; opacity: .7; font-size: 13px;
}
.chip button:hover { opacity: 1; }
.chips-vazio { font-size: 12.5px; color: var(--texto-fraco); }

/* Coluna de acoes: encolhe ao conteudo, para as colunas de dado ficarem com o
 * espaco. `width: 1%` numa tabela `border-collapse` e a forma canonica de dizer
 * "o minimo possivel". */
.tabela th.col-acoes { width: 1%; white-space: nowrap; }

/* Frase de apoio abaixo de um campo. */
.campo-ajuda { font-size: 12.5px; color: var(--texto-fraco); margin: 6px 0 0; }

/* Aviso no topo da area de conteudo, antes do primeiro card. */
.aviso-topo { margin-bottom: 16px; }

/* Form que embrulha um botao so, para o POST acontecer sem o form virar bloco
 * e empurrar o botao para a linha de baixo. */
.form-inline { display: inline-flex; margin: 0; }

/* ====================================================================== *
 * .btn-icone AUTONOMO (Padrao_Tabela:404-441)
 *
 * ACHADO NA REVISAO: na coluna de acoes os slots sao de tipos diferentes,
 * `<a>` para navegar, `<button>` para abrir modal e `<span>` para o esmaecido.
 * Sem uma regra propria, o `<a>` herdava a cor de LINK do `base.css`
 * (`--cor-primaria-texto`) e ficava laranja ao lado de dois icones cinza, na
 * mesma coluna. O `.btn-icone` que existia era modificador do `.btn`, e nao
 * valia sozinho.
 *
 * O slot tem que parecer o MESMO, seja qual for a tag: e a mesma coluna, e a
 * unica diferenca que o olho deve captar e o icone.
 * ====================================================================== */
.btn-icone {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--texto-secundario);
  text-decoration: none;
  transition: background var(--transicao), color var(--transicao);
}
.btn-icone:hover {
  background: var(--fundo);
  color: var(--texto);
  text-decoration: none;
}
.btn-icone i { font-size: 16px; }

/* ====================================================================== *
 * TOGGLE TIPO 3: ON/OFF (Padrao_Toggle_OnOff)
 *
 * Verde diz "esta ativo"; laranja diz "esta escolhido"
 * (Padrao_Toggle_Tipos:48). Por isso liga/desliga e VERDE, e escolha entre
 * valores e laranja da marca.
 *
 * O `<input>` real continua no DOM, so escondido: leitor de tela le normal, e o
 * `<label for>` e o que faz o clique no visual chegar ao checkbox.
 * ====================================================================== */
.sw { position: relative; width: 42px; height: 24px; flex: 0 0 auto; display: inline-block; }
.sw input { display: none; }
.sw label {
  position: absolute;
  inset: 0;
  background: var(--borda-forte);
  border-radius: var(--raio-full);
  cursor: pointer;
  transition: background .15s;
}
.sw label::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: #ffffff;
  border-radius: var(--raio-full);
  transition: transform .15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.sw input:checked + label { background: var(--sucesso); }
/* 18px = 42 - 20 - (2 * 2) */
.sw input:checked + label::after { transform: translateX(18px); }
/* FALLBACK espelhado por JS (main.js `espelharSw`): dentro de `<dialog open>`
   o `:checked` no input escondido nao repaint o label; a classe `.on` no
   `.sw` vem no lugar. Fora de dialog as duas regras coincidem.
   Cor literal em vez de `var(--sucesso)`: em teste manual dentro do dialog
   a variavel nao resolvia (ou nao repintava) para background, e a cor cinza
   base insistia em ganhar. Literal a mesma que o token, sem indireccao. */
.sw.on label { background: #16a34a !important; }
.sw.on label::after { transform: translateX(18px); }
.sw input:focus-visible + label {
  outline: 2px solid var(--cor-primaria-escura);
  outline-offset: 2px;
}
.sw input:disabled + label { opacity: .5; cursor: not-allowed; }

/* ====================================================================== *
 * TOGGLE TIPO 1: MULTI OPCOES (Padrao_Toggle_Tipos:51-79)
 * Escolha entre 3 ou mais valores. Selecionado em laranja SUAVE com borda; o
 * solido invertido e exclusivo do tipo 2, e aqui pesaria a barra.
 * ====================================================================== */
.presets {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 3px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--branco);
}
.presets button {
  height: 32px;
  border: 1px solid transparent;
  background: var(--branco);
  border-radius: var(--raio-sm);
  padding: 0 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-secundario);
  cursor: pointer;
  white-space: nowrap;
}
.presets button:hover { color: var(--cor-primaria-escura); }
.presets button.on {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);
}

/* ====================================================================== *
 * FAIXA DE IMPERSONACAO (Padrao_Impersonacao_Segura:107-114)
 *
 * O acidente mais comum NAO e ataque: e o administrador abrir a aba, resolver o
 * chamado, voltar horas depois e mexer achando que e a propria conta.
 *
 * Por isso a faixa e FIXA (nao some ao rolar), diz DE QUEM e a sessao, e tem
 * saida a um clique. Cor de AVISO, e nunca a cor da marca: nao e estado normal
 * do sistema, e pintar de laranja faria parecer que e.
 * ====================================================================== */
.faixa-impersonando {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #92400e;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 0 16px;
}
.faixa-impersonando i { font-size: 16px; }
.faixa-impersonando .sair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #ffffff;
  border-radius: var(--raio-sm);
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.faixa-impersonando .sair:hover { background: rgba(255, 255, 255, .3); }

/* A faixa empurra o sistema inteiro para baixo, em vez de flutuar por cima: por
 * cima, ela taparia a topbar e o titulo da tela. */
body.impersonando .sidebar { top: 40px; }
body.impersonando .topbar { top: 40px; }
body.impersonando .conteudo { padding-top: 40px; }

/* ====================================================================== *
 * CARD DE CONVITE (Padrao_Convite_de_Acesso:214-222)
 *
 * Convite aberto vive em CARD PROPRIO, e nunca como linha da tabela de
 * usuarios: convite nao e conta. Virar linha ali faz o staff ler como usuario
 * existente, e a coluna "nome" fica vazia porque ninguem preencheu ainda.
 * ====================================================================== */
.convites { display: grid; gap: 12px; margin-bottom: 20px; }
.convite {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--branco);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.convite .cracha { flex: 1; min-width: 220px; }
.convite .cracha .perfil { font-weight: 600; font-size: 14px; }
.convite .cracha .escopo { font-size: 12.5px; color: var(--texto-fraco); margin-top: 2px; }
.convite .prazo { font-size: 12.5px; color: var(--texto-secundario); white-space: nowrap; }
.convite .prazo.vencendo { color: var(--alerta); font-weight: 600; }
.convite .acoes { display: flex; gap: 6px; }

/* O link do convite fica visivel para copiar: nao ha SMTP neste projeto, e
 * convite que depende de servidor de e-mail nao configurado e funcionalidade
 * que parece funcionar ate a pessoa dizer que nao recebeu
 * (Padrao_Convite_de_Acesso:178-182). */
.convite-link {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin-top: 4px;
}
.convite-link input {
  flex: 1;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  font: inherit;
  font-size: 12px;
  color: var(--texto-secundario);
  background: var(--fundo);
}

/* O cracha que a PESSOA ve ao abrir o convite. Ela precisa saber com o que esta
 * entrando, senao vem o "por que eu nao vejo tal tela?" depois do primeiro
 * login (Padrao_Convite_de_Acesso:203-207). */
.cracha-bloco {
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--fundo);
  padding: 12px 14px;
  margin-bottom: 18px;
}
.cracha-bloco dt {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-fraco);
}
.cracha-bloco dd { margin: 2px 0 10px; font-size: 13.5px; }
.cracha-bloco dd:last-child { margin-bottom: 0; }

/* ====================================================================== *
 * TELA DE SEGURANCA
 * ====================================================================== */
.secao { margin-bottom: 20px; }
.secao > h2 {
  font-size: 15px;
  margin-bottom: 4px;
}
.secao > .secao-sub {
  font-size: 13px;
  color: var(--texto-fraco);
  margin-bottom: 12px;
}
.linha-config {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--borda);
  flex-wrap: wrap;
}
.linha-config:last-child { border-bottom: none; }
.linha-config .rotulo { flex: 1; min-width: 240px; }
.linha-config .rotulo .nome { font-weight: 600; font-size: 13.5px; }
.linha-config .rotulo .explica { font-size: 12.5px; color: var(--texto-fraco); margin-top: 2px; }
.linha-config .input { max-width: 110px; }
.linha-config .input.num { text-align: right; }

/* O campo principal da barra estica e ocupa o espaco que sobra; os demais ficam
 * no `min-width`. Sem isso fica um buraco vazio entre o ultimo campo e o botao
 * (Padrao_Formulario:123-129). */
.bf .campo-principal { flex: 1; }

/* Codigo curto inline: chave de modulo, nome de rota, nome de evento no log.
 * Fonte mono do sistema, fundo suave, para separar do texto de leitura. */
.cod-icone {
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  font-size: 12px;
  background: var(--fundo);
  color: var(--texto-secundario);
  padding: 2px 6px;
  border-radius: var(--raio-sm);
  white-space: nowrap;
}

/* ====================================================================== *
 * TABELA COM PAGINACAO NO SERVIDOR
 * O rodape em grid de 3 colunas (1fr auto 1fr): a contagem na coluna 1, os
 * controles no centro real, sem position:absolute passando por cima em janela
 * estreita (Padrao_Cabecalho_da_Tabela:113-117).
 * ====================================================================== */
.ts-rodape {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 4px 0;
  font-size: var(--fs-sm);
  color: var(--texto-fraco);
}
.ts-nav { display: inline-flex; align-items: center; gap: 4px; justify-self: center; }
.ts-nav button {
  min-width: 30px; height: 30px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--branco);
  cursor: pointer;
  color: var(--texto-secundario);
  font-size: 15px;
}
.ts-nav button:hover { border-color: var(--cor-primaria); color: var(--cor-primaria-escura); }
.ts-nav .ts-pagina { padding: 0 8px; white-space: nowrap; color: var(--texto-secundario); }
.ts-tamanho { justify-self: end; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
/* `.sb-mini` : variante do SelectBusca so pro rodape da tabela paginada. Perde o
   min-width e o pad de 40px do padrao (que serve pro formulario) e vira uma
   caixinha da largura das 4 opcoes fechadas `10/50/100/500`. */
.sb-mini { min-width: 74px; display: inline-block; }
.sb-mini .sb-btn { height: 30px; padding: 0 8px; font-size: 12.5px; border-color: var(--borda); }
.sb-mini .sb-popup { min-width: 100%; }
.ts-vazio { text-align: center; color: var(--texto-fraco); padding: 40px 20px; }

@media (max-width: 720px) {
  .ts-rodape { grid-template-columns: 1fr; text-align: center; gap: 8px; }
  .ts-tamanho { justify-self: center; }
}

/* ====================================================================== *
 * FLAGS DO FORNECEDOR (toggle + vigencia condicional)
 * ====================================================================== */
.flag-bloco { border-top: 1px solid var(--borda); padding-top: 14px; margin-top: 14px; }
.flag-linha { display: flex; align-items: center; gap: 12px; }
.flag-rot .nome { font-weight: 600; font-size: 13.5px; }
.flag-rot .explica { font-size: 12.5px; color: var(--texto-fraco); margin-top: 1px; }
.flag-vigencia { display: flex; gap: 12px; margin-top: 12px; padding-left: 54px; }
.flag-vigencia .campo { flex: 1; }
.badge-gap { margin-right: 4px; }

/* Segunda linha de uma celula de tabela (nome fantasia sob a razao social). */
.sub-linha { font-size: 12px; color: var(--texto-fraco); margin-top: 1px; }

/* Modal grande com secoes agrupadas (usado em /cadastros/regras).
   `.secao-mini` empilha titulo curto + campos, com uma linha divisoria acima
   para o olho separar identidade de condicoes de destino de vigencia sem
   precisar de comentario. */
.secao-mini { border-top: 1px solid var(--borda); padding-top: 14px; margin-top: 14px; }
.secao-mini:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.secao-mini h4 {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-fraco);
  margin: 0 0 10px 0;
}

/* Duas colunas dentro do modal (linha do NCM/CEST, do destino/sentido, etc). */
.dois-campos { display: flex; gap: 12px; }
.dois-campos .campo { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .dois-campos { flex-direction: column; }
}

/* Bloco de erro do simulador. Vermelho quieto, nao alerta. */
.aviso-erro {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 10px 12px;
  border-radius: var(--raio-sm);
  font-size: 13px;
}
.aviso-erro ul { margin: 6px 0 0 18px; padding: 0; }

/* Larguras fixas para colunas de tabela que nao devem esticar (numero curto,
   toggle). Evita `style="width:80px"` inline no thead. */
.tabela th.col-estreita, .tabela td.col-estreita { width: 80px; }

/* Espacamento visual quando uma flag-linha vem colada a algo (dentro da coluna
   direita de uma linha de dois campos, por exemplo). */
.bloco-com-espaco-acima { margin-top: 8px; }

/* Linha de controles do simulador: botao + mensagem lado a lado. */
.sim-linha-controles {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.sim-resultado { margin-top: 12px; }
.sim-tabela { margin-top: 10px; }
.peso-600 { font-weight: 600; }

/* ============================================================ *
 * UPLOAD DE ARQUIVO (Padrao_Upload_Arquivo, Fase 6)
 * Drop e click no MESMO <label>. O input file real fica off-screen para
 * o layout nao herdar o box do widget do sistema. Botao Confirmar so
 * habilita quando ha arquivo (regra da propria nota).
 * ============================================================ */
.im-inp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.im-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 2px dashed var(--borda);
  border-radius: var(--raio);
  padding: 32px 20px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--branco);
}
.im-drop .icon {
  font-size: 32px;
  color: var(--cor-primaria-escura);
}
.im-drop .im-drop-titulo { font-weight: 600; font-size: 14px; }
.im-drop .im-drop-sub { font-size: 12.5px; color: var(--texto-fraco); }
.im-drop.sobre {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
}
.im-drop.com-arquivo {
  border-style: solid;
  border-color: var(--sucesso);
}

.im-msg {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--texto-fraco);
  margin-right: auto;
}

/* ============================================================ *
 * PROGRESSO / POS-PROCESSAMENTO DA IMPORTACAO
 * ============================================================ */
.imp-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.imp-arquivo {
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.imp-status {
  font-size: 13px;
  color: var(--texto-fraco);
  margin-top: 4px;
}
.imp-contador {
  font-size: 15px;
  font-weight: 600;
  margin: 14px 0 4px;
}
.imp-sep {
  color: var(--texto-fraco);
  margin: 0 6px;
  font-weight: 400;
}
.imp-msg {
  font-size: 13px;
  color: var(--texto-fraco);
  margin-top: 6px;
}
.imp-acoes { margin-top: 16px; }

.spinner-circle.parado {
  animation: none;
  border-color: var(--sucesso);
  border-top-color: var(--sucesso);
}
.spinner-circle.parado.erro {
  border-color: var(--erro, #dc2626);
  border-top-color: var(--erro, #dc2626);
}

.badge-erro {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* ============================================================ *
 * COBERTURA (Fase 6 etapa B)
 * ============================================================ */
.cov-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
@media (max-width: 520px) {
  .cov-numero .n { font-size: 32px; }
}
.cov-titulo {
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cov-sub {
  font-size: 13px;
  color: var(--texto-fraco);
  margin-top: 4px;
}
.cov-numero .n {
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: var(--cor-primaria-escura);
}
.cov-numero .pct {
  font-size: 18px;
  color: var(--texto-fraco);
  margin-left: 2px;
}
.cov-linha {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--borda);
  font-size: 14px;
}
.cov-linha:last-child { border-bottom: 0; }
.cov-linha.cov-alerta { color: #991b1b; }
.cov-motivos { margin: 8px 0 0 0; font-size: 14px; color: #991b1b; list-style: none; padding-left: 0; }
.cov-motivos li { margin-bottom: 6px; }
.cov-motivo-link {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--raio-sm);
  background: #fef2f2; color: #991b1b;
  text-decoration: none; border: 1px solid #fee2e2;
  transition: background 0.15s, border-color 0.15s;
}
.cov-motivo-link:hover { background: #fee2e2; border-color: #fca5a5; }
.cov-motivo-link .cov-motivo-seta { margin-left: auto; opacity: 0.6; }
.cov-motivo-link:hover .cov-motivo-seta { opacity: 1; }
.cov-motivo-sem-link {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; color: #991b1b;
}

@media (max-width: 520px) {
  .flag-vigencia { padding-left: 0; flex-direction: column; }
}

/* ====================================================================== *
 * APURACAO (Fase 7A)
 *
 * Padroes reusados de fora: `.card`, `.card-cab`, `.card-corpo`, `.tabela`,
 * `.cov-cabeca`, `.cov-numero`, `.cov-linha`, `.badge-*`, `.vz`. As classes
 * `.apu-*` aqui sao APENAS o que a apuracao introduz.
 * ====================================================================== */

/* Sub-titulo dentro do cabecalho do card (a linha "Base = Vendas + ...").
 * Nao ha um equivalente exato em outra tela; a barra de filtros usa outro
 * pattern (label + input). Aqui e explicativo, cabe na direita do cabecalho. */
.card-cab-sub {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--texto-fraco);
  font-weight: 400;
}

/* Destaque do RN026042: mesma caixa do numero grande da cobertura (`.cov-numero
 * .n` = 42px), so troca a cor pra --cor-primaria-texto (o hex laranja em texto
 * reprova contraste em fundo claro; o -texto e o 4,88:1 que passa). O rotulo
 * pequeno em cima e o sub embaixo dao contexto sem gastar altura.
 *
 * O `.cov-numero` ja tem `.n` (font-size 42px); a apu-economia troca o alinhamento
 * pra caber rotulo + numero + sub no mesmo bloco. */
.apu-economia { display: flex; flex-direction: column; align-items: flex-end; }
.apu-economia .n { color: var(--cor-primaria-texto); }
.apu-eco-rot {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-fraco);
  margin-bottom: 2px;
}
.apu-eco-sub { font-size: var(--fs-sm); color: var(--texto-secundario); }

/* Tabela da apuracao : colunas de dinheiro em `tabular-nums` (herdado de
 * `.tabela td.num`), a coluna BASE ganha peso pra o olho pousar nela primeiro,
 * ICMS em cor de destaque. */
.tabela-apu td.apu-base { font-weight: 600; }
.tabela-apu td.apu-icms { color: var(--cor-primaria-texto); font-weight: 600; }

/* Vazio dentro da tabela (nenhuma linha classificada). E menos hostil que
 * uma tabela com 0 linhas: mensagem centrada dentro da propria celula. */
.tabela .apu-vazia td { padding: 40px 20px; }
.tabela .apu-nada {
  text-align: center;
  color: var(--texto-fraco);
  font-size: var(--fs-sm);
}

/* Linha 6 do fecho (`ICMS a recolher no regime`): destaque discreto. Sem
 * gradient nem shadow, so o peso e a cor. */
.cov-linha.apu-fecho {
  font-size: var(--fs-lg);
  font-weight: 600;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--borda);
  border-bottom: none;
}

/* Pendencias: cada uma numa linha propria, com titulo em pt-BR e meta abaixo
 * (itens + valor). Sem citar tabela/registro. */
.apu-pendencias { list-style: none; margin: 0; padding: 0; }
.apu-pend {
  padding: 12px 0;
  border-bottom: 1px dashed var(--borda);
}
.apu-pend:last-child { border-bottom: none; }
.apu-pend-titulo { color: var(--texto); font-size: var(--fs-base); }
.apu-pend-meta {
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--texto-fraco);
}

/* Pendencia clicavel: leva a tela onde a pendencia se resolve. */
.apu-pend-link {
  display: block; position: relative;
  padding: 4px 32px 4px 0;
  color: inherit; text-decoration: none;
  border-radius: var(--raio-sm);
}
.apu-pend-link:hover { color: var(--cor-primaria-texto); }
.apu-pend-link:hover .apu-pend-titulo { color: var(--cor-primaria-texto); }
.apu-pend-seta {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  opacity: 0.4;
}
.apu-pend-link:hover .apu-pend-seta { opacity: 1; }

/* Botao "Ver divergencia" no rodape (link pra 7B). */
.apu-acoes-rodape {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sp-4);
}

/* Botao dentro do estado vazio da apuracao. */
.apu-vz-acao { margin-top: var(--sp-4); }

/* Responsividade: em telas pequenas o cabecalho da apuracao empilha o bloco
 * de identidade e o bloco da economia. O `.cov-cabeca` ja preve `flex-wrap`
 * desde a 6B, entao aqui so ajustamos o alinhamento do numero. */
@media (max-width: 720px) {
  .apu-economia { align-items: flex-start; margin-top: var(--sp-3); }
  .apu-economia .n { font-size: 32px; }
  .card-cab-sub { margin-left: 0; }
}

/* ====================================================================== *
 * DIVERGENCIA (Fase 7B)
 *
 * Cabecalho simples de contexto; o resto e tabela-servidor.js padrao. A
 * coluna Motivo pode ter texto longo (`Classificacao.motivo` do motor
 * carrega a razao inteira); trunca com ellipsis e mostra full no `title`.
 * ====================================================================== */
.apu-div-cabeca { display: flex; align-items: baseline; gap: var(--sp-3); }
/* Seletor cascata empresa -> competencia no topo da divergencia. */
.apu-div-seletor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  border-top: 1px solid var(--borda);
  padding-top: var(--sp-3);
  margin-top: var(--sp-3);
}
@media (max-width: 520px) {
  .apu-div-seletor { grid-template-columns: 1fr; }
}
.apu-div-titulo { font-weight: 600; font-size: var(--fs-lg); color: var(--texto); }
.apu-div-sub {
  margin-top: 4px;
  color: var(--texto-secundario);
  font-size: var(--fs-sm);
  max-width: 800px;
  line-height: 1.5;
}
.apu-div-motivo {
  max-width: 320px;
  color: var(--texto-secundario);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ====================================================================== *
 * LISTAGEM DE APURACOES (Fase 7C)
 * ====================================================================== */
.apu-vazio-cel { color: var(--texto-fraco); }
.apu-lista-pct {
  color: var(--texto-fraco);
  font-size: var(--fs-xs);
  margin-left: 4px;
}