@font-face{font-family:Prompt;src:url('../fonts/prompt-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Prompt;src:url('../fonts/prompt-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Prompt;src:url('../fonts/prompt-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Prompt;src:url('../fonts/prompt-700.woff2') format('woff2');font-weight:700;font-display:swap}
/* `--tblr-primary` é a cor que o Tabler usa em tudo que não é botão: switch e checkbox
   marcados, link, aba ativa, sanfona aberta. Ficava no azul de fábrica enquanto a marca
   é roxa, então cada tela misturava as duas — o botão roxo ao lado do switch azul. */
:root{--tblr-font-sans-serif:Prompt,system-ui,sans-serif;--tblr-primary:#59188f;--tblr-primary-rgb:89,24,143;--waldman:#59188f;--waldman-dark:#420079;--waldman-mid:#7d3db2;--waldman-lilac:#bb83ea;--waldman-cream:#f4ecd4}
/* Tabler 1.x monta `.alert` como flex-row: cada <strong>, <code> ou trecho de texto solto
   vira um item de coluna e o alerta se parte em colunas estreitas de uma palavra. Nenhum
   alerta do portal usa a estrutura `.alert-icon`, então ele volta a ser bloco. */
.alert{display:block}
/* `.card-header` é flex-row e o subtítulo é irmão do título: os dois colavam um no outro
   ("Aplicar em loteVale para todos os clientes…"). Só o subtítulo quebra linha, para não
   derrubar o `ms-auto` dos headers que têm ação à direita. */
.card-header{flex-wrap:wrap;align-items:center}
.card-header>.card-title{margin-bottom:0}
/* `order` empurra o subtítulo para depois de tudo: sem isso, um header com título +
   subtítulo + ação à direita joga a ação para a terceira linha. */
.card-header>.card-subtitle{order:1;flex:1 0 100%;margin-top:.15rem;font-size:.8125rem;line-height:1.45;color:#6a6475}
body{font-family:var(--tblr-font-sans-serif);color:#292330;background:#f7f5f9}
.btn-primary{--tblr-btn-bg:var(--waldman);--tblr-btn-border-color:var(--waldman);--tblr-btn-hover-bg:var(--waldman-dark);--tblr-btn-hover-border-color:var(--waldman-dark)}
.text-primary{color:var(--waldman)!important}.bg-primary{background:var(--waldman)!important}.border-primary{border-color:var(--waldman)!important}
.waldman-logo{display:block;width:auto;height:42px;object-fit:contain}.waldman-logo-lg{height:58px;max-width:100%}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(300px,460px) 1fr}.auth-panel{display:flex;align-items:center;padding:3rem;background:#fff}.auth-brand{position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:4rem;color:#fff;background:linear-gradient(145deg,var(--waldman-dark),var(--waldman) 54%,var(--waldman-mid))}.auth-brand:before{content:"";position:absolute;width:460px;height:460px;border:80px solid rgba(255,255,255,.08);border-radius:50%;right:-130px;top:-160px}.auth-brand-copy{position:relative;max-width:36rem}.auth-card{width:100%;max-width:390px;margin:auto}.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--waldman)}
.navbar-waldman{background:linear-gradient(105deg,var(--waldman-dark),var(--waldman));color:white}.navbar-waldman .nav-link{color:rgba(255,255,255,.82)}.navbar-waldman .nav-link:hover,.navbar-waldman .nav-link.active{color:#fff;background:rgba(255,255,255,.1)}
.metric-card{border:0;box-shadow:0 8px 28px rgba(66,0,121,.07)}.metric-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--waldman);background:rgba(89,24,143,.1)}.metric-icon-danger{color:#b42318;background:#fee4e2}
.chart-header{display:block;padding:1.15rem 1.35rem .35rem;border-bottom:0}
.chart-header .card-title{display:block;margin:0 0 .25rem;line-height:1.3}
.chart-header .card-subtitle{display:block;margin:0;font-size:.8125rem;line-height:1.4;color:#6a6475}
.chart-body{display:flex;align-items:center;padding:.5rem 1.35rem 1.35rem}
.chart-body>svg{width:100%;height:auto}
.chart-legend{display:flex;gap:1rem;margin-top:.55rem;font-size:.78rem;color:#6a6475}
.chart-legend span{display:inline-flex;align-items:center;gap:.35rem}
.chart-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.viz-bar{transition:filter .15s}.viz-bar:hover{filter:brightness(1.14)}
.viz-tick{font-size:11px;fill:#898792;font-variant-numeric:tabular-nums}
.viz-label{font-size:12px;fill:#6a6475}
.viz-value{font-size:12px;font-weight:600;fill:#292330;font-variant-numeric:tabular-nums}
.invoice-group{border:1px solid #e6dfee;border-radius:14px;background:#fff;overflow:hidden}.invoice-group+ .invoice-group{margin-top:1rem}.invoice-group summary{list-style:none;cursor:pointer;padding:1.1rem 1.25rem}.invoice-group summary::-webkit-details-marker{display:none}.invoice-group[open] summary{border-bottom:1px solid #ede8f1;background:#fcfaff}.invoice-chevron{transition:transform .2s}.invoice-group[open] .invoice-chevron{transform:rotate(180deg)}
.document-actions{display:flex;gap:.5rem;flex-wrap:wrap}.document-actions .btn{white-space:nowrap}.parcel-table td,.parcel-table th{vertical-align:middle}.parcel-table th:first-child,.parcel-table td:first-child{position:sticky;left:0;background:#fff;z-index:1}.status-overdue{color:#b42318;background:#fee4e2}.status-due{color:#175cd3;background:#dbeafe}.badge-soft{padding:.35rem .6rem;border-radius:999px;font-weight:600;font-size:.72rem}
.admin-sidebar{background:var(--waldman-dark)}.admin-sidebar .navbar-brand{padding:1.2rem}.admin-sidebar .nav-link{color:rgba(255,255,255,.76);border-radius:8px;margin:.12rem .75rem;padding:.65rem .8rem}.admin-sidebar .nav-link:hover,.admin-sidebar .nav-link.active{color:#fff;background:rgba(255,255,255,.11)}
/* Linha do tempo da cobrança: separa visualmente o gatilho fixo (na emissão) das
   réguas por vencimento. Sem isso o card do gatilho parecia mais um item da lista e
   a pessoa tentava clicar nele esperando abrir uma sanfona. */
.timeline-step{position:relative;padding-left:1.75rem;margin-bottom:2rem}
.timeline-step:before{content:"";position:absolute;left:.55rem;top:1.9rem;bottom:-1.25rem;width:2px;background:#e6dfee}
.timeline-step:last-child:before{display:none}
.timeline-step-label{display:flex;align-items:center;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6a6475;margin-bottom:.75rem}
.timeline-step-num{position:absolute;left:0;width:1.35rem;height:1.35rem;border-radius:50%;display:grid;place-items:center;background:var(--waldman);color:#fff;font-size:.72rem;letter-spacing:0}
/* Gatilho fixo: tracejado e fundo próprio deixam claro que não é uma régua clicável. */
.trigger-card{border:1px dashed #cfc3e0;border-radius:14px;background:#faf8fd;padding:1.1rem 1.25rem}
/* Barra de ativação: cabeçalho da linha do tempo das réguas, não um card à parte. Fundo
   próprio e borda esquerda grossa para ler como "governa tudo abaixo" sem virar mais uma
   caixa competindo com as réguas — que era a redundância reclamada. */
.activation-bar{border:1px solid #e6dfee;border-left:4px solid #b6afc4;border-radius:14px;background:#fff;padding:1rem 1.25rem;margin-bottom:1.75rem}
.activation-bar.is-on{border-left-color:var(--tblr-green,#2fb344);background:#fbfffc}
.activation-bar.is-blocked{border-color:var(--tblr-red,#d63939);border-left-color:var(--tblr-red,#d63939)}
/* Cadência da régua: as etapas desenhadas na linha do tempo do vencimento, legíveis sem
   abrir a sanfona. Antes a linha dizia só "3 etapa(s)" — o número de etapas é o que menos
   importa; quando elas disparam é o que a pessoa precisa ver de relance. */
.cadence{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.cadence-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .55rem;border:1px solid #e0d8ea;border-radius:999px;background:#fff;font-size:.78rem;font-weight:600;color:#4a4356;white-space:nowrap}
.cadence-chip i{font-size:.95rem;color:#8a8397}
.cadence-chip.is-off{border-style:dashed;background:transparent;color:#9a94a6}
.cadence-chip.is-off i{color:#b6b0c0}
.cadence-due{display:inline-flex;align-items:center;padding:.18rem .6rem;border-radius:999px;background:var(--waldman);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.cadence-sep{width:.85rem;height:2px;border-radius:2px;background:#ded6e8;flex:none}
.legend-dot{width:.55rem;height:.55rem;border-radius:50%;display:inline-block;flex:none}
.metric-card .h2{font-variant-numeric:tabular-nums}
.table-responsive{border-radius:10px}.wizard-step{display:flex;gap:.75rem;align-items:center}.wizard-number{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--waldman);color:#fff;font-weight:700}.empty-state{padding:4rem 1rem;text-align:center}.loading-overlay{position:relative;pointer-events:none;opacity:.65}.toast-container{z-index:1090;pointer-events:none}.toast-container .toast{pointer-events:auto}.focus-ring:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--waldman-lilac)!important;outline-offset:2px}
@media(max-width:991.98px){.auth-shell{grid-template-columns:1fr}.auth-brand{display:none}.auth-panel{padding:1.5rem;min-height:100vh}.admin-sidebar{min-height:auto}.document-actions{margin-top:.75rem}}
@media(max-width:575.98px){.waldman-logo{height:34px}.page-body{margin-top:.75rem}.card-body{padding:1rem}.invoice-group summary{padding:1rem}.document-actions .btn{flex:1 1 45%}.metric-card .card-body{padding:.9rem}.hide-mobile{display:none!important}}


/* Prévia de WhatsApp: a caixa imita a tela de conversa do WhatsApp Web (fundo, balão,
   hora, chip de documento) porque "como isso chega no celular do cliente" era pergunta
   que a prévia antiga, um parágrafo solto num card branco, não respondia. Só o miolo da
   prévia usa isto — o resto da tela continua Tabler. Cores retiradas do WhatsApp Web
   claro; o padrão de fundo é um SVG embutido (nada externo, CSP não permitiria). */
.wa-chat{background-color:#efeae2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cg fill='none' stroke='%23d5cec1' stroke-width='1' opacity='.38'%3E%3Ccircle cx='16' cy='18' r='5'/%3E%3Cpath d='M44 10h11v9H44z'/%3E%3Cpath d='M10 56l7-7 7 7'/%3E%3Ccircle cx='63' cy='62' r='3.5'/%3E%3Cpath d='M34 40h14M60 30h10'/%3E%3Cpath d='M26 72h9v6h-9z'/%3E%3C/g%3E%3C/svg%3E");padding:1rem .85rem 1.35rem;min-height:8rem}
.wa-topbar{display:flex;align-items:center;gap:.6rem;background:#f0f2f5;border-bottom:1px solid #d6dade;padding:.5rem .75rem}
.wa-avatar{width:30px;height:30px;border-radius:50%;background:#dfe5e7;color:#54656f;display:grid;place-items:center;font-size:.8rem;flex:none}
.wa-topbar-name{font-size:.86rem;font-weight:600;color:#111b21;line-height:1.1}
.wa-topbar-sub{font-size:.7rem;color:#667781}
.wa-bubble{position:relative;background:#fff;border-radius:0 7.5px 7.5px 7.5px;box-shadow:0 1px .5px rgba(11,20,26,.13);padding:.4rem .5rem .35rem .55rem;max-width:min(28rem,92%);color:#111b21;font-size:.89rem;line-height:1.35}
.wa-bubble::before{content:"";position:absolute;top:0;left:-8px;width:8px;height:13px;background:#fff;clip-path:polygon(100% 0,0 0,100% 100%)}
.wa-text{white-space:pre-line;overflow-wrap:anywhere}
/* Variável não mapeada aparece como o marcador cru ({{1}}) em negrito: é exatamente o que
   o cliente receberia se a mensagem fosse enviada assim — não um espaço em branco. */
.wa-text strong{font-weight:700}
.wa-time{display:block;text-align:right;font-size:.66rem;color:#667781;margin-top:.1rem;line-height:1}
.wa-doc{display:flex;align-items:center;gap:.55rem;background:#f5f6f6;border-radius:6px;padding:.5rem .6rem;margin-bottom:.35rem}
.wa-doc-icon{width:30px;height:34px;border-radius:3px;background:#fff;border:1px solid #e3e6e7;color:#d93025;display:grid;place-items:center;font-size:.58rem;font-weight:700;letter-spacing:.02em;flex:none}
.wa-doc-name{font-size:.8rem;color:#111b21;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-doc-sub{font-size:.68rem;color:#667781}
/* "Envios da leva": layout fixo — a largura das colunas vem daqui, nunca do conteúdo, então
   e-mail longo ou erro comprido quebram linha dentro da coluna em vez de empurrar os botões
   para fora do modal. Colunas sem largura (cliente, destino, assunto, erro) dividem o resto. */
.envios-table{table-layout:fixed;width:100%;min-width:700px}
.envios-table td{overflow-wrap:anywhere}
.envios-table th:nth-child(4){width:72px}
.envios-table th:nth-child(5){width:60px}
.envios-table th:nth-child(6){width:92px}
.envios-table th:nth-child(8){width:156px}
.envios-acoes .btn{margin:2px 0 2px 4px;white-space:nowrap}
.envios-table tr.envio-destaque>td{background:#fff4d6;transition:background .6s}
.envio-exige-ti{margin-top:2px;line-height:1.3}
.ir-job .input-group{flex-wrap:nowrap;width:auto}
/* Lista de lotes: nome técnico sem espaço (evento sem mensagem cadastrada) não pode alargar a tabela e empurrar "Ver detalhes" para fora da tela. */
.lotes-table td{overflow-wrap:anywhere}
.lotes-table td:last-child{white-space:nowrap}
.ir-job-input{flex:0 0 7rem!important;width:7rem}
.envio-exige-ti .small{font-size:.72rem}
.envio-erro-copiavel{cursor:pointer}
.envio-erro-copiavel::after{content:"\ea7a";font-family:tabler-icons!important;margin-left:.35rem;font-size:.85em;opacity:.55;vertical-align:-1px}
.envio-erro-copiavel:hover{text-decoration:underline}
.envio-erro-copiavel:hover::after{opacity:1}

/* Separador "ou" entre as duas ações da tela de acesso do cliente (entrar com senha ×
   receber código). Precisa ser visível: é ele que anuncia que existe um segundo caminho. */
.auth-divider{display:flex;align-items:center;gap:.75rem;color:#6c6a75;font-size:.82rem}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:#e4e0ec}

/* Conferência ao vivo da senha do cliente (tela "Crie sua senha"). Cinza = ainda falta,
   verde = cumprido; o ícone muda junto com a cor para não depender só dela. */
.password-rules{list-style:none;padding:0;margin:0;font-size:.85rem}
.password-rules li{display:flex;align-items:center;gap:.4rem;color:#6c6a75;line-height:1.7}
.password-rules li i{font-size:.95rem;flex:none}
.password-rules li.is-ok{color:#2f7a4d}

/* Auditoria — modal Detalhes: valores longos (corpo de e-mail) quebram linha e mantêm
   as quebras originais; antes em vermelho claro, depois em verde claro. */
.audit-diff td{white-space:pre-wrap;word-break:break-word;vertical-align:top}
.audit-diff td:first-child{width:28%}
.audit-diff .audit-de{background:#fdf0f0}
.audit-diff .audit-para{background:#eef8f1}

/* #etapa-modal fica por cima do modal da régua (ver app.js, showEtapaModal): precisa de
   z-index maior que o padrão do Bootstrap (1055 modal / 1050 backdrop) para os dois lados,
   senão fica escondido atrás da régua mesmo com display:block. */
#etapa-modal{z-index:1065}
.etapa-backdrop{z-index:1060}