:root {
  --fundo: #07080a;
  --painel: #101317;
  --campo: #0b0d10;
  --cartao: #0c0f13;
  --linha: rgba(255, 255, 255, 0.08);
  --azul: #0a7eae;
  --azul-vivo: #1496d0;
  --verde: #8ebe45;
  --verde-vivo: #d7f5a4;
  --texto: #f4f7f8;
  --suave: #9aa3ab;
  --perigo: #ff8d8d;
  --sombra: 0 24px 50px rgba(0, 0, 0, 0.35);
  --fonte: Inter, "Segoe UI", sans-serif;
  --titulo: Montserrat, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  background:
    radial-gradient(1100px 480px at 18% -12%, rgba(70, 130, 55, 0.2), transparent 55%),
    #07110d;
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.45;
}

button, input, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

button:disabled { opacity: 0.35; cursor: default; }

img { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--titulo);
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); }

h2 { margin: 0; font-size: 16px; }

.pagina {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: calc(var(--altura-topo, 130px) + 22px) 18px 48px;
}

.so-mobile { display: none; }

.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 74px;
  margin: 0;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(150, 190, 110, 0.16);
  background: rgba(7, 14, 11, 0.96);
  backdrop-filter: blur(14px);
}

.marca-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.marca-traco {
  width: 4px;
  height: 36px;
  border-radius: 4px;
  background: linear-gradient(180deg, #b6e86a, #3f9a45);
}

.marca-topo img {
  height: 36px;
  width: auto;
}

.marca-olho,
.marca-nome { margin: 0; }

.marca-olho {
  color: #d7e7cf;
  font-size: 13px;
  line-height: 1.2;
}

.marca-nome {
  color: #b6e86a;
  font-family: var(--titulo);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.topo-usuario {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.topo-quem {
  text-align: right;
}

.topo-quem strong,
.topo-quem span { display: block; }

.topo-quem strong {
  font-size: 14px;
  line-height: 1.2;
}

.topo-quem span {
  color: #8fbf78;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.btn-sair {
  min-height: 36px;
  padding: 6px 16px;
  border: 1px solid rgba(182, 232, 106, 0.7);
  border-radius: 999px;
  background: transparent;
  color: #d7f5a4;
  font-weight: 700;
}

body.na-entrada { background: #070b10; }

body.na-entrada .pagina {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.na-entrada .topo { display: none; }

.login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(360px, 1fr);
}

.login-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 48px 32px;
  background:
    radial-gradient(380px 260px at 50% 46%, rgba(10, 126, 174, 0.28), transparent 68%),
    radial-gradient(280px 180px at 58% 58%, rgba(142, 190, 69, 0.16), transparent 70%),
    #000;
}

.login-marca img {
  width: min(220px, 68%);
  height: auto;
}

.login-marca-texto {
  margin: 0;
  color: #d7e7cf;
  font-family: var(--titulo);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.login-lado {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 28px;
  background: #070b10;
}

.login-cartao {
  width: min(420px, 100%);
  margin: 0;
  padding: 28px 26px 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: #10161c;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.login-selo {
  margin: 0 0 12px;
  color: #8b98a3;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.login h2 {
  margin: 0 0 8px;
  font-size: clamp(26px, 3vw, 32px);
}

.login .ajuda {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.45;
}

.login .campo span {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 600;
  color: #d7dee4;
}

.login input {
  background: #0b1016;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  min-height: 48px;
}

.campo-senha { position: relative; display: block; }

.campo-senha input { padding-right: 48px; }

.ver-pin {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #9aa3ab;
}

.ver-pin svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ver-pin[aria-pressed="true"] { color: var(--verde-vivo); }

.pin-gerado {
  margin: 16px 0 0;
  padding: 16px;
  border-radius: 14px;
  background: rgba(142, 190, 69, 0.1);
  border: 1px solid rgba(142, 190, 69, 0.4);
}

.pin-rotulo,
.pin-email,
#pin-numero,
.pin-gerado .ajuda { margin: 0; }

.pin-rotulo {
  color: var(--suave);
  font-size: 13px;
}

.pin-email {
  margin-top: 4px;
  color: var(--texto);
  font-weight: 700;
  word-break: break-all;
}

#pin-numero {
  margin: 8px 0 4px;
  font-family: Consolas, "Segoe UI", monospace;
  font-size: 32px;
  letter-spacing: 0.2em;
  color: var(--verde-vivo);
}

.pin-gerado .btn-sec {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  flex: 0 0 auto;
  margin-top: 12px;
  text-decoration: none;
}

.login .btn-whats {
  width: 100%;
  margin-top: 6px;
  border-radius: 10px;
  min-height: 48px;
  background: var(--verde);
  color: #14210a;
}

.login .aviso {
  margin: 18px 0 0;
}

body.com-menu,
body.com-menu.menu-fechado {
  --menu: 0px;
}

body.com-menu .pagina {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.diretoria { min-width: 0; }

.menu-lateral {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 45;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: max-content;
  max-width: min(560px, calc(100% - 520px));
  height: var(--altura-topo, 74px);
  margin: 0;
  padding: 0 8px;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  overflow-x: auto;
}

.menu-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
}

.item-menu[hidden],
.modulo[hidden] {
  display: none;
}

.item-menu {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: auto;
  min-height: 58px;
  padding: 6px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #8fbf78;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.item-menu svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.item-menu.ativo,
.item-menu:hover {
  background: rgba(142, 190, 69, 0.1);
  color: #d7f5a4;
}

.item-menu.ativo { color: #d7f5a4; }

.recolher { display: none; }

.recolher svg { transition: transform 0.2s ease; }

body.menu-fechado .item-menu {
  width: auto;
  margin: 0;
  padding: 6px 12px;
}

body.menu-fechado .item-menu span { display: block; }

.menu-velo { display: none; }

.painel-diretoria,
.painel-venda {
  margin-left: var(--menu, 248px);
  min-width: 0;
  min-height: calc(100dvh - var(--altura-topo, 130px));
  padding: 22px 22px 40px;
  transition: margin-left 0.2s ease;
}

body.na-vendedor .layout {
  width: 100%;
  grid-template-columns: minmax(340px, 0.92fr) minmax(320px, 0.78fr);
}

.links-cabeca,
.link-gerado {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 128px;
  align-items: center;
  gap: 8px 16px;
}

.links-cabeca {
  padding: 0 0 8px;
  color: var(--suave);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--linha);
}

.link-gerado {
  padding: 14px 0;
  border-bottom: 1px solid var(--linha);
}

.link-gerado:last-child { border-bottom: 0; }

.link-num {
  font-family: var(--titulo);
  font-size: 22px;
}

.link-endereco { min-width: 0; }

.link-cliente {
  margin: 0 0 2px;
  font-weight: 700;
}

.link-url {
  display: block;
  color: var(--azul-vivo);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.link-gerado .btn-sec {
  width: auto;
  min-height: 36px;
  margin-top: 8px;
  padding: 6px 12px;
}

.link-tempo {
  justify-self: end;
  font-family: var(--titulo);
  font-size: 20px;
  text-align: right;
}

.link-tempo.curto { color: #f0c36a; }

.link-tempo.encerrado {
  color: var(--suave);
  font-size: 14px;
  font-family: var(--fonte);
  font-weight: 700;
}

#painel-links,
#painel-correcoes { width: 100%; }

#painel-links .equipe-topo { flex-wrap: wrap; }

.resumo-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.coluna-previa {
  padding: 18px;
  border: 1px solid rgba(150, 190, 110, 0.18);
  border-radius: 20px;
  background: #0c1612;
}

.grade-links {
  display: grid;
  gap: 12px;
}

.cartao-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 22px;
  min-width: 0;
  padding: 12px 18px 16px;
  border: 1px solid rgba(150, 190, 110, 0.18);
  border-radius: 18px;
  background: #0c1612;
}

.cartao-link .link-dados {
  display: grid;
  grid-template-columns: auto minmax(140px, 1.1fr) auto minmax(0, 1.6fr);
  align-items: start;
  gap: 8px 24px;
  min-width: 0;
}

.cartao-link.com-vendedor .link-dados {
  grid-template-columns: auto minmax(110px, 0.9fr) minmax(110px, 0.9fr) auto minmax(0, 1.3fr);
}

.cartao-link .link-campo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.cartao-link .link-campo > span {
  color: var(--suave);
  font-family: var(--titulo);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.cartao-link .link-campo strong,
.cartao-link .link-url {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cartao-link .link-dados,
.cartao-link .link-campo,
.cartao-link .link-endereco {
  min-width: 0;
  overflow: hidden;
}

.cartao-link .link-url {
  display: block;
  margin: 0;
  color: var(--texto);
  font-weight: 600;
}

.cartao-link .link-tempo {
  justify-self: start;
  font-family: var(--fonte);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
}

#lista-links .cartao-link .acoes-pessoa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 292px;
  max-width: 100%;
  margin: 0;
  justify-content: stretch;
}

#lista-links .cartao-link .acoes-pessoa .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
}

#lista-links .cartao-link .acoes-pessoa .btn-sec {
  background: transparent;
  color: var(--texto);
  border: 1px solid rgba(20, 150, 208, 0.5);
}

#lista-links .cartao-link .acoes-pessoa .btn-correcao { grid-column: 1 / -1; }

#lista-links .btn-aguardando {
  background: transparent;
  color: #d7f5a4;
  border: 1px solid rgba(142, 190, 69, 0.55);
  cursor: default;
}

#lista-links .btn-aprovado {
  background: linear-gradient(180deg, #3ee484, #1ea955);
  color: #06210f;
  border: 0;
}

#lista-links .btn-recusado {
  background: rgba(255, 70, 70, 0.12);
  color: #ff5c5c;
  border: 1px solid #ff5c5c;
}

#lista-correcoes .cartao-correcao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 8px 22px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid rgba(150, 190, 110, 0.18);
  border-radius: 18px;
  background: #0c1612;
}

#lista-correcoes .correcao-texto {
  display: grid;
  gap: 6px;
  min-width: 0;
}

#lista-correcoes header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
}

#lista-correcoes header strong {
  min-width: 0;
  font-size: 16px;
}

#lista-correcoes .estado-link {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(142, 190, 69, 0.14);
  white-space: nowrap;
}

#lista-correcoes .estado-link.recusada {
  color: #ff5c5c;
  background: rgba(255, 70, 70, 0.14);
}

#lista-correcoes .meta,
#lista-correcoes .motivo-pedido,
#lista-correcoes .link-url {
  margin: 0;
  min-width: 0;
}

#lista-correcoes .motivo-pedido {
  color: var(--suave);
  line-height: 1.4;
}

#lista-correcoes .motivo-pedido.alerta { color: #ff5c5c; }

#lista-correcoes .link-url {
  color: var(--suave);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#lista-correcoes .acoes-pessoa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 292px;
  margin: 0;
  justify-content: stretch;
}

#lista-correcoes .acoes-pessoa .btn-largo { grid-column: 1 / -1; }

#lista-correcoes .acoes-pessoa .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px;
  white-space: nowrap;
}

#lista-correcoes .btn-recusar {
  background: rgba(255, 70, 70, 0.12);
  color: #ff5c5c;
  border: 1px solid #ff5c5c;
}

.avisos {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  width: min(340px, calc(100vw - 28px));
  pointer-events: none;
}

.aviso-toast {
  display: grid;
  grid-template-columns: 3px 1fr;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 14px 16px 14px 0;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(142, 190, 69, 0.2), rgba(8, 12, 10, 0.94) 32%);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.46);
  color: #f4f7f2;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  animation: aviso-sobe 0.35s ease;
}

.aviso-toast i {
  background: #8ebe45;
  box-shadow: 0 0 12px rgba(142, 190, 69, 0.75);
}

.aviso-toast strong {
  display: block;
  font-size: 14px;
}

.aviso-toast small {
  display: block;
  margin-top: 3px;
  color: #b7c4bc;
  font-size: 13px;
  line-height: 1.35;
}

.aviso-toast.saindo {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

@keyframes aviso-sobe {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.selo-correcao {
  margin: 0;
  color: #d7f5a4;
  font-size: 13px;
  font-weight: 700;
}

.selo-correcao.recusada { color: #f0b4a0; }

.selo-menu {
  display: inline-block;
  min-width: 1.3em;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: #8ebe45;
  color: #07110d;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

.dialogo {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 22px;
  border: 1px solid rgba(142, 190, 69, 0.28);
  border-radius: 16px;
  background: #0c1612;
  color: #f4f7f2;
}

.dialogo::backdrop { background: rgba(0, 0, 0, 0.62); }

.dialogo-largo { width: min(760px, calc(100vw - 32px)); }

.dialogo h2 { margin: 0 0 8px; }

.campos-correcao {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.campos-correcao legend { padding: 0 6px; }

.campos-correcao label { display: flex; gap: 8px; align-items: center; }

.bloco-correcao {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.fotos-correcao { display: flex; flex-wrap: wrap; gap: 8px; }

.fotos-correcao figure {
  position: relative;
  margin: 0;
}

.fotos-correcao img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
}

.fotos-correcao button {
  position: absolute;
  top: 2px;
  right: 2px;
  border: 0;
  border-radius: 6px;
  background: #07080a;
  color: #fff;
  cursor: pointer;
}

.dialogo .acoes { margin-top: 16px; }

.cartao-link.encerrado { opacity: 0.72; }

.estado-link {
  flex: 0 0 auto;
  color: #d7f5a4;
  font-size: 12px;
  font-weight: 700;
}

.cartao-link.encerrado .estado-link { color: var(--suave); }

.painel-dir { width: min(1180px, 100%); }

#painel-relatorios { width: 100%; }

.painel-dir h2 { font-size: 26px; margin-bottom: 8px; }

.central { width: 100%; }

@media (min-width: 1101px) {
  html:has(body.na-inicio),
  body.na-inicio { overflow: hidden; }

  body.na-inicio .pagina {
    height: 100dvh;
    padding-top: var(--altura-topo, 74px);
    overflow: hidden;
  }

  body.na-inicio .diretoria {
    height: 100%;
    min-height: 0;
  }

  body.na-inicio .painel-diretoria {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    min-height: 0;
    padding: 16px 22px;
    overflow: hidden;
  }

  body.na-inicio .painel-diretoria > .aviso {
    flex: none;
    margin: 0;
  }

  body.na-inicio #painel-inicio {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
  }

  body.na-inicio .central-grade {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
  }

  body.na-inicio .painel-favoritos,
  body.na-inicio .operacao {
    height: auto;
    min-height: 0;
  }
}

.central-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: stretch;
  min-height: calc(100dvh - var(--altura-topo, 74px) - 44px);
}

.painel-favoritos {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 22px;
  border: 1px solid rgba(150, 190, 110, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(10, 22, 16, 0.2), rgba(6, 12, 9, 0.72)),
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(130, 170, 90, 0.08) 32px),
    repeating-linear-gradient(90deg, transparent, transparent 31px, rgba(130, 170, 90, 0.08) 32px),
    #0c1813;
}

.painel-favoritos::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(520px, 70%);
  height: 260px;
  transform: translate(-50%, -50%);
  background: url("../assets/logo-g5.png?v=2") center / contain no-repeat;
  opacity: 0.12;
  pointer-events: none;
}

.bloco-cabeca {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.estrela {
  color: #d7f5a4;
  font-size: 18px;
  line-height: 1;
}

.bloco-cabeca h2 {
  margin: 0;
  font-size: 28px;
}

.bloco-cabeca p,
.favoritos-vazio {
  margin: 4px 0 0;
  color: #b7c3b4;
}

.favoritos-vazio {
  position: relative;
  z-index: 1;
  max-width: 36ch;
  margin-top: auto;
  margin-bottom: 22px;
}

.modulos {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.modulo {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 148px;
  height: 118px;
  padding: 16px;
  border: 0;
  border-radius: 16px;
  color: #f4f7f2;
  text-align: left;
  font-weight: 700;
}

.modulo svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.modulo-azul { background: linear-gradient(180deg, #2f6ea8, #1a4d86); }

.modulo-verde { background: linear-gradient(180deg, #3d8f3a, #246b2c); }

.operacao {
  padding: 16px 16px 6px;
  border: 1px solid rgba(150, 190, 110, 0.18);
  border-radius: 18px;
  background: #0c1612;
}

.operacao-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.operacao-topo strong {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.operacao-topo time {
  color: #8fbf78;
  font-size: 13px;
}

.op-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.op-linha span {
  display: block;
  font-weight: 700;
}

.op-linha small {
  display: block;
  margin-top: 3px;
  color: var(--suave);
}

.op-linha strong {
  color: #d7f5a4;
  font-family: var(--titulo);
  font-size: 28px;
  line-height: 1;
}

#painel-cadastro { width: 100%; }

.resumo-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 8px 0 18px;
}

.resumo-card {
  padding: 16px 18px;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--painel);
}

.resumo-card span {
  color: var(--suave);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.resumo-card strong {
  display: block;
  margin-top: 8px;
  font-family: var(--titulo);
  font-size: 34px;
  line-height: 1;
}

.atalhos-dir {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.atalhos-dir .btn { width: auto; flex: 0 0 auto; }

.form-usuario { max-width: none; }

.cadastro-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.niveis-acesso {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.niveis-acesso.niveis-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.niveis-acesso.so-vendedor { grid-template-columns: 1fr; }

.nivel-opcao {
  min-height: 72px;
  padding: 12px;
  border: 1px solid rgba(150, 190, 110, 0.22);
  border-radius: 14px;
  background: transparent;
  color: #d7e7cf;
  text-align: left;
  font-weight: 700;
}

.nivel-opcao small {
  display: block;
  margin-top: 4px;
  color: #b7c3b4;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}

.nivel-opcao.ativo[data-nivel="vendedor"] {
  border-color: transparent;
  background: linear-gradient(180deg, #3d8f3a, #246b2c);
  color: #f4f7f2;
}

.nivel-opcao.ativo[data-nivel="gestor"],
.nivel-opcao.ativo[data-segmento] {
  border-color: transparent;
  background: linear-gradient(180deg, #8a6a2f, #5c4518);
  color: #f4f7f2;
}

.nivel-opcao.ativo[data-nivel="diretoria"] {
  border-color: transparent;
  background: linear-gradient(180deg, #2f6ea8, #1a4d86);
  color: #f4f7f2;
}

.nivel-opcao.ativo small { color: rgba(255, 255, 255, 0.82); }

.cadastro-nota { min-height: 0; }

.campos-acesso {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.campos-acesso .campo-largo { grid-column: 1 / -1; }

.campos-acesso .campo {
  min-width: 0;
  margin-bottom: 0;
  padding: 14px 16px;
  border: 1px solid rgba(150, 190, 110, 0.18);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(18, 36, 26, 0.72), rgba(8, 16, 12, 0.94));
}

.campos-acesso input,
.campos-acesso select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.form-usuario {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.form-usuario .btn-whats { width: 100%; flex: none; margin-top: 14px; }

#pin-cpf { margin: 4px 0 0; color: var(--texto); }

#painel-relatorios #exportar-relatorio {
  width: auto;
  flex: 0 0 auto;
  align-self: center;
  min-height: 40px;
  padding: 8px 16px;
}

.resumo-relatorio,
.faixas-qualidade {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.resumo-relatorio {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 18px;
}

#painel-relatorios .resumo-analise {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

#painel-relatorios .resumo-analise article { padding: 18px 16px; }

#painel-relatorios .grade-relatorio {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  margin-bottom: 18px;
}

#painel-relatorios .bloco-relatorio { margin-bottom: 0; }

#painel-relatorios .grade-relatorio .lista-quais { grid-template-columns: 1fr 1fr; }

.cabeca-bloco {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.cabeca-bloco h3 { margin: 0; }

.cabeca-bloco .ajuda { margin: 4px 0 0; }

.btn-minimizar {
  flex: none;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(150, 190, 110, 0.35);
  border-radius: 999px;
  background: transparent;
  color: #d7f5a4;
  font-size: 12px;
  font-weight: 700;
}

.btn-minimizar:hover { background: rgba(142, 190, 69, 0.12); }

.bloco-relatorio.minimizado .corpo-bloco,
.bloco-relatorio.minimizado .cabeca-bloco .ajuda { display: none; }

.bloco-relatorio.minimizado .cabeca-bloco { margin-bottom: 0; }

.lista-quais {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.lista-quais article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(150, 190, 110, 0.18);
  border-radius: 14px;
}

.lista-quais span {
  color: var(--suave);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lista-quais strong {
  color: #d7f5a4;
  font-family: var(--titulo);
  font-size: 28px;
  line-height: 1;
}

.lista-quais article.zero strong { color: rgba(215, 245, 164, 0.35); }

.faixas-qualidade { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.resumo-relatorio article,
.faixas-qualidade article,
.bloco-relatorio {
  padding: 16px;
  border: 1px solid rgba(150, 190, 110, 0.18);
  border-radius: 18px;
  background: #0c1612;
}

.resumo-relatorio span,
.faixas-qualidade span {
  color: var(--suave);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.resumo-relatorio strong,
.faixas-qualidade strong {
  display: block;
  margin-top: 6px;
  color: #d7f5a4;
  font-family: var(--titulo);
  font-size: 28px;
  line-height: 1;
}

.faixas-qualidade small {
  display: block;
  margin-top: 4px;
  color: var(--suave);
}

.grade-relatorio {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}

.coluna-relatorio {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.coluna-relatorio .faixas-qualidade { grid-template-columns: 1fr 1fr; }

.bloco-relatorio h3 { margin: 0 0 14px; font-size: 16px; }

.cabeca-bloco h3 { margin: 0; }

#serie-relatorio .serie-linha {
  grid-template-columns: 108px minmax(0, 1fr) 28px;
  margin-bottom: 12px;
}

#serie-relatorio .serie-linha:last-child { margin-bottom: 0; }

.serie-linha {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.serie-linha span { color: var(--suave); font-size: 13px; }

.serie-linha.vazio .trilho {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.serie-linha.vazio span,
.serie-linha.vazio strong { color: rgba(154, 163, 171, 0.45); }

.bloco-taxa { margin-top: 14px; }

.bloco-taxa .faixas-qualidade { margin-bottom: 18px; }

#serie-correcao .serie-linha { grid-template-columns: 92px minmax(0, 1fr) 56px; }

.trilho {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.trilho i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #246b2c, #b6e86a);
}

.trilho i.p0 { width: 0%; }
.trilho i.p1 { width: 1%; }
.trilho i.p2 { width: 2%; }
.trilho i.p3 { width: 3%; }
.trilho i.p4 { width: 4%; }
.trilho i.p5 { width: 5%; }
.trilho i.p6 { width: 6%; }
.trilho i.p7 { width: 7%; }
.trilho i.p8 { width: 8%; }
.trilho i.p9 { width: 9%; }
.trilho i.p10 { width: 10%; }
.trilho i.p11 { width: 11%; }
.trilho i.p12 { width: 12%; }
.trilho i.p13 { width: 13%; }
.trilho i.p14 { width: 14%; }
.trilho i.p15 { width: 15%; }
.trilho i.p16 { width: 16%; }
.trilho i.p17 { width: 17%; }
.trilho i.p18 { width: 18%; }
.trilho i.p19 { width: 19%; }
.trilho i.p20 { width: 20%; }
.trilho i.p21 { width: 21%; }
.trilho i.p22 { width: 22%; }
.trilho i.p23 { width: 23%; }
.trilho i.p24 { width: 24%; }
.trilho i.p25 { width: 25%; }
.trilho i.p26 { width: 26%; }
.trilho i.p27 { width: 27%; }
.trilho i.p28 { width: 28%; }
.trilho i.p29 { width: 29%; }
.trilho i.p30 { width: 30%; }
.trilho i.p31 { width: 31%; }
.trilho i.p32 { width: 32%; }
.trilho i.p33 { width: 33%; }
.trilho i.p34 { width: 34%; }
.trilho i.p35 { width: 35%; }
.trilho i.p36 { width: 36%; }
.trilho i.p37 { width: 37%; }
.trilho i.p38 { width: 38%; }
.trilho i.p39 { width: 39%; }
.trilho i.p40 { width: 40%; }
.trilho i.p41 { width: 41%; }
.trilho i.p42 { width: 42%; }
.trilho i.p43 { width: 43%; }
.trilho i.p44 { width: 44%; }
.trilho i.p45 { width: 45%; }
.trilho i.p46 { width: 46%; }
.trilho i.p47 { width: 47%; }
.trilho i.p48 { width: 48%; }
.trilho i.p49 { width: 49%; }
.trilho i.p50 { width: 50%; }
.trilho i.p51 { width: 51%; }
.trilho i.p52 { width: 52%; }
.trilho i.p53 { width: 53%; }
.trilho i.p54 { width: 54%; }
.trilho i.p55 { width: 55%; }
.trilho i.p56 { width: 56%; }
.trilho i.p57 { width: 57%; }
.trilho i.p58 { width: 58%; }
.trilho i.p59 { width: 59%; }
.trilho i.p60 { width: 60%; }
.trilho i.p61 { width: 61%; }
.trilho i.p62 { width: 62%; }
.trilho i.p63 { width: 63%; }
.trilho i.p64 { width: 64%; }
.trilho i.p65 { width: 65%; }
.trilho i.p66 { width: 66%; }
.trilho i.p67 { width: 67%; }
.trilho i.p68 { width: 68%; }
.trilho i.p69 { width: 69%; }
.trilho i.p70 { width: 70%; }
.trilho i.p71 { width: 71%; }
.trilho i.p72 { width: 72%; }
.trilho i.p73 { width: 73%; }
.trilho i.p74 { width: 74%; }
.trilho i.p75 { width: 75%; }
.trilho i.p76 { width: 76%; }
.trilho i.p77 { width: 77%; }
.trilho i.p78 { width: 78%; }
.trilho i.p79 { width: 79%; }
.trilho i.p80 { width: 80%; }
.trilho i.p81 { width: 81%; }
.trilho i.p82 { width: 82%; }
.trilho i.p83 { width: 83%; }
.trilho i.p84 { width: 84%; }
.trilho i.p85 { width: 85%; }
.trilho i.p86 { width: 86%; }
.trilho i.p87 { width: 87%; }
.trilho i.p88 { width: 88%; }
.trilho i.p89 { width: 89%; }
.trilho i.p90 { width: 90%; }
.trilho i.p91 { width: 91%; }
.trilho i.p92 { width: 92%; }
.trilho i.p93 { width: 93%; }
.trilho i.p94 { width: 94%; }
.trilho i.p95 { width: 95%; }
.trilho i.p96 { width: 96%; }
.trilho i.p97 { width: 97%; }
.trilho i.p98 { width: 98%; }
.trilho i.p99 { width: 99%; }
.trilho i.p100 { width: 100%; }

#lista-quem { display: flex; flex-direction: column; gap: 12px; }

.ficha-responsavel {
  padding: 14px 16px;
  border: 1px solid rgba(150, 190, 110, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
}

.ficha-responsavel.minimizada .ficha-corpo { display: none; }

.ficha-responsavel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.ficha-lado {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.ficha-lado p {
  margin: 0;
  text-align: right;
}

.ficha-responsavel header strong { font-size: 16px; }

.origem-relatorio {
  margin: 4px 0 0;
  color: var(--suave);
  font-size: 13px;
}

.ficha-responsavel header > p {
  margin: 0;
  text-align: right;
}

.ficha-responsavel header p span {
  display: block;
  color: var(--suave);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ficha-responsavel header p strong {
  color: #d7f5a4;
  font-family: var(--titulo);
  font-size: 22px;
  line-height: 1;
}

.ficha-responsavel .trilho { margin: 10px 0 12px; }

.metricas-pessoa {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.metricas-pessoa div {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.metricas-pessoa span {
  display: block;
  color: var(--suave);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.metricas-pessoa strong {
  display: block;
  margin-top: 4px;
  font-family: var(--titulo);
  font-size: 20px;
  line-height: 1.1;
}

.tipos-pessoa {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
}

.tipos-pessoa span {
  padding: 4px 8px;
  border: 1px solid rgba(150, 190, 110, 0.28);
  border-radius: 999px;
  color: #d7f5a4;
  font-size: 12px;
}

.equipe .btn-whats {
  background: var(--verde);
  color: #14210a;
}

#painel-equipe { width: 100%; }

.equipe-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.equipe-topo h2 { margin: 0; }

.equipe-topo .ajuda { margin: 6px 0 0; }

.busca-equipe { position: relative; }

.busca-equipe span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.busca-equipe input {
  width: min(280px, 70vw);
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(150, 190, 110, 0.28);
  border-radius: 999px;
  background: #0c1612;
}

.equipe-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.filtros-equipe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
}

.visoes-equipe {
  display: flex;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid rgba(150, 190, 110, 0.25);
  border-radius: 999px;
  background: #0c1612;
}

.visao {
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #b7c3b4;
  font-weight: 700;
}

.visao.ativo {
  background: rgba(142, 190, 69, 0.2);
  color: #d7f5a4;
}

.filtro {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(150, 190, 110, 0.25);
  border-radius: 999px;
  background: transparent;
  color: #b7c3b4;
  font-weight: 700;
}

.filtro small {
  margin-left: 6px;
  color: #d7f5a4;
}

.filtro.ativo {
  border-color: transparent;
  background: rgba(142, 190, 69, 0.18);
  color: #d7f5a4;
}

.grade-equipe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 14px;
}

.equipe-vazia {
  margin: 8px 0 0;
  color: var(--suave);
}

.cartao-pessoa {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 214px;
  padding: 16px 16px 14px 18px;
  border: 1px solid rgba(150, 190, 110, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(18, 36, 26, 0.72), rgba(8, 16, 12, 0.94));
}

.cartao-pessoa.diretoria { box-shadow: inset 4px 0 0 #2f6ea8; }

.cartao-pessoa.gestor { box-shadow: inset 4px 0 0 #8a6a2f; }

.cartao-pessoa.vendedor { box-shadow: inset 4px 0 0 #3d8f3a; }

.cartao-pessoa.inativa { opacity: 0.62; }

.cartao-cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-family: var(--titulo);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.cartao-pessoa.diretoria .avatar { background: #1a4d86; }

.cartao-pessoa.gestor .avatar { background: #5c4518; }

.cartao-pessoa.vendedor .avatar { background: #246b2c; }

.cartao-cabeca strong {
  display: block;
  font-family: var(--titulo);
  font-size: 16px;
}

.cartao-nome .selos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.cartao-pessoa .selo-nivel { margin: 0; }

.selo-teste {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--suave);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.estado-acesso {
  margin-left: auto;
  color: #d7f5a4;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.estado-acesso::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #8ebe45;
}

.cartao-pessoa.inativa .estado-acesso { color: #f0c36a; }

.cartao-pessoa.inativa .estado-acesso::before { background: #f0c36a; }

.cartao-pessoa .email,
.cartao-pessoa .meta { margin: 0; }

.cartao-pessoa footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cartao-meio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cartao-meio .troca-segmento { margin-left: auto; }

.cartao-meio .links-num {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  text-align: left;
  font-size: 20px;
}

.cartao-meio .links-num small {
  display: inline;
  margin-top: 0;
}

.grade-equipe:not(.lateral) .cartao-cabeca { align-items: flex-start; }

.grade-equipe:not(.lateral) .cartao-nome {
  flex: 1;
  min-width: 0;
}

.grade-equipe:not(.lateral) .cartao-nome strong {
  line-height: 1.25;
}

.grade-equipe:not(.lateral) .email,
.grade-equipe:not(.lateral) .meta {
  color: var(--suave);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.grade-equipe:not(.lateral) .email { color: var(--texto); }

.email-editar {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  text-underline-offset: 3px;
}

.email-editar.vazio { color: var(--suave); text-decoration: none; }

.grade-equipe:not(.lateral) .acoes-pessoa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin-left: 0;
}

.grade-equipe:not(.lateral) .acoes-pessoa:empty { display: none; }

.grade-equipe:not(.lateral) .cartao-pessoa.em-alta .links-num::after {
  display: inline;
  margin: 0;
}

.acoes-pessoa {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.cartao-pessoa footer .btn-sec {
  flex: 0 0 auto;
  width: 100%;
  min-height: 36px;
  margin-left: 0;
  padding: 6px 14px;
}

.cartao-pessoa.em-alta .links-num::after {
  content: "★ mais links";
  display: block;
  margin-top: 4px;
  color: #d7f5a4;
  font-family: var(--fonte);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.grade-equipe.lateral {
  display: grid;
  grid-template-columns: 66px minmax(160px, 1.2fr) minmax(190px, 1.5fr) 132px 70px 88px 168px 202px;
  column-gap: 16px;
  row-gap: 8px;
  align-items: center;
}

.grade-equipe.lateral .cabeca-lateral,
.grade-equipe.lateral .linha-pessoa {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  padding: 0;
}

.cabeca-lateral {
  padding-bottom: 4px;
  color: var(--suave);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.grade-equipe.lateral .linha-pessoa {
  min-height: 68px;
  padding: 10px 0;
  border-radius: 14px;
  background: #0c1612;
}

.grade-equipe.lateral .avatar {
  justify-self: end;
  position: relative;
  z-index: 1;
}

.grade-equipe.lateral .cartao-cabeca,
.grade-equipe.lateral .cartao-pessoa footer {
  display: contents;
  margin: 0;
  padding: 0;
  border: 0;
}

.grade-equipe.lateral .cartao-nome {
  min-width: 0;
  overflow: hidden;
}

.grade-equipe.lateral .cabeca-lateral span:nth-child(5),
.grade-equipe.lateral .links-num {
  text-align: center;
}

.grade-equipe.lateral .estado-acesso { margin-left: 0; white-space: nowrap; }

.grade-equipe.lateral .acoes-pessoa {
  margin-left: 0;
  margin-right: 14px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.grade-equipe.lateral .segmento-vazio,
.grade-equipe.lateral .segmento-nome,
.grade-equipe.lateral .links-num.vazio { display: block; min-width: 0; }

.segmento-nome {
  color: #f0d48a;
  font-size: 14px;
  font-weight: 700;
}

.cartao-meio .segmento-nome { margin-left: auto; }

.grade-equipe.lateral .cartao-nome strong,
.grade-equipe.lateral .email,
.grade-equipe.lateral .meta {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grade-equipe.lateral .cartao-pessoa.em-alta .links-num::after,
.grade-equipe.lateral .cartao-pessoa.em-alta .links-num small::after { content: none; }

.grade-equipe.lateral .email { color: var(--texto); font-size: 14px; }

.grade-equipe.lateral .meta { font-size: 14px; }

.grade-equipe.lateral .links-num {
  font-size: 16px;
  line-height: 1;
}

.grade-equipe.lateral .selo-nivel,
.grade-equipe.lateral .selo-teste {
  margin: 2px 0 0;
  padding: 0;
  background: transparent;
  color: var(--suave);
  letter-spacing: 0.08em;
}

.grade-equipe.lateral .troca-segmento { justify-self: start; }

.grade-equipe.lateral .troca-segmento .opcao-segmento { padding: 0 10px; }

.grade-equipe.lateral .acoes-pessoa .btn-sec {
  width: auto;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.14);
  font-size: 12px;
  font-weight: 600;
}

.grade-equipe.lateral .acoes-pessoa .btn-sec[data-ativo="0"] {
  color: #e7b4b4;
  border-color: rgba(255, 141, 141, 0.28);
}

#lista-usuarios {
  display: grid;
}

.pessoa,
.pessoa-cabeca {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) minmax(180px, 1.8fr) minmax(130px, 1fr) 72px 112px;
  align-items: center;
  gap: 8px 16px;
  min-width: 0;
}

.pessoa {
  padding: 14px 0;
  border-bottom: 1px solid var(--linha);
}

.pessoa-cabeca {
  padding: 0 0 8px;
  color: var(--suave);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--linha);
}

.pessoa > div,
.pessoa-lado { display: contents; }

.pessoa:last-child { border-bottom: 0; padding-bottom: 0; }

.pessoa strong {
  display: block;
  font-family: var(--titulo);
  font-size: 16px;
}

.pessoa .email {
  display: block;
  margin-top: 2px;
  color: var(--azul-vivo);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.pessoa .email.vazio { color: var(--suave); }

.pessoa .meta {
  display: block;
  margin-top: 2px;
  color: var(--suave);
  font-size: 13px;
}

.pessoa.inativa { opacity: 0.5; }

.pessoa-lado .btn-sec { justify-self: end; }

.links-num {
  min-width: 52px;
  text-align: center;
  font-family: var(--titulo);
  font-size: 22px;
  line-height: 1;
}

.links-num small {
  display: block;
  margin-top: 4px;
  color: var(--suave);
  font-family: var(--fonte);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.pessoa-lado .btn-sec {
  flex: 0 0 auto;
  width: auto;
  min-height: 36px;
  padding: 6px 12px;
}

.selo-nivel {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(10, 126, 174, 0.22);
  color: #9fd4ef;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.selo-nivel.vendedor {
  background: rgba(142, 190, 69, 0.16);
  color: var(--verde-vivo);
}

.selo-nivel.gestor,
.selo-segmento {
  background: rgba(212, 168, 74, 0.18);
  color: #f0d48a;
}

.selo-segmento {
  display: inline-block;
  margin: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: 1px;
}

.troca-segmento {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.troca-segmento .opcao-segmento {
  min-height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--suave);
  font-weight: 600;
  font-size: 12px;
}

.troca-segmento .opcao-segmento.ativo[data-definir-segmento="gelson"] {
  background: #1d4a28;
  color: #e7f6df;
}

.troca-segmento .opcao-segmento.ativo[data-definir-segmento="griffe"] {
  background: #4a3b22;
  color: #f6edd8;
}

.filtros-segmento { margin: 0 0 16px; }

select {
  width: 100%;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--campo);
  color: var(--texto);
  min-height: 48px;
  padding: 10px 12px;
}

.tabela-usuarios {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.tabela-usuarios th,
.tabela-usuarios td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
}

.tabela-usuarios th {
  color: var(--suave);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.topo .marca-olho { margin: 0; color: #d7e7cf; max-width: none; }

.layout {
  display: grid;
  grid-template-columns: minmax(300px, 440px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.painel,
.coluna-previa,
.folha,
.cartao-modelo { min-width: 0; }

.painel,
.cartoes {
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: 20px;
  padding: 18px;
}

.linha-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 8px;
}

.linha-titulo span,
.ajuda,
.titulo-previa span {
  color: var(--suave);
  font-size: 13px;
}

.ajuda { margin: 0 0 12px; }

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.campo span,
.linha-fotos span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--suave);
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  background: var(--campo);
  border: 1px solid rgba(20, 150, 208, 0.32);
  border-radius: 12px;
  padding: 12px;
  font-size: 16px;
}

textarea { resize: vertical; min-height: 74px; }

#mensagem {
  min-height: 150px;
  font-family: Consolas, "Segoe UI", monospace;
  font-size: 13px;
  line-height: 1.45;
}

input::placeholder,
textarea::placeholder { color: #667078; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--texto);
  caret-color: var(--texto);
  box-shadow: 0 0 0 1000px var(--campo) inset;
  transition: background-color 9999s ease-out;
}

input:focus,
textarea:focus,
button:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
  border-color: var(--verde);
}

.cartao-modelo {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
}

.busca-produto { position: relative; }

.sugestoes-produto {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(100% - 4px);
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: #12171c;
  box-shadow: var(--sombra);
}

.sugestoes-produto[hidden] { display: none; }

.sugestoes-produto button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}

.sugestoes-produto button:hover { background: rgba(255, 255, 255, 0.06); }

.sugestoes-produto small { color: var(--suave); }

.codigo-produto {
  margin: 6px 0 0;
  color: var(--suave);
  font-size: 13px;
}

.topo-modelo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.topo-modelo strong { font-family: var(--titulo); }

.botoes-ordem { display: flex; gap: 6px; }

.botoes-ordem button,
.btn-texto {
  background: transparent;
  border: 1px solid var(--linha);
  color: var(--texto);
  border-radius: 8px;
  min-width: 36px;
  min-height: 36px;
  padding: 6px 10px;
}

.btn-texto.perigo,
.botoes-ordem .perigo { color: var(--perigo); border-color: transparent; }

.grade-valores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.grade-valores .campo { margin-bottom: 0; }

.pagamento { margin-bottom: 12px; }

.pagamento .grade-valores { margin-bottom: 14px; }

.pagamento .grade-valores .campo:only-child { grid-column: 1 / -1; }

.pagamento-titulo {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--suave);
}

.pagamento .ajuda { margin: 0 0 8px; }

.metodos-pag {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.metodo-pag {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(20, 150, 208, 0.32);
  background: var(--campo);
  color: var(--texto);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
}

.metodo-pag.ativo {
  border-color: rgba(142, 190, 69, 0.85);
  background: rgba(142, 190, 69, 0.16);
  color: var(--verde-vivo);
}

.metodo-pag:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bloco-metodo { margin-top: 8px; }

.linha-parcela {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
  margin-top: 8px;
}

.linha-parcela .campo { margin: 0; }

.tirar-parcela {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--linha);
  background: transparent;
  color: var(--perigo);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.seletor-parcela { margin-top: 8px; }

.seletor-parcela-botao {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(20, 150, 208, 0.28);
  background: var(--campo);
  color: var(--texto);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.seletor-parcela-botao span { flex: 1; }

.seletor-parcela-botao em {
  color: var(--suave);
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
}

.seletor-parcela-botao::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--suave);
  border-bottom: 2px solid var(--suave);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.18s ease;
}

.seletor-parcela.aberto .seletor-parcela-botao {
  border-color: rgba(142, 190, 69, 0.55);
}

.seletor-parcela.aberto .seletor-parcela-botao::after {
  transform: rotate(225deg) translateY(-1px);
}

.seletor-parcela-lista {
  display: none;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #12161b;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

.seletor-parcela.aberto .seletor-parcela-lista {
  display: grid;
  animation: abrir-seletor 0.18s ease;
}

.seletor-parcela-lista button {
  min-height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--texto);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.seletor-parcela-lista button:hover,
.seletor-parcela-lista button:focus-visible {
  background: rgba(142, 190, 69, 0.16);
  color: var(--verde-vivo);
}

@keyframes abrir-seletor {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 520px) {
  .seletor-parcela-lista { grid-template-columns: repeat(4, 1fr); }
}

.linha-fotos {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.contador.cheio { color: var(--verde-vivo); }

.zona-fotos {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  border: 1px dashed rgba(142, 190, 69, 0.5);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  color: var(--suave);
  margin-bottom: 10px;
}

.btn-selecionar { width: 100%; }

.origem-fotos {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.zona-fotos.escolhendo .origem-fotos { display: grid; }

.btn-foto {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  min-width: 0;
  margin: 0;
  padding: 0 12px;
  border: 1px solid rgba(142, 190, 69, 0.45);
  border-radius: 12px;
  background: #12161b;
  color: var(--texto);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.btn-foto.btn-video { border-color: rgba(20, 150, 208, 0.55); }

.btn-foto.desligado {
  opacity: 0.35;
  pointer-events: none;
}

.btn-foto input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
}

.zona-fotos small { font-size: 12px; }

.zona-fotos.sobre,
.zona-fotos:focus-within {
  border-color: var(--verde);
  background: rgba(142, 190, 69, 0.08);
}

.zona-fotos.cheia { opacity: 0.6; }

.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }

.thumb { position: relative; width: 72px; height: 72px; }

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.thumb.video::after {
  content: "Vídeo";
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 1px 4px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.thumb-video {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: #12161b;
  color: var(--suave);
  font-size: 11px;
  font-weight: 700;
}

.grade-videos {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.grade-videos video {
  width: 100%;
  max-height: 420px;
  border-radius: 14px;
  background: #000;
}

.thumb button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  line-height: 1;
}

.btn {
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 44px;
  font-weight: 700;
  white-space: normal;
}

.btn-add {
  width: 100%;
  margin: 2px 0 8px;
  background: transparent;
  color: var(--verde-vivo);
  border: 1px dashed rgba(142, 190, 69, 0.65);
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: 10px;
  border-radius: 16px;
  background: #0c0f13;
  border: 1px solid var(--linha);
}

.btn-whats {
  flex: 1 1 100%;
  background: linear-gradient(180deg, #3ee484, #1ea955);
  color: #06210f;
}

.btn-sec {
  flex: 1 1 140px;
  background: transparent;
  color: var(--texto);
  border: 1px solid rgba(20, 150, 208, 0.5);
}

.btn-whats:hover,
.btn-sec:hover,
.btn-add:hover { filter: brightness(1.08); }

.aviso {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 141, 141, 0.1);
  color: #ffd0d0;
}

.aviso.ok {
  background: rgba(142, 190, 69, 0.12);
  color: var(--verde-vivo);
}

#limpar { margin-top: 4px; }

.fecho {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.fecho .ajuda {
  width: 100%;
  margin: 0;
}

.titulo-previa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.abas { display: none; }

.folha {
  position: relative;
  overflow: hidden;
  max-width: 440px;
  margin: 0 auto;
  padding: 26px 18px 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(520px 220px at 50% 0%, rgba(20, 150, 208, 0.2), transparent 60%),
    #07080a;
  box-shadow: var(--sombra);
}

.folha::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--azul), var(--verde));
}

.folha-logo {
  display: block;
  width: 148px;
  height: auto;
  margin: 6px auto 0;
}

.kicker {
  margin: 8px 0 0;
  text-align: center;
  letter-spacing: 0.28em;
  font-size: 12px;
  font-weight: 700;
  color: var(--suave);
}

.cliente-catalogo {
  margin: 8px 0 0;
  text-align: center;
  font-family: var(--titulo);
  font-size: 20px;
  overflow-wrap: anywhere;
}

.vendedor-catalogo {
  margin: 6px 0 0;
  text-align: center;
  color: var(--suave);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.vazio {
  margin: 28px 8px 8px;
  text-align: center;
  color: var(--suave);
}

.bloco-modelo + .bloco-modelo {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--linha);
}

.cabeca-produto { margin: 2px 0 10px; }

.indice {
  margin: 0 0 2px;
  color: var(--suave);
  font-family: var(--titulo);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.grade-fotos {
  display: grid;
  gap: 6px;
  margin: 0;
}

.grade-fotos > * {
  min-width: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
}

.grade-fotos img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: #000;
}

.grade-fotos.qtd-1 { grid-template-columns: 1fr; }
.grade-fotos.qtd-1 img { aspect-ratio: 4 / 3; }

.grade-fotos.qtd-2 { grid-template-columns: 1fr 1fr; }
.grade-fotos.qtd-2 img { aspect-ratio: 3 / 4; }

.grade-fotos.qtd-3,
.grade-fotos.qtd-5 { grid-template-columns: 1fr 1fr; }

.grade-fotos.qtd-3 > :first-child,
.grade-fotos.qtd-5 > :first-child,
.grade-fotos.qtd-7 > :first-child,
.grade-fotos.qtd-10 > :first-child { grid-column: 1 / -1; }

.grade-fotos.qtd-3 > :first-child img,
.grade-fotos.qtd-5 > :first-child img,
.grade-fotos.qtd-7 > :first-child img,
.grade-fotos.qtd-10 > :first-child img { aspect-ratio: 16 / 10; }

.grade-fotos.qtd-4,
.grade-fotos.qtd-8 { grid-template-columns: 1fr 1fr; }

.grade-fotos.qtd-6,
.grade-fotos.qtd-7,
.grade-fotos.qtd-9,
.grade-fotos.qtd-10 { grid-template-columns: repeat(3, 1fr); }

.nome-modelo {
  margin: 0;
  font-family: var(--fonte);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #d5dde3;
  overflow-wrap: anywhere;
}

.lista-precos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.grade-fotos + .lista-precos,
.dica-zoom + .lista-precos,
.grade-videos + .lista-precos {
  margin-top: 36px;
}

.lista-precos li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-width: 0;
  padding: 8px 2px;
  border-bottom: 1px solid var(--linha);
}

.lista-precos li:last-child { border-bottom: 0; }

.lista-precos li.vista {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 6px;
  padding: 12px 14px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(142, 190, 69, 0.2), rgba(142, 190, 69, 0.06));
}

.lista-precos span {
  color: var(--suave);
  font-size: 13px;
  font-weight: 600;
}

.lista-precos strong {
  margin-left: auto;
  font-size: 16px;
  font-family: var(--titulo);
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

.lista-precos li.vista span {
  margin: 0;
  color: var(--verde);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lista-precos li.vista strong {
  margin: 0;
  color: var(--texto);
  font-size: clamp(28px, 7vw, 36px);
  line-height: 1;
  text-align: left;
}

.observacao {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(10, 126, 174, 0.14);
  white-space: pre-wrap;
}

.observacao strong {
  display: block;
  margin-bottom: 4px;
  color: var(--azul-vivo);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.data-catalogo {
  margin: 18px 0 0;
  text-align: center;
  color: var(--suave);
  font-size: 12px;
}

.validade {
  margin: 4px auto 0;
  max-width: 36em;
  text-align: center;
  color: #7d868e;
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.45;
}

.aviso-reserva { margin-top: 6px; }

.link-pronto { margin-top: 12px; }

.link-pronto .btn { width: 100%; }

#salvar-rascunho { flex: 1 1 100%; }

.status-rascunho {
  margin: 0 0 8px;
  color: var(--suave);
  font-size: 13px;
}

.pagina-publica {
  overflow-x: clip;
  min-height: 100dvh;
}

.pagina-publica .publico {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding:
    calc(12px + env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    calc(28px + env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
}

.pagina-publica .folha {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.pagina-publica .bloco-modelo,
.pagina-publica .lista-precos,
.pagina-publica .grade-fotos,
.pagina-publica img {
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 640px) {
  .pagina-publica .publico { max-width: none; }

  .pagina-publica .folha {
    border-radius: 16px;
    padding: 16px 12px 14px;
  }

  .pagina-publica .kicker { letter-spacing: 0.14em; }

  .pagina-publica .nome-modelo { font-size: 14px; }

  .pagina-publica .grade-fotos { gap: 6px; }

  .pagina-publica .grade-fotos > * { border-radius: 10px; }

  .pagina-publica .validade,
  .pagina-publica .cliente-catalogo,
  .pagina-publica .observacao {
    overflow-wrap: anywhere;
  }

  .pagina-publica .validade { line-height: 1.45; }
}

.dica-zoom {
  margin: 8px 0 0;
  text-align: center;
  color: #7d868e;
  font-size: 11px;
}

.foto-zoom {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
  cursor: zoom-in;
}

body.zoom-aberto { overflow: hidden; }

.zoom {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.94);
}

.zoom-palco {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}

.zoom-palco img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

.zoom-fechar,
.zoom-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
}

.zoom-fechar {
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
}

.zoom-nav {
  top: 50%;
  width: 44px;
  height: 64px;
  font-size: 32px;
  line-height: 1;
  transform: translateY(-50%);
}

.zoom-antes { left: 8px; }
.zoom-depois { right: 8px; }

.zoom-indice {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(14px + env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  color: #d5dde3;
  font-size: 13px;
  pointer-events: none;
}

.cartoes { margin-top: 16px; }

.cartoes h3 { margin: 0 0 6px; font-size: 16px; }

.cartoes .btn { width: 100%; margin: 8px 0; }

.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.grade-cartoes a {
  color: var(--verde-vivo);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.grade-cartoes img {
  width: 100%;
  border-radius: 12px;
  display: block;
  margin-bottom: 4px;
  border: 1px solid var(--linha);
}

@media (min-width: 961px) {
  .coluna-previa {
    position: sticky;
    top: calc(var(--altura-topo, 130px) + 16px);
    max-height: calc(100dvh - var(--altura-topo, 130px) - 32px);
    overflow: auto;
    scrollbar-color: rgba(142, 190, 69, 0.45) transparent;
  }

  .folha { max-width: min(520px, 100%); }
}

@media (min-width: 961px) and (max-width: 1100px) {
  .layout { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .login { grid-template-columns: 1fr; }

  .login {
    min-height: 100dvh;
  }

  .login-marca {
    min-height: 34vh;
    padding: 28px 20px;
  }

  .login-marca img { width: min(180px, 52%); }

  .login-lado { padding: 24px 16px 36px; align-items: flex-start; }

  .so-web { display: none; }
  .so-mobile { display: inline; }

  .pagina {
    padding: calc(var(--altura-topo, 118px) + 14px) 14px 28px;
  }

  body.na-vendedor .pagina {
    padding-bottom: calc(148px + env(safe-area-inset-bottom));
  }

  body.na-vendedor .topo {
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-bottom: 10px;
  }

  body.na-vendedor .marca-topo img { height: 32px; }

  body.na-vendedor .ajuda-pedido { display: none; }

  body.na-vendedor .acoes {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(74px + env(safe-area-inset-bottom));
    z-index: 19;
    flex-direction: row;
    margin: 0;
    padding: 8px 12px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }

  body.na-vendedor .acoes .btn,
  body.na-vendedor .acoes #salvar-rascunho {
    width: auto;
    flex: 1 1 0;
  }

  body.na-vendedor .acoes .btn-whats { flex: 1.4 1 0; }

  .topo {
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: calc(12px + env(safe-area-inset-top)) 14px 14px;
  }

  .marca-topo img { height: 32px; }

  .layout,
  body.na-vendedor .layout { grid-template-columns: 1fr; }

  .painel,
  .cartoes {
    padding: 14px;
    border-radius: 16px;
  }

  .folha {
    max-width: none;
    border-radius: 18px;
    padding: 22px 14px 16px;
  }

  .acoes { flex-direction: column; }
  .btn-whats,
  .btn-sec { width: 100%; flex: 1 1 auto; }

  #painel-relatorios #exportar-relatorio {
    width: auto;
    flex: 0 0 auto;
  }

  body.na-vendedor:not(.na-links) .avisos {
    bottom: calc(78px + env(safe-area-inset-bottom));
  }

  .abas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(12, 15, 19, 0.96);
    border-top: 1px solid var(--linha);
    backdrop-filter: blur(10px);
  }

  .aba {
    min-height: 48px;
    border: 1px solid var(--linha);
    border-radius: 12px;
    background: transparent;
    color: var(--texto);
    font-weight: 700;
  }

  .aba.ativa {
    color: #06210f;
    border-color: transparent;
    background: linear-gradient(180deg, #3ee484, #1ea955);
  }

  body.na-vendedor.na-links .pagina { padding-bottom: 28px; }

  body:not(.vendo-previa) .coluna-previa { display: none; }
  body.vendo-previa #painel-gerar > .painel { display: none; }

  .botoes-ordem button,
  .btn,
  .btn-add { min-height: 48px; }

  .thumb button {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 1100px) {
  .central-grade,
  .cadastro-grade { grid-template-columns: 1fr; }

  body.com-menu .pagina {
    padding-top: calc(var(--altura-topo, 74px) + 78px);
  }

  body.com-menu .menu-lateral {
    top: var(--altura-topo, 74px);
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: auto;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(150, 190, 110, 0.16);
    background: rgba(7, 14, 11, 0.96);
    transform: none;
  }
}

@media (max-width: 860px) {
  body.com-menu .pagina {
    padding-left: 14px;
    padding-right: 14px;
  }

  body.na-diretoria .pagina,
  body.na-vendedor.na-links .pagina { padding-bottom: 28px; }

  body.com-menu .menu-nav {
    flex-direction: row;
    flex: 1;
  }

  body.com-menu .recolher { display: none; }

  body.com-menu .item-menu,
  body.com-menu.menu-fechado .item-menu {
    width: auto;
    flex: 1;
    margin: 0;
    padding: 8px 10px;
    justify-content: center;
  }

  body.com-menu .item-menu span,
  body.com-menu.menu-fechado .item-menu span { display: inline; }

  body.com-menu .painel-diretoria,
  body.com-menu .painel-venda {
    margin-left: 0;
    min-height: 0;
    padding: 0 0 24px;
  }

  .links-cabeca { display: none; }

  #lista-links .cartao-link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  #lista-links .cartao-link .link-dados { grid-template-columns: 1fr; }

  #lista-links .cartao-link .acoes-pessoa { width: 100%; justify-content: stretch; }

  #lista-correcoes .cartao-correcao { grid-template-columns: 1fr; }

  #lista-correcoes .acoes-pessoa { width: 100%; }

  .link-gerado {
    grid-template-columns: auto 1fr;
    grid-template-areas: "num tempo" "end end";
  }

  .link-gerado .link-num { grid-area: num; }
  .link-gerado .link-tempo { grid-area: tempo; }
  .link-gerado .link-endereco { grid-area: end; }

  .equipe-barra { align-items: flex-start; flex-direction: column; }

  .resumo-relatorio,
  .faixas-qualidade,
  .grade-relatorio,
  #painel-relatorios .grade-relatorio { grid-template-columns: 1fr; }

  #painel-relatorios .resumo-analise { grid-template-columns: 1fr 1fr; }

  .lista-quais,
  .metricas-pessoa { grid-template-columns: 1fr 1fr; }

  .niveis-acesso.niveis-tres { grid-template-columns: 1fr; }

  .campos-acesso { grid-template-columns: 1fr; }

  .cabeca-lateral { display: none; }

  .grade-equipe.lateral { display: block; }

  .grade-equipe.lateral .linha-pessoa {
    display: grid;
    grid-column: auto;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas:
      "avatar nome estado"
      "avatar email email"
      "avatar cpf cpf"
      "segmento segmento segmento"
      "links acao acao";
  }

  .grade-equipe.lateral .avatar { grid-area: avatar; }
  .grade-equipe.lateral .cartao-nome { grid-area: nome; }
  .grade-equipe.lateral .email { grid-area: email; }
  .grade-equipe.lateral .meta { grid-area: cpf; }
  .grade-equipe.lateral .links-num { grid-area: links; }
  .grade-equipe.lateral .estado-acesso { grid-area: estado; }
  .grade-equipe.lateral .troca-segmento,
  .grade-equipe.lateral .segmento-nome,
  .grade-equipe.lateral .segmento-vazio { grid-area: segmento; }
  .grade-equipe.lateral .acoes-pessoa { grid-area: acao; }

  .grade-equipe.lateral .troca-segmento { justify-self: start; }

  .grade-equipe.lateral .acoes-pessoa {
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
  }

  .pessoa-cabeca { display: none; }

  .pessoa { grid-template-columns: minmax(0, 1fr) auto; }

  .pessoa strong,
  .pessoa .email,
  .pessoa .meta { grid-column: 1 / -1; }

  .links-num { text-align: left; }

  .pessoa-lado .btn-sec { justify-self: end; }
}

@media (max-width: 520px) {
  .campos-acesso { grid-template-columns: 1fr; }
  #mensagem { min-height: 120px; }
}

@media (max-width: 380px) {
  .pagina { padding-left: 10px; padding-right: 10px; }
  .topo {
    margin: 0;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .folha-logo { width: 120px; }
}

.pedido-produto { display: none; }

body.na-vendedor .pedido-produto {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.pedido-produto-botao {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #3ee484, #1ea955);
  color: #06210f;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.pedido-produto-botao svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pedido-produto-caixa {
  width: min(280px, calc(100vw - 36px));
  padding: 12px;
  border: 1px solid rgba(150, 190, 110, 0.22);
  border-radius: 14px;
  background: #101814;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.pedido-produto-caixa[hidden] { display: none; }

.pedido-produto-caixa header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.pedido-produto-caixa header strong {
  font-family: var(--titulo);
  font-size: 14px;
}

.pedido-produto-caixa header button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texto);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.pedido-produto-caixa .ajuda {
  margin: 0 0 10px;
  color: #b7c2b8;
  font-size: 12px;
  line-height: 1.4;
}

.pedido-produto-caixa .campo {
  gap: 4px;
  margin-bottom: 8px;
}

.pedido-produto-caixa .campo span {
  color: #c9d4cb;
  font-size: 10px;
}

.pedido-produto-caixa input {
  background: #1b2621;
  border: 1px solid rgba(190, 214, 170, 0.35);
  border-radius: 8px;
  color: #f4f7f8;
  padding: 7px 10px;
  font-size: 13px;
}

.pedido-produto-caixa input::placeholder { color: #8f9d91; }

.pedido-produto-caixa input:focus {
  outline: none;
  border-color: #3ee484;
  background: #16201c;
  box-shadow: 0 0 0 2px rgba(62, 228, 132, 0.16);
}

.pedido-produto-caixa .btn-whats {
  width: 100%;
  min-height: 34px;
  margin-top: 2px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
}

@media (max-width: 860px) {
  body.na-vendedor:not(.na-links) .pedido-produto {
    bottom: calc(86px + env(safe-area-inset-bottom));
  }
}

@media print {
  body { background: #07080a; }
  .topo, .menu-lateral, .painel, .titulo-previa, .cartoes, .abas, .pedido-produto, noscript { display: none !important; }
  .coluna-previa { display: block !important; }
  .pagina { max-width: none; padding: 0; }
  .layout { display: block; }
  .folha {
    max-width: none;
    box-shadow: none;
    border: 0;
  }
  .bloco-modelo { break-inside: avoid; }
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .aviso-toast,
  .seletor-parcela.aberto .seletor-parcela-lista { animation: none; }
}