/* SilexPay — folha de estilo institucional */
:root{
  --ink:#062A30; --ink-2:#0B3A42;
  --teal:#0EA5B7; --teal-d:#0B7C8A; --tiffany:#0ABAB5;
  --yellow:#FFD24C; --bg:#fff; --soft:#F4FBFC; --border:#E2EFF1;
  --muted:#557278; --muted-2:#6A868B; --muted-3:#8AA3A8;
  --font-head:'Sora',sans-serif; --font-body:'IBM Plex Sans',sans-serif; --font-mono:'IBM Plex Mono',monospace;

  /* Cores semânticas
     -------------------------------------------------------------------------
     Quatro famílias — info, success, warning, danger — cada uma com três
     tokens: `-fg` (texto, ícone e preenchimento sólido), `-bg` (fundo suave) e
     `-bd` (borda). Um aviso, um badge, um balão e um botão da mesma família
     usam os MESMOS três valores; é isso que faz "vermelho" querer dizer a mesma
     coisa em toda a interface.

     Derivadas da paleta, não importadas de fora: `info` é o teal da marca
     escurecido, `success` puxa para o verde-azulado da mesma família, `warning`
     é o âmbar do `--yellow` rebaixado até virar legível como texto, e `danger`
     é o único tom frankly estranho ao conjunto — vermelho não tem parente aqui,
     e inventar um "vermelho teal" tiraria dele justamente a interrupção que se
     espera de um alerta.

     Todos os pares `-fg` sobre `-bg` E sobre branco foram medidos e passam no
     AA (mínimo 4,5:1). Os valores anteriores NÃO passavam: `badge-green`
     rendia 3,09:1, `badge-yellow` 3,17:1 e o teal do info 4,45:1. Como os `-fg`
     também têm 5,5:1 ou mais contra branco, servem de fundo sólido com texto
     branco sem uma segunda escala de cores. */
  --info-fg:#096B76;    --info-bg:#E8F6F8;    --info-bd:#C7E7EC;
  --success-fg:#0A7757; --success-bg:#E7F8F5; --success-bd:#C3EFE8;
  --warning-fg:#8A5B00; --warning-bg:#FFF6DE; --warning-bd:#F0DDA8;
  --danger-fg:#A82A1C;  --danger-bg:#FDECEA;  --danger-bd:#F5C6C0;

  /* Preenchimento sólido: token SEPARADO do `-fg`.
     A primeira versão reusava o `-fg` como fundo de botão, e no warning isso
     deu marrom: um âmbar legível COMO TEXTO sobre fundo claro precisa ser
     escuro, e escuro é justamente o que tira o "atenção" da cor. São dois
     trabalhos diferentes — ler contra branco e preencher uma área — e não
     havia como um valor só fazer os dois.
     Onde o `-fg` já servia (info sólido antes de virar o teal da marca,
     success e danger), o solid apenas repete o valor. */
  --info-solid:#0EA5B7;          /* teal do CTA do site — o "Conheça a SilexPay" */
  --success-solid:#0A7757;
  --warning-solid:var(--yellow); /* o âmbar do "Acessar portal", já na paleta */
  --danger-solid:#A82A1C;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink-2); font-family:var(--font-body); -webkit-font-smoothing:antialiased;}
a{color:var(--teal-d); text-decoration:none;}
a:hover{color:var(--teal);}
img{max-width:100%;}
.site-container{max-width:1200px; margin:0 auto; padding:0 40px;}
.section{padding:100px 0;}
.eyebrow{font-family:var(--font-mono); font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--teal-d); margin-bottom:12px;}
.h1{font-family:var(--font-head); font-weight:800; font-size:56px; line-height:1.05; letter-spacing:-.03em; margin:0 0 22px; text-wrap:balance;}
.h2{font-family:var(--font-head); font-weight:800; font-size:40px; line-height:1.1; letter-spacing:-.025em; color:var(--ink); margin:0;}
.h3{font-family:var(--font-head); font-weight:700; color:var(--ink); margin:0;}
.lead{font-size:19px; line-height:1.6; color:var(--muted);}
.mono{font-family:var(--font-mono);}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:700; font-size:16px; padding:15px 26px; border-radius:12px; cursor:pointer; border:1px solid transparent; transition:transform .15s, background .15s, box-shadow .15s;}
/* Botões de AÇÃO das listagens — Buscar, Filtros, Editar, Desativar.
   ---------------------------------------------------------------------------
   Altura: 42px (o `.btn` cheio) -> 22px na SLX-146.05 -> 32px agora. O corte
   pela metade foi longe demais: 22px é menos que o alvo de toque de 24px que o
   WCAG 2.2 pede no critério 2.5.8, e num botão que abre dialog de exclusão errar
   o clique custa caro. 32px devolve metade do que foi cortado e mantém o botão
   subordinado à linha da tabela, que era o problema original.
   A conta: 14px de glifo (`line-height:1`) + 8px de padding em cima e embaixo +
   1px de borda de cada lado = 32px. O `line-height:1` continua indispensável —
   sem ele o glifo carrega o `normal` da fonte, ~18px num texto de 14px, e a
   altura passa a depender da fonte carregada em vez do padding escrito aqui.
   A largura não mudou: o pedido é sobre altura, e apertar os lados tornaria os
   rótulos mais difíceis de acertar com o mouse. */
.btn-sm{font-size:14px; padding:8px 20px; line-height:1;}
/* Botão só de ícone (SLX-146.02): quadrado, sem padding lateral de rótulo.
   Editar e Desativar perderam o texto e viraram símbolo. O quadrado de 32x32
   mantém a altura da barra e dá alvo de toque nos dois eixos — com o padding
   lateral de 20px do `.btn-sm`, um ícone de 16px renderia um botão de 58px de
   largura por 32 de altura, desalinhado do resto da coluna de ações.
   Quem usa isto é OBRIGADO a passar `title` e `aria-label`: sem rótulo visível,
   o `title` é a única dica ao mouse e o `aria-label` o único nome para o leitor
   de tela, que sem ele anuncia apenas "botão". */
.btn-icone{width:32px; padding-left:0; padding-right:0; justify-content:center; gap:0;}
.btn-icone svg{width:16px; height:16px; display:block;}
/* O botão "+" da topbar, e SÓ ele (SLX-146.02).
   ---------------------------------------------------------------------------
   Modificador próprio em vez de mexer no `.btn-sm`: aquele veste os botões de
   ação das listagens, e mudá-los por tabela desfaria o ajuste de altura que eles
   acabaram de receber.
   38x38 é o TAMANHO DO SINO (`.tb-sino`), com quem ele divide o canto. Era
   `height:44px` enquanto o botão tinha texto — "+ Nova cobrança" era uma pílula
   larga ao lado de um quadrado, e a diferença de altura passava. Agora que os
   dois são quadrados vizinhos, 44 contra 38 seria um desalinho evidente.
   Não uso `.btn-icone` aqui: aquele é 32px, a medida das listagens. Duas regras
   disputando `width` no mesmo elemento dependeriam da ordem do arquivo para
   decidir o vencedor, e essa é a espécie de dependência que quebra ao alguém
   reordenar o CSS. */
.btn-topbar{width:38px; height:38px; padding:0; justify-content:center;}
.btn-yellow{background:var(--yellow); color:var(--ink); box-shadow:0 8px 24px rgba(255,210,76,.4);}
.btn-yellow:hover{transform:translateY(-1px); color:var(--ink);}
.btn-primary{background:var(--teal); color:#fff; box-shadow:0 8px 22px rgba(14,165,183,.28);}
.btn-primary:hover{background:var(--teal-d); color:#fff;}
.btn-ghost{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.12); color:#fff;}
.btn-soft{background:var(--soft); border-color:var(--border); color:var(--teal-d);}
.btn-block{width:100%; justify-content:center;}

.diamond{display:inline-block; background:linear-gradient(135deg,var(--teal),var(--tiffany)); transform:rotate(45deg); border-radius:4px;}

/* navbar */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.88); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--border);}
.nav-inner{height:74px; display:flex; align-items:center; justify-content:space-between; gap:24px;}
.brand{display:flex; align-items:center; gap:11px;}
.brand-mark{width:20px; height:20px; box-shadow:0 3px 10px rgba(14,165,183,.35);}
.brand-name{font-family:var(--font-head); font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--ink);}
.brand-name span{color:var(--teal);}
.nav-links{display:flex; align-items:center; gap:6px;}
.nav-link{position:relative; color:var(--ink-2); font-size:15px; font-weight:500; padding:8px 14px; border-radius:8px;}
.nav-link:hover{background:var(--soft); color:var(--teal-d);}
.nav-link.active::after{content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--teal),var(--tiffany));}

/* hero / dark sections */
.dark{background:radial-gradient(1100px 520px at 78% -8%, #0B5A64 0%, transparent 60%), linear-gradient(158deg,#062A30 0%,#083B43 100%);}
.dark .eyebrow{color:#7EEBD9;}
.dark .h1,.dark .h2{color:#fff;}
.dark .lead{color:#A9D2D7;}
.pill{display:inline-flex; align-items:center; gap:9px; background:rgba(10,186,181,.12); border:1px solid rgba(10,186,181,.3); color:#7EEBD9; font-family:var(--font-mono); font-size:12.5px; padding:7px 14px; border-radius:999px; margin-bottom:26px;}
.pill .dot{width:7px; height:7px; border-radius:50%; background:var(--tiffany); box-shadow:0 0 0 3px rgba(10,186,181,.25);}

/* grids */
.site-grid{display:grid; gap:22px;}
.g2{grid-template-columns:repeat(2,1fr);} .g3{grid-template-columns:repeat(3,1fr);} .g4{grid-template-columns:repeat(4,1fr);}
.split{display:grid; gap:56px; align-items:center;}

/* cards */
.card{background:#fff; border:1px solid var(--border); border-radius:16px; padding:28px; box-shadow:0 1px 2px rgba(6,42,48,.03);}
.card-hover{transition:transform .15s, box-shadow .15s, border-color .15s;}
.card-hover:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(6,42,48,.09); border-color:#C3EFE8;}
.icon-box{width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.icon-box .diamond{width:16px; height:16px;}
.chip{font-size:13.5px; color:var(--teal-d); background:var(--soft); border:1px solid #DCEEF0; padding:7px 13px; border-radius:999px;}
.soft{background:var(--soft); border-top:1px solid #EEF6F7; border-bottom:1px solid #EEF6F7;}

/* placeholder image */
.ph{border-radius:14px; background:repeating-linear-gradient(135deg,#F4FBFC 0 20px,#EAF7F8 20px 40px); border:1px solid var(--border); display:flex; align-items:center; justify-content:center;}
.ph span{font-family:var(--font-mono); font-size:12.5px; color:#9DB6BA;}

/* footer */
.footer{background:var(--ink); color:#BFE0E4;}
.footer .site-container{padding-top:72px; padding-bottom:40px;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px;}
.footer h4{font-family:var(--font-head); font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:#fff; margin:0 0 16px;}
.footer a{display:block; color:#8FC4CA; font-size:14px; padding:6px 0;}
.footer a:hover{color:var(--tiffany);}
.footer-brand p{font-size:14px; line-height:1.7; max-width:300px; color:#8FC4CA; margin:0 0 22px;}
.socials{display:flex; gap:10px;}
.socials a{width:38px; height:38px; border-radius:10px; border:1px solid #12454D; background:#0A353C; display:inline-flex; align-items:center; justify-content:center; color:#7FBDC4; font-family:var(--font-mono); font-size:13px; padding:0;}
.socials a:hover{border-color:var(--tiffany); color:var(--tiffany);}
.footer-bottom{margin-top:52px; padding-top:26px; border-top:1px solid #103F47; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
.footer-bottom .copy{font-size:13px; color:#5E9299;}
.footer-legal{display:flex; gap:22px;}
.footer-legal a{display:inline; font-size:13px; padding:0;}

/* forms */
label .lbl{font-size:13px; font-weight:500; color:#456066; display:block; margin-bottom:6px;}
.field{width:100%; padding:12px 14px; border:1px solid #DCEEF0; border-radius:10px; font-size:15px; color:var(--ink); font-family:var(--font-body); background:#fff;}
.field:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(14,165,183,.15);}

/* badges */
.badge{font-family:var(--font-mono); font-size:11px; padding:4px 9px; border-radius:6px;}
/* Os nomes por cor são os que as telas já usam; os semânticos são o vocabulário
   novo. Apontam para os mesmos tokens, então um badge verde e um aviso de
   sucesso não podem mais divergir de tom. */
.badge-green,.badge-success{color:var(--success-fg); background:var(--success-bg); border:1px solid var(--success-bd);}
.badge-yellow,.badge-warning{color:var(--warning-fg); background:var(--warning-bg); border:1px solid var(--warning-bd);}
.badge-red,.badge-danger{color:var(--danger-fg); background:var(--danger-bg); border:1px solid var(--danger-bd);}
.badge-info{color:var(--info-fg); background:var(--info-bg); border:1px solid var(--info-bd);}

/* Aviso / callout: a caixa que as telas montavam com estilo inline, sempre com
   os mesmos valores copiados à mão. Serve a flash message, alerta de formulário,
   balão e qualquer bloco que precise de tom. */
.note{padding:14px 18px; border-radius:12px; border:1px solid; font-size:14.5px; margin-bottom:22px;}
.note-info{color:var(--info-fg); background:var(--info-bg); border-color:var(--info-bd);}
.note-success{color:var(--success-fg); background:var(--success-bg); border-color:var(--success-bd);}
.note-warning{color:var(--warning-fg); background:var(--warning-bg); border-color:var(--warning-bd);}
.note-danger{color:var(--danger-fg); background:var(--danger-bg); border-color:var(--danger-bd);}

/* Botões sólidos, todos com texto branco por decisão de projeto.
   ATENÇÃO no warning: branco sobre o âmbar `#FFD24C` rende 1,44:1 — o mínimo do
   AA é 4,5:1, e mesmo o limite de texto grande é 3:1. É o par de menor contraste
   da interface, e o rótulo fica difícil de ler. Se um dia isso incomodar, há
   duas saídas sem perder o laranja: texto `--ink` sobre o mesmo âmbar (10,55:1)
   ou fundo mais escuro, tipo `#B35C00`, aí sim com branco. */
.btn-info{background:var(--info-solid); color:#fff;}
.btn-success{background:var(--success-solid); color:#fff;}
.btn-warning{background:var(--warning-solid); color:#fff;}
.btn-danger{background:var(--danger-solid); color:#fff;}
.btn-info:hover,.btn-success:hover,.btn-danger:hover,.btn-warning:hover{color:#fff; filter:brightness(1.12);}

/* Neutro: a quinta família, para ação sem carga semântica — voltar, cancelar,
   fechar. Contornado em vez de preenchido, porque um sólido a mais competiria
   com o botão que de fato é a ação da tela.
   O padding cai 1px de cada lado para compensar a borda de 2px: sem isso a
   caixa fica mais alta que a dos sólidos ao lado, e os dois desalinham. */
.btn-default{background:transparent; border:2px solid var(--teal-d); color:var(--teal-d); padding:14px 25px;}
/* Acompanha a altura do `.btn-sm`, descontando 1px por lado da borda de 2px —
   é o que mantém "Buscar" e "Filtros" alinhados com os sólidos ao lado deles na
   mesma barra. 14 + 7 + 7 + 2 + 2 = 32px, os mesmos do `.btn-sm`. */
.btn-sm.btn-default{padding:7px 19px;}
.btn-default:hover{background:var(--soft); color:var(--teal-d);}

/* dashboard shell */
.app{display:grid; grid-template-columns:250px 1fr; min-height:100vh; background:#EEF5F6;}
.side{background:var(--ink); color:#BFE0E4; display:flex; flex-direction:column; padding:22px 16px; position:sticky; top:0; height:100vh;}
.side-brand{display:flex; align-items:center; gap:10px; padding:6px 8px 22px;}
.side-brand .brand-name{font-size:17px; color:#fff;} .side-brand .brand-name span{color:var(--tiffany);}
.side-brand .tag{font-family:var(--font-mono); font-size:10px; color:#5E9299; border:1px solid #12454D; padding:2px 6px; border-radius:5px;}
/* O MENU É A ÁREA QUE ROLA, e o rodapé fica preso embaixo (B.30).
   ---------------------------------------------------------------------------
   `.side` é `height:100vh` e não tem `overflow`. Enquanto a navegação coubesse
   na altura da janela isso não incomodava; quando passou a não caber, o que
   sobrava vazava para FORA da caixa — e como a barra é `position:sticky;top:0`,
   rolar a página não traz o excedente de volta. O primeiro elemento a sair pela
   borda de baixo é o `.side-user`, que é justamente onde vive o botão Sair.

   Foi o defeito que o dono relatou como "o botão de logout não funciona": o
   botão estava certo, o formulário estava certo e a rota estava certa — ele só
   não estava na tela. MEDIDO antes de consertar, contando as linhas
   renderizadas: o menu do portal soma ~990px e o do administrativo ~1334px,
   contra 768–900px de janela num notebook. O administrativo não cabia nem em
   1080p, o que explica os dois estarem quebrados e só um ter sido notado.

   `min-height:0` é a parte que não pode faltar: item de flex nasce com
   `min-height:auto`, que o proíbe de encolher abaixo do próprio conteúdo. Sem
   isso o `overflow-y` não tem efeito nenhum — a caixa continua crescendo e
   empurrando o rodapé, exatamente como antes. */
.side-nav{display:flex; flex-direction:column; gap:4px; flex:1 1 auto; min-height:0; overflow-y:auto;}
/* Barra de rolagem fina e na paleta: a padrão do sistema é clara e larga, e
   sobre o teal escuro da barra lateral parece um defeito de renderização. */
.side--painel .side-nav{scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent;}
.side-nav a,.side-nav button{display:flex; align-items:center; justify-content:space-between; gap:11px; text-align:left; background:transparent; color:#8FC4CA; border:none; cursor:pointer; font-family:var(--font-body); font-size:14.5px; font-weight:500; padding:11px 12px; border-radius:9px;}
.side-nav .active{background:rgba(10,186,181,.14); color:#fff;}
/* `.lead-dot`, `.sq` e `.count` saíram junto com o menu plano do portal: eram o
   losango antes do rótulo e o contador ao lado dele, e nenhum dos dois menus os
   emite mais. Quem marca o item ativo agora é a faixa de `.side-item::before`. */

/* densidade das tabelas, escolhida em Perfil › Aparência
   ---------------------------------------------------------------------------
   A classe vai no `.app`, e as regras alcançam qualquer célula dentro dele —
   inclusive as das telas que escrevem `padding` inline no `<td>`, daí o
   `!important`. É o único lugar do projeto onde ele se justifica: a alternativa
   seria reescrever o padding inline de doze telas para um valor que só existe
   por causa desta preferência.

   O normal não tem regra: é o estilo já escrito, e uma terceira classe que
   repetisse os mesmos valores só criaria mais um lugar para divergir. */
.dt-compacta table td{padding-top:7px !important; padding-bottom:7px !important;}
.dt-compacta table th{padding-top:8px !important; padding-bottom:8px !important;}
.dt-compacta table{font-size:13px;}
.dt-confortavel table td{padding-top:20px !important; padding-bottom:20px !important;}
.dt-confortavel table th{padding-top:16px !important; padding-bottom:16px !important;}

/* foto do administrador no rodapé do menu. Mesmo canto do `.avatar` das
   iniciais, para a troca não mexer no desenho da linha. */
.side-user .avatar-foto{width:34px; height:34px; border-radius:10px; object-fit:cover; flex-shrink:0;}

/* aviso de não lidas sobre a foto do rodapé do menu (SLX-146.02)
   ---------------------------------------------------------------------------
   Ponto, e não número: aqui ele é REDUNDANTE com o sino da topbar, que já traz
   a contagem. O papel deste é ser visto de canto de olho por quem está com a
   atenção na tabela — dois números iguais em cantos opostos da tela competiriam
   entre si sem acrescentar nada.

   O anel na cor do fundo do menu é o que separa o ponto da foto: sem ele, uma
   foto com canto avermelhado o engoliria. */
.side-avatar{position:relative; flex-shrink:0; display:flex;}
.side-avatar .dot{position:absolute; top:-3px; right:-3px; width:11px; height:11px;
  border-radius:50%; background:var(--danger-solid); box-shadow:0 0 0 2px #0A323A;}
.side--painel .side-avatar .dot{box-shadow:0 0 0 2px #0B3A42;}

/* menu dos painéis autenticados — administrativo e portal do cliente
   ---------------------------------------------------------------------------
   Escopado em `.side--painel`, usado pelos DOIS menus. Chamava-se `.side--adm` e
   valia só para o administrativo, enquanto o portal ficava com as regras
   `.side*` cruas: mesma marcação, aparência diferente.

   O modificador continua existindo porque as regras `.side*` acima seguem
   genéricas. Os dois menus montam a mesma estrutura pelo partial
   `resources/views/partials/side-menu.blade.php`, então mexer aqui muda os dois
   de propósito — o que antes era o acidente a evitar agora é o objetivo. */

/* Superfície escura, acento na cor da marca.
   O teal saturado do botão do site foi testado como FUNDO aqui e reprovou: dá
   2,96:1 de contraste com texto branco, abaixo dos 4,5:1 do AA e abaixo até dos
   3:1 de texto grande. Cor saturada funciona em elemento pequeno e isolado, como
   um CTA; como superfície que se encara o dia inteiro, ela vibra e cansa. Num
   painel que desativa clientes e mexe em limite de saque, ler sem esforço vale
   mais que a cor vibrante — o `--ink-2` dá 12,37:1.
   Sem respiro lateral: o fundo do item vai de borda a borda. O recuo sai do
   container e vai para cada elemento, que é o que permite ao tópico e ao item
   terem indentações diferentes. */
/* O degradê segue a gramática já usada em `.dark` no site institucional: um
   brilho radial sobre um linear escuro. O radial fica no alto, junto da marca,
   e some antes de chegar aos itens.
   O contraste foi verificado no ponto MAIS CLARO, não na média: no centro do
   brilho o fundo resolve para ~#0B4C55, que dá 9,7:1 com texto branco. O
   extremo inferior, #072F36, dá 14,3:1. Todo o percurso fica bem acima dos
   4,5:1 do AA — foi essa margem que faltou quando o fundo virou teal cheio. */
.side--painel{
  background:
    radial-gradient(420px 260px at 18% -6%, rgba(11,90,100,.55) 0%, transparent 62%),
    linear-gradient(180deg, #0B3A42 0%, #072F36 100%);
  padding-left:0; padding-right:0;
}
/* Régua sob a marca: separa a identidade da navegação. Vai de borda a borda
   porque o container não tem mais respiro lateral — o recuo é do texto. */
.side--painel .side-brand{justify-content:center; padding-left:16px; padding-right:16px; border-bottom:1px solid rgba(255,255,255,.12);}
.side--painel .side-nav{padding-top:6px;}
.side--painel .side-user{margin-left:16px; margin-right:16px;}

/* Rodapé: identidade à esquerda, sair encostado à direita. O `margin-left:auto`
   empurra o formulário para a borda sem precisar de largura fixa em nada. */
.side--painel .side-user-id{min-width:0;}
.side--painel .side-user-out{margin:0 0 0 auto;}
/* Nome e papel podem ser longos; cortar é melhor que empurrar o "Sair" para
   fora da sidebar. */
.side--painel .side-user .nm,
.side--painel .side-user .sub{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* O `--muted-3` herdado do portal rende ~3,4:1 aqui, abaixo do AA para texto
   pequeno — e o papel é justamente a linha menor. */
.side--painel .side-user .sub{color:rgba(255,255,255,.65);}

/* Quadrado de cantos arredondados, não círculo. */
.side--painel .avatar{border-radius:10px;}

/* Sair virou só o ícone. A área clicável é de 34px — o desenho tem 19px, e um
   alvo do tamanho do traço seria difícil de acertar. */
.side--painel .side-signout{display:flex; align-items:center; justify-content:center; width:34px; height:34px; background:none; border:0; padding:0; border-radius:8px; color:rgba(255,255,255,.7); cursor:pointer; transition:background .16s ease, color .16s ease;}
/* Mesmo teal do hover dos itens: o ícone é um controle como os outros, e usar
   uma cor só para ele criaria um segundo vocabulário. O traço acompanha porque
   o SVG desenha em `currentColor`. */
.side--painel .side-signout:hover{background:rgba(255,255,255,.10); color:var(--tiffany);}

/* Tópico. Herda layout de `.side-nav a`/`button`; aqui só o que muda. Encostado
   à esquerda: é ele que estabelece a margem de onde os itens recuam. Serve tanto
   ao cabeçalho de acordeão quanto ao tópico que é link direto (Dashboard) — os
   dois têm o mesmo peso no menu, e só diferem no que acontece ao clicar. */
/* Mesma altura de caixa e mesmo corpo de fonte dos itens: o tópico se distingue
   pelo mono e por ficar encostado à esquerda — não por ser menor. Encolhido,
   ele parecia um item desabilitado, e o fundo da seção aberta ficava mais baixo
   que o das linhas abaixo dele.
   Sem `text-transform`: o rótulo aparece como está escrito no menu, com só a
   inicial maiúscula. O `letter-spacing` saiu junto — existia para arejar a caixa
   alta, e em caixa baixa só afrouxaria a palavra. */
.side--painel .side-sec-head{font-family:var(--font-mono); font-size:14.5px; color:#fff; padding:11px 16px; margin-top:4px; border-radius:0; transition:background .18s ease, color .18s ease;}
.side--painel .side-sec-head:hover{background:rgba(255,255,255,.06);}
/* A seção aberta fica marcada enquanto estiver aberta, e não só no instante do
   clique: sem isso, quem volta à tela não sabe qual grupo está expandido. */
.side--painel .side-sec-head.is-open{background:rgba(255,255,255,.08);}

/* Reservado: existe no desenho e ainda não tem para onde levar — tanto a seção
   sem itens quanto o item cuja rota não foi criada. Uma regra só para os dois,
   senão um deles fica com aparência de clicável. */
.side--painel .side-nav [disabled]{opacity:.4; cursor:default; border-radius:0;}
.side--painel .side-nav [disabled]:hover{background:none;}
/* Exceção para o tópico sem rota: fica em branco cheio, como os demais tópicos.
   Apagado, ele lia como item quebrado no primeiro nível do menu. O apagamento
   segue valendo para os ITENS reservados, que estão dentro de uma seção e ali a
   diferença de tom é o que os separa dos irmãos que já funcionam. */
.side--painel .side-nav .side-sec-head[disabled]{opacity:1;}

/* Acordeão. `0fr -> 1fr` anima a altura sem precisar medir o conteúdo e sem
   plugin — `x-show` não serviria porque `display:none` não transiciona.
   `visibility` tira os links da ordem de tabulação enquanto fechado:
   `overflow:hidden` esconde, mas o Tab continuaria chegando neles. */
.side--painel .side-sec{display:grid; grid-template-rows:0fr; transition:grid-template-rows .22s ease;}
.side--painel .side-sec.is-open{grid-template-rows:1fr;}
.side--painel .side-sec-inner{overflow:hidden; visibility:hidden; transition:visibility .22s ease;}
.side--painel .side-sec.is-open .side-sec-inner{visibility:visible;}

/* Itens recuados em relação ao tópico, como o parágrafo recua do título: a
   hierarquia passa a ser lida pela indentação, e não só pelo tamanho da fonte.
   O fundo continua indo de borda a borda — o recuo é do texto, não da faixa. */
/* `width:100%` por causa do item sem rota, que é `<button>`: `<a>` é de nível de
   bloco e ocupa a faixa toda sozinho, mas botão se ajusta ao conteúdo — sem
   isto, o fundo do item planejado parava no fim da palavra. */
.side--painel .side-nav .side-item{position:relative; width:100%; padding-left:34px; padding-right:16px; border-radius:0; color:#fff; transition:background .16s ease, color .16s ease;}

/* A faixa do recuo marca UM item, não a lista: pintada em todas as linhas ela
   virava uma coluna contínua e deixava de apontar coisa alguma. Em repouso fica
   transparente — o elemento existe só para a cor poder transicionar.
   É aqui que a cor da marca entra: num bloco pequeno, contra fundo escuro, onde
   ela salta sem precisar ser lida. */
.side--painel .side-nav .side-item::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:transparent; transition:background .16s ease;}
/* No hover a faixa aparece enfraquecida: é a prévia do estado que o clique vai
   produzir, e não um segundo sinal a decifrar. Fica em `a:hover` porque item sem
   rota é `button[disabled]` — anunciar destino em quem não tem seria mentir.
   O seletor do ativo tem especificidade maior, então passar o mouse sobre a
   linha atual não a enfraquece. */
.side--painel .side-nav a:hover::before{background:rgba(10,186,181,.55);}
.side--painel .side-nav .side-item.active::before{background:var(--tiffany);}

/* Sem hover, nada indicava que a linha era clicável.
   `a:hover` e não `.side-item:hover`: item sem rota é `button[disabled]`, e
   pintá-lo no hover diria que leva a algum lugar.
   O texto muda de cor só no hover: ali a mudança é resposta ao movimento e some
   quando o mouse sai. Repouso e ativo ficam brancos — a linha atual já se
   anuncia pela faixa cheia e pelo fundo, e tingir a letra dela seria manter em
   permanência a cor de menor contraste da paleta.
   O ativo fica um passo acima do hover no fundo, mas o que de fato o distingue é
   a faixa cheia contra a faixa enfraquecida. */
.side--painel .side-nav a:hover{background:rgba(255,255,255,.06); color:var(--tiffany);}
.side--painel .side-nav .active{background:rgba(255,255,255,.09);}

/* Movimento é decoração: quem pediu para reduzir não deve recebê-lo. */
@media (prefers-reduced-motion: reduce){
  .side--painel .side-sec,
  .side--painel .side-sec-inner,
  .side--painel .side-sec-head,
  .side--painel .side-nav a{transition:none;}
}

.side-user{margin-top:auto; border-top:1px solid #103F47; padding-top:16px; display:flex; align-items:center; gap:11px;}
.avatar{width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--tiffany)); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; font-size:13px; color:var(--ink);}
.side-user .nm{font-size:13.5px; font-weight:600; color:#fff;} .side-user .sub{font-size:12px; color:#5E9299;}
.topbar{background:#fff; border-bottom:1px solid var(--border); padding:16px 32px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10;}

/* sino de notificações da topbar (SLX-146.02)
   ---------------------------------------------------------------------------
   O contador é vermelho e fica SOBRE o ícone, não ao lado: ao lado ele viraria
   mais um número na barra que já tem o saldo, e o olho não distinguiria "R$
   90.819,25" de "3" à primeira passada.

   Sem não lidas, o balão some inteiro em vez de mostrar zero. Um "0" permanente
   ensina a ignorar o canto onde ele mora — e é justamente esse canto que precisa
   ser notado quando o número mudar. */
.tb-sino{position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:11px; border:1px solid var(--border);
  background:#fff; color:var(--muted); cursor:pointer; transition:background .15s, color .15s;}
.tb-sino:hover{background:var(--soft); color:var(--ink);}
.tb-sino:focus-visible{outline:2px solid var(--info-fg); outline-offset:2px;}
.tb-sino .n{position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--danger-solid); color:#fff;
  font-family:var(--font-mono); font-size:11px; line-height:18px; text-align:center;
  box-shadow:0 0 0 2px #fff;}

/* painel que o sino abre */
.tb-caixa{position:absolute; top:calc(100% + 10px); right:0; z-index:40; width:340px;
  background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow:0 16px 44px rgba(6,42,48,.16); overflow:hidden;}
.tb-caixa-topo{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--border);}
.tb-caixa-topo .t{font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--ink);}
.tb-item{display:flex; gap:10px; width:100%; text-align:left; background:none; border:0;
  border-bottom:1px solid #F0F6F7; padding:11px 14px; cursor:pointer; font:inherit;}
.tb-item:hover{background:var(--soft);}
/* A faixa marca a não lida. Cor sozinha não bastaria para quem não a distingue;
   a faixa tem posição e largura, que se enxergam sem depender do tom. */
.tb-item.nova{border-left:3px solid var(--danger-solid); padding-left:11px;}
.tb-item .tt{font-size:13px; font-weight:600; color:var(--ink);}
.tb-item .rs{font-size:12px; color:var(--muted); margin-top:2px;}
.tb-item .qd{font-family:var(--font-mono); font-size:11px; color:var(--muted-3); margin-top:3px;}
.tb-caixa-pe{display:block; padding:10px 14px; text-align:center; font-size:12.5px;}
.tb-vazio{padding:22px 14px; text-align:center; font-size:13px; color:var(--muted-3);}
.crumb{font-family:var(--font-mono); font-size:11.5px; color:var(--muted-3); letter-spacing:.03em;}

/* Trilha do painel administrativo, ABAIXO do título. Classe própria em vez de
   reusar `.crumb`: aquela é compartilhada com o portal do tenant, onde a migalha
   continua acima do título — mudar a de lá não estava no pedido. */
.crumb-trail{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:5px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.03em; color:var(--muted-3);}
.crumb-trail a{color:var(--muted-2); text-decoration:none;}
.crumb-trail a:hover{color:var(--teal-d); text-decoration:underline;}
.crumb-trail .sep{opacity:.55;}
/* Complemento do título (slug, código do plano): sai dos estilos inline que cada
   tela repetia. */
.ttl-aside{font-family:var(--font-mono); font-size:13px; font-weight:400; color:var(--muted-3); margin-left:8px;}

/* Ações da tela: dentro do conteúdo, não na barra de título. A barra passa a
   dizer só onde a pessoa está; o que ela pode fazer pertence à página. */
.page-actions{display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-bottom:20px;}

/* Datatable
   ---------------------------------------------------------------------------
   As linhas continuam renderizadas pelo Blade, e não por `x-for` do Alpine: é o
   que mantém badge, link e o dialog de confirmação funcionando dentro da linha.
   O Alpine só esconde (`x-show`) e marca seleção.

   Por isso a listra ZEBRADA não pode ser `:nth-child(even)`: com linhas ocultas
   pelo filtro, a paridade do DOM deixa de corresponder ao que se vê e as listras
   saem embaralhadas. A classe é aplicada pelo Alpine, contando só as visíveis. */
.dt-toolbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:16px 24px; border-bottom:1px solid var(--border);}
.dt-busca{flex:1; min-width:200px; max-width:340px; font:inherit; font-size:14px; padding:10px 13px; border-radius:10px; border:1px solid var(--border); background:#fff; color:var(--ink);}
.dt-busca:focus-visible{outline:2px solid var(--teal); outline-offset:1px;}
/* `.dt-marcar-todos` SAIU (B.07), junto com o "Todos da página" que ele
   estilizava. O controle era duplicata literal da caixa do `<thead>` — as duas
   rodavam a mesma expressão sobre as mesmas linhas — e o dono pediu para tirar.
   Regra sem seletor no HTML é peso morto que a próxima pessoa lê e tenta
   entender; some junto. */
/* Canto direito: contagem, ações em massa, filtros e ação. `margin-left:auto`
   empurra o grupo inteiro, em vez de cada item disputar posição.

   `flex-wrap` e `justify-content:flex-end` entraram com a B.07, quando as ações
   em massa passaram a morar aqui dentro. Sem eles o canto é um bloco rígido:
   uma ação de rótulo longo ("Regerar documento", em Cobranças) empurraria busca
   e contagem para a linha de baixo INTEIRAS, e a barra dobraria de altura no
   instante da primeira marcação — que é justamente o salto de layout que tirar
   as ações da linha própria veio resolver. Com quebra interna desce só o que
   não coube, e alinhado à direita, que é onde este canto sempre esteve. */
.dt-canto{display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end;}
.dt-contagem{font-family:var(--font-mono); font-size:12px; color:var(--muted-3);}

/* Filtro aplicado precisa se anunciar. O pior caso de filtro é a pessoa não
   entender por que a lista está curta porque esqueceu que filtrou. */
.dt-filtro-ativo{border-color:var(--info-fg); color:var(--info-fg);}
.dt-filtro-contador{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:6px; border-radius:9px; background:var(--info-fg); color:#fff; font-family:var(--font-mono); font-size:11px;}

/* Campos dentro do modal de filtros. */
.filtro-campo{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); margin-bottom:16px;}
.filtro-campo select,.filtro-campo input{font:inherit; padding:11px 13px; border-radius:10px; border:1px solid var(--border); background:#fff; color:var(--ink); width:100%;}

/* Atalhos de período NA BARRA da listagem (SLX-146.02).
   ---------------------------------------------------------------------------
   Estiveram dentro do modal de filtros por um commit. Filtro rápido atrás de um
   painel que precisa ser aberto deixa de ser rápido — a correção foi trazê-los
   para a barra, a um clique.
   `flex-basis:100%` é o que resolve o aperto: dentro da `.dt-toolbar`, que é
   `flex-wrap`, ele força uma LINHA PRÓPRIA. Assim os cinco atalhos nunca
   disputam largura com busca, contagem, Filtros e Exportar — em nenhuma
   resolução. Em tela estreita eles quebram entre si, que é degradação
   previsível, em vez de empurrar o Exportar para fora.
   `border-top` porque a segunda linha precisa se ler como um grupo à parte, e
   não como sobra da primeira. */
.dt-periodo{flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding-top:12px; margin-top:2px; border-top:1px solid var(--border);}
.dt-periodo-rotulo{font-size:12px; color:var(--muted-3); margin-right:2px;}
.dt-periodo-item{font-size:12.5px; line-height:1; padding:7px 11px; border-radius:8px;
  border:1px solid var(--border); background:#fff; color:var(--muted); text-decoration:none;
  transition:background .15s, color .15s, border-color .15s;}
.dt-periodo-item:hover{background:var(--soft); color:var(--ink);}
.dt-periodo-item:focus-visible{outline:2px solid var(--teal); outline-offset:1px;}
/* O ativo na família info, a mesma do botão que aplica filtro: é o recorte que
   está valendo. */
.dt-periodo-item.ativo{background:var(--info-bg); border-color:var(--info-bd); color:var(--info-fg); font-weight:600;}
/* As duas datas, na mesma faixa dos atalhos (SLX-146.02).
   `margin-left:auto` empurra o par para a outra ponta da linha: os atalhos são o
   caminho rápido e ficam à esquerda, junto do rótulo; o intervalo exato é o
   caminho preciso e fica à direita, sem competir com eles.
   Os campos são estreitos de propósito — `<input type="date">` reserva largura
   para o formato inteiro, e sem o limite os dois sozinhos empurrariam os cinco
   atalhos para a linha de baixo em tela média. */
.dt-periodo-datas{display:flex; align-items:center; gap:6px; margin:0 0 0 auto;}
.dt-periodo-data{font:inherit; font-size:12.5px; padding:5px 8px; border-radius:8px;
  border:1px solid var(--border); background:#fff; color:var(--ink); max-width:140px;}
.dt-periodo-data:focus-visible{outline:2px solid var(--teal); outline-offset:1px;}
.dt-periodo-ate{font-size:12px; color:var(--muted-3);}
.dt-periodo-limpar{font-size:12px; color:var(--danger-fg); text-decoration:underline; white-space:nowrap;}
/* Em tela estreita o par de datas desce para a linha seguinte INTEIRO, em vez de
   uma data ficar em cima e outra embaixo. `margin-left:0` desfaz o empurrão da
   direita, senão ele sozinho ocuparia a linha nova encostado numa ponta. */
@media (max-width: 900px){
  .dt-periodo-datas{flex-basis:100%; margin-left:0;}
}

/* Linha que abre os detalhes ao clique (SLX-146.02).
   ---------------------------------------------------------------------------
   `user-select:none` porque, sem ele, quem mira a linha e move um pixel com o
   botão apertado pinta a faixa de azul em vez de navegar — e o guarda de
   `getSelection()` no `abrir()` faz o certo: vê texto selecionado e NÃO navega.
   O resultado era clicar e não acontecer nada, que foi a reclamação.
   SÓ NAS LINHAS CLICÁVEIS, nunca na tabela inteira: copiar um CNPJ, um valor ou
   uma referência é uso legítimo, e as listagens sem tela de detalhe seguem
   inteiramente selecionáveis. O guarda de `getSelection()` fica: ele ainda serve
   a quem seleciona de propósito começando fora da linha. */
.dt-linha-clicavel{cursor:pointer; -webkit-user-select:none; user-select:none;}
/* Texto longo cortado na coluna, com reticências (SLX-146.02).
   ---------------------------------------------------------------------------
   Por CSS, e não cortando a string no Blade, e a diferença importa:
   - o texto INTEIRO continua no DOM, então busca do navegador, cópia e leitor de
     tela alcançam o nome completo — um `mb_substr` o apagaria de verdade;
   - o corte acompanha a largura da coluna em vez de um número fixo de
     caracteres, que ficaria curto no monitor grande e longo no notebook.
   `max-width` em `ch` porque a medida é de texto, não de caixa: 28 caracteres é
   o ponto em que uma razão social típica ainda se distingue de outra.
   Quem usar precisa pôr o nome completo no `title` — o corte esconde, e sem ele
   a informação some. */
.dt-corta{display:inline-block; max-width:28ch; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; vertical-align:bottom;}
/* Etiquetas dos filtros aplicados, no topo do cartão (SLX-146.02).
   ---------------------------------------------------------------------------
   Ficam ACIMA das abas e da barra, porque respondem à primeira pergunta de quem
   chega numa lista curta: "por que só tem três linhas aqui?". O pior caso de
   filtro é a pessoa não lembrar que filtrou.
   `flex-wrap` porque o número de etiquetas é imprevisível — busca mais período
   mais situação mais cliente já são quatro. Quebram entre si; nenhuma some.
   O × tem alvo próprio de 20px: encostado no texto, remover o filtro errado
   seria fácil demais. */
.dt-aplicados{display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:12px 24px; border-bottom:1px solid var(--border); background:var(--soft);}
.dt-aplicados-rotulo{font-size:12px; color:var(--muted-3);}
.dt-aplicado{display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
  padding:5px 6px 5px 10px; border-radius:999px; border:1px solid var(--info-bd);
  background:var(--info-bg); color:var(--info-fg);}
.dt-aplicado-chave{color:var(--muted); font-size:11.5px;}
.dt-aplicado-x{display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; color:var(--info-fg);
  text-decoration:none; font-size:15px; line-height:1;}
.dt-aplicado-x:hover{background:#fff;}
.dt-aplicado-x:focus-visible{outline:2px solid var(--teal); outline-offset:1px;}
.dt-aplicados-limpar{font-size:12px; color:var(--danger-fg); text-decoration:underline; white-space:nowrap;}

/* Abas de recorte, entre a barra e a tabela (SLX-146.02).
   ---------------------------------------------------------------------------
   FORA da `.dt-toolbar`, e é o cuidado que decide se cabe: aquela já carrega
   busca, "todos da página", contagem, Filtros e Exportar — e em duas telas mais
   cinco atalhos de período e duas datas. Cinco abas ali dentro estourariam a
   linha em tela média.
   `flex-wrap` para quebrarem entre si em tela estreita, de forma controlada, em
   vez de sumirem: esconder é o problema que estas abas existem para resolver.
   A ativa se distingue por TRÊS sinais, não um: fundo, peso e a barra inferior.
   Só cor falharia para quem não a distingue, e o `aria-current` cobre o leitor
   de tela. */
.dt-abas{display:flex; flex-wrap:wrap; gap:2px; padding:0 24px; border-bottom:1px solid var(--border);}
.dt-aba{padding:11px 14px; font-size:13.5px; color:var(--muted); text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
  transition:color .15s, background .15s;}
.dt-aba:hover{color:var(--ink); background:var(--soft);}
.dt-aba:focus-visible{outline:2px solid var(--teal); outline-offset:-2px;}
.dt-aba.ativa{color:var(--teal-d); font-weight:600; border-bottom-color:var(--teal-d); background:var(--soft);}
.dt-zebra{background:var(--soft);}
.dt-selecionada{background:var(--info-bg);}
/* Selecionada vence a zebra: o estado que a pessoa criou importa mais que a
   listra decorativa. */
.dt-selecionada.dt-zebra{background:var(--info-bg);}

/* Cabeçalho ordenável: o link carrega a direção oposta à atual, e a seta diz a
   atual. Sem a seta, clicar duas vezes parece não ter feito nada. */
.dt-ordenar{display:inline-flex; align-items:center; gap:6px; color:inherit; font:inherit; text-decoration:none;}
.dt-ordenar:hover{color:var(--teal-d);}
/* 18px, o dobro dos 9px originais: a seta é o único indicador de qual coluna
   ordena a lista e em que sentido, e naquele tamanho ela sumia ao lado do
   rótulo. `line-height:1` impede que o glifo maior estique a altura da linha do
   cabeçalho — o que interessa crescer é a seta, não a barra inteira. */
.dt-ordenar .seta{font-size:18px; line-height:1; opacity:.55;}
.dt-ordenar[aria-sort]{color:var(--teal-d);}
.dt-ordenar[aria-sort] .seta{opacity:1;}

.dt-vazio{padding:32px 24px; color:var(--muted-3); text-align:center;}

/* Seletor de itens por página.
   `appearance:none` porque sem o preflight do Tailwind o `<select>` mantém o
   desenho nativo do sistema — inclusive uma borda em relevo que ignora
   `border-width` e faz o campo parecer mais grosso que os botões ao lado.
   Zerada a aparência, a seta some junto e precisa voltar como imagem. */
.dt-por-pagina{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238AA3A8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  padding-right:30px;
}

/* Dialog de confirmação
   ---------------------------------------------------------------------------
   Cobre editar e deletar. Criar não entra: o formulário de criação já é a
   própria confirmação.
   O corpo mostra OS DADOS do registro. "Tem certeza?" vira reflexo em duas
   semanas de uso; ler o nome do que se vai apagar obriga a olhar. */
.modal-fundo{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(6,42,48,.55);}
.modal{width:min(460px, 100%); max-height:calc(100vh - 40px); overflow:auto; background:#fff; border-radius:16px; padding:26px; box-shadow:0 24px 60px rgba(6,42,48,.32);}
.modal-titulo{font-family:var(--font-head); font-weight:700; font-size:19px; color:var(--ink); margin:0 0 8px;}
.modal-texto{font-size:14px; line-height:1.6; color:var(--muted); margin:0 0 18px;}
/* Os dados em grade rótulo/valor: alinhados, o olho varre a coluna da direita
   e reconhece o registro sem ler frase. */
.modal-dados{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:0 0 20px; padding:14px 16px; background:var(--soft); border:1px solid var(--border); border-radius:10px; font-size:13.5px;}
.modal-dados dt{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--muted-3); align-self:center;}
.modal-dados dd{margin:0; color:var(--ink); font-weight:500; overflow-wrap:anywhere;}
.modal-digite{display:block; font-size:13.5px; color:var(--muted); margin-bottom:20px;}
.modal-digite input{font:inherit; width:100%; margin-top:7px; padding:11px 13px; border-radius:10px; border:1px solid var(--border); background:#fff; color:var(--ink);}
.modal-acoes{display:flex; justify-content:flex-end; align-items:center; gap:10px;}
.modal-acoes form{margin:0;}
.modal-acoes .btn[disabled]{opacity:.45; cursor:not-allowed; filter:none;}

/* Toasts (canto inferior direito)
   ---------------------------------------------------------------------------
   Para confirmação de ação — o que antes empurrava a página para baixo por uma
   frase que se lê em dois segundos. Erro de validação NÃO vem para cá: aquele
   pertence ao formulário, precisa continuar na tela e ser relido campo a campo.

   `pointer-events:none` no contêiner e `auto` em cada toast: a faixa vazia
   ocupa o canto inteiro e bloquearia cliques no conteúdo por baixo. */
.toasts{position:fixed; right:20px; bottom:20px; z-index:80; display:flex; flex-direction:column; align-items:flex-end; gap:10px; width:min(300px, calc(100vw - 40px)); pointer-events:none;}
/* Preenchimento sólido, o mesmo dos botões: o toast é a confirmação da ação que
   o botão disparou, e ver a mesma cor liga uma coisa à outra. `overflow:hidden`
   e `position:relative` existem para a barra de tempo encaixar na borda. */
.toast{position:relative; overflow:hidden; pointer-events:auto; width:100%; display:flex; align-items:flex-start; gap:12px; padding:20px 18px 22px; border-radius:12px; border:0; font-size:14px; line-height:1.55; color:#fff; box-shadow:0 12px 32px rgba(6,42,48,.22);}
.toast-success{background:var(--success-solid);}
.toast-warning{background:var(--warning-solid);}
.toast-danger{background:var(--danger-solid);}
.toast-info{background:var(--info-solid);}
.toast-texto{flex:1; min-width:0;}
.toast-fechar{flex-shrink:0; background:none; border:0; padding:0; margin-top:1px; font:inherit; font-size:17px; line-height:1; color:inherit; opacity:.7; cursor:pointer;}
.toast-fechar:hover{opacity:1;}

/* Barra de tempo. Ela não só mostra o que falta — é ela que FECHA o toast, pelo
   `animationend`. Assim a duração existe num lugar só: mudar o `6s` aqui muda o
   tempo de vida junto, sem um `setTimeout` para manter em sincronia.
   Passar o mouse pausa a barra e, por consequência, adia o fechamento: quem
   está lendo não perde o aviso no meio da frase. */
.toast-timer{position:absolute; left:0; bottom:0; height:3px; width:100%; background:rgba(255,255,255,.65); transform-origin:right center; animation:toast-timer 6s linear forwards;}
.toast:hover .toast-timer{animation-play-state:paused;}
@keyframes toast-timer{from{transform:scaleX(1);} to{transform:scaleX(0);}}
.ttl{font-family:var(--font-head); font-weight:700; font-size:20px; color:var(--ink);}
.content{padding:32px; overflow:auto;}
/* invólucro das LISTAGENS, para a paginação encostar no rodapé (SLX-146.02)
   ---------------------------------------------------------------------------
   Uma classe à parte, e não `.content` direto, porque `.content` embrulha TODAS
   as páginas — dashboard, formulários, fichas. Trocar aquele para flex mudaria o
   espaçamento de todas de uma vez: em flex não há colapso de margem entre
   irmãos, e as margens verticais que hoje se fundem passariam a somar.

   `flex:1` faz a coluna ocupar a altura que sobra dentro do `<main>`, que já é
   flex column. É esse esticão que dá à paginação um `margin-top:auto` com algo
   para empurrar — sem ele, a regra é inerte, porque em fluxo de bloco margem
   automática vale zero.

   `min-height:0` anda junto do `flex:1`: sem ele o item flex não encolhe abaixo
   do conteúdo e o `overflow:auto` nunca chega a rolar. */
.content-listagem{flex:1; display:flex; flex-direction:column; min-height:0;}
/* O cartão da tabela cresce até a paginação (SLX-146.02).
   ---------------------------------------------------------------------------
   Sem isto o branco terminava na última linha e o resto até a barra ficava com o
   fundo da página — visível em qualquer listagem curta.

   `flex:1 0 auto`, e NÃO `flex:1`. A diferença é o que impede um estrago:
   `flex:1` é `1 1 0%`, com base zero e encolhimento LIGADO, e numa lista longa o
   contêiner encolheria o cartão abaixo da altura do conteúdo. Como ele tem
   `overflow:hidden` para arredondar os cantos, a tabela seria CORTADA em vez de
   rolar. Com `0 auto` a base é o conteúdo e o encolhimento está desligado: o
   cartão cresce quando sobra espaço e nunca fica menor do que precisa.

   Por isso também nada muda na lista longa: sem folga para distribuir, o
   `flex-grow` não tem o que fazer, e a rolagem continua no `.content`, que é
   quem tem `overflow:auto`. Nenhuma barra nova aparece dentro do cartão.

   `:last-of-type` porque o cartão da tabela é o ÚLTIMO `<div>` antes da barra de
   paginação nas quinze telas — conferido uma a uma. Os cartões que vêm ANTES
   dele (avisos, notas) continuam do tamanho do próprio conteúdo, que é o certo:
   quem estica é a tabela.

   Quem acrescentar um `<div>` DEPOIS do cartão nesta coluna tira a elasticidade
   dele sem perceber. Se precisar, ponha o elemento novo antes do cartão. */
.content-listagem > .card:last-of-type{flex:1 0 auto;}
/* FAIXA DE LEITURA nas telas de formulário (LEVA B)
   ---------------------------------------------------------------------------
   O painel branco ocupa a área de conteúdo inteira, como o cartão das
   listagens, e o que se LÊ fica numa faixa centralizada dentro dele. Antes cada
   Blade digitava `max-width` no próprio `.content`, e o resultado era painel
   estreito no meio da tela com fundo vazio dos dois lados — além de cinco
   medidas diferentes para a mesma intenção (820, 860, 900, 920, 1100), porque
   ninguém lembra o número da tela anterior.

   A faixa é aplicada aos FILHOS, não ao contêiner, e é isso que permite as duas
   coisas ao mesmo tempo: o cartão herda a largura toda, e o conteúdo dele não.

   820px porque os formulários usam `site-grid` com `minmax(240px,1fr)`, e a
   largura decide QUANTAS COLUNAS o grid produz: até ~830px dá duas, de 880 a
   960 dá três, a 1100 dá quatro. 820 mantém as duas colunas que as telas já
   tinham — alargar reflowaria formulário que ninguém pediu para mexer. */
.content--form > :not(.card){max-width:820px; margin-inline:auto;}
.content--form > .card > *{max-width:820px; margin-inline:auto;}
/* A exceção declarada: `new-charge` tem formulário de duas colunas MAIS a grade
   de produtos, que é `minmax(240px,1fr)`. A 820px aquela grade cairia de quatro
   colunas para duas. */
.content--larga > :not(.card),
.content--larga > .card > *{max-width:1100px;}
/* PAINEL DE SEÇÕES: um cartão só, blocos separados por régua
   ---------------------------------------------------------------------------
   Treze telas empilhavam de dois a cinco `.card` brancos com o fundo da página
   aparecendo entre eles. A faixa de fundo entre dois cartões lê como "acabou um
   assunto, começou outro" — e nessas telas não acabava: identidade da empresa e
   "o que está cadastrado" são partes do MESMO cadastro, e separá-las com o
   mesmo recuo que separa duas telas dá peso de assunto novo a uma subdivisão.

   A régua é `var(--border)`, a mesma que desenha a borda do cartão e as linhas
   das tabelas. Cravar um cinza aqui criaria um segundo tom de divisória que só
   esta tela conhece, e que não acompanharia uma mudança de tema.

   PADDING ZERO no cartão, e não `padding:24px` com as seções soltas: o padding
   do cartão empurraria a régua para dentro dos dois lados, e uma divisória que
   não encosta nas bordas parece sublinhado de parágrafo, não separação de
   bloco.

   `+` e não `:not(:last-child)`: a régua pertence ao PAR, não à seção. Seção
   escondida por `@if` some junto com a régua dela, sem deixar linha órfã no
   fundo do painel — que é o que uma regra por última-filha produziria, porque
   `:last-child` conta o DOM e não o que o Blade renderizou.

   Listagem não usa isto: lá a barra e a tabela já vivem no mesmo cartão, e a
   régua interna competiria com as linhas das próprias colunas. */
.painel{padding:0;}
.painel > .painel-secao{padding:24px;}
.painel > .painel-secao + .painel-secao{border-top:1px solid var(--border);}
/* A faixa de leitura desce um nível dentro do painel.
   ---------------------------------------------------------------------------
   Sem estas duas linhas, `.content--form > .card > *` pegaria a SEÇÃO — e aí a
   régua também ficaria com 820px, centralizada, no meio do branco. O desenho
   pedido é o oposto: régua de ponta a ponta, texto na faixa. Então a seção
   recusa o teto e o repassa aos filhos dela. */
.content--form > .painel > .painel-secao{max-width:none;}
.content--form > .painel > .painel-secao > *{max-width:820px; margin-inline:auto;}
.content--larga > .painel > .painel-secao > *{max-width:1100px;}
/* A barra de paginação encostada no rodapé (SLX-146.02).
   ---------------------------------------------------------------------------
   ESTA REGRA MORA AQUI, e não nas utilities do Tailwind, por um motivo que
   custou um bug: `mt-auto` e `pt-6` não existiam no bundle. O Tailwind gera sob
   demanda o que encontra no código FONTE no momento do build, e o bundle era
   anterior a esta mudança — as duas classes ficaram sem CSS por trás, a barra
   perdeu até o respiro que o `mt-6` dava, e a tela seguiu igual.
   `public/css/app.css` é servido direto, com cache-busting por `filemtime`.
   Layout que depende de alguém lembrar de rodar `pnpm build` falha em silêncio,
   que foi exatamente o que aconteceu.
   `padding-top` junto da margem automática: a margem come o espaço que sobra,
   mas vira zero quando a lista é longa e não sobra nada — e aí a barra
   encostaria na tabela. Padding não é elástico e garante o respiro nos dois
   casos.
   Fora de uma coluna flex — na ficha do sacado, onde esta mesma barra vive no
   meio da página com conteúdo embaixo — `margin-top:auto` é inerte: em fluxo de
   bloco, margem automática vertical computa zero. É por isso que aquelas telas
   não precisam de exceção. */
.dt-paginacao{margin-top:auto; padding-top:24px;}
.kpi .lbl{font-size:13px; color:var(--muted-2); margin-bottom:8px;}
.kpi .val{font-family:var(--font-head); font-weight:800; font-size:26px; color:var(--ink); letter-spacing:-.02em;}
.kpi .delta{font-size:12.5px; margin-top:4px; color:var(--muted-2);}

/* variantes semânticas do KPI
   ---------------------------------------------------------------------------
   Mesmas cinco famílias dos botões, notes e badges. A cor classifica o NÚMERO —
   success é dinheiro que já está na conta, info é dinheiro em trânsito, danger é
   o que exige ação —, e por isso pinta o valor e a faixa, nunca o fundo do
   cartão: fundo colorido em quatro cartões lado a lado vira decoração, e o
   contraste do número cai junto.

   A faixa à esquerda existe para quem não distingue as cores: mesmo lida em
   cinza, ela separa os cartões em grupos. Vem antes do valor na ordem de
   leitura, que é onde a classificação é útil. */
.kpi-success{border-left:4px solid var(--success-fg);}
.kpi-info{border-left:4px solid var(--info-fg);}
.kpi-warning{border-left:4px solid var(--warning-fg);}
.kpi-danger{border-left:4px solid var(--danger-fg);}
/* Seletor dentro do cabeçalho de um KPI (SLX-146.02).
   Discreto de propósito: é um recorte do número, não um comando. Sem borda em
   repouso, para não competir com o valor, e com contorno ao focar, porque quem
   navega por teclado precisa enxergar onde está. */
.kpi-select{font:inherit; font-size:11.5px; color:var(--muted); background:var(--soft);
  border:1px solid transparent; border-radius:7px; padding:2px 4px; max-width:52%; cursor:pointer;}
.kpi-select:hover{border-color:var(--border); color:var(--ink);}
.kpi-select:focus-visible{outline:2px solid var(--info-fg); outline-offset:1px;}

.kpi-success .val{color:var(--success-fg);}
.kpi-info .val{color:var(--info-fg);}
.kpi-warning .val{color:var(--warning-fg);}
.kpi-danger .val{color:var(--danger-fg);}

.bars{display:flex; align-items:flex-end; gap:8px; height:150px;}
.bars .bar{flex:1; background:linear-gradient(180deg,var(--tiffany),var(--teal)); border-radius:5px 5px 0 0;}

/* balão do gráfico diário (SLX-146.02)
   ---------------------------------------------------------------------------
   `pointer-events:none` é obrigatório: o balão fica sobre a área do gráfico, e
   sem isso ele roubaria o mouse da coluna que o abriu — o cursor entraria no
   balão, a coluna perderia o hover, o balão sumiria, a coluna voltaria a
   receber o mouse. Piscaria sem parar.

   `top` fixo em vez de seguir o cursor: balão que persegue o mouse obriga a
   reler a posição a cada movimento. Ancorado, o olho sabe onde ele vai estar. */
.chart-tip{position:absolute; top:6px; z-index:2; pointer-events:none;
  min-width:172px; padding:10px 12px; border-radius:10px;
  background:#fff; border:1px solid var(--border); box-shadow:0 8px 24px rgba(6,42,48,.12);
  font-size:12px; color:var(--muted);}
.chart-tip-dia{font-family:var(--font-mono); font-size:11px; color:var(--muted-3);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:7px;
  padding-bottom:6px; border-bottom:1px solid var(--border);}
.chart-tip-linha{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:2px 0;}
.chart-tip-linha strong{font-family:var(--font-head); color:var(--ink);}
.table-head,.table-row{display:grid; gap:12px; align-items:center;}
.table-head{padding:16px 24px; background:var(--soft); border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2);}
.table-row{padding:15px 24px; border-bottom:1px solid #F0F6F7; font-size:14px;}

@media(max-width:900px){
  .site-container{padding:0 22px;}
  .h1{font-size:38px;} .h2{font-size:30px;}
  .g2,.g3,.g4,.split,.footer-grid{grid-template-columns:1fr;}
  .app{grid-template-columns:1fr;} .side{position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center;}
  /* Abaixo de 900px a barra deixa de ser coluna de 100vh e vira faixa no topo
     (`.side` acima ganha `position:static; height:auto`). O `overflow-y` e o
     `flex:1` que fazem o menu rolar na versão de coluna precisam sair junto:
     numa faixa que embrulha em linhas, eles criariam uma área de rolagem dentro
     de algo que já cresce livremente — e voltariam a esconder itens, agora sem
     nem haver rodapé para empurrar. */
  .side-nav{flex-direction:row; flex-wrap:wrap; flex:0 1 auto; min-height:auto; overflow:visible;} .side-user{margin:0;}
}

/* ── Cartão de produto na emissão (SLX-146.07) ─────────────────────────────
   A cor de seleção é a família INFO, a mesma de `.dt-selecionada`: escolher um
   produto é a mesma natureza de ato que marcar uma linha — seleção, e não
   confirmação nem alerta. */
.produto-card{display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left;
  padding:14px 16px; border-radius:12px; border:1px solid var(--border); background:#fff;
  cursor:pointer; font:inherit; transition:border-color .12s, box-shadow .12s, background .12s;}
.produto-card:hover{border-color:var(--info-bd); background:var(--soft);}
.produto-card:focus-visible{outline:2px solid var(--info-solid); outline-offset:2px;}

/* O marcador ocupa o espaço mesmo vazio: aparecer do nada empurraria o texto do
   cartão para o lado no instante do clique. */
.produto-check{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; margin-top:2px; border-radius:50%;
  border:1.5px solid var(--border); background:#fff; color:transparent;
  transition:background .12s, border-color .12s, color .12s;}
.produto-check-on{background:var(--info-solid); border-color:var(--info-solid); color:#fff;}

.produto-corpo{display:flex; flex-direction:column; gap:3px; min-width:0;}
.produto-nome{font-family:var(--font-head); font-weight:600; font-size:14px; color:var(--ink);}
.produto-valor{font-size:13.5px; color:var(--ink);}
.produto-parcela{color:var(--muted); font-size:12.5px;}
.produto-parcela::before{content:'· ';}
.produto-desc{font-size:12px; color:var(--muted-3);}
.produto-meta{font-family:var(--font-mono); font-size:11px; color:var(--muted-3); margin-top:2px;}

/* ══════════════════════════════════════════════════════════════════════════
   SITE INSTITUCIONAL — versão mobile (B.17)
   ══════════════════════════════════════════════════════════════════════════

   TUDO daqui para baixo é escopado em `.site`, e o bloco é APÊNDICE: nenhuma
   linha acima foi alterada. As duas coisas juntas são o que garante que os
   painéis não mudam — o `git diff` deste arquivo mostra só adição no rodapé.

   ── POR QUE O ESCOPO NÃO É ZELO EXCESSIVO ──────────────────────────────────

   Este arquivo serve TRÊS interfaces: o site, o portal do cliente e o
   administrativo. E os seletores que o mobile do site precisa mexer são
   justamente os compartilhados — medido antes de escrever a primeira regra:

       .site-grid  → 32 telas de painel
       .g2         → 39 usos no painel
       .h2, .lead  →  8 telas de painel cada

   Uma media query solta em `.g2` arrumaria o site e mexeria em 39 lugares do
   painel de uma vez. O padrão visual dos painéis foi aprovado na B.11.

   `.site` vive no `<body>` do `layouts/app.blade.php`. O `layouts/dashboard`
   não a tem, e é só isso que separa os dois mundos.

   ── O DEFEITO QUE ISTO CONSERTA, MEDIDO ────────────────────────────────────

   A 375px de largura, SEIS das oito páginas públicas rolavam de lado: a página
   media 710px de conteúdo numa tela de 375 — 335px transbordando. A causa não
   era falta de media query (a de 900px já existia e já colapsava `.g2` e
   `.split`), era `grid-template-columns` escrito em `style=` nas views, que
   vence qualquer regra de folha. Por isso a B.17 mexe nas views antes de mexer
   aqui: as classes abaixo são exatamente o que estava inline, com os MESMOS
   valores de desktop, agora em lugar onde uma media query alcança.
   ────────────────────────────────────────────────────────────────────────── */

/* O RECUO LATERAL das seções, como token.
   ---------------------------------------------------------------------------
   Doze seções do site fixavam `padding:NNpx 40px` em `style=`. Cada uma tem um
   recuo VERTICAL próprio (34, 44, 88, 90, 92, 96, 110), então trocar tudo por
   uma classe só apagaria o ritmo da página; e inline vence media query, então
   no celular todas ficavam com 40px de margem enquanto o hero — já convertido —
   ficava com 18px. As seções não alinhavam entre si.

   O token resolve os dois: o valor vertical continua onde estava, escrito na
   view, e só o lateral passa a responder à largura. `40px` no desktop é o mesmo
   número de antes.

   As views escrevem `var(--gutter,40px)`, com o padrão junto, e o segundo valor
   não é decoração: custom property indefinida torna a declaração inteira
   inválida em tempo de cálculo, e `padding` cairia para ZERO — a seção colaria
   nas bordas. Isso aconteceria no dia em que alguma dessas views fosse
   renderizada por um layout sem a classe `.site`. Com o padrão escrito, o pior
   caso é ela ficar com o recuo de desktop. */
.site{--gutter:40px;}

/* Layout que saiu do `style=` das páginas. Desktop idêntico ao anterior. */
.site .site-hero{padding:96px 40px 104px; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.site .site-split-larga{grid-template-columns:.9fr 1.1fr; gap:64px;}
.site .site-contato-topo{padding:90px 40px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.site .site-produto-destaque{border-radius:20px; padding:40px; display:grid; grid-template-columns:1fr .9fr; gap:48px; align-items:center;}
.site .site-linha-tempo-item{display:grid; grid-template-columns:120px 1fr; gap:28px; padding-bottom:34px;}
/* Brilho decorativo atrás do cartão do hero. Sangra para fora do pai de
   propósito — e no celular era o único transbordamento que sobrava depois de
   tudo colapsar: 6px de rolagem lateral por causa de um degradê. */
.site .site-hero-brilho{position:absolute; inset:-24px; filter:blur(8px);
  background:radial-gradient(circle at 50% 40%, rgba(10,186,181,.22), transparent 68%);}

/* Texto que só o leitor de tela alcança. Existe porque o botão do menu é um
   ícone: `aria-label` funcionaria para leitor de tela, mas ditado por voz e a
   busca da página só encontram texto de verdade. */
.site .apenas-leitor{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;}

/* O par de ações à direita da barra — substitui o `style=` que estava no div. */
.site .nav-acoes{display:flex; align-items:center; gap:14px;}

/* Botão do menu. Nasce ESCONDIDO: no desktop os links ficam todos à mostra e
   nada aqui muda. 44×44 é o alvo de toque mínimo, e vale também para o foco. */
.site .nav-toggle{display:none; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border:1px solid var(--border);
  border-radius:10px; background:#fff; color:var(--ink); cursor:pointer;}
.site .nav-toggle:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.site .nav-toggle-barras{display:block; width:18px;}
.site .nav-toggle-barras span{display:block; height:2px; border-radius:2px; background:currentColor;}
.site .nav-toggle-barras span + span{margin-top:4px;}

/* ── Conteúdo vindo do CMS: artigo do blog e páginas legais ────────────────
   Estes dois blocos recebem HTML que ninguém escreveu pensando em celular —
   quem publica cola tabela, imagem e bloco de código. Até aqui NÃO havia
   nenhuma regra para `.post-body` nem `.legal-body`: uma tabela de cinco
   colunas num post abriria a página inteira de lado, e nada no código impedia.

   A regra vale em TODA largura, não só no celular: o corpo do artigo tem 760px
   de caixa, e uma tabela larga transborda no monitor também.

   `display:block` na tabela é o que a faz rolar dentro de si mesma sem precisar
   de um `<div>` em volta — e um `<div>` em volta não é opção, porque o HTML vem
   do CMS e envolvê-lo exigiria mexer no editor, que está fora do escopo. */
.site .post-body img,
.site .legal-body img{max-width:100%; height:auto;}
.site .post-body iframe,
.site .legal-body iframe{max-width:100%;}
.site .post-body table,
.site .legal-body table{display:block; max-width:100%; overflow-x:auto;}
.site .post-body pre,
.site .legal-body pre{max-width:100%; overflow-x:auto;}
/* URL sem espaço no meio do parágrafo estica a caixa. `break-word` e não
   `anywhere`: este é texto corrido para ler, e só deve quebrar palavra quando
   não houver alternativa. */
.site .post-body,
.site .legal-body{overflow-wrap:break-word;}

/* ── Tablet e abaixo ──────────────────────────────────────────────────────── */
@media (max-width:900px){
  /* Um valor só, e as doze seções inline acompanham junto com os convertidos. */
  .site{--gutter:22px;}

  /* Os cinco layouts que estavam inline viram uma coluna. */
  .site .site-hero{padding:64px var(--gutter) 72px; grid-template-columns:1fr; gap:40px;}
  .site .site-contato-topo{padding:60px var(--gutter); grid-template-columns:1fr; gap:40px;}
  .site .site-split-larga{grid-template-columns:1fr; gap:40px;}
  .site .site-produto-destaque{grid-template-columns:1fr; gap:28px; padding:28px;}
  /* O ano sobe para cima do texto: 120px de coluna fixa numa tela de 375
     deixariam 16 caracteres de largura para o parágrafo. */
  .site .site-linha-tempo-item{grid-template-columns:1fr; gap:10px;}
  /* Só as bordas LATERAIS encostam: o sangramento de cima e de baixo não cria
     rolagem, e é ele que dá o efeito. */
  .site .site-hero-brilho{left:0; right:0;}

  /* Só o VERTICAL, e a diferença é um defeito real que estava no ar.
     ---------------------------------------------------------------------------
     `.section{padding:100px 0}` vem DEPOIS de `.site-container{padding:0 40px}`
     na folha, e as duas classes convivem no mesmo elemento em quatro seções da
     home. Com a mesma especificidade, quem vem depois ganha: o recuo lateral
     virava ZERO.
     No monitor isso passava batido, porque o container tem `max-width:1200px` e
     a margem automática dava 40px de folga em 1280 — folga que some assim que a
     janela fica menor que 1200. Medido a 375px: `left:0`, texto encostado na
     borda da tela em quatro seções.
     Escrevendo as duas metades separadas, o horizontal do `.site-container`
     sobrevive. O desktop não muda: a regra base continua intocada. */
  .site .section{padding-top:64px; padding-bottom:64px;}

  /* ── A NAVEGAÇÃO EM TELA ESTREITA, EM DUAS CAMADAS ─────────────────────────
     CONSERTO da B.17, depois de o dono relatar "o menu do site mobile não abre".

     O que estava errado: a versão anterior escondia os links (`display:none`) e
     só os mostrava por uma classe que o Alpine acrescenta. Medido, carregando a
     home sem os `<script>`: o botão continuava aparecendo, e ZERO dos cinco
     links ficava alcançável. Ou seja, se o bundle não chegasse — rede ruim,
     navegador antigo, script bloqueado —, o celular ficava com um botão morto e
     sem navegação nenhuma. O sintoma que o dono descreveu é exatamente esse.

     Agora o padrão é o que funciona SEM script, e o script só melhora:

       sem JS  → os links ficam visíveis, embrulhando para a linha de baixo,
                 e o botão NÃO aparece (botão morto é pior que botão nenhum);
       com JS  → viram painel, e o botão aparece.

     A chave é `.menu-js`, que o `x-init` do próprio Alpine põe no `<body>`. Ela
     só existe se o Alpine tiver REALMENTE iniciado — não basta o arquivo ter
     sido pedido. */

  /* Camada 1 — sem JS. */
  .site .nav-inner{position:relative; gap:12px; flex-wrap:wrap; height:auto;
    padding-top:12px; padding-bottom:12px;}
  .site .nav-links{flex-basis:100%; flex-wrap:wrap; gap:2px;}
  .site .nav-toggle{display:none;}

  /* Camada 2 — com JS. `position:absolute` e não `static`: empurrar o conteúdo
     para baixo faria a barra fixa crescer e comer metade da tela com o menu
     aberto. */
  .site.menu-js .nav-inner{flex-wrap:nowrap; height:74px;
    padding-top:0; padding-bottom:0;}
  .site.menu-js .nav-toggle{display:inline-flex;}
  .site.menu-js .nav-links{display:none; position:absolute; left:0; right:0; top:100%;
    flex-basis:auto; flex-direction:column; align-items:stretch; gap:2px; padding:8px;
    background:#fff; border:1px solid var(--border); border-top:0;
    border-radius:0 0 14px 14px; box-shadow:0 18px 40px rgba(6,42,48,.16);}
  .site.menu-js .nav-links-aberto{display:flex;}
  /* Alvo de toque de 44px de altura, e fonte maior: 15px num item de menu de
     celular é pequeno para quem lê sem óculos. */
  .site .nav-link{display:flex; align-items:center; min-height:44px;
    padding:10px 14px; font-size:16px;}
  /* A marca do item ativo era uma barrinha embaixo, desenhada para uma linha
     horizontal. Empilhado, ela viraria um traço solto sob cada item. */
  .site .nav-link.active{background:var(--soft); color:var(--teal-d);}
  .site .nav-link.active::after{display:none;}

  /* Código Pix, linha digitável e afins quebram DENTRO da caixa. Sem isto uma
     string de 44 caracteres sem espaço estica o cartão e a página rola de lado
     — foi um dos transbordamentos medidos no hero. */
  .site .mono{overflow-wrap:anywhere;}

  /* `min-width:auto` é o padrão de item de grid, e é a armadilha que sobra
     depois de tudo o mais estar certo: a coluna se recusa a ficar menor que o
     conteúdo mais largo que ela tem dentro, e então cresce PARA FORA do pai.
     Medido a 320px: o hero tinha caixa de 284px e a coluna insistia em 332px,
     empurrando a página 30px para o lado — com todas as media queries já
     valendo. Só aparece nas telas mais estreitas, que são justamente as que
     ninguém testa. */
  .site .site-hero > *,
  .site .site-contato-topo > *,
  .site .site-produto-destaque > *,
  .site .site-split-larga > *,
  .site .site-grid > *{min-width:0;}
}

/* ── Celular ──────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .site{--gutter:18px;}
  .site .site-container{padding:0 var(--gutter);}
  .site .site-hero{padding:48px var(--gutter) 56px;}
  .site .site-contato-topo{padding:48px var(--gutter);}

  /* A escala de 56/40 foi desenhada para monitor. A de 900px já baixava para
     38/30; aqui vai ao ponto em que um título de seis palavras não quebra em
     cinco linhas. */
  .site .h1{font-size:30px;}
  .site .h2{font-size:24px;}
  .site .lead{font-size:17px;}

  /* Botão confortável para o dedo, sem virar bloco: o hero tem dois lado a
     lado e `flex-wrap` já cuida de empilhá-los quando não cabem. */
  .site .btn{padding:14px 22px; font-size:15px; min-height:48px;}
  .site .btn-sm{padding:9px 14px; font-size:13.5px; min-height:40px;}

  /* Marca, CTA e menu na mesma linha em 360px só cabem com a marca menor. */
  .site .brand-name{font-size:18px;}
  .site .nav-inner{gap:10px;}
  .site .nav-acoes{gap:10px;}

  /* Campo de formulário a 16px, e o número é literal: abaixo disso o Safari do
     iPhone dá zoom sozinho ao focar o campo — a página salta, sai do lugar e a
     pessoa perde de vista o que estava preenchendo. Vale para os dois lugares
     em que o visitante age de verdade: o formulário de contato e o
     autocadastro. Escopado em `.site` porque `.field` é a mesma classe dos
     formulários do painel. */
  .site .field{font-size:16px; padding:13px 14px;}

  .site .section{padding-top:48px; padding-bottom:48px;}
  .site .footer .site-container{padding-top:52px; padding-bottom:32px;}
  .site .footer-bottom{margin-top:36px;}
  .site .footer-legal{flex-wrap:wrap; gap:14px;}
}