/* gestao.css — visual premium da GESTÃO (entrada /gestao e painel /admin).
 *
 * Escrito à mão, como o portal.css: o /site.css é GERADO e só conhece as
 * classes que o site usa. Tudo aqui tem prefixo próprio (ge- na entrada,
 * gp- no painel), para não esbarrar em nada das outras páginas.
 *
 * Carregar DEPOIS do /site.css e do /portal.css.
 * Padrão: o painel da Central de licenças (menu lateral escuro, área clara,
 * números em cartões), com o verde do Hotspot no lugar do azul-violeta.
 */

:root {
  --gp-verde: #10b981;
  --gp-verde-claro: #34d399;
  --gp-verde-forte: #08875d;
  --gp-verde-fundo: #e8f8ef;
  --gp-noite: #07090d;
  --gp-fundo: #f4f6f9;
  --gp-linha: #e6e9f0;
  --gp-tinta: #0f172a;
  --gp-apagado: #64748b;
  --gp-ambar: #a16207;
  --gp-ambar-fundo: #fff7db;
  --gp-rubro: #b91c1c;
  --gp-rubro-fundo: #fdecec;
  --gp-azul: #1d4ed8;
  --gp-azul-fundo: #e8f0ff;
}

/* ====================================================================
   BOTÕES PREMIUM (os mesmos acabamentos do site: BOTAO_VERDE, VIDRO...)
   ==================================================================== */
.gp-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.5rem;
  padding: 0 1.1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 .875rem/1 var(--font-sans);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s, background-color .25s, border-color .25s, color .25s;
}
.gp-botao svg { width: 1rem; height: 1rem; flex: none; }
.gp-botao:hover { transform: translateY(-1px); }
.gp-botao:active { transform: translateY(0) scale(.98); }
.gp-botao:disabled { opacity: .55; pointer-events: none; }
.gp-botao .gp-seta { transition: transform .25s; }
.gp-botao:hover .gp-seta { transform: translateX(3px); }

.gp-botao--verde {
  border-color: rgba(255, 255, 255, .15);
  background: linear-gradient(90deg, #0a9467, #05684a);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 30px -10px rgba(16, 185, 129, .65);
}
.gp-botao--verde:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 36px -10px rgba(16, 185, 129, .8);
}
.gp-botao--vidro {
  border-color: rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.gp-botao--vidro:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); }
.gp-botao--claro {
  border-color: #d9dfeb;
  background: #fff;
  color: var(--gp-tinta);
  box-shadow: 0 8px 24px -16px rgba(15, 23, 42, .45);
}
.gp-botao--claro:hover { border-color: rgba(8, 135, 93, .45); color: var(--gp-verde-forte); }
.gp-botao--perigo {
  border-color: #f3c4c4;
  background: #fff;
  color: var(--gp-rubro);
}
.gp-botao--perigo:hover { border-color: #e48a8a; background: #fff5f5; }
.gp-botao--rubro {
  border-color: rgba(255, 255, 255, .15);
  background: linear-gradient(90deg, #dc2626, #a51d1d);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 26px -12px rgba(220, 38, 38, .7);
}
.gp-botao--miudo { min-height: 2.1rem; padding: 0 .85rem; font-size: .8rem; }
.gp-botao--largo { width: 100%; min-height: 3.1rem; font-size: .95rem; }

/* ====================================================================
   ENTRADA (/gestao)
   ==================================================================== */
.ge-corpo {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--gp-noite);
  color: #fff;
}
.ge-fundo {
  position: fixed;
  inset: 0;
  background: #07090d url(/marca/fundo-gestao.svg) left center / cover no-repeat;
}
.ge-fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 9, 13, .05) 0%, rgba(7, 9, 13, .25) 45%, rgba(7, 9, 13, .82) 78%);
}

.ge-topo {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  padding: 1.25rem clamp(1rem, 4vw, 3rem) 0;
}
.ge-topo .voltar { background: rgba(7, 9, 13, .45); backdrop-filter: blur(8px); }

.ge-grade {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 88rem;
  margin: 0 auto;
  display: grid;
  align-items: center;
  gap: 2.5rem;
  padding: 1rem clamp(1rem, 4vw, 3rem) 1.5rem;
}
@media (min-width: 1024px) {
  .ge-grade { grid-template-columns: minmax(0, 1fr) 27.5rem; }
}

.ge-frase { display: none; align-self: end; padding-bottom: 1.5rem; }
@media (min-width: 1024px) { .ge-frase { display: block; } }
.ge-selo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.1rem;
  padding: .45rem .85rem;
  border: 1px solid rgba(52, 211, 153, .25);
  border-radius: 999px;
  background: rgba(16, 185, 129, .08);
  color: #a7f3d0;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ge-selo i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--gp-verde-claro); box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }
.ge-frase h2 {
  max-width: 30rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.03em;
}
.ge-frase h2 em { font-style: normal; color: var(--gp-verde-claro); }
.ge-frase p { max-width: 28rem; margin: .7rem 0 0; font-size: .92rem; line-height: 1.6; color: rgba(255, 255, 255, .58); }

.ge-cartao {
  width: 100%;
  max-width: 27.5rem;
  justify-self: center;
  padding: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 1.5rem;
  background: rgba(15, 21, 29, .82);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
@media (min-width: 1024px) { .ge-cartao { justify-self: end; } }

.ge-marca { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; margin-bottom: 1.35rem; }
.ge-marca img { height: 3rem; width: auto; }
.ge-marca span { padding-left: .15rem; font-size: .66rem; font-weight: 600; letter-spacing: .2em; color: #6ee7b7; }

.ge-titulo { margin: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.ge-sub { margin: .35rem 0 0; font-size: .86rem; line-height: 1.5; color: rgba(255, 255, 255, .6); }

.ge-etapa { margin-top: 1.35rem; }
.ge-passo {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .9rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6ee7b7;
}
.ge-passo svg { width: .95rem; height: .95rem; }
.ge-texto { margin: -.3rem 0 .9rem; font-size: .84rem; line-height: 1.55; color: rgba(255, 255, 255, .7); }

.ge-campo { display: block; margin-top: .85rem; }
.ge-campo:first-of-type { margin-top: 0; }
.ge-rotulo {
  display: flex;
  align-items: baseline;
  margin-bottom: .35rem;
  font-size: .76rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
}
.ge-rotulo a { margin-left: auto; color: #6ee7b7; font-weight: 600; text-decoration: none; }
.ge-rotulo a:hover { color: #fff; }
.ge-entrada {
  width: 100%;
  padding: .75rem .9rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: .8rem;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: .95rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.ge-entrada::placeholder { color: rgba(255, 255, 255, .3); }
.ge-entrada:focus { border-color: var(--gp-verde-claro); background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 3px rgba(16, 185, 129, .22); }
.ge-entrada[readonly] { color: rgba(255, 255, 255, .8); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; letter-spacing: .04em; }
.ge-entrada--codigo { text-align: center; font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .4em; padding: .6rem .9rem; }
.ge-dica { display: block; margin-top: .35rem; font-size: .75rem; line-height: 1.45; color: rgba(255, 255, 255, .5); }

.ge-qr {
  display: block;
  width: 9.5rem;
  height: 9.5rem;
  margin: 0 auto .9rem;
  padding: .45rem;
  border-radius: 1rem;
  background: #fff;
}

/* Texto e QR lado a lado: o cadastro do MFA cabe em 1366x768 sem rolar. */
.ge-qr-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin-bottom: .9rem; }
.ge-qr-linha .ge-texto { margin: 0; }
.ge-qr-linha .ge-qr { width: 8.5rem; height: 8.5rem; margin: 0; }
@media (max-width: 380px) {
  .ge-qr-linha { grid-template-columns: minmax(0, 1fr); }
  .ge-qr-linha .ge-qr { margin: 0 auto; }
}
/* No cadastro do MFA o socorro do autenticador ainda não faz sentido. */
.ge-cartao:has(#etapaCadastro:not([hidden])) .ge-socorro { display: none; }

.ge-acoes { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.ge-link-botao {
  width: 100%;
  padding: .5rem;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .6);
  font-size: .84rem;
  cursor: pointer;
}
.ge-link-botao:hover { color: #fff; }

.ge-ok {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  font-size: .88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .86);
}
.ge-ok svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .1rem; color: var(--gp-verde-claro); }

.ge-alerta {
  margin-top: 1rem;
  padding: .7rem .9rem;
  border: 1px solid rgba(248, 113, 113, .4);
  border-radius: .8rem;
  background: rgba(239, 68, 68, .14);
  color: #fecaca;
  font-size: .85rem;
  line-height: 1.5;
}
.ge-alerta--ok { border-color: rgba(52, 211, 153, .4); background: rgba(16, 185, 129, .13); color: #bbf7d0; }

.ge-socorro {
  margin: 1.1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .74rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .45);
}
.ge-socorro code { padding: .05rem .35rem; border-radius: .35rem; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8); font-size: .72rem; }

.ge-rodape {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding: .9rem clamp(1rem, 4vw, 3rem) 1.1rem;
  font-size: .7rem;
  color: rgba(255, 255, 255, .42);
}
.ge-rodape a { color: inherit; text-decoration: none; }
.ge-rodape a:hover { color: #fff; }

/* Celular: o desenho fica como faixa no alto e o cartão vem logo abaixo. */
@media (max-width: 1023px) {
  .ge-fundo::after { background: linear-gradient(180deg, rgba(7, 9, 13, .1) 0%, rgba(7, 9, 13, .55) 30%, rgba(7, 9, 13, .9) 60%); }
  .ge-grade { align-items: start; padding-top: 2.5rem; }
  .ge-cartao { padding: 1.4rem; }
  .ge-socorro { display: none; }
}
/* Tela baixa (notebook 1366x768 com a barra do navegador): enxuga. */
@media (max-height: 820px) and (min-width: 1024px) {
  .ge-topo { padding-top: .8rem; }
  .ge-grade { padding-top: .25rem; padding-bottom: .5rem; }
  .ge-cartao { padding: 1.4rem 1.6rem; }
  .ge-marca { margin-bottom: .9rem; }
  .ge-marca img { height: 2.6rem; }
  .ge-etapa { margin-top: 1rem; }
  .ge-qr-linha { margin-bottom: .5rem; }
  .ge-qr-linha .ge-qr { width: 7.5rem; height: 7.5rem; }
  .ge-campo { margin-top: .65rem; }
  .ge-acoes { margin-top: 1rem; }
}

/* ====================================================================
   PAINEL (/admin) — moldura
   ==================================================================== */
.gp-corpo {
  background: var(--gp-fundo);
  color: var(--gp-tinta);
  overflow-x: hidden;
}
.gp-casca { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100dvh; }

.gp-menu {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: 1rem .85rem;
  background: radial-gradient(120% 60% at 0% 0%, #0f3b2d 0%, #0a1712 50%, #06090b 100%);
  color: #c4d6ce;
}
.gp-menu__marca { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: 0 .4rem 1rem; text-decoration: none; }
.gp-menu__marca img { height: 2.6rem; width: auto; }
.gp-menu__marca span { padding-left: .15rem; font-size: .64rem; font-weight: 600; letter-spacing: .17em; color: #6ee7b7; }
.gp-menu nav { flex: 1; min-height: 0; overflow-y: auto; }
.gp-menu__secao { margin: .9rem .55rem .35rem; font-size: .64rem; letter-spacing: .14em; color: #5f8576; }
.gp-menu__item {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .55rem .65rem;
  border: 0;
  border-radius: .65rem;
  background: none;
  color: inherit;
  font-size: .84rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.gp-menu__item svg { width: 1.05rem; height: 1.05rem; flex: none; opacity: .85; }
.gp-menu__item:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.gp-menu__item.e-ativo { background: rgba(255, 255, 255, .09); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.gp-menu__item.e-ativo svg { color: var(--gp-verde-claro); opacity: 1; }
.gp-menu__conta { margin-left: auto; padding: .05rem .45rem; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: .7rem; font-weight: 600; color: #d1fae5; }
.gp-menu__conta:empty { display: none; }

.gp-conta {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .75rem;
  padding: .6rem;
  border-radius: .8rem;
  background: rgba(255, 255, 255, .06);
}
.gp-conta__inicial {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #34d399, #08875d);
  color: #fff;
  font: 700 .82rem/1 var(--font-sans);
  text-transform: uppercase;
}
.gp-conta__nome { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; font-weight: 600; color: #fff; }
.gp-conta__mfa { font-size: .66rem; font-weight: 700; color: #4ade80; }
.gp-conta__sair {
  display: grid;
  place-items: center;
  margin-left: auto;
  padding: .4rem;
  border: 0;
  border-radius: .5rem;
  background: none;
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
}
.gp-conta__sair:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.gp-conta__sair svg { width: 1rem; height: 1rem; }

.gp-veu { display: none; }

.gp-area { display: flex; flex-direction: column; min-width: 0; min-height: 100dvh; }

.gp-topo {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 3.9rem;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--gp-linha);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.gp-hamburguer {
  display: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--gp-linha);
  border-radius: .7rem;
  background: #fff;
  color: var(--gp-tinta);
  cursor: pointer;
}
.gp-hamburguer svg { width: 1.2rem; height: 1.2rem; }
.gp-topo__logo { display: none; }
.gp-topo .voltar {
  border-color: var(--gp-linha);
  background: #fff;
  color: var(--gp-tinta);
}
.gp-topo .voltar:hover { border-color: rgba(8, 135, 93, .45); background: var(--gp-verde-fundo); color: var(--gp-verde-forte); }
.gp-topo .etiqueta-cliente { color: var(--gp-tinta); }

.gp-busca {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 21rem;
  max-width: 100%;
  margin-left: auto;
  padding: .5rem .8rem;
  border: 1px solid var(--gp-linha);
  border-radius: .75rem;
  background: #f1f4f8;
  font-size: .84rem;
}
.gp-busca svg { width: 1rem; height: 1rem; flex: none; color: var(--gp-apagado); }
.gp-busca input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--gp-tinta); outline: none; font-size: .84rem; }
.gp-busca input::placeholder { color: var(--gp-apagado); }
.gp-busca:focus-within { border-color: rgba(8, 135, 93, .5); background: #fff; box-shadow: 0 0 0 3px rgba(16, 185, 129, .15); }
body.adm-ficha .gp-busca { display: none; }

.gp-miolo { flex: 1; min-width: 0; padding: 1.25rem 1.5rem 2rem; }
.gp-rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding: 1rem 1.5rem 1.25rem;
  border-top: 1px solid var(--gp-linha);
  font-size: .7rem;
  color: var(--gp-apagado);
}
.gp-rodape a { color: inherit; text-decoration: none; }
.gp-rodape a:hover { color: var(--gp-verde-forte); }

/* Celular e tablet: o menu vira gaveta. */
@media (max-width: 1023px) {
  .gp-casca { grid-template-columns: minmax(0, 1fr); }
  .gp-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 16.5rem;
    transform: translateX(-102%);
    transition: transform .28s ease, box-shadow .28s ease;
  }
  body.gp-menu-aberto .gp-menu { transform: none; box-shadow: 24px 0 60px rgba(0, 0, 0, .35); }
  .gp-veu {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: block;
    background: rgba(7, 9, 13, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s;
  }
  body.gp-menu-aberto .gp-veu { opacity: 1; pointer-events: auto; }
  body.gp-menu-aberto { overflow: hidden; }
  .gp-hamburguer { display: grid; }
  .gp-topo { padding: 0 1rem; gap: .6rem; }
  .gp-topo__logo { display: block; height: 2rem; width: auto; }
  .gp-busca { width: auto; flex: 1; }
  body.adm-ficha .gp-topo__logo { display: none; }
  .gp-miolo { padding: 1rem 1rem 1.5rem; }
  .gp-rodape { padding: .9rem 1rem 1.1rem; }
}
@media (max-width: 520px) {
  .gp-topo__logo { display: none; }
}

/* ====================================================================
   PAINEL — conteúdo
   ==================================================================== */
.gp-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.gp-cabeca h1 { margin: 0; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; }
.gp-cabeca__data { font-size: .8rem; color: var(--gp-apagado); }
.gp-cabeca__acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }

.gp-avisos:empty { display: none; }
.gp-avisos { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }

.gp-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1rem;
}
.gp-kpi {
  min-width: 0;
  padding: .85rem 1rem .9rem;
  border: 1px solid var(--gp-linha);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.gp-kpi__rotulo { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .74rem; font-weight: 600; color: var(--gp-apagado); }
.gp-kpi__icone { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: .5rem; background: var(--gp-verde-fundo); color: var(--gp-verde-forte); }
.gp-kpi__icone svg { width: .9rem; height: .9rem; }
.gp-kpi__valor { margin: .45rem 0 .2rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-kpi__valor.e-aviso { color: var(--gp-ambar); }
.gp-kpi__valor.e-perigo { color: var(--gp-rubro); }
.gp-kpi__nota { margin: 0; font-size: .74rem; line-height: 1.4; color: var(--gp-apagado); }
.gp-barra { display: flex; height: .4rem; margin-top: .5rem; overflow: hidden; border-radius: 999px; background: #eef1f6; }
.gp-barra i { display: block; height: 100%; }
@media (max-width: 1279px) { .gp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .gp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .gp-kpi { padding: .75rem .8rem; }
  .gp-kpi__valor { font-size: 1.2rem; }
  .gp-kpi:last-child { grid-column: 1 / -1; }
}

.gp-grade { display: grid; gap: 1rem; margin-top: 1rem; align-items: start; }
@media (min-width: 1400px) { .gp-grade { grid-template-columns: minmax(0, 1fr) 18rem; } }
/* Abaixo de 1400px a coluna da direita desce e vira duas, lado a lado:
   a tabela de assinantes fica com a largura toda e não rola de lado. */
@media (min-width: 768px) and (max-width: 1399px) {
  .gp-grade:not(.gp-grade--meio) > .gp-coluna { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.gp-grade--meio { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .gp-grade--meio { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.gp-coluna { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.gp-quadro {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--gp-linha);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.gp-quadro--largo { padding: 1.25rem 1.35rem; }
.gp-quadro__topo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .75rem; }
.gp-quadro__titulo { margin: 0; font-size: .98rem; font-weight: 700; }
.gp-quadro__nota { font-size: .76rem; color: var(--gp-apagado); }
.gp-quadro__texto { margin: -.35rem 0 1rem; max-width: 44rem; font-size: .84rem; line-height: 1.55; color: var(--gp-apagado); }
.gp-quadro__direita { margin-left: auto; display: flex; flex-wrap: wrap; gap: .4rem; }

.gp-pendencias {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(16, 185, 129, .35);
  border-radius: 1rem;
  background: linear-gradient(100deg, #e9f9f1, #fff 70%);
}
.gp-pendencias__titulo { margin: 0 0 .75rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gp-verde-forte); }
.gp-pendencia { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .7rem .85rem; border: 1px solid #cdeedd; border-radius: .8rem; background: #fff; }
.gp-pendencia + .gp-pendencia { margin-top: .5rem; }
.gp-pendencia__quem { flex: 1; min-width: 14rem; }
.gp-pendencia__quem p { margin: 0; font-weight: 600; }

/* Filtro em pílulas (Todos, Em dia...) */
.gp-filtro { display: flex; flex-wrap: wrap; gap: .2rem; padding: .2rem; border-radius: .7rem; background: #f1f4f8; }
.gp-filtro button {
  padding: .3rem .65rem;
  border: 0;
  border-radius: .5rem;
  background: none;
  color: var(--gp-apagado);
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.gp-filtro button b { margin-left: .2rem; opacity: .7; }
.gp-filtro button:hover { color: var(--gp-tinta); }
.gp-filtro button.e-ativo { background: #fff; color: var(--gp-tinta); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }

/* Tabela: cabeçalho em maiúsculas pequenas, linhas suaves. Rola por dentro. */
.gp-tabela-caixa { position: relative; overflow-x: auto; border: 1px solid #edf0f5; border-radius: .8rem; }
.gp-tabela { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: .86rem; }
.gp-tabela--curta { min-width: 24rem; }
.gp-tabela th {
  padding: .6rem .75rem;
  border-bottom: 1px solid #eceef3;
  background: #f8f9fc;
  color: #636a7d;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.gp-tabela td { padding: .7rem .75rem; border-bottom: 1px solid #f0f2f6; vertical-align: top; }
.gp-tabela tbody tr:last-child td { border-bottom: 0; }
.gp-tabela tbody tr { transition: background-color .15s; }
.gp-tabela tbody tr:hover td { background: #f3fbf7; }
.gp-tabela .gp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-tabela__vazio td { padding: 1.5rem; text-align: center; color: var(--gp-apagado); }

.gp-cliente { display: flex; gap: .65rem; align-items: flex-start; min-width: 0; }
.gp-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .65rem;
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
}
.gp-cliente__nome { display: block; font-weight: 600; }
.gp-detalhe { display: block; margin-top: .2rem; font-size: .76rem; line-height: 1.4; color: var(--gp-apagado); overflow-wrap: anywhere; }
.gp-detalhe--largo { max-width: 22rem; }
.gp-abrir {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .7rem;
  border: 1px solid var(--gp-linha);
  border-radius: 999px;
  color: var(--gp-tinta);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s, color .2s, background-color .2s;
}
.gp-abrir:hover { border-color: rgba(8, 135, 93, .45); background: var(--gp-verde-fundo); color: var(--gp-verde-forte); }

/* Chips de situação, com o pontinho da cor. */
.gp-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  align-self: flex-start;
  padding: .25rem .65rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
}
.gp-chip::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.gp-chip--ok { background: var(--gp-verde-fundo); color: #15803d; }
.gp-chip--aviso { background: var(--gp-ambar-fundo); color: var(--gp-ambar); }
.gp-chip--perigo { background: var(--gp-rubro-fundo); color: var(--gp-rubro); }
.gp-chip--neutro { background: #eef0f5; color: #475569; }
.gp-chip--azul { background: var(--gp-azul-fundo); color: var(--gp-azul); }

/* Listas da coluna da direita (vencimentos, atividade, pagamentos). */
.gp-lista { display: flex; flex-direction: column; }
.gp-lista__item { display: flex; gap: .65rem; padding: .55rem 0; border-top: 1px solid #f0f2f7; text-decoration: none; color: inherit; }
.gp-lista__item:first-child { border-top: 0; padding-top: 0; }
a.gp-lista__item:hover b { color: var(--gp-verde-forte); }
.gp-lista__data { flex: none; width: 2.6rem; padding: .25rem 0; border-radius: .6rem; background: #f1f4f8; text-align: center; }
.gp-lista__data b { display: block; font-size: .95rem; line-height: 1.2; }
.gp-lista__data small { font-size: .6rem; text-transform: uppercase; color: var(--gp-apagado); }
.gp-lista__data.e-aviso { background: var(--gp-ambar-fundo); color: var(--gp-ambar); }
.gp-lista__icone { display: grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; border-radius: .55rem; background: var(--gp-verde-fundo); color: var(--gp-verde-forte); }
.gp-lista__icone svg { width: .85rem; height: .85rem; }
.gp-lista__texto { min-width: 0; flex: 1; font-size: .8rem; line-height: 1.4; }
.gp-lista__texto b { display: block; font-weight: 600; }
.gp-lista__texto small { display: block; color: var(--gp-apagado); overflow-wrap: anywhere; }
.gp-vazio { margin: 0; padding: .5rem 0; font-size: .82rem; color: var(--gp-apagado); }
.gp-rola { max-height: 18rem; overflow-y: auto; overscroll-behavior: contain; }

/* Formulários claros */
.gp-campos { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 639px) { .gp-campos { grid-template-columns: minmax(0, 1fr); } }
.gp-campo { display: block; min-width: 0; }
.gp-rotulo { display: block; margin-bottom: .3rem; font-size: .74rem; font-weight: 700; color: #4d5568; }
.gp-entrada {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid #cfd5e2;
  border-radius: .65rem;
  background: #fff;
  color: var(--gp-tinta);
  font-size: .9rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.gp-entrada:focus { border-color: var(--gp-verde-forte); box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); }
textarea.gp-entrada { resize: vertical; line-height: 1.55; }
.gp-campo__aviso { display: block; margin-top: .3rem; font-size: .74rem; color: var(--gp-ambar); }
.gp-avancado { margin-top: .8rem; font-size: .84rem; color: var(--gp-apagado); }
.gp-avancado summary { cursor: pointer; font-weight: 600; }
.gp-avancado[open] summary { margin-bottom: .8rem; }

.gp-aviso { margin-top: .75rem; padding: .65rem .85rem; border: 1px solid; border-radius: .7rem; font-size: .84rem; line-height: 1.5; }
.gp-aviso--ok { border-color: #bfe8d3; background: #effaf4; color: #116c44; }
.gp-aviso--erro { border-color: #f4c7c7; background: #fff3f3; color: var(--gp-rubro); }
.gp-avisos .gp-aviso { margin-top: 0; }

/* ====================================================================
   FICHA DO CLIENTE
   ==================================================================== */
.gp-corpo .ficha-topo {
  border-color: color-mix(in oklab, var(--acento) 35%, var(--gp-linha));
  background: linear-gradient(100deg, color-mix(in oklab, var(--acento) 12%, #fff), #fff 62%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.gp-corpo .ficha-topo__nome { color: var(--gp-tinta); font-size: 1.6rem; }
.gp-corpo .ficha-topo__contato { color: var(--gp-apagado); }
.gp-corpo .ficha-topo { --acento: #2563eb; }
.gp-corpo .ficha-topo.e-ok { --acento: #059669; }
.gp-corpo .ficha-topo.e-aviso { --acento: #d97706; }
.gp-corpo .ficha-topo.e-perigo { --acento: #dc2626; }
.gp-corpo .ficha-topo__selo { color: color-mix(in oklab, var(--acento) 80%, #000); }
.gp-corpo .etiqueta-cliente { --acento: #2563eb; border-color: color-mix(in oklab, var(--acento) 30%, var(--gp-linha)); }
.gp-corpo .etiqueta-cliente.e-ok { --acento: #059669; }
.gp-corpo .etiqueta-cliente.e-aviso { --acento: #d97706; }
.gp-corpo .etiqueta-cliente.e-perigo { --acento: #dc2626; }

.gp-ficha-grade { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 1024px) { .gp-ficha-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.gp-sobretitulo { margin: 0 0 .65rem; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gp-apagado); }
.gp-sobretitulo + * { margin-top: 0; }
.gp-dados { display: flex; flex-direction: column; gap: .5rem; margin: 0; font-size: .88rem; }
.gp-dados > div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid #f0f2f6; }
.gp-dados dt { color: var(--gp-apagado); }
.gp-dados dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.gp-dados dd.e-aviso { color: var(--gp-ambar); }
.gp-botoes { display: flex; flex-wrap: wrap; gap: .45rem; }
.gp-subform { margin-top: 1rem; padding: 1rem; border: 1px solid var(--gp-linha); border-radius: .85rem; background: #f8fafc; }
.gp-subform--perigo { border-color: #f4c7c7; background: #fff6f6; }
.gp-subform__titulo { margin: 0; font-weight: 700; font-size: .92rem; }
.gp-subform__texto { margin: .25rem 0 .8rem; font-size: .82rem; line-height: 1.5; color: var(--gp-apagado); }
.gp-previsao { margin: .5rem 0 0; font-size: .82rem; line-height: 1.5; color: #116c44; }
.gp-previsao.e-aviso { color: var(--gp-ambar); }
.gp-pagamento { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid #f0f2f6; font-size: .86rem; }
.gp-registro { margin: 0; padding: .45rem 0; border-bottom: 1px solid #f3f4f8; font-size: .8rem; line-height: 1.5; color: #475569; }

/* A ficha cabe na tela (≥1024x600): cada coluna rola por dentro. */
@media (min-width: 1024px) and (min-height: 600px) {
  body.adm-ficha .gp-area { height: 100dvh; min-height: 0; }
  body.adm-ficha .gp-miolo { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  body.adm-ficha #vFicha { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  body.adm-ficha .gp-ficha-grade { flex: 1 1 auto; min-height: 0; }
  body.adm-ficha .adm-rola { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  body.adm-ficha .gp-rodape { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gp-botao, .gp-menu, .gp-veu { transition: none; }
}

/* Só para leitor de tela. */
.gp-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gp-conta__sessao { display: block; font-size: .64rem; color: rgba(255, 255, 255, .45); }