/* ===========================================================
   Painel Ingra

   Casca de plataforma: coluna clara a esquerda, area de trabalho
   a direita. Fundo branco, blocos num cinza um tom abaixo com
   canto bem redondo e sombra suave, que e o que separa um bloco
   do outro sem precisar de borda pesada.

   O conteudo e sobrio de proposito, porque a arte dos eventos e
   colorida e o painel nao pode competir com ela. A cor da marca
   entra tingida no item ativo e cheia no botao, onde vem sempre
   com o gradiente, nunca azul chapado.
   =========================================================== */

:root{
  --branco:#FFFFFF;
  --bloco:#FAFAFA;
  --fundo:#FFFFFF;

  --tinta:#0F1729;
  --texto:#1F2739;
  --texto-2:#6B7280;
  --texto-3:#9AA1AE;
  --linha:#E6E6E9;
  --linha-2:#D8D8DE;

  --marca:#2A2FD4;
  --marca-ink:#1E22A8;
  --marca-tint:rgba(42,47,212,.10);
  --marca-tint-2:rgba(42,47,212,.06);

  /* Gradiente aprovado: azul forte fechando no quase preto. */
  --grad-botao:linear-gradient(135deg,#1E22A8 0%,#141873 55%,#0A0E4A 100%);
  --grad-barra:linear-gradient(180deg,#3A40E8 0%,#1E22A8 100%);

  --ok:#0E9F6E; --ok-tint:rgba(14,159,110,.11);
  --alerta:#B45309; --alerta-tint:rgba(180,83,9,.11);
  --perigo:#B91C4A; --perigo-tint:rgba(185,28,74,.11);

  --raio:24px;
  --raio-2:16px;
  --raio-3:10px;
  --sombra:0 10px 15px -3px rgba(15,23,41,.06), 0 4px 6px -4px rgba(15,23,41,.06);
  --sombra-2:0 20px 25px -5px rgba(15,23,41,.07), 0 8px 10px -6px rgba(15,23,41,.06);

  --lateral:272px;
  --fonte:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

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

body{
  margin:0;
  background:var(--fundo);
  color:var(--texto);
  font-family:var(--fonte);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--marca); text-decoration:none; }
img{ max-width:100%; display:block; }

/* ===========================================================
   Casca
   =========================================================== */

.app{ display:flex; min-height:100vh; }

.lateral{
  width:var(--lateral);
  flex-shrink:0;
  background:var(--branco);
  border-right:1px solid var(--linha);
  display:flex;
  flex-direction:column;
  position:sticky; top:0;
  height:100vh;
  overflow-y:auto;
}

.lateral-marca{
  display:flex; align-items:center; gap:10px;
  padding:20px 18px 18px;
  font-size:17px; font-weight:800; letter-spacing:-.02em;
  color:var(--tinta);
}
.lateral-marca em{ font-style:normal; color:var(--marca); }
.lateral-marca img{ width:100%; max-width:170px; height:auto; display:block; }
.lateral-abrir{ display:none; }
.login-logo{ display:block; max-width:200px; height:auto; margin:0 auto 14px; }
.lateral-selo{
  width:30px; height:30px; border-radius:9px;
  background:var(--grad-barra);
  color:var(--branco);
  display:grid; place-items:center;
  font-size:14px; font-weight:800;
  flex-shrink:0;
}

.lateral-nav{ padding:6px 12px 20px; flex:1; border-top:1px solid var(--linha); }

/* ---------- grupo que abre e fecha ---------- */

.lateral-grupo{ margin-top:4px; }

.lateral-titulo{
  display:flex; align-items:center; gap:7px;
  padding:9px 10px;
  border-radius:var(--raio-2);
  font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--texto-3);
  cursor:pointer;
  list-style:none;
  user-select:none;
  transition:background .15s ease, color .15s ease;
}
/* O triangulo padrao do <details> aparece em cada navegador de um jeito;
   escondemos os dois e desenhamos a seta em svg. */
.lateral-titulo::-webkit-details-marker{ display:none; }
.lateral-titulo::marker{ content:''; }

.lateral-titulo:hover{ background:var(--marca-tint-2); color:var(--texto-2); }

.lateral-seta{
  margin-left:auto;
  width:14px; height:14px; flex-shrink:0;
  stroke:currentColor; fill:none; stroke-width:2.2;
  transition:transform .18s ease;
}
.lateral-grupo[open] > .lateral-titulo .lateral-seta{ transform:rotate(180deg); }
.lateral-grupo[open] > .lateral-titulo{ color:var(--texto-2); }

.lateral-filhos{ padding-top:2px; }

/* Ponto na frente do grupo do braco novo. */
.lateral-pontinho{
  width:5px; height:5px; border-radius:50%;
  background:var(--marca);
  flex-shrink:0;
}

.lateral-link{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  margin-bottom:2px;
  border-radius:var(--raio-2);
  color:var(--texto-2);
  font-size:13.5px; font-weight:500;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.lateral-link:hover{ background:var(--marca-tint-2); color:var(--texto); }
.lateral-link.ativo{ background:var(--marca-tint); color:var(--marca); font-weight:600; }

/* Icone em traco, herdando a cor do link para acender junto. */
.lateral-link svg{ width:16px; height:17px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.7; }

/* Area que ainda nao existe. Fica visivel, e nao clicavel, para o
   produtor saber para onde a plataforma esta indo sem bater em 404. */
.lateral-link-off{ opacity:.45; pointer-events:none; }
.lateral-breve{
  margin-left:auto;
  /* `min-width:0` deixa o selo encolher antes do rotulo: entre cortar
     "Comparativo anual" e apertar o selo, o rotulo e que importa. */
  min-width:0;
  font-size:8.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--texto-3);
  border:1px solid var(--linha-2);
  border-radius:99px;
  padding:1px 5px;
  white-space:nowrap;
}
/* O braco de gestao ganha o tom da marca: ele nao e uma tela atrasada,
   e a parte nova da plataforma. */
.lateral-breve-novo{ color:var(--marca); border-color:var(--marca-tint); background:var(--marca-tint); }

/* A lista ficou longa. Sem isso o rodape com o perfil sai da tela. */
.lateral-nav{ overflow-y:auto; }

.lateral-pe{ padding:12px; border-top:1px solid var(--linha); }
.lateral-perfil{
  display:flex; align-items:center; gap:10px;
  padding:10px;
  border:1px solid var(--linha);
  border-radius:var(--raio-2);
  background:var(--bloco);
  margin-bottom:8px;
}
.lateral-inicial{
  width:32px; height:32px; border-radius:50%;
  background:var(--marca-tint); color:var(--marca);
  display:grid; place-items:center;
  font-size:12.5px; font-weight:700;
  flex-shrink:0;
}
.lateral-perfil div{ min-width:0; }
.lateral-perfil b{
  display:block; font-size:13px; font-weight:600; color:var(--tinta);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lateral-perfil span{ font-size:11.5px; color:var(--texto-2); }

.lateral-sair{
  display:flex; align-items:center; gap:9px;
  width:100%;
  padding:10px 12px;
  background:none;
  border:1px solid var(--linha);
  border-radius:var(--raio-2);
  color:var(--texto-2);
  font:inherit; font-size:13.5px; font-weight:500;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.lateral-sair:hover{ border-color:var(--linha-2); color:var(--texto); }
.lateral-sair svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7; }

/* ---------- area de trabalho ---------- */
.trabalho{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topo{
  display:flex; align-items:flex-start; gap:16px;
  padding:24px 24px 6px;
}
.topo h1{ margin:0; font-size:24px; font-weight:700; letter-spacing:-.03em; color:var(--tinta); }
.topo p{ margin:2px 0 0; font-size:14px; color:var(--texto-2); }
.topo-direita{ margin-left:auto; display:flex; align-items:center; gap:10px; padding-top:4px; }

.conteudo{ padding:18px 24px 40px; }

/* ===========================================================
   Blocos
   =========================================================== */

/* O respiro entre os cartoes da tela.

   Fica nos FILHOS DIRETOS do conteudo, e nao no .bloco em si: bloco
   aninhado (dentro dos paineis de cupons, por exemplo) ja tem o espaco
   do proprio grid, e margem no .bloco somaria as duas. */
.conteudo > .metricas,
.conteudo > .bloco,
.conteudo > .cupons-paineis,
.conteudo > [data-vendas],
.conteudo > .erro,
.conteudo > .recado-ok,
.conteudo > .recado-aviso{ margin-bottom:16px; }

.bloco{
  background:var(--bloco);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  box-shadow:var(--sombra);
  overflow:hidden;
}
.bloco-alto{ box-shadow:var(--sombra-2); }
/* Bloco com lista suspensa dentro (multi-selecao): o overflow:hidden cortava o painel. */
.bloco-solto{ overflow:visible; position:relative; z-index:5; }

.bloco-topo{
  display:flex; align-items:flex-start; gap:12px;
  padding:22px 24px 14px;
}
.bloco-titulo{ margin:0; font-size:17px; font-weight:700; letter-spacing:-.02em; color:var(--tinta); }
.bloco-apoio{ margin:1px 0 0; font-size:13.5px; color:var(--texto-2); }
.bloco-corpo{ padding:0 24px 22px; }

/* Pastilha de canto: rotulo estatico, no lugar do botao de filtro
   da referencia. Vira botao quando o filtro existir de fato. */
.pastilha{
  margin-left:auto; flex-shrink:0;
  padding:6px 12px;
  border:1px solid var(--linha);
  border-radius:99px;
  background:var(--branco);
  font-size:12px; font-weight:500;
  color:var(--texto-2);
}
.pastilha-link{ color:var(--marca); font-weight:600; }
.pastilha-link:hover{ border-color:var(--marca); }

.cartao{
  background:var(--bloco);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  box-shadow:var(--sombra);
  padding:24px;
}

/* ===========================================================
   Metricas
   =========================================================== */

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

.metrica{
  position:relative;
  overflow:hidden;
  background:var(--bloco);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  box-shadow:var(--sombra);
  padding:24px;
}

.metrica-alto{ display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
.metrica-icone{
  width:32px; height:32px; border-radius:var(--raio-3);
  background:var(--marca-tint); color:var(--marca);
  display:grid; place-items:center;
  flex-shrink:0;
}
.metrica-icone svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; }
.metrica-rotulo{ margin:0; font-size:14px; font-weight:500; color:var(--texto-2); }

.metrica-valor{
  position:relative; z-index:1;
  margin:14px 0 10px;
  font-size:30px; font-weight:700;
  letter-spacing:-.025em; line-height:1.1;
  color:var(--tinta);
}

.metrica-pe{ position:relative; z-index:1; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.metrica-apoio{ margin:0; font-size:12.5px; color:var(--texto-2); }

/* Marca d'agua: o mesmo icone, gigante e quase apagado, no canto.
   Da peso visual ao cartao sem inventar mais uma cor. */
.metrica-marca{
  position:absolute;
  right:-16px; top:50%;
  transform:translateY(-50%);
  width:130px; height:130px;
  color:var(--marca);
  opacity:.055;
  pointer-events:none;
}
.metrica-marca svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.1; }

/* O cartao de receita e o unico com o gradiente: a tela precisa de um
   ponto de entrada para o olho, e mais de um vira enfeite. */
.metrica-forte{ background:var(--grad-botao); border-color:transparent; }
.metrica-forte .metrica-rotulo{ color:rgba(255,255,255,.72); }
.metrica-forte .metrica-valor{ color:var(--branco); }
.metrica-forte .metrica-apoio{ color:rgba(255,255,255,.68); }
.metrica-forte .metrica-icone{ background:rgba(255,255,255,.16); color:var(--branco); }
.metrica-forte .metrica-marca{ color:var(--branco); opacity:.10; }
.metrica-forte .selo-sobe{ background:rgba(255,255,255,.18); color:var(--branco); }
.metrica-forte .selo-cai{ background:rgba(255,255,255,.18); color:var(--branco); }
.metrica-forte .selo-igual{ background:rgba(255,255,255,.16); color:rgba(255,255,255,.85); }

/* ===========================================================
   Selos
   =========================================================== */

.selo{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px;
  border-radius:var(--raio-3);
  font-size:12px; font-weight:600;
  white-space:nowrap;
}
.selo svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.2; }

.selo-sobe{ background:var(--ok-tint); color:var(--ok); }
.selo-cai{ background:var(--perigo-tint); color:var(--perigo); }
.selo-igual{ background:var(--marca-tint); color:var(--marca); }
.selo-marca{ background:var(--marca-tint); color:var(--marca); }
.selo-ativo{ background:var(--ok-tint); color:var(--ok); }
.selo-neutro{ background:var(--marca-tint-2); color:var(--texto-2); }
.selo-encerrado{ background:rgba(15,23,41,.06); color:var(--texto-3); }

/* ===========================================================
   Grafico de receita

   Barras em CSS puro, sem biblioteca. Sao seis valores: carregar
   240 kB de grafico para desenhar seis retangulos custa mais que
   o proprio painel.
   =========================================================== */

.grafico{
  display:flex; align-items:flex-end; gap:14px;
  height:200px;
  padding-top:8px;
}
.grafico-col{
  flex:1;
  display:flex; flex-direction:column; justify-content:flex-end;
  height:100%;
  text-align:center;
}
.grafico-valor{
  font-size:12px; font-weight:600; color:var(--texto-2);
  margin:0 0 7px; white-space:nowrap;
}
.grafico-barra{
  background:var(--grad-barra);
  border-radius:10px 10px 4px 4px;
  /* Piso de 3px para o mes zerado ainda aparecer como coluna. */
  min-height:3px;
  transition:opacity .15s ease;
}
.grafico-col:hover .grafico-barra{ opacity:.82; }
.grafico-vazia{ background:var(--linha-2); }
.grafico-mes{
  margin:9px 0 0;
  font-size:12px; font-weight:500;
  color:var(--texto-2);
}

/* ===========================================================
   Listas
   =========================================================== */

.colunas{ display:grid; grid-template-columns:1.6fr 1fr; gap:16px; align-items:start; }
.pilha{ display:grid; gap:16px; }

.itens{ padding:0 12px 12px; display:grid; gap:8px; }

.item{
  display:flex; align-items:center; gap:12px;
  padding:13px 14px;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--raio-2);
  color:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
a.item:hover{ border-color:var(--linha-2); box-shadow:var(--sombra); }
.item-corpo{ min-width:0; flex:1; }
.item-titulo{
  /* `display:block` porque o markup usa <span>: dentro de um <a> so cabe
     conteudo em linha, e sem isso titulo e meta saem grudados. */
  display:block;
  margin:0; font-size:14px; font-weight:600; color:var(--tinta);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.item-meta{
  display:block;
  margin:2px 0 0; font-size:12.5px; color:var(--texto-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.item-numero{ text-align:right; flex-shrink:0; }
.item-numero b{ display:block; font-size:14px; font-weight:700; color:var(--tinta); }
.item-numero span{ font-size:11.5px; color:var(--texto-3); }

/* Data em bloco, como folhinha de calendario. */
.data-caixa{
  width:52px; flex-shrink:0;
  border:1px solid var(--linha);
  border-radius:var(--raio-3);
  text-align:center;
  padding:6px 0 5px;
  background:var(--bloco);
}
.data-caixa span{
  display:block;
  font-size:9px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--texto-2);
}
.data-caixa b{ display:block; font-size:19px; font-weight:700; line-height:1.1; color:var(--tinta); }

.rodape-lista{
  padding:0 24px 20px;
  font-size:12.5px; color:var(--texto-3);
}

/* Recado de canto, no tom da marca. */
.dica{
  display:flex; gap:12px;
  padding:16px 18px;
  background:var(--marca-tint-2);
  border:1px solid var(--marca-tint);
  border-radius:var(--raio);
}
.dica svg{ width:20px; height:20px; flex-shrink:0; stroke:var(--marca); fill:none; stroke-width:1.7; }
.dica b{ display:block; font-size:14px; font-weight:600; color:var(--tinta); margin-bottom:2px; }
.dica p{ margin:0; font-size:13px; color:var(--texto-2); line-height:1.5; }

/* ===========================================================
   Eventos
   =========================================================== */

.grade{
  display:grid;
  /* 340px porque o cartao carrega cinco valores em dinheiro mais a barra de
     ocupacao. Abaixo disso "R$ 3.984,50" comeca a quebrar linha. */
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:16px;
}

.evento-cartao{
  display:flex; flex-direction:column;
  background:var(--bloco);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  box-shadow:var(--sombra);
  overflow:hidden;
  color:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
}
.evento-cartao:hover{ transform:translateY(-2px); box-shadow:var(--sombra-2); }

.evento-capa{ position:relative; }
.evento-arte{ aspect-ratio:16/9; background:var(--linha); object-fit:cover; width:100%; }
.evento-selo{ position:absolute; top:12px; left:12px; background:var(--branco); }

.evento-corpo{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.evento-titulo{
  font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--tinta);
  margin:0 0 4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.evento-meta{
  font-size:12.5px; color:var(--texto-2); margin:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- numeros do cartao ---------- */
.evento-numeros{
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.evento-numeros-3{ grid-template-columns:repeat(3,1fr); margin-top:12px; }
.evento-rotulo{
  margin:0;
  font-size:9.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--texto-3);
}
.evento-valor{ margin:2px 0 0; font-size:16px; font-weight:700; letter-spacing:-.02em; color:var(--tinta); }
.evento-valor-2{ margin:2px 0 0; font-size:13px; font-weight:600; color:var(--texto); }
/* Parcelamento em andamento: recado no card, separado das Vendas. */
.evento-parcela{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:10px; padding:7px 10px;
  background:var(--marca-suave, rgba(30,34,168,.06)); border-radius:8px;
  font-size:12px; color:var(--texto);
}
.evento-parcela small{ color:var(--texto-3); font-weight:600; }
.evento-parcela b{ color:var(--tinta); font-weight:700; font-variant-numeric:tabular-nums; }

/* ---------- barra de ocupacao ---------- */
.ocupacao-alto{
  display:flex; align-items:baseline; gap:10px;
  margin:16px 0 6px;
  font-size:11.5px; color:var(--texto-2);
}
.ocupacao-alto span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ocupacao-alto b{ margin-left:auto; color:var(--tinta); font-weight:700; }
.ocupacao-trilho{
  height:6px; border-radius:99px;
  background:var(--linha);
  overflow:hidden;
  /* empurra o botao para o rodape do cartao, para os cartoes da linha
     terminarem alinhados mesmo com titulo de tamanhos diferentes. */
  margin-bottom:auto;
}
.ocupacao-trilho i{ display:block; height:100%; background:var(--grad-barra); border-radius:99px; }

.evento-corpo .btn-largo{ margin-top:16px; }

/* Contagem ao lado do filtro da lista. */
.filtro-conta{ margin-left:auto; font-size:12.5px; color:var(--texto-3); }

/* ---------- menu do evento ---------- */
.menu-evento{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:12px;
}
.menu-item{
  display:flex; align-items:flex-start; gap:11px;
  padding:14px 16px;
  background:var(--bloco);
  border:1px solid var(--linha);
  border-radius:var(--raio-2);
  box-shadow:var(--sombra);
  color:var(--texto);
  font-weight:600; font-size:14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.menu-item:hover{ border-color:var(--marca); box-shadow:var(--sombra-2); }
.menu-ponto{ width:8px; height:8px; border-radius:50%; background:var(--marca); flex-shrink:0; margin-top:6px; }
.menu-texto{ min-width:0; }
.menu-texto b{ display:block; font-size:13.5px; font-weight:600; color:var(--tinta); }
.menu-texto small{ display:block; font-size:11.5px; font-weight:400; color:var(--texto-2); margin-top:1px; }
.menu-item-off{ opacity:.45; pointer-events:none; box-shadow:none; }
.menu-item-off .menu-ponto{ background:var(--texto-3); }

/* ===========================================================
   Formulario
   =========================================================== */

.campo{ margin-bottom:14px; }
.campo label{ display:block; margin-bottom:6px; font-size:13px; font-weight:600; color:var(--texto); }
.campo input{
  width:100%; padding:12px 14px;
  border:1px solid var(--linha-2);
  border-radius:var(--raio-2);
  font-family:inherit; font-size:15px;
  color:var(--texto); background:var(--branco);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.campo input:focus{
  outline:0; border-color:var(--marca);
  box-shadow:0 0 0 3px var(--marca-tint);
}

/* Radio/checkbox NAO sao caixa full-width: a regra generica `.campo input`
   poe width:100% + padding + borda, o que estoura os controles. */
.campo input[type="radio"],
.campo input[type="checkbox"]{
  width:auto; padding:0; margin:0; border:0;
  box-shadow:none; accent-color:var(--marca);
  flex:0 0 auto;
}

/* Segmentado (ex.: "Tipo do link" do cupom): pilulas lado a lado. */
.seg{ display:inline-flex; gap:4px; padding:4px; border:1px solid var(--linha-2); border-radius:12px; background:#eef0f6; }
.seg label{ display:inline-flex !important; align-items:center; gap:7px; margin:0 !important; padding:8px 18px; border-radius:9px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--texto-2); }
.seg label:has(input:checked){ background:var(--branco); color:var(--marca); box-shadow:0 1px 4px rgba(20,24,115,.15); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px;
  border:0; border-radius:99px;
  font-family:inherit; font-size:14px; font-weight:600;
  color:var(--branco); cursor:pointer;
  /* overflow escondido para o gradiente nao vazar pelo canto. */
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-sm{ padding:7px 13px; font-size:12.5px; }
/* Filtros da area de Parcelamentos: em linha, quebrando quando estreito. */
.parc-filtros{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; padding:20px 24px; }
.parc-filtros .campo{ flex:1 1 170px; margin:0; display:flex; flex-direction:column; gap:6px; }
.parc-filtros .campo label{ font-size:12.5px; font-weight:600; color:var(--texto-2); }
.parc-filtros .campo .input{ width:100%; }
.parc-filtros .parc-filtros-acoes{ flex:0 0 auto; flex-direction:row; align-items:center; gap:8px; }
/* Modal da baixa manual. */
.parc-modal[hidden]{ display:none !important; }
.parc-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; }
.parc-modal-fundo{ position:absolute; inset:0; background:rgba(15,18,40,.55); }
.parc-modal-caixa{ position:relative; width:100%; max-width:440px; background:var(--branco);
  border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.3); }
.parc-modal-topo{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--linha); }
.parc-modal-topo b{ font-size:15px; color:var(--tinta); }
.parc-modal-x{ border:0; background:none; font-size:24px; line-height:1; color:var(--texto-3); cursor:pointer; padding:0 4px; }
.parc-modal-corpo{ padding:18px 20px; }
.parc-modal-corpo label{ display:block; font-size:12.5px; font-weight:600; color:var(--texto-2); margin:0 0 6px; }
.parc-modal-info{ font-size:13.5px; color:var(--tinta); font-weight:600; margin:0 0 14px; }
.parc-modal-nota{ font-size:12px; color:var(--texto-3); line-height:1.5; margin:10px 0 0; }
.parc-modal-pe{ display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--linha); }
.btn-forte{ background:var(--grad-botao); box-shadow:0 8px 22px rgba(30,34,168,.24); }
.btn-forte:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(30,34,168,.30); }
.btn-largo{ width:100%; padding:13px 22px; font-size:14.5px; }

.erro{
  background:var(--perigo-tint); border:1px solid rgba(185,28,74,.22);
  color:var(--perigo);
  border-radius:var(--raio-2); padding:10px 14px;
  font-size:13px; margin-bottom:14px;
}

.busca{
  width:270px; padding:9px 16px;
  border:1px solid var(--linha); border-radius:99px;
  font-family:inherit; font-size:13.5px; background:var(--branco);
  color:var(--texto);
}
.busca::placeholder{ color:var(--texto-3); }
.busca:focus{ outline:0; border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-tint); }

/* ===========================================================
   Login
   =========================================================== */

.login-tela{
  min-height:100vh;
  display:grid; place-items:center;
  background:var(--grad-botao);
  padding:20px;
}
.login-caixa{
  width:100%; max-width:400px;
  background:var(--branco);
  border-radius:var(--raio);
  padding:32px 28px;
  box-shadow:0 24px 60px rgba(10,14,74,.34);
}
.login-caixa h1{ margin:0 0 4px; font-size:21px; font-weight:700; letter-spacing:-.02em; color:var(--tinta); text-align:center; }
.login-caixa p{ margin:0 0 22px; font-size:13.5px; color:var(--texto-2); text-align:center; }
.login-lembrar{ display:flex; align-items:center; gap:8px; margin:2px 0 18px; font-size:13px; color:var(--texto-2); }
.area-estreita{ max-width:420px; margin:0 auto; }

/* ===========================================================
   Tabela
   =========================================================== */

.tabela{ width:100%; border-collapse:collapse; font-size:13.5px; }
.tabela th{
  text-align:left; padding:12px 16px;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--texto-3); border-bottom:1px solid var(--linha);
}
.tabela td{ padding:12px 16px; border-bottom:1px solid var(--linha); vertical-align:top; }
.tabela tr:last-child td{ border-bottom:0; }
.mudanca{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12px; color:var(--texto-2); }
.mudanca b{ color:var(--texto); }

.vazio{ padding:44px 20px; text-align:center; color:var(--texto-3); font-size:14px; }

/* ===========================================================
   Telas menores

   A coluna vira uma faixa rolavel no topo. Esconder o menu atras
   de um botao exigiria javascript para uma tela que ainda cabe.
   =========================================================== */

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

@media (max-width:820px){
  .app{ flex-direction:column; }
  .lateral{
    width:100%; height:auto; position:static;
    flex-direction:row; align-items:center; gap:8px;
    border-right:0; border-bottom:1px solid var(--linha);
    overflow-x:auto; padding-right:12px;
  }
  /* Na faixa horizontal a marca NAO cresce: o logo entrou como imagem de
     largura cheia e, num container que rola no eixo x, ele empurrava o menu
     inteiro para fora da tela - o menu continuava la, so que fora da vista. */
  .lateral-marca{ padding:10px 12px; white-space:nowrap; flex:0 0 auto; }
  .lateral-marca img{ max-width:118px; }
  /*
     A faixa horizontal com rolagem foi trocada por um menu que ABRE.
     Com quinze itens, rolar para o lado escondia o caminho inteiro atras do
     primeiro item - e nada na tela dizia que havia mais coisa la.
  */
  .lateral{ position:sticky; top:0; z-index:40; background:var(--branco); overflow:visible; }
  .lateral-abrir{
    display:inline-flex; align-items:center; gap:8px; margin-left:auto;
    padding:9px 14px; border:1px solid var(--linha-2); border-radius:99px;
    background:var(--branco); color:var(--texto); cursor:pointer;
    font-family:inherit; font-size:13.5px; font-weight:600;
  }
  .lateral-abrir svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
  .lateral-abrir[aria-expanded="true"]{ border-color:var(--marca); color:var(--marca); }

  .lateral-nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    max-height:70vh; overflow-y:auto;
    padding:10px 12px 14px; gap:2px;
    background:var(--branco); border-bottom:1px solid var(--linha);
    box-shadow:0 18px 34px rgba(15,23,41,.14);
  }
  .lateral.aberta .lateral-nav{ display:block; }
  .lateral.aberta .lateral-pe{ display:block; }

  /* Aberto, o menu volta a ser uma lista: os grupos e os titulos deles
     orientam quem procura, e era isso que a fila horizontal perdia. */
  .lateral-grupo{ display:block; }
  .lateral-titulo{ display:flex; }
  .lateral-link{ white-space:normal; margin-bottom:2px; }
  .lateral-pe{ display:none; padding:10px 12px 14px; border-top:1px solid var(--linha); }
  .topo{ padding:18px 16px 4px; flex-wrap:wrap; }
  .topo-direita{ width:100%; margin-left:0; }
  .conteudo{ padding:14px 16px 32px; }
  .busca{ width:100%; }
  .metrica-valor{ font-size:26px; }
  .metrica-marca{ width:105px; height:105px; }
}

/* ===========================================================
   Filtro de periodo
   =========================================================== */

.filtro{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:16px;
}
.filtro-atalhos{ display:flex; gap:4px; padding:4px; background:var(--bloco); border:1px solid var(--linha); border-radius:99px; }
.filtro-datas{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.filtro-datas span{ font-size:12.5px; color:var(--texto-3); }
.filtro-datas input{
  padding:7px 12px;
  border:1px solid var(--linha); border-radius:99px;
  font-family:inherit; font-size:13px; color:var(--texto);
  background:var(--branco);
}
.filtro-datas input:focus{ outline:0; border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-tint); }

.filtro-btn{
  padding:7px 16px;
  border:0; border-radius:99px;
  background:none;
  font-family:inherit; font-size:13px; font-weight:600;
  color:var(--texto-2); cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.filtro-btn:hover{ color:var(--texto); }
.filtro-btn.ativo{ background:var(--marca-tint); color:var(--marca); }
.filtro-aplicar{ border:1px solid var(--linha); background:var(--branco); }
.filtro-aplicar:hover{ border-color:var(--marca); color:var(--marca); }

/* ===========================================================
   Faixa de resumo

   Fundo com o gradiente da marca, porque e a unica faixa da
   tela que precisa parar o olho antes dos blocos.
   =========================================================== */

.resumo{
  position:relative;
  overflow:hidden;
  background:var(--grad-botao);
  border-radius:var(--raio);
  box-shadow:var(--sombra-2);
  padding:24px 26px;
  margin-bottom:16px;
  color:var(--branco);
}
.resumo-corpo{ position:relative; z-index:1; }
.resumo-rotulo{
  margin:0;
  font-size:10.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.resumo-numeros{ display:flex; align-items:flex-end; gap:44px; flex-wrap:wrap; margin-top:10px; }
.resumo-principal{ display:flex; align-items:center; gap:14px; }
.resumo-grande{
  margin:0;
  font-size:46px; font-weight:800;
  letter-spacing:-.04em; line-height:1;
}
.resumo-apoio{ margin:5px 0 0; font-size:12.5px; color:rgba(255,255,255,.68); }
.resumo-lado .resumo-rotulo{ color:rgba(255,255,255,.5); }
.resumo-medio{ margin:4px 0 0; font-size:23px; font-weight:700; letter-spacing:-.02em; }

.resumo .selo-sobe,
.resumo .selo-cai,
.resumo .selo-igual{ background:rgba(255,255,255,.18); color:var(--branco); }

/* A miniatura da serie encosta na borda direita, atras do texto. */
.resumo .linha-mini{
  position:absolute;
  right:0; bottom:0;
  width:52%; height:130px;
  opacity:.5;
  pointer-events:none;
}

/* ===========================================================
   Graficos (ApexCharts)

   A biblioteca desenha tudo; aqui so ficam a etiqueta, que e
   nossa, e os ajustes para o tema claro do painel.
   =========================================================== */

.resumo-spark{
  position:absolute;
  right:0; bottom:0;
  width:52%;
  opacity:.65;
  pointer-events:none;
}

.apex-dica{
  padding:9px 12px;
  background:var(--tinta);
  border-radius:var(--raio-3);
  color:var(--branco);
  font-size:12px;
  line-height:1.5;
  white-space:nowrap;
}
.apex-dica b{ display:block; font-size:11px; font-weight:600; color:rgba(255,255,255,.6); margin-bottom:2px; text-transform:capitalize; }
.apex-dica span{ display:block; }
.apex-dica-valor{ font-size:14px; font-weight:700; }
.apex-dica-qtd{ color:rgba(255,255,255,.72); }

/* A etiqueta do Apex traz moldura e sombra proprias, que brigam com a
   nossa. Como o conteudo ja e uma caixa fechada, a moldura sai. */
.apexcharts-tooltip.apexcharts-theme-light{
  border:0 !important;
  background:transparent !important;
  box-shadow:0 8px 20px rgba(15,23,41,.22) !important;
  border-radius:var(--raio-3) !important;
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title{ display:none; }

.apexcharts-xaxistooltip, .apexcharts-yaxistooltip{ display:none !important; }
.apexcharts-legend-text{ color:var(--texto-2) !important; font-family:var(--fonte) !important; }

/* ===========================================================
   Rosca
   =========================================================== */

.rosca{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.rosca svg{ width:160px; height:160px; flex-shrink:0; }
.rosca-fatia{ fill:none; stroke-width:22; }

/* Tons da mesma familia: a rosca compara partes de um todo, e cor
   de familia diferente sugeriria categorias sem relacao. */
.rosca-serie-1{ stroke:#2A2FD4; }
.rosca-serie-2{ stroke:#7C8BFF; }
.rosca-serie-3{ stroke:#C9CEE8; }

.rosca-total{
  text-anchor:middle;
  font-family:var(--fonte); font-size:24px; font-weight:800;
  letter-spacing:-.02em; fill:var(--tinta);
}
.rosca-legenda-miolo{
  text-anchor:middle;
  font-family:var(--fonte); font-size:11px; font-weight:500;
  fill:var(--texto-3);
}

.rosca-legenda{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.rosca-legenda li{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--texto-2); }
.rosca-legenda b{ margin-left:auto; color:var(--tinta); font-weight:700; }
.rosca-ponto{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.rosca-ponto.rosca-serie-1{ background:#2A2FD4; }
.rosca-ponto.rosca-serie-2{ background:#7C8BFF; }
.rosca-ponto.rosca-serie-3{ background:#C9CEE8; }

/* ===========================================================
   Barras horizontais
   =========================================================== */

.barras{ display:grid; gap:9px; }
.barra-linha{ display:flex; align-items:center; gap:12px; color:inherit; }
.barra-nome{
  width:150px; flex-shrink:0; text-align:right;
  font-size:12.5px; color:var(--texto-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.barra-linha:hover .barra-nome{ color:var(--marca); }
.barra-trilho{ flex:1; min-width:0; }
.barra-cheio{
  display:block;
  padding:6px 11px;
  background:var(--grad-barra);
  border-radius:8px;
  color:var(--branco);
  font-size:12px; font-weight:600;
  text-align:right;
  white-space:nowrap;
  transition:opacity .15s ease;
}
.barra-linha:hover .barra-cheio{ opacity:.85; }

@media (max-width:820px){
  .filtro-datas{ margin-left:0; width:100%; }
  .filtro-datas input{ flex:1; min-width:0; }
  .resumo .linha-mini{ display:none; }
  .resumo-numeros{ gap:24px; }
  .resumo-grande{ font-size:38px; }
  .barra-nome{ width:96px; }
}

/* ===========================================================
   Tabela larga

   A tabela de lotes tem sete colunas e nao cabe em tela
   estreita. Ela rola DENTRO do bloco, e nao arrastando a
   pagina inteira de lado.
   =========================================================== */

.rolagem{ overflow-x:auto; }
.rolagem .tabela{ min-width:760px; }

/* Segunda linha de uma celula: o detalhe que explica o valor de cima. */
.tabela .sub{ display:block; margin-top:2px; font-size:11.5px; color:var(--texto-3); font-weight:400; }
.tabela .sub b{ color:var(--tinta); font-weight:700; }
.tabela td b{ font-weight:600; color:var(--tinta); }

/* Area liberada mas ainda nao portada: acesa o suficiente para ler,
   apagada o suficiente para nao parecer clicavel. */
.menu-item-espera{ opacity:.62; pointer-events:none; box-shadow:none; }
.menu-item-espera .menu-ponto{ background:var(--texto-3); }

/* Item do menu do evento que JA e link ganha resposta ao passar o mouse. */
a.menu-item{ cursor:pointer; }
a.menu-item:hover .menu-texto b{ color:var(--marca); }

/* Motivo do cancelamento, no tom do que aconteceu. */
.motivo{ font-weight:600; }
.motivo-perigo{ color:var(--perigo); }
.motivo-alerta{ color:var(--alerta); }
.motivo-neutro{ color:var(--texto-3); }

/* O filtro dentro do cabecalho de um bloco nao precisa da margem
   que ele tem quando fica solto no topo da pagina. */
.bloco-topo .filtro-atalhos{ margin-left:auto; }

/* ===========================================================
   Cabecalho do evento

   Acompanha o evento em todas as areas. O cartao rola junto
   com a pagina; a barra de abas gruda no topo, porque trocar
   de area e a acao que mais se repete.
   =========================================================== */

.evento-cartao-topo{
  margin:6px 0 0;
  display:flex; align-items:flex-start; gap:16px;
  padding:20px 22px;
  background:var(--bloco);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  box-shadow:var(--sombra);
}

.voltar{
  width:38px; height:38px; flex-shrink:0;
  display:grid; place-items:center;
  border:1px solid var(--linha-2);
  border-radius:50%;
  background:var(--branco);
  color:var(--texto-2);
  transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
.voltar:hover{ border-color:var(--marca); color:var(--marca); transform:translateX(-2px); }
.voltar svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }

.evento-cartao-corpo{ min-width:0; flex:1; }
.evento-cartao-corpo h1{
  margin:0;
  font-size:26px; font-weight:700; letter-spacing:-.03em; line-height:1.2;
  color:var(--tinta);
}

.evento-pistas{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:9px; }
.pista{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px;
  border:1px solid var(--linha);
  border-radius:99px;
  background:var(--branco);
  font-size:12.5px; color:var(--texto-2);
  white-space:nowrap;
}
.pista svg{ width:14px; height:14px; stroke:var(--texto-3); fill:none; stroke-width:1.8; flex-shrink:0; }

.evento-acoes{ display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap; }

.btn-linha{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px;
  border:1px solid var(--linha-2);
  border-radius:99px;
  background:var(--branco);
  font-size:13px; font-weight:600;
  color:var(--texto);
  white-space:nowrap;
  transition:border-color .15s ease, color .15s ease;
}
.btn-linha:hover{ border-color:var(--marca); color:var(--marca); }
.btn-linha svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9; flex-shrink:0; }
.btn-linha-off{ opacity:.45; cursor:default; }
.btn-linha-off:hover{ border-color:var(--linha-2); color:var(--texto); }

.evento-acoes .btn{ padding:9px 17px; font-size:13px; }

/* ---------- barra de abas ---------- */

.abas-caixa{
  position:sticky; top:0; z-index:12;
  margin:14px 0 18px;
  background:var(--fundo);
  border-bottom:1px solid var(--linha);

  /* As bordas esmaecidas avisam que ha aba fora da vista. E o unico sinal
     que uma barra rolavel sem seta consegue dar. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
}

.abas{
  display:flex; align-items:center; gap:2px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:0 18px;
}
.abas::-webkit-scrollbar{ display:none; }

/* Marca do braco em que a barra esta. Sem ela, as mesmas abas em dois
   modos diferentes ficariam indistinguiveis de relance. */
.abas-marca{
  flex-shrink:0;
  display:inline-flex; align-items:center;
  margin-right:14px; padding:4px 10px;
  border-radius:99px;
  font-size:9.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  white-space:nowrap;
}
.abas-marca-venda{ background:var(--marca-tint); color:var(--marca); }
.abas-marca-operacao{ background:var(--alerta-tint); color:var(--alerta); }

/* O botao de troca de braco e o unico do cartao com peso de acao. */
.troca-modo svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9; }

.aba{
  flex-shrink:0;
  position:relative;
  padding:14px 14px 13px;
  font-size:13.5px; font-weight:500;
  color:var(--texto-2);
  white-space:nowrap;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .15s ease, border-color .15s ease;
}
.aba:hover{ color:var(--texto); }
.aba.ativa{ color:var(--tinta); font-weight:700; border-bottom-color:var(--marca); }

.aba-off{ opacity:.42; cursor:default; }
.aba-off:hover{ color:var(--texto-2); }

/* Ponto na aba de area que ainda vai existir, para diferenciar do que
   apenas nao foi portado. */
.aba-ponto{
  display:inline-block;
  width:5px; height:5px; border-radius:50%;
  background:var(--marca);
  margin-left:5px; vertical-align:middle;
}

@media (max-width:820px){
  .evento-cartao-topo{ flex-wrap:wrap; padding:16px; }
  .evento-cartao-corpo h1{ font-size:21px; }
  .evento-acoes{ width:100%; }
  .abas{ padding:0 12px; }
}

/* Enquanto o filtro busca o novo periodo, o conteudo antigo esmaece.
   Sem sinal nenhum o clique parece nao ter funcionado em conexao lenta. */
[data-painel-alvo]{ transition:opacity .12s ease; }
[data-painel-alvo].carregando,
[data-vendas].carregando{ opacity:.45; pointer-events:none; }



/* ===========================================================
   Scroll infinito da lista de eventos
   =========================================================== */

.mais-eventos{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:28px 0 40px;
  font-size:13px; color:var(--texto-3);
}
.mais-girando{
  width:16px; height:16px;
  border:2px solid var(--linha-2);
  border-top-color:var(--marca);
  border-radius:50%;
  animation:mais-gira .7s linear infinite;
}
@keyframes mais-gira{ to{ transform:rotate(360deg); } }

.mais-erro{ color:var(--perigo); }
.mais-erro .mais-girando{ display:none; }

.mais-fim{
  margin:0;
  padding:24px 0 36px;
  text-align:center;
  font-size:12.5px; color:var(--texto-3);
}

/* Sem `prefers-reduced-motion` o giro fica rodando o tempo todo para
   quem pediu ao sistema para reduzir animacao. */
@media (prefers-reduced-motion:reduce){
  .mais-girando{ animation:none; border-top-color:var(--linha-2); }
}

/* Unidade ao lado do numero da faixa de resumo: menor e mais apagada,
   para o olho pegar o numero antes da palavra. */
.resumo-unidade{ font-size:13px; font-weight:500; opacity:.62; margin-left:2px; }

/* Nota de rodape dentro de um bloco, para explicar um rotulo do grafico. */
.bloco-nota{
  margin:14px 0 0;
  font-size:11.5px; color:var(--texto-3); line-height:1.5;
}

/* Valor por canal, abaixo da rosca. */
.lista-canais{
  display:grid; gap:6px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--linha);
}
.lista-canais div{ display:flex; align-items:baseline; gap:10px; font-size:12.5px; color:var(--texto-2); }
.lista-canais b{ margin-left:auto; color:var(--tinta); font-weight:700; }
.lista-canais .canal-parcelamento{ margin-top:8px; padding-top:8px; border-top:1px dashed var(--linha, rgba(0,0,0,.08)); }
.lista-canais .canal-parcelamento small{ color:var(--texto-3); font-weight:600; }

/* Lote que vendeu mais do que a capacidade cadastrada. Nao e erro do
   painel: e o cadastro que ficou para tras das vendas. */
.aviso-estouro{
  display:inline-block;
  margin-left:6px; padding:1px 6px;
  border-radius:99px;
  background:var(--alerta-tint); color:var(--alerta);
  font-size:10px; font-weight:700;
  letter-spacing:.02em;
  cursor:help;
}

/* Os numeros do funil em texto, porque a barra sozinha esconde
   os valores pequenos ao lado de um valor grande. */
.funil-numeros{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:8px 16px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--linha);
}
.funil-numeros div{ display:flex; align-items:baseline; gap:8px; font-size:12.5px; color:var(--texto-2); }
.funil-numeros b{ margin-left:auto; font-size:14px; font-weight:700; color:var(--tinta); }
.funil-numeros .funil-ok{ color:var(--ok); }
.funil-numeros .funil-ruim{ color:var(--perigo); }

/* ===========================================================
   Formulario

   Grade de doze colunas. Os campos declaram quantas ocupam
   pela classe, para o Blade nao carregar `style` inline em
   cada um deles.
   =========================================================== */

.formulario{ display:grid; gap:16px; }

.campos{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px 16px; }

.campos .campo{ grid-column:span 12; margin:0; }
.campos .campo-cheio{ grid-column:span 12; }
.campos .campo-2{ grid-column:span 6; }
.campos .campo-3{ grid-column:span 4; }
.campos .campo-4{ grid-column:span 3; }
.campos .campo-6{ grid-column:span 2; }

.campo label{
  display:block; margin-bottom:6px;
  font-size:13px; font-weight:600; color:var(--texto);
}
.campo-opcional{
  margin-left:4px;
  font-size:11px; font-weight:500; color:var(--texto-3);
  text-transform:none; letter-spacing:0;
}

.campo input[type="text"],
.campo input[type="date"],
.campo input[type="time"],
.campo input[type="number"],
.campo input[type="email"],
.campo select,
.campo textarea{
  width:100%; padding:11px 13px;
  border:1px solid var(--linha-2);
  border-radius:var(--raio-2);
  font-family:inherit; font-size:14.5px;
  color:var(--texto); background:var(--branco);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.campo textarea{ resize:vertical; min-height:96px; line-height:1.55; }
.campo select{ cursor:pointer; }

.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:0; border-color:var(--marca);
  box-shadow:0 0 0 3px var(--marca-tint);
}

.campo small{
  display:block; margin-top:5px;
  font-size:11.5px; color:var(--texto-3); line-height:1.5;
}
.campo input[type="file"]{
  width:100%; padding:9px 0;
  font-size:12.5px; color:var(--texto-2);
}

/* Campo com unidade colada, como o "%" do desconto. */
.campo-sufixo{ display:flex; align-items:stretch; }
.campo-sufixo input{ border-top-right-radius:0; border-bottom-right-radius:0; }
.campo-sufixo span{
  display:grid; place-items:center;
  padding:0 14px;
  border:1px solid var(--linha-2); border-left:0;
  border-radius:0 var(--raio-2) var(--raio-2) 0;
  background:var(--bloco);
  font-size:13px; font-weight:600; color:var(--texto-2);
}

/* ===========================================================
   Arte do evento: a imagem E o seletor.

   Antes a previa ficava por cima e o input embaixo, solto. A
   arte ocupava meia tela sem fazer nada e o "Procurar..." do
   navegador virava um detalhe perdido depois dela. Agora o
   input cobre a moldura inteira, invisivel, e clicar em
   qualquer ponto da arte abre a escolha do arquivo.
   =========================================================== */
.arte-alvo{
  position:relative; display:block;
  width:100%; aspect-ratio:16/9;
  border:1px solid var(--linha);
  border-radius:var(--raio-2);
  background:var(--bloco);
  overflow:hidden;
  cursor:pointer;
  margin-bottom:8px;
}
.arte-alvo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* Sem imagem ainda: moldura tracejada, para nao parecer um
   campo quebrado. */
.arte-alvo.arte-vazia{
  border-style:dashed;
  border-color:var(--linha-2);
}

/* O input cobre tudo e some. O clique continua sendo dele, entao
   o teclado tambem chega aqui: Tab foca, Enter abre. */
.arte-alvo input[type=file]{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0; cursor:pointer;
}

.arte-acao{
  position:absolute; left:50%; bottom:10px;
  transform:translateX(-50%);
  padding:6px 14px;
  border-radius:999px;
  background:rgba(17,19,32,.72);
  color:#fff; font-size:12.5px; font-weight:600;
  white-space:nowrap;
  pointer-events:none;
}

/* Sem arte, o rotulo vai para o meio: e a unica coisa na moldura. */
.arte-alvo.arte-vazia .arte-acao{
  top:50%; bottom:auto;
  transform:translate(-50%,-50%);
  background:var(--marca);
}

.arte-alvo:hover{ border-color:var(--marca); }
.arte-alvo:has(input:focus-visible){
  outline:2px solid var(--marca); outline-offset:2px;
}

/* Opcao de liga e desliga, com explicacao ao lado. */
.opcao{
  display:flex; align-items:flex-start; gap:11px;
  padding:12px 14px;
  border:1px solid var(--linha);
  border-radius:var(--raio-2);
  background:var(--branco);
  margin-bottom:8px;
  cursor:pointer;
  transition:border-color .15s ease;
}
.opcao:hover{ border-color:var(--linha-2); }
.opcao input[type="checkbox"]{ margin-top:2px; width:16px; height:16px; accent-color:var(--marca); flex-shrink:0; }
.opcao b{ display:block; font-size:13.5px; font-weight:600; color:var(--tinta); }
.opcao small{ display:block; margin-top:1px; font-size:11.5px; color:var(--texto-2); }

.formulario-pe{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding:4px 0 32px;
}

@media (max-width:820px){
  .campos .campo-2, .campos .campo-3, .campos .campo-4{ grid-column:span 12; }
  .campos .campo-6{ grid-column:span 6; }
  .formulario-pe{ flex-direction:column-reverse; }
  .formulario-pe .btn, .formulario-pe .btn-linha{ width:100%; justify-content:center; }
}

/* Recado de sucesso apos salvar. */
.recado{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  margin-bottom:16px;
  border:1px solid rgba(14,159,110,.24);
  border-radius:var(--raio-2);
  background:var(--ok-tint);
  color:var(--ok);
  font-size:13.5px; font-weight:600;
}

/* Recado de erro, irmao do .recado de sucesso. */
.aviso-erro{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; margin-bottom:16px;
  border:1px solid rgba(185,28,74,.24);
  border-radius:var(--raio-2);
  background:var(--perigo-tint); color:var(--perigo);
  font-size:13.5px; font-weight:600;
}

/* Campo com prefixo colado, como o "R$" do preco. */
.campo-prefixo{ display:flex; align-items:stretch; }
.campo-prefixo span{
  display:grid; place-items:center;
  padding:0 13px;
  border:1px solid var(--linha-2); border-right:0;
  border-radius:var(--raio-2) 0 0 var(--raio-2);
  background:var(--bloco);
  font-size:13px; font-weight:600; color:var(--texto-2);
}
.campo-prefixo input{ border-top-left-radius:0; border-bottom-left-radius:0; }

/* O que vier depois do titulo no topo do bloco vai para a direita.
   Antes so `.filtro-atalhos` tinha essa regra, entao um botao
   solto encostava no subtitulo e montava em cima dele. */
.bloco-topo > :not(:first-child){ margin-left:auto; flex-shrink:0; }
.bloco-topo > div:first-child{ min-width:0; }

/* ===========================================================
   Menu de engrenagem na linha da tabela

   `details` no lugar de javascript: fecha no Esc, navega por
   teclado e nao depende de script para abrir.
   =========================================================== */

.menu-acoes{ position:relative; display:inline-block; }

.menu-acoes summary{
  display:grid; place-items:center;
  width:32px; height:32px;
  margin-left:auto;
  border:1px solid transparent; border-radius:var(--raio-2);
  background:var(--marca-tint);
  color:var(--marca);
  cursor:pointer;
  list-style:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.menu-acoes summary::-webkit-details-marker{ display:none; }
.menu-acoes summary::marker{ content:""; }

.menu-acoes summary svg{
  width:16px; height:16px;
  stroke:currentColor; fill:none; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .25s ease;
}
.menu-acoes summary:hover{ background:var(--marca); color:#fff; }
.menu-acoes summary:focus-visible{ outline:2px solid var(--marca); outline-offset:2px; }

/* Aberto, o botao fica cheio: e a cor que liga o menu que
   acabou de aparecer ao ponto de onde ele saiu. */
.menu-acoes[open] summary{ background:var(--marca); color:#fff; }

.menu-acoes-lista{
  position:absolute; right:0; top:calc(100% + 6px);
  z-index:40;
  min-width:172px;
  padding:5px;
  border:1px solid var(--linha);
  border-radius:var(--raio-2);
  background:var(--branco);
  box-shadow:0 10px 28px rgba(16,20,45,.14), 0 2px 6px rgba(16,20,45,.06);
}

.menu-acoes-lista form{ display:block; }

.menu-acoes-lista a,
.menu-acoes-lista button{
  display:block; width:100%;
  padding:8px 11px;
  border:0; border-radius:calc(var(--raio-2) - 2px);
  background:none;
  font-family:inherit; font-size:13px; font-weight:500;
  color:var(--texto); text-align:left; white-space:nowrap;
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.menu-acoes-lista a:hover,
.menu-acoes-lista button:hover{ background:var(--bloco); color:var(--tinta); }
.menu-acoes-lista .menu-perigo{ color:var(--perigo); }
.menu-acoes-lista .menu-perigo:hover{ background:var(--perigo-tint); color:var(--perigo); }

/* A ultima coluna nao estica: a engrenagem fica colada na direita. */
.tabela td:has(.menu-acoes){ text-align:right; }

/* ===========================================================
   Interruptor de venda, lapis de editar e chave da taxa
   =========================================================== */

/* A coluna de acoes da tabela. O lapis fica sempre; a
   engrenagem so aparece quando ha acao rara para guardar. */
.acoes-linha{
  display:flex; align-items:center; justify-content:flex-end; gap:6px;
}

.icone-acao{
  display:grid; place-items:center;
  width:32px; height:32px;
  border:1px solid transparent; border-radius:var(--raio-2);
  background:var(--marca-tint);
  color:var(--marca);
  transition:background .15s ease, color .15s ease;
}
.icone-acao svg{
  width:16px; height:16px;
  stroke:currentColor; fill:none; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
.icone-acao:hover{ background:var(--marca); color:#fff; }
.icone-acao:focus-visible{ outline:2px solid var(--marca); outline-offset:2px; }

/* O interruptor da lista de lotes.

   Ligado usa o mesmo verde do selo "Ativo" que ele substituiu: a
   tela ja ensinou que verde e "esta vendendo", e trocar a cor
   agora obrigaria a reaprender. */
.interruptor{
  display:block;
  width:40px; height:22px;
  padding:0;
  border:0; border-radius:999px;
  background:var(--linha-2);
  cursor:pointer;
  transition:background .18s ease, opacity .18s ease;
}
.interruptor i{
  display:block;
  width:16px; height:16px;
  margin:3px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(16,20,45,.3);
  transition:transform .18s ease;
}
.interruptor.ligado{ background:var(--ok); }
.interruptor.ligado i{ transform:translateX(18px); }
.interruptor:focus-visible{ outline:2px solid var(--marca); outline-offset:2px; }

/* Enquanto o servidor nao responde a chave nao anda. Fingir que
   ja trocou seria mentir quando a resposta vier negativa. */
.interruptor.ocupado{ opacity:.5; cursor:progress; }

.interruptor-texto{ margin-top:4px; }

/* A opcao em forma de chave, para o que mexe em dinheiro.
   O quadradinho comum nao carrega peso suficiente para
   "abrir mao da taxa em todas as vendas deste lote". */
.opcao-chave{ position:relative; }

.opcao-chave input[type="checkbox"]{
  position:absolute; opacity:0;
  width:0; height:0; margin:0;
}

.opcao-chave .chave{
  flex-shrink:0;
  margin-top:1px;
  width:40px; height:22px;
  border-radius:999px;
  background:var(--linha-2);
  transition:background .18s ease;
}
.opcao-chave .chave i{
  display:block;
  width:16px; height:16px;
  margin:3px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(16,20,45,.3);
  transition:transform .18s ease;
}
.opcao-chave input:checked ~ .chave{ background:var(--marca); }
.opcao-chave input:checked ~ .chave i{ transform:translateX(18px); }
.opcao-chave input:focus-visible ~ .chave{ outline:2px solid var(--marca); outline-offset:2px; }

/* O aviso do dinheiro. Fica escondido com a chave desligada
   porque, desligada, nao ha nada de anormal para avisar. */
.opcao .opcao-aviso{
  display:none;
  margin-top:8px;
  padding:8px 10px;
  border-radius:calc(var(--raio-2) - 4px);
  background:var(--alerta-tint);
  color:var(--alerta);
  font-size:11.5px; font-weight:500; line-height:1.45;
}
.opcao-chave input:checked ~ span .opcao-aviso{ display:block; }

/* ===========================================================
   Setores, marcacao de lugar e ordem por arrasto
   =========================================================== */

.oculto-visual{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* A alca de arrastar. Ela e cinza parada e ganha cor no hover:
   parada, competiria com o lapis pela atencao da linha. */
.celula-alca{ width:1%; padding-right:0 !important; }

.alca{
  display:grid; place-items:center;
  width:24px; height:28px;
  color:var(--texto-3);
  cursor:grab;
  touch-action:none;
}
.alca svg{ width:16px; height:16px; fill:currentColor; }
.alca:hover{ color:var(--marca); }
.alca:active{ cursor:grabbing; }

/* A linha em viagem. Fica translucida no lugar de origem para
   a pessoa nao perder de onde ela saiu. */
tr.arrastando{ opacity:.35; }

/* O trilho onde ela vai cair. Uma barra na borda de cima diz o
   destino sem empurrar a tabela e sem remontar o layout. */
tr.alvo-arrasto td{ box-shadow:inset 0 2px 0 var(--marca); }

/* ---- Setores ---- */

.setor-form{ padding:6px 24px 20px; }

/* Dentro do formulario de criacao a grade abre mais: e uma area de
   digitacao, nao uma tabela, e campo colado em campo cansa. */
.setor-form .campos{ gap:18px 20px; }
/* So o formulario SIMPLES (um campo + botoes) e flex. O :not
   protege os formularios de grade: sem ele, o display:flex ganha
   da grade do .campos e espreme seis campos numa linha so. */
.setor-form form:not(.campos){ display:flex; gap:8px; flex-wrap:wrap; }
.setor-form input{
  flex:1; min-width:220px;
  padding:9px 12px;
  border:1px solid var(--linha); border-radius:var(--raio-2);
  font-family:inherit; font-size:13.5px; color:var(--tinta);
  background:var(--branco);
}
.setor-form input:focus{ outline:2px solid var(--marca); outline-offset:-1px; border-color:var(--marca); }

.setor-lista{ padding:0 24px; }

.setor-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 0;
  border-bottom:1px solid var(--linha);
}
.setor-item:last-child{ border-bottom:0; }

.setor-nome{ flex:1; font-size:13.5px; font-weight:600; color:var(--tinta); }
.setor-qtd{ font-size:12px; color:var(--texto-2); }
.setor-acoes{ display:inline-flex; gap:6px; }

/* Renomear e apagar sao acoes de manutencao, nao o caminho
   principal da tela: por isso o icone comeca sem o fundo
   tingido que o lapis do lote usa. */
.icone-acao-fraco{ background:none; color:var(--texto-2); }
.icone-acao-fraco:hover{ background:var(--marca-tint); color:var(--marca); }

.icone-acao-perigo{ background:none; color:var(--texto-2); }
.icone-acao-perigo:hover{ background:var(--perigo-tint); color:var(--perigo); }

.setor-vazio{
  padding:18px 0 22px;
  font-size:13px; color:var(--texto-2); line-height:1.5;
}

.setor-aviso{
  margin:10px 0 2px;
  padding:9px 11px;
  border-radius:calc(var(--raio-2) - 4px);
  background:var(--alerta-tint);
  color:var(--alerta);
  font-size:12px; font-weight:500;
}

/* ---- Ajustes do evento inteiro: marcacao de lugar e taxa ---- */

.ajuste-evento{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
  margin-top:4px;
  padding:14px 24px 18px;
  border-top:1px solid var(--linha);
}
.ajuste-evento > div{ flex:1; min-width:240px; }
.ajuste-evento b{ font-size:13.5px; color:var(--tinta); }
.ajuste-evento .bloco-apoio{ margin-top:3px; }

/* Aqui o ligado e azul, e nao verde como no lote.

   Verde na tabela quer dizer "esta vendendo". Estas chaves nao
   vendem nada sozinhas: sao modos de operacao do evento, entao usam
   a cor da marca para nao serem lidas como venda no ar. */
.ajuste-evento .interruptor.ligado{ background:var(--marca); }

/* ===========================================================
   SweetAlert vestido com o tema do painel

   A biblioteca e de 2017 e traz a propria cara: fonte serifada
   do sistema, botao chapado e canto de 5px. Sem estas linhas o
   dialogo entraria na tela como peca de outro painel.
   =========================================================== */

.sweet-overlay{ background:rgba(15,23,41,.55) !important; }

.sweet-alert{
  font-family:'Inter', system-ui, -apple-system, sans-serif !important;
  border-radius:var(--raio) !important;
  padding:30px 30px 26px !important;
  box-shadow:0 24px 60px rgba(16,20,45,.24), 0 4px 12px rgba(16,20,45,.08) !important;
}

.sweet-alert h2{
  font-size:19px !important; font-weight:700 !important;
  letter-spacing:-.02em !important;
  color:var(--tinta) !important;
  margin:0 0 8px !important; padding:0 !important;
  line-height:1.3 !important;
}

.sweet-alert p{
  font-size:13.5px !important; font-weight:400 !important;
  color:var(--texto-2) !important;
  line-height:1.55 !important;
}

.sweet-alert .sa-button-container{ margin-top:6px; }

/* O botao de confirmar usa o gradiente da marca, nunca o azul
   chapado que a biblioteca traz. */
.sweet-alert button.confirm{
  background:var(--grad-botao) !important;
  border-radius:99px !important;
  padding:11px 24px !important;
  font-family:inherit !important; font-size:14px !important; font-weight:600 !important;
  box-shadow:0 8px 22px rgba(30,34,168,.24) !important;
  transition:transform .15s ease, box-shadow .15s ease !important;
}
.sweet-alert button.confirm:hover{
  background:var(--grad-botao) !important;
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(30,34,168,.30) !important;
}
.sweet-alert button.confirm:focus{ box-shadow:0 0 0 3px var(--marca-tint) !important; }

/* Cancelar e a saida segura: fica claro, sem peso, para nao
   competir com a acao que a pessoa veio fazer. */
.sweet-alert button.cancel{
  background:var(--bloco) !important;
  border:1px solid var(--linha) !important;
  border-radius:99px !important;
  padding:10px 22px !important;
  font-family:inherit !important; font-size:14px !important; font-weight:600 !important;
  color:var(--texto) !important;
}
.sweet-alert button.cancel:hover{ background:var(--branco) !important; border-color:var(--linha-2) !important; }

/* O icone de aviso da biblioteca vem laranja-mostarda; aqui ele
   usa o mesmo laranja dos avisos do painel. */
.sweet-alert .sa-icon.sa-warning{ border-color:var(--alerta) !important; }
.sweet-alert .sa-icon.sa-warning .sa-body,
.sweet-alert .sa-icon.sa-warning .sa-dot{ background-color:var(--alerta) !important; }

/* Recado dentro do menu de acoes, no lugar de um botao que nao
   existe. Sem hover e sem cursor de clique: ele e explicacao,
   nao acao, e parecer clicavel seria uma segunda promessa falsa. */
.menu-recado{
  max-width:230px;
  margin:0;
  padding:9px 11px;
  font-size:12px; font-weight:400; line-height:1.45;
  color:var(--texto-2);
}

/* ===========================================================
   Vendas: a gaveta de ingressos e a pagina do pedido
   =========================================================== */

.celula-abrir{ width:1%; padding-right:0 !important; }

.abrir-pedido{
  display:grid; place-items:center;
  width:26px; height:26px;
  padding:0;
  border:0; border-radius:8px;
  background:none;
  color:var(--texto-3);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.abrir-pedido svg{
  width:16px; height:16px;
  stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .18s ease;
}
.abrir-pedido:hover{ background:var(--marca-tint); color:var(--marca); }
.abrir-pedido:focus-visible{ outline:2px solid var(--marca); outline-offset:2px; }

/* Aberta, a seta aponta para baixo: para o conteudo que ela revelou. */
.abrir-pedido[aria-expanded="true"]{ background:var(--marca-tint); color:var(--marca); }
.abrir-pedido[aria-expanded="true"] svg{ transform:rotate(90deg); }

/* A gaveta usa o cinza do bloco para se separar da linha que a
   abriu, sem virar um segundo cartao dentro da tabela. */
.linha-gaveta > td{ padding:0 !important; background:var(--bloco); }

.gaveta{ padding:14px 18px 16px; }

.gaveta-topo{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.gaveta-topo b{ font-size:13px; color:var(--tinta); }

.btn-miudo{ padding:7px 14px; font-size:12.5px; }

.gaveta-carregando{ padding:10px 0; font-size:12.5px; color:var(--texto-2); }

.ingressos-vazio{
  padding:10px 0;
  font-size:12.5px; color:var(--texto-2); line-height:1.5;
}

.ingressos-lista{ width:100%; border-collapse:collapse; }
.ingressos-lista th{
  padding:6px 10px 6px 0;
  text-align:left;
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--texto-3);
  border-bottom:1px solid var(--linha);
}
.ingressos-lista td{
  padding:9px 10px 9px 0;
  font-size:13px; color:var(--texto);
  border-bottom:1px solid var(--linha);
  vertical-align:top;
}
.ingressos-lista tr:last-child td{ border-bottom:0; }

/* Cancelado fica apagado, e nao escondido: ele explica a diferenca
   entre o total do pedido e o que vale na portaria. */
.ingresso-morto{ opacity:.55; }

/* ---- Pagina do pedido ---- */

.ficha{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px 20px;
}
.ficha > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ficha span{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--texto-3); }
.ficha b{ font-size:13.5px; font-weight:600; color:var(--tinta); overflow-wrap:anywhere; }

.totais{ max-width:340px; margin-left:auto; }
.totais > div{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:8px 0;
  font-size:13.5px; color:var(--texto-2);
  border-bottom:1px solid var(--linha);
}
.totais b{ color:var(--tinta); font-weight:600; }
.totais-fim{ border-bottom:0 !important; padding-top:12px !important; }
.totais-fim span{ font-weight:600; color:var(--tinta); }
.totais-fim b{ font-size:18px; }

/* A resposta do gateway e texto livre e as vezes longa. Ela quebra
   em vez de esticar a tabela ate o scroll horizontal engolir tudo. */
.celula-observacao{
  max-width:280px;
  font-size:12px; color:var(--texto-2);
  overflow-wrap:anywhere;
}

/* ===========================================================
   Acoes do pedido
   =========================================================== */

.acoes-pedido{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.acoes-pedido form{ margin:0; }

/* Botao de contorno: acao real, mas nao a principal da tela. */
.btn-borda{
  background:var(--branco);
  border:1px solid var(--linha-2);
  color:var(--texto);
  box-shadow:none;
}
.btn-borda:hover{ border-color:var(--marca); color:var(--marca); }

/* O vermelho fica so no botao que tira dinheiro ou mata o pedido. */
.btn-perigo{
  background:var(--perigo);
  box-shadow:0 8px 22px rgba(185,28,74,.22);
}
.btn-perigo:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(185,28,74,.28); }
.btn-perigo:disabled, .btn-borda:disabled, .btn:disabled{
  opacity:.5; cursor:not-allowed; transform:none; box-shadow:none;
}

.recado-ok{
  background:var(--ok-tint); border:1px solid rgba(14,159,110,.22);
  color:var(--ok);
  border-radius:var(--raio-2); padding:10px 14px; font-size:13px;
}
.recado-aviso{
  background:var(--alerta-tint); border:1px solid rgba(180,83,9,.22);
  color:var(--alerta);
  border-radius:var(--raio-2); padding:10px 14px; font-size:13px;
}

.aviso-2fa{
  margin:12px 0 0;
  padding:9px 11px;
  border-radius:calc(var(--raio-2) - 4px);
  background:var(--alerta-tint);
  color:var(--alerta);
  font-size:12px; font-weight:500; line-height:1.45;
}

.erro-estorno{
  font-size:12.5px; font-weight:500; color:var(--perigo);
  max-width:380px; text-align:right;
}

/* ===========================================================
   Cupons
   =========================================================== */

/* A pastilha tambem vira botao (copiar link); o reset e para o
   <button> nao chegar com a cara do sistema. */
button.pastilha{
  font-family:inherit; cursor:pointer;
  background:var(--branco);
}

/* Pausado fica apagado inteiro, menos a coluna de acoes: a linha
   conta historia velha, mas religar e editar continuam vivos. */
.cupom-pausado td{ opacity:.55; }
.cupom-pausado td:last-child,
.cupom-pausado td:nth-last-child(2){ opacity:1; }

/* O "copiado!" de feedback, no lugar do texto do botao. */
[data-copiar].copiado{
  color:var(--ok);
  border-color:var(--ok);
}

/* ---- Primeira compra, podio e sinais ---- */

.primeira-compra{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px;
}
.primeira-compra-caixa{
  border:1px solid var(--linha);
  border-radius:var(--raio-2);
  padding:14px;
  background:var(--branco);
}
.primeira-compra-topo{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px;
}
.primeira-compra-topo b{ font-size:13.5px; color:var(--tinta); }
.primeira-compra-linha{ display:flex; align-items:flex-end; gap:10px; }
.primeira-compra-linha .campo{ flex:1; margin:0; }

/* Os paineis de analise lado a lado; empilham no estreito. */
.cupons-paineis{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
@media (max-width: 980px){ .cupons-paineis{ grid-template-columns:1fr; } }

.podio{ list-style:none; margin:0 0 14px; padding:0; }
.podio li{
  display:flex; align-items:center; gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--linha);
}
.podio li:last-child{ border-bottom:0; }

/* O primeiro lugar leva a cor; os outros ficam neutros. Tres
   medalhas coloridas viram enfeite e ninguem acha o campeao. */
.podio-posicao{
  display:grid; place-items:center;
  width:26px; height:26px; flex-shrink:0;
  border-radius:50%;
  background:rgba(15,23,41,.06);
  font-size:12.5px; font-weight:700; color:var(--texto-2);
}
.podio li:first-child .podio-posicao{ background:var(--marca); color:#fff; }
.podio-nome{ flex:1; min-width:0; }
.podio-nome b{ font-size:13.5px; color:var(--tinta); }
.podio-valor{ font-size:13.5px; color:var(--tinta); white-space:nowrap; }

.sinais{ display:flex; flex-direction:column; gap:10px; }
.sinal{
  padding:10px 12px;
  border:1px solid var(--linha);
  border-radius:var(--raio-2);
  background:var(--branco);
  font-size:13px; color:var(--texto); line-height:1.5;
}
.sinal b{ color:var(--tinta); }
.sinal-alerta{ border-color:rgba(180,83,9,.3); background:var(--alerta-tint); }
.sinal-info{ border-color:rgba(42,47,212,.25); background:var(--marca-tint); }

/* Anexo por tarefa do checklist: o clipe e o proprio seletor de arquivo. */
.anexo-form{ display:inline-flex; }
.anexo-form label{ cursor:pointer; }
.anexo-form.carregando{ opacity:.4; pointer-events:none; }
.icone-acao-anexo{ color:var(--marca); }

/* O bloco do processo dentro da etapa Alvaras do checklist. */
.prc{
  margin:14px 12px 6px; padding:14px 16px;
  background:var(--fundo); border-radius:var(--raio-2);
}
.prc.carregando{ opacity:.45; pointer-events:none; }
.prc-topo{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.prc-topo b{ display:block; font-size:14px; }
.prc-topo small{ max-width:520px; }
.prc-senha{
  display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-top:14px;
}
.prc-senha .campo label{ display:block; margin-bottom:5px; font-size:12.5px; font-weight:600; color:var(--texto-2); }
.prc-senha .campo input{
  padding:9px 12px; border:1px solid var(--linha-2); border-radius:var(--raio-2);
  font-family:inherit; font-size:13px; background:var(--branco);
}

/* ---- Alvaras do evento ---- */
.alvara-anexo{ display:inline-block; margin-left:8px; }
.alvara-anexo label{ cursor:pointer; }
.alvara-editar{ background:var(--fundo); border-radius:var(--raio-2); padding:12px; }
.alvara-link{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.alvara-link input{
  flex:1; min-width:260px; padding:10px 12px;
  border:1px solid var(--linha-2); border-radius:var(--raio-2);
  font-family:inherit; font-size:13px; color:var(--texto-2); background:var(--fundo);
}

/* ---- Apresentacao da gestao (primeira visita, opt-in) ---- */
.gestao-apresenta{ display:flex; justify-content:center; padding:20px 0; }
.gestao-apresenta-cartao{
  max-width:860px; width:100%;
  background:var(--branco); border:1px solid var(--linha);
  border-radius:var(--raio); padding:34px 38px;
}
.gestao-apresenta-cartao h1{ margin:10px 0 0; font-size:24px; letter-spacing:-.4px; }
.gestao-apresenta-intro{ margin:10px 0 0; font-size:14.5px; color:var(--texto-2); line-height:1.55; }
.gestao-apresenta-grade{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:22px;
}
@media (max-width: 900px){ .gestao-apresenta-grade{ grid-template-columns:1fr 1fr; } }
@media (max-width: 600px){ .gestao-apresenta-grade{ grid-template-columns:1fr; } }
.gestao-apresenta-grade>div{
  background:var(--fundo); border-radius:var(--raio-2); padding:14px 15px;
}
.gestao-apresenta-grade b{ display:block; font-size:13.5px; margin-bottom:4px; }
.gestao-apresenta-grade span{ font-size:12.5px; color:var(--texto-3); line-height:1.45; }
.gestao-apresenta-acoes{
  display:flex; align-items:center; gap:10px; margin-top:24px; flex-wrap:wrap;
}

/* ---- Produtos ---- */

.produto-nome{ display:flex; align-items:center; gap:11px; }
.produto-nome > span{ min-width:0; }

.produto-foto{
  width:40px; height:40px; flex-shrink:0;
  border-radius:10px;
  object-fit:cover;
  border:1px solid var(--linha);
  background:var(--branco);
}

/* Sem foto, uma caixinha desenhada: buraco vazio na coluna faria a
   linha com foto parecer desalinhada da sem foto. */
.produto-foto-vazia{
  display:grid; place-items:center;
  color:var(--texto-3);
}
.produto-foto-vazia svg{
  width:20px; height:20px;
  stroke:currentColor; fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ===========================================================
   GESTAO DO EVENTO
   O outro braco do painel: projeto, nao venda. A estrutura segue
   a referencia (hero + regua de abas + KPIs), com a cara clara e
   azul do 2.0.
   =========================================================== */

.conteudo > .gestao-hero{ margin-bottom:16px; }

.gestao-hero{
  background:linear-gradient(120deg, var(--marca-tint-2) 0%, var(--bloco) 45%);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  box-shadow:var(--sombra);
  padding:20px 24px 0;
}

.gestao-hero-topo{
  display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap;
}

.gestao-voltar{
  display:grid; place-items:center;
  width:38px; height:38px; flex-shrink:0;
  margin-top:3px;
  border:1px solid var(--linha-2); border-radius:50%;
  background:var(--branco);
  color:var(--texto);
  transition:border-color .15s ease, color .15s ease;
}
.gestao-voltar svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.gestao-voltar:hover{ border-color:var(--marca); color:var(--marca); }

.gestao-hero-nome{ flex:1; min-width:240px; }
.gestao-hero-nome h1{
  margin:0 0 8px;
  font-size:26px; font-weight:800; letter-spacing:-.03em;
  color:var(--tinta);
}
.gestao-hero-pistas{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gestao-hero-pistas .pista{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px;
  border:1px solid var(--linha); border-radius:99px;
  background:var(--branco);
  font-size:12.5px; color:var(--texto-2);
}
.gestao-hero-pistas .pista svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; }

.gestao-hero-acoes{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* A regua de abas da gestao, colada na base do hero. */
.gestao-abas{
  display:flex; gap:2px; flex-wrap:wrap;
  margin-top:16px;
  border-top:1px solid var(--linha);
  padding-top:2px;
}
.gestao-abas a{
  padding:11px 14px 12px;
  font-size:13.5px; font-weight:600;
  color:var(--texto-2);
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .15s ease;
}
.gestao-abas a:hover{ color:var(--tinta); }
.gestao-abas a.ativa{ color:var(--marca); border-bottom-color:var(--marca); }

/* ---- KPIs com a borda colorida da referencia ---- */

.kpi-borda{ border-left:4px solid var(--linha-2); }
.kpi-marca{ border-left-color:var(--marca); }
.kpi-ok{ border-left-color:var(--ok); }
.kpi-alerta{ border-left-color:var(--alerta); }

/* O cartao que tambem e porta (Equipe/Staff na visao geral). */
.conteudo > .metrica-porta{ margin-bottom:16px; }
a.metrica-porta{
  display:block;
  max-width:340px;
  text-decoration:none;
  transition:border-color .15s ease, transform .15s ease;
}
a.metrica-porta:hover{ border-color:var(--marca); transform:translateY(-1px); }
a.metrica-porta .metrica-alto{ display:flex; align-items:center; justify-content:space-between; }
a.metrica-porta svg{ width:16px; height:16px; stroke:var(--marca); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.proximas-tarefas{ display:flex; flex-direction:column; }
.tarefa-linha{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 12px;
  border:1px solid var(--linha); border-radius:var(--raio-2);
  background:var(--branco);
  margin-bottom:8px;
  text-decoration:none;
  transition:border-color .15s ease;
}
.tarefa-linha:hover{ border-color:var(--marca); }
.tarefa-linha b{ font-size:13.5px; color:var(--tinta); display:block; }

.alerta-limpo{
  padding:14px 16px;
  border-radius:var(--raio-2);
  background:var(--ok-tint);
  color:var(--ok);
  font-size:13px; line-height:1.5;
}
.alerta-limpo b{ display:block; margin-bottom:2px; }
.sinal-perigo{ border-color:rgba(185,28,74,.3); background:var(--perigo-tint); }

/* ---- filtros e busca da gestao ---- */

.gestao-filtros{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:0 24px 14px;
}
.busca-miuda{
  padding:8px 12px;
  border:1px solid var(--linha); border-radius:var(--raio-2);
  font-family:inherit; font-size:13px; color:var(--tinta);
  background:var(--branco);
}
.busca-miuda:focus{ outline:2px solid var(--marca); outline-offset:-1px; }
.btn-vermelho{ color:var(--perigo); }
.btn-vermelho:hover{ border-color:var(--perigo); color:var(--perigo); }

/* ---- checklist: acordeao de etapas ---- */

/* A etapa e um cartao de primeiro nivel, nao caixa dentro de caixa:
   moldura dupla afastava tudo da margem sem dizer nada. */
.conteudo > .etapa{ margin-bottom:10px; }
.etapa{
  border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--bloco);
  box-shadow:var(--sombra);
}
.etapa summary{
  display:flex; align-items:center; gap:10px;
  padding:13px 16px;
  cursor:pointer; list-style:none;
}
.etapa summary::-webkit-details-marker{ display:none; }
.etapa summary b{ font-size:14.5px; color:var(--tinta); }
.etapa-seta{ display:grid; place-items:center; width:22px; height:22px; color:var(--texto-3); }
.etapa-seta svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease; }
.etapa[open] .etapa-seta svg{ transform:rotate(90deg); }
.etapa-direita{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.etapa-trilho{ width:120px; }

.etapa-corpo{ border-top:1px solid var(--linha); padding:4px 16px 12px; }
.etapa-cab, .tarefa{
  display:grid;
  grid-template-columns:minmax(200px,1fr) 170px 110px 150px 76px;
  gap:10px; align-items:center;
}
.etapa-cab{
  padding:9px 0 7px;
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--texto-3);
  border-bottom:1px solid var(--linha);
}
.fase-titulo{
  margin:12px 0 4px;
  font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--marca);
}
.tarefa{ padding:8px 0; border-bottom:1px solid var(--linha); font-size:13.5px; color:var(--texto); }
.tarefa:last-child{ border-bottom:0; }
.tarefa-feita .tarefa-nome{ color:var(--texto-3); }
.tarefa-resp{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--texto-2); }
.resp-bolinha{
  display:grid; place-items:center;
  width:22px; height:22px; flex-shrink:0;
  border-radius:50%;
  background:var(--marca-tint); color:var(--marca);
  font-style:normal; font-size:11px; font-weight:700;
}
.tarefa-prazo{ font-size:12.5px; color:var(--texto-2); white-space:nowrap; }

/* O select que E o status: pintado como selo. */
.status-tarefa{
  padding:5px 8px;
  border:1px solid transparent; border-radius:99px;
  font-family:inherit; font-size:12px; font-weight:600;
  cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.status-0{ background:rgba(15,23,41,.06); color:var(--texto-2); }
.status-1{ background:var(--alerta-tint); color:var(--alerta); }
.status-2{ background:var(--ok-tint); color:var(--ok); }

/* ---- operacao (dia D) ---- */

.conteudo > .gestao-banner{ margin-bottom:16px; }
.gestao-banner{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px 20px;
  border-radius:var(--raio);
  background:var(--grad-barra);
  color:#fff;
  box-shadow:0 10px 26px rgba(30,34,168,.25);
}
.gestao-banner b{ display:block; font-size:16px; }
.gestao-banner small{ opacity:.85; font-size:12.5px; }
.banner-btn-claro{ background:rgba(255,255,255,.16); color:#fff; box-shadow:none; }
.banner-btn-claro:hover{ background:rgba(255,255,255,.26); }
.banner-btn-cheio{ background:#fff; color:var(--marca-ink); box-shadow:none; }
.banner-btn-cheio:hover{ transform:translateY(-1px); }

.conteudo > .operacao-colunas{ margin-bottom:16px; }
.operacao-colunas{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px;
  align-items:start;
}
.operacao-coluna{ margin:0; }
.operacao-coluna-topo{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px 10px;
}
.operacao-coluna-topo b{ font-size:14px; color:var(--marca); display:inline-flex; align-items:center; gap:8px; }
.ponto-area{ width:7px; height:7px; border-radius:50%; background:var(--marca); }

.operacao-lista{ padding:0 16px 12px; }
.operacao-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--linha);
}
.operacao-item:last-child{ border-bottom:0; }
.operacao-texto{ flex:1; font-size:13.5px; color:var(--texto); }
.operacao-item.feito .operacao-texto{ color:var(--texto-3); text-decoration:line-through; }

.operacao-caixa{
  display:grid; place-items:center;
  width:22px; height:22px; flex-shrink:0;
  border:1.5px solid var(--linha-2); border-radius:7px;
  background:var(--branco);
  cursor:pointer;
  color:transparent;
  transition:background .15s ease, border-color .15s ease;
}
.operacao-caixa svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.operacao-item.feito .operacao-caixa{ background:var(--ok); border-color:var(--ok); color:#fff; }
.operacao-caixa:focus-visible{ outline:2px solid var(--marca); outline-offset:2px; }
.operacao-lixeira{ opacity:0; transition:opacity .15s ease; }
.operacao-item:hover .operacao-lixeira{ opacity:1; }

/* ---- programacao: a timeline ---- */

.timeline{ position:relative; padding-left:26px; }
.timeline::before{
  content:""; position:absolute; left:7px; top:8px; bottom:8px;
  width:2px; background:var(--linha);
}
.tempo-item{ position:relative; margin-bottom:10px; }
.tempo-ponto{
  position:absolute; left:-26px; top:18px;
  width:12px; height:12px;
  border:2.5px solid var(--marca); border-radius:50%;
  background:var(--branco);
}
.tempo-cartao{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:13px 16px;
  border:1px solid var(--linha); border-left:3px solid var(--marca);
  border-radius:var(--raio-2);
  background:var(--branco);
}
.tempo-hora{ white-space:nowrap; }
.tempo-hora b{ font-size:15px; font-weight:800; color:var(--tinta); font-variant-numeric:tabular-nums; }
.tempo-hora small{ color:var(--texto-3); font-size:12.5px; }
.tempo-texto{ flex:1; min-width:160px; }
.tempo-texto b{ font-size:13.5px; color:var(--tinta); display:block; }

/* ---- financeiro da producao ---- */

.chip-resumo{
  display:flex; flex-direction:column; align-items:flex-end;
  padding:7px 13px;
  border-radius:var(--raio-2);
}
.chip-resumo small{ font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; opacity:.75; }
.chip-resumo b{ font-size:14px; }
.chip-laranja{ background:var(--alerta-tint); color:var(--alerta); }
.chip-roxo{ background:rgba(124,58,237,.1); color:#7C3AED; }

.fin-cartoes{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px;
  margin-bottom:14px;
}
.fin-cartao{
  padding:14px 16px;
  border-radius:var(--raio-2);
  border:1px solid var(--linha);
}
.fin-cartao small{ display:block; font-size:12px; margin-bottom:2px; }
.fin-cartao b{ display:block; font-size:21px; letter-spacing:-.02em; }
.fin-cartao span{ display:block; margin-top:3px; font-size:11.5px; opacity:.75; }
.fin-azul{ background:rgba(42,47,212,.06); color:var(--marca); border-color:rgba(42,47,212,.18); }
.fin-laranja{ background:var(--alerta-tint); color:var(--alerta); border-color:rgba(180,83,9,.2); }
.fin-vermelho{ background:var(--perigo-tint); color:var(--perigo); border-color:rgba(185,28,74,.2); }
.fin-roxo{ background:rgba(124,58,237,.08); color:#7C3AED; border-color:rgba(124,58,237,.2); }

.fin-barras{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
@media (max-width: 860px){ .fin-barras{ grid-template-columns:1fr; } }
.fin-barra{
  padding:13px 16px;
  border:1px solid var(--linha); border-radius:var(--raio-2);
  background:var(--branco);
}
.fin-barra-topo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.fin-barra-topo b{ font-size:13.5px; color:var(--tinta); }
.fin-barra-pe{ display:flex; align-items:center; justify-content:space-between; margin-top:5px; }

.fin-saldo{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px 18px;
  border-radius:var(--raio-2);
}
.fin-saldo-negativo{ background:var(--perigo-tint); }
.fin-saldo-positivo{ background:var(--ok-tint); }
.fin-saldo small{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--texto-2); }
.fin-saldo > div > b{ font-size:24px; letter-spacing:-.02em; }
.fin-saldo-negativo > div > b{ color:var(--perigo); }
.fin-saldo-positivo > div > b{ color:var(--ok); }
.fin-saldo-direita{ display:flex; align-items:center; gap:14px; text-align:right; flex-wrap:wrap; }
.fin-saldo-direita b{ display:block; font-size:14px; }
.fin-saldo-direita b.azul{ color:var(--marca); }
.fin-saldo-direita b.vermelho{ color:var(--perigo); }
.fin-divisor{ width:1px; height:26px; background:var(--linha-2); }

.fin-toggle{ display:flex; justify-content:flex-end; gap:6px; margin-bottom:12px; }
.fin-cartoes-4 .fin-cartao b{ font-size:19px; }

.fin-detalhe{
  border:1px solid var(--linha); border-radius:var(--raio-2);
  background:var(--branco);
  padding:14px 16px;
}
.fin-detalhe-topo{ display:flex; align-items:center; justify-content:space-between; }
.fin-detalhe-topo b{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--texto-2); }
.fin-total{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; margin-top:6px;
  border-radius:calc(var(--raio-2) - 4px);
  font-size:13px; font-weight:700;
}
.fin-total-azul{ background:rgba(42,47,212,.06); color:var(--marca); }
.fin-total-vermelho{ background:var(--perigo-tint); color:var(--perigo); }

.selo-alerta{ background:var(--alerta-tint); color:var(--alerta); }
.selo-clicavel{ border:0; font-family:inherit; cursor:pointer; }
.texto-perigo{ color:var(--perigo); }

/* ---- fornecedores ---- */

.fornecedores-grade{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:14px;
}
.fornecedor-cartao{
  border:1px solid var(--linha); border-radius:var(--raio-2);
  background:var(--branco);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.fornecedor-capa{
  position:relative;
  display:grid; place-items:center;
  height:96px;
  background:var(--grad-botao);
}
.fornecedor-capa > span:first-child{
  font-size:42px; font-weight:800; color:rgba(255,255,255,.35);
}
.fornecedor-selo{
  position:absolute; top:10px; left:10px;
  padding:3px 10px;
  border-radius:99px;
  background:rgba(255,255,255,.92);
  color:var(--marca-ink);
  font-size:10.5px; font-weight:700;
}
.fornecedor-corpo{ padding:12px 14px 8px; flex:1; }
.fornecedor-corpo b{ display:block; margin-top:6px; font-size:15px; color:var(--tinta); }
.fornecedor-corpo .sub{ display:inline-flex; align-items:center; gap:4px; margin-top:3px; }
.fornecedor-pe{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px 12px;
  border-top:1px solid var(--linha);
}

/* ---- impressao: so a area marcada sai no papel ---- */

@media print{
  body *{ visibility:hidden; }
  [data-area-imprimivel], [data-area-imprimivel] *{ visibility:visible; }
  [data-area-imprimivel]{ position:absolute; left:0; top:0; width:100%; }
  .icone-acao, .status-tarefa, .operacao-caixa{ display:none !important; }
}

/* ---- checklist v2 ---- */

.conteudo > .checklist-topo{ margin-bottom:16px; }
.checklist-topo{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}

.etapa-nova-fase{ margin-left:4px; font-size:12px; }
.etapa summary .icone-acao{ width:28px; height:28px; }

.tarefa-edicao{
  margin:6px 0 10px;
  padding:14px;
  border:1px solid var(--linha); border-radius:var(--raio-2);
  background:var(--branco);
}
/* O finalizar e verde de proposito: e conclusao, nao perigo. */
.btn-linha-ok{ color:var(--ok); border-color:rgba(14,159,110,.35); }
.btn-linha-ok:hover{ color:var(--ok); border-color:var(--ok); background:var(--ok-tint); }
/* ---- entradas por setor, na portaria ---- */

.setores-portaria{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:12px;
}
.setor-portaria{
  padding:12px 14px;
  border:1px solid var(--linha); border-radius:var(--raio-2);
  background:var(--branco);
}
.setor-portaria-topo{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:8px;
}
.setor-portaria-topo > b{ font-size:13.5px; color:var(--tinta); }
.setor-portaria .sub{ display:block; margin-top:5px; }
/* ---- PDV de balcao ---- */

.pdv-lotes{ display:flex; flex-direction:column; gap:10px; }
.pdv-lote{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 14px;
  border:1px solid var(--linha); border-radius:var(--raio-2);
  background:var(--branco);
}
.pdv-lote-info b{ font-size:13.5px; color:var(--tinta); display:block; }

/* O passo de quantidade: botoes grandes porque balcao e dedo, nao mouse. */
.pdv-passo{ display:flex; align-items:center; gap:2px; }
.pdv-passo button{
  width:36px; height:36px;
  border:1px solid var(--linha-2); border-radius:10px;
  background:var(--branco);
  font-size:18px; font-weight:700; color:var(--marca);
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.pdv-passo button:hover{ background:var(--marca-tint); border-color:var(--marca); }
.pdv-passo [data-qtd]{
  min-width:38px; text-align:center;
  font-size:15px; font-weight:700; color:var(--tinta);
  font-variant-numeric:tabular-nums;
}

.pdv-resumo{
  padding:12px 14px;
  border:1px solid var(--linha); border-radius:var(--raio-2);
  background:var(--branco);
}
.pdv-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:6px 0;
  font-size:13px; color:var(--texto);
  border-bottom:1px solid var(--linha);
}
.pdv-item:last-child{ border-bottom:0; }
/* ---- PDV: contrato do Musa Express ---- */

/* Lote fechado: cinza para avisar, mas o balcao ainda vende nele. */
.pdv-lote-fechado{ background:var(--fundo); }
.pdv-lote-fechado .pdv-lote-info b{ color:var(--texto-3); }
.pdv-lote-fechado .pdv-lote-info .sub{ color:var(--texto-3); }
.pdv-lote-tag{
  display:inline-block; margin-left:6px; padding:1px 8px;
  border-radius:99px; background:var(--linha);
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  color:var(--texto-3); vertical-align:middle;
}

.pdv-grupo{ margin-bottom:14px; }
.pdv-rotulo{ display:block; margin-bottom:7px; font-size:12.5px; font-weight:600; color:var(--texto-2); }
.pdv-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.pdv-chips .filtro-btn{ border:1px solid var(--linha); border-radius:99px; background:var(--bloco); }
.pdv-chips .filtro-btn.ativo{ border-color:var(--marca); }
.pdv-chip-trava{ opacity:.45; }
.pdv-chip-trava::before{ content:'\1F512'; margin-right:5px; font-size:11px; }

.pdv-check{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--texto); cursor:pointer; }
/* A caixinha fica dentro de .campo, e `.campo input` a vestiria de campo de
   texto (borda, padding, largura total); aqui ela volta a ser so caixinha. */
.pdv-check input{
  width:16px; height:16px; flex:none; min-width:0;
  padding:0; border:0; box-shadow:none; background:none;
  accent-color:var(--marca);
}

.pdv-item-taxa span em{ font-style:normal; color:var(--texto-3); }
.pdv-riscado{ text-decoration:line-through; color:var(--texto-3); }

/* O veu dos momentos de tela cheia: QR do PIX e entrega pos-venda. */
.pdv-veu{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,23,41,.55); padding:20px;
}
/* `display:flex` na classe venceria o [hidden] do navegador e o veu ficaria
   sempre na tela; esta regra devolve a palavra final ao atributo. */
.pdv-veu[hidden]{ display:none; }
.pdv-folha{
  width:100%; max-width:420px;
  background:var(--branco); border-radius:var(--raio);
  padding:24px; text-align:center;
  box-shadow:0 18px 50px rgba(15,23,41,.25);
}
.pdv-folha-titulo{ margin:0 0 6px; font-size:17px; color:var(--tinta); }
.pdv-pix-total{ margin:4px 0 12px; font-size:26px; font-weight:800; color:var(--tinta); }
.pdv-qr{ display:flex; justify-content:center; margin-bottom:12px; }
.pdv-qr img{ width:210px; height:210px; border:1px solid var(--linha); border-radius:12px; background:#fff; padding:8px; }
.pdv-copia{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--linha); border-radius:10px;
  padding:6px 6px 6px 12px; margin-bottom:12px;
}
.pdv-copia span{
  flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12px; color:var(--texto-2); text-align:left;
}
.pdv-pix-espera{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:var(--texto-2); margin-bottom:14px;
}
.pdv-pix-espera b{ font-variant-numeric:tabular-nums; color:var(--tinta); }

.pdv-ok{
  width:64px; height:64px; margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:#16a34a; color:#fff; font-size:30px;
}
.pdv-entrega{ display:flex; gap:8px; justify-content:center; margin:16px 0; }
.pdv-entrega .btn-linha{ flex:1; justify-content:center; }
.pdv-folha .btn-largo{ width:100%; }

.btn-linha-perigo{ color:#dc2626; border-color:rgba(220,38,38,.35); }
.btn-linha-perigo:hover{ background:rgba(220,38,38,.08); }
.pdv-pix-zap{ width:100%; justify-content:center; margin-bottom:12px; }

/* ---- Ingra Express ---- */

.express-lotes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; }
.express-lote{
  display:flex; flex-direction:column; gap:6px;
  padding:12px 14px;
  border:1px solid var(--linha); border-radius:var(--raio-2);
  background:var(--branco); cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.express-lote:hover{ border-color:var(--marca); box-shadow:0 1px 6px var(--marca-tint); }
.express-lote b{ font-size:13px; color:var(--tinta); line-height:1.3; }
.express-preco{ font-size:14px; font-weight:700; color:var(--marca); }
.express-lote-inativo{ opacity:.5; cursor:not-allowed; background:var(--fundo); }
.express-lote-inativo:hover{ border-color:var(--linha); box-shadow:none; }
.express-motivo{ font-size:11px; font-weight:600; color:#b45309; }

.express-corte{ margin:18px 0 12px; border:0; border-top:1px solid var(--linha); }
.express-avulso{ display:flex; gap:8px; margin-bottom:6px; }
.express-avulso input{
  padding:10px 12px;
  border:1px solid var(--linha-2); border-radius:var(--raio-2);
  font-family:inherit; font-size:14px;
  color:var(--texto); background:var(--branco);
}
.express-avulso input:focus{ outline:0; border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-tint); }
.express-avulso input[name="nome"]{ flex:2; min-width:0; }
.express-avulso input[name="preco"]{ flex:1; min-width:110px; }

.express-link{
  margin-top:14px; padding:12px 14px;
  border:1px dashed var(--marca); border-radius:var(--raio-2);
  background:var(--marca-tint);
}
.express-link input{ width:100%; margin-bottom:10px; font-size:12.5px; background:var(--branco); }

/* ---- Colaboradores ---- */

.colab-conta{
  display:inline-block; margin-left:6px; padding:2px 10px;
  border-radius:99px; background:var(--marca-tint);
  font-size:12.5px; font-weight:700; color:var(--marca);
  vertical-align:middle;
}
.colab-grade{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:8px;
}
.colab-grade .pdv-check{
  border:1px solid var(--linha); border-radius:10px;
  padding:9px 11px; margin:0;
}
.colab-grade .pdv-check:has(input:checked){ border-color:var(--marca); background:var(--marca-tint); }
.colab-check-forte{ font-weight:700; }

.colab-tags{ display:flex; flex-wrap:wrap; gap:5px; }
.colab-tag{
  display:inline-block; padding:2px 9px;
  border:1px solid var(--linha); border-radius:99px;
  background:var(--fundo);
  font-size:11px; font-weight:600; color:var(--texto-2);
}
.colab-tag-forte{ border-color:var(--marca); background:var(--marca-tint); color:var(--marca); }

.colab-importar-linha{ display:flex; gap:8px; align-items:center; }
.colab-importar-linha select{
  flex:1; min-width:0; padding:10px 12px;
  border:1px solid var(--linha-2); border-radius:var(--raio-2);
  font-family:inherit; font-size:14px;
  color:var(--texto); background:var(--branco);
}
.colab-importar-linha select:focus{ outline:0; border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-tint); }

/* ---- Bilhete Eletronico (SEFAZ Salvador) ---- */

.be-avisos{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.be-aviso{
  padding:10px 14px; border-radius:var(--raio-2);
  font-size:13px; color:var(--texto);
  border:1px solid var(--linha);
}
.be-aviso b{ margin-right:6px; }
.be-aviso-ok{ background:rgba(22,163,74,.07); border-color:rgba(22,163,74,.3); }
.be-aviso-atencao{ background:rgba(180,83,9,.07); border-color:rgba(180,83,9,.35); }
.be-aviso-erro{ background:rgba(220,38,38,.07); border-color:rgba(220,38,38,.35); }

.be-acoes{ display:flex; flex-direction:column; gap:14px; }
.be-acao{
  display:flex; flex-direction:column; gap:8px;
  padding:12px 14px;
  border:1px solid var(--linha); border-radius:var(--raio-2);
  background:var(--branco);
}
.be-acao > div:first-child b{ display:block; font-size:13.5px; color:var(--tinta); }
.be-acao-campos{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.be-acao-campos input, .be-acao-campos select{
  padding:9px 12px; min-width:0;
  border:1px solid var(--linha-2); border-radius:var(--raio-2);
  font-family:inherit; font-size:13.5px; color:var(--texto); background:var(--branco);
}
.be-acao-campos input[type="number"]{ width:110px; }
.be-acao-campos input:focus, .be-acao-campos select:focus{ outline:0; border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-tint); }
.be-acao-fim{ border-color:rgba(220,38,38,.3); }

.be-tag-erro{ border-color:rgba(220,38,38,.4); background:rgba(220,38,38,.07); color:#dc2626; }

/* ---- Relatorios do evento ---- */

.rel-filtros{ margin-bottom:16px; }
.rel-filtros-linha{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.rel-lotes{ margin-top:12px; padding:12px; border:1px dashed var(--linha); border-radius:var(--raio-2); }

.rel-resumo{
  display:flex; gap:24px; flex-wrap:wrap;
  padding:12px 14px; margin-bottom:14px;
  border:1px solid var(--linha); border-radius:var(--raio-2);
  background:var(--fundo);
}
.rel-resumo-item b{ display:block; font-size:18px; color:var(--tinta); }

.rel-dia{ margin-bottom:18px; }
.rel-dia-topo{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 2px; border-bottom:2px solid var(--marca-tint);
  margin-bottom:4px;
}
.rel-dia-topo b{ font-size:14px; color:var(--tinta); }

.rel-regioes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.rel-regiao{
  padding:12px 14px;
  border:1px solid var(--linha); border-radius:var(--raio-2);
  background:var(--branco);
}
.rel-regiao b{ display:block; margin-bottom:6px; font-size:14px; color:var(--tinta); }
.rel-regiao .ocupacao-trilho{ margin-bottom:5px; }

/* ---- Editor de html (descricao do evento) ---- */

.editor-caixa{
  border:1px solid var(--linha-2); border-radius:var(--raio-2);
  background:var(--branco);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.editor-caixa:focus-within{ border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-tint); }

.editor-barra{
  display:flex; gap:4px; flex-wrap:wrap;
  padding:8px 10px;
  border-bottom:1px solid var(--linha);
}
.editor-botao{
  min-width:34px; padding:6px 10px;
  border:1px solid var(--linha); border-radius:8px;
  background:var(--fundo);
  font-family:inherit; font-size:12.5px; font-weight:600; color:var(--texto-2);
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.editor-botao:hover{ color:var(--marca); border-color:var(--marca); }
.editor-botao-n{ font-weight:800; }
.editor-botao-i{ font-style:italic; }
.editor-botao-s{ text-decoration:underline; }

.editor-area{
  min-height:170px; max-height:420px; overflow-y:auto;
  padding:12px 14px;
  font-size:14.5px; line-height:1.6; color:var(--texto);
}
.editor-area:focus{ outline:0; }
.editor-area h2{ margin:14px 0 6px; font-size:17px; color:var(--tinta); }
.editor-area ul{ margin:8px 0; padding-left:22px; }
.editor-area a{ color:var(--marca); }
.editor-area p{ margin:0 0 8px; }

/* ---- CRM comercial ---- */

.crm-quadro{
  display:grid; grid-template-columns:repeat(5, minmax(210px, 1fr)); gap:12px;
  align-items:start; overflow-x:auto;
}
@media (max-width: 1100px){ .crm-quadro{ grid-template-columns:repeat(5, 240px); } }

.crm-coluna{
  background:var(--fundo);
  border:1px solid var(--linha); border-radius:var(--raio-2);
  padding:10px;
  min-height:180px;
  transition:border-color .15s ease, background .15s ease;
}
.crm-coluna-alvo{ border-color:var(--marca); background:var(--marca-tint); }
.crm-coluna-topo{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  padding:2px 4px 10px;
}
.crm-coluna-topo b{ font-size:13px; color:var(--tinta); }
.crm-coluna-fechado .crm-coluna-topo b{ color:#16a34a; }
.crm-coluna-perdido .crm-coluna-topo b{ color:var(--texto-3); }

.crm-cartoes{ display:flex; flex-direction:column; gap:8px; min-height:60px; }
.crm-cartao{
  padding:10px 12px;
  background:var(--branco);
  border:1px solid var(--linha); border-radius:10px;
  cursor:grab;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.crm-cartao:hover{ border-color:var(--marca); box-shadow:0 1px 6px var(--marca-tint); }
.crm-cartao b{ display:block; font-size:13px; color:var(--tinta); line-height:1.35; }
.crm-cartao .sub{ display:block; margin-top:2px; }
.crm-cartao-pe{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px; }
.crm-valor{ font-size:12.5px; font-weight:700; color:var(--marca); }
.crm-cartao-viajando{ opacity:.4; }
.crm-coluna-perdido .crm-cartao{ opacity:.65; }

/* ---- Locais: as areas da casa ---- */

.local-area{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding:10px 0; border-bottom:1px solid var(--linha);
}
.local-area input[type="text"], .local-area select{
  padding:9px 12px;
  border:1px solid var(--linha-2); border-radius:var(--raio-2);
  font-family:inherit; font-size:13.5px; color:var(--texto); background:var(--branco);
}
.local-area input[name="nome"]{ flex:2; min-width:180px; }
.local-area input[name="layout"]{ width:90px; }
.local-area input[name="preco"]{ width:120px; }
.local-area input[type="file"]{ font-size:12px; max-width:200px; }
.local-area input:focus, .local-area select:focus{ outline:0; border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-tint); }
.local-area-remover{ padding:0 0 12px; border-bottom:1px solid var(--linha); margin-bottom:4px; }

/* ---- Locais: os numeros da casa ---- */

.local-numeros{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px;
  margin-bottom:12px;
}
.local-numero{
  padding:10px 12px;
  border:1px solid var(--linha); border-radius:var(--raio-2);
  background:var(--fundo);
}
.local-numero b{ display:block; margin-top:2px; font-size:15px; color:var(--tinta); white-space:nowrap; }
.local-numero-saldo{ border-color:var(--marca); background:var(--marca-tint); }
.local-expande{ width:100%; justify-content:center; }
.local-evento-encerrado td, .local-evento-encerrado td a b{ color:var(--texto-3); }
.local-evento-encerrado{ opacity:.75; }
.local-badge{
  display:inline-block; padding:2px 9px;
  border-radius:99px; border:1px solid var(--linha);
  background:var(--fundo);
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  color:var(--texto-3); white-space:nowrap;
}
.local-badge-ativo{ color:#16a34a; border-color:rgba(22,163,74,.35); background:rgba(22,163,74,.08); }
.local-saldo-aberto{ color:#b45309; }

/* ---- Tempo real ---- */

.tr-cartoes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; margin-bottom:10px; }
.tr-cartao{
  display:block; padding:14px 16px;
  border:1px solid var(--linha); border-radius:var(--raio-2);
  background:var(--branco); text-decoration:none; color:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.tr-cartao:hover{ border-color:var(--marca); box-shadow:0 1px 8px var(--marca-tint); }
.tr-cartao-topo{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.tr-cartao-topo b{ font-size:13.5px; color:var(--tinta); }
.tr-total{ margin:6px 0 8px; font-size:20px; font-weight:800; color:var(--tinta); }
.tr-cartao .ocupacao-trilho{ margin-bottom:4px; }
.tr-linhas{ display:flex; gap:14px; margin-top:10px; flex-wrap:wrap; }
.tr-linhas b{ display:block; font-size:12.5px; color:var(--tinta); }

/* ---- Protecao de compra ---- */

.prot-cartao{
  padding:14px 16px; margin-bottom:12px;
  border:1px solid var(--linha); border-radius:var(--raio-2);
  background:var(--branco);
}
.prot-cartao-topo{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.prot-cartao-topo b{ font-size:13.5px; color:var(--tinta); }
.prot-acoes{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.prot-decisao{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.prot-decisao input[type="text"]{
  padding:9px 12px; min-width:0;
  border:1px solid var(--linha-2); border-radius:var(--raio-2);
  font-family:inherit; font-size:13px; color:var(--texto); background:var(--branco);
}
.prot-decisao input[name="parecer"]{ min-width:260px; flex:1; }
.prot-decisao input[name="valor"]{ width:180px; }
.prot-decisao input:focus{ outline:0; border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-tint); }

/* ---- Relatorios gerais: a barra de filtros e a faixa de totais ---- */

.relg-filtros{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr auto; gap:10px;
  align-items:end;
}
@media (max-width: 1000px){ .relg-filtros{ grid-template-columns:1fr 1fr; } }
.relg-filtros label{ display:block; margin-bottom:5px; font-size:12.5px; font-weight:600; color:var(--texto-2); }
.relg-filtros select, .relg-filtros input{
  width:100%; padding:10px 12px;
  border:1px solid var(--linha-2); border-radius:var(--raio-2);
  font-family:inherit; font-size:13.5px; color:var(--texto); background:var(--branco);
}
.relg-filtros select:focus, .relg-filtros input:focus{ outline:0; border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-tint); }
.relg-botao{ display:flex; align-items:flex-end; }

/* A barra da central de pagamentos leva um campo a mais que a dos
   relatorios, entao o grid ganha a coluna extra. */
.pag-filtros{ grid-template-columns:2fr 1fr 1fr 1fr 1fr 1.2fr auto; margin-bottom:16px; }
@media (max-width: 1000px){ .pag-filtros{ grid-template-columns:1fr 1fr; } }

.paginacao{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:16px; flex-wrap:wrap;
}

/* ---- Resultado da protecao ----
   Cores de dinheiro: aqui reembolso e ruim e lucro e bom, e tirar a cor
   obrigaria a ler o rotulo para saber de que lado esta o numero. */
:root{
  --prr-verde:#188554;
  --prr-verm:#dc2626;
  --prr-ambar:#b45309;
}

.prr-datas{ display:flex; align-items:center; gap:6px; }
.prr-datas input, .prr-evento{
  padding:8px 10px; border:1px solid var(--linha-2); border-radius:var(--raio-2);
  font-family:inherit; font-size:13px; color:var(--texto); background:var(--branco);
}
.prr-evento{ max-width:280px; }
.prr-datas input:focus, .prr-evento:focus{ outline:0; border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-tint); }

.prr-paineis{ display:grid; grid-template-columns:2fr 1fr; gap:14px; align-items:start; }
@media (max-width: 1100px){ .prr-paineis{ grid-template-columns:1fr; } }

/* A barra de proporcao: a leitura de um relance e a fatia, nao o numero. */
.prr-barra{ display:flex; height:30px; border-radius:10px; overflow:hidden; background:var(--fundo); }
.prr-barra>i{ display:block; height:100%; }

.prr-legenda{ display:flex; gap:20px; flex-wrap:wrap; margin-top:10px; font-size:12.5px; color:var(--texto-3); }
.prr-legenda i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:4px; }

.prr-faixas{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
@media (max-width: 700px){ .prr-faixas{ grid-template-columns:1fr; } }
.prr-faixa{
  border-radius:var(--raio-2); background:var(--fundo);
  border-left:3px solid var(--faixa); padding:13px 15px;
}
.prr-faixa>b{ font-size:20px; }
.prr-faixa .prr-de{ font-size:12.5px; color:var(--texto-3); margin-left:4px; }
.prr-faixa p{ margin:6px 0 0; font-size:12.5px; color:var(--texto-3); line-height:1.45; }

.prr-folego{
  display:flex; align-items:center; gap:14px;
  padding-bottom:14px; border-bottom:1px solid var(--linha);
}
.prr-folego>b{ font-size:42px; line-height:1; }
.prr-folego>span{ font-size:13px; color:var(--texto-3); line-height:1.35; }
.prr-folego small{ display:block; font-size:11.5px; }

.prr-linha{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:11px 0; border-bottom:1px solid var(--linha);
  font-size:13px; color:var(--texto-3);
}
.prr-linha:last-child{ border-bottom:none; padding-bottom:0; }
.prr-linha b{ color:var(--texto); font-size:14px; font-variant-numeric:tabular-nums; }

.prr-status{ display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; }
@media (max-width: 991px){ .prr-status{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width: 575px){ .prr-status{ grid-template-columns:repeat(2, 1fr); } }
.prr-status>div{ background:var(--fundo); border-radius:var(--raio-2); padding:14px 12px; text-align:center; }
.prr-status b{ display:block; font-size:26px; line-height:1; color:var(--texto); }
.prr-status span{ display:block; margin-top:5px; font-size:11.5px; color:var(--texto-3); line-height:1.3; }

.prr-tag{
  display:inline-block; padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:700; color:var(--branco);
}
.prr-tag-ok{ background:var(--prr-verde); }
.prr-tag-fora{ background:var(--prr-verm); }
.prr-tag-off{ background:#3a3a3a; }
/* O paginador padrao do framework traz o bloco mobile e o "Showing X of Y"
   em ingles; escondemos os dois e vestimos so os numeros. */
.paginacao nav[role="navigation"] > div:first-child{ display:none; }
.paginacao nav[role="navigation"] p{ display:none; }
.paginacao nav[role="navigation"] > div:last-child{ display:flex; align-items:center; gap:10px; }
.paginacao nav[role="navigation"] a,
.paginacao nav[role="navigation"] span[aria-current] span,
.paginacao nav[role="navigation"] span[aria-disabled] span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; padding:0 8px; margin:0 1px;
  border:1px solid var(--linha-2); border-radius:var(--raio-2);
  font-size:13px; color:var(--texto-2); text-decoration:none; background:var(--branco);
}
.paginacao nav[role="navigation"] a:hover{ border-color:var(--marca); color:var(--marca); }
.paginacao nav[role="navigation"] span[aria-current] span{
  border-color:var(--marca); background:var(--marca-tint); color:var(--marca); font-weight:700;
}
.paginacao nav[role="navigation"] svg{ width:15px; height:15px; }

.relg-totais{
  margin:0 0 12px; padding:10px 14px;
  border:1px solid var(--linha); border-radius:var(--raio-2);
  background:var(--fundo);
  font-size:13px; color:var(--texto);
}

/* ---- Multi-selecao (o papel do select2, sem jquery) ---- */

.multi{ position:relative; }
.multi-botao{
  width:100%; padding:10px 12px; text-align:left;
  border:1px solid var(--linha-2); border-radius:var(--raio-2);
  font-family:inherit; font-size:13.5px; color:var(--texto); background:var(--branco);
  cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.multi-botao:focus{ outline:0; border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-tint); }
.multi-painel{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60;
  padding:10px;
  border:1px solid var(--linha); border-radius:var(--raio-2);
  background:var(--branco);
  box-shadow:0 10px 30px rgba(15,23,41,.15);
}
.multi-painel [data-multi-busca]{
  width:100%; margin-bottom:8px; padding:9px 12px;
  border:1px solid var(--linha-2); border-radius:var(--raio-2);
  font-family:inherit; font-size:13px;
}
.multi-lista{ max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.multi-lista .pdv-check{ padding:5px 6px; border-radius:8px; }
.multi-lista .pdv-check:hover{ background:var(--marca-tint); }
/* Sem isto a busca nao filtra: o display:flex do .pdv-check vence o [hidden]
   do navegador, entao o item que o JS marca como hidden continua aparecendo. */
[data-multi-item][hidden]{ display:none !important; }

/* Cartao de evento: o "Gerenciar" e o botao de copiar o resumo lado a lado.
   Classe PROPRIA: `.evento-acoes` ja e a barra do cabecalho do evento, e
   reaproveitar o nome fazia as regras de la (padding menor no .btn) caírem
   no cartao - era isso que desalinhava os dois botoes.
   O `stretch` do lado a lado e o `padding:0` do quadrado fazem os dois terem
   exatamente a mesma altura - sem repetir o padding do vizinho, que mudaria
   junto com ele e voltaria a desalinhar. */
.cartao-acoes{ display:flex; align-items:stretch; gap:10px; }
.cartao-acoes > *{ margin:0; }
.cartao-acoes .btn-largo{ flex:1 1 auto; }
.evento-copiar{
  flex:0 0 52px; align-self:stretch;
  padding:0; min-width:0;
  color:var(--texto-2);
}
.evento-copiar:hover{ border-color:var(--marca); color:var(--marca); }
.evento-copiar.copiado{ border-color:var(--marca); color:var(--marca); font-size:12px; font-weight:700; }

/* Locais: o evento da listagem abre com um clique, e parece que abre.
   O titulo era um link sem nenhuma marca visual - a informacao de que dava
   para clicar so existia para quem passasse o mouse por cima por acaso. */
.local-evento-link{ color:var(--tinta); text-decoration:none; }
.local-evento-link:hover{ color:var(--marca); text-decoration:underline; }
.local-evento-abrir{ color:var(--texto-3); }
.local-evento-abrir:hover{ color:var(--marca); border-color:var(--marca); }
.local-evento-encerrado .local-evento-link{ color:var(--texto-2); }

/* ---------------------------------------------------------------------------
   Identificador da cobranca no adquirente.

   Fica ao lado dos botoes de cancelar/estornar porque e o dado que a pessoa
   precisa copiar exatamente quando o estorno pela API nao passa e a operacao
   tem de ser feita no painel do Mercado Pago ou da Pagar.me.
--------------------------------------------------------------------------- */
.pagamento-id{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
  padding:10px 14px; margin-bottom:14px;
  border:1px solid var(--linha); border-radius:var(--raio-2);
  background:var(--fundo-2, #f7f8fb);
}
.pagamento-id small{ display:block; margin-bottom:2px; }
.pagamento-id b{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:15px; letter-spacing:.2px; user-select:all;
}

.id-adquirente{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12.5px; user-select:all;
}
.btn-copia{
  margin-left:6px; padding:1px 6px;
  border:1px solid var(--linha); border-radius:6px;
  background:transparent; color:var(--texto-3);
  font-size:11px; cursor:pointer;
}
.btn-copia:hover{ border-color:var(--marca); color:var(--marca); }

/* Prefixo longo: o dominio antes do endereco publico do evento. O prefixo de
   moeda ocupa tres letras, este ocupa um dominio inteiro, entao ele nao pode
   espremer o campo em tela estreita. */
.campo-prefixo-largo span{
  font-weight:500; color:var(--texto-3);
  white-space:nowrap;
}
.campo-prefixo-largo input{ min-width:0; }

@media (max-width:560px){
  .campo-prefixo-largo{ flex-direction:column; }
  .campo-prefixo-largo span{
    border-right:1px solid var(--linha-2); border-bottom:0;
    border-radius:var(--raio-2) var(--raio-2) 0 0;
    padding:6px 13px; justify-items:start;
  }
  .campo-prefixo-largo input{
    border-radius:0 0 var(--raio-2) var(--raio-2);
    border-top-left-radius:0; border-top-right-radius:0;
  }
}

/* ---------------------------------------------------------------------------
   "Novo evento" no topo do menu.

   Tem peso de BOTAO e nao de item de menu porque e uma acao, e nao mais um
   lugar para onde ir: o resto da lateral leva a telas, este comeca um trabalho.
   Por isso o gradiente da marca, o mesmo do `.btn-forte`.
--------------------------------------------------------------------------- */
.lateral-novo{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:10px 0 12px;
  padding:11px 14px;
  border-radius:var(--raio-2);
  background:var(--grad-botao);
  color:#fff; font-size:13.5px; font-weight:700;
  box-shadow:0 8px 22px rgba(30,34,168,.24);
  transition:transform .15s, box-shadow .15s;
}
.lateral-novo:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(30,34,168,.30); }
.lateral-novo svg{
  width:17px; height:17px; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:2.2;
}

/* A chave de suspeito no cabecalho de "Quem comprou": mesma peca do
   interruptor de lote, so que alinhada a direita do bloco. */
.marca-suspeito{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.marca-suspeito .interruptor.ligado{ background:var(--perigo); }

/* O aviso de erro ao salvar a ficha do cliente, ao lado do botao. */
.erro-cliente{ color:var(--perigo); font-size:13px; }

/* A barra de abas se arrasta com o mouse.

   Ela sempre rolou, mas rolar de lado com mouse exige shift+roda, que quase
   ninguem sabe: com quinze areas, tres ficavam invisiveis e o menu parecia
   terminar na decima segunda. O cursor de mao avisa que da para puxar. */
.abas{ cursor:grab; }
.abas.arrastando{ cursor:grabbing; user-select:none; }
.abas.arrastando .aba{ pointer-events:none; }

/* Sigla do estado ao lado do CPF, na ficha do pedido.
   Discreta de proposito: e um apoio para saber se o comprador e da praca ou
   veio de fora, nao um dado do documento. Competir em peso com o numero faria
   parecer parte dele. */
.cpf-uf { color: var(--tinta-3); font-weight: 600; }

/* Linha que ocupa a ficha inteira: endereco nao cabe numa coluna estreita
   sem quebrar no meio do nome da rua. */
.ficha-cheia { grid-column: 1 / -1; }

/* ============================================================
   Atendimento (inbox do WhatsApp)
   ============================================================ */
.atd{
  display:grid; grid-template-columns:320px 1fr; gap:16px;
  height:calc(100vh - 230px); min-height:460px;
}
.atd-lista{
  display:flex; flex-direction:column; min-height:0;
  border:1px solid var(--linha); border-radius:16px; background:var(--branco); overflow:hidden;
}
.atd-busca{ padding:12px; border-bottom:1px solid var(--linha); }
.atd-busca input{
  width:100%; padding:9px 12px; border:1px solid var(--linha-2); border-radius:10px;
  font-family:inherit; font-size:13.5px; color:var(--texto); background:var(--fundo);
}
.atd-busca input:focus{ outline:0; border-color:var(--marca); }
.atd-conversas{ flex:1; overflow-y:auto; }

.atd-conv{
  position:relative; display:block; width:100%; text-align:left; cursor:pointer;
  padding:12px 14px 12px 14px; border:0; border-bottom:1px solid var(--linha);
  background:transparent; font-family:inherit;
}
.atd-conv:hover{ background:var(--fundo); }
.atd-conv.ativa{ background:var(--marca-tint,#eef0fb); }
.atd-conv-nova .atd-conv-nome{ font-weight:800; }
.atd-conv-linha{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.atd-conv-nome{ font-size:14px; color:var(--texto); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.atd-conv-hora{ font-size:11.5px; color:var(--texto-2); flex:0 0 auto; }
.atd-conv-previa{ font-size:12.5px; color:var(--texto-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.atd-conv-voce{ color:var(--texto-2); opacity:.8; }
.atd-badge{
  flex:0 0 auto; font-style:normal; font-size:11px; font-weight:700; color:#fff;
  background:var(--marca); border-radius:99px; padding:1px 7px; min-width:18px; text-align:center;
}
.atd-mini-tag{ display:inline-block; margin-top:6px; font-size:10.5px; font-weight:700; letter-spacing:.3px;
  text-transform:uppercase; padding:2px 8px; border-radius:99px; }
.atd-mini-bot{ background:#eef0f6; color:#6b7280; }
.atd-mini-humano{ background:var(--grad-botao); color:#fff; }
.atd-vazio-lista{ padding:24px 16px; color:var(--texto-2); font-size:13px; text-align:center; }

.atd-chat{
  display:flex; flex-direction:column; min-height:0;
  border:1px solid var(--linha); border-radius:16px; background:var(--branco); overflow:hidden;
}
.atd-nenhuma{ flex:1; display:flex; align-items:center; justify-content:center; color:var(--texto-2); font-size:14px; text-align:center; padding:24px; }
.atd-nenhuma-icone svg{ width:40px; height:40px; fill:none; stroke:var(--linha-2); stroke-width:1.6; margin:0 auto 10px; display:block; }
.atd-ativa{ flex:1; display:flex; flex-direction:column; min-height:0; }
/* O atributo hidden precisa vencer o display:flex acima. */
.atd-ativa[hidden], .atd-nenhuma[hidden]{ display:none !important; }

.atd-topo{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--linha); }
.atd-topo-quem b{ display:block; font-size:15px; color:var(--texto); }
.atd-topo-quem small{ font-size:12px; color:var(--texto-2); }
.atd-topo-acoes{ display:flex; align-items:center; gap:8px; }

.atd-mensagens{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:8px; background:var(--fundo); }
.atd-carregando{ margin:auto; color:var(--texto-2); font-size:13px; }
.atd-bolha{ max-width:72%; padding:9px 13px; border-radius:14px; font-size:14px; line-height:1.45; white-space:pre-wrap; word-wrap:break-word; }
.atd-bolha small{ display:block; margin-top:4px; font-size:10.5px; opacity:.7; }
.atd-in{ align-self:flex-start; background:var(--branco); color:var(--texto); border:1px solid var(--linha); border-bottom-left-radius:4px; }
.atd-out{ align-self:flex-end; background:var(--grad-botao); color:#fff; border-bottom-right-radius:4px; }
.atd-out small{ opacity:.85; }
.atd-nota{ align-self:center; background:#fff7e6; color:#8a6d3b; border:1px solid #f0e0b8; font-size:12.5px; max-width:85%; text-align:center; }
.atd-autor{ font-size:10.5px; font-weight:700; opacity:.75; margin-bottom:2px; }

.atd-erro{ padding:8px 18px; color:var(--perigo,#b91c4a); font-size:13px; font-weight:600; background:var(--perigo-tint,#fdecef); }
.atd-responder{ display:flex; gap:10px; padding:12px 14px; border-top:1px solid var(--linha); align-items:flex-end; }
.atd-responder textarea{
  flex:1; resize:none; max-height:120px; padding:11px 13px; border:1px solid var(--linha-2);
  border-radius:12px; font-family:inherit; font-size:14px; color:var(--texto); background:var(--fundo); line-height:1.4;
}
.atd-responder textarea:focus{ outline:0; border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-tint); }
.atd-janela{ display:block; padding:0 14px 12px; color:var(--texto-2); font-size:11.5px; }

@media (max-width:820px){
  .atd{ grid-template-columns:1fr; height:auto; }
  .atd-lista{ max-height:320px; }
  .atd-chat{ min-height:420px; }
}


/* ---- Contas a pagar: a barra de filtros da lista ---- */

.cp-filtros{ display:flex; flex-wrap:wrap; gap:10px 12px; align-items:flex-end; }
.cp-f{ display:flex; flex-direction:column; }
.cp-f:last-child{ flex-direction:row; gap:8px; align-items:flex-end; }
.cp-f label{ margin-bottom:5px; font-size:12px; font-weight:600; color:var(--texto-2); }
.cp-f select, .cp-f input{
  height:40px; padding:0 12px; min-width:150px;
  border:1px solid var(--linha-2); border-radius:var(--raio-2);
  font-family:inherit; font-size:13.5px; color:var(--texto); background:var(--branco);
}
.cp-f-busca input{ min-width:230px; }
.cp-f select{ cursor:pointer; }
.cp-f select:focus, .cp-f input:focus{ outline:0; border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-tint); }
.cp-f .btn{ height:40px; display:inline-flex; align-items:center; }
@media (max-width: 700px){
  .cp-f, .cp-f select, .cp-f input{ width:100%; }
}

/* Seletor de mes: setas + lista de meses (e "todos") */
.cp-mes{ display:flex; align-items:stretch; }
.cp-mes select{ border-radius:0; min-width:190px; border-left:0; border-right:0; text-align:center; text-align-last:center; font-weight:600; }
.cp-seta{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--linha-2); background:var(--branco); color:var(--texto);
  font-size:22px; line-height:1; text-decoration:none; user-select:none;
}
.cp-seta:first-child{ border-radius:var(--raio-2) 0 0 var(--raio-2); }
.cp-seta:last-child{ border-radius:0 var(--raio-2) var(--raio-2) 0; }
.cp-seta:hover{ border-color:var(--marca); color:var(--marca); background:var(--marca-tint); }

/* Atalhos da lista de contas: mes atual / todas as abertas */
.cp-chips{ display:inline-flex; height:40px; padding:3px; gap:2px; background:var(--fundo-2, #EEF1F8); border:1px solid var(--linha-2); border-radius:999px; }
.cp-chip{
  display:inline-flex; align-items:center; padding:0 14px; border-radius:999px;
  font-size:13px; font-weight:600; color:var(--texto-2); text-decoration:none; white-space:nowrap;
}
.cp-chip:hover{ color:var(--marca); }
.cp-chip.ativo{ background:var(--branco); color:var(--marca); box-shadow:0 1px 3px rgba(11,16,32,.12); }

/* Contas a pagar: abas que abrem e fecham os formularios */
.cp-abas{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.cp-aba{
  height:40px; padding:0 18px; border-radius:999px; cursor:pointer;
  border:1px solid var(--linha-2); background:var(--branco); color:var(--texto-2);
  font-family:inherit; font-size:13.5px; font-weight:700;
}
.cp-aba:hover{ border-color:var(--marca); color:var(--marca); }
.cp-aba.ativo{ background:var(--marca); border-color:var(--marca); color:#fff; box-shadow:0 4px 12px rgba(26,35,160,.25); }

/* Contas a pagar: duas linhas de resumo que abrem os formularios */
.cp-linhas{ display:flex; flex-direction:column; gap:10px; margin:0 0 14px; }
.cp-linha{
  display:flex; align-items:center; gap:18px; width:100%; text-align:left; cursor:pointer;
  padding:14px 18px; border-radius:var(--raio); font-family:inherit; color:var(--texto);
  border:1px solid var(--linha-2); background:var(--branco); box-shadow:var(--sombra);
}
.cp-linha:hover{ border-color:var(--marca); }
.cp-linha.ativo{ border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-tint); }
.cp-linha-titulo{ flex:0 0 150px; font-size:15px; font-weight:800; color:var(--texto); }
.cp-linha-resumo{ flex:1; display:flex; flex-wrap:wrap; gap:6px 28px; }
.cp-linha-resumo > span{ display:flex; flex-direction:column; min-width:120px; }
.cp-linha-resumo small{ font-size:11.5px; font-weight:600; color:var(--texto-2); margin-bottom:2px; }
.cp-linha-resumo b{ font-size:14.5px; font-weight:800; }
.cp-linha-resumo .cp-alerta b{ color:#B91C4A; }
.cp-linha-ultima{ min-width:0; }
.cp-linha-acao{
  flex:0 0 auto; padding:8px 16px; border-radius:999px; font-size:13px; font-weight:700;
  background:var(--marca); color:#fff;
}
.cp-linha.ativo .cp-linha-acao{ background:var(--marca-tint); color:var(--marca); }
@media (max-width: 800px){
  .cp-linha{ flex-wrap:wrap; gap:8px 14px; }
  .cp-linha-titulo{ flex:1 1 100%; }
  .cp-linha-acao{ margin-left:auto; }
}

/* Saque antecipado: o campo do valor de cada evento (R$ + numero) */
.saque-campo{
  display:inline-flex; align-items:center; gap:8px; width:180px; height:44px; padding:0 14px;
  background:var(--branco); border:1px solid var(--linha-2); border-radius:var(--raio-2);
  cursor:text; transition:border-color .15s, box-shadow .15s;
}
.saque-campo span{ font-size:13px; font-weight:700; color:var(--texto-2); }
.saque-campo input{
  flex:1; min-width:0; width:100%; height:100%; padding:0; border:0; outline:0; background:transparent;
  font-family:inherit; font-size:15px; font-weight:700; color:var(--texto); text-align:right;
}
.saque-campo:hover{ border-color:var(--marca); }
.saque-campo:focus-within{ border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-tint); }