/* ==========================================================================
   Grupo Lassais — componentes do painel único (GP-0032) · v1.0
   Depende de ../tokens.css. Prefixo de classe: gl-  (Grupo Lassais).
   Nenhuma cor/medida literal aqui: tudo vem dos tokens.
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
[hidden] { display: none !important; }
body.gl {
  margin: 0;
  font-family: var(--fonte);
  font-feature-settings: var(--fonte-recursos);
  font-size: var(--texto-md);
  line-height: var(--altura-normal);
  color: var(--txt);
  background: var(--sup-fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* GP-0064: regras-base com peso de elemento (0,0,1): antes `.gl :where(…)` (0,1,0) empatava com as classes
   utilitárias das telas da Central e, carregada depois, apagava a cor do texto dos botões primários. */
:where(.gl) h1, :where(.gl) h2, :where(.gl) h3, :where(.gl) h4 { margin: 0; font-weight: var(--peso-titulo); letter-spacing: var(--espaco-letra-titulo); line-height: var(--altura-justa); }
:where(.gl) p { margin: 0; }
:where(.gl) a { color: var(--txt-link); text-decoration: none; }
:where(.gl) a:hover { text-decoration: underline; text-underline-offset: 2px; }
:where(.gl) button, :where(.gl) input, :where(.gl) select, :where(.gl) textarea { font: inherit; color: inherit; }
:where(.gl :focus-visible) { outline: none; box-shadow: var(--foco-anel); border-radius: var(--raio-sm); }
.gl-num { font-variant-numeric: var(--numeros); }
.gl-mono { font-family: var(--fonte-mono); font-size: 0.92em; }
.gl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gl-txt-2 { color: var(--txt-2); }
.gl-txt-3 { color: var(--txt-3); }

/* ---------- Ícone (Lucide) ---------- */
.gl-ic { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; stroke-width: 1.75; }
.gl-ic--sm { width: 14px; height: 14px; }
.gl-ic--lg { width: 20px; height: 20px; }
.gl-ic--xl { width: 32px; height: 32px; stroke-width: 1.5; }

/* ==========================================================================
   CASCO
   ========================================================================== */
.gl-casco { min-height: 100vh; display: grid; grid-template-rows: var(--casco-topo) 1fr; grid-template-columns: var(--casco-lateral) 1fr; grid-template-areas: "topo topo" "lateral conteudo";
  /* fundo da lateral acompanha páginas longas */
  background: linear-gradient(to right, var(--sup-base) calc(var(--casco-lateral) - 1px), var(--borda) 0 var(--casco-lateral), transparent 0); }

/* barra superior — sempre preta (marca do Grupo); faixa de 3 px na cor da empresa ativa */
.gl-topo {
  grid-area: topo; position: sticky; top: 0; z-index: var(--z-topo);
  display: flex; align-items: center; gap: var(--e-3);
  padding: 0 var(--e-4) var(--casco-faixa-empresa);
  background: var(--sup-invertida); color: var(--txt-invertido);
  box-shadow: inset 0 calc(-1 * var(--casco-faixa-empresa)) 0 var(--emp-faixa);
}
.gl-topo__marca { display: flex; align-items: center; gap: var(--e-2); color: var(--txt-invertido); padding: var(--e-1) var(--e-1); border-radius: var(--raio-sm); }
.gl-topo__marca svg { height: 24px; width: auto; display: block; }
.gl-topo__div { width: 1px; height: 24px; background: var(--borda-invertida); }
.gl-topo__acoes { margin-left: auto; display: flex; align-items: center; gap: var(--e-1); }
.gl-topo-btn.gl-topo__menu { display: none; }

.gl-topo-btn {
  display: inline-grid; place-items: center; width: var(--controle-md); height: var(--controle-md);
  border: 0; border-radius: var(--raio-sm); background: transparent; color: var(--txt-invertido-2); cursor: pointer; position: relative;
  transition: background var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva);
}
.gl-topo-btn:hover { background: var(--sup-invertida-2); color: var(--txt-invertido); }
.gl-topo-btn__ponto { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 0 2px var(--sup-invertida); }

/* seletor de empresa */
.gl-seletor { position: relative; }
.gl-seletor__botao {
  display: flex; align-items: center; gap: var(--e-2); height: var(--controle-md); padding: 0 var(--e-2) 0 var(--e-1-5);
  border: 1px solid var(--borda-invertida); border-radius: var(--raio-sm);
  background: var(--sup-invertida-2); color: var(--txt-invertido); cursor: pointer; min-width: 200px;
  transition: border-color var(--dur-rapida) var(--curva);
}
.gl-seletor__botao:hover, .gl-seletor__botao[aria-expanded="true"] { border-color: var(--pedra-600); }
.gl-seletor__nome { font-weight: var(--peso-forte); font-size: var(--texto-sm); white-space: nowrap; }
.gl-seletor__seta { margin-left: auto; color: var(--txt-invertido-2); }
.gl-marca-emp { width: 24px; height: 24px; border-radius: var(--raio-xs); flex: none; display: grid; place-items: center; overflow: hidden; background: var(--pedra-0); }
.gl-marca-emp img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gl-marca-emp--grupo { background: var(--pedra-950); color: var(--ouro); box-shadow: inset 0 0 0 1px var(--pedra-700); }
.gl-marca-emp--grupo svg { width: 14px; height: 14px; }
.gl-marca-emp--neutra { background: var(--neutro-suave); color: var(--neutro-txt); font-size: var(--texto-2xs); font-weight: var(--peso-forte); }
.gl-marca-emp--lg { width: 32px; height: 32px; border-radius: var(--raio-sm); }

.gl-seletor__painel { position: absolute; top: calc(100% + var(--e-2)); left: 0; width: 340px; z-index: var(--z-menu); }
.gl-seletor__busca { padding: var(--e-2); border-bottom: 1px solid var(--borda-sutil); }
.gl-seletor__opcao { position: relative; }
.gl-seletor__opcao[aria-selected="true"]::before { content: ""; position: absolute; left: -4px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--emp); }
.gl-seletor__atalho { margin-left: auto; }

/* menu lateral */
.gl-lateral {
  grid-area: lateral; position: sticky; top: var(--casco-topo); height: calc(100vh - var(--casco-topo));
  display: flex; flex-direction: column; gap: var(--e-0-5); overflow-y: auto;
  padding: var(--e-3) var(--e-2) var(--e-2); background: var(--sup-base); border-right: 1px solid var(--borda);
}
.gl-lateral__grupo { margin: var(--e-4) var(--e-2) var(--e-1); font-size: var(--texto-2xs); font-weight: var(--peso-forte); letter-spacing: var(--espaco-letra-rotulo); text-transform: uppercase; color: var(--txt-3); }
.gl-lateral__grupo:first-child { margin-top: var(--e-1); }
.gl-lateral__grupo--emp { display: flex; align-items: center; gap: var(--e-1-5); }
.gl-lateral__grupo--emp::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--emp); }
.gl-nav-item {
  position: relative; display: flex; align-items: center; gap: var(--e-2-5); height: 32px; padding: 0 var(--e-2);
  border-radius: var(--raio-sm); color: var(--txt-2); font-size: var(--texto-sm); font-weight: var(--peso-medio);
  text-decoration: none !important; transition: background var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva);
}
.gl-nav-item:hover { background: var(--sup-hover); color: var(--txt); }
.gl-nav-item[aria-current="page"] { background: var(--sup-ativa); color: var(--txt); font-weight: var(--peso-forte); }
.gl-nav-item[aria-current="page"]::before { content: ""; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 2px 2px 0; background: var(--emp); }
.gl-nav-item .gl-ic { color: var(--txt-3); }
.gl-nav-item:hover .gl-ic, .gl-nav-item[aria-current="page"] .gl-ic { color: var(--txt); }
.gl-nav-item__cont { margin-left: auto; font-size: var(--texto-xs); color: var(--txt-3); font-variant-numeric: var(--numeros); }
.gl-nav-item__cont--forte { color: var(--txt); font-weight: var(--peso-forte); }
.gl-nav-item__ext { margin-left: auto; color: var(--txt-3); }
.gl-lateral__pe { margin-top: auto; padding-top: var(--e-2); border-top: 1px solid var(--borda-sutil); }

/* conteúdo */
.gl-conteudo { grid-area: conteudo; min-width: 0; }
.gl-pagina { max-width: var(--conteudo-max); margin: 0 auto; padding: var(--e-6) var(--e-8) var(--e-12); }
.gl-pagina--larga { max-width: none; }
.gl-cabecalho { display: flex; align-items: flex-end; gap: var(--e-4); margin-bottom: var(--e-6); flex-wrap: wrap; }
.gl-cabecalho__titulo { font-size: var(--texto-2xl); }
.gl-cabecalho__sub { margin-top: var(--e-1); color: var(--txt-2); font-size: var(--texto-md); }
.gl-cabecalho__acoes { margin-left: auto; display: flex; gap: var(--e-2); flex-wrap: wrap; }
.gl-trilha { display: flex; align-items: center; gap: var(--e-1); font-size: var(--texto-xs); color: var(--txt-3); margin-bottom: var(--e-2); }
.gl-trilha a { color: var(--txt-2); }

/* busca global (campo na barra superior; abre a paleta Ctrl K) */
.gl-busca-global {
  flex: 1; max-width: 520px; margin-left: var(--e-4); display: flex; align-items: center; gap: var(--e-2); height: var(--controle-md); padding: 0 var(--e-1-5) 0 var(--e-3);
  border: 1px solid var(--borda-invertida); border-radius: var(--raio-sm); background: var(--sup-invertida-2); color: var(--txt-invertido-2);
  font-size: var(--texto-sm); cursor: text; text-align: left;
}
.gl-busca-global:hover { border-color: var(--pedra-600); }
.gl-busca-global__tecla { margin-left: auto; }
.gl-tecla { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 var(--e-1-5); border-radius: var(--raio-xs); border: 1px solid var(--borda); background: var(--sup-sutil); color: var(--txt-2); font: var(--peso-medio) var(--texto-2xs)/1 var(--fonte); }
.gl-topo .gl-tecla { border-color: var(--borda-invertida); background: transparent; color: var(--txt-invertido-2); }
.gl-topo .gl-menu .gl-tecla { border-color: var(--borda); background: var(--sup-sutil); color: var(--txt-2); }

/* paleta de comandos (busca global aberta) */
.gl-paleta { position: fixed; inset: 0; z-index: var(--z-dialogo); display: grid; justify-items: center; align-items: start; padding-top: 12vh; background: var(--sup-sobreposicao); }
.gl-paleta__caixa { width: min(640px, calc(100vw - 32px)); background: var(--sup-elevada); border: 1px solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-4); overflow: hidden; }
.gl-paleta__campo { display: flex; align-items: center; gap: var(--e-3); padding: 0 var(--e-4); height: 52px; border-bottom: 1px solid var(--borda-sutil); }
.gl-paleta__campo input { flex: 1; border: 0; outline: 0; background: transparent; font-size: var(--texto-lg); }
.gl-paleta__lista { max-height: 50vh; overflow: auto; padding: var(--e-2); }
.gl-paleta__pe { display: flex; gap: var(--e-4); padding: var(--e-2) var(--e-4); border-top: 1px solid var(--borda-sutil); color: var(--txt-3); font-size: var(--texto-xs); }

/* avatar e menu da conta (Sair único) */
.gl-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--pedra-700); color: var(--pedra-0); font-size: var(--texto-xs); font-weight: var(--peso-forte); overflow: hidden; }
.gl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gl-avatar--sm { width: 24px; height: 24px; font-size: var(--texto-2xs); }
.gl-avatar--lg { width: 48px; height: 48px; font-size: var(--texto-md); }
.gl-avatar-btn { border: 0; background: transparent; padding: 2px; border-radius: 50%; cursor: pointer; margin-left: var(--e-1); }
.gl-avatar-btn:hover .gl-avatar { box-shadow: 0 0 0 2px var(--pedra-600); }
.gl-conta { position: absolute; right: var(--e-4); top: calc(var(--casco-topo) - 4px); width: 300px; z-index: var(--z-menu); }
.gl-conta__quem { display: flex; gap: var(--e-3); align-items: center; padding: var(--e-3); }
.gl-conta__nome { font-weight: var(--peso-forte); }
.gl-conta__email { color: var(--txt-2); font-size: var(--texto-xs); }

/* ==========================================================================
   MENU FLUTUANTE (seletor, conta, "mais ações")
   ========================================================================== */
.gl-menu { background: var(--sup-elevada); color: var(--txt); border: 1px solid var(--borda); border-radius: var(--raio-md); box-shadow: var(--sombra-3); padding: var(--e-1); }
.gl-menu__titulo { padding: var(--e-2) var(--e-2) var(--e-1); font-size: var(--texto-2xs); font-weight: var(--peso-forte); letter-spacing: var(--espaco-letra-rotulo); text-transform: uppercase; color: var(--txt-3); }
.gl-menu__item {
  width: 100%; display: flex; align-items: center; gap: var(--e-2-5); min-height: 34px; padding: var(--e-1-5) var(--e-2);
  border: 0; border-radius: var(--raio-sm); background: transparent; color: var(--txt); font-size: var(--texto-sm); text-align: left; cursor: pointer; text-decoration: none !important;
}
.gl-menu__item:hover, .gl-menu__item[data-ativo] { background: var(--sup-hover); }
.gl-menu__item .gl-ic { color: var(--txt-2); }
.gl-menu__item--perigo { color: var(--perigo-txt); }
.gl-menu__item--perigo .gl-ic { color: var(--perigo-txt); }
.gl-menu__sub { display: block; color: var(--txt-3); font-size: var(--texto-xs); }
.gl-menu__div { height: 1px; margin: var(--e-1) calc(-1 * var(--e-1)); background: var(--borda-sutil); }

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.gl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-1-5);
  height: var(--controle-md); padding: 0 var(--e-3-5); border-radius: var(--raio-sm); border: 1px solid transparent;
  font-size: var(--texto-sm); font-weight: var(--peso-medio); line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none !important;
  transition: background var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva), box-shadow var(--dur-rapida) var(--curva);
}
.gl-btn:disabled, .gl-btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; }
.gl-btn--primario { background: var(--acao); color: var(--acao-txt); box-shadow: var(--sombra-1); }
.gl-btn--primario:hover:not(:disabled) { background: var(--acao-hover); }
.gl-btn--secundario { background: var(--sup-base); color: var(--txt); border-color: var(--borda-forte); box-shadow: var(--sombra-1); }
.gl-btn--secundario:hover:not(:disabled) { background: var(--sup-hover); }
.gl-btn--fantasma { background: transparent; color: var(--txt-2); }
.gl-btn--fantasma:hover:not(:disabled) { background: var(--sup-hover); color: var(--txt); }
.gl-btn--perigo { background: var(--perigo); color: var(--pedra-0); }
.gl-btn--perigo:hover:not(:disabled) { filter: brightness(0.92); }
.gl-btn--perigo-suave { background: var(--sup-base); color: var(--perigo-txt); border-color: var(--perigo-borda); }
.gl-btn--perigo-suave:hover:not(:disabled) { background: var(--perigo-suave); }
.gl-btn--sm { height: var(--controle-sm); padding: 0 var(--e-2-5); font-size: var(--texto-xs); }
.gl-btn--lg { height: var(--controle-lg); padding: 0 var(--e-5); font-size: var(--texto-md); }
.gl-btn--bloco { width: 100%; }
.gl-btn--icone { width: var(--controle-md); padding: 0; }
.gl-btn--icone.gl-btn--sm { width: var(--controle-sm); }
.gl-btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.gl-btn[aria-busy="true"]::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-color: var(--acao-txt) var(--acao-txt) transparent transparent; animation: gl-giro 0.7s linear infinite; }
.gl-btn--secundario[aria-busy="true"]::after { border-color: var(--txt) var(--txt) transparent transparent; }
.gl-grupo-btn { display: inline-flex; }
.gl-grupo-btn > .gl-btn { border-radius: 0; margin-left: -1px; }
.gl-grupo-btn > .gl-btn:first-child { border-radius: var(--raio-sm) 0 0 var(--raio-sm); margin-left: 0; }
.gl-grupo-btn > .gl-btn:last-child { border-radius: 0 var(--raio-sm) var(--raio-sm) 0; }
.gl-grupo-btn > .gl-btn[aria-pressed="true"] { background: var(--sup-ativa); color: var(--txt); }
@keyframes gl-giro { to { transform: rotate(360deg); } }

/* ==========================================================================
   CARTÕES
   ========================================================================== */
.gl-cartao { background: var(--sup-base); border: 1px solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-1); min-width: 0; }
.gl-cartao__cab { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--borda-sutil); min-height: 48px; }
.gl-cartao__titulo { font-size: var(--texto-md); font-weight: var(--peso-forte); }
.gl-cartao__cont { color: var(--txt-3); font-size: var(--texto-xs); font-variant-numeric: var(--numeros); }
.gl-cartao__acoes { margin-left: auto; display: flex; gap: var(--e-1); }
.gl-cartao__corpo { padding: var(--e-4); }
.gl-cartao__corpo--lista { padding: var(--e-1) 0; }
.gl-cartao__pe { padding: var(--e-2-5) var(--e-4); border-top: 1px solid var(--borda-sutil); font-size: var(--texto-sm); }
.gl-cartao--link { transition: border-color var(--dur-rapida) var(--curva), box-shadow var(--dur-rapida) var(--curva); color: inherit; text-decoration: none !important; display: block; }
.gl-cartao--link:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-2); }

/* número de destaque (KPI) */
.gl-numero { padding: var(--e-4); }
.gl-numero__rotulo { color: var(--txt-2); font-size: var(--texto-sm); display: flex; align-items: center; gap: var(--e-1-5); }
.gl-numero__valor { margin-top: var(--e-2); font-size: var(--texto-3xl); font-weight: var(--peso-titulo); letter-spacing: var(--espaco-letra-titulo); font-variant-numeric: var(--numeros); line-height: 1.1; }
.gl-numero__var { margin-top: var(--e-1); font-size: var(--texto-xs); color: var(--txt-2); display: flex; align-items: center; gap: var(--e-1); }
.gl-numero__var--sobe { color: var(--ok-txt); }
.gl-numero__var--desce { color: var(--perigo-txt); }

/* linha de lista (Hoje, notificações, arquivos) */
.gl-linha { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2-5) var(--e-4); min-height: 52px; border-top: 1px solid var(--borda-sutil); color: inherit; text-decoration: none !important; }
.gl-linha:first-child { border-top: 0; }
a.gl-linha:hover, button.gl-linha:hover { background: var(--sup-sutil); }
.gl-linha__ic { width: 32px; height: 32px; border-radius: var(--raio-sm); display: grid; place-items: center; flex: none; background: var(--sup-sutil); border: 1px solid var(--borda-sutil); color: var(--txt-2); }
.gl-linha__txt { min-width: 0; flex: 1; }
.gl-linha__titulo { font-size: var(--texto-sm); font-weight: var(--peso-medio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-linha__meta { font-size: var(--texto-xs); color: var(--txt-2); display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; margin-top: 2px; }
.gl-linha__fim { margin-left: auto; display: flex; align-items: center; gap: var(--e-2); flex: none; }

/* grades de layout */
.gl-grade { display: grid; gap: var(--e-4); }
.gl-grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gl-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gl-grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gl-grade--principal { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.gl-grade > *, .gl-pilha > * { min-width: 0; }
.gl-pilha { display: flex; flex-direction: column; gap: var(--e-4); }
.gl-fila { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }

/* ==========================================================================
   CHIPS DE STATUS e ETIQUETA DA EMPRESA
   ========================================================================== */
.gl-chip { display: inline-flex; align-items: center; gap: var(--e-1); height: 22px; padding: 0 var(--e-2); border-radius: var(--raio-total); border: 1px solid; font-size: var(--texto-xs); font-weight: var(--peso-medio); white-space: nowrap; line-height: 1; }
.gl-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gl-chip--sem-ponto::before { display: none; }
.gl-chip--ok     { color: var(--ok-txt);     background: var(--ok-suave);     border-color: var(--ok-borda); }
.gl-chip--aviso  { color: var(--aviso-txt);  background: var(--aviso-suave);  border-color: var(--aviso-borda); }
.gl-chip--perigo { color: var(--perigo-txt); background: var(--perigo-suave); border-color: var(--perigo-borda); }
.gl-chip--info   { color: var(--info-txt);   background: var(--info-suave);   border-color: var(--info-borda); }
.gl-chip--neutro { color: var(--neutro-txt); background: var(--neutro-suave); border-color: var(--neutro-borda); }
.gl-etq { display: inline-flex; align-items: center; gap: var(--e-1); height: 20px; padding: 0 var(--e-1-5); border-radius: var(--raio-xs); font-size: var(--texto-2xs); font-weight: var(--peso-forte); letter-spacing: 0.02em; white-space: nowrap; color: var(--emp-txt); background: var(--emp-suave); }
.gl-etq--cheia { color: var(--emp-sobre); background: var(--emp-txt); }
.gl-contador { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--raio-total); background: var(--acao); color: var(--acao-txt); font-size: var(--texto-2xs); font-weight: var(--peso-forte); font-variant-numeric: var(--numeros); }

/* ==========================================================================
   TABELAS
   ========================================================================== */
.gl-tabela-caixa { background: var(--sup-base); border: 1px solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-1); overflow: hidden; }
.gl-tabela-barra { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-3); border-bottom: 1px solid var(--borda-sutil); flex-wrap: wrap; }
.gl-tabela-rolagem { overflow-x: auto; }
.gl-tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--texto-sm); }
.gl-tabela th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 0 var(--e-3); height: 36px; background: var(--sup-sutil); color: var(--txt-2); font-size: var(--texto-xs); font-weight: var(--peso-medio); border-bottom: 1px solid var(--borda); white-space: nowrap; }
.gl-tabela th button { all: unset; display: inline-flex; gap: var(--e-1); align-items: center; cursor: pointer; }
.gl-tabela th[aria-sort] { color: var(--txt); }
.gl-tabela td { padding: 0 var(--e-3); height: 48px; border-bottom: 1px solid var(--borda-sutil); vertical-align: middle; }
.gl-tabela tbody tr:last-child td { border-bottom: 0; }
.gl-tabela tbody tr:hover td { background: var(--sup-sutil); }
.gl-tabela tbody tr[aria-selected="true"] td { background: var(--emp-suave); }
.gl-tabela td.gl-tabela__num, .gl-tabela th.gl-tabela__num { text-align: right; font-variant-numeric: var(--numeros); }
.gl-tabela td.gl-tabela__acoes { width: 1%; white-space: nowrap; text-align: right; }
.gl-tabela__principal { font-weight: var(--peso-medio); color: var(--txt); }
.gl-tabela__sec { display: block; color: var(--txt-2); font-size: var(--texto-xs); }
.gl-tabela--densa td { height: 40px; }
.gl-paginacao { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-3); border-top: 1px solid var(--borda-sutil); color: var(--txt-2); font-size: var(--texto-xs); }
.gl-paginacao__acoes { margin-left: auto; display: flex; gap: var(--e-1); }

/* ==========================================================================
   FORMULÁRIOS
   ========================================================================== */
.gl-campo { display: flex; flex-direction: column; gap: var(--e-1-5); min-width: 0; }
.gl-rotulo { font-size: var(--texto-sm); font-weight: var(--peso-medio); color: var(--txt); }
.gl-rotulo__opc { color: var(--txt-3); font-weight: var(--peso-normal); }
.gl-ajuda { font-size: var(--texto-xs); color: var(--txt-2); }
.gl-erro { font-size: var(--texto-xs); color: var(--perigo-txt); display: flex; gap: var(--e-1); align-items: center; }
.gl-entrada, .gl-selecao, .gl-area {
  width: 100%; height: var(--controle-md); padding: 0 var(--e-3); border: 1px solid var(--borda-campo); border-radius: var(--raio-sm);
  background: var(--sup-base); color: var(--txt); font-size: var(--texto-sm); box-shadow: var(--sombra-1);
  transition: border-color var(--dur-rapida) var(--curva), box-shadow var(--dur-rapida) var(--curva);
}
.gl-area { height: auto; min-height: 88px; padding: var(--e-2) var(--e-3); resize: vertical; line-height: var(--altura-normal); }
.gl-entrada::placeholder, .gl-area::placeholder { color: var(--txt-3); }
.gl-entrada:hover, .gl-selecao:hover, .gl-area:hover { border-color: var(--txt-3); }
.gl-entrada:focus, .gl-selecao:focus, .gl-area:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 22%, transparent); }
.gl-entrada[aria-invalid="true"], .gl-selecao[aria-invalid="true"] { border-color: var(--perigo); }
.gl-entrada:disabled, .gl-selecao:disabled { background: var(--sup-sutil); color: var(--txt-desabilitado); cursor: not-allowed; }
.gl-selecao { appearance: none; padding-right: var(--e-8); background-image: linear-gradient(45deg, transparent 50%, var(--txt-2) 50%), linear-gradient(135deg, var(--txt-2) 50%, transparent 50%); background-position: calc(100% - 17px) 15px, calc(100% - 12px) 15px; background-size: 5px 5px; background-repeat: no-repeat; }
.gl-entrada-ic { position: relative; display: flex; align-items: center; }
.gl-entrada-ic > .gl-ic { position: absolute; left: var(--e-3); color: var(--txt-3); pointer-events: none; }
.gl-entrada-ic > .gl-entrada { padding-left: 34px; }
.gl-entrada-ic > .gl-tecla { position: absolute; right: var(--e-2); }
.gl-marcar { display: flex; align-items: flex-start; gap: var(--e-2); font-size: var(--texto-sm); cursor: pointer; }
.gl-marcar input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--acao); flex: none; }
.gl-chave { position: relative; width: 32px; height: 18px; flex: none; appearance: none; margin: 1px 0 0; border-radius: var(--raio-total); background: var(--borda-campo); cursor: pointer; transition: background var(--dur-rapida) var(--curva); }
.gl-chave::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--pedra-0); box-shadow: var(--sombra-1); transition: transform var(--dur-rapida) var(--curva); }
.gl-marcar input.gl-chave { width: 32px; height: 18px; margin: 1px 0 0; }
.gl-chave:checked { background: var(--acao); }
.gl-chave:checked::after { transform: translateX(14px); background: var(--acao-txt); }
.gl-form { display: grid; gap: var(--e-4); }
.gl-form--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gl-form__acoes { display: flex; gap: var(--e-2); justify-content: flex-end; padding-top: var(--e-2); }
.gl-secao-form { display: grid; grid-template-columns: 240px 1fr; gap: var(--e-8); padding: var(--e-6) 0; border-top: 1px solid var(--borda); }
.gl-secao-form__titulo { font-weight: var(--peso-forte); }

/* ==========================================================================
   ABAS
   ========================================================================== */
.gl-abas { display: flex; gap: var(--e-1); border-bottom: 1px solid var(--borda); margin-bottom: var(--e-5); overflow-x: auto; scrollbar-width: none; }
.gl-aba { position: relative; display: inline-flex; align-items: center; gap: var(--e-1-5); height: 40px; padding: 0 var(--e-3); border: 0; background: transparent; color: var(--txt-2); font-size: var(--texto-sm); font-weight: var(--peso-medio); cursor: pointer; white-space: nowrap; border-radius: var(--raio-sm) var(--raio-sm) 0 0; }
.gl-aba:hover { color: var(--txt); }
.gl-aba[aria-selected="true"] { color: var(--txt); font-weight: var(--peso-forte); }
.gl-aba[aria-selected="true"]::after { content: ""; position: absolute; left: var(--e-2); right: var(--e-2); bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--acao); }
.gl-aba .gl-contador { background: var(--sup-ativa); color: var(--txt-2); }
.gl-segmento { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--raio-sm); background: var(--sup-ativa); }
.gl-segmento button { border: 0; background: transparent; height: 28px; padding: 0 var(--e-3); border-radius: calc(var(--raio-sm) - 2px); font-size: var(--texto-xs); font-weight: var(--peso-medio); color: var(--txt-2); cursor: pointer; }
.gl-segmento button[aria-pressed="true"] { background: var(--sup-base); color: var(--txt); box-shadow: var(--sombra-1); }

/* ==========================================================================
   ESTADOS: vazio, carregando (esqueleto), alerta em linha
   ========================================================================== */
.gl-vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e-2); padding: var(--e-12) var(--e-6); }
.gl-vazio__ic { width: 48px; height: 48px; border-radius: var(--raio-lg); display: grid; place-items: center; background: var(--sup-sutil); border: 1px solid var(--borda); color: var(--txt-2); margin-bottom: var(--e-2); }
.gl-vazio__titulo { font-size: var(--texto-lg); font-weight: var(--peso-forte); }
.gl-vazio__txt { color: var(--txt-2); max-width: 420px; }
.gl-vazio__acoes { display: flex; gap: var(--e-2); margin-top: var(--e-3); }
.gl-vazio--compacto { padding: var(--e-6) var(--e-4); }

.gl-esq { display: block; border-radius: var(--raio-xs); background: var(--esqueleto); background-image: linear-gradient(90deg, transparent 0, var(--esqueleto-brilho) 50%, transparent 100%); background-size: 200% 100%; background-repeat: no-repeat; animation: gl-brilho 1.4s ease-in-out infinite; height: 12px; }
.gl-esq--titulo { height: 18px; width: 40%; }
.gl-esq--linha { height: 12px; }
.gl-esq--circulo { border-radius: 50%; width: 32px; height: 32px; }
.gl-esq--bloco { height: 32px; width: 32px; border-radius: var(--raio-sm); }
@keyframes gl-brilho { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .gl-esq { animation: none; } }

.gl-alerta { display: flex; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--raio-md); border: 1px solid; font-size: var(--texto-sm); }
.gl-alerta__titulo { font-weight: var(--peso-forte); }
.gl-alerta--info   { background: var(--info-suave);   border-color: var(--info-borda);   color: var(--info-txt); }
.gl-alerta--aviso  { background: var(--aviso-suave);  border-color: var(--aviso-borda);  color: var(--aviso-txt); }
.gl-alerta--perigo { background: var(--perigo-suave); border-color: var(--perigo-borda); color: var(--perigo-txt); }
.gl-alerta--ok     { background: var(--ok-suave);     border-color: var(--ok-borda);     color: var(--ok-txt); }

/* ==========================================================================
   TOASTS (avisos rápidos, canto inferior direito; no celular, embaixo e largura total)
   ========================================================================== */
.gl-toasts { position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--e-2); width: min(380px, calc(100vw - 32px)); }
.gl-toast { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4); border-radius: var(--raio-md); background: var(--sup-elevada); border: 1px solid var(--borda); box-shadow: var(--sombra-3); font-size: var(--texto-sm); animation: gl-entra var(--dur-media) var(--curva); }
.gl-toast__ic { margin-top: 1px; }
.gl-toast--ok .gl-toast__ic { color: var(--ok); }
.gl-toast--perigo .gl-toast__ic { color: var(--perigo); }
.gl-toast--aviso .gl-toast__ic { color: var(--aviso); }
.gl-toast--info .gl-toast__ic { color: var(--info); }
.gl-toast__titulo { font-weight: var(--peso-forte); }
.gl-toast__txt { color: var(--txt-2); }
.gl-toast__acao { margin-top: var(--e-1-5); }
.gl-toast__fechar { margin-left: auto; }
@keyframes gl-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   DIÁLOGO (usar <dialog> nativo: foco preso, Esc fecha)
   ========================================================================== */
.gl-dialogo { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--borda); border-radius: var(--raio-lg); background: var(--sup-elevada); color: var(--txt); box-shadow: var(--sombra-4); }
.gl-dialogo::backdrop { background: var(--sup-sobreposicao); }
.gl-dialogo[open] { animation: gl-entra var(--dur-media) var(--curva); }
.gl-dialogo--estatico { position: relative; display: block; margin: 0; }
.gl-dialogo__cab { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-5) var(--e-5) 0; }
.gl-dialogo__titulo { font-size: var(--texto-lg); font-weight: var(--peso-forte); }
.gl-dialogo__corpo { padding: var(--e-3) var(--e-5) var(--e-5); color: var(--txt-2); }
.gl-dialogo__pe { display: flex; justify-content: flex-end; gap: var(--e-2); padding: var(--e-3) var(--e-5); border-top: 1px solid var(--borda-sutil); background: var(--sup-sutil); border-radius: 0 0 var(--raio-lg) var(--raio-lg); }
.gl-dialogo__ic-perigo { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--perigo-suave); color: var(--perigo); flex: none; }

/* gaveta lateral (ficha rápida, filtros no celular) */
.gl-gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--sup-elevada); border-left: 1px solid var(--borda); box-shadow: var(--sombra-4); z-index: var(--z-dialogo); display: flex; flex-direction: column; }

/* ==========================================================================
   CELULAR (≤ 768 px): lateral vira gaveta; barra inferior com 5 atalhos
   ========================================================================== */
.gl-barra-inferior { display: none; }
@media (max-width: 1024px) {
  .gl-casco { grid-template-columns: var(--casco-lateral-recolhida) 1fr; background: linear-gradient(to right, var(--sup-base) calc(var(--casco-lateral-recolhida) - 1px), var(--borda) 0 var(--casco-lateral-recolhida), transparent 0); }
  .gl-lateral { padding-inline: var(--e-1-5); }
  .gl-lateral .gl-nav-item { justify-content: center; padding: 0; }
  .gl-lateral .gl-nav-item > span, .gl-lateral .gl-nav-item__cont, .gl-lateral .gl-nav-item__ext, .gl-lateral__grupo { display: none; }
  .gl-lateral .gl-nav-item[aria-current="page"]::before { left: -6px; }
  .gl-pagina { padding: var(--e-5) var(--e-6) var(--e-10); }
  .gl-grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  body.gl { font-size: var(--texto-md); }
  .gl-casco { grid-template-columns: 1fr; grid-template-areas: "topo" "conteudo"; padding-bottom: 64px; background: none; }
  .gl-lateral { display: none; }
  .gl-lateral[data-aberta] { display: flex; position: fixed; inset: var(--casco-topo) auto 0 0; width: 280px; z-index: var(--z-lateral); box-shadow: var(--sombra-4); }
  .gl-lateral[data-aberta] .gl-nav-item { justify-content: flex-start; padding: 0 var(--e-2); }
  .gl-lateral[data-aberta] .gl-nav-item > span, .gl-lateral[data-aberta] .gl-lateral__grupo, .gl-lateral[data-aberta] .gl-nav-item__cont { display: revert; }
  .gl-topo { gap: var(--e-2); padding-inline: var(--e-2); }
  .gl-topo-btn.gl-topo__menu { display: inline-grid; }
  .gl-topo__marca, .gl-topo__div, .gl-busca-global { display: none; }
  .gl-topo__busca-ic { display: inline-grid !important; }
  .gl-seletor__botao { min-width: 0; max-width: 56vw; }
  .gl-seletor__painel { position: fixed; left: 8px; right: 8px; width: auto; top: calc(var(--casco-topo) + 4px); }
  .gl-pagina { padding: var(--e-4) var(--e-4) var(--e-8); }
  .gl-cabecalho { margin-bottom: var(--e-4); }
  .gl-cabecalho__titulo { font-size: var(--texto-xl); }
  .gl-cabecalho__acoes { margin-left: 0; width: 100%; }
  .gl-grade--2, .gl-grade--3, .gl-grade--principal, .gl-form--2 { grid-template-columns: 1fr; }
  .gl-grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-btn { height: var(--controle-lg); }
  .gl-linha { flex-wrap: wrap; }
  .gl-linha__titulo { white-space: normal; }
  .gl-linha__fim { margin-left: 44px; }
  .gl-linha__ic + .gl-linha__txt + .gl-linha__fim { flex-basis: calc(100% - 44px); }
  .gl-numero__valor { font-size: var(--texto-2xl); }
  .gl-numero { padding: var(--e-3); }
  .gl-btn--sm { height: 36px; }
  .gl-entrada, .gl-selecao { height: var(--controle-lg); font-size: var(--texto-lg); }
  .gl-nav-item { height: 40px; }
  .gl-tabela--cartoes thead { display: none; }
  .gl-tabela--cartoes, .gl-tabela--cartoes tbody, .gl-tabela--cartoes tr, .gl-tabela--cartoes td { display: block; }
  .gl-tabela--cartoes tr { position: relative; padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--borda-sutil); }
  .gl-tabela--cartoes tbody tr:hover td, .gl-tabela--cartoes tbody tr[aria-selected="true"] td { background: transparent; }
  .gl-tabela--cartoes tbody tr[aria-selected="true"] { background: var(--emp-suave); }
  .gl-tabela--cartoes td:nth-child(2) { padding-right: var(--e-10); }
  .gl-tabela--cartoes td { height: auto; padding: 2px 0; border: 0; }
  .gl-tabela--cartoes td[data-rotulo]::before { content: attr(data-rotulo) " · "; color: var(--txt-3); font-size: var(--texto-xs); }
  .gl-tabela--cartoes td.gl-tabela__num { text-align: left; }
  .gl-tabela--cartoes td.gl-tabela__acoes { position: absolute; top: var(--e-2); right: var(--e-2); width: auto; padding: 0; }
  .gl-tabela--cartoes td.gl-tabela__acoes .gl-btn--fantasma.gl-btn--sm:not(.gl-btn--icone) { height: 32px; }
  .gl-tabela--cartoes td.gl-oculta-cel { display: none; }
  .gl-oculta-cel { display: none !important; }
  .gl-secao-form { grid-template-columns: 1fr; gap: var(--e-3); }
  .gl-toasts { left: var(--e-2); right: var(--e-2); bottom: 72px; width: auto; }
  .gl-barra-inferior {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; height: 64px; z-index: var(--z-topo);
    background: var(--sup-base); border-top: 1px solid var(--borda); padding-bottom: env(safe-area-inset-bottom);
  }
  .gl-barra-inferior a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: var(--texto-2xs); font-weight: var(--peso-medio); color: var(--txt-2); text-decoration: none !important; position: relative; }
  .gl-barra-inferior a[aria-current="page"] { color: var(--txt); }
  .gl-barra-inferior a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; border-radius: 0 0 2px 2px; background: var(--emp); }
  .gl-barra-inferior .gl-ic { width: 20px; height: 20px; }
}
.gl-so-cel { display: none !important; }
@media (max-width: 768px) { .gl-so-cel { display: revert !important; } }
.gl-topo__busca-ic { display: none !important; }
@media (max-width: 768px) { .gl-topo__busca-ic { display: inline-grid !important; } }