/* ============================================================
   Totali · Portal de Onboarding
   Design system — dark, mobile-first, vidro fosco e movimento
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* ============================================================
     A NOITE LÁ FORA, A LUZ AQUI DENTRO

     O pedido foi um sistema que acolha — que passe paz, que dê
     vontade de ficar. Três coisas ficaram no caminho, e cada
     token abaixo responde a uma delas.

     1. O cinza vinha de lavar azul com branco.
        O cartão era um véu branco translúcido sobre o fundo azul.
        Branco sobre azul não clareia o azul: ele DESSATURA. O
        resultado media 21% de saturação contra 56% do fundo — quer
        dizer, o cartão era literalmente mais cinza que a página.
        Por isso agora cada camada tem cor PRÓPRIA e opaca, mais
        clara E mais saturada que o piso. O cinza some pela raiz.

     2. Acolhimento é temperatura, e temperatura é luz.
        Azul puro lê como "clínico, corporativo, à distância" — é
        o efeito que qualquer paleta fria carrega. Mas trocar o
        azul por marrom mataria a identidade da Totali. A saída é
        a mesma da vida real: à noite, o que aquece um ambiente
        não é a cor da parede, é a lâmpada. Então o fundo continua
        azul-noite (a rua lá fora) e cada superfície recebe uma
        luz DOURADA vindo de cima (a lâmpada da sala). É o mesmo
        dourado da marca, agora fazendo trabalho de iluminação em
        vez de só enfeitar borda.

     3. Texto branco-azulado esfria tudo.
        Depois do fundo, o texto é a maior área de cor da tela.
        Ele era #eaf1f8 — branco puxado para o azul. Passou a ser
        um marfim quente. É a mudança que mais aquece a página e a
        que menos mexe na identidade.

     O que NÃO mudou, de propósito: continua escuro, continua
     azul-noite, continua com grão e linha fina. Acolhedor não é
     sinônimo de claro nem de infantil.
     ============================================================ */

  /* ------------------------------------------------------------
     REGRA Nº 1, E A MAIS IMPORTANTE: UMA COR SÓ NAS SUPERFÍCIES.

     Duas rodadas de cinza vieram da mesma causa, e vale escrever
     em voz alta para não haver uma terceira: MISTURAR QUENTE COM
     FRIO PRODUZ CINZA. Não é opinião, é o que a conta dá.

       1ª rodada — cartão era véu branco sobre azul.
                   Saturação caía de 55% para 21%.
       2ª rodada — cartão era véu DOURADO sobre azul, a 8,5%.
                   Saturação caía de 39% para 21% no alto do
                   cartão. Resultado: uma faixa cinza atravessando
                   o topo de tudo — o "degradê cinzento".

     A tentativa de aquecer a superfície com luz dourada foi bem
     intencionada e estava errada: dourado sobre azul-noite não
     aquece o azul, ele o lava. Qualquer opacidade que fosse
     visível já seria suficiente para acinzentar.

     Então a regra passa a ser: **fundo, superfície, borda e
     estado de foco vivem todos no MESMO matiz azul (211–213°) e
     mudam só de claridade.** Matiz constante é o que garante que
     cinza nunca apareça em lugar nenhum.

     E o dourado da Totali? Continua inteiro — só que como
     ACENTO: botão principal, selo, aba ativa, link, anel de
     progresso, fio do cabeçalho. Acento é área pequena e nunca é
     misturado dentro de um preenchimento grande, então ele
     aparece vibrante em vez de sujar o azul. É assim que marca
     forte convive com fundo calmo.
     ------------------------------------------------------------ */

  /* Piso — a noite. */
  --bg-0:#0a1522;
  --bg-1:#0e1b2b;
  --bg-2:#132538;
  --navy:#1a3149;
  --navy-2:#20405f;
  --navy-3:#2a4d70;

  /* ------------------------------------------------------------
     REGRA Nº 2: O CARTÃO É A BORDA, NÃO O PREENCHIMENTO.
     ("Contorno" — escolhido pelo Raoni em 2026-08-18.)

     Foram quatro rodadas até aqui, e o caminho foi sempre o mesmo
     erro: tentar resolver o cartão pelo PREENCHIMENTO. Branco
     sobre azul virou cinza; dourado sobre azul virou cinza de
     novo; azul a 29% ficou na terra de ninguém — nem neutro o
     bastante para ler como grafite, nem saturado o bastante para
     ler como azul.

     A saída foi parar de pintar o cartão. Ele fica quase da cor
     do fundo (contraste de 1,06) e quem o desenha é o FIO DA
     BORDA, que tem contraste 2,1 contra o preenchimento. A tela
     vira um campo azul-noite contínuo, cortado por linhas.

     Duas consequências que valem lembrar antes de mexer aqui:
       • sem preenchimento para carregar cor, o dourado passa a
         ser praticamente a única cor forte da tela — é ele que
         faz o desenho funcionar;
       • a borda deixou de ser enfeite e virou ESTRUTURA. Apagar
         ou enfraquecer `--stroke-card` apaga o cartão inteiro.
     ------------------------------------------------------------ */
  --surf:#0e1b2b;         /* cartão — quase o fundo, de propósito */
  --surf-2:#16283c;       /* passagem do mouse, cartão em destaque */
  --surf-3:#20344c;       /* realce */
  --surf-baixo:#0b1622;   /* item já resolvido: recua */

  /* Marca — vibrante porque é acento, nunca preenchimento. */
  --gold:#c2a250;
  --gold-2:#dcc487;
  --gold-3:#ecdcb2;
  --gold-glow:rgba(194,162,80,.32);

  /* Véus e bordas puxados para o AZUL, não para o branco nem
     para o âmbar: é o que mantém o matiz constante mesmo nos
     elementos translúcidos. */
  --glass-fraco:rgba(180,205,235,.035);
  --glass:rgba(180,205,235,.07);
  --glass-2:rgba(180,205,235,.11);
  --glass-3:rgba(180,205,235,.16);

  /* Bordas OPACAS, e não véus translúcidos.

     Num desenho em que a borda é a única coisa que define o
     cartão, ela não pode variar conforme o que estiver por trás —
     e véu translúcido varia. Opaca, o fio tem sempre a mesma
     força, esteja sobre o fundo, sobre outro cartão ou sobre o
     cabeçalho.

     `--stroke` é o fio interno (divisórias dentro do cartão) e
     `--stroke-card` é o contorno externo, mais forte. Se os dois
     fossem iguais, cada divisória cortaria o cartão com o mesmo
     peso da moldura e a leitura viraria uma grade. */
  --stroke-fraco:#1a2c40;
  --stroke:#274058;
  --stroke-card:#31506f;
  --stroke-2:#41618a;
  --stroke-gold:rgba(194,162,80,.42);

  /* ------------------------------------------------------------
     REGRA Nº 4: SUAVE É CONTRASTE LOCAL BAIXO E BORDA DIFUSA.

     A dureza não vinha da cor do texto — vinha do fio branco no
     alto do cartão, do brilho interno e de uma sombra preta seca.
     Sombra preta sobre fundo colorido lê como corte; sombra
     tingida com a própria cor do fundo lê como profundidade.

     O texto acompanha o mesmo matiz das superfícies. Medido sobre
     --surf: principal 14,6:1 · secundário 9,6:1 · terciário
     6,9:1 · rótulo 5,3:1. Com o cartão quase da cor do fundo,
     todos subiram — é o lado bom de não ter preenchimento claro
     roubando contraste. O brilho do sistema vem de bordas, anéis
     e selos, nunca de halo atrás da letra.
     ------------------------------------------------------------ */
  --txt:#eaf0f7;
  --txt-2:#b3c3d3;
  --txt-3:#93a6ba;
  --txt-4:#7d90a5;

  /* Semânticos — tons dessaturados, sem neon */
  --ok:#5cc394;         --ok-bg:rgba(92,195,148,.1);    --ok-br:rgba(92,195,148,.26);
  --info:#6ba4dd;       --info-bg:rgba(107,164,221,.1); --info-br:rgba(107,164,221,.26);
  --warn:#dcae5c;       --warn-bg:rgba(220,174,92,.1);  --warn-br:rgba(220,174,92,.26);
  --danger:#e88a83;     --danger-bg:rgba(232,138,131,.1); --danger-br:rgba(232,138,131,.28);

  /* Formas — canto um pouco mais redondo de propósito.
     Preferência por curvatura é das respostas mais constantes em
     estudo de forma: canto redondo lê como acolhedor, canto vivo
     lê como alerta. É barato e funciona. */
  --r-sm:11px;
  --r:15px;
  --r-lg:20px;
  --r-xl:28px;

  /* Sombras tingidas com a cor do fundo, não pretas.
     Preto sobre azul lê como corte; azul escuro lê como
     profundidade. E mais abertas, para a borda do cartão dissolver
     em vez de terminar seca. */
  --sh-1:0 1px 2px rgba(4,11,22,.28);
  --sh-2:0 10px 30px rgba(4,11,22,.30);
  --sh-3:0 20px 56px rgba(4,11,22,.44);
  --glow-gold:0 0 0 1px var(--stroke-gold), 0 10px 34px rgba(194,162,80,.16);

  /* Layout */
  --header-h:62px;
  --tabbar-h:66px;
  --sidebar-w:270px;
  --maxw:1160px;

  /* Tipografia */
  --font:"Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,
         "Inter","Helvetica Neue",Arial,system-ui,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg-0)}
body{
  margin:0;
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  color:var(--txt);
  background:var(--bg-0);
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
  min-height:100vh;
}
h1,h2,h3,h4,p,figure{margin:0}
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.022em;font-weight:660}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--gold-2);text-decoration-color:rgba(224,198,132,.4);text-underline-offset:3px}
a:hover{color:var(--gold-3)}
ul,ol{margin:0;padding:0}
li{list-style:none}
[hidden]{display:none !important}

:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px;border-radius:6px}
::selection{background:rgba(194,162,80,.3);color:#f2f6fa}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:10px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18);background-clip:content-box}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--gold);color:#0d1926;padding:10px 16px;border-radius:var(--r-sm);
  font-weight:700;font-size:14px;transition:top .18s var(--ease);
}
.skip-link:focus{top:12px}

/* ---------- 3. Fundo animado ---------- */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:var(--bg-0)}
.bg__aurora{position:absolute;inset:-25%;opacity:.9}
.bg__aurora::before,.bg__aurora::after{
  content:"";position:absolute;border-radius:50%;filter:blur(90px);
}
.bg__aurora::before{
  width:70vmax;height:70vmax;left:-18vmax;top:-24vmax;
  background:radial-gradient(circle at 40% 40%,rgba(36,72,112,.68),rgba(20,41,63,0) 68%);
  animation:drift1 30s var(--ease) infinite alternate;
}
/* A luz quente do ambiente.
   Antes ela vagava pela tela junto com a mancha azul, e movimento
   contínuo no canto do olho é justamente o oposto de repouso.
   Agora fica parada no alto, como uma janela ou um abajur: a
   página inteira ganha temperatura sem nada se mexendo. */
.bg__aurora::after{
  width:64vmax;height:64vmax;right:-14vmax;top:-20vmax;
  background:radial-gradient(circle at 50% 50%,rgba(216,170,96,.3),rgba(194,162,80,0) 64%);
}
.bg__glow{
  position:absolute;left:50%;bottom:-30vmax;transform:translateX(-50%);
  width:90vmax;height:60vmax;border-radius:50%;filter:blur(100px);
  background:radial-gradient(circle at 50% 50%,rgba(30,62,95,.55),transparent 65%);
  animation:pulse 22s ease-in-out infinite;
}
.bg__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(75% 55% at 50% 0%,#000 0%,transparent 78%);
  mask-image:radial-gradient(75% 55% at 50% 0%,#000 0%,transparent 78%);
}
/* Grão bem mais discreto. Textura ajuda um fundo a não parecer
   chapado morto, mas acima de certo ponto ela vira sujeira — e
   "clean" e "granulado" puxam para lados opostos. */
.bg__noise{
  position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@keyframes drift1{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(14vmax,9vmax,0) scale(1.16)}
}
@keyframes drift2{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-12vmax,14vmax,0) scale(1.22)}
}
@keyframes pulse{
  0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}
  50%{opacity:.85;transform:translateX(-50%) scale(1.1)}
}

/* ---------- 4. Movimento ----------
   O conteúdo só é escondido quando o motion.js confirma que
   consegue animá-lo (classe .motion no <html>). Sem JavaScript,
   com movimento reduzido ou em navegador antigo, tudo aparece
   normalmente — nunca há risco de tela em branco.
------------------------------------- */
.reveal{will-change:opacity,transform}
html.motion .reveal{opacity:0;transform:translateY(18px)}
html.motion .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);
  transition-delay:calc(var(--d,0) * 55ms);
}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes shimmer{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html.motion .reveal{opacity:1 !important;transform:none !important}
}

/* ---------- 5. Cabeçalho ---------- */
.app-header{
  position:sticky;top:0;z-index:60;
  height:var(--header-h);
  display:flex;align-items:center;gap:12px;
  padding:0 14px;
  padding-left:max(14px,env(safe-area-inset-left));
  padding-right:max(14px,env(safe-area-inset-right));
  background:linear-gradient(180deg,rgba(13,25,38,.93),rgba(13,25,38,.76));
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid var(--stroke);
}
.app-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold-2) 55%,transparent);
  opacity:.55;
}
/* O cabeçalho inteiro é o atalho para o início. */
.brand{
  display:flex;align-items:center;gap:11px;min-width:0;
  padding:5px 9px 5px 5px;margin-left:-5px;border-radius:12px;text-align:left;
  border:1px solid transparent;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .14s var(--ease);
}
.brand:hover{background:var(--glass);border-color:var(--stroke)}
.brand:active{transform:scale(.98)}
.brand[aria-current="page"]{cursor:default}
.brand__logo{height:30px;width:auto;flex:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}

/* A LOGO COMPLETA, que entra quando o cliente está dentro. Ela é
   quase três vezes mais larga que o símbolo, e no celular divide a
   barra com o nome da empresa e os botões de ação. Por isso nasce
   menor aqui e só cresce no desktop: é mais importante o nome do
   cliente caber do que a marca ficar grande. O `.brand__title` já
   tem reticências, então o que faltar de espaço ele resolve. */
.brand__logo--cheia{height:24px}
@media (min-width:560px){ .brand__logo--cheia{height:30px} }
@media (min-width:900px){ .brand__logo--cheia{height:33px} }

/* No celular, com a logo completa, o fio divisor sai. Ele existe
   para separar um símbolo mudo do texto ao lado; a logo completa
   já termina em palavra e se separa sozinha. São ~12px que vão
   para o nome da empresa, que é o que corta primeiro. */
@media (max-width:559px){
  .brand__logo--cheia + .brand__divider{display:none}
}
.brand__divider{width:1px;height:22px;background:var(--stroke-2);flex:none}
.brand__text{min-width:0;display:block}
.brand__title{display:block;
  color:var(--txt);font-size:13.5px;font-weight:620;letter-spacing:.004em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand__sub{
  display:block;
  color:var(--gold);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}

.hbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:37px;min-width:37px;padding:0 11px;
  border-radius:11px;
  color:var(--txt-2);
  border:1px solid var(--stroke);
  background:var(--glass);
  font-size:13px;font-weight:560;
  transition:background .18s var(--ease),border-color .18s var(--ease),
             color .18s var(--ease),transform .14s var(--ease);
}
.hbtn:hover{background:var(--glass-2);border-color:var(--stroke-2);color:var(--txt)}
.hbtn:active{transform:scale(.97)}
.hbtn .ic{width:18px;height:18px}
.hbtn--gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  border-color:transparent;color:#0d1926;font-weight:680;
  box-shadow:0 4px 18px rgba(194,162,80,.28);
}
.hbtn--gold:hover{
  background:linear-gradient(135deg,var(--gold-2),var(--gold-3));
  color:#0d1926;box-shadow:0 6px 24px rgba(194,162,80,.4);
}
.hbtn__label{display:none}
@media (min-width:520px){ .hbtn__label{display:inline} }

/* ---------- 6. Layout ---------- */
.shell{
  display:block;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px);
}
.main{
  padding:18px 16px 30px;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
}
.view{animation:viewIn .4s var(--ease-out)}
.sidenav{display:none}

/* ---------- Tela de entrada ----------
   Sem sessão não há para onde o menu levar: todo item cairia de
   volta no formulário de login. Mostrar sete atalhos mortos ao
   lado da caixa de senha só dá o que ignorar. Na entrada fica a
   marca, o formulário e o rodapé — nada mais.

   O `!important` é o jeito de vencer o `display:block` que a
   consulta de largura devolve à barra lateral no desktop, sem
   duplicar esta regra dentro de cada media query. */
body.porta-aberta .sidenav,
body.porta-aberta .tabbar{display:none !important}
body.porta-aberta .shell{
  display:block;
  grid-template-columns:none;
  padding-bottom:34px;
}

/* Barra inferior (celular) */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  background:linear-gradient(0deg,rgba(13,25,38,.97),rgba(18,32,49,.84));
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-top:1px solid var(--stroke);
}
.tabbar__item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--txt-3);font-size:10.5px;font-weight:620;letter-spacing:.01em;
  position:relative;padding-top:5px;
  transition:color .2s var(--ease);
}
.tabbar__item .ic{width:22px;height:22px;stroke-width:1.6;transition:transform .28s var(--ease-out)}
.tabbar__item:active .ic{transform:scale(.88)}
.tabbar__item[aria-current="page"]{color:var(--gold-2)}
.tabbar__item[aria-current="page"] .ic{filter:drop-shadow(0 0 7px var(--gold-glow))}

.tabbar__item[aria-current="page"]::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:30px;height:3px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  box-shadow:0 0 14px var(--gold-glow);
}
.tabbar__badge{
  position:absolute;top:4px;left:calc(50% + 9px);
  min-width:17px;height:17px;padding:0 5px;border-radius:9px;
  background:linear-gradient(135deg,#ff7a72,#e0554c);color:#fff;
  font-size:9.5px;font-weight:750;display:grid;place-items:center;line-height:1;
  box-shadow:0 2px 8px rgba(224,85,76,.5);
}

/* Marca da Academy no menu.

   NÃO é o mesmo objeto que o badge ao lado. O badge é vermelho e
   conta pendência: é cobrança, e some quando a pessoa resolve. Esta
   marca é dourada, não tem número e não cobra nada — ela só diz
   "tem coisa sua aqui" para o cliente que não tem documento nenhum
   para enviar, e cujo único motivo de abrir o portal é a Academy.

   Vermelho aqui seria mentira: não há nada atrasado. */
.tabbar__marca{
  position:absolute;top:6px;left:calc(50% + 9px);
  width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  box-shadow:0 0 8px var(--gold-glow);
}
.tabbar--8 .tabbar__marca{left:calc(50% + 5px);width:6px;height:6px}

/* ---------- 7. Superfícies de vidro ---------- */
/* Cor chapada, uma borda, uma sombra difusa. Nada mais.

   O que saiu daqui e por quê:
     • o degradê dourado — acinzentava o topo (39% → 21%);
     • o fio branco no alto (`::before`) — era a aresta mais dura
       da tela, e brilho de fio é justamente o que impede um
       cartão de parecer calmo;
     • o brilho interno `--luz-fio` — mesma coisa, por dentro;
     • o desfoque de fundo — invisível sob cor opaca e caro em
       celular modesto: cada cartão da lista obrigava o navegador
       a recompor tudo o que estava atrás. */
.card{
  position:relative;
  background:var(--surf);
  border:1px solid var(--stroke-card);
  border-radius:var(--r-lg);
  /* Sem sombra: no modelo Contorno quem separa o cartão do fundo
     é o fio, e sombra por baixo de um cartão quase transparente
     só suja a borda. */
  box-shadow:none;
  overflow:hidden;
}
.card--pad{padding:20px}

.section{margin-top:28px}
.section:first-child{margin-top:0}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px}
.section__title{font-size:18px;font-weight:660;color:var(--txt)}
.section__desc{font-size:13px;color:var(--txt-3);margin-top:4px;font-weight:450;line-height:1.5}

.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:750;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-2);
}
.eyebrow::before{
  content:"";width:16px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));
}

/* ---------- 8. Botões ---------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 20px;border-radius:12px;
  font-size:14px;font-weight:620;letter-spacing:.004em;
  border:1px solid transparent;
  transition:transform .14s var(--ease),box-shadow .22s var(--ease),
             background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn .ic{width:18px;height:18px;flex:none}

.btn--primary{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#0d1926;box-shadow:0 6px 22px rgba(194,162,80,.26);
}
.btn--primary:hover{
  background:linear-gradient(135deg,var(--gold-2),var(--gold-3));
  box-shadow:0 10px 30px rgba(194,162,80,.4);
}
.btn--primary::after{
  content:"";position:absolute;top:0;bottom:0;width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-140%);
}
.btn--primary:hover::after{animation:shimmer 1.05s var(--ease-out)}

.btn--gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#0d1926;
  box-shadow:0 6px 22px rgba(194,162,80,.26)}
.btn--gold:hover{background:linear-gradient(135deg,var(--gold-2),var(--gold-3));color:#0d1926}

.btn--ghost{background:var(--glass);border-color:var(--stroke);color:var(--txt-2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn--ghost:hover{background:var(--glass-2);border-color:var(--stroke-2);color:var(--txt)}

.btn--quiet{background:transparent;color:var(--txt-3);height:38px;padding:0 12px}
.btn--quiet:hover{background:var(--glass);color:var(--txt-2)}

.btn--danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-br)}
.btn--danger:hover{background:rgba(255,122,114,.18);border-color:rgba(255,122,114,.45)}

.btn--sm{height:36px;padding:0 14px;font-size:13px;border-radius:10px}
.btn--block{width:100%}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ---------- 9. Selos de situação ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  height:24px;padding:0 10px;border-radius:20px;
  font-size:11.5px;font-weight:660;letter-spacing:.01em;
  border:1px solid transparent;white-space:nowrap;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;box-shadow:0 0 6px currentColor}
.badge--pendente{background:var(--glass);color:var(--txt-3);border-color:var(--stroke)}
.badge--pendente .dot{box-shadow:none}
.badge--enviado{background:var(--info-bg);color:var(--info);border-color:var(--info-br)}
.badge--analise{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-br)}
.badge--aprovado{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-br)}
.badge--pendencia{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-br)}
.badge--na{background:rgba(255,255,255,.03);color:var(--txt-4);border-color:var(--stroke)}
.badge--na .dot{box-shadow:none}

/* ---------- 10. Formulários ---------- */
.field{margin-bottom:16px}
.field__label{
  display:block;font-size:12.5px;font-weight:620;color:var(--txt-2);
  margin-bottom:7px;letter-spacing:.005em;
}
.field__req{color:var(--gold);font-weight:750;margin-left:3px}
.field__hint{font-size:12px;color:var(--txt-3);margin-top:6px;line-height:1.45}
.field__error{font-size:12px;color:var(--danger);margin-top:6px;font-weight:560}
.input,.select,.textarea{
  width:100%;height:46px;padding:0 14px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--stroke);border-radius:12px;
  font-size:15px;color:var(--txt);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.textarea{height:auto;min-height:96px;padding:12px 14px;line-height:1.5;resize:vertical}
.select{
  appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a9bacd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.select option{background:var(--bg-2);color:var(--txt)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--stroke-2)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--gold);background:rgba(255,255,255,.055);
  box-shadow:0 0 0 3.5px rgba(194,162,80,.15);
}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--danger)}
.input[aria-invalid="true"]:focus{box-shadow:0 0 0 3.5px rgba(255,122,114,.15)}
.input::placeholder,.textarea::placeholder{color:var(--txt-4)}
/* Campo preenchido pela Totali: legível, mas claramente não editável. */
.input[readonly],.select:disabled{
  background:rgba(255,255,255,.02);
  border-style:dashed;
  color:var(--txt-2);
  cursor:default;
}
.input[readonly]:hover,.select:disabled:hover{border-color:var(--stroke)}
.input[readonly]:focus{border-color:var(--stroke-2);box-shadow:none}
.grid-2{display:grid;gap:0 16px}

input[type=checkbox]{accent-color:var(--gold)}

.hr{height:1px;background:var(--stroke);border:0;margin:20px 0}
.stack>*+*{margin-top:14px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.text-muted{color:var(--txt-3)}
.text-sm{font-size:13px}
.text-xs{font-size:12px}

/* ---------- 11. Hero ---------- */
/* PAINEL DE ENTRADA — "Contorno dourado".

   Sem preenchimento nenhum: o fundo da página aparece por dentro.
   O que existe é um fio dourado em volta, e mais nada.

   É a conclusão coerente do modelo Contorno. Se o cartão comum é
   definido por um fio azul, o painel principal é definido pelo
   mesmo recurso — só que no fio da MARCA. Ele não é o objeto mais
   claro da tela; é o único com contorno dourado. Hierarquia por
   distinção, não por peso.

   Não há número de contraste a medir aqui, e isso é proposital: o
   painel não tem superfície própria. O destaque vem da forma — o
   contorno, o corpo grande do título e o ar em volta. */
.hero{
  position:relative;
  border-radius:var(--r-xl);
  padding:28px 26px 30px;
  background:none;
  border:1px solid rgba(194,162,80,.55);
  box-shadow:none;
}
.hero>*{position:relative;z-index:1}

/* O botão secundário acompanha o contorno do painel, senão fica
   com fio azul dentro de uma moldura dourada. */
.hero .btn--ghost{border-color:rgba(194,162,80,.4)}

.hero__greeting{font-size:12.5px;color:var(--txt-2);font-weight:520}
/* Título sólido e grande. O recorte de degradê no texto saiu junto
   com os outros: era mais um material exclusivo deste bloco, e o
   corpo maior dá mais presença do que o brilho dava. */
.hero__title{
  font-size:31px;font-weight:700;margin-top:5px;letter-spacing:-.034em;
  line-height:1.05;color:var(--txt);
}
.hero__desc{font-size:13.5px;color:var(--txt-2);margin-top:11px;max-width:46ch;line-height:1.6}
.hero__row{display:flex;align-items:center;gap:20px;margin-top:22px;flex-wrap:wrap}
.hero__actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
/* Diz qual é o próximo documento. Sem isto, "Continuar de onde
   parei" é uma promessa que só se confere depois de clicar. */
.hero__proximo{
  margin-top:12px;font-size:12.5px;color:var(--txt-2);line-height:1.5;
}
.hero__proximo strong{color:var(--txt-2);font-weight:640}
.hero__proximo-tag{
  display:inline-block;margin-left:4px;padding:1px 8px;border-radius:20px;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--danger);background:var(--danger-bg);border:1px solid var(--danger-br);
}

/* ---------- Conferir a foto antes de enviar ---------- */
.previas{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.previa{margin:0;border:1px solid var(--stroke);border-radius:var(--r);overflow:hidden;background:var(--surf-baixo)}
.previa img{width:100%;height:190px;object-fit:contain;background:#0a0f16;display:block}
.previa figcaption{
  font-size:11px;color:var(--txt-3);padding:8px 10px;line-height:1.4;
  border-top:1px solid var(--stroke-fraco);overflow-wrap:anywhere;
}

/* ---------- Barra de envio ----------
   Presa no rodapé e sem bloquear a tela: quem está enviando pode
   continuar navegando. Sobe acima da barra de abas no celular. */
.envio{
  position:fixed;z-index:70;left:14px;right:14px;
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px);
  background:var(--surf-2);border:1px solid var(--stroke-card);border-radius:var(--r);
  padding:13px 15px;box-shadow:var(--sh-3);
  opacity:0;transform:translateY(12px);
  transition:opacity .28s var(--ease-out),transform .28s var(--ease-out);
}
.envio--on{opacity:1;transform:none}
.envio__topo{display:flex;align-items:baseline;gap:10px}
.envio__t{
  flex:1;min-width:0;font-size:13px;font-weight:640;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.envio__pct{font-size:12.5px;font-weight:700;color:var(--gold-2);font-variant-numeric:tabular-nums}
.envio__trilho{height:6px;border-radius:6px;background:var(--surf-baixo);overflow:hidden;margin-top:9px}
.envio__barra{
  display:block;height:100%;width:0;border-radius:6px;background:var(--gold);
  transition:width .25s var(--ease-out);
}
.envio__nota{font-size:11px;color:var(--txt-3);margin-top:7px}
@media (min-width:900px){
  .envio{left:auto;right:24px;bottom:24px;width:340px}
}

/* ---------- Orientação de acesso (banco / maquininha) ----------
   Vem do catálogo, editável pelo painel. Só aparece para o que o
   cliente marcou. */
.orienta{
  margin-top:12px;padding:13px 15px;border-radius:var(--r);
  background:var(--surf-baixo);border:1px solid var(--stroke);
}
.orienta__t{
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:660;color:var(--gold-2);margin-bottom:7px;
}
.orienta__t .ic{width:15px;height:15px;flex:none}
.orienta__c{font-size:12.5px;color:var(--txt-2);line-height:1.6}
.orienta__c p{margin:0 0 6px}
.orienta__c p:last-child{margin-bottom:0}
.orienta__c ol{counter-reset:passo;display:grid;gap:6px}
.orienta__c li{
  counter-increment:passo;position:relative;padding-left:26px;
}
.orienta__c li::before{
  content:counter(passo);position:absolute;left:0;top:1px;
  width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  font-size:10.5px;font-weight:700;
  color:var(--gold-2);background:rgba(194,162,80,.13);border:1px solid var(--stroke-gold);
}

/* ---------- Modo Contador ----------
   Operadora que libera a contabilidade pelo próprio aplicativo:
   não há senha a informar, só a confirmação de que o cadastro foi
   feito. */
.modo-contador{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  margin-top:10px;padding:14px 15px;border-radius:var(--r);
  background:var(--surf-baixo);border:1px solid var(--stroke);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.modo-contador:hover{border-color:var(--stroke-2)}
.modo-contador--on{border-color:var(--ok-br);background:var(--ok-bg)}
.modo-contador input{width:19px;height:19px;flex:none;margin-top:1px}
.modo-contador__t{display:block;font-size:13.5px;font-weight:640;color:var(--txt)}
.modo-contador__d{display:block;font-size:12px;color:var(--txt-3);margin-top:4px;line-height:1.5}

/* ---------- Devoluções da equipe ----------
   O único bloco da tela inicial em que o cliente já fez a parte
   dele e ainda assim precisa voltar. Por isso tem cor própria:
   fica no topo, e não se confunde com o que ainda nem começou. */
/* Também chapado. O vermelho aqui é sinal, não decoração: uma
   cor só, sustentada pela borda. Degradê deixaria a metade de
   baixo indistinguível de um cartão comum, e aí o aviso perderia
   justamente a função de avisar. */
.card--atencao{
  background:#3e2a28;   /* mesmo matiz do --danger, bem dessaturado */
  border-color:var(--danger-br);
}
.atencao__cab{display:flex;gap:12px;padding:17px 18px 15px;align-items:flex-start}
.atencao__icone{
  flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  color:var(--danger);background:var(--danger-bg);border:1px solid var(--danger-br);
}
.atencao__icone .ic{width:18px;height:18px}
.atencao__txt{min-width:0}
.atencao__titulo{display:block;font-size:15.5px;font-weight:680;color:var(--txt);letter-spacing:-.015em}
.atencao__desc{display:block;font-size:12.5px;color:var(--txt-2);margin-top:4px;line-height:1.55}

.corr{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 18px;border-top:1px solid var(--stroke);
  transition:background .2s var(--ease);
}
.corr:hover{background:var(--glass)}
.corr__info{flex:1;min-width:0}
.corr__nome{display:block;font-size:14px;font-weight:640;color:var(--txt)}
.corr__motivo{display:block;font-size:12.5px;color:var(--txt-2);margin-top:3px;line-height:1.5}
.corr__acao{
  flex:none;display:inline-flex;align-items:center;gap:3px;
  font-size:12.5px;font-weight:680;color:var(--gold-2);
}
.corr__acao .ic{width:16px;height:16px}
@media (max-width:520px){
  .corr{align-items:flex-start}
  .corr__acao{align-self:center}
}

/* Anel de progresso */
.ring{position:relative;width:92px;height:92px;flex:none}
.ring svg{transform:rotate(-90deg);overflow:visible}
.ring__track{stroke:rgba(255,255,255,.09)}
.ring__bar{
  stroke:url(#ringGrad);stroke-linecap:round;filter:drop-shadow(0 0 5px var(--gold-glow));
  transition:stroke-dashoffset 1.15s var(--ease-out);
}
.ring__value{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;
  font-size:23px;font-weight:720;letter-spacing:-.03em;color:var(--txt);
}
.ring__value small{font-size:11px;font-weight:600;color:var(--txt-3);margin-top:3px;letter-spacing:0}

.hero__stats{display:flex;gap:22px;flex-wrap:wrap}
.stat__num{font-size:21px;font-weight:720;letter-spacing:-.03em;color:var(--txt)}
.stat__lbl{font-size:11px;color:var(--txt-3);font-weight:560;letter-spacing:.03em;margin-top:1px}

/* Barra de progresso */
.pbar{position:relative;height:7px;border-radius:8px;background:rgba(255,255,255,.06);overflow:hidden}
.pbar__fill{
  position:relative;height:100%;border-radius:8px;
  background:linear-gradient(90deg,var(--navy-3),var(--gold) 85%);
  box-shadow:0 0 12px rgba(194,162,80,.3);
  transition:width .9s var(--ease-out);
}
.pbar__fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-120%);
  animation:shimmer 2.6s var(--ease-out) infinite;
}

/* ---------- 12. Trilha de etapas ---------- */
.rail{position:relative;padding-left:34px}
.rail::before{
  content:"";position:absolute;left:13px;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold),rgba(194,162,80,.25) 40%,rgba(255,255,255,.07));
}
.rail__step{position:relative;padding:0 0 22px}
.rail__step:last-child{padding-bottom:0}
.rail__dot{
  position:absolute;left:-34px;top:0;
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--bg-1);border:1.5px solid var(--stroke);
  font-size:11.5px;font-weight:720;color:var(--txt-4);
}
.rail__step--done .rail__dot{
  background:linear-gradient(135deg,var(--ok),#3f9e79);border-color:transparent;color:#08281c;
  box-shadow:0 0 13px rgba(92,195,148,.32);
}
.rail__step--current .rail__dot{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));border-color:transparent;color:#0d1926;
  box-shadow:0 0 0 5px rgba(194,162,80,.11), 0 0 16px var(--gold-glow);
}
.rail__step--current .rail__dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid var(--stroke-gold);animation:spinSlow 9s linear infinite;
  border-top-color:var(--gold-2);
}
.rail__dot .ic{width:14px;height:14px;stroke-width:2.8}

/* ============================================================
   Tela de abertura

   Fica no lugar do conteúdo enquanto o portal descobre quem
   entrou. Existe para não mostrar a alguém uma tela que não é
   dela e depois puxá-la de volta — o "carrega duas vezes".

   O anel girando é o mesmo vocabulário da etapa atual da trilha:
   quem já usou o portal reconhece o movimento. E o texto diz o
   que está acontecendo, em vez de deixar a pessoa adivinhando.
   ============================================================ */
.abertura{max-width:420px;margin:32px auto;text-align:center}
.abertura__anel{
  position:relative;display:grid;place-items:center;
  width:78px;height:78px;margin:6px auto 20px;border-radius:50%;
}
.abertura__anel::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--stroke-gold);border-top-color:var(--gold-2);
  animation:spinSlow 1.1s linear infinite;
}
.abertura__anel img{width:40px;height:auto;opacity:.92}
.abertura__t{font-size:15.5px;font-weight:650;color:var(--txt);margin:0 0 6px}
.abertura__d{font-size:13.5px;color:var(--txt-3);margin:0;line-height:1.6}

/* Quem pediu menos movimento não precisa de anel girando para
   entender que está carregando: o texto já diz. */
@media (prefers-reduced-motion:reduce){
  .abertura__anel::after{animation:none;border-top-color:var(--stroke-gold)}
}
/* display:block aqui, e não só nas etapas clicáveis: são <span>, e
   sem isso o nome da etapa gruda na descrição — "Análise da
   TotaliNossa equipe confere tudo". */
.rail__title{display:block;font-size:14.5px;font-weight:660;color:var(--txt)}
.rail__step--todo .rail__title{color:var(--txt-3)}
.rail__desc{display:block;font-size:12.5px;color:var(--txt-3);margin-top:3px;line-height:1.5}

/* ---------- 13. Grupos de documentos ---------- */
.group{margin-bottom:14px}
.group__head{
  display:flex;align-items:center;gap:13px;width:100%;
  padding:16px;text-align:left;
  transition:background .2s var(--ease);
}
.group__head:hover{background:var(--glass)}
.group__icon{
  width:42px;height:42px;border-radius:13px;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(194,162,80,.2),rgba(34,69,108,.35));
  border:1px solid var(--stroke);
  color:var(--gold-2);
}
.group__icon .ic{width:20px;height:20px}
/* Título e contagem são <span>. Sem display:block eles ficavam
   colados na mesma linha — "Societário1 de 1 documento". */
.group__info{flex:1;min-width:0}
.group__title{display:block;font-size:15px;font-weight:660;color:var(--txt)}
.group__meta{display:block;font-size:12.5px;color:var(--txt-3);margin-top:2px}
/* Grupo concluído: fica mais discreto para não competir com o que
   ainda falta. Volta ao normal ao passar o mouse ou ao abrir, para
   continuar consultável. */
.group--pronto{background:var(--surf-baixo);border-color:var(--stroke-fraco);box-shadow:var(--sh-1)}
.group--pronto .group__icon,.group--pronto .group__title{opacity:.72}
/* A barra cheia e dourada era o objeto mais brilhante da lista
   justamente no grupo já resolvido — puxava o olho para o único
   lugar que não precisa de nada. */
.group--pronto .pbar__fill{opacity:.4}
.group--pronto:hover,.group--pronto[data-open="true"]{
  background:var(--surf);border-color:var(--stroke);box-shadow:var(--sh-2);
}
.group--pronto:hover .group__icon,.group--pronto:hover .group__title,
.group--pronto[data-open="true"] .group__icon,.group--pronto[data-open="true"] .group__title{opacity:1}
.group__chev{color:var(--txt-4);transition:transform .3s var(--ease-out);flex:none}
.group__chev .ic{width:20px;height:20px}
.group[data-open="true"] .group__chev{transform:rotate(180deg);color:var(--gold-2)}
.group[data-open="true"]{border-color:var(--stroke-gold);box-shadow:var(--sh-2),0 0 40px rgba(194,162,80,.06)}
.group__body{border-top:1px solid var(--stroke);animation:fadeIn .35s var(--ease-out)}
.group__progress{padding:0 16px 15px}

/* Item */
.item{border-bottom:1px solid rgba(255,255,255,.05);padding:15px 16px;transition:background .2s var(--ease)}
.item:last-child{border-bottom:0}
.item:hover{background:rgba(255,255,255,.02)}
.item--done{background:rgba(74,222,155,.035)}
.item--na{opacity:.6}
/* Documento devolvido pela equipe: precisa saltar aos olhos. */
.item--pendencia{
  background:rgba(255,122,114,.06);
  box-shadow:inset 3px 0 0 var(--danger);
}
.item--pendencia .item__mark::before{background:var(--danger);opacity:1}
/* Piscada única ao chegar vindo de "Continuar de onde parei". */
.item--alvo{
  background:rgba(220,196,135,.1);
  box-shadow:inset 3px 0 0 var(--gold-2);
  animation:chegou 2.8s var(--ease-out);
}
@keyframes chegou{
  0%{background:rgba(220,196,135,.26)}
  100%{background:rgba(220,196,135,.1)}
}
.item__top{display:flex;align-items:flex-start;gap:12px}

/* ---------- O documento abre e fecha ----------

   A lista crescia e nunca encolhia: documento aprovado ocupava a
   mesma altura de um que ainda precisa de alguma coisa. Fechado,
   ele vira uma linha; a tela encolhe conforme o cliente avança. */
.item__top[data-item-toggle]{cursor:pointer;user-select:none}
.item__top[data-item-toggle]:focus-visible{
  outline:2px solid var(--gold-2);outline-offset:3px;border-radius:10px;
}
.item__chev{
  flex:none;width:20px;height:20px;display:grid;place-items:center;
  color:var(--txt-4);margin-top:2px;
  transition:transform .24s var(--ease);
}
.item__chev .ic{width:17px;height:17px}
.item[data-open="true"] .item__chev{transform:rotate(180deg)}
.item__corpo{padding-left:34px;animation:fadeIn .25s var(--ease-out)}
@media (max-width:520px){.item__corpo{padding-left:0;margin-top:10px}}
.item__resumo{font-size:11.5px;color:var(--txt-4)}

/* ---------- A troca sobre o documento ----------

   O pedido da equipe e a resposta do cliente eram duas caixas com
   moldura, empilhadas, do mesmo peso do aviso permanente e do
   arquivo. Uma troca lê melhor como troca: um trilho, quem falou,
   o que disse. Ocupa menos altura que duas caixas e diz mais,
   porque a ordem passa a significar alguma coisa. */
.troca{
  display:flex;flex-direction:column;gap:12px;
  border-left:2px solid var(--stroke-2);
  padding-left:13px;margin:12px 0 4px;
}
.troca__i{display:flex;flex-direction:column;gap:2px}
.troca__q{font-size:10.5px;font-weight:750;letter-spacing:.07em;text-transform:uppercase}
.troca__q--eles{color:var(--warn)}
.troca__q--eu{color:var(--info)}
.troca__t{font-size:13.5px;color:var(--txt-2);line-height:1.55}
.troca__d{font-size:11.5px;color:var(--txt-4)}

/* ---------- Rodapé de ações secundárias ----------

   Eram botões empilhados com moldura, cada um numa linha,
   disputando atenção com o arquivo e com o pedido de correção.
   Em texto quieto continuam a um toque e param de competir. */
.item__rodape{
  display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
  margin-top:14px;padding-top:11px;border-top:1px solid var(--stroke);
}
/* PASSEI DA MEDIDA NA PRIMEIRA VERSÃO: sublinhado cinza em corpo
   12 deixou "Responder sem reenviar" indistinguível de legenda.
   Ele é ação, e numa correção pendente é A ação — tirar peso não
   podia significar tirar visibilidade.

   Agora tem contorno, tamanho de botão pequeno e a cor da marca.
   Continua mais leve que o botão de enviar arquivo, que é o
   caminho principal, mas se lê como coisa em que se clica. */
.item__pe{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;cursor:pointer;
  padding:6px 12px;border-radius:9px;
  border:1px solid var(--stroke-2);
  font-size:12.5px;font-weight:620;color:var(--txt-2);
  transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.item__pe .ic{width:15px;height:15px;color:var(--txt-4)}
.item__pe:hover,.item__pe:focus-visible{
  color:var(--gold-2);border-color:var(--stroke-gold);background:var(--glass);outline:none;
}
.item__pe:hover .ic,.item__pe:focus-visible .ic{color:var(--gold-2)}

/* O de correção pendente puxa mais: é o que a pessoa veio fazer. */
.item--pendencia .item__pe--acao{
  border-color:var(--stroke-gold);color:var(--gold-3);
}
.item--pendencia .item__pe--acao .ic{color:var(--gold-2)}

/* A nota não é botão e não pode parecer um. */
.item__pe--nota{
  border:0;padding:0;cursor:default;
  color:var(--txt-4);font-weight:450;font-size:12px;
}
.item__pe--nota:hover{color:var(--txt-4);background:transparent}
/* Quadradinho de situação.

   Enquanto o item está pendente ele fica só como um traço: antes era
   um quadrado vazio com borda, igualzinho a uma caixa de marcar — e
   quem não tem prática tocava ali esperando alguma coisa acontecer.
   Ele não é clicável; quem resolve o item é o botão de enviar. Cheio
   e verde, vira o sinal de concluído. */
.item__mark{
  width:23px;height:23px;border-radius:8px;flex:none;margin-top:1px;
  display:grid;place-items:center;
  border:1.5px solid transparent;background:none;color:transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.item__mark::before{
  content:"";width:9px;height:1.5px;border-radius:1px;
  background:var(--txt-4);opacity:.55;
}
.item--done .item__mark::before{display:none}
.item__mark .ic{width:13px;height:13px;stroke-width:3}
.item--done .item__mark{
  background:linear-gradient(135deg,var(--ok),#3f9e79);border-color:transparent;color:#08281c;
  box-shadow:0 0 11px rgba(92,195,148,.3);
}
.item__main{flex:1;min-width:0}
.item__name{font-size:14.5px;font-weight:620;color:var(--txt);line-height:1.4}
.item__name .opt{font-size:11.5px;font-weight:500;color:var(--txt-4);margin-left:7px}
.item__row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:8px}
.item__desc{font-size:12.5px;color:var(--txt-3);margin-top:6px;line-height:1.5}
.item__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

.help-btn{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:620;color:var(--gold-2);
  min-height:36px;padding:2px 2px;
  transition:color .2s var(--ease);
}
.help-btn:hover{color:var(--gold-3)}
.help-btn .ic{width:14px;height:14px}

/* Arquivos */
.files{margin-top:11px;display:flex;flex-direction:column;gap:8px}
.file{
  display:flex;align-items:center;gap:11px;
  padding:9px 11px;border:1px solid var(--stroke);border-radius:12px;
  background:var(--glass);
  animation:viewIn .32s var(--ease-out);
}
.file__icon{
  width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:rgba(99,168,245,.12);color:var(--info);
}
.file__icon .ic{width:16px;height:16px}
.file__info{flex:1;min-width:0}
.file__name{display:block;font-size:13px;font-weight:620;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file__meta{display:block;font-size:11.5px;color:var(--txt-3);margin-top:1px}
.file__del{
  width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;
  color:var(--txt-3);transition:background .2s var(--ease),color .2s var(--ease);
}
.file__del:hover{background:var(--danger-bg);color:var(--danger)}
.file__del .ic{width:16px;height:16px}

.item.drop--over{
  background:rgba(99,168,245,.09);
  box-shadow:inset 0 0 0 1.5px var(--info);
}

/* ---------- 13b. Menu de contexto ---------- */
.menuctx{
  position:fixed;z-index:130;min-width:186px;padding:6px;
  border-radius:13px;border:1px solid var(--stroke-2);
  background:var(--bg-1);
  box-shadow:0 18px 48px rgba(0,0,0,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.menuctx__i{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 11px;border-radius:9px;
  font-size:13.5px;font-weight:560;color:var(--txt-2);text-align:left;
  background:transparent;border:0;cursor:pointer;
}
.menuctx__i .ic{width:17px;height:17px;color:var(--txt-4);flex:none}
.menuctx__i:hover,.menuctx__i:focus-visible{background:var(--glass-2);color:var(--txt);outline:none}
/* ---------- Fila de conferência (ficha e pendências) ----------

   SEM MOLDURA DE CARTÃO, e essa é a decisão inteira. Este bloco
   estava desenhado igual aos setores que ele comanda — mesmo
   cartão, mesmo ícone, mesmo peso — e por isso ninguém sabia que
   o trabalho começa por ele. A diferença de FORMA é o que resolve;
   cor e tamanho sozinhos não resolveriam. */
.fila{margin:0 0 22px}
/* Título, ação e seta na mesma linha. A ação SAI do botão de abrir:
   botão dentro de botão não existe em HTML. */
.fila__linha{
  display:flex;align-items:center;gap:10px;
  padding:0 2px 11px;margin-bottom:14px;
  border-bottom:1px solid var(--stroke);
}
.fila__cab{
  display:flex;align-items:center;gap:12px;flex:1;min-width:0;
  padding:0;border:0;background:transparent;text-align:left;cursor:pointer;
}
.fila__txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.fila__titulo{
  font-size:16px;font-weight:680;color:var(--txt);letter-spacing:-.01em;
}
.fila__resumo{font-size:12.5px;color:var(--txt-4)}
.fila__chev{
  flex:none;color:var(--txt-4);display:grid;place-items:center;
  /* O tamanho precisa ser explícito: sem ele o SVG dentro do grid
     esticava para a largura que sobrasse e empurrava a linha
     inteira — 300px de seta num cabeçalho de 375. */
  width:26px;height:26px;
  border:0;background:transparent;cursor:pointer;border-radius:8px;
  transition:transform .24s var(--ease),background .18s var(--ease);
}
.fila__chev:hover{background:var(--glass)}
.fila__chev .ic{width:18px;height:18px}
.fila[data-open="true"] .fila__chev{transform:rotate(180deg)}
.fila__cab:hover .fila__titulo{color:var(--gold-3)}

/* A tabela rola dentro dela mesma: sem isto, no celular ela
   empurraria a página inteira para o lado. */
.tabela-rolo{overflow-x:auto;-webkit-overflow-scrolling:touch}
.conf{border-collapse:collapse;width:100%;min-width:560px;font-size:13px}
.conf thead th{
  text-align:left;padding:0 10px 8px;
  font-size:10.5px;font-weight:750;letter-spacing:.11em;text-transform:uppercase;
  color:var(--txt-4);border-bottom:1px solid var(--stroke);white-space:nowrap;
}
.conf tbody td{
  padding:13px 10px;border-bottom:1px solid var(--stroke);
  color:var(--txt-2);vertical-align:top;
}
.conf tbody tr:last-child td{border-bottom:0}
/* No resumo a tabela é uma lista, não um quadro: sem cabeçalho,
   a primeira linha não precisa de régua em cima e o respiro
   lateral some — a coluna do documento começa junto do título. */
.conf--resumo{min-width:380px}
.conf--resumo tbody td{padding-left:0}
.conf--resumo tbody td:last-child{padding-right:0}
.conf tbody tr:hover td{background:var(--glass)}
.conf__dir{text-align:right}
.conf__n{display:block;font-size:13.5px;font-weight:620;color:var(--txt);line-height:1.4}
.conf__s{display:block;font-size:11.5px;color:var(--txt-4);margin-top:2px}
.conf__vazio{color:var(--txt-4)}
/* UM BOTÃO E UM "MAIS".

   Em linha, os três somavam quase 300px de largura e a coluna de
   ação ficava maior que a do nome do documento. Empilhados,
   custavam 130px de ALTURA por linha — numa lista de dez, uma tela
   inteira gasta em botões repetidos.

   Agora fica à vista o que se faz quase sempre, e o resto abre no
   menu. A linha inteira volta a caber em uma altura de botão. */
.conf__acoes{
  display:inline-flex;align-items:center;gap:6px;
  justify-content:flex-end;flex-wrap:nowrap;
}
.conf__acoes .btn{white-space:nowrap}
.conf__mais{
  flex:none;display:grid;place-items:center;
  width:32px;height:32px;border-radius:9px;
  border:1px solid var(--stroke-2);background:transparent;
  color:var(--txt-3);cursor:pointer;
  transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.conf__mais .ic{width:16px;height:16px}
.conf__mais:hover,.conf__mais:focus-visible{
  color:var(--gold-2);border-color:var(--stroke-gold);background:var(--glass);outline:none;
}
.conf:not(.conf--resumo) td.conf__dir{width:1%}

/* Na ficha a tabela é resumo, e a única ação é descer até o
   documento — que está logo abaixo, inteiro. Botão cheio aqui
   competiria com o botão de verdade que existe lá. */
.conf__ir{
  display:inline-flex;align-items:center;gap:5px;
  background:transparent;border:0;padding:4px 0;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--gold-2);white-space:nowrap;
}
.conf__ir .ic{width:15px;height:15px}
/* A SETA NÃO ANDA MAIS NO HOVER, e o motivo é um laço.

   Ela deslizava 3px para a direita. Como esta é a última coluna e
   ela não tem respiro à direita, os 3px estouravam a largura e
   faziam nascer uma barra de rolagem horizontal. A barra ocupa
   altura, o layout sobe, o ponteiro deixa de estar sobre o botão,
   o hover cai, a seta volta, a barra some, o layout desce — e o
   ponteiro está sobre o botão de novo. A tela pisca sozinha
   enquanto o mouse ficar parado ali.

   Movimento que muda o tamanho de quem rola é sempre esse risco.
   A cor já diz que está sob o ponteiro. */
.conf__ir:hover,.conf__ir:focus-visible{color:var(--gold-3)}
.conf__ir:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:6px}

/* Chegar no lugar certo e não saber qual linha é a sua é chegar
   quase lá. O piscar dura pouco de propósito. */
.item--achado{animation:achado 1.6s var(--ease-out)}
@keyframes achado{
  0%,100%{background:transparent}
  15%,60%{background:rgba(194,162,80,.14)}
}
@media (prefers-reduced-motion: reduce){
  .item--achado{animation:none;background:rgba(194,162,80,.14)}
}
.arq--linha{max-width:190px}
.arq--linha .arq__n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Arquivo e o botão de apagar andam juntos: a lixeira é DAQUELE
   arquivo, não do documento. Num item com três anexos, a diferença
   é qual deles some. */
.arq-par{display:inline-flex;align-items:stretch;gap:4px;max-width:100%}
.arq-x{
  flex:none;display:grid;place-items:center;
  width:32px;border-radius:9px;
  border:1px solid var(--stroke);background:transparent;
  color:var(--txt-4);cursor:pointer;
  transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.arq-x .ic{width:15px;height:15px}
.arq-x:hover,.arq-x:focus-visible{
  color:var(--danger);border-color:var(--danger-br);background:var(--danger-bg);outline:none;
}

/* Selo que também é botão: só o "Respondido", que guarda o texto
   do cliente atrás dele. */
.badge--btn{cursor:pointer;border-style:solid}
.badge--btn .ic{width:13px;height:13px;margin-left:5px;opacity:.75}
.badge--btn:hover{filter:brightness(1.15)}

/* ---------- Balão de leitura ---------- */
.balao{
  position:fixed;z-index:130;max-width:min(320px,calc(100vw - 20px));
  padding:12px 14px;border-radius:12px;
  background:var(--bg-1);border:1px solid var(--stroke-2);
  box-shadow:0 18px 46px rgba(0,0,0,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.balao__t{
  font-size:10.5px;font-weight:750;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:6px;
}
.balao__c{font-size:13px;line-height:1.55;color:var(--txt-2)}

.chat__dica{
  align-self:center;text-align:center;
  padding:8px 12px 2px;line-height:1.5;max-width:min(100%,420px);
}

.menuctx__i--perigo{color:var(--danger)}
.menuctx__i--perigo .ic{color:var(--danger)}
.menuctx__i--perigo:hover,.menuctx__i--perigo:focus-visible{background:var(--danger-bg);color:var(--danger)}

/* Mensagem apagada: fica a marca, não o texto.

   Itálico e apagado de propósito — ela precisa ser lida como
   "havia algo aqui" e não confundida com uma frase que alguém
   escreveu. */
.msg--apagada > div:not(.msg__autor):not(.msg__hora){
  font-style:italic;color:var(--txt-4);
}
.msg__editada{
  font-style:normal;font-size:11px;color:var(--txt-4);margin-left:6px;
}

/* Segurar o dedo numa bolha não pode selecionar o texto: no
   celular a seleção abre a lupa e a alça azul por cima do menu. */
.chat .msg{-webkit-touch-callout:none}
.chat .msg.msg--pressionavel{-webkit-user-select:none;user-select:none}

/* ---------- 14. Avisos ---------- */
.notice{
  display:flex;gap:12px;padding:14px 15px;border-radius:13px;
  border:1px solid var(--stroke);background:var(--glass);
  font-size:13px;line-height:1.55;color:var(--txt-2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.notice__icon{flex:none;margin-top:1px;color:var(--txt-3)}
.notice__icon .ic{width:18px;height:18px}
.notice--warn{background:var(--warn-bg);border-color:var(--warn-br);color:#e8d3a4}
.notice--warn .notice__icon{color:var(--warn)}
.notice--info{background:var(--info-bg);border-color:var(--info-br);color:#c3ddfa}
.notice--info .notice__icon{color:var(--info)}
.notice--ok{background:var(--ok-bg);border-color:var(--ok-br);color:#b6ecd2}
.notice--ok .notice__icon{color:var(--ok)}
.notice strong{font-weight:680;color:var(--txt)}

/* ---------- 15. Academy ---------- */
.tiles{display:grid;gap:14px}
.tile{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--glass);border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--sh-2);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s var(--ease);
}
.tile:hover{transform:translateY(-4px);border-color:var(--stroke-gold);box-shadow:var(--sh-3),0 0 40px rgba(194,162,80,.1)}
/* `.tile__thumb` saiu: era o retângulo desenhado à mão que fazia as
   vezes de capa quando não havia imagem. Hoje toda capa vem de
   `capaHTML(..., "capa--tile")`, que resolve os dois casos — a capa
   de verdade e o lugar dela enquanto não existe. */
.tile__play{
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;position:relative;z-index:1;
  background:rgba(255,255,255,.08);border:1px solid var(--stroke-2);
  color:var(--gold-2);backdrop-filter:blur(6px);
  transition:transform .3s var(--ease-out),background .3s var(--ease);
}
.tile:hover .tile__play{transform:scale(1.1);background:rgba(194,162,80,.18)}
.tile__play .ic{width:20px;height:20px;margin-left:3px}
.tile__body{padding:16px 17px 18px}
.tile__kicker{font-size:10.5px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.tile__title{font-size:15px;font-weight:660;margin-top:6px;color:var(--txt)}
.tile__desc{font-size:12.5px;color:var(--txt-3);margin-top:6px;line-height:1.55}
.tile__foot{display:flex;align-items:center;gap:9px;margin-top:13px}

/* ---------- 14b. Editor da Academy (uso interno) ---------- */
/* Só `.ac-trilha__t` e `.ac-trilha__d` continuam sendo emitidos
   (js/painel-conteudo.js). O contêiner `.ac-trilha` e o cabeçalho
   com número saíram quando as trilhas do editor passaram a usar o
   bloco recolhível comum, o `.rec`. */
.ac-trilha__t{display:block;font-size:14.5px;font-weight:650;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-trilha__d{display:block;font-size:12px;color:var(--txt-3);margin-top:2px}
.ac-ordem{display:flex;flex-direction:column;gap:3px;flex:none}
.ac-mini{
  width:24px;height:20px;border-radius:6px;display:grid;place-items:center;
  background:var(--glass-2);border:1px solid var(--stroke);
  color:var(--txt-3);font-size:11px;line-height:1;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.ac-mini:hover{background:var(--glass-3);color:var(--txt)}
.ac-mini--x{width:30px;height:30px;font-size:17px}
.ac-mini--x:hover{background:var(--danger-bg);color:var(--danger)}

.ac-aulas{margin-top:6px;padding-top:14px;border-top:1px solid var(--stroke)}
.ac-aula{
  display:flex;align-items:flex-start;gap:10px;
  padding:11px;margin-bottom:9px;border-radius:11px;
  background:rgba(255,255,255,.03);border:1px solid var(--stroke);
}
.ac-aula__n{
  width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--glass-2);border:1px solid var(--stroke);
  font-size:11.5px;font-weight:700;color:var(--txt-3);margin-top:9px;
}
.ac-aula__campos{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.ac-aula__linha{display:flex;gap:7px;flex-wrap:wrap}
.ac-aula__linha .input{flex:1;min-width:150px}
.ac-aula__estado{font-size:11.5px;color:var(--txt-4)}
.ac-aula__estado.ok{color:var(--ok)}
.ac-aula .input{height:40px;font-size:14px}

/* ---------- 15a. Capas ---------- */
.capa{
  display:block;position:relative;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(140deg,#16283a,#25476a);
}
.capa img{width:100%;height:100%;object-fit:cover;display:block}
.capa__veu{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,28,42,.15),rgba(15,28,42,.62));
}
.capa .tile__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  transition:transform .3s var(--ease-out),background .3s var(--ease);
}
.capa--vazia::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 110% at 80% 8%,rgba(194,162,80,.24),transparent 60%);
}
.capa--vazia::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:26px 26px;
}
.tile--link{cursor:pointer}
.tile--link:hover .capa .tile__play{transform:translate(-50%,-50%) scale(1.12);background:rgba(194,162,80,.22)}
.tile--soon .capa{filter:saturate(.55) brightness(.8)}

/* ---------- 15b. Vídeos ---------- */
.video{position:relative}
.video__capa{
  width:100%;aspect-ratio:16/9;position:relative;display:grid;place-items:center;gap:10px;
  background:linear-gradient(140deg,#16283a,#25476a);
  border:0;overflow:hidden;
}
.video--largo .video__capa{border-radius:var(--r-lg) var(--r-lg) 0 0}
.video__capa::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 110% at 80% 8%,rgba(194,162,80,.26),transparent 60%),
    radial-gradient(60% 90% at 10% 100%,rgba(34,69,108,.6),transparent 60%);
}
.video__capa::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:26px 26px;
}
.video__capa > *{position:relative;z-index:1}
.video__capa .tile__play{width:58px;height:58px;transition:transform .3s var(--ease-out),background .3s var(--ease)}
.video__capa:hover .tile__play{transform:scale(1.09);background:rgba(194,162,80,.2)}
.video__rot{
  font-size:12px;font-weight:680;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2);
}
.video__soon{font-size:12px;font-weight:650;color:var(--txt-4)}
.video__capa--soon{cursor:default;filter:saturate(.6)}

/* O bloco `.aula*` saiu daqui: a aula dentro da trilha era uma
   LINHA de lista e virou cartão com capa, então usa `.tile*` como
   todo o resto da Academy (ver `cartaoAula` em js/app.js).
   Não confundir com `.ac-aula*`, mais abaixo, que é do editor de
   conteúdo do painel e continua em uso. */

/* MATERIAL DA AULA — áudio e PDF para baixar, abaixo do vídeo.

   Linha inteira clicável, e não um botão pequeno: quem vai baixar
   isso muitas vezes está no celular, de pé, antes de entrar no
   carro. Alvo grande erra menos.

   O ícone de download fica à direita, separado do texto, para a
   ação ficar clara sem depender de ler. */
.player__desc{
  font-size:13.5px;line-height:1.6;color:var(--txt-3);margin:14px 0 0;
}
.materiais{margin-top:16px;padding-top:14px;border-top:1px solid var(--stroke)}
.materiais__t{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px;
}
.material{
  display:flex;align-items:center;gap:12px;
  padding:11px 13px;margin-bottom:8px;border-radius:12px;
  background:var(--glass);border:1px solid var(--stroke);
  text-decoration:none;color:inherit;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.material:last-child{margin-bottom:0}
.material:hover{background:var(--glass-2);border-color:var(--stroke-gold)}
.material__ic{
  width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:rgba(194,162,80,.14);border:1px solid var(--stroke-gold);color:var(--gold-2);
}
.material__ic .ic{width:17px;height:17px}
.material__txt{flex:1;min-width:0}
.material__t{display:block;font-size:14px;font-weight:620;color:var(--txt)}
.material__d{display:block;font-size:12px;color:var(--txt-3);margin-top:2px;line-height:1.45}
.material__baixar{flex:none;color:var(--txt-4)}
.material__baixar .ic{width:19px;height:19px}
.material:hover .material__baixar{color:var(--gold-2)}

/* Player na janela */
.player{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- 16. Estado vazio ---------- */
.empty{text-align:center;padding:40px 20px}
.empty__icon{
  width:58px;height:58px;border-radius:18px;margin:0 auto 16px;
  display:grid;place-items:center;
  background:var(--glass-2);border:1px solid var(--stroke);color:var(--txt-4);
}
.empty__icon .ic{width:24px;height:24px}
.empty__title{font-size:15px;font-weight:660;color:var(--txt-2)}
.empty__desc{font-size:13px;color:var(--txt-3);margin-top:6px;max-width:38ch;margin-inline:auto;line-height:1.55}

/* ---------- 17. Modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;z-index:100;
  background:rgba(7,14,23,.7);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;
  animation:fadeIn .24s var(--ease);
}
.modal{
  width:100%;max-width:580px;max-height:88vh;
  display:flex;flex-direction:column;
  background:linear-gradient(160deg,rgba(26,49,73,.97),rgba(13,25,38,.98));
  border:1px solid var(--stroke-2);border-bottom:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--sh-3);
  animation:sheetUp .38s var(--ease-out);
  padding-bottom:env(safe-area-inset-bottom);
  overflow:hidden;
}
@keyframes sheetUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.modal__grip{width:40px;height:4px;border-radius:4px;background:var(--stroke-2);margin:10px auto 0;flex:none}
.modal__head{
  display:flex;align-items:flex-start;gap:12px;
  padding:15px 20px 13px;border-bottom:1px solid var(--stroke);flex:none;
}
.modal__title{font-size:16.5px;font-weight:660;flex:1;min-width:0;padding-top:2px;color:var(--txt)}
.modal__close{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  color:var(--txt-3);flex:none;transition:background .2s var(--ease),color .2s var(--ease);
}
.modal__close:hover{background:var(--glass-2);color:var(--txt)}
.modal__close .ic{width:19px;height:19px}
.modal__body{padding:18px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal__foot{
  padding:14px 20px;border-top:1px solid var(--stroke);flex:none;
  display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;
}

.help-block+.help-block{margin-top:18px}
.help-block__t{
  font-size:11px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);margin-bottom:7px;
}
.help-block__c{font-size:13.5px;color:var(--txt-2);line-height:1.65}
.help-list{margin-top:6px}
.help-list li{
  position:relative;padding-left:19px;font-size:13.5px;
  color:var(--txt-2);line-height:1.6;margin-top:6px;
}
.help-list li::before{
  content:"";position:absolute;left:3px;top:9px;
  width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold-glow);
}

/* Passo a passo numerado (procuração, código de acesso) */
.passos{counter-reset:passo;margin-top:8px}
.passos li{
  counter-increment:passo;position:relative;
  padding:0 0 14px 34px;font-size:13.5px;color:var(--txt-2);line-height:1.6;
}
.passos li:last-child{padding-bottom:0}
.passos li::before{
  content:counter(passo);
  position:absolute;left:0;top:0;
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(194,162,80,.14);border:1px solid var(--stroke-gold);
  color:var(--gold-2);font-size:11.5px;font-weight:720;
}
.passos li::after{
  content:"";position:absolute;left:11.5px;top:26px;bottom:2px;width:1px;
  background:linear-gradient(180deg,var(--stroke-gold),transparent);
}
.passos li:last-child::after{display:none}

/* ---------- 18. Toasts ---------- */
.toasts{
  position:fixed;left:50%;transform:translateX(-50%);
  top:calc(var(--header-h) + 12px);z-index:120;
  display:flex;flex-direction:column;gap:9px;
  width:min(92vw,450px);pointer-events:none;
}
.toast{
  pointer-events:auto;display:flex;align-items:flex-start;gap:11px;
  padding:12px 15px;border-radius:13px;
  background:linear-gradient(140deg,rgba(26,49,73,.97),rgba(13,25,38,.98));
  color:var(--txt);
  border:1px solid var(--stroke-2);border-left:3px solid var(--gold);
  box-shadow:var(--sh-3);font-size:13.5px;line-height:1.45;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:toastIn .3s var(--ease-out);
}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
.toast--out{opacity:0;transform:translateY(-12px);transition:opacity .24s,transform .24s}
.toast .ic{width:17px;height:17px;flex:none;margin-top:1px}
.toast--ok{border-left-color:var(--ok)}
.toast--ok .ic{color:var(--ok)}
.toast--err{border-left-color:var(--danger)}
.toast--err .ic{color:var(--danger)}

/* ---------- 19. FAQ e contatos ---------- */
.faq{margin-bottom:10px;transition:border-color .25s var(--ease)}
.faq[data-open="true"]{border-color:var(--stroke-gold)}
.faq__q{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:16px;text-align:left;font-size:14px;font-weight:620;color:var(--txt);
  transition:background .2s var(--ease);
}
.faq__q:hover{background:var(--glass)}
.faq__q .ic{width:18px;height:18px;color:var(--txt-4);flex:none;transition:transform .3s var(--ease-out)}
.faq[data-open="true"] .faq__q .ic{transform:rotate(180deg);color:var(--gold-2)}
.faq__a{
  padding:14px 16px 17px;font-size:13.5px;color:var(--txt-2);line-height:1.65;
  border-top:1px solid var(--stroke);animation:fadeIn .3s var(--ease-out);
}
.contact-grid{display:grid;gap:11px}
.contact{
  display:flex;align-items:center;gap:14px;padding:15px 16px;
  border:1px solid var(--stroke);border-radius:var(--r);background:var(--glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .25s var(--ease-out),border-color .25s var(--ease),box-shadow .25s var(--ease);
  text-decoration:none;color:inherit;
}
.contact:hover{transform:translateY(-2px);border-color:var(--stroke-gold);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.contact__icon{
  width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(194,162,80,.18),rgba(34,69,108,.3));
  border:1px solid var(--stroke);color:var(--gold-2);
}
.contact__icon .ic{width:19px;height:19px}
/* O e-mail é longo: sem min-width:0 ele impõe a própria largura mínima
   ao flex e estoura a tela em aparelhos de 320px. */
.contact{overflow:hidden}
.contact__txt{flex:1;min-width:0}
.contact__lbl{
  display:block;font-size:11px;color:var(--txt-3);font-weight:620;
  letter-spacing:.05em;text-transform:uppercase;
}
.contact__val{
  font-size:14px;font-weight:620;color:var(--txt);margin-top:2px;display:block;
  overflow-wrap:anywhere;word-break:break-word;
}

/* ---------- 20. Rodapé ---------- */
.foot{
  margin-top:34px;padding-top:20px;border-top:1px solid var(--stroke);
  font-size:11.5px;color:var(--txt-4);text-align:center;line-height:1.8;
}
.foot strong{color:var(--txt-3);font-weight:620}

/* A LOGOMARCA DA CONTABILIDADE, no rodapé e no fim do menu.

   Discreta por dois motivos. Primeiro, é acabamento: quem está no
   portal já sabe de quem ele é, e marca grande no rodapé lê como
   anúncio. Segundo, este é um tema escuro com o dourado reservado
   para o que se pode TOCAR — botão, aba ativa, link; uma logo em
   opacidade cheia disputaria com eles. Daí a opacidade parcial,
   que sobe no hover: presente quando se olha, silenciosa quando
   não.

   A largura vai na `img`, não no `span`: o span é só o invólucro
   que o `display:none` da tela de entrada liga e desliga, e uma
   largura nele não segura a imagem de dentro. */
.foot__marca{
  display:block;margin:0 auto 12px;opacity:.7;
  transition:opacity .2s var(--ease);
}
.foot__marca img{display:block;width:118px;height:auto;margin:0 auto}
.foot__marca:hover{opacity:1}

/* NA TELA DE ENTRADA, NÃO. O cartão de login já traz a marca em
   tamanho grande, e o rodapé fica logo abaixo dele — repetida a
   um palmo de distância, ela deixa de ser assinatura e vira
   repetição. Some enquanto a porta está fechada e volta quando a
   pessoa entra, que é quando o cartão não está mais na tela.

   Logo e nome escrito se revezam: some um, entra o outro, para
   que o rodapé nunca fique sem assinatura nenhuma. */
body.porta-aberta .foot__marca{display:none}
.foot__nome,
.foot__nome-br{display:none}
body.porta-aberta .foot__nome{display:inline}
body.porta-aberta .foot__nome-br{display:inline}

/* `.sidenav__marca` foi removido junto com a logo do menu lateral
   — ver o comentário no lugar dela, em index.html. */

/* ---------- 21. Desktop ---------- */
@media (min-width:900px){
  :root{--header-h:68px}
  .shell{
    display:grid;
    grid-template-columns:var(--sidebar-w) minmax(0,1fr);
    gap:28px;
    padding:28px 24px 44px;
    align-items:start;
  }
  .main{padding:0}
  .tabbar{display:none}

  .sidenav{display:block;position:sticky;top:calc(var(--header-h) + 28px)}
  .sidenav__label{
    font-size:10px;font-weight:750;letter-spacing:.15em;text-transform:uppercase;
    color:var(--txt-4);padding:0 12px 10px;
  }
  .sidenav__item{
    position:relative;overflow:hidden;
    display:flex;align-items:center;gap:12px;width:100%;
    padding:11px 13px;border-radius:12px;margin-bottom:4px;
    font-size:14px;font-weight:560;color:var(--txt-2);text-align:left;
    border:1px solid transparent;
    transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
  }
  .sidenav__item .ic{width:19px;height:19px;color:var(--txt-4);flex:none;transition:color .22s var(--ease)}
  .sidenav__item:hover{background:var(--glass);color:var(--txt);border-color:var(--stroke)}
  .sidenav__item:hover .ic{color:var(--txt-2)}
  .sidenav__item[aria-current="page"]{
    background:linear-gradient(120deg,rgba(194,162,80,.16),rgba(34,69,108,.24));
    border-color:var(--stroke-gold);
    color:var(--txt);font-weight:640;
    box-shadow:0 6px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .sidenav__item[aria-current="page"] .ic{color:var(--gold-2);filter:drop-shadow(0 0 5px var(--gold-glow))}
  .sidenav__item[aria-current="page"]::before{
    content:"";position:absolute;left:0;top:22%;bottom:22%;width:3px;border-radius:0 3px 3px 0;
    background:linear-gradient(180deg,var(--gold),var(--gold-2));box-shadow:0 0 10px var(--gold-glow);
  }
  .sidenav__badge{
    margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:11px;
    background:var(--glass-2);color:var(--txt-2);font-size:11px;font-weight:720;
    display:grid;place-items:center;border:1px solid var(--stroke);
  }
  .sidenav__item[aria-current="page"] .sidenav__badge{
    background:rgba(194,162,80,.2);color:var(--gold-3);border-color:var(--stroke-gold);
  }
  /* No menu lateral cabe a frase inteira; na barra de baixo, só o
     ponto. Ver o comentário em .tabbar__marca. */
  .sidenav__marca{
    margin-left:auto;padding:3px 9px;border-radius:9px;
    background:rgba(194,162,80,.14);color:var(--gold-3);
    border:1px solid var(--stroke-gold);
    font-size:10.5px;font-weight:680;letter-spacing:.01em;white-space:nowrap;
  }
  .sidenav__card{
    position:relative;overflow:hidden;
    margin-top:20px;padding:17px;border-radius:var(--r-lg);
    background:linear-gradient(150deg,rgba(34,69,108,.4),rgba(10,21,36,.6));
    border:1px solid var(--stroke);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:var(--sh-2);
  }
  .sidenav__card::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(80% 100% at 100% 0%,rgba(194,162,80,.22),transparent 60%);
  }
  .sidenav__card>*{position:relative}
  .sidenav__card .t{font-size:13.5px;font-weight:680;color:var(--txt)}
  .sidenav__card .d{font-size:12px;color:var(--txt-3);margin-top:5px;line-height:1.55}

  .hero{padding:34px 34px 36px}
  .hero__title{font-size:30px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
  .grid-2{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .modal-backdrop{align-items:center;padding:24px}
  .modal{border-radius:var(--r-xl);max-height:84vh;border-bottom:1px solid var(--stroke-2)}
  .modal__grip{display:none}
  .modal__head{padding-top:18px}
  .item__top{align-items:center}
}

@media (min-width:1200px){
  .hero__desc{max-width:54ch}
}

/* ---------- 22. Impressão ---------- */
@media print{
  .app-header,.tabbar,.sidenav,.item__actions,.btn,.toasts,.bg{display:none !important}
  body{background:#fff;color:#000}
  .shell{display:block;padding:0}
  .card,.hero{box-shadow:none;border:1px solid #ccc;background:#fff;backdrop-filter:none}
  .hero__title{-webkit-text-fill-color:#000;color:#000}
  .item__name,.group__title,.section__title,.rail__title{color:#000}
}

#view:focus{outline:none}
.gira180{transform:rotate(180deg)}

/* ---------- 23. Trilha clicável ---------- */
.rail__step--link{
  display:block;width:100%;text-align:left;position:relative;
  padding-right:34px;border-radius:12px;
  transition:background .2s var(--ease);
}
.rail__step--link:hover{background:var(--glass)}
.rail__chev{
  position:absolute;right:8px;top:2px;color:var(--txt-4);
  transition:transform .2s var(--ease),color .2s var(--ease);
}
.rail__chev .ic{width:18px;height:18px}
.rail__step--link:hover .rail__chev{transform:translateX(3px);color:var(--gold-2)}
.rail__acao{
  display:inline-block;margin-left:8px;padding:1px 9px;border-radius:20px;
  background:rgba(194,162,80,.16);border:1px solid var(--stroke-gold);
  color:var(--gold-2);font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;vertical-align:middle;
}
.rail__trava{
  display:inline-block;margin-top:6px;font-size:11.5px;color:var(--txt-4);
  padding:2px 9px;border-radius:20px;background:var(--glass);border:1px solid var(--stroke);
}

/* ---------- 24. Financeiro ---------- */
.segm{display:inline-flex;gap:6px;padding:5px;border-radius:13px;
  background:var(--glass);border:1px solid var(--stroke)}
.segm__b{
  min-width:88px;height:38px;padding:0 18px;border-radius:9px;
  font-size:14px;font-weight:620;color:var(--txt-2);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.segm__b:hover{background:var(--glass-2);color:var(--txt)}
.segm__b--on{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#0d1926;
  box-shadow:0 3px 14px rgba(194,162,80,.3);
}
.segm__b--on:hover{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#0d1926}

.opcoes{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.opcao{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 14px;border-radius:11px;
  background:var(--glass);border:1px solid var(--stroke);
  font-size:13.5px;font-weight:560;color:var(--txt-2);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.opcao:hover{background:var(--glass-2);border-color:var(--stroke-2);color:var(--txt)}
.opcao input{width:17px;height:17px;flex:none;margin:0}
.opcao--on{
  background:rgba(194,162,80,.13);border-color:var(--stroke-gold);color:var(--txt);
}

.escolhas{display:flex;flex-direction:column;gap:11px}
.escolha{
  display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;
  padding:15px 16px;border-radius:14px;
  background:var(--glass);border:1px solid var(--stroke);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .16s var(--ease);
}
.escolha:hover{background:var(--glass-2);border-color:var(--stroke-2)}
.escolha:active{transform:scale(.995)}
.escolha--on{background:rgba(194,162,80,.11);border-color:var(--stroke-gold)}
.escolha__marca{
  width:23px;height:23px;border-radius:50%;flex:none;margin-top:2px;
  display:grid;place-items:center;
  border:1.5px solid var(--stroke-2);color:transparent;
}
.escolha__marca .ic{width:13px;height:13px;stroke-width:3}
.escolha--on .escolha__marca{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  border-color:transparent;color:#0d1926;
}
.escolha__txt{flex:1;min-width:0}
.escolha__t{display:block;font-size:14.5px;font-weight:640;color:var(--txt)}
.escolha__d{display:block;font-size:12.5px;color:var(--txt-3);margin-top:5px;line-height:1.55}

/* ---------- 24b. Compromisso e recibo ---------- */
.compromisso{
  margin-top:14px;padding:16px 17px;border-radius:14px;
  background:linear-gradient(150deg,rgba(220,174,92,.13),rgba(15,28,42,.45));
  border:1px solid var(--warn-br);
}
.compromisso__topo{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.compromisso__icone{
  width:30px;height:30px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:rgba(220,174,92,.18);border:1px solid var(--warn-br);color:var(--warn);
}
.compromisso__icone .ic{width:16px;height:16px}
.compromisso__t{font-size:15px;font-weight:680;color:var(--txt)}
.compromisso__chamada{font-size:13.5px;color:var(--txt-2);line-height:1.6}
.compromisso__lista{margin:12px 0}
.compromisso__lista li{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;margin-bottom:7px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid var(--stroke);
  font-size:14px;font-weight:560;color:var(--txt);
}
.compromisso__n{
  width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#0d1926;
  font-size:12px;font-weight:750;
}
.compromisso__fecho{font-size:12.5px;color:var(--txt-3);line-height:1.6}
.compromisso__nota{
  display:flex;align-items:flex-start;gap:8px;margin-top:12px;
  font-size:12px;color:var(--txt-4);line-height:1.5;
}
.compromisso__nota .ic{width:15px;height:15px;flex:none;margin-top:1px;color:var(--gold-2)}

.recibo{
  margin-bottom:18px;padding:22px 20px;border-radius:var(--r-xl);text-align:center;
  background:linear-gradient(150deg,rgba(92,195,148,.14),rgba(15,28,42,.5));
  border:1px solid var(--ok-br);
}
.recibo__marca{
  width:52px;height:52px;border-radius:50%;margin:0 auto 14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--ok),#3f9e79);color:#08281c;
  box-shadow:0 0 22px rgba(92,195,148,.32);
}
.recibo__marca .ic{width:26px;height:26px;stroke-width:3}
.recibo__t{font-size:19px;font-weight:680;color:var(--txt);letter-spacing:-.02em}
.recibo__d{font-size:13.5px;color:var(--txt-2);margin-top:6px;line-height:1.55}
.recibo__prot{
  margin:18px auto 0;padding:13px 16px;border-radius:14px;max-width:340px;
  background:linear-gradient(150deg,rgba(26,49,73,.85),rgba(13,25,38,.9));
  border:1px solid var(--stroke-gold);
}
.recibo__prot-r{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-3);
}
.recibo__prot-n{
  display:block;margin-top:5px;font-family:var(--mono,"Cascadia Mono",ui-monospace,monospace);
  font-size:20px;font-weight:700;letter-spacing:.06em;color:var(--gold-2);
}
.recibo__termo{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--stroke);text-align:left;
}
.recibo__termo-t{
  font-size:13px;font-weight:680;color:var(--txt);margin-bottom:10px;text-align:center;
}
/* O rótulo do termo é longo: sem quebrar linha ele estoura a tela
   em aparelhos de 320px. */
.recibo__termo .btn{
  width:100%;height:auto;min-height:44px;padding:11px 14px;
  white-space:normal;text-align:center;line-height:1.35;
}
.recibo__nota{font-size:12px;color:var(--txt-4);margin-top:16px;line-height:1.5}

/* ---------- 25. Cofre de credenciais ---------- */
.cofre{
  margin-top:12px;padding:15px 16px;border-radius:14px;
  background:linear-gradient(150deg,rgba(42,77,112,.22),rgba(15,28,42,.5));
  border:1px solid var(--stroke-2);
}
.cofre--ok{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  background:linear-gradient(150deg,rgba(92,195,148,.14),rgba(15,28,42,.5));
  border-color:var(--ok-br);
}
.cofre__cabeca{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cofre__icone{
  width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:rgba(194,162,80,.16);border:1px solid var(--stroke-gold);color:var(--gold-2);
}
.cofre--ok .cofre__icone{background:rgba(92,195,148,.16);border-color:var(--ok-br);color:var(--ok)}

/* SENHA CIFRADA QUE AINDA NÃO SUBIU. Âmbar, não verde e não
   vermelho: não deu errado — está a caminho —, mas também não
   está resolvido, e o verde ao lado do "guardado" faria a pessoa
   ler as duas situações como a mesma coisa. */
.cofre--espera{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  background:linear-gradient(150deg,rgba(194,162,80,.15),rgba(15,28,42,.5));
  border-color:var(--stroke-gold);
}
.cofre--espera .cofre__icone{
  background:rgba(194,162,80,.18);border-color:var(--stroke-gold);color:var(--gold-2);
}
.cofre__icone .ic{width:17px;height:17px}
.cofre__txt{flex:1;min-width:0}
.cofre__t{display:block;font-size:14px;font-weight:650;color:var(--txt)}
.cofre__d{display:block;font-size:12.5px;color:var(--txt-3);margin-top:3px;line-height:1.5}
.cofre__acoes{display:flex;gap:8px;flex-wrap:wrap}
.cofre__nota{
  font-size:11.5px;color:var(--txt-4);line-height:1.5;margin-top:10px;text-align:center;
}

.campo-senha{position:relative}
.campo-senha .input{padding-right:46px}
.campo-senha__ver{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  color:var(--txt-3);transition:background .18s var(--ease),color .18s var(--ease);
}
.campo-senha__ver:hover{background:var(--glass-2);color:var(--txt)}
.campo-senha__ver--on{color:var(--gold-2)}
.campo-senha__ver .ic{width:18px;height:18px}

/* ---------- 26. Mensagens ---------- */
/* A CONVERSA ROLA DENTRO DELA MESMA.

   Antes a lista crescia sem limite e quem rolava movia a PÁGINA:
   o campo de escrever subia e descia junto, e o cabeçalho ia
   embora. Agora a lista tem altura própria e o resto fica parado.

   `overscroll-behavior:contain` é o que impede o encadeamento —
   chegando ao fim da lista, a roda do mouse para ali em vez de
   passar a rolar a página atrás. Era o "a tela rola fora do campo
   de mensagens" que o Raoni descreveu.

   `dvh` em vez de `vh` por causa do celular: a barra de endereço
   aparece e some, e com `vh` a conversa ficaria alta demais com a
   barra visível, empurrando o campo de escrever para fora. */
.chat{
  display:flex;flex-direction:column;gap:12px;
  max-height:52vh;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:2px 4px 0 0;
  scrollbar-width:thin;
}
/* O RESPIRO DE BAIXO NÃO É ENFEITE, e não pode ser `padding`.

   Sem ele a última bolha encosta na borda do container e a quina
   arredondada fica cortada — quem lê não sabe se a conversa
   acabou ali ou se falta mais um pedaço, e num chat essa dúvida é
   justamente a pior.

   NEM `padding-bottom` NO CONTAINER NEM `margin-bottom` NO ÚLTIMO
   FILHO resolvem: em caixa flex com rolagem, os dois são
   descartados no fim da rolagem. Medi os dois aqui, e a folga
   abaixo da última bolha continuou zero nas duas tentativas.

   O que funciona é um ITEM de verdade no fim — um `::after` é
   item flex como qualquer outro, e item ocupa espaço. */
.chat::after{content:"";flex:0 0 10px}
/* Os descontos saíram de medição, não de chute: no celular sobram
   o cabeçalho, o título da seção, o campo de escrever e a barra de
   abas; no computador não há barra de abas e o título é menor.
   Medido em 375×812 e em 1280×800 no endereço publicado. */
@supports (height: 100dvh) {
  .chat{ max-height:calc(100dvh - 470px); min-height:180px; }
}
@media (min-width:900px){
  .chat{ max-height:56vh }
  @supports (height: 100dvh) {
    .chat{ max-height:calc(100dvh - 360px); min-height:260px; }
  }
}
.chat__dia{
  align-self:center;font-size:11px;font-weight:620;letter-spacing:.04em;
  color:var(--txt-4);background:var(--glass);border:1px solid var(--stroke);
  padding:3px 12px;border-radius:20px;margin:6px 0;
}
.msg{
  max-width:min(88%,520px);padding:11px 14px;border-radius:16px;
  font-size:14px;line-height:1.55;position:relative;
  animation:viewIn .3s var(--ease-out);
}
/* Lado da bolha = quem está OLHANDO, não quem escreveu.

   Antes as classes eram `msg--cliente` e `msg--equipe`, e o lado
   vinha do autor. Isso funcionava no portal (onde quem olha é o
   cliente) e ficava invertido no painel: a equipe via as próprias
   mensagens à esquerda, como se fossem recebidas. Agora quem
   monta a conversa decide: `msg--minha` à direita, `msg--dele` à
   esquerda — o padrão de qualquer aplicativo de mensagem. */
.msg--dele{
  align-self:flex-start;border-bottom-left-radius:5px;
  background:var(--glass-2);border:1px solid var(--stroke);color:var(--txt);
}
.msg--minha{
  align-self:flex-end;border-bottom-right-radius:5px;
  background:linear-gradient(140deg,rgba(194,162,80,.19),rgba(194,162,80,.11));
  border:1px solid var(--stroke-gold);color:var(--txt);
}
.msg__autor{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:4px;
}
.msg--minha .msg__autor{color:var(--txt-3)}
.msg__ref{
  display:inline-flex;align-items:center;gap:6px;
  margin-bottom:7px;padding:5px 10px;border-radius:9px;
  background:rgba(255,255,255,.05);border:1px solid var(--stroke);
  font-size:11.5px;font-weight:620;color:var(--txt-2);
}
.msg__ref .ic{width:13px;height:13px;color:var(--gold-2)}
.msg__hora{font-size:10.5px;color:var(--txt-4);margin-top:5px;text-align:right}
.msg--nova::after{
  content:"";position:absolute;top:12px;left:-9px;
  width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold-glow);
}

/* O CAMPO DE ESCREVER NÃO GRUDA MAIS NO FUNDO.

   `position:sticky` fazia sentido quando a conversa crescia sem
   limite e a página inteira rolava — o campo precisava acompanhar.
   Agora a conversa tem altura própria e a página não rola, então o
   grudado só servia para o campo ficar POR CIMA da última mensagem,
   escondendo justamente a mais recente. Ele agora vem depois da
   lista, no fluxo normal. */
.composer{
  position:relative;z-index:20;
  /* `bottom` ficou de quando era `sticky`; com `relative` ele
     DESLOCA o elemento para cima e o campo subia por cima da
     conversa. */
  bottom:auto;
  margin-top:14px;padding:10px;
  background:linear-gradient(160deg,rgba(26,49,73,.94),rgba(13,25,38,.96));
  border:1px solid var(--stroke-2);border-radius:var(--r-lg);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:var(--sh-2);
}
.composer__linha{display:flex;gap:8px;align-items:flex-end}
.composer__acao{
  width:42px;height:44px;flex:none;border-radius:11px;
  display:grid;place-items:center;color:var(--txt-3);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.composer__acao:hover{background:var(--glass-2);color:var(--gold-2)}
.composer__acao .ic{width:20px;height:20px}

.composer__anexos{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px}
.pendente{
  display:inline-flex;align-items:center;gap:7px;max-width:100%;
  padding:6px 6px 6px 10px;border-radius:10px;
  background:var(--glass-2);border:1px solid var(--stroke);
  font-size:12px;color:var(--txt-2);
}
.pendente .ic{width:15px;height:15px;flex:none;color:var(--gold-2)}
.pendente__n{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pendente__t{color:var(--txt-4);font-size:11px;flex:none}
.pendente__x{
  width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;
  color:var(--txt-3);
}
.pendente__x:hover{background:var(--danger-bg);color:var(--danger)}
.pendente__x .ic{width:13px;height:13px;color:inherit}

/* Anexos dentro da bolha da mensagem */
.msg__anexos{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.anexo{width:100%;text-align:left}
.anexo--img{
  border-radius:12px;overflow:hidden;border:1px solid var(--stroke);
  background:var(--glass);padding:0;line-height:0;
}
.anexo--img img{width:100%;max-height:260px;object-fit:cover;display:block}
.anexo--audio{width:100%}
.anexo--audio audio{width:100%;height:38px}
.anexo--arq{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:11px;
  background:var(--glass);border:1px solid var(--stroke);
  transition:border-color .18s var(--ease);
}
.anexo--arq:hover{border-color:var(--stroke-gold)}

/* Mapa — carregado só quando o cliente pede */
.mapa{position:relative;min-height:150px}
.mapa__previa{
  display:flex;align-items:center;gap:13px;padding:18px 16px;flex-wrap:wrap;
  background:
    radial-gradient(70% 120% at 100% 0%,rgba(194,162,80,.12),transparent 60%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 12px,transparent 12px 24px);
}
.mapa__pino{
  width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:rgba(194,162,80,.16);border:1px solid var(--stroke-gold);color:var(--gold-2);
}
.mapa__pino .ic{width:21px;height:21px}
.mapa__txt{flex:1;min-width:150px}
.mapa__t{display:block;font-size:14.5px;font-weight:650;color:var(--txt)}
.mapa__d{display:block;font-size:12.5px;color:var(--txt-3);margin-top:3px;line-height:1.5}
.mapa__quadro{
  width:100%;height:280px;border:0;display:block;
  filter:saturate(.85) contrast(1.05);
}
/* 52px, e não 44: com 44 o texto de exemplo "Escreva sua mensagem"
   quebra em duas linhas no celular e a segunda fica cortada pela
   borda de baixo. */
.composer .textarea{
  min-height:52px;max-height:150px;padding:11px 13px;border-radius:12px;
  background:rgba(255,255,255,.045);
  resize:none;
}
.composer__send{
  width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#0d1926;
  transition:filter .2s var(--ease),transform .14s var(--ease),opacity .2s var(--ease);
}
.composer__send:hover{filter:brightness(1.06)}
.composer__send:active{transform:scale(.94)}
.composer__send[disabled]{opacity:.35;pointer-events:none}
.composer__send .ic{width:19px;height:19px}

/* Cartão de permissão de notificações */
.notif{
  display:flex;align-items:center;gap:13px;padding:15px 16px;
  border:1px solid var(--stroke-gold);border-radius:var(--r-lg);
  background:linear-gradient(140deg,rgba(194,162,80,.13),rgba(42,77,112,.16));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.notif__icon{
  width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:rgba(194,162,80,.16);border:1px solid var(--stroke-gold);color:var(--gold-2);
}
.notif__icon .ic{width:20px;height:20px}
.notif__txt{flex:1;min-width:0}
.notif__t{font-size:13.5px;font-weight:650;color:var(--txt)}
.notif__d{font-size:12.5px;color:var(--txt-3);margin-top:3px;line-height:1.5}

@media (min-width:900px){
  .composer{bottom:18px}
  .msg{max-width:min(78%,560px)}
}

/* ============================================================
   Tutorial guiado

   A tela inteira escurece e só uma parte fica acesa. É o mesmo
   recurso de quem aponta o dedo e diz "olha aqui": não sobra
   para onde a atenção fugir. O véu não é preto puro — o azul da
   marca continua aparecendo por baixo.
   ============================================================ */
.tour{position:fixed;inset:0;z-index:120}
/* A página continua podendo rolar: é rolando que o tutorial leva
   a pessoa até cada parte da tela. Travar a rolagem aqui deixaria
   os passos de baixo inalcançáveis. */
body.tour-aberto{overscroll-behavior:contain}

.tour__spot{
  position:fixed;border-radius:16px;
  box-shadow:0 0 0 100vmax rgba(8,16,26,.8), 0 0 0 1px var(--stroke-gold) inset;
  /* Curto de propósito: a área acesa também se reposiciona a cada
     quadro da rolagem, e uma transição longa a faria arrastar
     atrás da tela. */
  transition:left .12s linear,top .12s linear,width .12s linear,height .12s linear;
  pointer-events:none;
}
.tour__spot[hidden]{display:none}
/* Passo de abertura e de encerramento não acendem nada: aí o
   véu vem do próprio fundo do tutorial. */
.tour--cheio{background:rgba(8,16,26,.8)}

.tour__balao{
  position:fixed;z-index:2;width:min(420px,calc(100vw - 24px));
  padding:18px 18px 15px;
  border:1px solid var(--stroke-2);border-radius:var(--r-lg);
  background:linear-gradient(155deg,rgba(26,49,73,.98),rgba(15,28,42,.99));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--sh-3);
  animation:tourEntra .26s var(--ease) both;
}
@keyframes tourEntra{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .tour__balao{animation:none}
  .tour__spot{transition:none}
}

.tour__conta{
  font-size:11px;font-weight:640;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-2);
}
.tour__titulo{font-size:17px;font-weight:660;color:var(--txt);margin:7px 0 6px;line-height:1.35}
.tour__texto{font-size:14px;line-height:1.65;color:var(--txt-2)}

.tour__pontos{display:flex;gap:5px;margin:14px 0 12px}
.tour__ponto{width:16px;height:3px;border-radius:2px;background:var(--stroke-2)}
.tour__ponto--on{background:linear-gradient(90deg,var(--gold),var(--gold-2))}

.tour__acoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tour__espaco{flex:1;min-width:0}

/* ============================================================
   Cartão de etapa concluída

   Aparece quando o cliente termina um passo e a tela ficaria
   parada, sem dizer para onde ir. É o empurrãozinho de volta
   para a trilha.
   ============================================================ */
.feito{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 18px 16px;
  border:1px solid var(--stroke-gold);border-radius:var(--r-lg);
  background:linear-gradient(140deg,rgba(92,195,148,.1),rgba(42,77,112,.16));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.feito__icone{
  width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:rgba(92,195,148,.16);border:1px solid var(--ok-br);color:var(--ok);
}
.feito__icone .ic{width:22px;height:22px}
.feito__txt{flex:1;min-width:0;display:block}
.feito__t{display:block;font-size:15px;font-weight:660;color:var(--txt)}
.feito__d{display:block;font-size:13px;color:var(--txt-2);margin-top:4px;line-height:1.6}
.feito__acoes{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}

/* Mesma caixa, outro momento: aqui a etapa ainda não fechou. O
   tom é de recado, não de conquista. */
.feito--falta{
  border-color:var(--stroke);
  background:linear-gradient(140deg,rgba(107,164,221,.09),rgba(26,49,73,.5));
}
.feito__icone--falta{
  background:rgba(107,164,221,.14);border-color:var(--info-br);color:var(--info);
}
.feito__acoes .btn{white-space:normal;height:auto;min-height:38px}

/* ============================================================
   Painel da equipe

   Mesma linguagem visual do portal do cliente — quem trabalha o
   dia inteiro aqui merece a mesma tela cuidada. O que muda é a
   densidade: aqui a pessoa precisa ver muita coisa de uma vez.
   ============================================================ */
.filtros{display:flex;flex-wrap:wrap;gap:7px}
.filtro{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:20px;
  border:1px solid var(--stroke);background:var(--glass);
  color:var(--txt-2);font-size:12.5px;font-weight:560;
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.filtro b{color:var(--txt);font-weight:700}
.filtro:hover{border-color:var(--stroke-2);color:var(--txt)}
.filtro--on{
  border-color:var(--stroke-gold);color:var(--txt);
  background:linear-gradient(140deg,rgba(194,162,80,.16),rgba(194,162,80,.07));
}

/* Ficha do cliente: rótulo à esquerda, valor à direita, quebrando
   para baixo quando a tela é estreita. */
.ficha__linha{
  display:flex;flex-wrap:wrap;gap:4px 16px;
  padding:8px 0;border-bottom:1px solid var(--stroke);
}
.ficha__linha:last-child{border-bottom:0}
.ficha__rot{flex:none;min-width:150px;font-size:12.5px;color:var(--txt-3)}
.ficha__val{flex:1;min-width:0;font-size:13.5px;color:var(--txt);overflow-wrap:anywhere}
.ficha__val i{color:var(--txt-4);font-style:normal}
.ficha__nums{
  display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px;
  font-size:12.5px;color:var(--txt-3);
}
.ficha__nums b{color:var(--txt);font-size:14px;font-weight:680}

/* Arquivos enviados pelo cliente */
.arqs{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.arq{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:8px 11px;border-radius:10px;
  border:1px solid var(--stroke);background:var(--glass);
  font-size:12.5px;color:var(--txt-2);
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.arq:hover{border-color:var(--stroke-gold);color:var(--txt)}
.arq .ic{width:16px;height:16px;flex:none;color:var(--gold-2)}
.arq__n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arq__t{flex:none;color:var(--txt-4);font-size:11.5px}

/* Conversa dentro da ficha */
.conversa{
  display:flex;flex-direction:column;gap:10px;
  max-height:420px;overflow-y:auto;
  padding:2px 4px 0 0;
  /* Ver a nota em `.chat`: sem isto, chegar ao fim da lista faz a
     roda do mouse continuar rolando a página atrás dela. */
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
/* Mesmo respiro do `.chat`, e pelo mesmo motivo — ver a nota lá. */
.conversa::after{content:"";flex:0 0 10px}

/* ---------- A conversa da caixa de entrada não rola a página ----------

   Antes a tela inteira rolava: para chegar ao campo de resposta era
   preciso descer a página, e ao descer o cabeçalho da conversa
   sumia — quem responde perdia de vista de qual cliente se trata.

   Agora a tela ocupa a altura da janela e quem rola é só a lista de
   mensagens. O `min-height:0` no filho é o que faz isso funcionar:
   sem ele, um item flex se recusa a encolher abaixo do próprio
   conteúdo e a lista empurra o campo de resposta para fora da tela,
   que é o mesmo problema com outra aparência.

   O `[hidden]` precisa ser dito de novo aqui: `display:flex` é mais
   específico que o `display:none` do navegador, e sem esta linha a
   conversa apareceria por cima da lista de conversas. */
#msConversa{display:flex;flex-direction:column;min-height:340px}
#msConversa[hidden]{display:none}

/* A CADEIA PRECISA IR ATÉ A LISTA, e foi aqui que eu errei.

   A regra era `#msConversa > .conversa`. Só que a lista não é
   filha direta: ela mora dentro de um `.card`, junto com o campo
   de resposta e os botões. O seletor nunca casou.

   O efeito foi pior que "não funcionou": o `.card` não conseguia
   encolher (todo item flex tem `min-height:auto` por padrão),
   então ele manteve a altura natural e empurrou o campo de
   resposta para FORA da caixa de altura fixa. Como a página
   deixou de rolar no mesmo movimento, o Enviar ficou inalcançável
   — quem abria a conversa não conseguia mais responder.

   Cada elo do caminho precisa poder encolher: o `.card` também é
   coluna flex, e só a lista cresce. */
/* A nota que explica onde está o resto do trabalho, no Início
   vazio. Fica visivelmente abaixo do texto principal: é resposta a
   uma pergunta, não outro aviso disputando atenção. */
.empty__nota{
  margin:16px auto 0;max-width:44ch;
  padding-top:14px;border-top:1px solid var(--stroke);
  font-size:13px;line-height:1.6;color:var(--txt-3);
}
.empty__nota strong{color:var(--txt-2);font-weight:640}
.empty__link{
  background:transparent;border:0;padding:0;cursor:pointer;
  font-size:13px;font-weight:640;color:var(--gold-2);
  text-decoration:underline;text-underline-offset:3px;
}
.empty__link:hover,.empty__link:focus-visible{color:var(--gold-3);outline:none}

/* Os modelos, agora fora da caixa. Um respiro para não parecerem
   colados no rodapé da conversa. */
#msModelos{margin-top:16px}
#msModelos[hidden]{display:none}

#msConversa > .card{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
}
#msConversa .conversa{flex:1 1 auto;min-height:0;max-height:none}

/* A ALTURA VEM DO JAVASCRIPT, e não daqui, de propósito.

   Um `calc(100dvh - X)` obriga a acertar o X, e o X é a soma do
   cabeçalho, da folga da página e da barra de baixo — que mudam
   entre o computador e o celular, e mudariam de novo no dia em que
   alguém acrescentar uma linha ao cabeçalho. Errar o X para mais
   deixa a página rolando; para menos, corta a conversa.

   O `ajustarAlturaDaConversa` mede a posição real do bloco e depois
   confere se ainda sobrou rolagem, corrigindo o que sobrou. Não há
   número para acertar.

   Este valor é só o piso, para o caso de o JavaScript não rodar. */
#msConversa{height:calc(100vh - 160px)}
@supports (height: 100dvh) {
  #msConversa{height:calc(100dvh - 160px)}
}

/* Credencial aberta. Fica visível o mínimo de tempo possível e
   nunca é gravada em lugar nenhum. */
.cred__saida{
  margin-top:10px;padding:11px 13px;border-radius:12px;
  border:1px solid var(--stroke-gold);
  background:linear-gradient(140deg,rgba(194,162,80,.1),rgba(26,49,73,.4));
}
.cred__par{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:5px 0}
.cred__rot{flex:none;min-width:110px;font-size:12px;color:var(--txt-3)}

/* A SENHA SAÍA NA VERTICAL, uma letra por linha.

   A culpa era de `flex:1` com `min-width:0`: espremido entre o
   rótulo de 110px e dois botões, este campo encolhia até quase
   nada, e `overflow-wrap:anywhere` fazia o resto — quebrava a cada
   caractere, porque tecnicamente cabia um por linha.

   `flex-basis` de 150px com piso de 130px inverte a ordem das
   coisas: em vez de espremer, a linha QUEBRA e o valor ganha a
   largura toda embaixo. O `anywhere` fica, mas agora só age em
   senha comprida de verdade, que é para o que ele serve. */
.cred__v{
  flex:1 1 150px;min-width:130px;
  font-size:13.5px;color:var(--txt);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow-wrap:anywhere;
}

@media (max-width:520px){
  .ficha__rot{min-width:0;flex-basis:100%}
  .cred__rot{min-width:0;flex-basis:100%}
}

/* Linha de cliente na lista do painel.

   Não dá para reaproveitar .group__head aqui: os selos de
   situação são longos ("Aguardando correção") e, em tela de
   celular, espremiam o nome da empresa até quebrar letra a
   letra. Aqui o selo desce para a linha de baixo quando não
   cabe. */
.cliente{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px 13px;
  width:100%;padding:15px 16px;text-align:left;
  transition:background .2s var(--ease);
}
.cliente:hover{background:var(--glass)}
.cliente__info{flex:1 1 170px;min-width:0}
.cliente__nome{
  display:block;font-size:14.5px;font-weight:640;color:var(--txt);
  overflow-wrap:anywhere;
}
/* ---------- Aprovação em lote ---------- */
.lote{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 13px;margin-bottom:14px;
  border:1px solid var(--info-br);border-radius:var(--r);
  background:var(--info-bg);
}
.lote--topo{margin-top:16px;margin-bottom:0}
.lote__txt{flex:1;min-width:180px;font-size:12.5px;color:var(--txt-2);line-height:1.5}

/* ---------- Modelos de mensagem ---------- */
.modelos{display:flex;flex-direction:column;gap:7px}
.modelos__rot{
  font-size:10.5px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-4);
}
.modelos__chips{display:flex;gap:7px;flex-wrap:wrap}
.chip-modelo{
  padding:6px 12px;min-height:34px;border-radius:20px;
  font-size:12.5px;font-weight:600;color:var(--txt-2);
  border:1px solid var(--stroke);background:var(--glass);
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.chip-modelo:hover{background:var(--glass-2);color:var(--txt);border-color:var(--stroke-2)}
.chip-modelo--edit{color:var(--gold-2);border-style:dashed}
.modelo-edit{
  padding:12px;margin-bottom:10px;
  border:1px solid var(--stroke);border-radius:var(--r);background:var(--glass-fraco);
}

.cliente__parado{color:var(--txt-4)}
.cliente__parado--alerta{color:var(--warn);font-weight:640}
.cliente__meta{
  display:block;font-size:12.5px;color:var(--txt-3);margin-top:3px;line-height:1.5;
  overflow-wrap:anywhere;
}
.cliente__chev{flex:none;margin-left:auto;color:var(--txt-4)}
.cliente__chev .ic{width:20px;height:20px}

/* ============================================================
   Editor de conteúdo — capas e prévia

   Uma lista de códigos de vídeo não diz nada a ninguém. Com a
   capa do YouTube ao lado, quem edita confere na hora se colou o
   link certo, sem abrir outra aba.
   ============================================================ */
.capa{
  display:block;flex:none;object-fit:cover;
  border-radius:10px;border:1px solid var(--stroke);
  background:var(--bg-2);
}
.capa--aula{width:74px;height:42px}
.capa--trilha{width:86px;height:48px}
.capa--larga{width:180px;height:101px;border-radius:12px}
.capa--vazia{
  display:grid;place-items:center;color:var(--txt-4);
  background:linear-gradient(140deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
}
.capa--vazia .ic{width:20px;height:20px}

/* ============================================================
   Caixa que abre e fecha, no editor de conteúdo

   Serve para trilha da Academy, departamento do checklist, banco,
   maquininha e pergunta frequente — todas as listas que ficaram
   longas demais para caber na tela abertas.

   O cabeçalho é BOTÃO e ocupa a linha inteira: alvo grande é o que
   faz isso funcionar no celular. Os controles de ordem e o remover
   ficam FORA dele, senão tocar em "subir" abriria a caixa junto.
   ============================================================ */
/* Rótulo de campo com um botão à direita, na mesma linha. Em tela
   estreita o botão desce, em vez de espremer o rótulo. */
.campo-topo{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-bottom:7px;
}

.rec{
  border:1px solid var(--stroke);border-radius:12px;
  background:rgba(255,255,255,.02);margin-bottom:10px;overflow:hidden;
}
.rec--aberta{border-color:var(--stroke-2,var(--stroke));background:rgba(255,255,255,.035)}
.rec__topo{display:flex;align-items:center;gap:10px;padding:10px 12px}
.rec__cab{
  flex:1;min-width:0;display:flex;align-items:center;gap:10px;
  background:none;border:0;padding:0;text-align:left;cursor:pointer;color:inherit;
}
.rec__seta{color:var(--txt-4);transition:transform .25s var(--ease-out);flex:none;display:flex}
.rec__seta .ic{width:18px;height:18px}
.rec--aberta .rec__seta{transform:rotate(180deg);color:var(--gold-2)}
.rec__txt{min-width:0;flex:1}
.rec__t{
  display:block;font-size:14px;font-weight:650;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rec__d{
  display:block;font-size:12px;color:var(--txt-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rec__corpo{padding:0 12px 14px;border-top:1px solid var(--stroke);padding-top:14px}

/* Variante em `<details>`, para conteúdo que abre e fecha sozinho
   sem precisar de JavaScript — usada onde o bloco é raro e não vale
   a mecânica do `caixaRecolhivel`. O triângulo padrão do navegador
   sai porque destoa do resto; a seta é a mesma dos outros blocos. */
details.rec > summary.rec__head{
  display:flex;align-items:center;gap:10px;padding:11px 13px;
  cursor:pointer;list-style:none;
}
details.rec > summary.rec__head::-webkit-details-marker{display:none}
details.rec > summary.rec__head::after{
  content:"";flex:none;width:9px;height:9px;margin-left:auto;
  border-right:1.8px solid var(--txt-4);border-bottom:1.8px solid var(--txt-4);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .25s var(--ease-out),border-color .2s var(--ease);
}
details.rec[open] > summary.rec__head::after{
  transform:rotate(225deg) translateY(-2px);border-color:var(--gold-2);
}
details.rec > summary.rec__head:hover{background:rgba(255,255,255,.03)}
details.rec > summary.rec__head .rec__t{white-space:normal}
details.rec > summary.rec__head .rec__d{white-space:normal}
details.rec[open]{border-color:var(--stroke-2,var(--stroke))}
/* Fechar o `<details>` é trabalho do navegador, mas alguma regra
   desta folha vence a do agente e o corpo continuava medindo altura
   com o bloco fechado. Explicitar custa uma linha e não depende de
   descobrir qual seletor estava ganhando. */
details.rec:not([open]) > .rec__body{display:none}
.rec__body{padding:0 13px 15px;border-top:1px solid var(--stroke);padding-top:14px}

/* Capa + os botões que a trocam, empilhados. A coluna precisa de
   largura própria: sem ela o flex do .ac-aula espreme os botões
   contra a capa e o texto quebra letra a letra. */
.capa-caixa,.previa__capa{
  display:flex;flex-direction:column;gap:6px;flex:none;align-items:stretch;
}
.capa-acoes{display:flex;flex-wrap:wrap;gap:4px}
/* Os outros .ac-mini são quadradinhos de seta; estes carregam
   texto, então soltam a largura fixa. */
.ac-mini--txt{
  width:auto;height:auto;padding:3px 7px;font-size:10.5px;
  white-space:nowrap;letter-spacing:.01em;
}

.previa{display:flex;gap:14px;align-items:flex-start}
.previa__txt{flex:1;min-width:0}
.previa__t{font-size:15px;font-weight:660;color:var(--txt);overflow-wrap:anywhere}
.previa__d{font-size:13px;color:var(--txt-2);margin-top:4px;line-height:1.55;overflow-wrap:anywhere}
.previa__m{font-size:12px;color:var(--txt-4);margin-top:8px}

@media (max-width:520px){
  .previa{flex-direction:column}
  .capa--larga{width:100%;height:auto;aspect-ratio:16/9}
}

/* Cabeçalho de seção que carrega selo de estado.

   Sem isto, em tela estreita o selo ("Aguardando correção",
   "Sem vídeo") rouba a largura e o título quebra letra a letra.
   Aqui o selo desce para a linha de baixo, alinhado com o texto,
   e a seta continua no canto. */
.group__head--selo{flex-wrap:wrap}
.group__head--selo .group__info{flex:1 1 140px}
@media (max-width:560px){
  /* A quebra vem de um item vazio de largura total, não do selo:
     dar 100% ao próprio selo o esticaria de ponta a ponta. */
  .group__head--selo::after{content:"";flex-basis:100%;height:0;order:2}
  .group__head--selo .group__chev{order:1;margin-left:auto}
  .group__head--selo .badge{order:3;margin-left:55px}
}

/* ============================================================
   Quem está usando o sistema

   Fica no cabeçalho, sempre visível. Num sistema interno isso
   não é enfeite: é o que evita alguém aprovar documento achando
   que está na própria conta quando o colega esqueceu a sessão
   aberta.
   ============================================================ */
/* Virou botão: toca-se nele para trocar o próprio nome. O visual
   é o mesmo de antes — o que muda é o cursor e a resposta ao
   toque, que é o que faz uma pessoa descobrir que ali se clica. */
.usuario{
  display:inline-flex;align-items:center;gap:9px;
  padding:4px 12px 4px 4px;border-radius:20px;
  border:1px solid var(--stroke);background:var(--glass);
  max-width:220px;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.usuario:hover{border-color:var(--gold-2);background:var(--glass-2,var(--glass))}
.usuario:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.usuario__avatar{
  width:29px;height:29px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--gold),var(--gold-2));
  color:#0d1926;font-size:11.5px;font-weight:750;letter-spacing:.02em;
}
.usuario__txt{min-width:0;display:none;line-height:1.25}
.usuario__nome{
  display:block;font-size:12.5px;font-weight:640;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.usuario__papel{
  display:block;font-size:10px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-2);
}
@media (min-width:600px){
  .usuario__txt{display:block}
}

/* Divisor de assunto dentro da ficha do cliente */
.ficha__titulo{
  font-size:11px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-4);margin:26px 0 10px;
  /* Passou a carregar dois botões, e em linha eles empurravam o
     título. Em tela estreita a linha quebra em vez de espremer. */
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
}
.ficha__titulo .btn{letter-spacing:0;text-transform:none}
.ficha__titulo .btn:first-of-type{margin-left:auto}

/* A marca completa na tela de entrada. É o único lugar com espaço
   para ela inteira; no cabeçalho entra só o símbolo, que continua
   legível a 30px de altura. */
.marca-porta{
  display:block;width:min(210px,62%);height:auto;
  margin:0 auto 20px;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.45));
}

/* ============================================================
   Caixa de entrada e lista de pendências

   Conversa com mensagem não lida ganha marca dourada na lateral.
   Mensagem de cliente parada é cliente esperando resposta — não
   pode passar despercebida no meio da lista.
   ============================================================ */
.cliente--novo{
  background:linear-gradient(90deg,rgba(194,162,80,.1),transparent 60%);
  box-shadow:inset 3px 0 0 var(--gold);
}
.cliente--novo .cliente__nome{color:var(--txt);font-weight:700}

.conversa--alta{max-height:min(60vh,560px)}
@supports (height: 100dvh) {
  .conversa--alta{max-height:min(calc(100dvh - 380px),560px)}
}

/* Fila de arquivos escolhidos e ainda não enviados, no painel. Só
   ocupa espaço quando há algo nela. */
.anexos-fila:not(:empty){display:flex;flex-direction:column;gap:6px;margin-top:10px}

/* Botões de material da aula, no editor de conteúdo. */
.ac-material{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;
}
.ac-material__n{
  font-size:11.5px;color:var(--txt-3);max-width:180px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Cabeçalho da empresa na lista de pendências */
.pend__topo{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 13px;
  padding:15px 16px;border-bottom:1px solid var(--stroke);
}
.pend__acoes{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
@media (max-width:560px){
  .pend__acoes{margin-left:0;flex-basis:100%}
  .pend__acoes .btn{flex:1}
}

/* Houve `.tabbar--6` e `.tabbar--7` aqui, de quando o painel tinha
   menos abas. Saíram: hoje só a de oito é usada (equipe.html), e
   guardar o ajuste fino de contagens que não existem mais é
   guardar decisão sobre problema que ninguém tem. Se um dia a barra
   encolher, o `.tabbar--8` abaixo mostra como se resolve. */

/* CINCO ITENS NA BARRA, NÃO OITO.

   A versão anterior punha as oito abas aqui e, abaixo de 420px,
   deixava a barra ROLAR de lado — a decisão escrita então foi
   "rolar é ruim; letra ilegível é pior", e as duas metades disso
   estavam certas. Faltava a terceira saída: tirar abas da barra.

   Rolar era pior do que parecia. Num celular de 375px a barra
   media 448px, e Usuários e Segurança ficavam fora da tela sem
   nenhuma pista de que existiam — quem não soubesse arrastar a
   barra concluiria que aquelas telas não existem no telefone.

   Agora ficam as quatro do dia a dia — Início, Clientes,
   Pendências, Mensagens — e um "Mais" que abre o resto em menu.
   Cinco itens dão 75px cada a 375px, e 64px a 320px: alvo
   confortável e letra em tamanho de gente, sem rolagem. */
.tabbar--8 .tabbar__item--extra{display:none}
.tabbar--8 .tabbar__item{
  flex:1 1 0;min-width:0;
  font-size:10px;letter-spacing:-.1px;gap:3px;padding:7px 4px 6px;
}
.tabbar--8 .tabbar__item .ic{width:20px;height:20px}
@media (max-width:359px){
  .tabbar--8 .tabbar__item{font-size:9px}
}

/* Cabeçalho de seção com botão de ação à direita.

   Em tela estreita o botão espremia o texto e as duas coisas se
   sobrepunham. Agora ele desce para a linha de baixo quando o
   texto precisa da largura toda. */
.section__head{flex-wrap:wrap}
.section__head > div:first-child{flex:1 1 230px;min-width:0}

/* Cartão de empresa na aba de pendências: cabeçalho que abre e
   fecha, com os botões de ação ao lado — fora do botão de abrir,
   porque botão dentro de botão não existe. */
.pend__abrir{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px 13px;
  flex:1 1 240px;min-width:0;text-align:left;
}
.pend__abrir .cliente__chev{margin-left:auto}
/* Mesma regra dos outros cabeçalhos com selo: em tela estreita o
   selo desce de linha em vez de espremer o nome da empresa. */
@media (max-width:560px){
  .pend__abrir::after{content:"";flex-basis:100%;height:0;order:2}
  .pend__abrir .cliente__chev{order:1}
  .pend__abrir .badge{order:3;margin-left:55px}
}
.pend .cliente__chev .ic{transition:transform .3s var(--ease-out)}
.pend[data-open="true"] > .pend__topo .cliente__chev .ic{
  transform:rotate(180deg);color:var(--gold-2);
}

/* Setor dentro da empresa */
.pend__setor{border-top:1px solid var(--stroke)}
.pend__setorCab{padding:13px 16px}
.pend__setorCab .group__icon{width:34px;height:34px;border-radius:10px}
.pend__setorCab .group__chev .ic{transition:transform .3s var(--ease-out)}
.pend__setor[data-open="true"] .group__chev .ic{transform:rotate(180deg);color:var(--gold-2)}
.pend__setor .item{padding-left:24px}

/* ============================================================
   Aceite da política — primeira decisão do cliente

   Estava no fim da página, depois de toda a explicação, e virava
   um detalhe fácil de não ver. Quem chega no portal precisa de
   um alvo óbvio: "clique aqui e siga". Por isso o bloco tem
   borda dourada, área de toque grande e uma frase que diz o que
   fazer, não o que a lei diz.
   ============================================================ */
.aceite{
  border-color:var(--stroke-gold);
  background:linear-gradient(150deg,rgba(194,162,80,.12),rgba(26,49,73,.5));
  box-shadow:var(--sh-2), 0 0 0 1px var(--stroke-gold);
}
.aceite__titulo{font-size:19px;font-weight:680;color:var(--txt);margin:8px 0 16px;line-height:1.3}

/* O nome vem antes do aceite, separado por uma linha: são dois
   pedidos diferentes, e colados viravam um bloco só que a pessoa
   lê como "mais burocracia". */
.aceite__nome{
  margin-bottom:18px;padding-bottom:18px;
  border-bottom:1px solid var(--stroke);
}

.aceite__caixa{
  display:flex;align-items:flex-start;gap:13px;cursor:pointer;
  padding:15px;border-radius:var(--r);
  border:1px solid var(--stroke-2);background:rgba(255,255,255,.05);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.aceite__caixa:hover{border-color:var(--stroke-gold);background:rgba(255,255,255,.08)}
.aceite__caixa--on{
  border-color:var(--gold);
  background:linear-gradient(140deg,rgba(92,195,148,.12),rgba(194,162,80,.08));
}
.aceite__check{
  width:26px;height:26px;flex:none;margin-top:1px;cursor:pointer;
  accent-color:var(--gold);
}
.aceite__txt{flex:1;min-width:0}
.aceite__chamada{
  display:flex;align-items:center;gap:8px;
  font-size:15.5px;font-weight:700;color:var(--gold-2);line-height:1.35;
}
.aceite__chamada .ic{
  width:18px;height:18px;flex:none;
  opacity:.55;transition:opacity .2s var(--ease),color .2s var(--ease);
}
.aceite__caixa--on .aceite__chamada{color:var(--ok)}
.aceite__caixa--on .aceite__chamada .ic{opacity:1;color:var(--ok)}
.aceite__lei{
  display:block;font-size:12.5px;color:var(--txt-3);line-height:1.6;margin-top:7px;
}
.aceite__btn{margin-top:16px;height:50px;font-size:15.5px}
.aceite__dica{
  font-size:12.5px;color:var(--txt-4);text-align:center;margin-top:10px;
}

@media (max-width:400px){
  .aceite__chamada{font-size:14.5px}
  .aceite__caixa{padding:13px}
}

/* As três vias da cobrança — portal, WhatsApp e e-mail — lado a
   lado, para a equipe escolher sabendo o que muda em cada uma,
   não pelo nome do botão. */
.cobranca__vias{display:grid;gap:10px}
.cobranca__via{
  padding:11px 13px;border-radius:12px;
  border:1px solid var(--stroke);background:var(--glass);
}
/* Via indisponível (sem telefone, sem e-mail) continua visível e
   explicando por quê: sumir daria a impressão de que o sistema
   não faz aquilo. */
.cobranca__via--off{opacity:.55}
.cobranca__via--off .cobranca__t .ic{color:var(--txt-4)}
.cobranca__t{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:650;color:var(--txt);
}
.cobranca__t .ic{width:16px;height:16px;color:var(--gold-2);flex:none}
.cobranca__d{
  display:block;font-size:12.5px;color:var(--txt-3);line-height:1.55;margin-top:5px;
}
@media (min-width:560px){ .cobranca__vias{grid-template-columns:repeat(3,1fr)} }

/* ============================================================
   "Enviar depois" — o combinado do cliente

   Três prazos fechados. O botão mostra o rótulo em cima e a data
   real embaixo: "na próxima semana" é vago, "26/08" não é.
   ============================================================ */
.prazos{display:grid;gap:9px}
.prazo{
  height:auto;min-height:56px;padding:11px 14px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;
}
.prazo__rot{display:block;font-size:14px;font-weight:650;color:var(--txt)}
.prazo__dia{display:block;font-size:12.5px;color:var(--txt-3);font-weight:500}
@media (min-width:520px){ .prazos{grid-template-columns:repeat(3,1fr)} }

.lembrete__acoes{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;
}

/* O selo e o apagamento POR MENSAGEM saíram em 27/08/2026: resolver
   é da conversa inteira, e carimbar cada frase repetia a mesma
   informação quatro vezes numa dúvida contada em quatro mensagens.
   As classes `.msg__resolver`, `.msg__selo` e `.msg--resolvida`
   foram embora junto — ninguém mais as escreve. */

/* ============================================================
   Tela de início do painel

   Os números são BOTÕES: cada um leva onde aquilo se resolve.
   Número que não leva a lugar nenhum é enfeite, e enfeite em
   painel de trabalho vira ruído em duas semanas.
   ============================================================ */
.numeros{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px;
}
.numero{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:14px 15px;border-radius:14px;text-align:left;
  border:1px solid var(--stroke-card);background:var(--surf);
  cursor:pointer;transition:border-color .16s ease, background .16s ease;
}
.numero:hover{border-color:var(--stroke-2);background:var(--surf-2)}
.numero:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.numero__n{
  display:block;font-size:26px;font-weight:700;line-height:1.1;color:var(--txt);
  font-variant-numeric:tabular-nums;
}
.numero__rot{display:block;font-size:12.5px;color:var(--txt-3);line-height:1.4}
.numero__extra{display:block;font-size:11.5px;color:var(--txt-4);margin-top:3px}
/* Só o que exige ação hoje ganha o dourado. Se tudo brilhasse,
   nada brilharia. */
.numero--forte{border-color:rgba(194,162,80,.5)}
.numero--forte .numero__n{color:var(--gold-2)}

@media (min-width:760px){ .numeros{grid-template-columns:repeat(4,minmax(0,1fr))} }

.tarefa{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:14px 16px;text-align:left;cursor:pointer;background:none;border:0;
  border-bottom:1px solid var(--stroke);
  transition:background .16s ease;
}
.tarefa:last-child{border-bottom:0}
.tarefa:hover{background:var(--surf-2)}
.tarefa:focus-visible{outline:2px solid var(--gold-2);outline-offset:-2px}
.tarefa__icone{
  flex:none;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;
  background:var(--surf-3);color:var(--gold-2);
}
.tarefa__icone .ic{width:18px;height:18px}
.tarefa__txt{flex:1 1 auto;min-width:0}
.tarefa__t{
  display:block;font-size:14px;font-weight:640;color:var(--txt);line-height:1.35;
}
.tarefa__d{
  display:block;font-size:12.5px;color:var(--txt-3);line-height:1.45;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tarefa__q{display:block;font-size:11.5px;color:var(--txt-4);margin-top:3px}
.tarefa .badge{flex:none}

/* No celular o selo e a seta disputam espaço com o texto. A seta
   sai: a linha inteira já é clicável. */
@media (max-width:520px){
  .tarefa{padding:13px 14px;gap:10px}
  .tarefa .cliente__chev{display:none}
  .tarefa__icone{width:34px;height:34px}
}

/* ============================================================
   Departamentos (aba Segurança)

   Caixas grandes, não uma lista de checkbox miúdo: são cinco
   opções que alguém marca uma vez por pessoa e depois esquece.
   O contorno aceso é o que se enxerga de longe.
   ============================================================ */
.deptos{display:grid;gap:8px;margin-top:4px}

/* Lista que rola dentro de si.

   Nasceu do cadastro de cliente novo: a lista de "este link também
   dá acesso a" cresce com um item por empresa, e com algumas
   dezenas ela empurrava o botão de gerar o link para fora da tela.
   Altura fixa resolve sem tirar nada de vista — rolar dentro de um
   quadro é mais fácil que caçar um botão no fim da página.

   `padding-right` porque a barra de rolagem passa por cima da
   borda direita dos itens; `4px` devolve o respiro. */
.deptos--rola{
  max-height:264px;overflow-y:auto;padding-right:4px;
  /* A borda avisa que aquilo rola. Sem ela, a lista cortada no
     meio parece lista que acabou. */
  border:1px solid var(--stroke);border-radius:12px;padding:8px;
}
.depto{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:11px;cursor:pointer;
  border:1px solid var(--stroke);background:var(--surf-2);
  transition:border-color .16s ease, background .16s ease;
}
.depto:hover{border-color:var(--stroke-2)}
.depto--on{border-color:rgba(194,162,80,.55);background:var(--surf-3)}
.depto input{flex:none;width:17px;height:17px;accent-color:var(--gold-2);cursor:pointer}
.depto__txt{font-size:13.5px;color:var(--txt);line-height:1.35}
.depto--on .depto__txt{font-weight:620}
@media (min-width:520px){ .deptos{grid-template-columns:1fr 1fr} }

/* ============================================================
   "Quais documentos se aplicam"

   Cada linha é um documento com três respostas. Os `display:block`
   abaixo não são enfeite: `<span>` é inline por padrão, e sem eles
   o nome do documento cola no departamento ("Contrato social e
   alteraçõesSocietário"). Já aconteceu neste projeto — três vezes.
   ============================================================ */
.aplics{display:grid;gap:10px;max-height:52vh;overflow-y:auto;padding-right:4px}
/* ---------- Setores do "Quais se aplicam" ----------

   Eram 26 linhas soltas, cada uma repetindo o nome do setor em
   letra miúda. O agrupamento tira essa repetição e devolve a
   informação que a pessoa procura ao abrir a janela: quanto de
   cada setor já foi decidido.

   O cartão do setor tem moldura; a linha do documento, dentro
   dele, NÃO tem — senão viraria caixa dentro de caixa, que é o
   ruído que se queria tirar. O que separa as linhas é uma régua
   fina, e nada mais. */
.aplic-setor{
  border:1px solid var(--stroke);border-radius:14px;
  background:var(--surf-2);overflow:hidden;
}
/* O espaçamento vem do `gap` da `.aplics`; margem aqui somaria. */
.aplic-setor__cab{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:12px 13px;background:transparent;border:0;
  text-align:left;cursor:pointer;
}
.aplic-setor__cab:hover{background:var(--glass)}
.aplic-setor__cab .group__icon{flex:none;width:32px;height:32px}
.aplic-setor__cab .group__icon .ic{width:16px;height:16px}
.aplic-setor__txt{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.aplic-setor__n{font-size:13.5px;font-weight:640;color:var(--txt)}
.aplic-setor__m{font-size:11.5px;color:var(--txt-4)}
.aplic-setor__chev{
  flex:none;width:20px;height:20px;display:grid;place-items:center;color:var(--txt-4);
  transition:transform .24s var(--ease);
}
.aplic-setor__chev .ic{width:17px;height:17px}
.aplic-setor[data-open="true"] .aplic-setor__chev{transform:rotate(180deg);color:var(--gold-2)}
.aplic-setor[data-open="true"]{border-color:var(--stroke-2)}
.aplic-setor__corpo{border-top:1px solid var(--stroke)}

.aplic{
  padding:11px 13px;
  border-bottom:1px solid var(--stroke);
}
.aplic:last-child{border-bottom:0}
.aplic__cab{display:flex;align-items:flex-start;gap:10px}
.aplic__cab .group__icon{flex:none;width:32px;height:32px}
.aplic__cab .group__icon .ic{width:16px;height:16px}
.aplic__txt{flex:1 1 auto;min-width:0}
.aplic__nome{display:block;font-size:13.5px;font-weight:620;color:var(--txt);line-height:1.35}
.aplic__grupo{display:block;font-size:12px;color:var(--txt-4);margin-top:2px}

.aplic__opcoes{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.aplic__op{
  flex:1 1 auto;min-width:96px;
  padding:7px 10px;border-radius:9px;cursor:pointer;
  font-size:12.5px;font-weight:600;line-height:1.2;
  border:1px solid var(--stroke);background:var(--surf);color:var(--txt-3);
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.aplic__op:hover{border-color:var(--stroke-2);color:var(--txt-2)}
.aplic__op--on{
  border-color:rgba(194,162,80,.6);background:var(--surf-3);color:var(--gold-2);
}
.aplic__op:focus-visible{outline:2px solid var(--gold-2);outline-offset:1px}

/* ============================================================
   Painéis de configuração da ficha

   Não dobram. É a diferença entre guardar e mostrar: cartão
   dobrável serve para lista longa e repetitiva (documento), onde
   o selo do cabeçalho já diz se vale abrir. Cadastro é um punhado
   de campos que se quer LER — dobrar só acrescenta um clique.

   Duas colunas no computador porque são painéis curtos; um deles
   sozinho numa coluna larga vira uma tira de ar.
   ============================================================ */
.paineis{display:grid;gap:14px;margin-bottom:14px}
@media (min-width:900px){
  .paineis{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .painel--largo{grid-column:1 / -1}
}
.painel{
  border:1px solid var(--stroke-card);border-radius:16px;background:var(--surf);
  overflow:hidden;
}
.painel__cab{
  display:flex;align-items:center;gap:11px;
  padding:14px 16px;border-bottom:1px solid var(--stroke);
}
.painel__cab .group__icon{flex:none}
.painel__txt{flex:1 1 auto;min-width:0}
.painel__t{display:block;font-size:14.5px;font-weight:650;color:var(--txt);line-height:1.3}
.painel__d{display:block;font-size:12.5px;color:var(--txt-3);margin-top:2px;line-height:1.4}
.painel__corpo{padding:14px 16px}
.painel__corpo > :last-child{margin-bottom:0}

@media (max-width:520px){
  .painel__cab{flex-wrap:wrap;padding:13px 14px}
  .painel__cab .btn{margin-left:auto}
  .painel__corpo{padding:13px 14px}
}

/* ============================================================
   Ficha do cliente — trilho de situação e faixas internas

   Duas camadas de hierarquia, e as duas respondem à mesma
   pergunta: onde está o trabalho?

   FORA, o trilho colorido à esquerda do cartão do departamento
   mostra a situação mais urgente lá dentro. Percorrendo a
   página, a cor encontra o trabalho antes da leitura.

   DENTRO, os documentos se dividem por quem tem a bola:
   esperando você, com o cliente, concluído. Antes vinham todos
   juntos e com o mesmo peso — o aprovado ocupava o mesmo espaço
   do que estava travando a migração.
   ============================================================ */
.trilho{position:relative;overflow:hidden}
.trilho::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--sit);
}
.trilho > .group__head{padding-left:18px}
.trilho--corr{--sit:#ba423c}
.trilho--conf{--sit:var(--gold-2)}
.trilho--ok{--sit:#4c9a72}
.trilho--pend{--sit:#2c4157}
.trilho--na{--sit:var(--stroke)}

.bola{margin-bottom:14px}
.bola:last-child{margin-bottom:0}
.bola__faixa{
  display:flex;align-items:center;gap:9px;
  margin-bottom:8px;
}
.bola__pt{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.bola__t{
  font-size:11.5px;font-weight:700;color:var(--c);
  letter-spacing:.06em;text-transform:uppercase;
}
.bola__n{
  font-size:11px;font-weight:640;color:var(--txt-4);
  padding:1px 7px;border-radius:999px;background:var(--surf-3);
}
.bola__linha{flex:1 1 auto;height:1px;background:var(--stroke-fraco)}

.bola--voce{--c:var(--gold-2)}
.bola--cliente{--c:#b0728a}
.bola--pronto{--c:#4c9a72}

/* Concluído recua: continua legível, para de disputar atenção. */
.bola--pronto .bola__corpo{opacity:.55}
.bola--pronto .bola__corpo:hover,
.bola--pronto .bola__corpo:focus-within{opacity:1}

/* O que espera a equipe ganha fundo próprio dentro do cartão. */
.bola--voce .bola__corpo{
  border:1px solid rgba(194,162,80,.28);border-radius:12px;
  background:rgba(194,162,80,.05);padding:2px 12px;
}

/* Departamento e tempo de espera, em voz baixa. */
.item__apoio{
  display:block;font-size:11.5px;color:var(--txt-4);
  margin-top:3px;line-height:1.4;
}

/* ============================================================
   As três vistas da ficha do cliente

   Eram etiquetas do mesmo tamanho de um filtro qualquer, e são o
   controle mais importante da tela: trocar de vista troca de
   assunto inteiro. Agora são abas sublinhadas, com o padrão que
   todo mundo já reconhece de navegador — ninguém precisa
   aprender.

   O contador só aparece em Conversa, e em vermelho, porque é a
   única das três que pode estar esperando resposta.
   ============================================================ */
.vistas{
  display:flex;gap:26px;
  /* Respiro IGUAL em cima e embaixo. As guias vinham coladas no
     quadro de progresso e grudadas no conteúdo de baixo, o que as
     fazia parecer parte do quadro em vez do que são: a troca de
     assunto da ficha inteira. Espaço nos dois lados é o que separa
     "cabeçalho do cartão" de "menu da tela". */
  margin-top:22px;margin-bottom:22px;
  border-bottom:1px solid var(--stroke);
  overflow-x:auto;scrollbar-width:none;
}
.vistas::-webkit-scrollbar{display:none}

.vistas__b{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:0 0 13px;margin-bottom:-1px;
  border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;
  font-size:15px;font-weight:620;color:var(--txt-4);
  transition:color .16s ease, border-color .16s ease;
}
.vistas__b .ic{width:17px;height:17px;opacity:.85}
.vistas__b:hover{color:var(--txt-2)}
.vistas__b--on{color:var(--txt);font-weight:700;border-bottom-color:var(--gold-2)}
.vistas__b--on .ic{color:var(--gold-2);opacity:1}
.vistas__b:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:4px}
.vistas__n{
  font-size:11px;font-weight:700;line-height:1;
  padding:3px 7px;border-radius:999px;
  background:var(--surf-3);color:var(--txt-3);
}
.vistas__b--on .vistas__n{background:var(--danger);color:#fff}

/* AS QUATRO GUIAS PRECISAM CABER.

   Havia dois blocos mexendo no mesmo `gap` em telas estreitas, e o
   de baixo — este — vencia: a fila continuava com 18px de vão,
   somava 411px numa faixa de 343 e rolava de lado com a barra
   escondida. "Conversa" ficava fora da tela sem sinal nenhum, e é
   onde se fala com o cliente.

   Agora é um bloco só, e o ícone sai. Ele ajudava a bater o olho
   quando havia espaço; aqui custava 23px por guia — 92 no total —
   para repetir o que a palavra ao lado já diz. Sem ele as quatro
   somam 289px e sobra folga. */
@media (max-width:520px){
  .vistas{gap:8px}
  .vistas__cauda{display:none}
  .vistas__b{font-size:13.5px;padding-bottom:11px;gap:0}
  .vistas__b .ic{display:none}
}

/* ============================================================
   Aba Conteúdo do portal — índice e painel

   Eram oito cartões dobráveis empilhados, todos com o mesmo peso.
   O vídeo que muda toda semana e o endereço da empresa, que muda
   uma vez por ano, ocupavam exatamente o mesmo espaço.

   O índice fica grudado ao rolar: em seções longas (o checklist
   tem 26 documentos) a pessoa perdia a referência de onde estava.
   ============================================================ */
.conteudo{display:grid;gap:16px;align-items:start}
@media (min-width:860px){
  .conteudo{grid-template-columns:250px minmax(0,1fr)}
  .conteudo__indice{position:sticky;top:16px}
}
.conteudo__indice{display:grid;gap:2px;min-width:0}
.conteudo__i{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;border-radius:10px;border:0;background:none;
  cursor:pointer;text-align:left;
  transition:background .16s ease;
}
.conteudo__i:hover{background:var(--surf-2)}
.conteudo__i:focus-visible{outline:2px solid var(--gold-2);outline-offset:-2px}
.conteudo__i .ic{width:16px;height:16px;color:var(--txt-4);flex:none}
.conteudo__i--on{background:var(--surf-3)}
.conteudo__i--on .ic{color:var(--gold-2)}
.conteudo__n{
  flex:1 1 auto;min-width:0;font-size:13px;color:var(--txt-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.conteudo__i--on .conteudo__n{color:var(--txt);font-weight:640}
.conteudo__s{
  flex:none;font-size:10.5px;font-weight:640;color:var(--txt-4);
  padding:2px 7px;border-radius:999px;background:var(--surf-baixo);
}
.conteudo__s--ok{color:var(--ok);background:rgba(76,154,114,.14)}

.conteudo__painel{
  border:1px solid var(--stroke-card);border-radius:16px;background:var(--surf);
  overflow:hidden;min-width:0;
}
.conteudo__cab{
  display:flex;align-items:center;gap:11px;
  padding:15px 17px;border-bottom:1px solid var(--stroke);
}
.conteudo__tx{flex:1 1 auto;min-width:0}
.conteudo__t{display:block;font-size:16px;font-weight:680;color:var(--txt);line-height:1.3}
.conteudo__d{display:block;font-size:12.5px;color:var(--txt-3);margin-top:3px;line-height:1.45}
.conteudo__corpo{padding:16px}
.conteudo__corpo > :last-child{margin-bottom:0}

/* No celular o índice vira uma tira que rola de lado: empilhado,
   ele empurraria o conteúdo para fora da primeira tela.

   E ROLAR PRECISA SER VISÍVEL. São dez seções e cabem duas e meia:
   1230px de índice ficavam fora da tela sem nenhum sinal, e quem
   não arrastasse por acaso concluiria que o portal se edita em
   cinco lugares. A barra de rolagem está escondida de propósito
   (ela é feia e some sozinha no celular), então o aviso é uma
   sombra nas bordas.

   A sombra é feita com `background-attachment`: as duas camadas
   `local` acompanham o conteúdo e cobrem as `scroll` quando não há
   mais nada para aquele lado. Resultado: a sombra da direita some
   ao chegar no fim e a da esquerda só aparece depois que a pessoa
   arrasta. Não é gambiarra de JavaScript que pode dessincronizar —
   é o próprio navegador dizendo onde o conteúdo continua. */
@media (max-width:859px){
  .conteudo__indice{
    grid-auto-flow:column;grid-auto-columns:max-content;
    overflow-x:auto;gap:6px;padding-bottom:4px;
    scrollbar-width:none;
    background:
      linear-gradient(to right, var(--bg-0) 30%, transparent) left center,
      linear-gradient(to left,  var(--bg-0) 30%, transparent) right center,
      linear-gradient(to right, rgba(0,0,0,.45), transparent) left center,
      linear-gradient(to left,  rgba(0,0,0,.45), transparent) right center;
    background-repeat:no-repeat;
    background-size:26px 100%, 26px 100%, 16px 100%, 16px 100%;
    background-attachment:local, local, scroll, scroll;
  }
  .conteudo__indice::-webkit-scrollbar{display:none}
  .conteudo__i{padding:8px 12px;border:1px solid var(--stroke);border-radius:999px}
  .conteudo__i--on{border-color:rgba(194,162,80,.5)}
  .conteudo__n{white-space:nowrap}
  .conteudo__s{display:none}
}

.msg__auto{
  font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:1px 6px;border-radius:999px;margin-left:6px;
  background:var(--surf-3);color:var(--txt-4);
}

/* ============================================================
   Informativo — perguntas de Sim ou Não

   A explicação fica atrás de um (?) que abre no TOQUE, não ao
   passar o mouse: no celular não existe passar o mouse, e é no
   celular que a maioria dos clientes responde isto.
   ============================================================ */
.pergunta{
  padding:14px 0;border-bottom:1px solid var(--stroke-fraco);
}
.pergunta:last-of-type{border-bottom:0;padding-bottom:2px}
.pergunta__t{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14.5px;font-weight:620;color:var(--txt);line-height:1.45;
}
.pergunta__t > span:first-child{flex:1 1 auto;min-width:0}
.help-btn--redondo{
  flex:none;width:22px;height:22px;padding:0;border-radius:50%;
  display:grid;place-items:center;
  font-size:12.5px;font-weight:700;line-height:1;
  border:1px solid var(--stroke-2);background:var(--surf-2);color:var(--txt-3);
  cursor:pointer;
}
.help-btn--redondo:hover{border-color:var(--gold-2);color:var(--gold-2)}
.help-btn--redondo[aria-expanded="true"]{
  background:var(--surf-3);border-color:var(--gold-2);color:var(--gold-2);
}
.pergunta__porque{
  margin:9px 0 0;padding:10px 12px;border-radius:10px;
  font-size:12.5px;line-height:1.6;color:var(--txt-2);
  background:var(--surf-2);border:1px solid var(--stroke);
}

.notas{display:grid;gap:10px;margin-bottom:4px}
.nota{
  padding:12px 14px;border-radius:12px;
  border:1px solid var(--stroke);background:var(--surf-2);
  /* Faixa dourada à esquerda: a distância visual do resto da
     ficha é o que lembra que isto não é dado do cliente. */
  border-left:3px solid var(--gold-2);
}
.nota__txt{font-size:13.5px;line-height:1.62;color:var(--txt)}
.nota__txt p{margin:0 0 8px}
.nota__txt p:last-child{margin-bottom:0}
.nota__txt ol,.nota__txt ul{margin:6px 0 8px;padding-left:20px}
.nota__pe{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:9px;padding-top:8px;border-top:1px solid var(--stroke-fraco);
}

/* ============================================================
   REGISTRO DO SERVIDOR (Segurança)

   Uma linha por fato: o que aconteceu, de quem e quando. O ícone
   à esquerda dá o assunto de relance; a hora fica à direita,
   alinhada, porque é por ela que se procura.

   `--forte` marca o que não se desfaz — senha aberta, documento
   removido, acesso revogado, senha da equipe trocada. Não é
   alarme: é o peso certo para o que merece um segundo olhar numa
   lista longa.
   ============================================================ */
.trilha{display:grid;gap:2px}
.trilha__l{
  display:grid;grid-template-columns:30px 1fr auto;align-items:start;gap:11px;
  padding:11px 10px;border-radius:10px;
}
.trilha__l:hover{background:var(--surf-2)}
.trilha__l + .trilha__l{border-top:1px solid var(--stroke)}
.trilha__i{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--surf-2);color:var(--txt-3);
}
.trilha__i .ic{width:15px;height:15px}
.trilha__i--forte{background:rgba(194,162,80,.14);color:var(--gold-2)}
.trilha__c{min-width:0}
.trilha__t{font-size:13.5px;font-weight:600;color:var(--txt);line-height:1.4}
.trilha__quem{font-weight:500;color:var(--txt-3)}
.trilha__d{
  font-size:12px;color:var(--txt-3);line-height:1.45;margin-top:2px;
  overflow-wrap:anywhere;
}
.trilha__q{
  font-size:11.5px;color:var(--txt-4);white-space:nowrap;padding-top:2px;
  font-variant-numeric:tabular-nums;
}

/* No celular a hora desce para baixo do texto: alinhada à direita
   ela espremia o detalhe do evento em duas ou três linhas. */
@media (max-width:560px){
  .trilha__l{grid-template-columns:30px 1fr}
  .trilha__q{grid-column:2;padding-top:4px}
}

/* A lista da trilha rola dentro de si.

   Com 80 eventos ela media 5146px e a página inteira quase 7000 —
   e cada evento novo empurrava o rodapé mais para baixo, para
   sempre. Altura fixa resolve; a barra de rolagem fica À VISTA,
   porque aqui não há borda cortando conteúdo para avisar sozinha. */
.trilha--rola{
  max-height:520px;overflow-y:auto;
  border:1px solid var(--stroke);border-radius:12px;padding:4px 6px;
}
@media (max-width:560px){
  .trilha--rola{max-height:420px}
}