/* Ajustes de desenho da Vimezer por cima do Chatwoot — escritos à mão.
   (marca/vimezer.css é GERADO e cuida só de cores e fontes; aqui fica o que é
   desenho: faixa verde, zigue-zague, títulos em Bree Serif, botões do site.)

   Tudo vem de vimezer_site_melhorado/style.css:
     - faixa verde fechada pelo zigue-zague amarelo do logo (.hero + .zigzag-band);
     - fio amarelo curto antes do texto de chamada;
     - títulos em Bree Serif SÓ no peso 400 (a fonte não tem negrito);
     - botões em caixa alta, espaçados, canto de 4px (.btn-escuro).

   Os seletores miram classes do Chatwoot 4.17. ATUALIZOU O CHATWOOT? Confira o
   login e a barra lateral: se uma classe mudar, o ajuste só deixa de valer — a
   tela continua funcionando, apenas sem o enfeite. */

:root {
  --vz-verde: #008225;
  --vz-verde-escuro: #04552a;
  --vz-verde-tinta: #0b3b1f;
  --vz-amarelo: #fcfc00;
  --vz-papel: #f4f4ee;
  --vz-borda: #d9ded7;
  --vz-display: 'Bree Serif', Georgia, 'Times New Roman', serif;
  --vz-faixa: var(--vz-verde);
  --vz-titulo: var(--vz-verde-tinta);
  --vz-zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 26' preserveAspectRatio='none'%3E%3Cg fill='%23fcfc00'%3E%3Cpolygon points='0,3.4 4.5,1.4 13.5,5.4 22.5,1.4 31.5,5.4 36,3.4 36,6.1 31.5,8.1 22.5,4.1 13.5,8.1 4.5,4.1 0,6.1'/%3E%3Cpolygon points='0,11.6 4.5,9.6 13.5,13.6 22.5,9.6 31.5,13.6 36,11.6 36,14.3 31.5,16.3 22.5,12.3 13.5,16.3 4.5,12.3 0,14.3'/%3E%3Cpolygon points='0,19.8 4.5,17.8 13.5,21.8 22.5,17.8 31.5,21.8 36,19.8 36,22.5 31.5,24.5 22.5,20.5 13.5,24.5 4.5,20.5 0,22.5'/%3E%3C/g%3E%3C/svg%3E");
}
/* O Chatwoot marca o escuro na raiz OU numa div interna — valem os dois. */
:root.dark, :root .dark { --vz-faixa: var(--vz-verde-tinta); --vz-borda: #2a332d; --vz-titulo: rgb(var(--slate-12)); }

/* ------------------------------------------------------------------ login
   Mesmo desenho da primeira dobra do site: faixa verde no alto, fechada pelo
   zigue-zague, e o cartão entrando por cima dela. Vale também para "esqueci a
   senha" e para o código de dois fatores, que usam a mesma moldura. */
main.min-h-screen.bg-n-brand\/5 {
  background:
    var(--vz-zigzag) 0 314px / 36px 26px repeat-x,
    linear-gradient(var(--vz-faixa), var(--vz-faixa)) 0 0 / 100% 340px no-repeat;
  /* !important: o vimezer.css repinta .bg-n-brand/5 com !important. */
  background-color: var(--vz-papel) !important;
}
:root.dark main.min-h-screen.bg-n-brand\/5,
:root .dark main.min-h-screen.bg-n-brand\/5 { background-color: rgb(var(--background-color)) !important; }

/* Logo sobre placa branca, como no cabeçalho do site: o verde do logo sumiria
   em cima da faixa verde. */
main.bg-n-brand\/5 > section:first-child img {
  height: 64px;
  padding: 8px 14px;
  background: #fff;
  border-radius: 4px;
  box-sizing: content-box;
}

main.bg-n-brand\/5 > section:first-child h2 {
  font-family: var(--vz-display) !important;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -.005em;
  color: #fff;
}
/* O fio amarelo curto que o site põe antes do texto de chamada. */
main.bg-n-brand\/5 > section:first-child h2::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin: 0 auto 16px;
  background: var(--vz-amarelo);
}

/* Cartão: canto de 4px, borda em vez de sombra e o friso amarelo no alto. */
main.bg-n-brand\/5 > section:nth-child(2) {
  position: relative;
  border: 1px solid var(--vz-borda);
  border-top: 4px solid var(--vz-amarelo);
  border-radius: 4px;
  box-shadow: 0 10px 30px rgb(11 59 31 / .10);
}
main.bg-n-brand\/5 input { border-radius: 4px !important; }

/* Botão principal = .btn-escuro do site. */
main.bg-n-brand\/5 button[type=submit] {
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: background .22s cubic-bezier(.2,.7,.3,1);
}
main.bg-n-brand\/5 button[type=submit]:hover:enabled { background: var(--vz-verde-escuro) !important; filter: none; }

@media (max-width: 640px) {
  main.bg-n-brand\/5 > section:first-child h2 { font-size: 28px; }
}

/* No escuro, o verde da marca sobre fundo escuro não passa em contraste de
   leitura: os links usam o passo 11 da escala escura. */
:root.dark .text-link, :root .dark .text-link { color: #5fd07a !important; }

/* Links sublinhados em amarelo, como o .link-seta do site. */
main.bg-n-brand\/5 a.text-link {
  text-decoration: underline;
  text-decoration-color: var(--vz-amarelo);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------- barra lateral
   O topo da barra (ícone + nome da conta) vira a faixa verde do site, fechada
   pelo zigue-zague em escala menor — a barra é estreita. */
aside > section:first-child { margin-top: 0; }
aside > section:first-child > div:first-child {
  padding: 12px 10px 24px;
  color: #fff;
  background:
    var(--vz-zigzag) 0 100% / 24px 17px repeat-x,
    var(--vz-faixa);
}
aside > section:first-child > div:first-child * { color: #fff; }
aside > section:first-child > div:first-child img {
  width: 22px;
  height: 22px;
  padding: 3px;
  background: #fff;
  border-radius: 4px;
  box-sizing: content-box;
}
aside > section:first-child > div:first-child .size-6 { width: 28px; height: 28px; }
aside > section:first-child > div:first-child :is(span, button, div):not(:has(*)) {
  font-family: var(--vz-display) !important;
  font-weight: 400;
  font-size: 17px;
}

/* Item ativo do menu: fio verde à esquerda, como o destaque do site. */
aside nav a.bg-n-alpha-2 { box-shadow: inset 3px 0 0 var(--vz-verde); }

/* ------------------------------------------------------ títulos de tela */
h1.text-base.font-medium.text-n-slate-12 {
  font-family: var(--vz-display) !important;
  font-weight: 400;
  font-size: 19px;
}
h1.text-base.font-medium.text-n-slate-12 { color: var(--vz-titulo); }