/* ==========================================================================
   Identidade visual Zoltwo
   ==========================================================================

   Wordmark  : "zoltwo" em branco solido, Plus Jakarta Sans ExtraBold
   Fundo     : carvao profundo #0d0f14
   Destaques : azul eletrico #0091ff + rosa-choque #ff3d6e
   Forma     : blobs fluidos ao fundo -- sensacao de vivo e crescendo

   CSS proprio em vez de framework: a identidade tem tokens especificos
   (os blobs, a escala azul->rosa dos tipos de agente) que seriam retrabalho
   sobre um utilitario generico, e tira uma dependencia de CDN do caminho
   critico de producao.
   ========================================================================== */

:root {
  /* --- Base ------------------------------------------------------------ */
  --carvao:        #0d0f14;  /* fundo da marca */
  --carvao-claro:  #151922;  /* superficies elevadas (cards, header) */
  --carvao-linha:  #222836;  /* bordas */
  --carvao-fundo:  #0a0c10;  /* poco, mais fundo que o fundo */

  --branco:        #ffffff;  /* o wordmark, e so ele, em branco solido */
  --texto:         #e8ecf4;
  --texto-suave:   #98a3b8;
  --texto-fraco:   #5f6b80;

  /* --- Destaques da marca --------------------------------------------- */
  --azul:          #0091ff;
  --azul-claro:    #4db8ff;
  --azul-fundo:    rgba(0, 145, 255, 0.12);
  --azul-linha:    rgba(0, 145, 255, 0.35);

  --rosa:          #ff3d6e;
  --rosa-claro:    #ff7a9c;
  --rosa-fundo:    rgba(255, 61, 110, 0.12);
  --rosa-linha:    rgba(255, 61, 110, 0.35);

  /* --- Semanticos ------------------------------------------------------ */
  --ok:            #22d39a;
  --ok-fundo:      rgba(34, 211, 154, 0.12);
  --alerta:        #ffb340;
  --alerta-fundo:  rgba(255, 179, 64, 0.12);
  --erro:          #ff4d4d;
  --erro-fundo:    rgba(255, 77, 77, 0.12);

  /* --- Tipos de agente -------------------------------------------------
     As duas cores da marca viram codigo de categoria. A escala vai do azul
     (quem chega) ao rosa (quem ja comprou), passando pelo roxo -- entao a
     posicao da cor no espectro conta a posicao do agente na jornada. */
  --tipo-atendimento:  var(--azul);
  --tipo-confirmador:  #4d7dff;
  --tipo-relatorio:    #8b5cf6;
  --tipo-qualificador: #d94ba0;
  --tipo-pos_venda:    var(--rosa);

  --sidebar-w: 268px;
  --sidebar-min: 76px;

  --raio:      10px;
  --raio-g:    16px;
  --sombra:    0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
  --fonte: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
           "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--carvao);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Aurora de fundo
   --------------------------------------------------------------------------
   O objetivo e um fundo que pareca tinta se misturando na agua, nao bolas
   flutuando. Tres tecnicas somadas chegam la:

   1. FORMA QUE SE DEFORMA. Cada mancha anima os oito valores de
      `border-radius` (quatro horizontais / quatro verticais). Isso deixa a
      silhueta ondulando entre estados assimetricos, entao ela nunca se le como
      circulo -- e o que separa "ameba" de "bola desfocada".

   2. ROTACAO DESSINCRONIZADA. Girar enquanto a forma muda faz as
      irregularidades passearem pela borda, em vez de pulsarem no mesmo lugar.

   3. TEMPOS PRIMOS ENTRE SI (29s, 37s, 43s, 53s, 61s, 71s). Sem multiplo comum
      pequeno, as camadas nunca reencontram o mesmo arranjo: o olho nao acha o
      ponto onde o laco recomeca.

   `screen` como modo de mesclagem soma luz nos cruzamentos, entao o encontro
   do azul com o rosa gera o roxo da marca sozinho, sem uma terceira cor
   chapada por cima.
   ========================================================================== */

.blobs {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.blob {
  position: absolute;
  filter: blur(70px);
  will-change: transform, border-radius;
  mix-blend-mode: screen;
  opacity: .72;
}

.blob--azul {
  width: 52vw; height: 46vw;
  top: -14vw; left: -10vw;
  background: radial-gradient(circle at 38% 42%, rgba(0, 145, 255, .9), rgba(0, 145, 255, 0) 68%);
  animation: forma-a 37s ease-in-out infinite, deriva-a 53s ease-in-out infinite;
}

.blob--rosa {
  width: 44vw; height: 48vw;
  top: 2vw; right: -14vw;
  background: radial-gradient(circle at 56% 44%, rgba(255, 61, 110, .85), rgba(255, 61, 110, 0) 66%);
  animation: forma-b 43s ease-in-out infinite, deriva-b 61s ease-in-out infinite;
}

.blob--roxo {
  width: 54vw; height: 50vw;
  bottom: -24vw; left: 16vw;
  background: radial-gradient(circle at 48% 52%, rgba(138, 76, 240, .78), rgba(138, 76, 240, 0) 68%);
  animation: forma-c 53s ease-in-out infinite, deriva-c 71s ease-in-out infinite;
}

.blob--ciano {
  width: 34vw; height: 30vw;
  top: 34vh; left: -12vw;
  background: radial-gradient(circle at 50% 50%, rgba(34, 211, 238, .6), rgba(34, 211, 238, 0) 64%);
  animation: forma-a 29s ease-in-out infinite reverse, deriva-d 43s ease-in-out infinite;
}

.blob--magenta {
  width: 38vw; height: 34vw;
  bottom: 2vh; right: 0;
  background: radial-gradient(circle at 44% 56%, rgba(217, 75, 160, .65), rgba(217, 75, 160, 0) 66%);
  animation: forma-b 61s ease-in-out infinite reverse, deriva-e 37s ease-in-out infinite;
}

/* --- Deformacao da silhueta ------------------------------------------- */

@keyframes forma-a {
  0%, 100% { border-radius: 58% 42% 38% 62% / 52% 46% 54% 48%; transform: rotate(0deg); }
  25%      { border-radius: 42% 58% 62% 38% / 44% 62% 38% 56%; }
  50%      { border-radius: 36% 64% 48% 52% / 62% 38% 62% 38%; transform: rotate(180deg); }
  75%      { border-radius: 64% 36% 54% 46% / 38% 58% 42% 62%; }
}

@keyframes forma-b {
  0%, 100% { border-radius: 46% 54% 62% 38% / 58% 42% 58% 42%; transform: rotate(0deg); }
  33%      { border-radius: 62% 38% 42% 58% / 40% 64% 36% 60%; }
  66%      { border-radius: 38% 62% 56% 44% / 64% 36% 64% 36%; transform: rotate(-200deg); }
}

@keyframes forma-c {
  0%, 100% { border-radius: 52% 48% 44% 56% / 46% 58% 42% 54%; transform: rotate(0deg); }
  40%      { border-radius: 38% 62% 58% 42% / 62% 40% 60% 38%; }
  70%      { border-radius: 60% 40% 36% 64% / 42% 56% 44% 58%; transform: rotate(160deg); }
}

/* --- Deriva pelo quadro ----------------------------------------------- */

@keyframes deriva-a {
  0%, 100% { translate: 0 0; scale: 1; }
  25%      { translate: 8vw 6vh;  scale: 1.16; }
  50%      { translate: 3vw 14vh; scale: .9; }
  75%      { translate: -5vw 5vh; scale: 1.08; }
}

@keyframes deriva-b {
  0%, 100% { translate: 0 0; scale: 1; }
  33%      { translate: -10vw 9vh;  scale: 1.2; }
  66%      { translate: -3vw 20vh;  scale: .86; }
}

@keyframes deriva-c {
  0%, 100% { translate: 0 0; scale: 1; }
  30%      { translate: -9vw -7vh; scale: 1.12; }
  60%      { translate: 7vw -14vh; scale: .92; }
}

@keyframes deriva-d {
  0%, 100% { translate: 0 0; scale: 1; }
  40%      { translate: 14vw -9vh; scale: 1.25; }
  70%      { translate: 6vw 10vh;  scale: .88; }
}

@keyframes deriva-e {
  0%, 100% { translate: 0 0; scale: 1; }
  35%      { translate: -12vw -11vh; scale: 1.14; }
  65%      { translate: -18vw 4vh;   scale: .93; }
}

/* Movimento de fundo nao deve ser imposto a quem pediu para reduzi-lo: fica a
   composicao de cor, sem a deriva nem a deformacao. */
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; border-radius: 50%; }
}

/* ==========================================================================
   Layout: sidebar fixa + conteudo
   --------------------------------------------------------------------------
   A navegacao do Zoltwo e curta e estavel (5 itens que nao crescem com o uso),
   entao uma sidebar sempre visivel custa pouco e elimina um clique de cada
   troca de secao. Abaixo de 900px ela vira uma barra inferior, que e onde o
   polegar alcanca no celular.
   ========================================================================== */

.app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns .22s ease;
}

/* Recolhida: sobra a coluna de icones.

   Some a largura em vez de esconder a barra inteira porque a navegacao
   continua alcancavel com um clique -- quem recolhe quer mais espaco para a
   tabela, nao perder o acesso as secoes. */
.app.recolhida { grid-template-columns: var(--sidebar-min) 1fr; }

.app.recolhida .sidebar__nome,
.app.recolhida .sidebar__item span.rotulo-nav,
.app.recolhida .sidebar__conta-texto { display: none; }

.app.recolhida .sidebar { padding: 20px 10px; align-items: center; }
.app.recolhida .sidebar__marca { justify-content: center; padding: 6px 0 16px; }

/* A logo encolhe um pouco: em 76px de coluna, os 42px do estado aberto
   encostam no botao e o conjunto fica apertado. */
.app.recolhida .sidebar__marca img { width: 34px; height: 34px; }

/* Quadrado, nao a largura toda: o item ocupando a coluna inteira com o icone
   no meio vira uma capsula alta e estreita em volta de um simbolo pequeno --
   o realce fica maior que a coisa realcada. */
.app.recolhida .sidebar__item {
  width: 46px;
  height: 46px;
  padding: 0;
  justify-content: center;
  border-radius: 12px;
}

/* A barra lateral do estado ativo nao sobrevive ao quadrado: ela marcava a
   borda de um item largo. Aqui o proprio fundo ja identifica o item. */
.app.recolhida .sidebar__item.ativo { box-shadow: none; }

.app.recolhida .sidebar__conta { justify-content: center; padding: 8px 0; width: 46px; }

/* A seta aponta para onde o clique leva: fechada, ela vira para fora. */
.app.recolhida .sidebar__recolher svg { transform: scaleX(-1); }

.sidebar {
  position: sticky;
  /* Ancora do botao de recolher, posicionado em absoluto. */
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px 14px;
  background: rgba(10, 12, 16, 0.72);
  backdrop-filter: blur(16px);
  border-right: 1px solid var(--carvao-linha);
}

.sidebar__marca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 24px;
  text-decoration: none;
  white-space: nowrap;
}

.sidebar__marca img { width: 42px; height: 42px; flex: none; }

/* Botao de recolher.

   Vive na BORDA da barra, nao dentro dela: `fixed` com `left` calculado a
   partir da largura, entao acompanha a transicao e fica sempre montado no
   limite entre a barra e o conteudo.

   Ele muda de lado conforme o estado:

     ABERTA   dentro da barra, encostado na borda direita. Ha espaco de sobra,
              e mantendo-o dentro a silhueta da barra fica limpa.

     FECHADA  fora da barra, colado nela, como uma aba. Com 76px de coluna nao
              sobra espaco para ele conviver com a logo, e a aba deixa claro
              que o clique devolve a barra.

   O detalhe que importa: ele nunca entra no fluxo. Uma versao anterior o
   colocava em `static` quando recolhido, e o resultado era a logo e os itens
   descerem alguns pixels ao fechar. Fora do fluxo nos dois estados, nada se
   move -- so a largura da coluna muda.

   O `top` coincide com o centro da logo. */
.sidebar__recolher {
  position: fixed;
  top: 34px;
  left: calc(var(--sidebar-w) - 42px);
  z-index: 30;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid var(--carvao-linha);
  background: var(--carvao-claro);
  color: var(--texto-fraco);
  cursor: pointer;
  transition: left .22s ease, border-radius .22s ease,
              color .15s, background .15s, border-color .15s;
}

.sidebar__recolher:hover {
  color: var(--branco);
  background: var(--azul-fundo);
  border-color: var(--azul-linha);
}

.sidebar__recolher svg { width: 15px; height: 15px; transition: transform .22s ease; }

/* Colado na borda externa: comeca exatamente onde a barra acaba, e so o lado
   de fora e arredondado -- e o que faz parecer uma aba presa a barra, em vez
   de um botao solto boiando sobre o conteudo. */
.app.recolhida .sidebar__recolher {
  left: var(--sidebar-min);
  border-radius: 0 9px 9px 0;
  border-left-color: transparent;
}

.sidebar__nome {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.035em;
  color: var(--branco);
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 13px;
  border-radius: 11px;
  color: var(--texto-suave);
  text-decoration: none;
  font-weight: 500;
  font-size: 14.5px;
  white-space: nowrap;
  transition: color .15s, background .15s;
}

.sidebar__item svg { width: 20px; height: 20px; flex: none; }

/* No desktop a Conta e alcancada pelo bloco de identificacao no rodape; este
   item existe so para a barra inferior do celular, onde o rodape nao cabe. */
.sidebar__item--movel { display: none; }

.sidebar__item:hover { color: var(--texto); background: rgba(255, 255, 255, 0.05); }

/* A barra colorida a esquerda marca a secao atual sem depender so da cor do
   texto, que sozinha nao passa em contraste para quem enxerga pouco. */
.sidebar__item.ativo {
  color: var(--branco);
  background: var(--azul-fundo);
  box-shadow: inset 2px 0 0 var(--azul);
}

.sidebar__rodape {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--carvao-linha);
}

.sidebar__conta {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  min-width: 0;
  border-radius: 11px;
  text-decoration: none;
  transition: background .15s;
}

.sidebar__conta:hover { background: rgba(255, 255, 255, 0.05); }
.sidebar__conta.ativo { background: var(--azul-fundo); box-shadow: inset 2px 0 0 var(--azul); }

.sidebar__avatar {
  width: 36px; height: 36px;
  border-radius: 11px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--branco);
  background: linear-gradient(135deg, var(--azul), var(--rosa));
}

.sidebar__conta-texto { min-width: 0; line-height: 1.3; }

.sidebar__org {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar__email {
  font-size: 12px;
  color: var(--texto-fraco);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O `margin: 0 auto` nao e detalhe: sem ele o conteudo cola na barra e todo o
   vazio sobra do lado direito, o que fica evidente em telas largas. Centrado,
   a sobra se divide e a leitura acompanha o centro optico da tela.

   O teto de 1180px continua valendo -- linha longa demais cansa a leitura --,
   entao em monitores ultralargos a coluna para de crescer e passa a se
   distanciar das duas bordas. */
.conteudo {
  min-width: 0;   /* sem isto, uma tabela larga estoura a grade */
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 32px 72px;
}

/* ==========================================================================
   Tipografia
   ========================================================================== */

h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--branco);
  margin: 0 0 6px;
}

h2 { font-size: 17px; font-weight: 700; color: var(--texto); margin: 0 0 14px; }

.rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin: 0 0 12px;
}

.sub { color: var(--texto-suave); margin: 0 0 26px; }
.cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }

/* ==========================================================================
   Cards e metricas
   ========================================================================== */

.card {
  background: var(--carvao-claro);
  border: 1px solid var(--carvao-linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
}

.grade-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 34px;
}

.metrica {
  position: relative;
  padding: 18px 20px;
  overflow: hidden;
}

/* A faixa superior colorida faz a leitura da metrica ser pre-atencional:
   da pra varrer o painel e saber o que e o que antes de ler o rotulo. */
.metrica::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--azul), var(--rosa));
  opacity: 0.85;
}

.metrica--azul::before { background: var(--azul); }
.metrica--rosa::before { background: var(--rosa); }

.metrica__rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.metrica__valor {
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--branco);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.metrica__nota { font-size: 12px; color: var(--texto-fraco); margin-top: 2px; }

/* ==========================================================================
   Tabelas
   ========================================================================== */

.tabela-wrap { overflow-x: auto; border-radius: var(--raio-g); }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  padding: 11px 16px;
  background: var(--carvao-fundo);
  border-bottom: 1px solid var(--carvao-linha);
  white-space: nowrap;
}

tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(34, 40, 54, 0.6);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: rgba(255, 255, 255, 0.025); }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.vazio { text-align: center; padding: 48px 20px; color: var(--texto-fraco); }

td a, .link { color: var(--texto); text-decoration: none; font-weight: 600; }
td a:hover, .link:hover { color: var(--azul-claro); }

/* ==========================================================================
   Etiquetas
   ========================================================================== */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.etiqueta--ok      { color: var(--ok);     background: var(--ok-fundo);     border-color: rgba(34,211,154,.3); }
.etiqueta--neutra  { color: var(--texto-fraco); background: rgba(255,255,255,.05); border-color: var(--carvao-linha); }
.etiqueta--alerta  { color: var(--alerta); background: var(--alerta-fundo); border-color: rgba(255,179,64,.3); }
.etiqueta--azul    { color: var(--azul-claro); background: var(--azul-fundo); border-color: var(--azul-linha); }
.etiqueta--rosa    { color: var(--rosa-claro); background: var(--rosa-fundo); border-color: var(--rosa-linha); }

/* --- Tipo de agente: a cor E a categoria ----------------------------- */

.tipo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-suave);
  white-space: nowrap;
}

.tipo__marca {
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--cor-tipo, var(--texto-fraco));
  box-shadow: 0 0 9px var(--cor-tipo, transparent);
  flex: none;
}

.tipo--atendimento  { --cor-tipo: var(--tipo-atendimento); }
.tipo--confirmador  { --cor-tipo: var(--tipo-confirmador); }
.tipo--relatorio    { --cor-tipo: var(--tipo-relatorio); }
.tipo--qualificador { --cor-tipo: var(--tipo-qualificador); }
.tipo--pos_venda    { --cor-tipo: var(--tipo-pos_venda); }

/* ==========================================================================
   Botoes
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 17px;
  border-radius: var(--raio);
  border: 1px solid var(--carvao-linha);
  background: rgba(255, 255, 255, 0.04);
  color: var(--texto);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s, transform .08s, box-shadow .15s;
}

.btn:hover { background: rgba(255, 255, 255, 0.08); border-color: #2e3547; }
.btn:active { transform: translateY(1px); }

.btn--principal {
  background: linear-gradient(135deg, var(--azul), #0072d6);
  border-color: transparent;
  color: var(--branco);
  box-shadow: 0 2px 14px rgba(0, 145, 255, 0.3);
}
.btn--principal:hover {
  background: linear-gradient(135deg, #24a3ff, #0080ee);
  box-shadow: 0 4px 20px rgba(0, 145, 255, 0.42);
  border-color: transparent;
}

.btn--rosa {
  background: linear-gradient(135deg, var(--rosa), #e02a58);
  border-color: transparent;
  color: var(--branco);
  box-shadow: 0 2px 14px rgba(255, 61, 110, 0.3);
}
.btn--rosa:hover { background: linear-gradient(135deg, #ff5c85, #f03464); border-color: transparent; }

.btn--perigo { color: var(--erro); border-color: rgba(255, 77, 77, 0.3); background: var(--erro-fundo); }
.btn--perigo:hover { background: rgba(255, 77, 77, 0.18); border-color: rgba(255, 77, 77, 0.5); }

.btn--pequeno { font-size: 12px; padding: 5px 11px; }

.acoes { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.acoes form { display: inline; margin: 0; }

/* ==========================================================================
   Formularios
   ========================================================================== */

.campo { margin-bottom: 18px; }

label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 6px;
}

/* `input:not(...)` em vez de listar `input[type="text"]` e companhia: um
   `<input>` sem atributo `type` explicito nao casa com o seletor por atributo
   e escapa do tema inteiro -- fica branco, com a aparencia padrao do
   navegador, no meio de um formulario escuro. Listar o que NAO se quer e
   robusto contra esse esquecimento e contra tipos novos (tel, url, date). */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
textarea, select {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--texto);
  background: var(--carvao-fundo);
  border: 1px solid var(--carvao-linha);
  border-radius: var(--raio);
  padding: 10px 13px;
  transition: border-color .15s, box-shadow .15s;
}

input::placeholder, textarea::placeholder { color: var(--texto-fraco); }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-fundo);
}

textarea { resize: vertical; min-height: 84px; line-height: 1.6; }
textarea.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2398a3b8' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

.ajuda { font-size: 12px; color: var(--texto-fraco); margin-top: 5px; }

.check { display: flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 500; }
.check input { width: 16px; height: 16px; accent-color: var(--azul); cursor: pointer; }

.form-acoes {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--carvao-linha);
  margin-top: 24px;
}

.linha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ==========================================================================
   Avisos
   ========================================================================== */

.aviso {
  padding: 12px 16px;
  border-radius: var(--raio);
  margin-bottom: 22px;
  font-size: 13.5px;
  border: 1px solid transparent;
}

.aviso--erro  { color: #ffb0b0; background: var(--erro-fundo); border-color: rgba(255,77,77,.3); }
.aviso--info  { color: var(--azul-claro); background: var(--azul-fundo); border-color: var(--azul-linha); }
.aviso--ok    { color: var(--ok); background: var(--ok-fundo); border-color: rgba(34,211,154,.3); }

/* ==========================================================================
   Autenticacao
   ========================================================================== */

/* Login e cadastro compartilham este bloco.

   Centralizado na viewport, e nao ancorado no topo: sao telas de um proposito
   so, sem nada abaixo da dobra, entao empurra-las para cima deixa metade do
   monitor vazia e faz o formulario parecer menor do que e.

   `min-height: 100dvh` em vez de `100vh` por causa do mobile, onde a barra de
   endereco entra e sai e o `vh` fixo corta o rodape. */
.auth {
  min-height: 100dvh;
  display: flex;
  padding: 40px 20px;
}

/* `margin: auto` em vez de `justify-content: center`: os dois centralizam,
   mas quando o conteudo e mais alto que a viewport -- o cadastro tem quatro
   campos -- o `justify-content` corta as pontas e o topo fica inalcancavel
   mesmo com scroll. A margem automatica cede e vira scroll normal. */
.auth__interno { width: 100%; max-width: 440px; margin: auto; }

.auth__marca { text-align: center; margin-bottom: 30px; }
.auth__logo  { display: block; width: 86px; height: 86px; margin: 0 auto 16px; }

.auth__wordmark {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--branco);
  margin: 0;
  line-height: 1.05;
}

.auth__sub { color: var(--texto-suave); margin: 10px 0 0; font-size: 15px; }

.auth__card { padding: 34px 32px; }

/* Campos mais altos que os do painel: aqui sao dois ou quatro no total, e o
   conforto de toque no celular vale mais que a densidade. */
.auth__card .campo { margin-bottom: 20px; }
.auth__card label { font-size: 13.5px; margin-bottom: 7px; }

.auth__card input {
  font-size: 15px;
  padding: 13px 15px;
  border-radius: 11px;
}

/* O autofill do Chrome pinta o campo de branco e ignora `background`.
   O unico jeito de vencer e a sombra interna: ela cobre a area inteira com a
   cor do tema, e `-webkit-text-fill-color` recupera o texto legivel. */
.auth__card input:-webkit-autofill,
.auth__card input:-webkit-autofill:hover,
.auth__card input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--carvao-fundo) inset;
  -webkit-text-fill-color: var(--texto);
  caret-color: var(--texto);
  transition: background-color 9999s ease-in-out 0s;
}

.auth__card .btn--bloco {
  font-size: 15px;
  padding: 14px 20px;
  border-radius: 11px;
  margin-top: 4px;
}

.auth__rodape { text-align: center; margin-top: 22px; font-size: 14px; color: var(--texto-suave); }
.auth__rodape a { color: var(--azul-claro); font-weight: 600; text-decoration: none; }
.auth__rodape a:hover { text-decoration: underline; }

.btn--bloco { width: 100%; }

@media (max-width: 480px) {
  .auth { padding: 28px 18px; justify-content: flex-start; padding-top: 6vh; }
  .auth__logo { width: 70px; height: 70px; }
  .auth__wordmark { font-size: 33px; }
  .auth__card { padding: 26px 22px; }
}

/* ==========================================================================
   Conversa
   ========================================================================== */

.conversa { display: flex; flex-direction: column; gap: 12px; }
.balao-linha { display: flex; }
.balao-linha--out { justify-content: flex-end; }

.balao {
  max-width: 74%;
  padding: 11px 15px;
  border-radius: 15px;
  font-size: 13.5px;
  line-height: 1.6;
}

.balao--in {
  background: var(--carvao-claro);
  border: 1px solid var(--carvao-linha);
  border-bottom-left-radius: 4px;
}

/* A resposta do agente carrega o azul da marca: quem fala fica obvio sem ler. */
.balao--out {
  background: linear-gradient(135deg, var(--azul), #0072d6);
  color: var(--branco);
  border-bottom-right-radius: 4px;
}

.balao__texto { white-space: pre-wrap; word-break: break-word; }

.balao__meta { font-size: 10.5px; margin-top: 6px; opacity: 0.65; }
.balao--in .balao__meta { color: var(--texto-fraco); opacity: 1; }

.voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--texto-suave);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 14px;
}
.voltar:hover { color: var(--azul-claro); }

/* ==========================================================================
   Diversos
   ========================================================================== */

code, .cod {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 11.5px;
  background: var(--carvao-fundo);
  border: 1px solid var(--carvao-linha);
  border-radius: 6px;
  padding: 3px 7px;
  color: var(--azul-claro);
  word-break: break-all;
  display: inline-block;
  max-width: 100%;
}

.secao { margin-bottom: 34px; }
.largura-media { max-width: 680px; }
.pilha { display: flex; flex-direction: column; gap: 0; }

/* ==========================================================================
   Landing page
   ========================================================================== */

.lp { position: relative; z-index: 1; }

.lp__topo {
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lp__marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lp__marca img { width: 32px; height: 32px; }
.lp__marca span { font-weight: 800; font-size: 19px; letter-spacing: -0.03em; color: var(--branco); }

.lp__hero {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 24px 72px;
  text-align: center;
}

.lp__hero img { width: 112px; height: 112px; margin-bottom: 26px; }

.lp__titulo {
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: var(--branco);
  margin: 0 0 18px;
}

/* O gradiente da marca no texto: o gancho da headline recebe a cor que o
   produto usa para significar "agente". */
.lp__destaque {
  background: linear-gradient(110deg, var(--azul-claro), var(--rosa));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp__sub {
  font-size: clamp(15px, 2.2vw, 18px);
  color: var(--texto-suave);
  max-width: 560px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.lp__acoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn--grande { font-size: 15px; padding: 13px 26px; }

.lp__nota { margin-top: 16px; font-size: 13px; color: var(--texto-fraco); }

.lp__secao { max-width: 1120px; margin: 0 auto; padding: 0 24px 76px; }

.lp__secao-titulo {
  text-align: center;
  font-size: clamp(24px, 3.6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--branco);
  margin: 0 0 10px;
}

.lp__secao-sub { text-align: center; color: var(--texto-suave); margin: 0 0 40px; }

.lp__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.lp__card { padding: 24px; }

.lp__icone {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: var(--azul-fundo);
  color: var(--azul-claro);
  box-shadow: inset 0 0 0 1px var(--azul-linha);
}

.lp__icone svg { width: 20px; height: 20px; }

/* Card de tipo de agente: o quadrado E a informacao -- e a mesma cor que
   identifica esse tipo no painel, entao quem visita a LP ja aprende o codigo
   antes de entrar no produto. */
.lp__tipo-marca {
  width: 40px; height: 40px;
  border-radius: 11px;
  margin-bottom: 14px;
  background: var(--cor-tipo);
  box-shadow: 0 0 22px -4px var(--cor-tipo);
}
.lp__icone--rosa { background: var(--rosa-fundo); color: var(--rosa-claro); box-shadow: inset 0 0 0 1px var(--rosa-linha); }

.lp__card h3 { font-size: 15.5px; font-weight: 700; color: var(--texto); margin: 0 0 7px; }
.lp__card p { color: var(--texto-suave); margin: 0; font-size: 13.5px; line-height: 1.6; }

/* --- Planos ----------------------------------------------------------- */

.plano { padding: 28px 24px; display: flex; flex-direction: column; position: relative; }

.plano--destaque {
  border-color: var(--azul-linha);
  box-shadow: 0 0 0 1px var(--azul-linha), 0 12px 40px rgba(0, 145, 255, 0.14);
}

.plano__selo {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--branco);
  background: linear-gradient(135deg, var(--azul), var(--rosa));
  white-space: nowrap;
}

.plano__nome { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-fraco); }

.plano__preco {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--branco);
  margin: 10px 0 2px;
}

.plano__preco small { font-size: 14px; font-weight: 500; color: var(--texto-fraco); letter-spacing: 0; }
.plano__agentes { color: var(--texto-suave); font-size: 13.5px; margin-bottom: 20px; }

.plano__lista { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 9px; }
.plano__lista li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--texto-suave); }
.plano__lista svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--ok); }
.plano .btn { margin-top: auto; }

.lp__rodape {
  border-top: 1px solid var(--carvao-linha);
  padding: 26px 24px;
  text-align: center;
  color: var(--texto-fraco);
  font-size: 13px;
}

/* ==========================================================================
   Telas estreitas
   ========================================================================== */

@media (max-width: 900px) {
  /* A sidebar vira barra inferior: no celular, o alcance do polegar esta
     embaixo, nao no topo nem na lateral. */
  .app { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    border-right: none;
    border-top: 1px solid var(--carvao-linha);
    z-index: 50;
    overflow-x: auto;
  }

  .sidebar__marca, .sidebar__rodape, .sidebar__recolher { display: none; }
  .sidebar__item--movel { display: flex; }

  .sidebar__item {
    flex-direction: column;
    gap: 3px;
    font-size: 10.5px;
    padding: 7px 10px;
    flex: 1;
    justify-content: center;
    text-align: center;
  }

  .sidebar__item.ativo { box-shadow: none; }
  .sidebar__item svg { width: 20px; height: 20px; }

  /* Espaco para a barra inferior nao cobrir o fim do conteudo. */
  .conteudo { padding: 22px 16px 104px; }
}

@media (max-width: 720px) {
  h1 { font-size: 22px; }
  .linha-dupla { grid-template-columns: 1fr; }
  .balao { max-width: 88%; }
  .blob { filter: blur(64px); opacity: 0.42; }
  .lp__topo { padding: 18px 16px; }
  .lp__hero { padding: 36px 16px 56px; }
  .lp__secao { padding: 0 16px 56px; }
  .lp__acoes .btn { width: 100%; }
}