/*
 * ConsiGhafia — tokens do layout novo (redesign).
 * Ver SPEC_REDESIGN_FASE0.md item A4. Carregado SÓ pelas bases de
 * templates/v2/ — as telas atuais não usam este arquivo.
 *
 * Sempre linkar via {% static 'css/ghafia.css' %} (nome com hash no
 * WhiteNoise → o Service Worker nunca serve versão velha).
 */

:root {
  /* Marca */
  --gh-dourado:        #C9A84C;  /* inalterado — cor oficial da marca */
  --gh-dourado-claro:  #E3CB85;  /* texto dourado sobre fundo escuro */
  --gh-dourado-texto:  #6E5518;  /* texto dourado sobre fundo claro (contraste AA) */
  --gh-dourado-fundo:  #F6EDD5;

  /* Superfícies */
  --gh-tinta:          #0B0B0C;  /* fundo escuro principal */
  --gh-superficie:     #161618;  /* card sobre fundo escuro */
  --gh-marfim:         #F5F3EE;  /* fundo claro das telas */
  --gh-branco:         #FFFFFF;

  /* Texto */
  --gh-texto:          #17171A;
  --gh-texto-2:        #6B6860;  /* secundário sobre marfim/branco */
  --gh-texto-claro:    #F4F1EA;  /* texto sobre fundo escuro */

  /* Bordas */
  --gh-borda:          #ECE8DF;
  --gh-borda-forte:    #E4DFD4;

  /* Tons de status — um único mapa pro sistema todo.
     Perigo (vermelho) é SÓ atraso, vencido ou erro; nunca "encerrada"
     ou "a receber". */
  --gh-neutro-fundo:   #EFEBE2;  --gh-neutro-texto:   #4A4843;
  --gh-info-fundo:     #E8EDF6;  --gh-info-texto:     #2B4C7E;
  --gh-atencao-fundo:  #F6EDD5;  --gh-atencao-texto:  #6E5518;
  --gh-sucesso-fundo:  #E6F0EC;  --gh-sucesso-texto:  #1F5E52;
  --gh-perigo-fundo:   #F6E3E1;  --gh-perigo-texto:   #8A2E26;

  /* Tipografia */
  --gh-fonte:          'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gh-fonte-titulo:   'Instrument Serif', Georgia, serif;
  --gh-fonte-mono:     'Geist Mono', ui-monospace, monospace;

  /* Forma e espaço */
  --gh-raio-sm:        10px;
  --gh-raio:           14px;
  --gh-raio-lg:        20px;
  --gh-raio-pill:      999px;
  --gh-toque-min:      44px;  /* alvo mínimo de toque (mobile) */
  --gh-sombra:         0 10px 30px rgba(11, 11, 12, .08);

  /* Safe-area (notch / barra inferior do iPhone em modo app) */
  --gh-safe-top:       env(safe-area-inset-top, 0px);
  --gh-safe-bottom:    env(safe-area-inset-bottom, 0px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Portal v2 — base e componentes (SPEC_REDESIGN_FASE2.md, sub-fase 2.1).
   Tudo escopado em body.gh, que só as bases de templates/v2/ usam.
   Breakpoint único: celular < 900px <= computador.
   ══════════════════════════════════════════════════════════════════════════ */

body.gh {
  margin: 0;
  min-height: 100vh;
  background: var(--gh-marfim);
  color: var(--gh-texto);
  font-family: var(--gh-fonte);
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(100px + var(--gh-safe-bottom));
}
.gh *, .gh *::before, .gh *::after { box-sizing: border-box; }
.gh a { color: inherit; text-decoration: none; }
.gh button, .gh input, .gh select, .gh textarea { font-family: inherit; font-size: inherit; }
.gh button { cursor: pointer; }
.gh h1, .gh h2, .gh h3, .gh p { margin: 0; }
.gh svg.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.gh .serif { font-family: var(--gh-fonte-titulo); font-weight: 400; }
.gh .mono { font-family: var(--gh-fonte-mono); }
.gh .muted { color: var(--gh-texto-2); }
@media (max-width: 899.98px) { .gh .so-computador { display: none !important; } }
.gh .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gh :focus-visible { outline: 2px solid var(--gh-dourado); outline-offset: 2px; }

/* ── Topo ─────────────────────────────────────────────────────────────── */
.gh-topo { background: var(--gh-tinta); color: var(--gh-texto-claro); position: relative; z-index: 50; }
.gh-topo-in { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 14px max(20px, env(safe-area-inset-right)) 14px max(20px, env(safe-area-inset-left)); }
/* Marca: o monograma GG da Ghafia + o nome. O GG é preto com o disco a 50%
   de opacidade, então em fundo escuro vai todo pra branco. */
.gh-logo { height: 26px; width: auto; object-fit: contain; flex-shrink: 0;
  filter: brightness(0) invert(1); opacity: .9; }
.gh-marca { display: flex; align-items: center; gap: 9px; margin-right: auto; white-space: nowrap; }
.gh-marca .textos { display: flex; flex-direction: column; }
.gh-marca .nome { font-weight: 700; letter-spacing: -.02em; font-size: 17px; line-height: 1; }
.gh-marca .nome span { color: var(--gh-dourado); }
.gh-marca .tagline { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(244,241,234,.32); margin-top: 3px; }
.gh-nav-desk { display: none; }
.gh-icon-btn { width: var(--gh-toque-min); height: var(--gh-toque-min); border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12); background: var(--gh-superficie); color: var(--gh-texto-claro);
  display: inline-flex; align-items: center; justify-content: center; position: relative; padding: 0; }
.gh-contador { position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--gh-dourado); color: #141210; font-size: 10px; font-weight: 700;
  display: none; align-items: center; justify-content: center; }
.gh-avatar { width: var(--gh-toque-min); height: var(--gh-toque-min); border-radius: 50%; border: none;
  background: var(--gh-dourado); color: #141210; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; padding: 0; }
.gh-ancora { position: relative; }

/* Hero escuro (Início, Manual): no celular continua o topo; no computador fica claro */
.gh-hero { background: var(--gh-tinta); color: var(--gh-texto-claro); }
.gh-hero-in { max-width: 1180px; margin: 0 auto; padding: 8px 20px 96px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.gh-saudacao { font-size: 14px; color: rgba(244,241,234,.6); }
.gh-nome { font-family: var(--gh-fonte-titulo); font-size: 42px; line-height: 1; }
.gh-nivel { display: inline-flex; flex-direction: column; align-items: flex-end; padding: 8px 12px;
  border-radius: 14px; border: 1px solid rgba(227,203,133,.35); color: var(--gh-texto-claro); }
.gh-nivel b { color: var(--gh-dourado-claro); font-size: 14px; }
.gh-nivel small { font-size: 11px; color: rgba(244,241,234,.6); }

/* Conteúdo */
.gh-conteudo { max-width: 1180px; margin: 0 auto; padding: 16px; }
/* Início no celular: as duas colunas viram uma pilha com o mesmo espaçamento dos cards */
.gh-inicio { display: flex; flex-direction: column; gap: 12px; }
.gh-sobe { margin-top: -80px; position: relative; z-index: 2; }
.gh-pilha { display: flex; flex-direction: column; gap: 12px; }
.gh-dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ── Cards ────────────────────────────────────────────────────────────── */
.gh-card { background: var(--gh-branco); border: 1px solid var(--gh-borda); border-radius: var(--gh-raio-lg); padding: 16px; }
/* :where() zera a especificidade — o layout do card (flex/grid) sempre ganha */
:where(a.gh-card, a.gh-card-escuro) { display: block; }
a.gh-card { transition: box-shadow .15s; }
a.gh-card:hover { box-shadow: var(--gh-sombra); }
.gh .gh-card-escuro { background: var(--gh-superficie); color: var(--gh-texto-claro);
  border: 1px solid rgba(201,168,76,.22); border-radius: 22px; padding: 20px; }
.gh-rotulo { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gh-texto-2); }
.gh-card-escuro .gh-rotulo { color: rgba(244,241,234,.55); }
.gh-agora { border-color: #EADFC4; box-shadow: var(--gh-sombra); display: flex; flex-direction: column; gap: 12px; }
.gh-agora .gh-rotulo { color: var(--gh-dourado-texto); font-weight: 600; }
.gh-agora.perigo { border-color: #E9C5C0; }
.gh-agora.perigo .gh-rotulo { color: var(--gh-perigo-texto); }
.gh-agora form { margin: 0; }
.gh-agora-linha { display: flex; gap: 12px; align-items: flex-start; }
.gh-agora-titulo { font-size: 15px; font-weight: 600; margin-top: 2px; }
.gh-agora-sub { font-size: 13px; color: var(--gh-texto-2); }
.gh-icone-bloco { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; background: var(--gh-atencao-fundo); color: var(--gh-atencao-texto); }
.gh-icone-bloco.perigo { background: var(--gh-perigo-fundo); color: var(--gh-perigo-texto); }
.gh-icone-bloco.neutro { background: var(--gh-neutro-fundo); color: var(--gh-texto); }
.gh-mini { display: flex; flex-direction: column; gap: 6px; }
.gh-mini .v { font-size: 19px; font-weight: 600; white-space: nowrap; }
.gh-mini .l, .gh-mini .d { font-size: 12px; color: var(--gh-texto-2); }
.gh-vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 20px; }
.gh-vazio .gh-icone-bloco { width: 56px; height: 56px; border-radius: 18px; }
.gh-vazio b { font-size: 17px; }
.gh-vazio span { font-size: 14px; line-height: 1.5; color: var(--gh-texto-2); }
.gh-link-card { display: flex; align-items: center; gap: 12px; }
.gh-link-card .t { flex-grow: 1; font-size: 13px; color: var(--gh-texto-2); }
.gh-link-card .t b { display: block; font-size: 14px; color: var(--gh-texto); }

/* ── Etiquetas de status (um mapa só: core/templatetags/ghafia_ui.py) ─── */
.gh-tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; padding: 5px 10px;
  border-radius: var(--gh-raio-pill); white-space: nowrap; }
.gh-tag.marca   { background: rgba(201,168,76,.16); color: var(--gh-dourado-texto); }
.gh-card-escuro .gh-tag.marca { color: var(--gh-dourado-claro); }
.gh-tag.sucesso { background: var(--gh-sucesso-fundo); color: var(--gh-sucesso-texto); }
.gh-tag.atencao { background: var(--gh-atencao-fundo); color: var(--gh-atencao-texto); }
.gh-tag.neutro  { background: var(--gh-neutro-fundo);  color: var(--gh-neutro-texto); }
.gh-tag.info    { background: var(--gh-info-fundo);    color: var(--gh-info-texto); }
.gh-tag.perigo  { background: var(--gh-perigo-fundo);  color: var(--gh-perigo-texto); }

/* ── Botões ───────────────────────────────────────────────────────────── */
.gh-btn { min-height: 46px; border-radius: 12px; padding: 0 18px; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; text-align: center; white-space: nowrap; }
.gh-btn.escuro   { background: var(--gh-texto); color: var(--gh-texto-claro); }
.gh-btn.dourado  { background: var(--gh-dourado); color: #141210; }
.gh-btn.contorno { background: var(--gh-branco); border-color: var(--gh-borda-forte); color: var(--gh-texto); }
.gh-btn.fantasma-escuro { background: rgba(255,255,255,.06); color: var(--gh-dourado-claro); }
.gh-btn.bloco { width: 100%; }
.gh-btn:disabled { opacity: .6; cursor: default; }

/* ── Números e barra ──────────────────────────────────────────────────── */
/* Terceira coluna (valor em R$) mais larga: é o número mais comprido */
.gh-numeros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px; }
.gh-num b { display: block; font-size: 24px; font-weight: 600; white-space: nowrap; }
.gh-num span { font-size: 12px; color: rgba(244,241,234,.55); }
.gh-barra { height: 6px; border-radius: 6px; background: var(--gh-neutro-fundo); overflow: hidden; }
.gh-barra i { display: block; height: 100%; border-radius: 6px; background: var(--gh-dourado); }
.gh-card-escuro .gh-barra { background: rgba(255,255,255,.08); }
.gh-linha { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.gh-card-escuro .gh-linha .l { color: rgba(244,241,234,.55); }
.gh-divisor { border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }

/* ── Barra inferior (celular) ─────────────────────────────────────────── */
.gh-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 0 max(16px, env(safe-area-inset-right)) calc(16px + var(--gh-safe-bottom)) max(16px, env(safe-area-inset-left)); }
.gh-bottom-in { height: 68px; border-radius: 24px; background: var(--gh-tinta); display: flex; align-items: center;
  justify-content: space-around; padding: 0 6px; box-shadow: 0 12px 32px rgba(11,11,12,.28); max-width: 520px; margin: 0 auto; }
.gh-bottom a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 58px; min-height: 52px; font-size: 11px; font-weight: 500; color: rgba(244,241,234,.66); }
.gh-bottom a.ativo { color: var(--gh-dourado-claro); }
.gh-bottom a.mais { width: 52px; min-width: 52px; height: 52px; border-radius: 18px; background: var(--gh-dourado); color: #141210; }

/* ── Menus (perfil, notificações) ─────────────────────────────────────── */
.gh-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 280px; z-index: 60;
  background: var(--gh-superficie); color: var(--gh-texto-claro); border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px; padding: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.45); display: none; }
.gh-menu.aberto { display: block; }
.gh-menu a, .gh-menu button.item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px;
  padding: 0 12px; border-radius: 12px; font-size: 14px; color: rgba(244,241,234,.86); background: none; border: none; text-align: left; }
.gh-menu a:hover, .gh-menu button.item:hover { background: rgba(255,255,255,.06); }
.gh-menu .dourado { color: var(--gh-dourado-claro); }
.gh-menu .apagado { color: rgba(244,241,234,.55); }
.gh-menu hr { border: none; height: 1px; background: rgba(255,255,255,.08); margin: 6px 8px; }
.gh-menu form { margin: 0; }
.gh-menu-quem { padding: 10px 12px 12px; display: flex; gap: 10px; align-items: center; }
.gh-menu-quem .gh-avatar { width: 38px; height: 38px; }
.gh-menu-quem small { display: block; font-size: 12px; color: rgba(244,241,234,.55); }
.gh-notif-painel { width: min(380px, calc(100vw - 32px)); padding: 6px; }
.gh-notif-cab { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; }
.gh-notif-cab a.todas { width: auto; min-height: 0; padding: 6px 0; color: var(--gh-dourado-claro); font-size: 13px; }
.gh-menu a.gh-notif { align-items: flex-start; gap: 10px; padding: 12px; min-height: 0; }
.gh-notif.nova { background: rgba(201,168,76,.08); }
.gh-notif .ponto { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.gh-notif.nova .ponto { background: var(--gh-dourado); }
.gh-notif .t { display: block; font-size: 14px; font-weight: 600; }
.gh-notif:not(.nova) .t { font-weight: 500; }
.gh-notif .m { display: block; font-size: 13px; color: rgba(244,241,234,.62); }
.gh-notif-vazio { padding: 24px 12px; text-align: center; font-size: 14px; color: rgba(244,241,234,.55); }

/* No celular os menus do topo abrem colados nas bordas da tela: o sino não
   fica no canto direito (o avatar fica), então ancorar no botão jogava o
   painel pra fora da tela (achado do Miguel testando a 2.4, 17/Set/26). */
@media (max-width: 899.98px) {
  .gh-topo .gh-ancora { position: static; }
  .gh-topo .gh-menu { left: 12px; right: 12px; width: auto; max-width: none; }
}

/* ── Avisos (toast) ───────────────────────────────────────────────────── */
.gh-toasts { position: fixed; left: 16px; right: 16px; bottom: calc(100px + var(--gh-safe-bottom)); z-index: 80;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.gh-toast { pointer-events: auto; display: flex; gap: 10px; align-items: center; width: 100%; max-width: 420px;
  padding: 10px 8px 10px 14px; border-radius: 14px; background: var(--gh-tinta); color: var(--gh-texto-claro);
  font-size: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.35); transition: opacity .3s, transform .3s; }
.gh-toast .bola { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #3A3A3F; }
.gh-toast .bola svg.ic { width: 14px; height: 14px; stroke-width: 3; }
.gh-toast.success .bola { background: var(--gh-sucesso-texto); }
.gh-toast.danger .bola { background: var(--gh-perigo-texto); }
.gh-toast.warning .bola { background: var(--gh-dourado-texto); }
.gh-toast .fechar { margin-left: auto; background: none; border: none; color: rgba(244,241,234,.6); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.gh-toast.saindo { opacity: 0; transform: translateY(8px); }

/* ── Folha de confirmação (substitui confirm()) ───────────────────────── */
.gh-folha-fundo { position: fixed; inset: 0; background: rgba(11,11,12,.55); z-index: 90; display: none; align-items: flex-end; justify-content: center; }
.gh-folha-fundo.aberto { display: flex; }
.gh-folha { width: 100%; max-width: 480px; background: var(--gh-branco); border-radius: 24px 24px 0 0;
  padding: 12px 20px calc(24px + var(--gh-safe-bottom)); display: flex; flex-direction: column; gap: 12px; }
.gh-folha .alca { width: 36px; height: 4px; border-radius: 4px; background: var(--gh-borda-forte); align-self: center; }
.gh-folha h2 { font-family: var(--gh-fonte-titulo); font-weight: 400; font-size: 28px; line-height: 1.1; }
.gh-folha p { font-size: 15px; line-height: 1.5; color: var(--gh-texto-2); }

/* ── Manual ───────────────────────────────────────────────────────────── */
.gh-manual { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.gh-manual-toc { display: none; }
.gh-toc a { display: flex; gap: 10px; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; color: var(--gh-texto-2); }
.gh-toc a.ativo { background: var(--gh-dourado-fundo); color: var(--gh-dourado-texto); font-weight: 600; }
.gh-toc a b { width: 22px; font-size: 12px; font-weight: 600; }
.gh-toc .gh-rotulo { padding: 0 12px 10px; }
.gh-sumario-mobile { padding: 0 16px; }
.gh-sumario-mobile summary { display: flex; align-items: center; gap: 12px; min-height: 56px; cursor: pointer; list-style: none; font-size: 14px; }
.gh-sumario-mobile summary::-webkit-details-marker { display: none; }
.gh-sumario-mobile summary small { display: block; font-size: 12px; color: var(--gh-texto-2); font-weight: 400; }
.gh-sumario-mobile .gh-toc { padding-bottom: 12px; }
.gh .seta-abre { margin-left: auto; transform: rotate(90deg); transition: transform .2s; color: var(--gh-texto-2); }
.gh details[open] > summary .seta-abre { transform: rotate(-90deg); }
.gh-manual-hero { max-width: 1180px; margin: 0 auto; padding: 8px 20px 26px; }
.gh-manual-hero .gh-rotulo { color: var(--gh-dourado-claro); }
.gh-manual-hero h1 { font-family: var(--gh-fonte-titulo); font-weight: 400; font-size: 40px; line-height: 1.05; }
.gh-manual-hero p { font-size: 14px; color: rgba(244,241,234,.65); margin-top: 6px; line-height: 1.5; }
.gh-secao { display: flex; flex-direction: column; gap: 14px; padding: 18px; scroll-margin-top: 16px; }
.gh-secao-cab { display: flex; gap: 12px; align-items: center; }
.gh-secao-num { width: 34px; height: 34px; border-radius: 10px; background: var(--gh-tinta); color: var(--gh-dourado-claro);
  font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gh-secao-cab h2 { font-size: 17px; font-weight: 600; }
.gh-secao-cab p { font-size: 13px; color: var(--gh-texto-2); }
.gh-secao p.txt, .gh-secao li { font-size: 15px; line-height: 1.6; color: #3A3935; }
.gh-secao h3 { font-size: 15px; font-weight: 600; margin-top: 4px; }
.gh-passos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.gh-passos li { display: flex; gap: 12px; align-items: flex-start; }
.gh-passos li > i { width: 26px; height: 26px; border-radius: 50%; background: var(--gh-dourado-fundo); color: var(--gh-dourado-texto);
  font-style: normal; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.gh-lista { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.gh-dica { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--gh-info-fundo); color: #22406B; font-size: 14px; line-height: 1.5; }
.gh-dica svg.ic { margin-top: 1px; }
.gh-dica.atencao { background: var(--gh-dourado-fundo); color: var(--gh-dourado-texto); }
.gh-dica.perigo { background: var(--gh-perigo-fundo); color: var(--gh-perigo-texto); }
.gh-fluxo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gh-fluxo .seta { color: var(--gh-texto-2); font-size: 13px; }
.gh-mini-nav { display: flex; align-items: center; justify-content: space-around; height: 52px; border-radius: 16px; background: var(--gh-tinta); color: rgba(244,241,234,.66); font-size: 10px; }
.gh-mini-nav span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gh-mini-nav svg.ic { width: 16px; height: 16px; }
.gh-mini-nav .mais { width: 38px; height: 38px; border-radius: 12px; background: var(--gh-dourado); color: #141210; justify-content: center; }
.gh-tabela-rolagem { overflow-x: auto; }
.gh-niveis { width: 100%; border-collapse: collapse; font-size: 14px; }
.gh-niveis th { text-align: left; font-size: 12px; font-weight: 500; color: var(--gh-texto-2); padding: 6px 8px; border-bottom: 1px solid var(--gh-borda); }
.gh-niveis td { padding: 8px; border-bottom: 1px solid var(--gh-borda); white-space: nowrap; }
.gh-niveis td:not(:first-child), .gh-niveis th:not(:first-child) { text-align: right; }
.gh-faq details { border-top: 1px solid var(--gh-borda); }
.gh-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 52px; font-size: 15px; font-weight: 500; }
.gh-faq summary::-webkit-details-marker { display: none; }
.gh-faq details > div { padding: 0 0 16px; font-size: 15px; line-height: 1.6; color: #3A3935; }
.gh-manual-nav { display: flex; gap: 10px; }
.gh-manual-nav .gh-btn { flex: 1; }
.gh-manual-rodape { text-align: center; padding: 16px 8px 8px; color: var(--gh-texto-2); font-size: 13px; line-height: 1.6; }

/* Notebook pequeno: o menu de cima não cabe com ícones */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .gh .gh-nav-desk svg.ic { display: none; }
  .gh .gh-nav-desk a { padding: 0 10px; }
  .gh .gh-topo-in { gap: 10px; }
}

/* ══ Computador ═══════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  body.gh { padding-bottom: 48px; }
  .gh .so-celular { display: none !important; }
  .gh-topo-in { height: 68px; padding-top: 0; padding-bottom: 0; gap: 16px; }
  .gh-marca { margin-right: 12px; }
  .gh-marca .nome { font-size: 20px; }
  .gh-marca .tagline { font-size: 10px; }
  .gh-marca .gh-logo { height: 32px; }
  .gh-nav-desk { display: flex; gap: 4px; flex-grow: 1; }
  .gh-nav-desk a { height: 40px; padding: 0 14px; border-radius: 10px; display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: rgba(244,241,234,.7); }
  .gh-nav-desk a:hover { color: var(--gh-texto-claro); }
  .gh-nav-desk a.ativo { background: rgba(201,168,76,.14); color: var(--gh-dourado-claro); font-weight: 500; }
  .gh-nav-desk svg.ic { width: 18px; height: 18px; }
  .gh-topo .gh-btn { min-height: 42px; }
  .gh-bottom { display: none; }
  .gh-toasts { top: 84px; bottom: auto; }

  .gh-hero { background: transparent; color: var(--gh-texto); }
  .gh-hero-in { padding: 36px 40px 0; }
  .gh-saudacao { font-size: 15px; color: var(--gh-texto-2); }
  .gh-nome { font-size: 52px; }
  .gh-hero .gh-nivel { background: var(--gh-tinta); }
  .gh-conteudo { padding: 24px 40px; }
  .gh-sobe { margin-top: 0; }

  .gh-inicio { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: start; }
  .gh-inicio .gh-pilha, .gh-inicio .gh-dupla { gap: 20px; }
  .gh-card { padding: 20px; }
  .gh .gh-card-escuro { padding: 26px; }
  .gh-agora { flex-direction: row; align-items: center; gap: 16px; }
  .gh-agora .gh-agora-linha { flex-grow: 1; align-items: center; gap: 16px; }
  .gh-agora .gh-icone-bloco { width: 48px; height: 48px; border-radius: 14px; }
  .gh-agora .gh-btn { flex-shrink: 0; }
  .gh-agora-titulo { font-size: 17px; }
  .gh-agora-sub { font-size: 14px; }
  .gh-numeros { gap: 20px; }
  .gh-num b { font-size: 34px; }
  .gh-mini .v { font-size: 24px; }
  .gh-mini .l, .gh-mini .d { font-size: 13px; }

  .gh-folha-fundo { align-items: center; }
  .gh-folha { border-radius: 24px; padding: 24px 28px 28px; }
  .gh-folha .alca { display: none; }

  .gh-manual-hero { padding: 36px 40px 0; color: var(--gh-texto); }
  .gh-manual-hero .gh-rotulo { color: var(--gh-dourado-texto); }
  .gh-manual-hero h1 { font-size: 54px; }
  .gh-manual-hero p { color: var(--gh-texto-2); font-size: 16px; }
  .gh-manual { grid-template-columns: 270px minmax(0, 1fr); gap: 32px; }
  .gh-manual-toc { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 20px; align-self: start; }
  .gh-secao { padding: 28px; gap: 16px; }
  .gh-secao-num { width: 40px; height: 40px; }
  .gh-secao-cab h2 { font-size: 20px; }
  .gh-secao-cab p { font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Portal v2 — Maleta e Conferência (SPEC_REDESIGN_FASE2.md, sub-fase 2.2)
   ══════════════════════════════════════════════════════════════════════════ */

.gh-voltar { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; font-size: 14px; color: rgba(244,241,234,.66); align-self: flex-start; }
.gh-hero-tela { max-width: 1180px; margin: 0 auto; padding: 4px 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.gh-hero-tela h1 { font-family: var(--gh-fonte-titulo); font-weight: 400; font-size: 36px; line-height: 1.02; }
.gh-hero-tela .sub { font-size: 13px; color: rgba(244,241,234,.6); margin-top: 4px; }
.gh-hero .gh-tag.marca { color: var(--gh-dourado-claro); }
.gh-titulo-linha { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }

/* Linha do tempo do status */
.gh-tempo { display: flex; align-items: flex-start; }
.gh-tempo .passo { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; text-align: center; font-size: 11px; color: rgba(244,241,234,.5); }
.gh-tempo .bola { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; }
.gh-tempo .feito .bola { background: var(--gh-dourado); border-color: var(--gh-dourado); color: #141210; }
.gh-tempo .feito { color: rgba(244,241,234,.75); }
.gh-tempo .atual .bola { border-color: var(--gh-dourado-claro); box-shadow: 0 0 0 5px rgba(201,168,76,.18); }
.gh-tempo .atual { color: var(--gh-dourado-claro); font-weight: 600; }
.gh-tempo .bola svg.ic { width: 12px; height: 12px; stroke-width: 3; }
.gh-tempo .fio { flex: 1; height: 2px; margin-top: 10px; background: rgba(255,255,255,.14); }
.gh-tempo .fio.feito { background: var(--gh-dourado); }
/* Celular: 5 etapas não cabem com fio entre elas — um fio só atrás das bolas */
@media (max-width: 899.98px) {
  .gh-tempo { position: relative; justify-content: space-between; }
  .gh-tempo::before { content: ''; position: absolute; top: 10px; left: 28px; right: 28px; height: 2px; background: rgba(255,255,255,.14); }
  .gh-tempo .fio { display: none; }
  .gh-tempo .passo { position: relative; width: auto; flex: 1 1 0; min-width: 0; }
  .gh-tempo .bola { background: var(--gh-tinta); }
}

/* Layout das telas com coluna lateral: no celular vira uma pilha só, na
   ordem de .o1…o9; no computador, .col-principal à esquerda e .col-lateral
   à direita (fixa ao rolar). */
.gh-duas-col { display: flex; flex-direction: column; gap: 12px; }
.gh-duas-col > .col-principal, .gh-duas-col > .col-lateral { display: contents; }
.gh-duas-col .o1 { order: 1; } .gh-duas-col .o2 { order: 2; } .gh-duas-col .o3 { order: 3; }
.gh-duas-col .o4 { order: 4; } .gh-duas-col .o5 { order: 5; } .gh-duas-col .o6 { order: 6; }
.gh-duas-col .o7 { order: 7; } .gh-duas-col .o8 { order: 8; } .gh-duas-col .o9 { order: 9; }

/* Cabeçalho de card, busca e filtros */
.gh-card-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gh-card-cab h2 { font-size: 16px; font-weight: 600; }
.gh-link-acao { background: none; border: none; padding: 8px 0; font-size: 13px; font-weight: 500; color: var(--gh-dourado-texto); }
.gh-busca { height: 46px; border-radius: 12px; background: var(--gh-marfim); display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--gh-texto-2); }
.gh-busca input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 16px; color: var(--gh-texto); outline: none; }
.gh-filtros { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.gh-filtros::-webkit-scrollbar { display: none; }
.gh-filtro { flex-shrink: 0; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gh-borda-forte); background: var(--gh-branco); font-size: 13px; color: var(--gh-texto); }
.gh-filtro.ativo { background: var(--gh-texto); border-color: var(--gh-texto); color: var(--gh-texto-claro); }

/* Lista de peças */
.gh-pecas { display: flex; flex-direction: column; margin: 0 -16px; }
.gh-peca { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid #EFEBE2; min-height: 64px; }
label.gh-peca { cursor: pointer; }
.gh-peca input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--gh-dourado); flex-shrink: 0; margin: 0; }
.gh-peca .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gh-peca .desc { font-size: 14px; font-weight: 500; }
.gh-peca .cod { font-family: var(--gh-fonte-mono); font-size: 12px; color: var(--gh-texto-2); }
.gh-peca .lancada { font-size: 12px; color: var(--gh-sucesso-texto); }
.gh-peca .fim { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.gh-peca .valor { font-size: 14px; font-weight: 600; white-space: nowrap; }
.gh-peca .tipo { display: none; font-size: 13px; color: var(--gh-texto-2); width: 110px; }
.gh-peca.marcada { background: #FBF7EC; }
.gh-peca-atalho { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 16px 10px 52px; background: #FBF7EC; font-size: 12px; color: var(--gh-texto-2); }
.gh-peca-atalho a { font-size: 13px; font-weight: 600; color: var(--gh-dourado-texto); min-height: 40px; display: inline-flex; align-items: center; }
.gh-pecas-vazio { padding: 20px 16px; text-align: center; font-size: 14px; color: var(--gh-texto-2); border-top: 1px solid #EFEBE2; }

/* Números em card claro e resumo financeiro */
.gh-quadro { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 12px; }
.gh-quadro div b { display: block; font-size: 22px; font-weight: 600; white-space: nowrap; }
.gh-quadro div span { font-size: 12px; color: var(--gh-texto-2); }
.gh-quadro .ouro { color: var(--gh-dourado-texto); }
.gh-resumo { display: flex; flex-direction: column; gap: 10px; }
.gh-resumo .gh-linha { font-size: 14px; }
.gh-card .gh-resumo .gh-linha .l { color: var(--gh-texto-2); }
.gh-resumo .total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.gh-card .gh-resumo .total { border-top-color: var(--gh-borda); }
.gh-resumo .total .l { font-size: 13px; }
.gh-card-escuro .gh-resumo .total .l { color: rgba(244,241,234,.6); }
.gh-card .gh-resumo .total .l { color: var(--gh-texto-2); }
.gh-resumo .total b { font-size: 22px; font-weight: 600; white-space: nowrap; }
.gh-card-escuro .gh-resumo .total b { color: var(--gh-dourado-claro); }
.gh-mais { color: var(--gh-sucesso-texto); }
.gh-card-escuro .gh-mais { color: #7FC2AE; }
.gh-card-escuro .gh-nota { font-size: 12px; color: rgba(244,241,234,.6); }
.gh-nota { font-size: 12px; line-height: 1.5; color: var(--gh-texto-2); }

/* Parcelas */
.gh-parcela { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--gh-borda); }
.gh-parcela .t { font-size: 14px; font-weight: 500; }
.gh-parcela .d { font-size: 12px; color: var(--gh-texto-2); }
.gh-parcela .v { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-weight: 600; font-size: 14px; white-space: nowrap; }

/* Documentos */
.gh-doc { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; border-radius: 12px; background: var(--gh-marfim); font-size: 14px; }
.gh-doc span { flex: 1; }
.gh-card .gh-linha.info-doc { font-size: 14px; padding: 4px 2px; }
.gh-card .gh-linha.info-doc .l { color: var(--gh-texto-2); }
.gh-codigo { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: 12px; border: 1px solid var(--gh-borda); }
.gh-codigo .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gh-codigo .l { font-size: 12px; color: var(--gh-texto-2); }
.gh-codigo .v { font-size: 16px; font-weight: 500; letter-spacing: .02em; overflow-wrap: anywhere; color: var(--gh-texto); }
.gh-codigo .v.link { color: var(--gh-dourado-texto); }
.gh-codigo.destaque { background: var(--gh-atencao-fundo); border-color: #EADFC4; }
.gh-codigo.destaque .l { color: var(--gh-atencao-texto); font-weight: 600; }
.gh-copiar { min-height: 40px; padding: 0 14px; font-size: 13px; flex-shrink: 0; }

/* Abas */
.gh-abas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); border-bottom: 1px solid #EFEBE2; margin: -16px -16px 0; }
.gh-abas button { min-height: 50px; border: none; border-bottom: 2px solid transparent; background: none; font-size: 14px; color: var(--gh-texto-2); }
.gh-abas button[aria-selected=true] { border-bottom-color: var(--gh-texto); color: var(--gh-texto); font-weight: 600; }

/* Barra de ações sempre à vista (conferência, celular) */
.gh-acoes-fixas { position: sticky; bottom: calc(96px + var(--gh-safe-bottom)); z-index: 30; background: var(--gh-branco); border: 1px solid var(--gh-borda); border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 -10px 30px rgba(11,11,12,.08); }
.gh-acoes-fixas form { margin: 0; }
.gh-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.gh-acoes form { margin: 0; flex: 1; display: flex; }
.gh-acoes form .gh-btn { flex: 1; }

/* Campo de texto em folha */
.gh-folha form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.gh-campo { display: flex; flex-direction: column; gap: 6px; }
.gh-campo label { font-size: 13px; font-weight: 500; color: #4A4843; }
.gh-campo textarea { min-height: 120px; border-radius: 12px; border: 1px solid var(--gh-borda-forte); padding: 12px 14px; font-size: 16px; resize: vertical; color: var(--gh-texto); }
.gh-campo textarea:focus { outline: 2px solid var(--gh-dourado); outline-offset: 1px; }

@media (min-width: 900px) {
  .gh-hero-tela { padding: 28px 40px 8px; color: var(--gh-texto); }
  .gh-hero-tela h1 { font-size: 48px; }
  .gh-hero-tela .sub { color: var(--gh-texto-2); font-size: 15px; }
  .gh-voltar { color: var(--gh-texto-2); }
  .gh-hero .gh-tag.marca { color: var(--gh-dourado-texto); }
  .gh-tempo-caixa { background: var(--gh-tinta); border-radius: 18px; padding: 18px 24px; }
  .gh-tempo .passo { width: 96px; font-size: 13px; }

  .gh-duas-col { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: start; }
  .gh-duas-col > .col-principal, .gh-duas-col > .col-lateral { display: flex; flex-direction: column; gap: 20px; }
  .gh-duas-col > .col-principal { grid-column: 1; grid-row: 1; }
  .gh-duas-col > .col-lateral { grid-column: 2; grid-row: 1; position: sticky; top: 20px; }
  .col-lateral .gh-agora { flex-direction: column; align-items: stretch; }
  .col-lateral .gh-agora .gh-agora-linha { align-items: flex-start; }

  .gh-pecas { margin: 0 -20px; }
  .gh-peca { padding: 12px 20px; }
  .gh-peca .tipo { display: block; }
  .gh-peca-atalho { padding: 0 20px 10px 56px; }
  .gh-abas { margin: -20px -20px 0; }
  .gh-acoes-fixas { position: static; box-shadow: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Portal v2 — Vendas e Clientes (SPEC_REDESIGN_FASE2.md, sub-fase 2.3)
   ══════════════════════════════════════════════════════════════════════════ */

.gh [hidden] { display: none !important; }
.gh-cab-tela { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 8px 4px 0; }
.gh-cab-tela h1 { font-family: var(--gh-fonte-titulo); font-weight: 400; font-size: 36px; line-height: 1; }
.gh-cab-tela .acoes { display: flex; gap: 8px; }

/* Resumo escuro do topo de Vendas */
.gh-resumo-vendas { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.gh-resumo-vendas .valor { font-size: 30px; font-weight: 600; color: var(--gh-dourado-claro); line-height: 1.15; }
.gh-resumo-vendas small { display: block; font-size: 12px; color: rgba(244,241,234,.6); }
.gh-resumo-vendas .lado { text-align: right; }
.gh-resumo-vendas .lado b { font-size: 26px; font-weight: 600; }
.gh-recebido-mes { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.gh-recebido-mes span { font-size: 13px; color: var(--gh-texto-2); }
.gh-recebido-mes b { font-size: 26px; }

/* Abas em pílula */
.gh-segmento { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: #EAE6DC; }
.gh-segmento a { min-height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #4A4843; }
.gh-segmento a.ativo { background: var(--gh-branco); color: var(--gh-texto); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.gh-mes { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gh-texto-2); padding: 8px 4px 0; }
.gh-iniciais { width: 42px; height: 42px; border-radius: 50%; background: var(--gh-dourado-fundo); color: var(--gh-dourado-texto); font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gh-iniciais.paga { background: var(--gh-sucesso-fundo); color: var(--gh-sucesso-texto); }
.gh-btn.icone { width: 46px; padding: 0; flex-shrink: 0; }
.gh-btn.flex { flex: 1; }
.gh-busca.clara { background: var(--gh-branco); border: 1px solid var(--gh-borda-forte); }
.gh-busca-linha { display: flex; flex-direction: column; gap: 12px; }
.gh-busca-linha form { display: flex; gap: 8px; margin: 0; }
.gh-busca-linha .gh-busca { flex: 1; }

/* Item de venda/cliente: card no celular, linha de tabela no computador */
.gh-tabela { display: flex; flex-direction: column; gap: 12px; }
.gh-tabela-cab { display: none; }
.gh-item { background: var(--gh-branco); border: 1px solid var(--gh-borda); border-radius: var(--gh-raio-lg); padding: 16px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 12px; align-items: center; }
.gh-item .quem { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gh-item .quem b { font-size: 15px; font-weight: 600; }
.gh-item .quem span { font-size: 13px; color: var(--gh-texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-item .quanto { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.gh-item .quanto b { font-size: 15px; white-space: nowrap; }
.gh-item .quanto small { font-size: 12px; color: var(--gh-texto-2); text-align: right; white-space: nowrap; }
.gh-item .acoes { grid-column: 1 / -1; display: flex; gap: 8px; }
.gh-item .acoes .gh-btn { min-height: 44px; }
.gh-item .acoes .gh-btn.icone { width: 44px; }
.gh-item .gh-mais { position: relative; }
.gh-item .gh-menu { width: 220px; }
.gh-item.saindo { opacity: 0; transition: opacity .25s; }
.gh-item .quanto small .so-celular { display: block; }

/* Formulários (Nova venda, Novo cliente) */
.gh-form { display: flex; flex-direction: column; gap: 16px; }
.gh-grupo { display: flex; flex-direction: column; gap: 12px; }
.gh-grupo > .titulo { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gh-texto-2); }
.gh-campo input:not([type=hidden]):not([type=radio]):not([type=checkbox]), .gh-campo select {
  height: 50px; border-radius: 12px; border: 1px solid var(--gh-borda-forte); padding: 0 14px; font-size: 16px; color: var(--gh-texto); background: var(--gh-branco); width: 100%; min-width: 0; }
.gh-campo input:disabled { background: var(--gh-marfim); color: var(--gh-texto-2); }
.gh-campo input:focus, .gh-campo select:focus { outline: 2px solid var(--gh-dourado); outline-offset: 1px; border-color: var(--gh-dourado); }
.gh-campo label .opcional { color: var(--gh-texto-2); font-weight: 400; }
.gh-campo .ajuda { font-size: 12px; line-height: 1.45; color: var(--gh-texto-2); }
.gh-campo .ajuda:empty { display: none; }
.gh-campo .ajuda.ok { color: var(--gh-sucesso-texto); }
.gh-campo .ajuda.aviso { color: var(--gh-atencao-texto); }
.gh-moeda { position: relative; }
.gh-moeda > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--gh-texto-2); pointer-events: none; }
.gh-campo .gh-moeda input { padding-left: 42px !important; }
.gh-dupla-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gh-autocompletar { position: relative; }
.gh-sugestoes { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; border: 1px solid var(--gh-borda-forte); border-radius: 12px; background: var(--gh-branco); box-shadow: var(--gh-sombra); overflow: hidden; }
.gh-sugestoes[hidden] { display: none; }
.gh-sugestoes button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 12px; border: none; border-top: 1px solid #F1EEE7; background: none; text-align: left; font-size: 15px; color: var(--gh-texto); }
.gh-sugestoes button:first-child { border-top: none; }
.gh-sugestoes button:hover, .gh-sugestoes button.foco { background: var(--gh-marfim); }
.gh-sugestoes .gh-iniciais { width: 32px; height: 32px; font-size: 12px; }
.gh-sugestoes small { display: block; font-size: 12px; color: var(--gh-texto-2); }
.gh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gh-chips button, .gh-chips label { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gh-borda-forte); background: var(--gh-branco); font-size: 13px; color: var(--gh-texto); display: inline-flex; align-items: center; cursor: pointer; }
.gh-chips button.ativo, .gh-chips input:checked + label { background: var(--gh-texto); color: var(--gh-texto-claro); border-color: var(--gh-texto); }
.gh-chips input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.gh-chips input:focus-visible + label { outline: 2px solid var(--gh-dourado); outline-offset: 2px; }
.gh-link-perigo { background: none; border: none; padding: 10px 0; font-size: 14px; font-weight: 500; color: var(--gh-perigo-texto); }
.gh-resumo-venda { display: flex; flex-direction: column; gap: 12px; }
.gh-resumo-venda .quem { display: flex; gap: 12px; align-items: center; min-width: 0; }
.gh-resumo-venda .quem small { display: block; font-size: 12px; color: rgba(244,241,234,.6); }
.gh-resumo-venda .total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; }
.gh-resumo-venda .total b { font-size: 26px; color: var(--gh-dourado-claro); }

@media (min-width: 900px) {
  .gh-cab-tela { padding: 12px 0 0; }
  .gh-cab-tela h1 { font-size: 48px; }
  .gh-vendas.gh-pilha { gap: 20px; }
  .gh-resumo-linha { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
  .gh-segmento { max-width: 520px; }
  .gh-busca-linha { flex-direction: row; gap: 16px; align-items: center; }
  .gh-busca-linha .gh-segmento { width: 520px; flex-shrink: 0; }
  .gh-busca-linha form { flex: 1; }

  /* Vira tabela: os filhos de .quem/.quanto passam a ser colunas */
  .gh-tabela { gap: 0; background: var(--gh-branco); border: 1px solid var(--gh-borda); border-radius: var(--gh-raio-lg); }
  .gh-tabela-cab, .gh-item { display: grid; align-items: center; column-gap: 12px; padding: 12px 20px; }
  .gh-tabela-cab { font-size: 12px; color: var(--gh-texto-2); background: #FAF8F4; border-radius: var(--gh-raio-lg) var(--gh-raio-lg) 0 0; padding-top: 10px; padding-bottom: 10px; }
  .gh-item { border: none; border-top: 1px solid #F1EEE7; border-radius: 0; row-gap: 0; font-size: 14px; }
  .gh-tabela-cab + .gh-item { border-top: none; }
  .gh-item .quem, .gh-item .quanto { display: contents; }
  .gh-item .quem b { font-weight: 500; font-size: 14px; }
  .gh-item .quem span, .gh-item .quanto small { font-size: 14px; }
  .gh-item .quanto small { text-align: left; }
  .gh-item .quanto b { font-size: 14px; }
  .gh-item .quanto .gh-tag { justify-self: start; }
  .gh-item .gh-iniciais { width: 34px; height: 34px; font-size: 12px; }
  .gh-item .acoes { grid-column: auto; justify-content: flex-end; gap: 6px; }
  .gh-item .acoes .gh-btn { min-height: 38px; padding: 0 12px; font-size: 13px; }
  .gh-item .acoes .gh-btn.icone { width: 38px; padding: 0; }
  .gh-tabela-vendas .gh-tabela-cab, .gh-tabela-vendas .gh-item { grid-template-columns: 34px minmax(0, 1.5fr) minmax(0, 2fr) 120px 110px 96px 184px; }
  .gh-tabela-clientes .gh-tabela-cab, .gh-tabela-clientes .gh-item { grid-template-columns: 34px minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1.5fr) 110px 176px; }
  .gh-tabela-cab > :first-child { grid-column: span 2; }

  .gh-form-duas { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: start; }
  .gh-form-duas > .lateral { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
  .gh-form-estreito { max-width: 640px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Portal v2 — Financeiro, Minhas maletas e Desempenho (SPEC_REDESIGN_FASE2.md, sub-fase 2.4)
   ══════════════════════════════════════════════════════════════════════════ */

/* Topo do Financeiro */
.gh-acerto { display: flex; flex-direction: column; gap: 14px; }
.gh-acerto .valor { font-size: 34px; font-weight: 600; color: var(--gh-dourado-claro); line-height: 1.1; }
.gh-acerto .quando { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: rgba(244,241,234,.7); margin-top: 6px; }
.gh-acerto .quando svg.ic { width: 15px; height: 15px; }
.gh-acerto .rodape { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px; font-size: 13px; }
.gh-acerto .rodape span { color: rgba(244,241,234,.6); }
.gh-acerto .rodape b { font-weight: 600; }
.gh-card-escuro .gh-tag.atencao { background: rgba(201,168,76,.18); color: var(--gh-dourado-claro); }
.gh-card-escuro .gh-tag.perigo { background: rgba(232,165,157,.16); color: #F0B7AF; }
.gh-card-escuro .gh-tag.sucesso { background: rgba(120,190,170,.16); color: #9ED3C3; }
.gh-como-funciona { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.gh-como-funciona span { font-size: 13px; color: var(--gh-texto-2); }
.gh-como-funciona p { font-size: 14px; line-height: 1.5; }

/* Card de maleta no Financeiro */
.gh-fin { display: flex; flex-direction: column; gap: 14px; }
.gh-fin-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gh-fin-cab h2 { font-family: var(--gh-fonte-titulo); font-weight: 400; font-size: 26px; line-height: 1; }
.gh-fin-cab .gh-link-acao { padding: 4px 0 0; display: inline-block; }
.gh-fin-cab .falta { text-align: right; }
.gh-fin-cab .falta span { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gh-texto-2); }
.gh-fin-cab .falta b { font-size: 18px; white-space: nowrap; }

/* Parcelas em linha do tempo vertical */
.gh-parcelas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gh-parcela { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; scroll-margin-top: 90px; border-radius: 12px; transition: background-color .4s, box-shadow .4s; }
.gh-parcela + .gh-parcela::before { content: ''; position: absolute; left: 12px; top: -10px; height: 20px; width: 2px; background: var(--gh-borda-forte); }
.gh-parcela .bola { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--gh-borda-forte); background: var(--gh-branco); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.gh-parcela .bola svg.ic { width: 13px; height: 13px; stroke-width: 3; }
.gh-parcela.paga .bola { background: var(--gh-sucesso-texto); border-color: var(--gh-sucesso-texto); color: #fff; }
.gh-parcela.parcial .bola { border-color: var(--gh-dourado); background: linear-gradient(90deg, var(--gh-dourado) 50%, var(--gh-branco) 50%); }
.gh-parcela.vencida .bola { border-color: var(--gh-perigo-texto); color: var(--gh-perigo-texto); }
.gh-parcela .info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gh-parcela .info b { font-size: 14px; font-weight: 600; }
.gh-parcela .info span { font-size: 12px; color: var(--gh-texto-2); }
.gh-parcela.vencida .info span.venc { color: var(--gh-perigo-texto); }
.gh-parcela .info .gh-barra { margin-top: 6px; max-width: 220px; }
.gh-parcela .valor { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.gh-parcela .valor b { font-size: 15px; white-space: nowrap; }
.gh-parcela.destaque { background: rgba(201,168,76,.14); box-shadow: 0 0 0 8px rgba(201,168,76,.14); }

/* Ordenação (select em pílula) */
.gh-ordem { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.gh-ordem select { appearance: none; -webkit-appearance: none; min-height: 38px; border-radius: 999px; border: 1px solid var(--gh-borda-forte); background: var(--gh-branco); padding: 0 34px 0 14px; font-size: 13px; color: var(--gh-texto); font-family: inherit; cursor: pointer; }
.gh-ordem svg.ic { position: absolute; right: 12px; width: 14px; height: 14px; pointer-events: none; transform: rotate(90deg); }
.gh-barra-lista { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 4px; }
.gh-barra-lista .gh-mes { padding: 0; }
.gh-barra-maletas { flex-wrap: wrap; }
.gh-barra-maletas .gh-segmento { flex: 1 1 100%; }
.gh-paginas { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--gh-texto-2); padding: 4px; }
.gh-paginas .botoes { display: flex; gap: 8px; }
.gh-paginas .gh-btn svg.ic.volta { transform: rotate(180deg); }

/* Minhas maletas: card no celular, linha de tabela no computador */
.gh-tabela-maletas .gh-item { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; column-gap: 8px; }
.gh-tabela-maletas a.gh-item { color: inherit; }
.gh-tabela-maletas .gh-item.ativa { border-color: #EADFC4; box-shadow: var(--gh-sombra); }
.gh-tabela-maletas .titulo { grid-column: 1 / 3; font-family: var(--gh-fonte-titulo); font-weight: 400; font-size: 26px; line-height: 1; }
.gh-tabela-maletas .situacao { grid-column: 3; justify-self: end; }
.gh-tabela-maletas .num { background: var(--gh-marfim); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gh-tabela-maletas .num span { font-size: 11px; color: var(--gh-texto-2); }
.gh-tabela-maletas .num b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-tabela-maletas .parc { grid-column: 1 / 3; display: flex; gap: 4px 12px; flex-wrap: wrap; font-size: 13px; color: var(--gh-texto-2); }
.gh-tabela-maletas .parc i { font-style: normal; display: inline-flex; align-items: center; gap: 4px; }
.gh-tabela-maletas .parc i.ok { color: var(--gh-sucesso-texto); }
.gh-tabela-maletas .parc i.aberta { color: var(--gh-atencao-texto); }
.gh-tabela-maletas .parc svg.ic { width: 14px; height: 14px; stroke-width: 2.6; }
.gh-tabela-maletas .seta { grid-column: 3; justify-self: end; width: 18px; height: 18px; color: var(--gh-texto-2); }

/* Desempenho */
.gh-nivel-card { display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; }
.gh-nivel-card::after { content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,76,.28), transparent 70%); pointer-events: none; }
.gh-nivel-card .nome { font-family: var(--gh-fonte-titulo); font-size: 52px; line-height: .95; color: var(--gh-dourado-claro); }
.gh-nivel-card .ref { font-size: 13px; color: rgba(244,241,234,.6); margin-top: 4px; }
.gh-nivel-card .falta { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: rgba(244,241,234,.75); }
.gh-nivel-card .falta b { color: var(--gh-dourado-claro); }
.gh-nivel-card .gh-barra { height: 8px; }
.gh-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gh-tres .gh-card { padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gh-tres span { font-size: 12px; color: var(--gh-texto-2); }
.gh-tres b { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-melhor { display: flex; align-items: center; gap: 14px; }
.gh-melhor .gh-icone-bloco { background: var(--gh-dourado-fundo); color: var(--gh-dourado-texto); }
.gh-melhor > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gh-melhor span { font-size: 12px; color: var(--gh-texto-2); }
.gh-melhor b { font-size: 16px; }
.gh-melhor .valor { text-align: right; align-items: flex-end; }

/* Gráfico de barras em CSS (sem biblioteca) */
.gh-grafico { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding-top: 22px; overflow-x: auto; scrollbar-width: none; }
.gh-grafico::-webkit-scrollbar { display: none; }
.gh-grafico .col { flex: 1 0 34px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.gh-grafico .area { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.gh-grafico .barra { width: 100%; max-width: 44px; border-radius: 8px 8px 3px 3px; background: #E9DFC2; position: relative; min-height: 4px; }
.gh-grafico .col.melhor .barra { background: var(--gh-dourado); }
.gh-grafico .barra em { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; color: var(--gh-texto-2); white-space: nowrap; }
.gh-grafico .mes { font-size: 11px; color: var(--gh-texto-2); white-space: nowrap; }
.gh-legenda { display: flex; gap: 14px; font-size: 12px; color: var(--gh-texto-2); }
.gh-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.gh-tabela-desempenho .gh-item { grid-template-columns: minmax(0, 1fr) auto auto 18px; }
.gh-tabela-desempenho .gh-item b.mes { font-weight: 500; }
.gh-tabela-desempenho .gh-item svg.ic { width: 18px; height: 18px; color: var(--gh-texto-2); }

@media (max-width: 899.98px) {
  /* Por maleta (Desempenho): no celular vira lista simples dentro de um card */
  .gh-tabela-desempenho { gap: 0; background: var(--gh-branco); border: 1px solid var(--gh-borda); border-radius: var(--gh-raio-lg); padding: 4px 16px; }
  .gh-tabela-desempenho .gh-item { border: none; border-top: 1px solid #F1EEE7; border-radius: 0; padding: 12px 0; font-size: 14px; }
  .gh-tabela-desempenho .gh-item:first-child { border-top: none; }
  .gh-tabela-desempenho .gh-item span { color: var(--gh-texto-2); }
}

@media (min-width: 900px) {
  .gh-topo-fin { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
  .gh-acerto { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .gh-acerto .rodape { border-top: none; padding-top: 0; flex-direction: column; text-align: right; gap: 2px; }
  .gh-acerto .valor { font-size: 44px; }
  .gh-fin-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .gh-fin-grade + .gh-nota, .gh-segmento.estreito { max-width: 420px; }
  .gh-barra-lista { padding: 0; }
  .gh-barra-maletas { flex-wrap: nowrap; }
  .gh-barra-maletas .gh-segmento { flex: 0 1 560px; }

  .gh-tabela-maletas .gh-tabela-cab, .gh-tabela-maletas .gh-item { grid-template-columns: minmax(0, 1fr) 190px 70px 80px 130px minmax(0, 1.6fr) 18px; row-gap: 0; column-gap: 12px; }
  .gh-tabela-maletas .gh-tabela-cab > :first-child { grid-column: auto; }
  .gh-tabela-maletas .titulo { grid-column: auto; font-size: 22px; }
  .gh-tabela-maletas .situacao, .gh-tabela-maletas .seta { grid-column: auto; justify-self: start; }
  .gh-tabela-maletas .seta { justify-self: end; }
  .gh-tabela-maletas .num { background: none; padding: 0; border-radius: 0; }
  .gh-tabela-maletas .num span { display: none; }
  .gh-tabela-maletas .num b { font-size: 14px; font-weight: 400; }
  .gh-tabela-maletas .num.total b { font-weight: 600; }
  .gh-tabela-maletas .parc { grid-column: auto; font-size: 13px; }
  .gh-tabela-maletas .gh-item.ativa { box-shadow: inset 3px 0 0 var(--gh-dourado); }
  .gh-tabela-maletas a.gh-item:hover { background: #FAF8F4; }

  .gh-nivel-card .nome { font-size: 64px; }
  .gh-tres { gap: 20px; }
  .gh-tres .gh-card { padding: 18px 20px; }
  .gh-tres b { font-size: 22px; }
  .gh-grafico { height: 240px; gap: 14px; }
  .gh-tabela-desempenho .gh-tabela-cab, .gh-tabela-desempenho .gh-item { grid-template-columns: minmax(0, 1fr) 140px 90px 18px; }
  .gh-tabela-desempenho .gh-tabela-cab > :first-child { grid-column: auto; }
  .gh-tabela-desempenho a.gh-item:hover { background: #FAF8F4; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Portal v2 — Notificações, Perfil e Senha (SPEC_REDESIGN_FASE2.md, sub-fase 2.5)
   ══════════════════════════════════════════════════════════════════════════ */

/* Lista de notificações */
.gh-avisos { display: flex; flex-direction: column; gap: 10px; }
.gh-aviso { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: start;
  background: var(--gh-branco); border: 1px solid var(--gh-borda); border-radius: var(--gh-raio-lg); padding: 14px 16px; color: inherit; }
.gh-aviso.nova { border-color: #EADFC4; box-shadow: var(--gh-sombra); }
.gh-aviso .gh-icone-bloco { width: 42px; height: 42px; border-radius: 14px; }
.gh-aviso .gh-icone-bloco.neutro { background: var(--gh-neutro-fundo); color: var(--gh-texto-2); }
.gh-aviso .corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gh-aviso .topo { display: flex; align-items: center; gap: 8px; }
.gh-aviso .topo b { font-size: 15px; }
.gh-aviso .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--gh-dourado); flex-shrink: 0; }
.gh-aviso p { font-size: 14px; line-height: 1.5; color: var(--gh-texto-2); }
.gh-aviso .quando { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--gh-texto-2); margin-top: 2px; }
.gh-aviso .quando .ver { color: var(--gh-dourado-texto); font-weight: 500; }
a.gh-aviso:hover { box-shadow: var(--gh-sombra); }

/* Perfil */
.gh-conta { display: flex; flex-direction: column; gap: 10px; }
.gh-conta .gh-linha { font-size: 14px; }
.gh-perfil-topo { display: flex; align-items: center; gap: 14px; }
.gh-perfil-topo .gh-avatar { width: 56px; height: 56px; font-size: 20px; }
.gh-perfil-topo div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gh-perfil-topo b { font-size: 17px; }
.gh-perfil-topo span { font-size: 13px; color: var(--gh-texto-2); }

/* Trocar senha (tela limpa, sem menu) */
.gh-limpa { display: flex; flex-direction: column; align-items: center; padding: 8px 0 24px; }
.gh-limpa .caixa { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 16px; }
.gh-boas-vindas { text-align: center; display: flex; flex-direction: column; gap: 8px; }
.gh-boas-vindas h1 { font-family: var(--gh-fonte-titulo); font-weight: 400; font-size: 34px; line-height: 1.05; }
.gh-boas-vindas p { font-size: 14px; line-height: 1.55; color: var(--gh-texto-2); }
.gh-senha { position: relative; }
.gh-senha .olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: none; background: none; color: var(--gh-texto-2); display: flex; align-items: center; justify-content: center; }
.gh-campo .gh-senha input { padding-right: 46px; }
.gh-regras { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--gh-texto-2); }
.gh-regras i { font-style: normal; display: flex; align-items: center; gap: 6px; }
.gh-regras i.ok { color: var(--gh-sucesso-texto); }
.gh-regras svg { width: 14px; height: 14px; stroke-width: 2.6; }

@media (min-width: 900px) {
  .gh-avisos { gap: 12px; }
  .gh-aviso { padding: 16px 20px; }
  .gh-perfil-duas { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: start; }
  .gh-perfil-duas > .lateral { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
  .gh-tres-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Sistema interno v2 — casca e home por papel (SPEC_REDESIGN_FASE3.md)
   ══════════════════════════════════════════════════════════════════════════ */

.gh-app { min-height: 100dvh; }

/* ── Lateral (computador) ───────────────────────────────────────────── */
.gh-lat { display: none; }
.gh-adm-conteudo { width: 100%; max-width: 1240px; margin: 0 auto; padding: 16px; }

@media (min-width: 900px) {
  /* A janela não rola: quem rola é o conteúdo. Assim a lateral fica parada
     de verdade e some a barra de rolagem que corria a tela inteira. */
  .gh-sistema { height: 100dvh; overflow: hidden; }
  .gh-app { display: grid; grid-template-columns: 236px minmax(0, 1fr); height: 100dvh; overflow: hidden; }
  .gh-app.recolhida { grid-template-columns: 68px minmax(0, 1fr); }
  .gh-lat { display: flex; flex-direction: column; gap: 4px; height: 100dvh;
    background: var(--gh-tinta); color: var(--gh-texto-claro); padding: 14px 10px 10px; overflow-y: auto; scrollbar-width: none; }
  .gh-lat::-webkit-scrollbar { display: none; }
  .gh-app-corpo { height: 100dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .gh-app-corpo { scrollbar-width: thin; scrollbar-color: #DCD7CC transparent; }
  .gh-app-corpo::-webkit-scrollbar { width: 12px; }
  .gh-app-corpo::-webkit-scrollbar-track { background: transparent; }
  .gh-app-corpo::-webkit-scrollbar-thumb { background: #DCD7CC; border-radius: 999px;
    border: 4px solid transparent; background-clip: content-box; }
  .gh-app-corpo::-webkit-scrollbar-thumb:hover { background: #C9C2B3; background-clip: content-box; }
  .gh-adm-conteudo { padding: 24px 32px 40px; }
}

.gh-lat .marca { display: flex; align-items: center; gap: 9px; padding: 4px 6px 14px; color: var(--gh-texto-claro); }
.gh-lat .marca .nome { font-weight: 700; letter-spacing: -.02em; font-size: 18px; }
.gh-lat .marca .nome span { color: var(--gh-dourado); }
.gh-lat .marca .gh-logo { height: 28px; }
.gh-lat nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.gh-lat .secao { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.28); padding: 16px 10px 6px; }
.gh-lat a, .gh-lat button.grupo { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 10px;
  font-size: 14px; color: rgba(255,255,255,.62); background: none; border: none; width: 100%; text-align: left; position: relative; }
.gh-lat a:hover, .gh-lat button.grupo:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.9); }
.gh-lat a.ativo { background: rgba(255,255,255,.07); color: #fff; font-weight: 500; }
.gh-lat a.ativo::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gh-dourado); }
.gh-lat svg.ic { width: 17px; height: 17px; flex-shrink: 0; }
.gh-lat .conta { margin-left: auto; font-size: 11px; font-weight: 600; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: rgba(201,168,76,.2); color: var(--gh-dourado-claro); display: inline-flex; align-items: center; justify-content: center; }
.gh-lat .conta.perigo { background: rgba(232,165,157,.18); color: #F0B7AF; }
.gh-lat button.grupo .seta { margin-left: auto; width: 13px; height: 13px; transform: rotate(90deg); transition: transform .18s; }
.gh-lat button.grupo[aria-expanded="true"] .seta { transform: rotate(-90deg); }
.gh-lat .sub { display: flex; flex-direction: column; gap: 2px; padding-left: 18px; }
.gh-lat .sub a { min-height: 36px; font-size: 13px; }
/* sub-itens com ícone menor e mais apagado que o do grupo */
.gh-lat .sub svg.ic { width: 15px; height: 15px; opacity: .75; }
.gh-lat .sub a.ativo svg.ic { opacity: 1; }
.gh-lat .rodape { border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.gh-lat .rodape .gh-avatar { width: 34px; height: 34px; font-size: 13px; }
.gh-lat .rodape .quem { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gh-lat .rodape .quem b { font-size: 13px; color: var(--gh-texto-claro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-lat .rodape .quem small { font-size: 11px; color: rgba(255,255,255,.4); }
.gh-lat .rodape button.recolher { width: 32px; height: 32px; border-radius: 9px; border: none; background: rgba(255,255,255,.06); color: rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; }
.gh-lat .rodape button.recolher svg { transform: rotate(180deg); }

/* Lateral recolhida */
.recolhida .gh-lat { padding: 14px 8px 10px; align-items: center; }
/* Recolhida sobra só o monograma, centralizado */
.recolhida .gh-lat .marca { padding: 4px 0 14px; justify-content: center; }
.recolhida .gh-lat .marca .nome { display: none; }
.recolhida .gh-lat .marca .gh-logo { height: 32px; }
.recolhida .gh-lat .rotulo, .recolhida .gh-lat .secao, .recolhida .gh-lat .sub,
.recolhida .gh-lat .rodape .quem, .recolhida .gh-lat .conta { display: none; }
.recolhida .gh-lat a, .recolhida .gh-lat button.grupo { justify-content: center; padding: 0; }
.recolhida .gh-lat button.grupo .seta { display: none; }
.recolhida .gh-lat .rodape { flex-direction: column; }
.recolhida .gh-lat .rodape button.recolher svg { transform: none; }

/* ── Topo do conteúdo ───────────────────────────────────────────────── */
.gh-adm-topo { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--gh-tinta); color: var(--gh-texto-claro); position: sticky; top: 0; z-index: 40; }
.gh-adm-topo .marca { display: flex; align-items: center; gap: 8px; }
.gh-adm-topo .marca .nome { font-weight: 700; letter-spacing: -.02em; font-size: 17px; }
.gh-adm-topo .marca .nome span { color: var(--gh-dourado); }
.gh-adm-topo .marca .gh-logo { height: 24px; }
.gh-adm-topo .dir { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* No celular a ação principal fica só com o "+", pra sobrar espaço no topo */
@media (max-width: 899.98px) { .gh-adm-topo .gh-btn { padding: 0 14px; } .gh-adm-topo .gh-btn .rotulo { display: none; } }
@media (min-width: 900px) {
  .gh-adm-topo { background: transparent; color: var(--gh-texto); position: static; padding: 24px 32px 0; width: 100%; max-width: 1240px; margin: 0 auto; }
  .gh-adm-topo .marca { display: none; }
  .gh-adm-topo .gh-icon-btn { background: var(--gh-branco); border: 1px solid var(--gh-borda); color: var(--gh-texto); }
}

/* ── Barra de baixo (celular) ───────────────────────────────────────── */
.gh-bottom .mais-menu { width: 52px; min-width: 52px; height: 52px; border-radius: 18px; background: rgba(255,255,255,.08); color: var(--gh-dourado-claro); }

/* Folha "Mais" com o menu completo */
.gh-folha-menu { display: flex; flex-direction: column; gap: 4px; max-height: 70dvh; overflow-y: auto; }
.gh-folha-menu .secao { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gh-texto-2); padding: 14px 4px 4px; }
.gh-folha-menu a { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 10px; border-radius: 12px; font-size: 15px; color: var(--gh-texto); }
.gh-folha-menu a:hover { background: var(--gh-marfim); }
.gh-folha-menu a .conta { margin-left: auto; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--gh-dourado-fundo); color: var(--gh-dourado-texto); }
.gh-folha-menu a .conta.perigo { background: var(--gh-perigo-fundo); color: var(--gh-perigo-texto); }
.gh-folha-menu svg.ic { width: 18px; height: 18px; color: var(--gh-texto-2); }

/* ── Home por papel ─────────────────────────────────────────────────── */
.gh-ola h1 { font-family: var(--gh-fonte-titulo); font-weight: 400; font-size: 34px; line-height: 1.05; }
.gh-ola .data { font-size: 13px; color: var(--gh-texto-2); margin-top: 4px; }
.gh-secao-cab-simples { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 2px; }
.gh-secao-cab-simples h2 { font-size: 15px; font-weight: 600; }
.gh-secao-cab-simples span { font-size: 13px; color: var(--gh-texto-2); }

.gh-fila { display: flex; flex-direction: column; gap: 10px; }
a.gh-tarefa { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  background: var(--gh-branco); border: 1px solid var(--gh-borda); border-radius: var(--gh-raio-lg); padding: 14px 16px; color: inherit; }
a.gh-tarefa:hover { box-shadow: var(--gh-sombra); }
.gh-tarefa .gh-icone-bloco { width: 42px; height: 42px; border-radius: 14px; }
.gh-tarefa .gh-icone-bloco.neutro { background: var(--gh-neutro-fundo); color: var(--gh-texto-2); }
.gh-tarefa .gh-icone-bloco.perigo { background: var(--gh-perigo-fundo); color: var(--gh-perigo-texto); }
.gh-tarefa .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gh-tarefa .txt b { font-size: 15px; font-weight: 600; }
.gh-tarefa .txt span { font-size: 13px; color: var(--gh-texto-2); }
.gh-tarefa .quanto { display: flex; align-items: center; gap: 10px; }
.gh-tarefa .quanto .n { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gh-tarefa.urgente { border-color: #EFD6D2; }
.gh-tarefa.urgente .n { color: var(--gh-perigo-texto); }
.gh-tarefa .quanto svg.ic { width: 16px; height: 16px; color: var(--gh-texto-2); }

.gh-numeros-adm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gh-numeros-adm .gh-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.gh-numeros-adm span { font-size: 12px; color: var(--gh-texto-2); }
.gh-numeros-adm b { font-size: 20px; font-variant-numeric: tabular-nums; }
.gh-numeros-adm .gh-card.escuro { background: var(--gh-tinta); border-color: var(--gh-tinta); }
.gh-numeros-adm .gh-card.escuro span { color: rgba(244,241,234,.6); }
.gh-numeros-adm .gh-card.escuro b { color: var(--gh-dourado-claro); }

@media (min-width: 900px) {
  .gh-ola h1 { font-size: 44px; }
  .gh-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gh-fila.uma-coluna { grid-template-columns: minmax(0, 1fr); }
  .gh-numeros-adm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .gh-numeros-adm .gh-card { padding: 18px 20px; }
  .gh-numeros-adm b { font-size: 24px; }
  .gh-home-duas { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
}

/* Peças que só existem no sistema interno */
.gh-app-corpo { min-width: 0; display: flex; flex-direction: column; }
.gh-lat .fora { width: 13px; height: 13px; margin-left: auto; opacity: .6; }
.gh-lat .sub[hidden] { display: none; }
.gh-lat .sub a.ativo { background: rgba(255,255,255,.07); color: #fff; }
.gh-lat .sub a.ativo::before { display: none; }
.gh-lat .rodape .gh-ancora { position: relative; }
.gh-lat .rodape .gh-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
/* título do grupo na folha do celular (Financeiro, Dashboard) — mesmo desenho do item, sem link */
.gh-folha-menu .grupo-folha { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 10px; border: none; border-radius: 12px;
  background: none; font: inherit; font-size: 15px; color: var(--gh-texto); text-align: left; cursor: pointer; }
.gh-folha-menu .grupo-folha:hover { background: var(--gh-marfim); }
.gh-folha-menu .grupo-folha .seta { margin-left: auto; width: 14px; height: 14px; transform: rotate(90deg); transition: transform .18s; }
.gh-folha-menu .grupo-folha[aria-expanded="true"] .seta { transform: rotate(-90deg); }
.gh-folha-menu .sub-folha { display: flex; flex-direction: column; }
.gh-folha-menu .sub-folha a { padding-left: 28px; font-size: 14px; min-height: 44px; }
.gh-folha-menu .sub-folha svg.ic { width: 16px; height: 16px; }
.gh-folha-menu a.ativo { background: var(--gh-marfim); font-weight: 600; }
.gh-bottom button.mais-menu { border: none; }
/* A barra de baixo e a folha do menu são só do celular */
@media (min-width: 900px) { .gh-sistema .gh-bottom { display: none; } .gh-sistema #folha-menu { display: none !important; } }
@media (max-width: 899.98px) { .gh-sistema { padding-bottom: calc(100px + var(--gh-safe-bottom)); } }

/* ══════════════════════════════════════════════════════════════════════════
   Sistema interno v2 — lista, filtros e formulário (SPEC_REDESIGN_FASE4.md, 4.1)
   Os componentes daqui são reaproveitados pelas outras sub-fases da Fase 4.
   ══════════════════════════════════════════════════════════════════════════ */

/* Faixa de números no topo da lista */
.gh-faixa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gh-faixa .gh-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.gh-faixa span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gh-texto-2); }
.gh-faixa b { font-size: 20px; font-variant-numeric: tabular-nums; }

/* Barra de filtros */
.gh-filtros-barra { display: flex; flex-direction: column; gap: 10px; }
.gh-filtros-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gh-select { position: relative; display: inline-flex; align-items: center; }
.gh-select select { appearance: none; -webkit-appearance: none; min-height: 40px; border-radius: 999px; border: 1px solid var(--gh-borda-forte);
  background: var(--gh-branco); padding: 0 34px 0 14px; font-size: 13px; color: var(--gh-texto); font-family: inherit; max-width: 230px;
  text-overflow: ellipsis; cursor: pointer; }
.gh-select svg.ic { position: absolute; right: 12px; width: 13px; height: 13px; pointer-events: none; transform: rotate(90deg); color: var(--gh-texto-2); }
.gh-select.marcado select { border-color: var(--gh-dourado); background: var(--gh-dourado-fundo); color: var(--gh-dourado-texto); font-weight: 500; }
.gh-limpar { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: none;
  background: none; font-size: 13px; color: var(--gh-texto-2); }
.gh-limpar svg.ic { width: 13px; height: 13px; }

/* Tabela de maletas do sistema interno */
.gh-tabela-adm .gh-item { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
.gh-tabela-adm .gh-item .quem { grid-column: 1 / 3; display: flex; flex-direction: row; align-items: center; gap: 10px; }
.gh-tabela-adm .quem b { font-size: 15px; }
.gh-tabela-adm .quem .mes { font-size: 13px; color: var(--gh-texto-2); font-variant-numeric: tabular-nums; }
.gh-tabela-adm .situacao { grid-column: 1 / 3; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gh-tabela-adm .campo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gh-tabela-adm .campo span { font-size: 11px; color: var(--gh-texto-2); }
.gh-tabela-adm .campo b { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.gh-tabela-adm .parcelas { display: flex; gap: 10px; font-size: 12px; }
.gh-tabela-adm .parcelas i { font-style: normal; display: inline-flex; align-items: center; gap: 4px; color: var(--gh-texto-2); }
.gh-tabela-adm .parcelas i.ok { color: var(--gh-sucesso-texto); }
.gh-tabela-adm .parcelas i.aberta { color: var(--gh-atencao-texto); }
.gh-tabela-adm .parcelas svg.ic { width: 13px; height: 13px; stroke-width: 2.6; }
.gh-tabela-adm .seta { display: none; }
.gh-tabela-adm .campo.mes { display: none; }          /* no celular o mês já está no título */
/* No sistema interno as abas podem ser muitas: no celular elas rolam em vez de espremer */
@media (max-width: 899.98px) {
  .gh-sistema .gh-segmento { grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
  .gh-sistema .gh-segmento::-webkit-scrollbar { display: none; }
  .gh-sistema .gh-segmento a { padding: 0 14px; white-space: nowrap; }
}

/* Formulário do sistema interno */
.gh-form-adm { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.gh-form-adm .gh-card { padding: 20px; }
.gh-acoes-form { display: flex; gap: 10px; flex-wrap: wrap; }
.gh-acoes-form .gh-btn { min-height: 48px; }

@media (min-width: 900px) {
  .gh-faixa { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .gh-faixa .gh-card { padding: 16px 20px; }
  .gh-filtros-barra { flex-direction: row; align-items: center; justify-content: space-between; }
  .gh-filtros-barra .gh-busca { width: 300px; }

  .gh-tabela-adm .gh-tabela-cab, .gh-tabela-adm .gh-item {
    grid-template-columns: minmax(0, 1.6fr) 88px 104px 58px 112px 148px 104px 18px; row-gap: 0; }
  .gh-tabela-adm .campo.envio { display: none; }
  .gh-tabela-adm .campo.mes { display: flex; }     /* no computador a data de envio sai: a de devolução é a que importa */
  .gh-tabela-adm .quem b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .gh-tabela-adm .gh-tabela-cab > :first-child { grid-column: auto; }
  /* a regra de Vendas transforma .quem em `display: contents` no computador;
     aqui a célula continua sendo uma só (avatar + nome) */
  .gh-tabela-adm .gh-item .quem { grid-column: auto; display: flex; flex-direction: row; align-items: center; gap: 10px; }
  .gh-tabela-adm .quem .mes { display: none; }
  .gh-tabela-adm .situacao { grid-column: auto; }
  .gh-tabela-adm .campo span { display: none; }
  .gh-tabela-adm .campo b { font-size: 14px; }
  .gh-tabela-adm .seta { display: block; width: 18px; height: 18px; color: var(--gh-texto-2); }
  .gh-tabela-adm a.gh-item:hover { background: #FAF8F4; }
  .gh-tabela-adm .gh-tabela-cab .dir, .gh-tabela-adm .campo.dir b { text-align: right; }
  .gh-tabela-adm .gh-tabela-cab .centro, .gh-tabela-adm .campo.centro b { text-align: center; }
}

@media (min-width: 1200px) {
  /* Em tela larga cabe a data de envio junto com o resto */
  .gh-tabela-adm .gh-tabela-cab, .gh-tabela-adm .gh-item {
    grid-template-columns: minmax(0, 1.5fr) 88px 96px 104px 58px 112px 148px 104px 18px; }
  .gh-tabela-adm .campo.envio { display: flex; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Sistema interno v2 — detalhe da maleta e conferência (SPEC_REDESIGN_FASE4.md, 4.2)
   ══════════════════════════════════════════════════════════════════════════ */

/* Cabeçalho de detalhe */
.gh-detalhe-cab { display: flex; flex-direction: column; gap: 12px; }
.gh-detalhe-cab .linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gh-detalhe-cab h1 { font-family: var(--gh-fonte-titulo); font-weight: 400; font-size: 34px; line-height: 1; }
.gh-detalhe-cab .quem { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.gh-detalhe-cab .quem .gh-iniciais { width: 34px; height: 34px; font-size: 12px; }
.gh-detalhe-cab .acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* Bloco de números do detalhe */
.gh-numeros-detalhe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gh-numeros-detalhe .gh-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.gh-numeros-detalhe span { font-size: 12px; color: var(--gh-texto-2); }
.gh-numeros-detalhe b { font-size: 20px; font-variant-numeric: tabular-nums; }

/* Próximo passo (o que fazer agora nesta maleta) */
.gh-passo { display: flex; gap: 14px; align-items: flex-start; }
.gh-passo .texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gh-passo .texto b { font-size: 16px; }
.gh-passo .texto span { font-size: 13px; color: var(--gh-texto-2); line-height: 1.5; }
.gh-passo .gh-btn { flex-shrink: 0; }

/* Peças da maleta */
.gh-pecas-cab { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
/* No celular a peça ocupa três linhas: código + situação, descrição e a ação.
   No computador vira uma linha só (regra no bloco de 900px). */
.gh-peca-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px;
  align-items: center; padding: 14px 0; border-top: 1px solid #F1EEE7; }
.gh-peca-linha .situ { justify-self: end; }
.gh-peca-linha .desc, .gh-peca-linha .acao { grid-column: 1 / -1; }
.gh-peca-linha .acao:empty { display: none; }
.gh-peca-linha .acao .gh-btn { width: 100%; }
.gh-peca-linha:first-of-type { border-top: none; }
.gh-peca-linha .cod { font-family: var(--gh-fonte-mono); font-size: 13px; color: var(--gh-texto-2); }
.gh-peca-linha .desc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gh-peca-linha .desc b { font-size: 14px; font-weight: 500; }
.gh-peca-linha .desc span { font-size: 12px; color: var(--gh-texto-2); }
.gh-peca-linha .valor { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gh-peca-linha.vendida { background: rgba(201,168,76,.06); }
.gh-selecao { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gh-texto-2); }
.gh-check { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--gh-borda-forte); accent-color: var(--gh-dourado); flex-shrink: 0; }

/* Conferência: bipagem */
.gh-bipar { display: flex; flex-direction: column; gap: 10px; }
.gh-bipar input { height: 64px; border-radius: 14px; border: 2px solid var(--gh-dourado); background: var(--gh-branco);
  font-family: var(--gh-fonte-mono); font-size: 26px; text-align: center; letter-spacing: .12em; color: var(--gh-texto); width: 100%; }
.gh-bipar input:focus { outline: 3px solid rgba(201,168,76,.35); outline-offset: 2px; }
.gh-bipar .aviso { min-height: 44px; display: flex; align-items: center; gap: 8px; border-radius: 12px; padding: 0 12px; font-size: 14px; }
.gh-bipar .aviso.ok { background: var(--gh-sucesso-fundo); color: var(--gh-sucesso-texto); }
.gh-bipar .aviso.erro { background: var(--gh-perigo-fundo); color: var(--gh-perigo-texto); }
.gh-bipar .aviso.vazio { background: var(--gh-marfim); color: var(--gh-texto-2); }
.gh-progresso { display: flex; flex-direction: column; gap: 6px; }
.gh-progresso .linha { display: flex; justify-content: space-between; font-size: 13px; }
.gh-progresso b { font-variant-numeric: tabular-nums; }

/* Resumo financeiro editável da conferência */
.gh-resumo-conf { display: flex; flex-direction: column; gap: 10px; }
.gh-resumo-conf .gh-linha { font-size: 14px; }
.gh-resumo-conf .total { border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; display: flex; justify-content: space-between; align-items: baseline; }
.gh-resumo-conf .total b { font-size: 24px; color: var(--gh-dourado-claro); }

@media (min-width: 900px) {
  .gh-detalhe-cab { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .gh-detalhe-cab h1 { font-size: 42px; }
  .gh-numeros-detalhe { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .gh-conf-duas { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
  .gh-conf-duas > .lado { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
  /* dense: a situação vem antes da descrição no HTML (é assim que ela fica
     do lado do código no celular); sem isto a descrição caía pra linha de baixo */
  .gh-peca-linha { grid-template-columns: 90px minmax(0, 1fr) 120px 150px; grid-auto-flow: row dense; row-gap: 0; padding: 12px 0; }
  .gh-peca-linha .cod { grid-column: 1; }
  .gh-peca-linha .desc { grid-column: 2; }
  .gh-peca-linha .situ { grid-column: 3; justify-self: start; }
  .gh-peca-linha .acao { grid-column: 4; }
  .gh-peca-linha .acao { justify-self: end; }
  .gh-peca-linha .acao .gh-btn { width: auto; }
}

/* ══ Peças e estoque (sub-fase 4.3) ══════════════════════════════════════ */

/* Tabela de peças — card no celular, grade no computador */
.gh-tabela-pecas .gh-item { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; align-items: start; }
.gh-tabela-pecas .sel { grid-row: span 3; align-self: start; }
.gh-tabela-pecas .cod { font-family: var(--gh-fonte-mono); font-size: 13px; color: var(--gh-texto-2); text-decoration: none; }
.gh-tabela-pecas .desc { color: inherit; text-decoration: none; min-width: 0; }
.gh-tabela-pecas .desc b { font-size: 15px; font-weight: 600; display: block; }
.gh-tabela-pecas .desc span { display: block; font-size: 12px; color: var(--gh-texto-2); }
.gh-tabela-pecas .preco { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gh-tabela-pecas .preco .sugerido { font-weight: 500; color: var(--gh-texto-2); }   /* preço sugerido: só referência */
.gh-tabela-pecas .situ { justify-self: end; }
.gh-tabela-pecas .forn, .gh-tabela-pecas .data, .gh-tabela-pecas .categoria, .gh-tabela-pecas .acoes-peca { display: none; }
.gh-tabela-pecas .flags { display: flex; gap: 4px; flex-wrap: wrap; }
.gh-tabela-pecas .flags .gh-tag { font-size: 11px; padding: 2px 8px; }

/* Barra da seleção em lote — fica acima da barra de baixo no celular */
.gh-lote { position: sticky; bottom: calc(100px + var(--gh-safe-bottom)); z-index: 30;
  background: var(--gh-tinta); color: var(--gh-texto-claro); border-radius: 16px; padding: 12px 16px;
  display: flex; align-items: center; gap: 12px; box-shadow: 0 12px 32px rgba(11,11,12,.28); }
.gh-lote b { font-size: 14px; }
.gh-lote .aviso-pagina { color: rgba(244,241,234,.6); font-size: 13px; display: none; }
.gh-lote .gh-btn { margin-left: auto; }

/* Marcações do formulário da peça — o quadradinho vira chip, como no portal */
.gh-form-peca .gh-chips input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.gh-arquivo-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Foto no formulário da peça */
.gh-foto { display: flex; gap: 14px; align-items: flex-start; }
.gh-foto .quadro { width: 96px; height: 96px; border-radius: 16px; background: var(--gh-marfim);
  border: 1px solid var(--gh-borda); display: flex; align-items: center; justify-content: center;
  color: var(--gh-texto-2); flex-shrink: 0; overflow: hidden; }
.gh-foto .quadro img { width: 100%; height: 100%; object-fit: cover; }
.gh-foto .quadro svg.ic { width: 28px; height: 28px; }
.gh-foto .lado { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

/* Sugestões de preço — botões que preenchem o campo */
.gh-markup { display: flex; flex-direction: column; gap: 8px; }
.gh-markup .linha { display: flex; gap: 8px; flex-wrap: wrap; }
.gh-markup button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gh-borda-forte);
  background: var(--gh-branco); font-size: 13px; color: var(--gh-texto); display: inline-flex; flex-direction: column;
  align-items: flex-start; justify-content: center; line-height: 1.15; cursor: pointer; }
.gh-markup button b { font-size: 13px; font-weight: 600; }
.gh-markup button small { font-size: 10px; color: var(--gh-texto-2); }
.gh-markup button:hover { border-color: var(--gh-dourado); background: var(--gh-dourado-fundo); }

/* Detalhe da peça */
.gh-peca-topo { display: flex; gap: 16px; align-items: flex-start; }
.gh-peca-topo .foto { width: 84px; height: 84px; border-radius: 18px; background: var(--gh-marfim);
  border: 1px solid var(--gh-borda); display: flex; align-items: center; justify-content: center;
  color: var(--gh-texto-2); flex-shrink: 0; overflow: hidden; }
.gh-peca-topo .foto img { width: 100%; height: 100%; object-fit: cover; }
.gh-dados { display: flex; flex-direction: column; gap: 8px; }
.gh-dados .gh-linha { font-size: 14px; }
.gh-historico { display: flex; flex-direction: column; }
.gh-historico .evento { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0;
  border-top: 1px solid #F1EEE7; align-items: center; }
.gh-historico .evento:first-child { border-top: none; }
.gh-historico .bola { width: 22px; height: 22px; border-radius: 50%; background: var(--gh-marfim);
  display: flex; align-items: center; justify-content: center; color: var(--gh-texto-2); flex-shrink: 0; }
.gh-historico .bola svg.ic { width: 12px; height: 12px; }
.gh-historico .meio { display: flex; flex-direction: column; min-width: 0; }
.gh-historico b { font-size: 14px; font-weight: 500; }
.gh-historico span { font-size: 12px; color: var(--gh-texto-2); }

/* Posição do estoque */
.gh-cards-estoque { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
a.gh-card-estoque { display: flex; flex-direction: column; gap: 4px; padding: 16px; color: inherit; }
a.gh-card-estoque:hover { box-shadow: var(--gh-sombra); }
.gh-card-estoque .rot { font-size: 12px; color: var(--gh-texto-2); }
.gh-card-estoque b { font-size: 24px; font-variant-numeric: tabular-nums; }
.gh-card-estoque small { font-size: 12px; color: var(--gh-texto-2); }
/* Dinheiro · fornecedor · tipo: um embaixo do outro no celular, lado a lado no computador */
.gh-estoque-quadros { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.gh-quadro-num { display: grid; grid-template-columns: minmax(0, 1fr) 64px 72px; gap: 12px; align-items: center;
  padding: 10px 0; border-top: 1px solid #F1EEE7; font-size: 13px; }
.gh-quadro-num > span:not(.nome) { text-align: right; font-variant-numeric: tabular-nums; }
.gh-quadro-num > span:last-child { color: var(--gh-texto-2); }
.gh-quadro-num.cab { border-top: none; padding: 0 0 2px; font-size: 11.5px; }
.gh-quadro-num.cab > span { color: var(--gh-texto-2); }
.gh-quadro-num .nome.link { color: var(--gh-dourado-texto); font-weight: 500; }
.gh-lista-duas .gh-linha { padding: 10px 0; border-top: 1px solid #F1EEE7; }
@media (min-width: 900px) {
  .gh-estoque-quadros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gh-estoque-quadros > .gh-dados { grid-column: 1 / -1; }
}
.gh-dados .gh-linha small { display: block; font-size: 11.5px; }
@media (min-width: 1280px) {
  .gh-estoque-quadros { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
  .gh-estoque-quadros > .gh-dados { grid-column: auto; }
  .gh-lista-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}

/* Lista comprida dentro de uma folha (detalhe por embaixadora) */
.gh-folha .gh-rolagem { max-height: 46dvh; overflow-y: auto; padding-right: 8px; }

/* Planejamento */
.gh-planejamento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.gh-tipo-card { display: flex; flex-direction: column; gap: 10px; text-align: left; width: 100%;
  background: var(--gh-branco); border: 1px solid var(--gh-borda); border-radius: var(--gh-raio-lg); padding: 16px; }
.gh-tipo-card .topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.gh-tipo-card .topo b { font-size: 16px; }
.gh-barra-meta { position: relative; height: 10px; border-radius: 6px; background: var(--gh-neutro-fundo); }
.gh-barra-meta i { display: block; height: 100%; border-radius: 6px; background: var(--gh-dourado); }
.gh-barra-meta .meta { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--gh-texto); }
.gh-tipo-card .numeros { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--gh-texto-2); }
/* mini-gráfico: as alturas vêm em px do servidor — porcentagem não resolve
   dentro de um <button>, que não repassa a altura pro filho */
.gh-graf-mini { display: flex; flex-direction: row; align-items: flex-end; gap: 4px; height: 44px; }
.gh-graf-mini .barra { flex: 1; border-radius: 3px 3px 1px 1px; background: #E9DFC2; min-height: 3px; }
.gh-graf-mini .barra.previsao { background: none; border: 1px dashed var(--gh-dourado); }

@media (min-width: 900px) {
  .gh-tabela-pecas .gh-tabela-cab, .gh-tabela-pecas .gh-item {
    grid-template-columns: 34px 88px minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, .8fr) 92px 104px 118px 148px; row-gap: 0; align-items: center; }
  .gh-tabela-pecas .sel { grid-row: auto; }
  .gh-tabela-pecas .forn, .gh-tabela-pecas .categoria { display: block; font-size: 13px; color: var(--gh-texto-2); }
  .gh-tabela-pecas .data { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
  .gh-tabela-pecas .data.cadastro { color: var(--gh-texto-2); }
  .gh-tabela-pecas .acoes-peca { display: flex; gap: 6px; justify-content: flex-end; }
  .gh-tabela-pecas .acoes-peca .gh-btn { min-height: 36px; padding: 0 12px; font-size: 13px; }
  .gh-tabela-pecas .desc span { display: none; }
  .gh-tabela-pecas .situ { justify-self: start; }
  .gh-tabela-pecas .flags { display: none; }
  .gh-lote { position: sticky; bottom: 16px; }
  .gh-lote .aviso-pagina { display: inline; }
  .gh-cards-estoque { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .gh-planejamento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .gh-form-peca { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: start; }
  .gh-form-peca > .lado { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
}

/* ══ Inventário e etiquetas (sub-fase 4.4) ═══════════════════════════════ */

/* Campo de bipar grande, colado no topo do conteúdo */
/* No celular fica grudado logo abaixo do topo preto (66px), pra dar pra
   bipar a peça seguinte sem rolar de volta. */
.gh-bipar-topo { position: sticky; top: 66px; z-index: 35; background: var(--gh-marfim);
  padding: 10px 0; margin: -4px 0 0; display: flex; flex-direction: column; gap: 10px; }
.gh-bipar-campo { display: flex; gap: 8px; }
.gh-bipar-campo input { flex: 1; min-width: 0; height: 60px; border-radius: 16px;
  border: 2px solid var(--gh-borda-forte); background: var(--gh-branco); text-align: center;
  font-family: var(--gh-fonte-mono); font-size: 26px; letter-spacing: .14em; color: var(--gh-texto); }
.gh-bipar-campo input::placeholder { letter-spacing: .14em; color: #C9C2B3; }
.gh-bipar-campo input:focus { outline: none; border-color: var(--gh-dourado); box-shadow: 0 0 0 4px rgba(201,168,76,.18); }
.gh-bipar-campo .gh-btn { height: 60px; min-height: 60px; padding: 0 20px; }

/* A última peça bipada, em destaque */
.gh-ultima { display: flex; align-items: center; gap: 12px; border-radius: 16px; padding: 12px 14px;
  border: 1px solid var(--gh-borda); background: var(--gh-branco); }
.gh-ultima.sucesso { background: var(--gh-sucesso-fundo); border-color: transparent; }
.gh-ultima.atencao { background: var(--gh-atencao-fundo); border-color: #EADFC4; }
.gh-ultima.perigo { background: var(--gh-perigo-fundo); border-color: transparent; }
.gh-ultima.info { background: var(--gh-info-fundo); border-color: transparent; }
.gh-ultima.erro { background: var(--gh-branco); border-color: var(--gh-perigo-texto); }
.gh-ultima .gh-icone-bloco { flex-shrink: 0; background: rgba(255,255,255,.7); }
.gh-icone-bloco.sucesso { background: var(--gh-sucesso-fundo); color: var(--gh-sucesso-texto); }
.gh-icone-bloco.info { background: var(--gh-info-fundo); color: var(--gh-info-texto); }
.gh-ultima .gh-icone-bloco.sucesso, .gh-ultima .gh-icone-bloco.info,
.gh-ultima .gh-icone-bloco.perigo { background: rgba(255,255,255,.7); }
.gh-ultima .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gh-ultima .cod { font-family: var(--gh-fonte-mono); font-size: 13px; color: var(--gh-texto-2); }
.gh-ultima b { font-size: 15px; font-weight: 600; }
.gh-ultima .aviso { font-size: 13px; line-height: 1.35; }
.gh-ultima .gh-btn { flex-shrink: 0; }

/* Progresso do inventário */
.gh-contagem { display: flex; flex-direction: column; gap: 12px; }
.gh-contagem .topo { display: flex; justify-content: space-between; align-items: baseline; }
.gh-contagem .topo b { font-size: 28px; font-variant-numeric: tabular-nums; }
.gh-contagem .topo > span { font-size: 13px; color: var(--gh-texto-2); }
.gh-trilho { height: 10px; border-radius: 6px; background: var(--gh-neutro-fundo); overflow: hidden; display: flex; }
.gh-trilho i { display: block; height: 100%; }
.gh-trilho i.ok { background: var(--gh-sucesso-texto); }
.gh-trilho i.fora { background: var(--gh-dourado); }
.gh-contagem-leg { display: flex; flex-direction: column; gap: 0; }
.gh-contagem-leg .linha { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #F1EEE7; font-size: 14px; }
.gh-contagem-leg .linha:first-child { border-top: none; }
.gh-contagem-leg .bolinha { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.gh-contagem-leg .rot { flex: 1; min-width: 0; }
.gh-contagem-leg .rot small { display: block; font-size: 12px; color: var(--gh-texto-2); }
.gh-contagem-leg b { font-variant-numeric: tabular-nums; }

/* Lista do que foi bipado / da fila de etiquetas */
.gh-bipadas .gh-item { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 6px; padding: 12px 14px; }
/* No celular: código e situação em cima, descrição no meio, hora e desfazer embaixo */
.gh-bipadas .cod   { grid-column: 1; grid-row: 1; }
.gh-bipadas .situ  { grid-column: 3; grid-row: 1; justify-self: end; }
.gh-bipadas .desc  { grid-column: 1 / -1; grid-row: 2; }
.gh-bipadas .hora  { grid-column: 1 / 3; grid-row: 3; align-self: center; }
.gh-bipadas .tirar { grid-column: 3; grid-row: 3; justify-self: end; }
.gh-bipadas .cod { font-family: var(--gh-fonte-mono); font-size: 13px; color: var(--gh-texto-2); }
.gh-bipadas .desc { min-width: 0; }
.gh-bipadas .desc b { display: block; font-size: 14px; font-weight: 500; }
.gh-bipadas .desc span { font-size: 12px; color: var(--gh-texto-2); }
.gh-bipadas .hora { font-size: 12px; color: var(--gh-texto-2); font-variant-numeric: tabular-nums; }
.gh-bipadas .tirar { width: 34px; height: 34px; min-height: 34px; padding: 0; }

/* Faltantes */
.gh-faltantes .gh-item { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; }
.gh-faltantes .sel   { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
.gh-faltantes .cod   { grid-column: 2; grid-row: 1; }
.gh-faltantes .situ  { grid-column: 3; grid-row: 1; justify-self: end; }
.gh-faltantes .desc  { grid-column: 2 / -1; grid-row: 2; }
.gh-faltantes .visto { grid-column: 2 / -1; grid-row: 3; }
.gh-faltantes .desc b { display: block; font-size: 14px; font-weight: 500; }
.gh-faltantes .desc span { font-size: 12px; color: var(--gh-texto-2); }
.gh-faltantes .cod { font-family: var(--gh-fonte-mono); font-size: 13px; color: var(--gh-texto-2); }

/* Botões dentro da barra escura de seleção */
.gh-lote .acoes { margin-left: auto; display: flex; gap: 8px; }
.gh-lote .acoes .gh-btn { margin-left: 0; }
.gh-lote .gh-btn.contorno { background: transparent; color: var(--gh-texto-claro); border-color: rgba(255,255,255,.28); }
.gh-lote .gh-btn.contorno:hover { background: rgba(255,255,255,.08); }
.gh-faltantes .visto { font-size: 12px; color: var(--gh-texto-2); }
.gh-faltantes .visto b { display: block; font-weight: 500; color: var(--gh-texto); }

/* Duas colunas no computador; no celular, uma pilha com respiro entre os blocos */
.gh-inv-duas { display: flex; flex-direction: column; gap: 16px; }
.gh-inv-duas > .lado { display: flex; flex-direction: column; gap: 12px; }

/* Cartões de inventário no histórico */
.gh-inv-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px;
  background: var(--gh-branco); border: 1px solid var(--gh-borda); border-radius: var(--gh-raio-lg); padding: 16px; }
.gh-inv-card .quando b { font-size: 16px; }
.gh-inv-card .quando span { display: block; font-size: 12px; color: var(--gh-texto-2); }
.gh-inv-card .nums { grid-column: 1 / -1; display: flex; gap: 18px; }
.gh-inv-card .nums div { display: flex; flex-direction: column; }
.gh-inv-card .nums b { font-size: 18px; font-variant-numeric: tabular-nums; }
.gh-inv-card .nums small { font-size: 11px; color: var(--gh-texto-2); text-transform: uppercase; letter-spacing: .06em; }

@media (min-width: 900px) {
  .gh-inv-duas { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 20px; align-items: start; }
  .gh-inv-duas > .lado { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
  .gh-inv-duas .gh-bipar-topo { position: static; padding: 0; margin: 0; }
  .gh-bipadas .gh-tabela-cab, .gh-bipadas .gh-item {
    grid-template-columns: 82px minmax(0, 1fr) 128px 52px 42px; column-gap: 10px; row-gap: 0; align-items: center; }
  .gh-bipadas .desc span { display: none; }
  .gh-bipadas .cod, .gh-bipadas .situ, .gh-bipadas .desc,
  .gh-bipadas .hora, .gh-bipadas .tirar { grid-column: auto; grid-row: auto; justify-self: auto; }
  /* estas tabelas não têm coluna de seleção: o cabeçalho não pode gastar duas */
  .gh-bipadas .gh-tabela-cab > :first-child { grid-column: auto; }
  .gh-etiq-fila .gh-tabela-cab, .gh-etiq-fila .gh-item {
    grid-template-columns: 82px minmax(0, 1fr) 96px 120px 42px; column-gap: 10px; row-gap: 0; align-items: center; }
  .gh-etiq-fila .desc span { display: none; }
  .gh-etiq-fila .gh-tabela-cab > :first-child { grid-column: auto; }
  .gh-faltantes .gh-tabela-cab, .gh-faltantes .gh-item { grid-template-columns: 34px 92px minmax(0, 1fr) 200px 150px; row-gap: 0; }
  .gh-faltantes .sel, .gh-faltantes .cod, .gh-faltantes .situ,
  .gh-faltantes .desc, .gh-faltantes .visto { grid-column: auto; grid-row: auto; justify-self: auto; }
  .gh-inv-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

/* ══ Vendas diretas (sub-fase 4.5) ══════════════════════════════════════ */

/* Lista de pedidos */
.gh-tabela-pedidos .gh-item { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
.gh-tabela-pedidos .num { font-family: var(--gh-fonte-mono); font-size: 13px; color: var(--gh-texto-2); }
.gh-tabela-pedidos .quem { grid-column: 1 / -1; }
.gh-tabela-pedidos .data, .gh-tabela-pedidos .forma, .gh-tabela-pedidos .qtd { font-size: 13px; color: var(--gh-texto-2); }
.gh-tabela-pedidos .total { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gh-tabela-pedidos .situ { justify-self: end; }

/* Itens da venda, com o preço editável */
.gh-itens-venda { display: flex; flex-direction: column; }
.gh-itens-venda .item { display: grid; grid-template-columns: minmax(0, 1fr) 118px 40px; gap: 10px; align-items: center;
  padding: 10px 0; border-top: 1px solid #F1EEE7; }
.gh-itens-venda .item:first-child { border-top: none; }
.gh-itens-venda .cod { font-family: var(--gh-fonte-mono); font-size: 12px; color: var(--gh-texto-2); }
.gh-itens-venda b { display: block; font-size: 14px; font-weight: 500; }
.gh-itens-venda .gh-moeda input { height: 42px; text-align: right; }
.gh-itens-venda .tirar { width: 40px; height: 40px; min-height: 40px; padding: 0; }

/* Parcelas no formulário */
.gh-parcelas-form { display: flex; flex-direction: column; gap: 8px; }
.gh-parcelas-form .linha { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.gh-parcelas-form .n { font-size: 13px; font-weight: 600; color: var(--gh-texto-2); }
.gh-parcelas-form .soma { display: flex; justify-content: space-between; font-size: 13px; padding-top: 4px; }
.gh-parcelas-form .soma.ok { color: var(--gh-sucesso-texto); }
.gh-parcelas-form .soma.falta { color: var(--gh-perigo-texto); }

/* Chip de marcar (checkbox) em qualquer formulário, como o de rádio já era */
.gh-chips input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }

/* Campos soltos (fora de .gh-campo): itens, parcelas e crédito */
.gh-itens-venda input, .gh-parcelas-form input, .gh-credito input {
  height: 44px; width: 100%; min-width: 0; border-radius: 12px; border: 1px solid var(--gh-borda-forte);
  padding: 0 12px; font-size: 15px; color: var(--gh-texto); background: var(--gh-branco); }
.gh-itens-venda .gh-moeda input, .gh-parcelas-form .gh-moeda input, .gh-credito .gh-moeda input {
  padding-left: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.gh-itens-venda .gh-moeda > span, .gh-parcelas-form .gh-moeda > span, .gh-credito .gh-moeda > span { font-size: 14px; left: 12px; }
.gh-itens-venda input:focus, .gh-parcelas-form input:focus, .gh-credito input:focus {
  outline: 2px solid var(--gh-dourado); outline-offset: 1px; border-color: var(--gh-dourado); }
.gh-itens-venda .gh-moeda, .gh-parcelas-form .gh-moeda { min-width: 0; }
.gh-credito { display: grid; grid-template-columns: auto minmax(0, 1fr) 130px; gap: 10px; align-items: center;
  padding: 12px; border-radius: 14px; background: var(--gh-dourado-fundo); }
.gh-credito b { font-size: 14px; display: block; }
.gh-credito small { font-size: 12px; color: var(--gh-texto-2); }

@media (min-width: 900px) {
  .gh-tabela-pedidos .gh-tabela-cab, .gh-tabela-pedidos .gh-item {
    grid-template-columns: 70px 92px minmax(0, 1.6fr) minmax(0, 1fr) 60px 120px 150px; row-gap: 0; }
  .gh-tabela-pedidos .gh-tabela-cab > :first-child { grid-column: auto; }
  .gh-tabela-pedidos .quem { grid-column: auto; }
  .gh-tabela-pedidos .situ { justify-self: start; }
  .gh-tabela-pedidos .qtd { text-align: center; }
}

/* ══ Financeiro (sub-fase 4.6) ══════════════════════════════════════════ */

/* Parcelas a receber (painel) e contas a pagar (despesas) */
.gh-fin-parcelas .gh-item { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
.gh-fin-parcelas .quem { grid-column: 1; }
.gh-fin-parcelas .quem small { display: block; font-size: 12px; color: var(--gh-texto-2); }
.gh-fin-parcelas .valor { grid-column: 2; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gh-fin-parcelas .valor small { display: block; font-size: 11px; font-weight: 400; color: var(--gh-texto-2); }
.gh-fin-parcelas .situ { grid-column: 1; }
.gh-fin-parcelas .acao { grid-column: 2; justify-self: end; display: flex; gap: 6px; }
.gh-fin-parcelas .acao .gh-btn { min-height: 38px; padding: 0 14px; font-size: 13px; }
.gh-grupo-data { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 2px 6px; }
.gh-grupo-data b { font-size: 14px; }
.gh-grupo-data span { font-size: 12px; color: var(--gh-texto-2); }
.gh-grupo-data.atrasado b { color: var(--gh-perigo-texto); }

/* Próximos acertos */
.gh-prox-acertos { display: flex; flex-direction: column; }
.gh-prox-acertos .linha { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 0; border-top: 1px solid #F1EEE7; }
.gh-prox-acertos .linha:first-child { border-top: none; }
.gh-prox-acertos .dia { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 48px;
  border-radius: 12px; background: var(--gh-marfim); line-height: 1; }
.gh-prox-acertos .dia b { font-size: 18px; }
.gh-prox-acertos .dia small { font-size: 10px; text-transform: uppercase; color: var(--gh-texto-2); margin-top: 3px; }
.gh-prox-acertos .dia.logo { background: var(--gh-dourado-fundo); }
.gh-prox-acertos .quem { font-size: 13px; color: var(--gh-texto-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-prox-acertos .quem b { display: block; font-size: 14px; color: var(--gh-texto); }

/* Fluxo de caixa — duas barras por mês (entrou / saiu), previsto tracejado */
.gh-grafico-fluxo { display: flex; align-items: flex-end; gap: 14px; height: 200px; padding-top: 24px; }
.gh-grafico-fluxo .col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.gh-grafico-fluxo .par { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.gh-grafico-fluxo .b { width: 42%; max-width: 30px; border-radius: 6px 6px 2px 2px; min-height: 3px; position: relative; }
.gh-grafico-fluxo .b.ent { background: var(--gh-dourado); }
.gh-grafico-fluxo .b.sai { background: var(--gh-tinta); }
.gh-grafico-fluxo .col.futuro .b.ent { background: none; border: 1.5px dashed var(--gh-dourado); }
.gh-grafico-fluxo .col.futuro .b.sai { background: none; border: 1.5px dashed var(--gh-tinta); }
.gh-grafico-fluxo .mes { font-size: 11px; color: var(--gh-texto-2); white-space: nowrap; }
.gh-grafico-fluxo .col.atual .mes { color: var(--gh-texto); font-weight: 600; }
.gh-legenda-fluxo { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--gh-texto-2); }
.gh-legenda-fluxo i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.gh-fluxo-mes { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto); gap: 4px 16px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid #F1EEE7; font-size: 14px; font-variant-numeric: tabular-nums; }
.gh-fluxo-mes:first-child { border-top: none; }
.gh-fluxo-mes .n { font-weight: 600; }
.gh-fluxo-mes .n small { display: block; font-size: 11px; font-weight: 400; color: var(--gh-texto-2); }
.gh-fluxo-mes .v { text-align: right; }
.gh-fluxo-mes .v small { display: block; font-size: 11px; color: var(--gh-texto-2); }

.gh-credito.sem-campo { grid-template-columns: auto minmax(0, 1fr); }

/* "Escolher período": as duas datas aparecem ao lado dos filtros */
.gh-periodo-livre:not([hidden]) { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gh-periodo-livre input { height: 40px; border-radius: 999px; border: 1px solid var(--gh-borda-forte); padding: 0 12px; background: var(--gh-branco); font-size: 14px; color: var(--gh-texto); }
.gh-periodo-livre .gh-btn { min-height: 40px; }

/* Extrato para conciliar */
.gh-extrato .gh-item { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 4px; }
/* No celular: quem e valor em cima; data e conta embaixo; conciliado por último */
.gh-extrato .sel    { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.gh-extrato .desc   { grid-column: 2; grid-row: 1; min-width: 0; }
.gh-extrato .valor  { grid-column: 3; grid-row: 1; }
.gh-extrato .data   { grid-column: 2; grid-row: 2; }
.gh-extrato .conta  { grid-column: 3; grid-row: 2; text-align: right; }
.gh-extrato .estado { grid-column: 2 / -1; grid-row: 3; }
.gh-extrato .estado:empty { display: none; }
.gh-extrato .desc b { display: block; font-size: 14px; font-weight: 500; }
.gh-extrato .desc span { font-size: 12px; color: var(--gh-texto-2); }
.gh-extrato .valor { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.gh-extrato .valor.ent { color: var(--gh-sucesso-texto); }
.gh-extrato .valor.sai { color: var(--gh-texto); }
.gh-extrato .conta, .gh-extrato .data { font-size: 12px; color: var(--gh-texto-2); }
.gh-extrato .ok { color: var(--gh-sucesso-texto); display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.gh-extrato .estado { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.gh-extrato .estado .gh-link-acao { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.gh-extrato .estado .gh-link-acao .ic { width: 14px; height: 14px; }

@media (min-width: 900px) {
  .gh-fin-parcelas .gh-tabela-cab, .gh-fin-parcelas .gh-item {
    grid-template-columns: minmax(0, 1fr) 118px 128px 92px; row-gap: 0; }
  .gh-fin-parcelas .gh-tabela-cab > :first-child { grid-column: auto; }
  .gh-fin-parcelas .quem, .gh-fin-parcelas .valor, .gh-fin-parcelas .situ, .gh-fin-parcelas .acao { grid-column: auto; }
  .gh-fin-parcelas .situ { justify-self: start; }
  .gh-extrato .gh-tabela-cab, .gh-extrato .gh-item {
    grid-template-columns: 34px 80px minmax(0, 1fr) 140px 130px 110px; row-gap: 0; }
  .gh-extrato .sel, .gh-extrato .desc, .gh-extrato .valor, .gh-extrato .data,
  .gh-extrato .conta, .gh-extrato .estado { grid-column: auto; grid-row: auto; text-align: left; }
  .gh-extrato .valor { text-align: right; }
  .gh-extrato .estado:empty { display: block; }
  .gh-fin-duas { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
  .gh-fin-parcelas .valor small { white-space: normal; }
}

/* ══ Notas fiscais e envios (sub-fase 4.7) ══════════════════════════════ */

/* Listas de notas, envios e rastreio: card no celular, grade no computador */
.gh-tabela-notas .gh-item, .gh-tabela-envios .gh-item, .gh-tabela-rastreio .gh-item {
  grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
.gh-tabela-notas .quem, .gh-tabela-envios .quem, .gh-tabela-rastreio .quem { grid-column: 1; }
.gh-tabela-notas .quem small, .gh-tabela-envios .quem small, .gh-tabela-rastreio .quem small {
  display: block; font-size: 12px; color: var(--gh-texto-2); }
.gh-tabela-notas .valor { grid-column: 2; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.gh-tabela-notas .num, .gh-tabela-envios .cod, .gh-tabela-rastreio .cod {
  font-family: var(--gh-fonte-mono); font-size: 12px; color: var(--gh-texto-2); }
.gh-tabela-notas .situ, .gh-tabela-envios .situ, .gh-tabela-rastreio .situ { justify-self: start; }
.gh-tabela-notas .acao, .gh-tabela-envios .acao, .gh-tabela-rastreio .acao { justify-self: end; display: flex; gap: 6px; }
.gh-tabela-notas .acao .gh-btn, .gh-tabela-envios .acao .gh-btn, .gh-tabela-rastreio .acao .gh-btn {
  min-height: 38px; padding: 0 14px; font-size: 13px; }
.gh-tabela-envios .sel { grid-row: span 2; align-self: center; }
.gh-tabela-envios .gh-item { grid-template-columns: auto minmax(0, 1fr) auto; }
.gh-tabela-rastreio .aviso { grid-column: 1 / -1; font-size: 12px; color: var(--gh-atencao-texto); display: flex; gap: 6px; align-items: center; }
.gh-tabela-rastreio .aviso svg.ic { width: 14px; height: 14px; }
.gh-tabela-rastreio .quando { font-size: 12px; color: var(--gh-texto-2); }

/* Chave de acesso da nota: 44 dígitos em blocos de 4, pra ler e copiar */
.gh-chave { display: flex; align-items: flex-start; gap: 10px; }
.gh-chave code { flex: 1; min-width: 0; font-family: var(--gh-fonte-mono); font-size: 13px; line-height: 1.6;
  word-spacing: 4px; color: var(--gh-texto); background: var(--gh-marfim); border-radius: 10px; padding: 8px 10px; }

/* Contador de caracteres (justificativa de cancelamento) */
.gh-caracteres { font-size: 12px; color: var(--gh-texto-2); text-align: right; }
.gh-caracteres.falta { color: var(--gh-atencao-texto); }
.gh-caracteres.ok { color: var(--gh-sucesso-texto); }

@media (min-width: 900px) {
  .gh-tabela-notas .gh-tabela-cab, .gh-tabela-notas .gh-item {
    grid-template-columns: minmax(0, 1.4fr) 90px 120px 130px 120px 110px; row-gap: 0; }
  .gh-tabela-envios .gh-tabela-cab, .gh-tabela-envios .gh-item {
    grid-template-columns: 34px minmax(0, 1.3fr) 90px 150px 150px 130px; row-gap: 0; }
  .gh-tabela-rastreio .gh-tabela-cab, .gh-tabela-rastreio .gh-item {
    grid-template-columns: minmax(0, 1.2fr) 150px minmax(0, 1fr) 150px; row-gap: 4px; }
  .gh-tabela-notas .gh-tabela-cab > :first-child, .gh-tabela-rastreio .gh-tabela-cab > :first-child { grid-column: auto; }
  .gh-tabela-notas .quem, .gh-tabela-notas .valor, .gh-tabela-envios .quem, .gh-tabela-rastreio .quem { grid-column: auto; }
  .gh-tabela-envios .sel { grid-row: auto; }
  .gh-tabela-rastreio .aviso { grid-column: 1 / -1; }
}

/* 4.7 — ajustes das telas reais (além do protótipo) */
/* Notas no celular: nome + valor, situação + data; tipo e número ficam no computador */
.gh-tabela-notas .tipo, .gh-tabela-notas .num { display: none; }
.gh-tabela-notas .data { grid-column: 2; justify-self: end; }
/* Envios no celular: seleção à esquerda, nome + situação, códigos embaixo */
.gh-tabela-envios .gh-item { grid-template-columns: 22px minmax(0, 1fr) auto; }
.gh-tabela-envios .sel { grid-column: 1; grid-row: 1 / span 3; }
.gh-tabela-envios .quem { grid-column: 2; }
.gh-tabela-envios .situ { grid-column: 3; justify-self: end; }
.gh-tabela-envios .cod { grid-column: 2; }
.gh-tabela-envios .data { grid-column: 3; justify-self: end; }
.gh-tabela-envios .aviso { grid-column: 2 / -1; font-size: 12px; color: var(--gh-perigo-texto); display: flex; gap: 6px; align-items: flex-start; }
.gh-tabela-envios .aviso svg.ic { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.gh-tabela-envios .cod .validade { display: block; font-family: var(--gh-fonte); font-size: 11px; }
.gh-tabela-envios .cod:empty { display: none; }
.gh-tabela-rastreio .quem small .cod { font-size: 11px; }
.gh-tabela-rastreio .quem b, .gh-tabela-envios .quem b, .gh-a-emitir .quem b { color: var(--gh-texto); }
.gh-tabela-rastreio .quem small { white-space: normal; overflow-wrap: anywhere; }
.gh-grupo-data:has(form) { align-items: center; }
/* .gh-tabela-adm .gh-item .quem ocupa a linha toda no celular; aqui o valor/situação ficam ao lado */
.gh-tabela-notas .gh-item .quem, .gh-tabela-rastreio .gh-item .quem, .gh-a-emitir .gh-item .quem { grid-column: 1; }
.gh-tabela-envios .gh-item .quem { grid-column: 2; }
/* Abas de envios: quatro abas não cabem em partes iguais no celular */
.gh-segmento-envios { grid-auto-columns: auto; overflow-x: auto; scrollbar-width: none; }
.gh-segmento-envios::-webkit-scrollbar { display: none; }
.gh-segmento.gh-segmento-envios a { padding: 0 10px; white-space: nowrap; }
/* A emitir: motivo do bloqueio escrito na linha */
.gh-a-emitir .quem small { white-space: normal; }
.gh-sem-conta a { color: var(--gh-dourado-texto); }
.gh-a-emitir .acao { grid-column: 1 / -1; justify-self: stretch; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.gh-a-emitir .bloqueio { flex: 1 1 200px; display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--gh-atencao-texto); }
.gh-a-emitir .bloqueio svg.ic { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
/* Itens da nota: código e valor na mesma linha, descrição embaixo (no computador, 3 colunas) */
.gh-itens-nota .gh-peca-linha .situ, .gh-peca-garantia .gh-peca-linha .situ { display: none; }
.gh-itens-nota .gh-peca-linha .acao, .gh-peca-garantia .gh-peca-linha .acao { grid-column: 2; grid-row: 1; justify-self: end; }
.gh-sem-conta { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.gh-btn-consulta { min-height: 34px; font-size: 12px; padding: 0 12px; }
.gh-grupo-data form { margin: 0; }
.gh-recolhe > summary { list-style: none; cursor: pointer; }
.gh-recolhe > summary::-webkit-details-marker { display: none; }
.gh-erro-texto { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--gh-marfim); font-family: var(--gh-fonte-mono);
  font-size: 12px; color: var(--gh-texto-2); white-space: pre-wrap; overflow-wrap: anywhere; }

@media (min-width: 900px) {
  .gh-tabela-notas .tipo, .gh-tabela-notas .num { display: block; }
  .gh-tabela-notas .data { grid-column: auto; justify-self: start; }
  .gh-tabela-notas .gh-tabela-cab > :nth-child(4) { text-align: right; }
  .gh-tabela-envios .sel, .gh-tabela-envios .quem, .gh-tabela-envios .situ, .gh-tabela-envios .cod,
  .gh-tabela-envios .data { grid-column: auto; grid-row: auto; justify-self: start; }
  .gh-tabela-envios .gh-item { grid-template-columns: 34px minmax(0, 1.3fr) 90px 150px 150px 130px; }
  .gh-tabela-envios .cod:empty { display: block; }
  .gh-tabela-envios .aviso { grid-column: 2 / -1; padding-top: 4px; }
  .gh-segmento-envios { display: inline-grid; justify-self: start; align-self: flex-start; }
  .gh-a-emitir .gh-item { grid-template-columns: minmax(0, 1fr) 130px minmax(0, 300px); }
  .gh-a-emitir .acao { grid-column: auto; }
  .gh-itens-nota .gh-peca-linha, .gh-peca-garantia .gh-peca-linha { grid-template-columns: 70px minmax(0, 1fr) 110px; }
  .gh-itens-nota .gh-peca-linha .acao, .gh-peca-garantia .gh-peca-linha .acao { grid-column: 3; grid-row: auto; }
  .gh-tabela-notas .gh-item .quem, .gh-tabela-rastreio .gh-item .quem, .gh-a-emitir .gh-item .quem,
  .gh-tabela-envios .gh-item .quem { grid-column: auto; }
}

/* ══ Garantias (sub-fase 4.8) ═══════════════════════════════════════════ */

/* Situações da lista em chips que são links, com a contagem */
.gh-filtro-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -4px -16px 0; padding: 0 16px; }
.gh-filtro-chips::-webkit-scrollbar { display: none; }
.gh-filtro-chips a { flex-shrink: 0; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gh-borda-forte);
  background: var(--gh-branco); font-size: 13px; color: var(--gh-texto); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gh-filtro-chips a span { font-size: 12px; color: var(--gh-texto-2); }
.gh-filtro-chips a.ativo { background: var(--gh-texto); color: var(--gh-texto-claro); border-color: var(--gh-texto); }
.gh-filtro-chips a.ativo span { color: rgba(244,241,234,.65); }

/* Lista de garantias: card no celular, grade no computador */
.gh-tabela-garantias .gh-item { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
.gh-tabela-garantias .peca { grid-column: 1; display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.gh-tabela-garantias .peca .cod { font-family: var(--gh-fonte-mono); font-size: 12px; color: var(--gh-texto-2); padding-top: 2px; }
.gh-tabela-garantias .peca b { display: block; font-size: 15px; font-weight: 600; color: var(--gh-texto); }
.gh-tabela-garantias .peca small { display: block; font-size: 12px; color: var(--gh-texto-2); }
.gh-tabela-garantias .situ { grid-column: 2; grid-row: 1; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.gh-tabela-garantias .prob, .gh-tabela-garantias .dias, .gh-tabela-garantias .prazo { font-size: 12px; color: var(--gh-texto-2); }
.gh-tabela-garantias .prob { grid-column: 1; }
.gh-tabela-garantias .dias { grid-column: 2; justify-self: end; }
.gh-tabela-garantias .prazo { grid-column: 1 / -1; }
.gh-tabela-garantias .prazo:empty { display: none; }

/* Fotos da garantia (miniaturas que abrem a imagem) */
.gh-fotos-garantia { display: flex; gap: 12px; flex-wrap: wrap; }
.gh-fotos-garantia .foto { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--gh-texto-2); }
.gh-fotos-garantia .img { width: 120px; height: 120px; border-radius: 14px; border: 1px solid var(--gh-borda); display: block;
  background-size: cover; background-position: center; object-fit: cover; }

/* Peça encontrada ao digitar o código */
.gh-peca-achada { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px;
  background: var(--gh-sucesso-fundo); color: var(--gh-sucesso-texto); font-size: 14px; }
.gh-peca-achada svg.ic { width: 18px; height: 18px; flex-shrink: 0; }
.gh-peca-achada small { display: block; font-size: 12px; opacity: .85; }
.gh-peca-achada.nao { background: var(--gh-perigo-fundo); color: var(--gh-perigo-texto); }

/* Lista de opções numa folha (uma escolha, com explicação curta) */
.gh-opcoes { display: flex; flex-direction: column; gap: 6px; max-height: 42dvh; overflow-y: auto; scrollbar-width: none; }
.gh-opcoes::-webkit-scrollbar { display: none; }
.gh-opcao { display: flex; gap: 12px; align-items: center; min-height: 50px; padding: 8px 12px; border-radius: 12px;
  border: 1px solid var(--gh-borda); cursor: pointer; }
.gh-opcao input { width: 20px; height: 20px; accent-color: var(--gh-dourado); flex-shrink: 0; }
.gh-opcao b { display: block; font-size: 15px; font-weight: 500; }
.gh-opcao small { display: block; font-size: 12px; color: var(--gh-texto-2); }
.gh-opcao:has(input:checked) { border-color: var(--gh-dourado); background: var(--gh-dourado-fundo); }

@media (min-width: 900px) {
  .gh-filtro-chips { margin: 0; padding: 0; flex-wrap: wrap; }
  .gh-tabela-garantias .gh-tabela-cab, .gh-tabela-garantias .gh-item {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 150px 100px 130px; row-gap: 0; }
  .gh-tabela-garantias .gh-tabela-cab > :first-child { grid-column: auto; }
  .gh-tabela-garantias .peca, .gh-tabela-garantias .prob, .gh-tabela-garantias .situ,
  .gh-tabela-garantias .dias, .gh-tabela-garantias .prazo { grid-column: auto; grid-row: auto; justify-self: start; }
  .gh-tabela-garantias .situ { align-items: flex-start; }
  .gh-tabela-garantias .prazo:empty { display: block; }
  .gh-tabela-garantias .prob, .gh-tabela-garantias .dias, .gh-tabela-garantias .prazo { font-size: 13px; }
}

/* 4.8 — ajustes das telas reais (além do protótipo) */
.gh-peca-achada.atencao { background: var(--gh-atencao-fundo); color: var(--gh-atencao-texto); }
/* Segmento feito de rádios (tipo de atendimento, origem) */
.gh-segmento-radio input { position: absolute; opacity: 0; pointer-events: none; }
.gh-segmento-radio label { min-height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #4A4843; cursor: pointer; padding: 0 12px; }
.gh-segmento-radio input:checked + label { background: var(--gh-branco); color: var(--gh-texto); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.gh-segmento-radio input:focus-visible + label { outline: 2px solid var(--gh-dourado); outline-offset: 2px; }
/* Peça de estoque: some quem trouxe, certificado e os problemas de cliente */
.gh-form-garantia[data-natureza="estoque"] .so-cliente,
.gh-form-garantia[data-natureza="estoque"] [data-so-cliente],
.gh-form-garantia[data-natureza="cliente"] .so-estoque { display: none !important; }
.gh-outra-garantia { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0;
  border-top: 1px solid var(--gh-borda); color: var(--gh-texto); }
.gh-outra-garantia:first-of-type { border-top: none; }
.gh-outra-garantia b { display: block; font-size: 14px; font-weight: 500; }
.gh-outra-garantia small { display: block; font-size: 12px; color: var(--gh-texto-2); }
.gh-historico .quando { white-space: nowrap; }
/* Embaixadora e maleta: nomes longos, uma embaixo da outra no celular */
.gh-form-garantia #campo-embaixadora { grid-template-columns: minmax(0, 1fr); }
/* No celular a peça e o histórico vêm antes do crédito */
.gh-garantia-duas { display: flex; flex-direction: column; gap: 16px; }
.gh-garantia-duas > .lado { order: 2; }
@media (min-width: 900px) {
  .gh-natureza { max-width: 420px; }
  .gh-garantia-duas { display: grid; }
  .gh-garantia-duas > .lado { order: 0; }
  .gh-form-garantia #campo-embaixadora { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══ Dashboard (sub-fase 4.9) ═══════════════════════════════════════════ */

/* Faixa de números com uma linha de contexto embaixo do valor */
.gh-faixa .gh-card small { display: block; font-size: 11px; color: var(--gh-texto-2); margin-top: 2px; line-height: 1.35; }
.gh-chips-leitura { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Duas colunas do dashboard (gráfico + ranking; maletas + acertos) */
.gh-dash-duas { display: flex; flex-direction: column; gap: 16px; }

/* Vendas por mês: barras empilhadas (maletas embaixo, diretas em cima) */
.gh-grafico-vendas { display: flex; align-items: flex-end; gap: 8px; height: 190px; padding-top: 16px; }
.gh-grafico-vendas .col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; }
.gh-grafico-vendas .pilha { width: 70%; max-width: 30px; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 2px 2px;
  overflow: hidden; min-height: 3px; }
.gh-grafico-vendas .con { background: var(--gh-dourado); }
.gh-grafico-vendas .dir { background: var(--gh-tinta); }
.gh-grafico-vendas .col.atual .pilha { outline: 1.5px dashed var(--gh-texto-2); outline-offset: 2px; }
.gh-grafico-vendas .mes { font-size: 11px; color: var(--gh-texto-2); white-space: nowrap; }
.gh-grafico-vendas .col.atual .mes { color: var(--gh-texto); font-weight: 600; }
.gh-grafico-com-media { position: relative; }
.gh-grafico-com-media .media { position: absolute; left: 0; right: 0; top: 16px; bottom: 23px; width: 100%; height: calc(100% - 39px); pointer-events: none; }
.gh-grafico-com-media .media polyline { fill: none; stroke: var(--gh-info-texto); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* Ranking com barra proporcional */
.gh-ranking { display: flex; flex-direction: column; }
.gh-ranking-linha { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0;
  border-top: 1px solid var(--gh-borda); color: var(--gh-texto); }
.gh-ranking-linha:first-child { border-top: none; }
.gh-ranking-linha .pos { font-size: 13px; color: var(--gh-texto-2); text-align: center; font-variant-numeric: tabular-nums; }
.gh-ranking-linha:first-child .pos { color: var(--gh-dourado-texto); font-weight: 700; }
.gh-ranking-linha .nome { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gh-ranking-linha .nome b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-ranking-linha .barra { height: 4px; border-radius: 4px; background: var(--gh-marfim); overflow: hidden; }
.gh-ranking-linha .barra i { display: block; height: 100%; background: var(--gh-dourado); border-radius: 4px; }
.gh-ranking-linha .valor { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gh-tend { font-size: 11px; font-weight: 600; margin-left: 4px; }
.gh-tend.sucesso { color: var(--gh-sucesso-texto); }
.gh-tend.perigo { color: var(--gh-perigo-texto); }
.gh-tend.info { color: var(--gh-info-texto); }

/* Listas curtas do dashboard (maletas na rua, acertos) */
.gh-dash-lista .gh-item { grid-template-columns: minmax(0, 1fr) auto; }
.gh-dash-lista .quem small { display: block; font-size: 12px; color: var(--gh-texto-2); }
.gh-dash-lista .valor { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Lista de embaixadoras */
.gh-tabela-embaixadoras .gh-item { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
.gh-tabela-embaixadoras .gh-item .quem { grid-column: 1; }
.gh-tabela-embaixadoras .quem small { display: block; font-size: 12px; color: var(--gh-texto-2); }
.gh-tabela-embaixadoras .situ { grid-column: 2; grid-row: 1; justify-self: end; }
.gh-tabela-embaixadoras .valor { grid-column: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.gh-tabela-embaixadoras .melhor { grid-column: 2; justify-self: end; font-size: 12px; color: var(--gh-texto-2); }

/* Maletas da embaixadora */
.gh-tabela-maletas-emb .gh-item { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
.gh-tabela-maletas-emb .gh-item .quem { grid-column: 1; }
.gh-tabela-maletas-emb .quem small { display: block; font-size: 12px; color: var(--gh-texto-2); }
.gh-tabela-maletas-emb .situ { grid-column: 2; grid-row: 1; justify-self: end; }
.gh-tabela-maletas-emb .valor { grid-column: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.gh-tabela-maletas-emb .parcelas { grid-column: 2; justify-self: end; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* Histórico: cards de ano e tabela mês a mês */
.gh-anos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.gh-anos .gh-card { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; color: var(--gh-texto); }
.gh-anos .gh-card span { font-size: 12px; color: var(--gh-texto-2); }
.gh-anos .gh-card b { font-size: 22px; font-variant-numeric: tabular-nums; }
.gh-anos .gh-card small { font-size: 12px; color: var(--gh-texto-2); }
.gh-anos .gh-card.ativo { border-color: var(--gh-dourado); box-shadow: 0 0 0 1px var(--gh-dourado) inset; }
.gh-numeros-mini { gap: 8px; }
.gh-numeros-mini > div { display: flex; flex-direction: column; gap: 2px; }
.gh-numeros-mini b { font-size: 17px; }
.gh-tabela-historico .gh-item { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
.gh-tabela-historico .mes { grid-column: 1; font-weight: 500; }
.gh-tabela-historico .v { font-size: 12px; color: var(--gh-texto-2); font-variant-numeric: tabular-nums; }
.gh-tabela-historico .v.tot { grid-column: 2; grid-row: 1; font-size: 14px; font-weight: 600; color: var(--gh-texto); justify-self: end; }
.gh-tabela-historico .v.dour { color: var(--gh-dourado-texto); }
.gh-tabela-historico .v.pct { justify-self: end; }
.gh-tabela-historico .gh-item.total { background: var(--gh-marfim); }

/* Relatórios: atalhos */
.gh-atalho-rel { display: flex; align-items: center; gap: 14px; color: var(--gh-texto); }
.gh-atalho-rel > span:not(.gh-icone-bloco) { flex: 1; min-width: 0; }
.gh-atalho-rel b { display: block; font-size: 15px; font-weight: 500; }
.gh-atalho-rel small { display: block; font-size: 12px; color: var(--gh-texto-2); }
.gh-atalho-rel > svg.ic { width: 16px; height: 16px; color: var(--gh-texto-2); }

@media (min-width: 900px) {
  .gh-dash-duas { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
  .gh-dash-duas.iguais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gh-grafico-vendas { height: 220px; }
  .gh-tabela-embaixadoras .gh-tabela-cab, .gh-tabela-embaixadoras .gh-item {
    grid-template-columns: minmax(0, 1.6fr) 110px 140px minmax(0, 1fr); row-gap: 0; }
  .gh-tabela-embaixadoras .gh-tabela-cab > :first-child { grid-column: auto; }
  .gh-tabela-embaixadoras .gh-item .quem, .gh-tabela-embaixadoras .situ, .gh-tabela-embaixadoras .valor,
  .gh-tabela-embaixadoras .melhor { grid-column: auto; grid-row: auto; justify-self: start; }
  .gh-tabela-maletas-emb .gh-tabela-cab, .gh-tabela-maletas-emb .gh-item {
    grid-template-columns: minmax(0, 1fr) 150px 120px 190px; row-gap: 0; }
  .gh-tabela-maletas-emb .gh-tabela-cab > :first-child { grid-column: auto; }
  .gh-tabela-maletas-emb .gh-item .quem, .gh-tabela-maletas-emb .situ, .gh-tabela-maletas-emb .valor,
  .gh-tabela-maletas-emb .parcelas { grid-column: auto; grid-row: auto; justify-self: start; }
  .gh-tabela-maletas-emb .parcelas { justify-content: flex-start; }
  .gh-anos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gh-tabela-historico .gh-tabela-cab, .gh-tabela-historico .gh-item {
    grid-template-columns: minmax(0, 1fr) 130px 130px 140px 100px; row-gap: 0; }
  .gh-tabela-historico .gh-tabela-cab > :first-child { grid-column: auto; }
  .gh-tabela-historico .mes, .gh-tabela-historico .v, .gh-tabela-historico .v.tot { grid-column: auto; grid-row: auto; justify-self: end; font-size: 13px; }
  .gh-tabela-historico .mes { justify-self: start; }
  .gh-tabela-historico .gh-tabela-cab > span:not(:first-child) { text-align: right; }
}

/* 4.9 — ajustes das telas reais (além do protótipo) */
.gh-contestacao { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--gh-borda); }
.gh-contestacao:first-of-type { border-top: none; }
.gh-contestacao b { font-size: 14px; font-weight: 500; }
.gh-contestacao span { font-size: 13px; color: var(--gh-texto-2); }
.gh-contestacao small { font-size: 11px; color: var(--gh-texto-2); }
.gh-atalhos-rel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.gh-tabela-historico .mes small { font-size: 11px; font-weight: 400; }
/* no celular os cards de ano repetem os chips — ficam só os chips */
.gh-anos { display: none; }
.gh-grafico-vendas.denso { gap: 2px; }
.gh-grafico-vendas.denso .pilha { width: 100%; border-radius: 3px 3px 1px 1px; }
.gh-grafico-vendas.denso .mes { overflow: visible; min-height: 14px; }
/* nomes das listas curtas não quebram o layout */
.gh-dash-lista .quem b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) {
  .gh-atalhos-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gh-anos { display: grid; }
}

/* ══ Cadastros (sub-fase 4.10) ══════════════════════════════════════════ */

/* Listas de cadastro: nome + contato; comissão/perfil e situação ao lado */
.gh-tabela-cadastro .gh-item, .gh-tabela-usuarios .gh-item { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
.gh-tabela-cadastro .gh-item .quem, .gh-tabela-usuarios .gh-item .quem { grid-column: 1; }
.gh-tabela-cadastro .quem small, .gh-tabela-usuarios .quem small { display: block; font-size: 12px; color: var(--gh-texto-2); }
.gh-tabela-cadastro .quem b, .gh-tabela-usuarios .quem b { color: var(--gh-texto); }
.gh-tabela-cadastro .situ, .gh-tabela-usuarios .situ { grid-column: 2; grid-row: 1; justify-self: end; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.gh-tabela-cadastro .classe { grid-column: 1 / -1; font-size: 12px; color: var(--gh-texto-2); }
.gh-tabela-usuarios .data { grid-column: 1 / -1; }
.gh-tabela-usuarios .email { grid-column: 1 / -1; font-size: 12px; color: var(--gh-texto-2); overflow-wrap: anywhere; }

@media (min-width: 900px) {
  .gh-tabela-cadastro .gh-tabela-cab, .gh-tabela-cadastro .gh-item {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 240px; row-gap: 0; }
  .gh-tabela-usuarios .gh-tabela-cab, .gh-tabela-usuarios .gh-item {
    grid-template-columns: minmax(0, 1.4fr) 150px minmax(0, 1fr) 150px; row-gap: 0; }
  .gh-tabela-usuarios .email { font-size: 13px; }
  .gh-tabela-cadastro .gh-tabela-cab > :first-child, .gh-tabela-usuarios .gh-tabela-cab > :first-child { grid-column: auto; }
  .gh-tabela-cadastro .gh-item .quem, .gh-tabela-cadastro .classe, .gh-tabela-cadastro .situ,
  .gh-tabela-usuarios .gh-item .quem, .gh-tabela-usuarios .situ, .gh-tabela-usuarios .data, .gh-tabela-usuarios .email {
    grid-column: auto; grid-row: auto; justify-self: start; justify-content: flex-start; }
  .gh-tabela-cadastro .classe { font-size: 13px; }
}

/* 4.10a — ajustes das telas reais (além do protótipo) */
.gh-rotulo-campo { font-size: 13px; font-weight: 500; color: #4A4843; }
.gh-cidade-uf { grid-template-columns: minmax(0, 1fr) 72px; }
.gh-acoes-candidatura { display: flex; gap: 8px; flex-wrap: wrap; }
.gh-acoes-candidatura form { margin: 0; }
.gh-acoes-candidatura form:first-child { flex: 1 1 100%; }
.gh-acoes-candidatura form:first-child .gh-btn { width: 100%; }
.gh-acoes-candidatura form:not(:first-child) { flex: 1; }
.gh-acoes-candidatura form:not(:first-child) .gh-btn { width: 100%; }
.gh-iniciais.mono { font-family: var(--gh-fonte-mono); letter-spacing: .02em; }
@media (min-width: 900px) {
  .gh-acoes-candidatura { flex-wrap: nowrap; }
  .gh-acoes-candidatura form:first-child { flex: 0 0 auto; }
  .gh-acoes-candidatura form, .gh-acoes-candidatura form:not(:first-child) { flex: 0 0 auto; }
  .gh-acoes-candidatura .gh-btn, .gh-acoes-candidatura form:first-child .gh-btn,
  .gh-acoes-candidatura form:not(:first-child) .gh-btn { width: auto; }
}

/* ══ Blog e Central de envios (sub-fase 4.10b) ══════════════════════════ */

/* Passos do comunicado */
.gh-passos-envio { display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--gh-texto-2); }
.gh-passos-envio span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--gh-marfim); }
.gh-passos-envio b { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gh-branco); font-size: 12px; }
.gh-passos-envio .ativo { background: var(--gh-tinta); color: var(--gh-texto-claro); }
.gh-passos-envio .ativo b { background: var(--gh-dourado); color: var(--gh-tinta); }

/* Histórico de envios */
.gh-tabela-envios-hist .gh-item { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
.gh-tabela-envios-hist .gh-item .quem { grid-column: 1; }
.gh-tabela-envios-hist .quem small { display: block; font-size: 12px; color: var(--gh-texto-2); }
.gh-tabela-envios-hist .situ { grid-column: 1; display: flex; gap: 4px; flex-wrap: wrap; }
.gh-tabela-envios-hist .valor { grid-column: 2; grid-row: 1; justify-self: end; font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Lista de destinatários (revisão) */
.gh-tabela-dest .gh-item { grid-template-columns: 22px minmax(0, 1fr); cursor: pointer; }
.gh-tabela-dest .gh-item .quem { grid-column: 2; }
.gh-tabela-dest .quem small { display: block; font-size: 12px; color: var(--gh-texto-2); overflow-wrap: anywhere; }
.gh-tabela-dest .gh-item:has(input:not(:checked)) .quem { opacity: .5; }

/* Barra de progresso do envio */
.gh-progresso-envio { display: flex; flex-direction: column; gap: 8px; }
.gh-progresso-envio .barra { height: 12px; border-radius: 999px; background: var(--gh-marfim); overflow: hidden; }
.gh-progresso-envio .barra i { display: block; height: 100%; background: var(--gh-dourado); border-radius: 999px; transition: width .3s; }
.gh-progresso-envio .numeros { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--gh-texto-2); }
.gh-progresso-envio .numeros b { font-size: 20px; color: var(--gh-texto); font-variant-numeric: tabular-nums; }

/* Blog */
.gh-capa { width: 56px; height: 40px; border-radius: 8px; flex-shrink: 0; background: var(--gh-marfim) center / cover no-repeat; border: 1px solid var(--gh-borda); }
.gh-tabela-blog .gh-item { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
.gh-tabela-blog .gh-item .quem { grid-column: 1; }
.gh-tabela-blog .quem small { display: block; font-size: 12px; color: var(--gh-texto-2); }
.gh-tabela-blog .situ { grid-column: 2; grid-row: 1; justify-self: end; }
.gh-tabela-blog .news { grid-column: 1 / -1; }


@media (min-width: 900px) {
  .gh-tabela-envios-hist .gh-tabela-cab, .gh-tabela-envios-hist .gh-item { grid-template-columns: minmax(0, 1fr) 260px 110px; row-gap: 0; }
  .gh-tabela-envios-hist .gh-item .quem, .gh-tabela-envios-hist .situ, .gh-tabela-envios-hist .valor { grid-column: auto; grid-row: auto; justify-self: start; }
  .gh-tabela-blog .gh-tabela-cab, .gh-tabela-blog .gh-item { grid-template-columns: minmax(0, 1fr) 130px 230px; row-gap: 0; }
  .gh-tabela-blog .gh-tabela-cab > :first-child { grid-column: auto; }
  .gh-tabela-blog .gh-item .quem, .gh-tabela-blog .situ, .gh-tabela-blog .news { grid-column: auto; grid-row: auto; justify-self: start; }
}

/* 4.10b — ajustes das telas reais (além do protótipo) */
/* Editor do Summernote (roda na moldura própria dele) */
.gh-editor { border: 1px solid var(--gh-borda-forte); border-radius: 12px; overflow: hidden; background: var(--gh-branco); }
.gh-editor iframe { display: block; width: 100% !important; border: 0; }
/* Folha larga pra prévia do email */
.gh-folha-larga .gh-folha { max-width: 720px; gap: 12px; }
.gh-iframe-email { width: 100%; height: 70dvh; border: 1px solid var(--gh-borda); border-radius: 12px; background: #fff; }
.gh-botoes-teste { display: flex; gap: 8px; }
.gh-botoes-teste .gh-btn { flex: 1; }
/* Botão com cara de link (voltar que também salva) */
.gh-link-botao { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.gh-filtros-publico { display: flex; flex-direction: column; gap: 8px; padding: 0 0 4px 32px; }
.gh-filtros-publico input { width: 100%; }
.gh-tabela-leads .situ { align-items: center; }
.gh-tabela-leads .situ form, .gh-tabela-envios-hist form { margin: 0; }
@media (min-width: 900px) {
  .gh-tabela-leads .gh-item { grid-template-columns: minmax(0, 1fr) auto; }
  .gh-tabela-leads .situ { grid-column: 2; justify-self: end; }
}

/* ══ Perfil, senha, notificações e calendário (sub-fase 4.11) ═══════════ */

/* Notificações: chips com contagem */
.gh-chips a { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gh-borda-forte); background: var(--gh-branco);
  font-size: 13px; color: var(--gh-texto); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.gh-chips a.ativo { background: var(--gh-texto); color: var(--gh-texto-claro); border-color: var(--gh-texto); }
.gh-chips a .n { font-size: 11px; font-weight: 600; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--gh-dourado-fundo); color: var(--gh-dourado-texto); display: inline-flex; align-items: center; justify-content: center; }
.gh-chips a.ativo .n { background: var(--gh-dourado); color: var(--gh-tinta); }
.gh-chips-rolam { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.gh-chips-rolam::-webkit-scrollbar { display: none; }
.gh-chips-rolam > * { flex-shrink: 0; }
.gh-aviso .quando .marcar { margin-left: auto; background: none; border: none; padding: 4px 0; font: inherit; font-size: 12px;
  color: var(--gh-texto-2); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.gh-aviso .quando .ver { display: inline-flex; align-items: center; gap: 2px; }
.gh-aviso .quando .ver .ic { width: 12px; height: 12px; }
.gh-dia-lista { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gh-texto-2); padding: 6px 4px 0; }
.gh-mais-lista { align-self: center; }

/* Calendário */
.gh-cal-grade { display: flex; flex-direction: column; gap: 16px; }
.gh-cal-mes { padding: 6px 0; }
.gh-cal-mes > h2 { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gh-dourado-texto);
  padding: 10px 16px 6px; margin: 0; }
.gh-cal-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px;
  border-top: 1px solid var(--gh-borda); }
.gh-cal-mes > h2 + .gh-cal-item { border-top: none; }
.gh-cal-dia { width: 44px; height: 44px; border-radius: 12px; background: var(--gh-marfim); display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1; }
.gh-cal-dia b { font-size: 16px; font-weight: 600; }
.gh-cal-dia small { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--gh-texto-2); margin-top: 3px; }
.gh-cal-item.hoje .gh-cal-dia { background: var(--gh-dourado); color: var(--gh-tinta); }
.gh-cal-item.hoje .gh-cal-dia small { color: var(--gh-tinta); }
.gh-cal-item .txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gh-cal-item .txt b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.gh-cal-item .txt b a { color: inherit; text-decoration: none; }
.gh-cal-item .txt b a:hover { text-decoration: underline; text-underline-offset: 2px; }
.gh-cal-item .txt b .gh-tag { margin-left: 6px; vertical-align: 1px; }
.gh-cal-item .txt small { font-size: 12px; color: var(--gh-texto-2); }
.gh-cal-item .emoji { font-size: 14px; margin-right: 6px; }
.gh-cal-item .ic-bolo { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; color: var(--gh-dourado-texto); }
.gh-cal-item .opcoes { width: 36px; height: 36px; border: none; background: none; border-radius: 10px; color: var(--gh-texto-2);
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.gh-cal-item .opcoes:hover { background: var(--gh-marfim); color: var(--gh-texto); }
.gh-tipos-evento { display: flex; flex-wrap: wrap; gap: 8px; }
.gh-tipo-novo { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; padding: 10px; border-radius: 12px; background: var(--gh-marfim); }
.gh-tipo-novo input { min-width: 0; }
@media (min-width: 900px) {
  .gh-cal-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1px; grid-auto-flow: row dense; column-gap: 16px; gap: 0 16px; }
  .gh-cal-grade > .gh-cal-mes { align-self: start; }
  .gh-chips-rolam { margin: 0; padding: 0; flex-wrap: wrap; }
}

/* 4.11 — ajustes das telas reais (além do protótipo) */
/* Aviso inteiro abre pelo título; "Marcar como lida" fica por cima */
.gh-aviso { position: relative; }
.gh-aviso a.abrir { color: inherit; text-decoration: none; }
.gh-aviso a.abrir::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.gh-aviso:has(a.abrir:hover) { box-shadow: var(--gh-sombra); }
.gh-aviso .form-marcar { position: relative; z-index: 1; margin: 0 0 0 auto; }
.gh-aviso .form-marcar .marcar { margin-left: 0; }
/* Filtro do calendário e painel de tipo usam [hidden] com display próprio */
.gh-cal-item[hidden], .gh-cal-mes[hidden], .gh-tipo-novo[hidden] { display: none; }
/* Troca de senha do primeiro acesso: sem menu */
.gh-sistema.sem-menu { padding-bottom: 24px; }
@media (min-width: 900px) {
  .gh-sistema.sem-menu .gh-app { grid-template-columns: minmax(0, 1fr); }
  .gh-sistema.sem-menu .gh-adm-topo .marca { display: flex; }
}
/* Folha com formulário longo (evento): rola por dentro */
.gh-folha-alta .gh-folha { max-height: calc(100dvh - 16px); overflow-y: auto; }
.gh-vazio[hidden] { display: none; }

/* ══ Manual do sistema interno (sub-fase 4.12) ══════════════════════════ */
/* O texto é o mesmo das duas telas (_manual_admin_secoes.html); aqui ele
   veste o layout novo pelas classes que já tinha. */
.gh-manual-adm {
  --gh-mask-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
  --gh-mask-alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v4M12 17.5h.01'/%3E%3C/svg%3E");
  --gh-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.gh-manual-adm .gh-manual-conteudo { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.gh-manual-adm section { background: var(--gh-branco); border: 1px solid var(--gh-borda); border-radius: var(--gh-raio-lg);
  padding: 18px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 16px; }
.gh-manual-adm .sec-rule { display: none; }
.gh-manual-adm .sec-head { display: flex; gap: 12px; align-items: center; margin-bottom: 2px; }
.gh-manual-adm .sec-badge { width: 36px; height: 36px; border-radius: 10px; background: var(--gh-tinta); color: var(--gh-dourado-claro);
  font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gh-manual-adm .sec-title { font-size: 18px; font-weight: 600; line-height: 1.25; margin: 0; }
.gh-manual-adm .sec-sub { font-size: 13px; color: var(--gh-texto-2); margin: 2px 0 0; }
.gh-manual-adm section > p, .gh-manual-adm section li { font-size: 15px; line-height: 1.6; color: #3A3935; margin: 0; }
.gh-manual-adm .sub-head { font-size: 15px; font-weight: 600; margin-top: 8px; color: var(--gh-texto); }
.gh-manual-adm .bull-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.gh-manual-adm .bull-list li { position: relative; padding-left: 16px; }
.gh-manual-adm .bull-list li::before { content: ''; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--gh-dourado); }
.gh-manual-adm .steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.gh-manual-adm .steps li { display: flex; gap: 12px; align-items: flex-start; }
.gh-manual-adm .step-badge { width: 26px; height: 26px; border-radius: 50%; background: var(--gh-dourado-fundo); color: var(--gh-dourado-texto);
  font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.gh-manual-adm .callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; font-size: 14px; line-height: 1.55; }
.gh-manual-adm .callout-bar { display: none; }
.gh-manual-adm .callout::before { content: ''; width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; background: currentColor;
  -webkit-mask: var(--gh-mask-info) center / contain no-repeat; mask: var(--gh-mask-info) center / contain no-repeat; }
.gh-manual-adm .callout.info { background: var(--gh-dourado-fundo); color: var(--gh-dourado-texto); }
.gh-manual-adm .callout.tip { background: var(--gh-info-fundo); color: #22406B; }
.gh-manual-adm .callout.warn { background: var(--gh-perigo-fundo); color: var(--gh-perigo-texto); }
.gh-manual-adm .callout.warn::before { -webkit-mask-image: var(--gh-mask-alerta); mask-image: var(--gh-mask-alerta); }
.gh-manual-adm .status-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gh-manual-adm .s-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.gh-manual-adm .s-arr { color: var(--gh-texto-2); font-size: 13px; }
.gh-manual-adm .man-label { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 8px; border: 1px solid var(--gh-borda-forte);
  background: var(--gh-marfim); font-size: 13px; font-weight: 600; white-space: nowrap; }
.gh-manual-adm .perm-rolagem { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
.gh-manual-adm .perm-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.gh-manual-adm .perm-table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--gh-texto-2); padding: 8px; border-bottom: 1px solid var(--gh-borda); }
.gh-manual-adm .perm-table td { padding: 9px 8px; border-bottom: 1px solid var(--gh-borda); }
.gh-manual-adm .perm-table th:not(:first-child), .gh-manual-adm .perm-table td:not(:first-child) { text-align: center; width: 96px; }
.gh-manual-adm .perm-table .yes, .gh-manual-adm .perm-table .no { font-size: 0; }
.gh-manual-adm .perm-table .yes::after, .gh-manual-adm .perm-table .no::after { content: ''; display: inline-block; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--gh-mask-check) center / contain no-repeat; mask: var(--gh-mask-check) center / contain no-repeat; vertical-align: middle; }
.gh-manual-adm .perm-table .yes { color: var(--gh-sucesso-texto); }
.gh-manual-adm .perm-table .no { color: #C9C2B3; }
.gh-manual-adm .perm-table .no::after { width: 14px; height: 2px; border-radius: 2px; -webkit-mask: none; mask: none; }
.gh-manual-adm .faq-item { border-top: 1px solid var(--gh-borda); }
.gh-manual-adm .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0;
  font-size: 15px; font-weight: 500; }
.gh-manual-adm .faq-item summary::-webkit-details-marker { display: none; }
.gh-manual-adm .faq-item .faq-a { padding: 0 0 16px; font-size: 15px; line-height: 1.6; color: #3A3935; margin: 0; }
.gh-manual-adm .man-rodape { text-align: center; padding: 8px; color: var(--gh-texto-2); font-size: 13px; }
.gh-manual-adm mark { background: rgba(201,168,76,.35); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Busca e sumário */
.gh-manual-busca { display: flex; flex-direction: column; gap: 8px; }
.gh-manual-busca .resultado { font-size: 13px; color: var(--gh-texto-2); padding: 0 4px; }
.gh-manual-adm .gh-toc a b { display: inline-flex; justify-content: center; width: 24px; height: 22px; align-items: center; border-radius: 6px;
  background: var(--gh-marfim); color: var(--gh-texto-2); }
.gh-manual-adm .gh-toc a.ativo b { background: var(--gh-dourado); color: var(--gh-tinta); }
.gh-manual-adm .gh-toc a.sem-resultado { opacity: .35; }
.gh-manual-cab .gh-rotulo { color: var(--gh-dourado-texto); }
@media (min-width: 900px) {
  .gh-manual-adm { grid-template-columns: 250px minmax(0, 1fr); gap: 28px; }
  .gh-manual-adm .gh-manual-toc { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 20px; align-self: start;
    max-height: calc(100dvh - 40px); overflow-y: auto; scrollbar-width: none; }
  .gh-manual-adm section { padding: 28px; gap: 14px; }
  .gh-manual-adm .perm-rolagem { margin: 0 -28px; padding: 0 28px; }
  .gh-manual-adm .sec-badge { width: 40px; height: 40px; }
  .gh-manual-adm .sec-title { font-size: 21px; }
}
.gh-manual-adm .faq-item summary > span { flex: 1; min-width: 0; }

/* 4.12 — ajustes da tela real (além do protótipo) */
.gh-manual-adm section[hidden], .gh-manual-adm .faq-item[hidden] { display: none; }
.gh-manual-resultado { font-size: 13px; color: var(--gh-texto-2); padding: 0 4px; margin: 0; }
.gh-manual-resultado .gh-link-botao { color: var(--gh-dourado-texto); font-size: 13px; }
.gh-manual-adm code { font-family: var(--gh-fonte-mono); font-size: 13px; background: var(--gh-marfim); padding: 1px 6px; border-radius: 6px; color: var(--gh-texto); }
.gh-manual-adm .sec-title-block { min-width: 0; }
.gh-manual-adm .sec-head + .faq-item { border-top: none; }
.gh-manual-adm .callout-body { min-width: 0; }

/* ══ Romaneios (sub-fase 4.13) — folha de impressão, sem a casca ════════ */
body.gh-romaneio-pag { background: var(--gh-marfim); padding: 20px 16px 40px; }
.gh-rom-barra { max-width: 794px; margin: 0 auto 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gh-rom { max-width: 794px; margin: 0 auto; background: #fff; border: 1px solid var(--gh-borda); border-radius: 16px; box-shadow: var(--gh-sombra);
  padding: 40px 44px 28px; display: flex; flex-direction: column; gap: 22px; color: var(--gh-texto); font-size: 13px; }
.gh-rom-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 18px; border-bottom: 2px solid var(--gh-tinta); }
.gh-rom-cab img { height: 62px; width: auto; display: block; }
.gh-rom-cab .tit { text-align: right; }
.gh-rom-cab h1 { font-family: var(--gh-fonte-titulo); font-weight: 400; font-size: 34px; line-height: 1; margin: 0; }
.gh-rom-cab .sub { font-size: 12px; color: var(--gh-texto-2); margin-top: 6px; }
.gh-rom-cab .selo { display: inline-block; margin-top: 8px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gh-dourado-texto); border: 1px solid var(--gh-dourado); border-radius: 999px; padding: 3px 10px; }
.gh-rom-dados { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 20px; }
.gh-rom-dados span, .gh-rom-rotulo { display: block; font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gh-texto-2); margin-bottom: 3px; }
.gh-rom-dados b { font-size: 14px; font-weight: 600; }
.gh-rom-codigos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gh-rom-codigo { border: 1px solid var(--gh-borda-forte); border-radius: 10px; padding: 10px 14px; }
.gh-rom-codigo b { font-family: var(--gh-fonte-mono); font-size: 15px; font-weight: 500; letter-spacing: .02em; }
.gh-rom-resumo { display: flex; flex-wrap: wrap; gap: 12px 36px; align-items: flex-end; padding: 14px 0; border-top: 1px solid var(--gh-borda); border-bottom: 1px solid var(--gh-borda); }
.gh-rom-resumo b { display: block; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gh-rom-resumo .tipos { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 60%; }
.gh-rom-resumo .tipos i { font-style: normal; font-size: 11px; border: 1px solid var(--gh-borda-forte); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.gh-rom-resumo .tipos i b { display: inline; font-size: 11px; font-weight: 600; margin-left: 4px; }
.gh-rom-tabela { width: 100%; border-collapse: collapse; }
.gh-rom-tabela th { font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gh-texto-2); text-align: left;
  padding: 0 6px 8px; border-bottom: 1px solid var(--gh-tinta); }
.gh-rom-tabela td { padding: 7px 6px; border-bottom: 1px solid #ECE8DF; vertical-align: top; }
.gh-rom-tabela .cod { font-family: var(--gh-fonte-mono); font-size: 12px; white-space: nowrap; }
.gh-rom-tabela .num, .gh-rom-tabela th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gh-rom-tabela .muted { color: var(--gh-texto-2); }
.gh-rom-tabela .conf { width: 22px; padding-left: 0; }
.gh-rom-tabela .conf i { display: block; width: 13px; height: 13px; border: 1.5px solid #B5AE9F; border-radius: 3px; margin-top: 2px; }
.gh-rom-tabela .rep { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gh-dourado-texto); margin-left: 6px; }
.gh-rom-tabela tfoot td { border-bottom: 0; border-top: 1px solid var(--gh-tinta); font-weight: 600; padding-top: 9px; }
.gh-rom-acerto { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
.gh-rom-linha { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #ECE8DF; font-variant-numeric: tabular-nums; }
.gh-rom-linha .l { color: var(--gh-texto-2); }
.gh-rom-total { border: 2px solid var(--gh-tinta); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.gh-rom-total .v { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gh-rom-total .parc { display: flex; justify-content: space-between; font-size: 12px; border-top: 1px solid var(--gh-borda); padding-top: 8px; font-variant-numeric: tabular-nums; }
.gh-rom-estimativa { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gh-atencao-texto); background: var(--gh-atencao-fundo);
  border-radius: 999px; padding: 3px 10px; align-self: flex-start; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gh-rom-assina { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 6px; }
.gh-rom-assina div { border-top: 1px solid var(--gh-texto-2); padding-top: 6px; font-size: 11px; color: var(--gh-texto-2); }
.gh-rom-rodape { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--gh-texto-2); border-top: 1px solid var(--gh-borda); padding-top: 12px; }
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  body.gh-romaneio-pag { background: #fff; padding: 0; }
  .gh-rom-barra { display: none; }
  .gh-rom { border: 0; border-radius: 0; box-shadow: none; padding: 0; max-width: none; }
  .gh-rom-tabela thead { display: table-header-group; }
  .gh-rom-tabela tr { break-inside: avoid; }
}
@media screen and (max-width: 640px) {
  body.gh-romaneio-pag { padding: 12px 10px 32px; }
  .gh-rom { padding: 22px 16px 18px; border-radius: 14px; gap: 18px; }
  .gh-rom-cab { flex-direction: column; align-items: flex-start; gap: 14px; }
  .gh-rom-cab .tit { text-align: left; }
  .gh-rom-cab img { height: 48px; }
  .gh-rom-cab h1 { font-size: 30px; }
  .gh-rom-dados { grid-template-columns: 1fr 1fr; }
  .gh-rom-codigos, .gh-rom-acerto { grid-template-columns: 1fr; }
  .gh-rom-resumo .tipos { margin-left: 0; max-width: none; justify-content: flex-start; }
  .gh-rom-tabela thead, .gh-rom-tabela .conf { display: none; }
  .gh-rom-tabela tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid #ECE8DF; }
  .gh-rom-tabela td { padding: 0; border: 0; }
  .gh-rom-tabela .desc { grid-column: 2; }
  .gh-rom-tabela .num { grid-column: 3; grid-row: 1; }
  .gh-rom-tabela .extra { grid-column: 2; font-size: 12px; }
  .gh-rom-tabela tfoot tr { border-bottom: 0; border-top: 1px solid var(--gh-tinta); }
  .gh-rom-assina { grid-template-columns: 1fr; }
  .gh-rom-rodape { flex-direction: column; gap: 4px; }
}
/* 4.13 — tipo e categoria numa linha só (a descrição é que quebra) */
@media screen and (min-width: 641px), print { .gh-rom-tabela .extra { white-space: nowrap; font-size: 12px; } }
/* 4.13 — maleta: avisos do rastreio com a ação ao lado, e o status dos Correios embaixo do código */
.gh-dica-acao { flex-wrap: wrap; align-items: center; }
.gh-dica-acao > span { flex: 1 1 220px; }
.gh-dica-acao form { margin: 0; }
.gh-dica-acao .gh-btn { min-height: 38px; font-size: 13px; background: var(--gh-branco); }
.gh-rastreio-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: -4px 0 2px; padding: 0 14px; font-size: 13px; }
.gh-rastreio-status .l { color: var(--gh-texto-2); font-size: 12px; }
.gh-rastreio-status small { font-size: 12px; }
.gh-rastreio-status .gh-link-botao { margin-left: auto; font-size: 13px; }

/* ══ Menu do celular no portal (18/Set/26) — igual ao do sistema interno ══ */
.gh-folha-quem { display: flex; align-items: center; gap: 12px; padding: 4px 4px 10px; border-bottom: 1px solid var(--gh-borda); margin-bottom: 4px; }
.gh-folha-quem .gh-avatar { width: 44px; height: 44px; font-size: 17px; flex-shrink: 0; }
.gh-folha-quem b { display: block; font-size: 15px; }
.gh-folha-quem small { font-size: 12px; color: var(--gh-texto-2); }
.gh-folha-quem .gh-nivel-mini { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gh-dourado-texto); background: var(--gh-dourado-fundo); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.gh-folha-menu a .gh-tag { margin-left: auto; }
.gh-folha-menu a .dica { margin-left: auto; font-size: 12px; color: var(--gh-texto-2); white-space: nowrap; }
.gh-folha-menu a .dica.urgente { color: var(--gh-perigo-texto); font-weight: 600; }
@media (min-width: 900px) { .gh #folha-menu-portal { display: none !important; } }
.gh-mini-nav .menu { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.08); color: var(--gh-dourado-claro); justify-content: center; }

/* ══ Login (Redesign Fase 1 — opção A, lado a lado) ═══════════════════════ */
body.gh-login { margin: 0; min-height: 100vh; background: var(--gh-marfim); color: var(--gh-texto); padding: 0; }
.gh-login .lgA { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; min-height: 100dvh; }
.gh-login .esq { background: var(--gh-tinta); color: #F4F1EA; padding: 48px 56px; display: flex; flex-direction: column;
  position: relative; overflow: hidden; isolation: isolate; }
.gh-login .esq > * { position: relative; z-index: 2; }
.gh-login .esq > .lg-frase { margin: auto 0; }
.gh-login .esq::after { content: ''; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,.28), rgba(201,168,76,0) 70%); pointer-events: none; }
.gh-login .esq h2 { font-family: var(--gh-fonte-titulo); font-weight: 400; font-size: 56px; line-height: 1.02; margin: 0; max-width: 460px; }
.gh-login .esq h2 em { color: var(--gh-dourado-claro); }
.gh-login .esq p { color: rgba(244,241,234,.6); font-size: 16px; max-width: 400px; line-height: 1.6; margin: 14px 0 0; }
.gh-login .lg-marca .n { font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: #fff; }
.gh-login .lg-marca .n span { color: var(--gh-dourado); }
/* O selo: círculo da logo em traço com um brilho rodando, e o GG apagado que
   acende onde o brilho passa (holofote, static/js/login-joia.js). */
.gh-login .esq > .lg-joia { --lado: min(50vw, 760px); position: absolute; z-index: 0; width: var(--lado); height: var(--lado);
  right: calc(var(--lado) * -.33); top: 50%; transform: translateY(-50%); pointer-events: none; }
.lg-gg { position: absolute; width: 70.5%; left: 14.75%; top: 50%; transform: translateY(-50%); aspect-ratio: 1100 / 681;
  background: var(--gh-dourado); opacity: .09;
  -webkit-mask: url("../img/gg-mascara.3efaf459a9d5.png") center / contain no-repeat; mask: url("../img/gg-mascara.3efaf459a9d5.png") center / contain no-repeat; }
.lg-gg.holofote { --x: 50%; --y: 50%; opacity: 1;
  background: radial-gradient(circle at var(--x) var(--y), rgba(255,236,185,.8), rgba(227,203,133,.28) 20%, transparent 40%); }
.lg-joia svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lg-joia .aro { stroke: var(--gh-dourado); stroke-opacity: .22; stroke-width: .6; }
.lg-joia .luz { stroke: var(--gh-dourado-claro); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 34 966;
  filter: drop-shadow(0 0 4px rgba(227,203,133,.9)); }
.lg-joia .luz.b { stroke-opacity: .5; stroke-dasharray: 14 986; animation: lg-joia-volta 17s linear infinite reverse; }
@keyframes lg-joia-volta { to { stroke-dashoffset: -1000; } }
@media (prefers-reduced-motion: reduce) { .lg-joia .luz.b { animation: none; } }
.gh-login .dir { display: flex; align-items: center; justify-content: center; padding: 40px; }
.lg-form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }
.lg-form h1 { font-family: var(--gh-fonte-titulo); font-weight: 400; font-size: 40px; line-height: 1; margin: 0; }
.lg-form .sub { font-size: 14px; color: var(--gh-texto-2); margin: -4px 0 6px; line-height: 1.5; }
.lg-erro { background: var(--gh-perigo-fundo); color: var(--gh-perigo-texto); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.45; }
.lg-campo { display: flex; flex-direction: column; gap: 6px; }
.lg-campo label { font-size: 13px; font-weight: 500; display: flex; justify-content: space-between; gap: 12px; }
.lg-campo label a { font-weight: 500; color: var(--gh-dourado-texto); text-decoration: none; }
.lg-campo input { height: 50px; border-radius: 12px; border: 1px solid var(--gh-borda-forte); background: #fff; padding: 0 14px; font: inherit; font-size: 16px;
  width: 100%; color: var(--gh-texto); }
.lg-campo input:focus { outline: none; border-color: var(--gh-dourado); box-shadow: 0 0 0 3px rgba(201,168,76,.2); }
/* Sem o azul do preenchimento automático do Chrome */
.lg-campo input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: var(--gh-texto); caret-color: var(--gh-texto); }
.lg-campo input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px #fff inset, 0 0 0 3px rgba(201,168,76,.2); }
.lg-campo .olho-in { position: relative; }
.lg-campo .olho-in input { padding-right: 50px; }
.lg-campo .olho { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: none; background: none;
  color: var(--gh-texto-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lg-campo .olho svg { width: 19px; height: 19px; }
.lg-entrar { height: 52px; border: none; border-radius: 12px; background: var(--gh-tinta); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.lg-entrar:disabled { opacity: .7; cursor: default; }
/* Continuar com o Google — no mesmo desenho dos campos, com o G oficial */
.gh a.lg-google { height: 50px; border-radius: 12px; border: 1px solid var(--gh-borda-forte); background: #fff; color: var(--gh-texto);
  display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 500; text-decoration: none;
  transition: border-color .15s, box-shadow .15s; }
.gh a.lg-google:hover { border-color: #CFC8B8; box-shadow: 0 2px 10px rgba(11,11,12,.05); }
.gh a.lg-google:focus-visible { outline: none; border-color: var(--gh-dourado); box-shadow: 0 0 0 3px rgba(201,168,76,.2); }
.lg-google svg { width: 18px; height: 18px; flex: none; }
.lg-ou { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--gh-texto-2); }
.lg-ou::before, .lg-ou::after { content: ''; flex: 1; height: 1px; background: var(--gh-borda-forte); }
.lg-rodape { font-size: 12px; color: var(--gh-texto-2); display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; }
@media (max-width: 899.98px) {
  .gh-login .lgA { grid-template-columns: 1fr; min-height: 0; }
  .gh-login .esq { padding: calc(22px + var(--gh-safe-top)) 22px 26px; gap: 16px; }
  .gh-login .esq > .lg-frase { margin: 0; }
  .gh-login .esq::after { width: 260px; height: 260px; right: -90px; bottom: -110px; }
  .gh-login .esq > .lg-joia { --lado: 300px; right: -120px; }
  .gh-login .lg-marca .n { font-size: 18px; }
  .gh-login .esq h2 { font-size: 30px; max-width: 270px; }
  .gh-login .esq p { font-size: 14px; margin-top: 8px; max-width: 270px; }
  .gh-login .lg-inicio .esq p { display: none; }
  .gh-login .dir { padding: 26px 22px calc(28px + var(--gh-safe-bottom)); align-items: flex-start; }
  .lg-form h1 { font-size: 34px; }
}
.lg-rodape a { color: inherit; text-decoration: none; }
.lg-rodape a:hover { color: var(--gh-dourado-texto); text-decoration: underline; text-underline-offset: 2px; }
/* Telas de acesso fora do login (esqueci a senha, nova senha, bloqueio) — mesmo layout do login */
.lg-form-in { max-width: none; }
.gh a.lg-entrar { display: flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; }
.lg-voltar { align-self: center; font-size: 13px; font-weight: 500; color: var(--gh-texto-2); text-decoration: none; padding: 6px 8px; }
.lg-voltar:hover { color: var(--gh-dourado-texto); }
.lg-selo { width: 52px; height: 52px; border-radius: 50%; background: var(--gh-dourado-fundo); color: var(--gh-dourado-texto);
  display: flex; align-items: center; justify-content: center; }
.lg-selo svg { width: 24px; height: 24px; }
.lg-selo.ok { background: var(--gh-sucesso-fundo); color: var(--gh-sucesso-texto); }
.lg-selo.alerta { background: var(--gh-perigo-fundo); color: var(--gh-perigo-texto); }
.lg-aviso { background: #fff; border: 1px solid var(--gh-borda-forte); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; color: var(--gh-texto-2); }
.lg-aviso b { color: var(--gh-texto); font-weight: 600; }
.lg-regras { list-style: none; margin: -2px 0 2px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--gh-texto-2); }
.lg-regras li { display: flex; align-items: center; gap: 6px; }
.lg-regras li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--gh-borda-forte); }
.lg-regras li.ok { color: var(--gh-sucesso-texto); }
.lg-regras li.ok::before { background: var(--gh-sucesso-texto); border-color: var(--gh-sucesso-texto); }
/* Início: cabe na tela do computador sem rolar (pedido do Miguel, 18/Set/26) — Admin tem 7 números: 4 colunas em 2 linhas */
@media (min-width: 1200px) {
  .gh-numeros-adm:has(> :nth-child(5)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gh-numeros-adm .gh-card { padding: 16px 20px; }
  a.gh-tarefa { padding: 12px 16px; }
}

/* Itens da nota da maleta: as mesmas colunas da nota (valor, desconto, outras despesas) */
.gh-itens-nota-cab { display: none; }
.gh-item-nota { display: grid; gap: 4px 12px; padding: 10px 0; border-top: 1px solid #F1EEE7; font-size: 13px; }
.gh-item-nota .desc b { font-size: 14px; font-weight: 600; display: block; }
.gh-item-nota .desc span { font-size: 12px; color: var(--gh-texto-2); }
.gh-item-nota .num { font-variant-numeric: tabular-nums; }
.gh-item-nota .num::before { content: attr(data-rotulo) ": "; color: var(--gh-texto-2); }
.gh-item-nota .num.desconto { color: var(--gh-perigo-texto); }
.gh-item-nota .num.despesas { color: var(--gh-sucesso-texto); }
@media (min-width: 900px) {
  .gh-itens-nota-cab { display: grid; font-size: 12px; color: var(--gh-texto-2); padding-bottom: 4px; }
  .gh-itens-nota-cab, .gh-item-nota { grid-template-columns: minmax(0, 1fr) 110px 120px 140px; align-items: center; }
  .gh-itens-nota-cab > span + span, .gh-item-nota .num { text-align: right; }
  .gh-item-nota .num::before { content: none; }
}