/* 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;
}

.btn-primario {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: #fff;
}
.btn-primario:hover {
  background: var(--cor-primaria-escura);
  border-color: var(--cor-primaria-escura);
  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); }

.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);
  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-fraco); }

@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; }
}

.ajuda { font-size: 12px; color: var(--texto-fraco); }

/* 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); }
}

/* ==========================================================================
   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);
  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; }

/* 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-)
   ========================================================================== */

.sc-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 16px;
  --sc-h: 38px;
}
.sc-bar .g { display: flex; flex-direction: column; gap: 4px; }
.sc-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  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);    border-color: var(--verde); }
.badge-perigo  { background: var(--vermelho-suave); color: var(--vermelho); border-color: var(--vermelho); }
.badge-aviso   { background: var(--ambar-suave);    color: var(--ambar);    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 (Padrao_Barra_de_Filtros.md:56-102)
   Prefixo dc-, altura unica --dc-h: 38px.
   ========================================================================== */

.dc-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 16px;
  --dc-h: 38px;
}
.dc-bar .g { display: flex; flex-direction: column; gap: 4px; }
.dc-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  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%; }
}

/* ==========================================================================
   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;
}

/* 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); }

/* 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: 38px.
   ========================================================================== */

.ep-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 16px;
  --ep-h: 38px;
}
.ep-bar .g { display: flex; flex-direction: column; gap: 4px; }
.ep-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  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;
}
.cv-sw input { display: none; }
.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;
}