/* ============================================================
   CRM Benetton — CSS próprio
   Só o que o design system (modo aplicação) não tem. Tudo lê
   os tokens do sistema; nenhum hexadecimal novo.
   ============================================================ */

/* Telas de entrada (login, definir senha): um cartão no centro,
   sobre o fundo animado do sistema (.shader-bg).
   As cores --sh-1..4 só existem nas superfícies do site; aqui,
   dentro de data-surface="app", precisam ser declaradas. Rampa
   "dark" do sistema. Por baixo, verde escuro sólido: se o WebGL
   não existir, a tela continua verde, não branca.               */
.auth{
  --sh-1:var(--black-950); --sh-2:var(--green-700); --sh-3:var(--green-400); --sh-4:var(--green-100);
  min-height:100vh; display:grid; place-items:center; padding:var(--ga-6);
  background:var(--green-900);
}
.auth__box{ width:min(400px, 100%); }
.auth__logo{ display:flex; justify-content:center; margin:var(--ga-2) 0 var(--ga-6); }
.auth__logo img{ height:48px; width:auto; }
.auth .ctl--primary{ width:100%; justify-content:center; height:40px; }
.auth__link{ background:none; border:0; padding:0; color:var(--fg-muted); font-size:var(--fa-base); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.auth__link:hover{ color:var(--fg); }

/* Linha da tabela abre a ficha. */
.tbl tbody tr[data-id]{ cursor:pointer; }

/* Marca na barra lateral: o logotipo completo, na largura do
   bloco (mesma largura do item "Leads"). max-width garante que
   nunca passa do bloco.                                          */
.app__brand{ padding:var(--ga-2) var(--ga-2) var(--ga-1); }
.app__brand img{ width:100%; max-width:100%; height:auto; }

/* Rodapé da barra lateral: quem está logado (abre o perfil) + sair. */
.who{ flex:1; min-width:0; cursor:pointer; }
.who__name{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Botão de perigo, para o apagar definitivo (LGPD). */
.ctl--danger{ background:transparent; border-color:transparent; color:var(--stop); }
.ctl--danger:hover{ background:rgba(166,72,58,.08); color:var(--stop); }

/* Autor no histórico. */
.log__by{ color:var(--fg-faint); }

/* Estado desligado: botão sem ação. */
.ctl[disabled]{ opacity:.5; cursor:not-allowed; }

/* Ficha: etapa e responsável são menus, ficam lado a lado. */
.drawer__ctl{ display:flex; flex-wrap:wrap; gap:var(--ga-2); margin-bottom:var(--ga-5); }

/* Menus que ficam à esquerda da tela abrem para a direita,
   senão o painel corta. */
.toolbar .menu__pop, .drawer .menu__pop{ left:0; right:auto; }

/* "Mover para…" no card do funil. Aparece no hover, como a ação
   de linha da tabela; o menu é um só, fixo, para não ser cortado
   pela coluna que rola. */
.kan__mover{
  display:inline-flex; align-items:center; gap:4px;
  height:24px; padding:0 8px;
  background:transparent; border:1px solid transparent; border-radius:var(--r-ctl);
  font-size:var(--fa-xs); color:var(--fg-faint); cursor:pointer;
  opacity:0; transition:opacity .14s ease, background .14s ease;
}
.kan__card:hover .kan__mover, .kan__mover:focus-visible, .kan__mover.is-on{ opacity:1; }
.kan__mover:hover{ background:var(--row-hover); color:var(--fg); }
.kan__mover svg{ width:12px; height:12px; }
.menu__pop--fixed{ position:fixed; right:auto; }

/* Tema escuro nas telas de entrada: cartão de vidro sobre o
   degradê. Só aqui; o claro não muda.                          */
[data-surface="app-dark"] .auth .panel{
  background:rgba(8,8,8,.16);
  border-color:var(--cream-10);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
[data-surface="app-dark"] .auth .f input{
  background:rgba(8,8,8,.28);
  border-color:var(--cream-20);
}
/* Botão verde. --green-700 (a marca) some sobre o preto; o
   --green-400 é o token de preenchimento do sistema, e o contorno
   em --green-100 garante silhueta mesmo com a textura escura
   atrás. Texto creme sobre o fill fica acima de 4,5:1 mesmo no
   ponto mais claro do degradê (com o véu, que é obrigatório).   */
[data-surface="app-dark"] .auth .ctl--primary{
  background:rgba(66,112,54,.72);          /* --green-400 a 72% */
  color:var(--cream);
  border:1px solid rgba(143,181,133,.60);  /* --green-100 a 60% */
}
[data-surface="app-dark"] .auth .ctl--primary:hover{
  background:rgba(66,112,54,.85);
  border-color:var(--green-100);
}
/* Sem desfoque no navegador: cartão quase sólido, texto legível. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  [data-surface="app-dark"] .auth .panel{ background:rgba(8,8,8,.90); }
}

/* Dica (tooltip) desenhada por JS, fora de qualquer bloco que
   rola — nunca é cortada. O ::after do sistema fica desligado
   dentro do CRM.                                                */
.tip::after{ display:none; }
.dica{
  position:fixed; z-index:var(--z-modal);
  padding:5px 8px;
  background:var(--fg); color:var(--bg);
  border-radius:6px;
  font-size:var(--fa-sm); white-space:nowrap;
  pointer-events:none;
}

/* Avatar com foto. */
.avatar--foto{ object-fit:cover; padding:0; }