/* components.css
 *
 * Botoes, cards, barra de formulario, flash e estados.
 * Padrao_Box_Card, Padrao_Formulario, Responsividade_Sempre.
 */

/* ==========================================================================
   BOTOES
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda);
  background: var(--branco);
  color: var(--texto);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transicao), border-color var(--transicao),
              color var(--transicao), box-shadow var(--transicao);
}
.btn:hover { background: var(--fundo); text-decoration: none; }
.btn:disabled, .btn.desabilitado {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Fundo na cor ESCURA da marca, nao na primaria: branco sobre #A88015 da
   contraste 3,64, abaixo dos 4,5 que texto de 13px pede (WCAG AA); sobre
   #8A6912 da 5,11. O hover escurece a partir da escura por color-mix, e nao
   por um hex fixo, porque as duas cores vem de /dev/identidade (base.html) e
   um tom fixo deixaria de casar no dia em que a marca mudar. */
.btn-primario {
  background: var(--cor-primaria-escura);
  border-color: var(--cor-primaria-escura);
  color: #fff;
}
.btn-primario:hover {
  background: color-mix(in srgb, var(--cor-primaria-escura) 82%, #000);
  border-color: color-mix(in srgb, var(--cor-primaria-escura) 82%, #000);
  color: #fff;
}

.btn-perigo {
  background: var(--vermelho);
  border-color: var(--vermelho);
  color: #fff;
}
.btn-perigo:hover { filter: brightness(.94); color: #fff; }

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

/* Acao destrutiva discreta (Remover, Descartar). Sem esta regra o botao saia
   cinza, rgb(75,85,99), igual a um Cancelar: o perigo so aparecia no modal. */
.btn-perigo-fantasma { color: var(--vermelho-texto); }
.btn-perigo-fantasma:hover { background: var(--vermelho-suave); color: var(--vermelho-texto); }

/* Formulario de um botao so, na linha do texto (celula de acoes, topo do
   detalhe). Bloco por padrao, ele quebraria a fileira. */
form.inline { display: inline-flex; margin: 0; }

.btn-sm { padding: 6px 10px; font-size: 12px; min-height: 32px; }

.btn-icone {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  padding: 0;
  border-radius: var(--raio-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--texto-secundario);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.btn-icone:hover { background: var(--fundo); color: var(--texto); }
.btn-icone.perigo:hover { background: var(--vermelho-suave); color: var(--vermelho); }

/* Wrapper da coluna de Acoes: slots alinhados a direita, gap fixo
   (Padrao_Tabela.md:334-340). */
.celula-acoes {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}

/* Slot de acao sem permissao: mantem o tamanho para nao desalinhar a coluna
   Acoes, e informa o motivo pelo title (Matriz_VER_EDITAR:100-111).
   opacity .30 e "sem acender no hover" sao literais de Padrao_Tabela.md:363-370
   (secao "Coluna de Acoes - slots fixos com esmaecimento"). */
.btn-icone.desabilitado {
  opacity: .30;
  cursor: not-allowed;
  pointer-events: auto;
}
.btn-icone.desabilitado:hover {
  background: transparent;
  color: var(--texto-secundario);
}

/* Alvo de toque de 44px no mobile (Responsividade_Sempre:141-145) */
@media (max-width: 720px) {
  .btn { min-height: 44px; padding: 11px 16px; }
  .btn-icone { width: 44px; height: 44px; }
}

/* ==========================================================================
   CARD (Padrao_Box_Card:17-26)
   ========================================================================== */

.cd {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  box-shadow: var(--sombra-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cd-sm { padding: 12px; }
.cd-lg { padding: 20px; }

.cd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cd-titulo { font-size: 14px; font-weight: 600; color: var(--texto); margin: 0; }
.cd-acoes { display: flex; gap: 4px; }

/* Hover de card clicavel: nunca mexer no background (Padrao_Box_Card:102) */
.cd-clicavel { cursor: pointer; transition: var(--transicao); }
.cd-clicavel:hover {
  border-color: var(--cor-primaria);
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}

/* Grid de cards: irmaos SEMPRE com a mesma altura (Padrao_Box_Card:57) */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.grid-cards > .cd { height: 100%; }

/* Empty state (Padrao_Box_Card:179-197) */
.cd-vazio {
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  gap: 8px;
}
.cd-vazio-titulo { font-size: 16px; font-weight: 600; margin: 8px 0 0; }
.cd-vazio-msg { font-size: 13px; color: var(--texto-suave); margin: 0 0 16px; }

/* ==========================================================================
   FORMULARIO (Padrao_Formulario:65-103)
   ========================================================================== */

.input, .textarea, .select {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio-sm);
  background: var(--branco);
  color: var(--texto);
  /* 16px no mobile porque abaixo disso o iOS da zoom no foco
     (Responsividade_Sempre:170-177) */
  font-size: 16px;
  font-family: inherit;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.textarea { height: auto; min-height: 96px; resize: vertical; }

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-suave);
}
.input::placeholder { color: var(--texto-suave); }

@media (min-width: 720px) {
  .input, .textarea, .select { font-size: 14px; }
}

/* Barra de formulario. Altura 40px em TUDO e alinhamento pela base. */
.ra-bar {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 18px;
  margin-bottom: 14px;
}

.ra-bar .campo { display: flex; flex-direction: column; gap: 5px; }

/* Label 13px peso 600 SEM uppercase (Padrao_Formulario:85-90).
   A checklist da mesma nota, linha 159, ainda pede 11px 700 uppercase: e o
   texto legado, anterior a correcao de 02/07/2026 registrada no corpo. */
.ra-bar label, .campo label {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-secundario);
}

.ra-bar .input,
.ra-bar .select,
.ra-bar > .btn,
.ra-bar .campo > .btn {
  height: 40px;
  box-sizing: border-box;
}
.ra-bar .input { min-width: 240px; }
.ra-bar .campo.ra-acao { flex: 0 0 auto; }

/* Formulario empilhado (dentro de card) */
.form-col { display: flex; flex-direction: column; gap: 14px; }
.linha-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
@media (max-width: 880px) {
  .linha-campos { grid-template-columns: 1fr; }
}
/* .campo em COLUNA tambem fora da .ra-bar (Padrao_Formulario:72-73,108).
   Sem isto ele era display:block, o controle ficava à mercê da altura da
   linha do label, e o botao "Nova especialidade" saia 21px acima do picker
   do lado (medido em 06/10/2026). */
.linha-campos .campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

/* --texto-suave (#6B7280, contraste 4,83 no branco), nao --texto-fraco
   (#9CA3AF, 2,54): texto de ajuda e para ser lido, nao decoracao. */
.ajuda { font-size: 12px; color: var(--texto-suave); }

/* Valor grande de card de indicador. Existe como classe porque nenhuma tela
   escreve style inline (Sistema_de_Estilos:13). */
.cd-valor {
  font-family: var(--font-titulo);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}

/* Formulario que nao deve esticar na largura toda da pagina */
.form-estreito { max-width: 460px; }

/* ==========================================================================
   TABELA (Padrao_Tabela.md + Sistema_de_Estilos.md:85, "Tabela e sempre .table")
   ========================================================================== */

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  font-size: 13px;
}
.table th, .table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--borda);
}
.table th {
  background: var(--fundo);
  color: var(--texto-secundario);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--fundo-alt); }
.table td:last-child { text-align: right; }

/* Scroll horizontal com pista de sombra nas bordas em telas estreitas
   (Responsividade_Sempre.md:88-107, "solucao padrao: scroll horizontal com
   pista de sombra"). */
.tabela-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--raio);
  background:
    linear-gradient(to right, var(--branco) 30%, rgba(255, 255, 255, 0)) left center / 20px 100% no-repeat,
    linear-gradient(to right, rgba(255, 255, 255, 0), var(--branco) 70%) right center / 20px 100% no-repeat,
    linear-gradient(to right, rgba(15, 23, 42, .08), rgba(15, 23, 42, 0)) left center / 12px 100% no-repeat,
    linear-gradient(to left, rgba(15, 23, 42, .08), rgba(15, 23, 42, 0)) right center / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.tabela-scroll .table { min-width: 640px; border-radius: 0; border: none; }
@media (min-width: 880px) {
  .tabela-scroll { border: 1px solid var(--borda); }
  .tabela-scroll .table { border-radius: var(--raio); }
}

/* A barra de rolagem horizontal mora no PE do container. Com lista longa ela
   fica embaixo de todas as linhas, e o usuario precisa rolar a pagina inteira
   para descobrir que ela existe. Barra que se procura e barra que nao existe.

   O quadro passa a ter altura maxima e a lista rola por dentro dele, com o
   cabecalho grudado no topo: a barra horizontal fica sempre na base do quadro,
   a um palmo dos olhos.

   So do tablet grande para cima, de proposito: no toque ninguem usa a barra,
   arrasta a tabela com o dedo (Responsividade_Sempre.md:88-107 mantem a pista
   de sombra como solucao de tela estreita). Quem precisa da barra e o mouse. */
@media (min-width: 881px) {
  .tabela-scroll {
    overflow: auto;
    max-height: 68vh;
  }
  /* sticky no TH, nao no THEAD: thead sticky nao vale em todo navegador. */
  .tabela-scroll .table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
  }
}

/* Largura das colunas da listagem de documentos.

   O defeito que isto conserta: `.elipse` (base.css:76) e `white-space: nowrap`
   mais `text-overflow: ellipsis`, e SEM largura maxima ela nunca reticencia --
   numa tabela de layout automatico a celula com nowrap EMPURRA a tabela ate o
   nome do arquivo caber inteiro. Era o nome do arquivo esticando a tela e
   obrigando a barra de rolagem horizontal no desktop, contra
   Responsividade_Sempre.md:128 ("1280px (laptop) - sem horizontal scroll").

   O scroll horizontal continua existindo para tela estreita
   (Responsividade_Sempre.md:88-107), que e onde ele e a solucao padrao. No
   laptop ele era sintoma, nao recurso.

   Arquivo e empresa QUEBRAM em vez de reticenciar: o que distingue um nome do
   outro mora no fim ("...Casali 05.pdf"), e reticencias comem justamente o
   fim. As colunas curtas ganham nowrap porque estavam sendo espremidas pelas
   largas -- "Sem apontamento" quebrava em duas linhas sem precisar. */
.col-arquivo,
.col-empresa {
  overflow-wrap: anywhere;
}
/* Os numeros saem de MEDICAO no navegador, nao de gosto: com o nome de arquivo
   real ("Alteracao contratual Casali 05 ... .pdf") a tabela pede 943px, e um
   laptop de 1280 com a sidebar aberta tem 952px uteis DEPOIS de descontar a
   barra de rolagem vertical do quadro (17px aqui).

   A folga de 9px nao e sobra: a barra de rolagem tem largura diferente por
   sistema e por tema, e sem ela a tabela cabe nesta maquina e estoura na do
   lado. O degrau que eu tinha escolhido antes de o quadro ganhar altura fixa
   (200/180/165) pede 963px e nao cabe mais -- foi a propria barra vertical
   que comeu a diferenca, e so a medicao mostrou isso.
   Verificacoes_Mecanicas_de_Tela.md:21: tela se fecha medindo a tela. */
.col-arquivo { max-width: 180px; }
.col-empresa { max-width: 160px; }
.col-status { max-width: 145px; }

/* A sub-celula nasceu com max-width proprio (260px), maior que a coluna que a
   hospeda. Dentro destas colunas ela se limita ao que a celula tem. */
.col-arquivo .sub-celula,
.col-empresa .sub-celula,
.col-status .sub-celula {
  max-width: 100%;
}

.col-curta { white-space: nowrap; }

/* Razao social da listagem de empresas: quebra em vez de esticar. Medido em
   1280x800, a tabela pedia 990px em 982 uteis por causa dela. */
.col-razao { max-width: 260px; overflow-wrap: anywhere; }

/* Coluna de quantidade alinha a direita, para as unidades ficarem uma
   embaixo da outra (Padrao_Tabela, numero a direita). O rotulo do TH pode
   quebrar ("Socios / ativos"): com ele em uma linha so, mais o funil de
   filtro, a coluna pedia 157px para mostrar um numero de um digito, e era
   ela que empurrava a tabela de empresas para fora do quadro. */
.table th.col-num, .table td.col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.table th.col-num { white-space: normal; }

/* ==========================================================================
   CARD DA TABELA (Padrao_Cabecalho_da_Tabela.md)
   Titulo opcional, contagem e menu sanduiche formam a PRIMEIRA faixa dentro
   do card branco. A faixa e montada pelo tabela-avancada.js quando a tabela
   mora num .tabela-card. Sem overflow:hidden no card (o menu precisa vazar
   para fora dele) e o arredondamento de baixo vai para o .tabela-scroll.
   ========================================================================== */

.tabela-card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-sm);
}
.tabela-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 52px;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--borda);
}
.tabela-cab-titulo {
  margin: 0;
  font-family: var(--font-titulo);
  font-size: 15px;
  font-weight: 600;
  color: var(--texto);
}
.tabela-cab-acoes {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
}
.tabela-cab-conta {
  font-size: 13px;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tabela-card .tabela-scroll,
.tabela-card .tabela-scroll .table {
  border: none;
  border-radius: 0 0 var(--raio) var(--raio);
}
/* Com faixa de titulo, o cabecalho das colunas fica branco: duas faixas
   cinza empilhadas pareceriam duas tabelas. */
.tabela-card .table th { background: var(--branco); }

/* ==========================================================================
   SELECTBUSCA (Componente_SelectBusca.md, Sem_Select_Nativo)
   Dropdown customizado. Substitui <select> nativo em todo o projeto.
   ========================================================================== */

.selectbusca { position: relative; min-width: 200px; }

.selectbusca .sb-display {
  height: 40px;
  box-sizing: border-box;
  padding: 0 12px;
  background: var(--branco);
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio-sm);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--texto);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.selectbusca.open .sb-display,
.selectbusca .sb-display:hover { border-color: var(--cor-primaria); }
.selectbusca .sb-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selectbusca .sb-display i { color: var(--texto-fraco); flex-shrink: 0; transition: transform var(--transicao); }
.selectbusca.open .sb-display i { transform: rotate(180deg); }

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

.selectbusca .sb-search {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--borda);
  background: var(--fundo-alt);
  color: var(--texto);
  font-size: 14px;
  font-family: inherit;
}
.selectbusca .sb-search:focus { outline: none; }

.selectbusca .sb-opt {
  padding: 9px 12px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--texto);
}
.selectbusca .sb-opt:hover { background: var(--fundo); color: var(--cor-primaria); }
.selectbusca .sb-opt.sb-opt-ativa { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); font-weight: 600; }
.selectbusca .sb-opt.oculto { display: none; }
/* Opcao em destaque pelo teclado (setas), com o mesmo peso visual do hover. */
.selectbusca .sb-opt.sb-opt-foco { background: var(--fundo); color: var(--cor-primaria-escura); }
.selectbusca .sb-display:focus-visible { border-color: var(--cor-primaria); }

/* No mobile, altura de toque generosa (Responsividade_Sempre:136-145) */
@media (max-width: 720px) {
  .selectbusca .sb-display { height: 44px; }
}

/* ==========================================================================
   BARRA DE BUSCA - SOCIOS (Padrao_Barra_de_Filtros.md, prefixo sc-)
   40px e rotulo 13px sem caixa alta, igual a .dc-bar: vale a nota mais nova
   (Padrao_Formulario:17 e :109). Em 38 a barra destoava da de documentos.
   ========================================================================== */

.sc-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 16px;
  --sc-h: 40px;
}
.sc-bar .g { display: flex; flex-direction: column; gap: 4px; }
.sc-lbl {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-secundario);
}
.sc-bar .input,
.sc-bar .selectbusca .sb-display,
.sc-bar > .btn {
  height: var(--sc-h);
  box-sizing: border-box;
}
.sc-bar .g-busca { flex: 1; min-width: 220px; }
.sc-bar .g-situacao { min-width: 240px; }
.sc-bar .sc-acao { align-self: flex-end; }

@media (max-width: 720px) {
  .sc-bar .g { flex: 1 1 100%; }
}

/* ==========================================================================
   DETALHE DO SOCIO (Padrao_Box_Card.md)
   ========================================================================== */

/* Card de empresa com historico incompleto: variante de aviso
   (Padrao_Box_Card.md:155-163, "Aviso: borda var(--ambar), fundo
   var(--ambar-suave)"). */
.cd-aviso { border-color: var(--ambar); background: var(--ambar-suave); }

.cd-linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.cd-linha .rotulo { color: var(--texto-suave); }
.cd-linha .valor { font-weight: 600; color: var(--texto); text-align: right; }

.cd-aviso-msg {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--ambar);
  font-weight: 600;
}
.cd-aviso-msg i { flex-shrink: 0; margin-top: 1px; }

/* ==========================================================================
   FLASH
   ========================================================================== */

.flash-area {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 380px;
}
@media (max-width: 880px) {
  .flash-area { left: 16px; right: 16px; max-width: none; }
}

.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda);
  background: var(--branco);
  box-shadow: var(--sombra-md);
  font-size: 13px;
}
.flash i { font-size: 17px; flex-shrink: 0; margin-top: 1px; }
.flash-sucesso { border-color: var(--verde);    background: var(--verde-suave); }
.flash-sucesso i { color: var(--verde); }
.flash-error, .flash-danger { border-color: var(--vermelho); background: var(--vermelho-suave); }
.flash-error i, .flash-danger i { color: var(--vermelho); }
.flash-warning { border-color: var(--ambar);    background: var(--ambar-suave); }
.flash-warning i { color: var(--ambar); }
.flash-info    { border-color: var(--azul-info); background: var(--azul-suave); }
.flash-info i  { color: var(--azul-info); }

.flash-fechar {
  margin-left: auto;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--texto-fraco);
  padding: 0 2px;
}

/* ==========================================================================
   BADGE
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--raio-full);
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--borda);
  background: var(--fundo);
  color: var(--texto-secundario);
}
.badge-sucesso { background: var(--verde-suave);    color: var(--verde-texto);    border-color: var(--verde); }
.badge-perigo  { background: var(--vermelho-suave); color: var(--vermelho-texto); border-color: var(--vermelho); }
.badge-aviso   { background: var(--ambar-suave);    color: var(--ambar-texto);    border-color: var(--ambar); }

/* ==========================================================================
   TELA DE LOGIN (standalone, sem sidebar)
   ========================================================================== */

.tela-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--fundo);
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* So o espaco acima do formulario. O conteudo e a marca GEFICON, mais abaixo
   neste arquivo, e ela ja se centraliza sozinha: o logotipo e o mesmo no login
   e na sidebar, e o manual nao admite variacao. */
.login-marca {
  margin-bottom: 4px;
}

.login-card .btn-primario { width: 100%; }

/* ==========================================================================
   TABELA AVANCADA (static/js/tabela-avancada.js)
   Padrao_Tabela.md:119-193 (menu de 3 pontos e popup) e :331-371 (coluna de
   Acoes, ja tratada acima). Tokens EXATOS da nota, so trocando "white" por
   var(--branco) porque nenhuma tela escreve cor literal (Sistema_de_Estilos:13).
   ========================================================================== */

.ta-menu-wrapper { position: relative; }

.ta-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);
}
.ta-menu-btn:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.ta-menu-btn i { font-size: 18px; }

.ta-menu {
  position: absolute; top: 100%; right: 0;
  margin-top: 6px; min-width: 200px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-md);
  display: none; z-index: 50;
}
.ta-menu.aberto { display: block; }
.ta-menu-item {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px; cursor: pointer;
  color: var(--texto);
  text-align: left;
}
.ta-menu-item:hover { background: var(--fundo); color: var(--cor-primaria); }
.ta-menu-item i { font-size: 16px; color: var(--texto-secundario); }
.ta-menu-item:hover i { color: var(--cor-primaria); }
.ta-menu-divider { height: 1px; background: var(--borda); margin: 4px 0; }

/* Popup de Ordenar / Colunas */
.ta-popup {
  position: absolute; top: 100%; right: 0;
  margin-top: 6px; min-width: 320px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-md);
  display: none; z-index: 60;
}
.ta-popup.aberto { display: block; }
.ta-popup-cab {
  padding: 12px 14px;
  border-bottom: 1px solid var(--borda);
  font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.ta-popup-cab i { color: var(--cor-primaria); }
.ta-popup-corpo {
  padding: 12px 14px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ta-popup-rodape {
  padding: 10px 14px;
  border-top: 1px solid var(--borda);
  display: flex; gap: 8px; justify-content: flex-end;
}
.ta-popup-rodape button {
  padding: 7px 14px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda);
  background: var(--branco); cursor: pointer;
  font-size: 12.5px; font-weight: 600;
}
.ta-popup-rodape button:hover { background: var(--fundo); }
.ta-popup-rodape .ta-aplicar {
  background: var(--cor-primaria); color: #fff; border-color: var(--cor-primaria);
}
.ta-popup-rodape .ta-aplicar:hover { background: var(--cor-primaria-escura); }

/* Popup Ordenar: cada regra e coluna + direcao + remover */
.ta-add-ordenacao { align-self: flex-start; }
.ta-ordenar-regra {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ta-ordenar-regra select { flex: 1; }
.ta-popup-vazio { color: var(--texto-fraco); font-size: 12.5px; }

/* Popup Colunas: uma linha por checkbox */
.ta-coluna-opcao {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 13px;
  cursor: pointer;
}

/* Cabecalho da tabela: label + indicador de ordenacao + filtro estilo Excel */
.ta-th { position: relative; }
.ta-th-conteudo {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.ta-th-label { flex: 1; }

.ta-sort-ind {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--cor-primaria);
}
.ta-sort-num {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px;
  border-radius: var(--raio-full);
  background: var(--cor-primaria);
  color: #fff;
  font-size: 9px; font-weight: 700;
}

/* Icone de filtro: some por padrao, aparece no hover do <th> ou quando ja
   tem valor ativo (item 6 do checklist da tarefa). */
.ta-th-filtro-btn {
  opacity: 0;
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: inline-grid; place-items: center;
  border-radius: var(--raio-sm);
  border: none;
  background: transparent;
  color: var(--texto-fraco);
  cursor: pointer;
  transition: opacity var(--transicao), background var(--transicao), color var(--transicao);
}
.ta-th:hover .ta-th-filtro-btn,
.ta-th-filtro-btn.filtro-ativo { opacity: 1; }
.ta-th-filtro-btn:hover { background: var(--fundo); color: var(--texto); }
.ta-th-filtro-btn.filtro-ativo { color: var(--cor-primaria); }

.ta-th-filtro-input {
  display: none;
  margin-top: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--texto);
  background: var(--branco);
}
.ta-th-filtro-input.aberto { display: block; }

/* Hover nao existe no mobile (Responsividade_Sempre:147-154): o icone de
   filtro fica sempre visivel abaixo do breakpoint de drawer. */
@media (max-width: 880px) {
  .ta-th-filtro-btn { opacity: 1; }
}

/* Popup em largura total no mobile, mesmo padrao ja usado em .flash-area
   (Responsividade_Sempre:66 / components.css .flash-area). */
@media (max-width: 520px) {
  .ta-popup {
    position: fixed;
    top: auto; left: 16px; right: 16px; bottom: 16px;
    width: auto; min-width: 0;
    max-height: 70vh;
  }
}

/* ==========================================================================
   LOADING (Padrao_Loading_Estado.md:100-142 e Sempre_Mostrar_Loading.md:15)
   Variante INLINE: o spinner aparece NA AREA que vai receber o resultado.
   Loading dentro do botao e anti-padrao declarado (Padrao_Loading_Estado:87-98).
   ========================================================================== */

.loading-inline {
  padding: 80px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: var(--branco);
}

/* 44x44, borda 4px, .8s linear infinite e cor --cor-primaria sao os valores
   literais da nota (Padrao_Loading_Estado:129-136 e regra 4 em :324). */
.loading-inline .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 .loading-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--texto);
}

@keyframes spinner-rotate { to { transform: rotate(360deg); } }

/* ==========================================================================
   UPLOAD (Padrao_Upload_Arquivo.md:65-153, prefixo im- da nota)
   ========================================================================== */

.im-card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--sombra-sm);
}
.im-card h3 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

/* Estado inicial: tracejado (Padrao_Upload_Arquivo:229-233) */
.im-drop {
  display: block;
  border: 2px dashed var(--borda);
  border-radius: var(--raio);
  padding: 32px;
  text-align: center;
  color: var(--texto-secundario);
  cursor: pointer;
  transition: .15s;
  user-select: none;
  margin-top: 16px;
}

/* Hover ou arrastando por cima: cor primaria */
.im-drop:hover,
.im-drop.over {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);
  border-style: solid;
}

/* Carregado: verde. Tokens do projeto no lugar do hex literal que a nota
   escreve, que e exatamente o mesmo valor (tokens.css --verde/--verde-suave). */
.im-drop.loaded {
  border-style: solid;
  border-color: var(--verde);
  background: var(--verde-suave);
  color: var(--verde);
}

.im-drop i {
  font-size: 36px;
  display: block;
  margin-bottom: 6px;
}

.im-arq {
  color: var(--verde);
  font-weight: 600;
  margin-top: 6px;
  display: block;
  font-size: 12px;
  word-break: break-word;
}

/* Input file escondido off-screen: nunca o visual nativo do browser
   (Padrao_Upload_Arquivo:289). */
.im-inp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Lista de arquivos do lote, cada um com botao de remover
   (Padrao_Upload_Arquivo:252). */
.im-lista {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.im-lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  font-size: 13px;
}
.im-item-nome { flex: 1; min-width: 0; }
.im-item-tam {
  color: var(--texto-fraco);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.im-acao {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
}
#dcBotao:disabled { opacity: .45; cursor: not-allowed; }

/* Mensagem inline ao lado do botao, verde se ok e vermelho se erro
   (Padrao_Upload_Arquivo:293). */
.im-msg { font-size: 12.5px; color: var(--verde); }
.im-msg.erro { color: var(--vermelho); }

/* ==========================================================================
   BARRA DE FILTROS DE DOCUMENTOS
   Prefixo dc-, altura unica --dc-h: 40px.

   Duas notas do vault descrevem esta barra e discordam. A antiga,
   Padrao_Barra_de_Filtros:14 e :18, manda "--fu-h: 38px" e label "uppercase,
   pequeno (11px)". A nova, Padrao_Formulario:109, responde a ela com todas as
   letras -- "Nao 38px, nao 36px. 40px." -- e :17 fecha o label em "13px,
   weight 600, SEM uppercase, SEM letter-spacing".

   Vale a nova, por instrucao do Jean em 07/08/2026. Nao e questao de gosto:
   a barra de conferencia (.cf-bar) e a do projeto (.ra-bar) ja nasceram em
   40px, entao manter esta em 38 deixaria a mesma tela com duas reguas.
   ========================================================================== */

.dc-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 16px;
  --dc-h: 40px;
}
.dc-bar .g { display: flex; flex-direction: column; gap: 4px; }
.dc-lbl {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-secundario);
}
.dc-bar .input,
.dc-bar .selectbusca .sb-display,
.dc-bar .btn {
  height: var(--dc-h);
  box-sizing: border-box;
}
.dc-bar .g-busca { flex: 1; min-width: 220px; }
.dc-bar .g-status { min-width: 200px; }
.dc-bar .dc-acao { align-self: flex-end; }

@media (max-width: 720px) {
  .dc-bar .g { flex: 1 1 100%; }
}

/* Fila de leitura ao vivo. Uma linha por PDF que o worker esta lendo em
   segundo plano, com spinner e "Processando...". Preenchida e mostrada pelo
   polling de documentos.js; nasce com [hidden]. Le como linhas da lista, acima
   da tabela real (decisao do Jean: "linha na lista ao vivo"). */
.dc-fila {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 16px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  overflow: hidden;
}
.dc-fila-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
.dc-fila-item:last-child { border-bottom: 0; }
.dc-fila-nome {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--texto-primario);
}
.dc-fila-estado {
  font-size: 12px;
  font-weight: 600;
  color: var(--cor-primaria);
  white-space: nowrap;
}
.dc-spin {
  color: var(--cor-primaria);
  animation: spinner-rotate .8s linear infinite;
}
/* Desfecho terminal de cada arquivo depois que a fila fecha o lote. Cor no
   icone e no rotulo, mesma familia dos badges de status da tabela. */
.dc-fila-item.is-ok    .ph, .dc-fila-item.is-ok    .dc-fila-estado { color: var(--sucesso); }
.dc-fila-item.is-aviso .ph, .dc-fila-item.is-aviso .dc-fila-estado { color: var(--aviso); }
.dc-fila-item.is-erro  .ph, .dc-fila-item.is-erro  .dc-fila-estado { color: var(--perigo); }
.dc-fila-item.is-info  .ph, .dc-fila-item.is-info  .dc-fila-estado { color: var(--texto-secundario); }

/* ==========================================================================
   DETALHE DO DOCUMENTO (Padrao_Box_Card.md)
   ========================================================================== */

/* Variante de erro do card (Padrao_Box_Card:155-161, linha "Erro"). */
.cd-perigo { border-color: var(--vermelho); background: var(--vermelho-suave); }
.cd-texto { margin: 0; font-size: 13px; color: var(--texto); }

.secao-titulo {
  font-family: var(--font-titulo);
  font-size: 16px;
  font-weight: 600;
  margin: 20px 0 12px;
}

/* Linha "lido do documento X" sob o titulo da secao (decisao 15-B): cola no
   titulo e deixa o respiro antes dos campos. */
.origem-dado { margin: -6px 0 12px; display: flex; gap: 6px; align-items: baseline; }

/* Linha de toggle de acao direta com rotulo e ajuda ao lado.

   O .cv-sw e desenhado para celula de tabela: 42x24 fixo, com a pista em
   position:absolute. Solto dentro de um .campo de formulario, o rotulo e o
   texto de ajuda escorrem para o lado dele e a linha sai torta. Aqui ele
   ganha o container que faltava: switch a esquerda, texto em coluna a
   direita (Padrao_Toggle_OnOff, variante "toggle inline com label"). */
.linha-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px;
}
.linha-toggle-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.linha-toggle-titulo {
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.linha-toggle .ajuda { max-width: 60ch; }

/* Segunda linha dentro da celula da tabela: CNPJ sob a empresa, motivo sob o
   status. Nao e coluna nova, e detalhe da mesma informacao. */
.sub-celula {
  font-size: 12px;
  color: var(--texto-suave);
  max-width: 260px;
}

.lista-flags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lista-flags li { display: flex; gap: 8px; align-items: flex-start; }
.lista-flags i { color: var(--ambar); flex-shrink: 0; margin-top: 2px; }
.flag-msg { font-size: 13px; font-weight: 600; color: var(--texto); }
.flag-cpfs { font-size: 13px; color: var(--texto); font-variant-numeric: tabular-nums; margin-top: 2px; }

/* Trecho do PDF de onde o campo saiu. E o que torna o erro auditavel sem
   tela de conferencia (CLAUDE.md, decisao 6). */
.origem {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--borda);
}
.origem-rotulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-fraco);
}
.origem-trecho {
  font-size: 12px;
  color: var(--texto-secundario);
  background: var(--fundo);
  border-radius: var(--raio-sm);
  padding: 8px 10px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
}

/* ==========================================================================
   BARRA DE FILTROS DE EMPRESAS (Padrao_Barra_de_Filtros.md:56-102)
   Prefixo ep-, altura unica --ep-h: 40px, igual a .dc-bar (Padrao_Formulario:109).
   ========================================================================== */

.ep-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 16px;
  --ep-h: 40px;
}
.ep-bar .g { display: flex; flex-direction: column; gap: 4px; }
.ep-lbl {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-secundario);
}
.ep-bar .input,
.ep-bar .selectbusca .sb-display,
.ep-bar .btn {
  height: var(--ep-h);
  box-sizing: border-box;
}
.ep-bar .g-busca { flex: 1; min-width: 220px; }
.ep-bar .g-historico { min-width: 230px; }
.ep-bar .ep-acao { align-self: flex-end; }

@media (max-width: 720px) {
  .ep-bar .g { flex: 1 1 100%; }
}

/* ==========================================================================
   LINHA DO TEMPO SOCIETARIA (componente NOVO)

   Nao ha nota de timeline na vault: procurei em _MAPA_CHAVES, _MAPA_ROTA e
   01_SISTEMAS/00_INDEX. Construido so com token existente (cor, raio, espaco),
   dentro de um .cd, para poder virar nota depois sem retrabalho.
   ========================================================================== */

.linha-tempo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.lt-item {
  display: flex;
  gap: 12px;
  padding: 0 0 16px;
  position: relative;
}

/* Fio que liga os eventos. O ultimo nao tem fio, senao a linha morre no ar. */
.lt-item::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 0;
  width: 2px;
  background: var(--borda);
}
.lt-item:last-child { padding-bottom: 0; }
.lt-item:last-child::before { display: none; }

.lt-marca {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--raio-full);
  display: grid;
  place-items: center;
  background: var(--fundo);
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  font-size: 14px;
  z-index: 1;
}

/* Cor por tipo de evento: entrada e verde, saida e vermelha, presenca fica
   neutra porque nao e um fato de entrada, e sim a constatacao de que o socio
   ja estava la (CLAUDE.md, decisao 10). */
.lt-entrada .lt-marca {
  background: var(--verde-suave);
  border-color: var(--verde);
  color: var(--verde);
}
.lt-saida .lt-marca {
  background: var(--vermelho-suave);
  border-color: var(--vermelho);
  color: var(--vermelho);
}

.lt-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.lt-linha {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}
.lt-data {
  font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
  min-width: 82px;
}
.lt-rotulo { font-weight: 600; color: var(--texto); }

.lt-doc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--texto-suave);
  max-width: 100%;
}
.lt-doc:hover { color: var(--cor-primaria); }
.lt-doc i { flex-shrink: 0; }

/* Rotulo que precede a data no quadro societario ("Entrou em" x "Presente
   desde"). Fica menor que a data porque a data e o dado, o rotulo e a
   ressalva. */
.rotulo-desde {
  display: block;
  font-size: 11px;
  color: var(--texto-fraco);
}

/* ==========================================================================
   SELETOR DE EMPRESA NA TOPBAR (componente novo)

   Padrao_Menu_Sidebar rege a sidebar e a tipografia da topbar, mas nao tem
   seletor de contexto; Padrao_Acao_Primaria_na_Topbar trata de botao de acao.
   Entao aqui e composicao: SelectBusca (Componente_SelectBusca) encolhido
   para caber na topbar de 58px, com os tokens de sempre.
   ========================================================================== */

.topo-foco { display: flex; align-items: center; min-width: 0; }

.selectbusca.sb-foco { min-width: 0; width: 260px; }

.selectbusca.sb-foco .sb-display {
  height: 34px;
  padding: 0 10px;
  gap: 8px;
  font-size: 13px;
  border-radius: var(--raio-sm);
  background: var(--fundo);
}
.selectbusca.sb-foco .sb-display:hover { border-color: var(--cor-primaria); }
.selectbusca.sb-foco .sb-label { min-width: 0; font-weight: 600; }
.selectbusca.sb-foco .sb-display > i { color: var(--texto-suave); flex-shrink: 0; }

/* Enquanto o servidor grava o foco e a pagina nao recarregou. */
.selectbusca.sb-ocupado { opacity: .6; pointer-events: none; }

/* Em tela pequena o nome da empresa some antes da topbar quebrar. */
@media (max-width: 880px) {
  .selectbusca.sb-foco { width: 150px; }
}
@media (max-width: 520px) {
  .topo-foco { display: none; }
}

/* Faixa que avisa que ha filtro de contexto ligado. Cor de info, nao de erro:
   nada esta errado, so escondido de proposito. */
.aviso-contexto {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--azul-info);
  background: var(--azul-suave);
  border-radius: var(--raio-sm);
  font-size: 13px;
  color: var(--texto);
}
.aviso-contexto i { color: var(--azul-info); flex-shrink: 0; }

/* ==========================================================================
   MODAL (Padrao_Modal.md:99-220)

   Tamanho SEMPRE em vw/vh, nunca px (:373): modal calibrado em pixel num
   monitor grande fica minusculo no ultrawide e estoura no notebook.
   ========================================================================== */

.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}
.modal-bg.visivel { display: flex; }

.modal-caixa {
  background: var(--branco);
  border-radius: var(--raio-lg);
  width: 100%;
  overflow-y: auto;
  box-shadow: var(--sombra-lg);
  animation: modalSobe .2s ease;
}

/* Fibonacci 34-55-89 (Padrao_Modal.md:122-125) */
.modal-caixa.modal-sm { width: 34vw; max-height: 42vh; }
.modal-caixa.modal-md { width: 55vw; max-height: 70vh; }
.modal-caixa.modal-lg { width: 89vw; max-height: 90vh; }

@media (max-width: 1280px) {
  .modal-caixa.modal-md { width: 68vw; }
}
@media (max-width: 880px) {
  .modal-caixa.modal-sm,
  .modal-caixa.modal-md,
  .modal-caixa.modal-lg { width: 96vw; max-height: 92vh; }
}

/* Caixa sem tamanho declarado cai no md, que a nota chama de default seguro. */
.modal-caixa:not(.modal-sm):not(.modal-md):not(.modal-lg):not(.modal-confirm) {
  width: 55vw;
  max-height: 70vh;
}

@keyframes modalSobe {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-cab {
  padding: 18px 22px;
  border-bottom: 1px solid var(--borda);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-cab h3 { font-size: 17px; }

.modal-x {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--texto-fraco);
  display: grid;
  place-items: center;
}
.modal-x:hover { color: var(--texto); }

.modal-corpo { padding: 22px; }

/* Primario a DIREITA (Padrao_Modal.md:78). */
.modal-rodape {
  padding: 16px 22px;
  border-top: 1px solid var(--borda);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Confirmacao destrutiva: texto centralizado e icone vermelho (:374). */
.modal-caixa.modal-confirm {
  width: 34vw;
  max-height: 42vh;
  text-align: center;
}
@media (max-width: 880px) {
  .modal-caixa.modal-confirm { width: 96vw; max-height: 92vh; }
}
.confirm-corpo { padding: 32px 28px 12px; }
.confirm-corpo h3 { font-size: 18px; margin-bottom: 8px; }
.confirm-corpo p { color: var(--texto-suave); font-size: 14px; line-height: 1.5; }

.confirm-icone {
  width: 68px;
  height: 68px;
  border-radius: var(--raio-full);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
}
.confirm-icone i { font-size: 36px; }
.confirm-icone.confirm-perigo { background: var(--vermelho-suave); color: var(--vermelho); }
.confirm-icone.confirm-aviso  { background: var(--ambar-suave);    color: var(--ambar); }
.confirm-icone.confirm-info   { background: var(--azul-suave);     color: var(--azul-info); }

.modal-confirm .modal-rodape { justify-content: center; }

/* --------------------------------------------------------------------------
   Variante popup-centrado: <dialog> HTML5 quando o modal contem SelectBusca
   (Padrao_Modal_Popup_Centrado.md:29-52). Sem overflow visivel, o dropdown do
   SelectBusca e cortado pela borda do dialog.
   -------------------------------------------------------------------------- */

dialog.popup-centrado {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: 0;
  border-radius: var(--raio);
  padding: 0;
  max-width: 520px;
  width: 92%;
  background: var(--branco);
  box-shadow: var(--sombra-lg);
  overflow: visible !important;   /* CRITICO: sem isso o SelectBusca corta */
}
dialog.popup-centrado::backdrop {
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(2px);
}
.popup-corpo { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }

/* ==========================================================================
   TOGGLE ON/OFF (Padrao_Toggle_OnOff.md:36-83)
   42x24, verde no ON, checkbox real escondido com label clicavel.
   ========================================================================== */

.cv-sw {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  vertical-align: middle;
}
/* O input fica invisivel mas FOCAVEL: com display:none o interruptor saia da
   ordem do Tab e o teclado nao alcancava (WCAG 2.1.1). */
.cv-sw input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.cv-sw label {
  position: absolute;
  inset: 0;
  background: var(--borda);
  border-radius: var(--raio-full);
  cursor: pointer;
  transition: .15s;
}
.cv-sw label::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: var(--branco);
  border-radius: 50%;
  transition: .15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.cv-sw input:checked + label { background: var(--verde); }
.cv-sw input:checked + label::after { transform: translateX(18px); }

/* Foco visivel pelo teclado (Padrao_Toggle_OnOff.md:216-220). */
.cv-sw input:focus-visible + label {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

/* Toggle bloqueado por regra de negocio: o admin inicial e a propria conta
   nao podem ser desativados, e o motivo vai no title. */
.cv-sw.bloqueado label { opacity: .35; cursor: not-allowed; }

/* ==========================================================================
   MATRIZ DE PERMISSOES (Matriz_VER_EDITAR.md:38-45)
   ========================================================================== */

.perm-grupo { margin-bottom: 18px; }
.perm-grupo-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.perm-grupo-nome {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-secundario);
}
.perm-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.perm-auto {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--texto-suave);
}
.perm-check { display: grid; place-items: center; }
.perm-check input { width: 18px; height: 18px; accent-color: var(--cor-primaria); }

/* Barra de acao no rodape de formulario de pagina inteira (permissoes,
   seguranca). Botao primario a direita, mesma logica do rodape de modal
   (Padrao_Modal.md:78). */
.acoes-rodape {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 16px 0 8px;
}

/* ==========================================================================
   KPI DE DASHBOARD (Padrao_KPI_Dashboard.md:39-146)

   So em dashboard, visao geral e relatorio. Em listagem operacional, nunca
   (Listagens_sem_KPI.md:17).

   A nota nasceu no dominio financeiro e traz gradientes com hex literal. Aqui
   a estrutura e a mesma (grid, faixa de 3px, icone 44x44, min-heights), com os
   tokens do projeto no lugar dos literais: hex fora de tokens.css e proibido e
   tem teste que quebra. As classes tambem ganham nome deste dominio.
   ========================================================================== */

.kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 1300px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

.kpi {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Faixa colorida superior de 3px, que diz o tipo do indicador. */
.kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--borda-forte);
}
.kpi.kpi-cadastro::before { background: linear-gradient(90deg, var(--cor-primaria), var(--cor-primaria-escura)); }
.kpi.kpi-doc::before      { background: linear-gradient(90deg, var(--verde), var(--verde)); }
.kpi.kpi-acesso::before   { background: linear-gradient(90deg, var(--texto-secundario), var(--texto)); }
.kpi.neg::before          { background: linear-gradient(90deg, var(--vermelho), var(--vermelho)); }

/* Icone 44x44 com fundo pastel. flex-shrink: 0 para nao comprimir quando o
   valor e longo (Padrao_KPI_Dashboard.md:226). */
.kpi .ico {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
  align-self: center;
  background: var(--fundo);
  color: var(--texto-secundario);
}
.kpi.kpi-cadastro .ico { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }
.kpi.kpi-doc .ico      { background: var(--verde-suave);        color: var(--verde); }
.kpi.kpi-acesso .ico   { background: var(--fundo);              color: var(--texto-secundario); }
.kpi.neg .ico          { background: var(--vermelho-suave);     color: var(--vermelho); }

.kpi .corpo {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* min-height na label e na legenda: e o que mantem o valor de todos os cards
   na mesma linha-base quando um label ocupa duas linhas e outro uma
   (Padrao_KPI_Dashboard.md:223-224). */
.kpi .lbl {
  font-size: 10.5px;
  color: var(--texto-secundario);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 700;
  line-height: 1.2;
  min-height: 25px;
  display: flex;
  align-items: flex-end;
}
.kpi .val {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
.kpi .disc {
  font-size: 10.5px;
  color: var(--texto-fraco);
  margin-top: 4px;
  line-height: 1.2;
  font-style: italic;
  min-height: 14px;
}

/* Estado que pede acao pinta o card inteiro. Aqui so o vermelho e usado, e so
   quando ha documento rejeitado esperando alguem ler o motivo: pintar de
   vermelho um zero treinaria o usuario a ignorar a cor. */
.kpi.neg { background: var(--vermelho-suave); border-color: var(--vermelho); }
.kpi.neg .lbl,
.kpi.neg .val { color: var(--vermelho); }

@media (max-width: 720px) {
  .kpi { padding: 12px 11px; gap: 9px; }
  .kpi .ico { width: 36px; height: 36px; font-size: 18px; border-radius: 9px; }
  .kpi .lbl { font-size: 9.5px; min-height: 23px; }
  .kpi .val { font-size: 18px; }
  .kpi .disc { font-size: 10px; min-height: 13px; }
}

/* Linha do seletor de cor da tela de identidade: o quadrado nativo mais o
   hexadecimal em texto, porque so o quadrado nao diz qual e o codigo. */
.linha-cor { display: flex; align-items: center; gap: 10px; }
.linha-cor input[type="color"] {
  width: 56px;
  height: 40px;
  padding: 2px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--branco);
  cursor: pointer;
}
.cor-valor {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--texto-secundario);
}

/* ==========================================================================
   MARCA GEFICON (GEFICON_Manual_de_Marca.md)

   O logotipo tem TRES elementos inseparaveis (:56-62): a palavra GEFICON em
   degrade aluminio, a linha de destaque ambar, e a tagline. Nunca aparecem
   separados nem reorganizados (:103).

   Aqui vale a aplicacao sobre FUNDO CLARO (:70-74), porque o app tem tema
   claro: degrade cinza escuro no logotipo e ambar escuro na linha e na
   tagline. O ambar claro #DEAD2F e para fundo preto e nao entra.

   Os tons desta secao sao da marca, nao do tema: por isso vivem em tokens.css
   como --marca-*, e nao como cor solta aqui (Sistema_de_Estilos:13).
   ========================================================================== */

/* Centralizado, e nao alinhado a esquerda. O logotipo do manual e simetrico: a
   linha ambar e a tagline sao construidas em torno do eixo da palavra GEFICON
   (:56-62), entao encostar tudo a esquerda desalinha os tres elementos entre
   si. Vale igual na sidebar e no login: o manual nao admite variacao (:103). */
.marca-geficon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 0;
}

/* A palavra GEFICON, com o degrade recortado no proprio texto. */
.marca-geficon .marca-nome-geficon {
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .06em;
  background: linear-gradient(180deg, var(--marca-metal-claro), var(--marca-metal-escuro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback para navegador sem background-clip: text. Sem isso a palavra
     sumiria, e o manual proibe o logotipo aparecer incompleto. */
  -webkit-text-fill-color: transparent;
}

/* A linha de destaque. Gradiente com transparencia nas pontas, como :67. */
.marca-geficon .marca-linha {
  height: 2px;
  width: 100%;
  max-width: 190px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--cor-primaria) 15%,
    var(--cor-primaria) 85%,
    transparent
  );
}

/* Tagline: caixa alta e tracking ampliado (:68 e :95). */
.marca-geficon .marca-tagline {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cor-primaria-escura);
  line-height: 1.3;
}

/* Nome do sistema abaixo da marca. E o produto, nao a marca: fica menor e em
   cinza, para nao competir com o logotipo (Manual :29, hierarquia visual). */
.marca-geficon .marca-produto {
  font-size: 11px;
  font-weight: 500;
  color: var(--texto-fraco);
  margin-top: 2px;
}


/* ==========================================================================
   Tela de conferencia do documento lido por OCR (templates/documentos/conferir.html)
   Prefixo cf-.

   Cumpre Padrao_Formulario.md na integra, e NAO copia o `.dc-bar` acima:
   aquele usa 38px e label em maiuscula, que a nota barra em :109 ("Nao 38px,
   nao 36px. 40px") e em :17 (label 13px/600 sem uppercase). Ele e legado e
   nao se ajusta em silencio; aqui o padrao entra certo desde o inicio.
   ========================================================================== */

.cf-bar {
  display: flex;
  gap: 14px;
  align-items: flex-end;        /* alinha pela BASE, porque tem label acima */
  flex-wrap: wrap;              /* quebra em tela pequena, nao estoura */
}

.cf-bar .campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Label moderno: 13px, 600, SEM uppercase e SEM letter-spacing
   (Padrao_Formulario:17). Uppercase so em grupo de menu, cabecalho de tabela
   e label de KPI. */
.cf-bar .campo > label {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-secundario);
}

/* 40px em TUDO que e controle da barra (Padrao_Formulario:107-111). */
.cf-bar .input,
.cf-bar .selectbusca .sb-display,
.cf-bar > .btn,
.cf-bar .campo > .btn {
  height: 40px;
  box-sizing: border-box;
}

/* O botao precisa de mais que `height` para ficar em 40px, e isso custou uma
   medicao para descobrir. Ele e filho de `.campo`, que e flex em COLUNA, entao
   a vertical e o eixo principal e o `min-height: auto` dos itens flex impede
   que ele encolha abaixo do proprio conteudo. Media 44px com a altura
   declarada em 40, sem nenhuma regra sobrescrevendo.

   Zerar o padding vertical e o min-height resolve sem mexer no `.btn` global:
   o botao ja e inline-flex centralizado, entao o conteudo continua no meio.

   E vale SO no desktop, dentro de media query, e isso nao e detalhe: o
   `.btn { min-height: 44px }` do mobile (linha 104) e o alvo de toque da
   `Responsividade_Sempre:138` ("Botoes precisam de 44x44px minimo"). Sem a
   media query aqui, esta regra tem especificidade maior e vencia tambem no
   celular, encolhendo o botao para 40px -- ou seja, o conserto de uma nota
   quebrava a outra em silencio. Medido: 40px no desktop, 44px em 375px de
   largura. A .dc-bar sempre se comportou assim; era esta barra que destoava. */
@media (min-width: 721px) {
  .cf-bar .campo > .btn,
  .cf-bar > .btn {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

.cf-bar .input { min-width: 240px; }
.cf-bar .selectbusca { min-width: 170px; }

/* Campo do botao: o <label>&nbsp;</label> do template dá a ele a mesma altura
   total dos campos de input, e o botao nunca leva flex (Padrao_Formulario:123-129). */
.cf-bar .cf-acao { flex: 0 0 auto; }

/* Faixa de origem do texto: selo e uma frase na mesma linha. */
.cf-faixa { flex-direction: row; align-items: center; gap: var(--sp-3); padding: 12px 16px; }
.cf-faixa .badge { flex-shrink: 0; }
.cf-faixa .cd-texto { flex: 1; margin: 0; }

/* O formulario da conferencia empilha cards; sem gap eles colavam (0px). */
#cfForm { display: flex; flex-direction: column; gap: var(--sp-4); }

.cf-socio {
  padding: 14px 0;
  border-bottom: 1px dashed var(--borda);
}
.cf-socio:last-child { border-bottom: 0; }

.cf-check .cf-checkline {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;                 /* acompanha a altura dos demais controles */
  font-size: 14px;
  font-weight: 400;
  color: var(--texto);
  white-space: nowrap;
}
.cf-check .cf-checkline > label { cursor: pointer; }
/* Titulo do campo com o mesmo desenho do <label> dos outros .campo: o
   <label> de verdade agora e a frase ao lado do interruptor. */
.cf-check-titulo { font-size: 13px; font-weight: 600; color: var(--texto-secundario); }

.cf-add {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
}

.cf-fechar .cf-bar { align-items: flex-end; }

.cf-descartar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0;
}

.cf-texto { margin-bottom: 24px; }
.cf-texto summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-secundario);
  padding: 8px 0;
}
.cf-texto-ocr {
  max-height: 380px;
  overflow: auto;               /* texto longo rola dentro do bloco */
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--texto-secundario);
}

@media (max-width: 880px) {
  .cf-bar .input,
  .cf-bar .selectbusca { min-width: 100%; }
  .cf-bar .campo { width: 100%; }
}

/* Larguras dos campos como CLASSE, nao style inline.

   O `Padrao_Formulario` escreve `style="flex:1"` no HTML canonico, mas este
   projeto tem verificacao mecanica que barra CSS inline em template
   (tests/test_telas.py). Em conflito, a verificacao do projeto vence: ela e
   automatica e o inline era so conveniencia da nota. Os valores sao os mesmos
   da tabela de larguras da nota (:131-140). */
.cf-bar .cf-principal { flex: 1; }
.cf-bar .cf-w-90 .input  { min-width: 90px; }
.cf-bar .cf-w-140 .input { min-width: 140px; }
.cf-bar .cf-w-160 .input { min-width: 160px; }
.cf-bar .cf-w-180 .input { min-width: 180px; }

/* ==========================================================================
   ABAS DO DETALHE DO SOCIO (Padrao_Tabs)
   --------------------------------------------------------------------------
   Aba e SUBLINHADO, nunca pilula: Padrao_Tabs:141 registra a pilula como
   visual de TOGGLE, e o clique aqui so troca a view (Cards x Arvore), nao
   muda valor nenhum no servidor.
   ========================================================================== */

.sc-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--borda);   /* Padrao_Tabs:59, a regua */
  margin-bottom: var(--sp-4);
}

.sc-tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-secundario);
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;    /* reserva o espaco do sublinhado */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

.sc-tab:hover { color: var(--texto); }

.sc-tab.ativo {
  color: var(--cor-primaria);
  border-bottom-color: var(--cor-primaria);
}

.sc-pane { display: none; }
.sc-pane.ativo { display: block; }

/* ==========================================================================
   ARVORE HIERARQUICA DO SOCIO
   --------------------------------------------------------------------------
   Tres andares: o socio na raiz, as empresas dele, e dentro de cada empresa
   os demais socios dela. Indentada com tronco e conector em L, no lugar de
   organograma horizontal de caixinhas: razao social e nome de pessoa sao
   textos longos, e caixinha centralizada estoura os 1280px do laptop, o que
   Responsividade_Sempre:126 proibe.
   ========================================================================== */

.ar-arvore,
.ar-galhos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ar-galhos {
  margin-left: 20px;
  padding-left: 22px;
}

.ar-no { position: relative; margin-top: var(--sp-2); }

/* O tronco vertical, desenhado por NO e nao como borda do UL: a borda do UL
   desceria ate o fim do ultimo galho, ou seja, ao lado dos netos dele, e a
   arvore pareceria ter um filho a mais que nunca chega. Por no, o ultimo
   irmao para a linha no proprio conector. */
.ar-galhos > .ar-no::before {
  content: "";
  position: absolute;
  left: -22px;
  top: calc(var(--sp-2) * -1);   /* atravessa o vao entre irmaos */
  bottom: 0;
  width: 1px;
  background: var(--borda-forte);
}

.ar-galhos > .ar-no:last-child::before {
  bottom: auto;
  height: calc(24px + var(--sp-2));
}

/* O conector em L: do tronco ate a borda do cartao. Os 24px miram a altura do
   avatar, para a linha chegar no meio do cartao e nao no canto de cima. */
.ar-galhos > .ar-no::after {
  content: "";
  position: absolute;
  left: -22px;
  top: 24px;
  width: 22px;
  height: 1px;
  background: var(--borda-forte);
}

.ar-cartao {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 12px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-sm);
  color: var(--texto);
  text-decoration: none;
  position: relative;
}

.ar-raiz {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
}

/* Cartao clicavel: Padrao_Box_Card:102 manda mexer so em borda, sombra e
   deslocamento. NUNCA no fundo. */
.ar-pessoa,
.ar-clicavel {
  cursor: pointer;
  transition: var(--transicao);
}

.ar-pessoa:hover,
.ar-clicavel:hover {
  border-color: var(--cor-primaria);
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}

.ar-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--raio-full);
  background: var(--fundo);
  border: 1px solid var(--borda);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-suave);
  font-size: 15px;
}

.ar-raiz .ar-avatar {
  background: var(--branco);
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
}

.ar-corpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;      /* deixa o texto quebrar dentro do flex */
  flex: 1;
}

/* Quebra em vez de reticencias, pelo mesmo motivo do nome de arquivo na
   listagem de documentos (CLAUDE.md): o que distingue uma empresa da outra
   costuma morar no FIM do nome, que e o pedaco que as reticencias comem. */
.ar-nome {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.ar-meta {
  font-size: 12px;
  color: var(--texto-suave);
  overflow-wrap: anywhere;
}

/* O botao que abre o galho ocupa a area util do cartao, para o alvo de
   clique ser o cartao inteiro e nao so a setinha. */
.ar-abrir {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.ar-abrir[disabled] { cursor: default; }

.ar-seta {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--texto-suave);
  transition: var(--transicao);
}

.ar-abrir[disabled] .ar-seta { visibility: hidden; }

.ar-no.aberto > .ar-cartao .ar-seta { transform: rotate(90deg); }

.ar-fechado { display: none; }

.ar-ir {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--raio-sm);
  color: var(--texto-suave);
  text-decoration: none;
}

.ar-ir:hover {
  background: var(--fundo);
  color: var(--cor-primaria);
}

.ar-ir-icone {
  flex-shrink: 0;
  color: var(--texto-fraco);
  font-size: 14px;
}

@media (max-width: 720px) {
  /* Indentacao menor: em 360px, 22px por andar comeria metade da largura no
     terceiro nivel. */
  .ar-galhos { margin-left: 8px; padding-left: 14px; }
  .ar-galhos > .ar-no::before { left: -14px; }
  .ar-galhos > .ar-no::after { left: -14px; width: 14px; }

  /* Badge e data descem para a linha de baixo em vez de espremer o nome. */
  .ar-cartao { flex-wrap: wrap; }

  /* Responsividade_Sempre:138, alvo de toque de 44px. */
  .ar-ir { width: 44px; height: 44px; }
}

/* ---------------------------------------------------------------------------
   Especialidades do socio (decisao 15): chips de escolha multipla.

   O picker (SelectBusca) oferece as ativas; cada escolha vira um chip com o
   hidden especialidade_ids. .sb-usada tira do picker a opcao ja escolhida -
   persiste atraves da busca do SelectBusca, que so mexe em .oculto.
   --------------------------------------------------------------------------- */
#espPicker .sb-opt.sb-usada { display: none; }

.esp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.esp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 12px;
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);
  border: 1px solid var(--borda);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.esp-chip-nome { white-space: nowrap; }

.esp-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--cor-primaria-escura);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transicao);
}
.esp-chip-x:hover { background: rgba(0, 0, 0, .08); }

/* No botao de acao da barra de formulario, alinhar pela base como os demais
   .campo (o <label>&nbsp;</label> ja garante a altura). */
.esp-nova-campo { justify-content: flex-end; }
.esp-nova-campo > .btn { height: 40px; box-sizing: border-box; align-self: flex-start; }
/* Filho de coluna flex: o min-height:auto nao deixa o botao descer a 40px
   (mesmo caso da .cf-bar). So no desktop, para o toque de 44px sobreviver. */
@media (min-width: 721px) {
  .esp-nova-campo > .btn { min-height: 0; padding-top: 0; padding-bottom: 0; }
}

.esp-vazio { margin-top: 10px; }

/* Leitura (detalhe do socio): chip sem o X, e a linha empilha rotulo e chips. */
.cd-linha-bloco { flex-direction: column; align-items: stretch; gap: 8px; }
.esp-chips-leitura { margin-top: 0; justify-content: flex-start; }
.esp-chip-leitura { padding: 5px 12px; }

/* Erro inline do cadastro rapido no modal. */
.erro-inline {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--vermelho);
}