/* easytrip — camada ADMIN/FINANCEIRO "Desk" (inspirada no ERPNext/Frappe Desk).
   Desktop-first; reusa os tokens de tokens.css. Vendedor continua mobile (app.css).
   Padroes: shell sidebar+topbar+breadcrumb, status dot+pill, list view, number cards. */

:root{
  --desk-side-w: 236px;
  --desk-top-h: 56px;
  /* Inter se instalada localmente (CSP bloqueia CDN); fallback = stack do sistema */
  --fonte-desk: "Inter", var(--fonte);
  /* Status semanticos: APELIDOS dos tokens, nunca hex proprio — assim a paleta
     inteira continua saindo de um arquivo so. */
  --st-gray:var(--txt-secundario); --st-info:var(--cor-info); --st-ok:var(--cor-secundaria);
  --st-warn:var(--cor-atencao); --st-danger:var(--cor-erro);
}

/* ---------- shell ---------- */
/* .desk NAO pode ter fundo opaco: chapava o --grad-fundo do body em toda a area admin. */
.desk{ display:flex; min-height:100vh; background:transparent; font-family:var(--fonte-desk); }
.desk-side{
  width:var(--desk-side-w); flex:0 0 var(--desk-side-w);
  position:sticky; top:0; height:100vh; overflow-y:auto;
  background:var(--cor-superficie); border-right:1px solid var(--borda);
  -webkit-backdrop-filter:var(--vidro-blur); backdrop-filter:var(--vidro-blur);
  display:flex; flex-direction:column; gap:2px; padding:14px 10px;
}
.desk-brand{ display:flex; align-items:center; gap:10px; padding:4px 8px 12px; font-weight:800; letter-spacing:-.02em; }
.desk-brand .brand-logo{ width:158px; max-width:100%; height:auto; display:block; }
.desk-brand .logo{ width:30px; height:30px; border-radius:9px; background:var(--grad-brand); display:flex; align-items:center; justify-content:center; color:var(--txt-sobre-cor); font-size:1rem; }
/* Rotulo de grupo e TEXTO, nao decoracao: --txt-suave reprovaria AA. */
.desk-nav-grupo{ color:var(--txt-secundario); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; padding:14px 12px 6px; }
.desk-nav a{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px;
  color:var(--txt-principal); font-size:.9rem; font-weight:500; line-height:1;
}
.desk-nav a .bi, .desk-nav a svg{ color:var(--txt-secundario); flex:0 0 auto; }
.desk-nav a:hover{ background:var(--cor-superficie-2); }
/* Azul de TEXTO e o --cor-primaria-3 (mais escuro); --cor-primaria e para preenchimento. */
.desk-nav a.ativo{ background:var(--cor-superficie-2); color:var(--cor-primaria-3); font-weight:600;
  box-shadow:inset 2px 0 0 var(--cor-primaria-3); }
.desk-nav a.ativo .bi, .desk-nav a.ativo svg{ color:var(--cor-primaria-3); }
/* rodape da sidebar: fixa "Sair" embaixo */
.desk-side-fim{ margin-top:auto; padding-top:8px; border-top:1px solid var(--borda); }
.desk-sair{ cursor:pointer; color:var(--txt-secundario); }
.desk-sair:hover{ background:var(--cor-superficie-2); color:var(--cor-erro); }
.desk-sair:hover svg{ color:var(--cor-erro); }

.desk-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

/* ---------- topbar (breadcrumb + busca) ---------- */
.desk-top{
  position:sticky; top:0; z-index:30; height:var(--desk-top-h);
  display:flex; align-items:center; gap:16px; padding:0 20px;
  background:var(--cor-superficie); border-bottom:1px solid var(--borda);
  /* sticky sobre conteudo rolando: sem o blur, o texto da pagina passa VISIVEL por tras */
  -webkit-backdrop-filter:var(--vidro-blur); backdrop-filter:var(--vidro-blur);
}
.desk-crumb{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--txt-secundario); }
.desk-crumb a{ color:var(--txt-secundario); }
.desk-crumb b{ color:var(--txt-principal); font-weight:600; }
.desk-crumb .sep{ color:var(--txt-suave); }
.desk-search{ flex:1 1 auto; max-width:420px; position:relative; }
.desk-search input{
  width:100%; height:36px; padding:0 12px 0 34px; border:1px solid var(--borda-forte);
  border-radius:9px; background:var(--cor-superficie-2); font-size:.88rem;
}
.desk-search .bi{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--txt-suave); }
.desk-top .avatar{
  width:34px; height:34px; border-radius:50%; margin-left:auto; flex:0 0 auto;
  background:var(--grad-brand); color:var(--txt-sobre-cor); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.82rem;
}

/* ---------- area de conteudo ---------- */
.desk-body{ padding:22px 24px 40px; max-width:1180px; width:100%; }
.desk-page-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.desk-page-head h1{ font-size:1.35rem; font-weight:700; margin:0; letter-spacing:-.02em; }
.desk-page-head .sub{ color:var(--txt-secundario); font-size:.85rem; }
.desk-page-head .acoes{ margin-left:auto; display:flex; gap:8px; }

/* ---------- botoes ---------- */
.btn-desk{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:9px;
  border:1px solid var(--borda-forte); background:var(--cor-superficie); color:var(--txt-principal);
  font-size:.87rem; font-weight:600; cursor:pointer; transition:filter .15s, background .15s; }
.btn-desk:hover{ background:var(--cor-superficie-2); }
.btn-desk:disabled{ opacity:.5; cursor:default; }
.btn-desk.primario{ background:var(--cor-primaria); border-color:var(--cor-primaria); color:var(--txt-sobre-cor); box-shadow:var(--sombra-sm); }
.btn-desk.primario:hover{ filter:brightness(1.06); background:var(--cor-primaria); }
/* Acao de destaque do painel: fundo em gradiente da marca, texto branco. */
.btn-desk.destaque{ background:var(--grad-acento); border-color:var(--cor-acento-2); color:var(--txt-sobre-cor); box-shadow:var(--sombra-sm); }
.btn-desk.destaque:hover{ filter:brightness(1.05); }
.btn-desk.ok{ border-color:var(--st-ok); color:var(--st-ok); }
.btn-desk.danger{ border-color:var(--st-danger); color:var(--st-danger); }
.btn-desk.warn{ border-color:var(--st-warn); color:var(--st-warn); }
.btn-icone{ width:36px; padding:0; justify-content:center; }

/* ---------- status: dot + pill (mapa unico, reusado em list/form/report) ---------- */
/* O pill ganha um tint da propria cor (~15%) derivado por color-mix a partir do token:
   assim nao entra hex novo e trocar o token troca tambem o fundo. Se o browser nao
   suportar color-mix a declaracao cai e sobra o texto na cor viva — continua legivel. */
.status{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; white-space:nowrap;
  padding:3px 9px; border-radius:var(--raio-pill); color:var(--st-gray);
  background:color-mix(in srgb, currentColor 15%, transparent); }
.status .dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:currentColor; }
.status.st-gray  .dot{ background:var(--st-gray);  } .status.st-gray  { color:var(--st-gray);  }
.status.st-info  .dot{ background:var(--st-info);  } .status.st-info  { color:var(--st-info);  }
.status.st-ok    .dot{ background:var(--st-ok);    } .status.st-ok    { color:var(--st-ok);    }
.status.st-warn  .dot{ background:var(--st-warn);  } .status.st-warn  { color:var(--st-warn);  }
/* BUG antigo: era ".status.st-danger.dot" (sem espaco) — casava um elemento com as 3 classes,
   entao o dot de "reprovado" nunca pegava a cor e caia no cinza. */
.status.st-danger .dot{ background:var(--st-danger);} .status.st-danger{ color:var(--st-danger);}

/* ---------- filter bar ---------- */
.filtros-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.filtros-bar select{ height:34px; border:1px solid var(--borda-forte); border-radius:8px; background:var(--cor-superficie);
  padding:0 30px 0 10px; font-size:.85rem; color:var(--txt-principal); }
.filtros-bar .cont{ margin-left:auto; color:var(--txt-secundario); font-size:.82rem; }
.badge-cont{ display:inline-flex; min-width:18px; height:18px; padding:0 5px; align-items:center; justify-content:center;
  border-radius:9px; background:var(--cor-primaria); color:var(--txt-sobre-cor); font-size:.7rem; font-weight:700; }

/* ---------- filtros (linha de selects/inputs estilo Desk) ---------- */
.filtros{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.filtros select, .filtros input:not([type=checkbox]):not([type=radio]){
  height:38px; border:1px solid var(--borda-forte); border-radius:9px; background:var(--cor-superficie);
  padding:0 12px; font-size:.86rem; color:var(--txt-principal); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.filtros input:not([type=checkbox]):not([type=radio]){ cursor:text; }
.filtros select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none; padding-right:32px;
  /* data-URI nao aceita var(): o hex abaixo e o --txt-secundario (#9FADC9) escapado.
     Se o token mudar, esta seta precisa ser trocada A MAO — o cinza antigo (#6B7280) sumia. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%239FADC9'%3E%3Cpath d='M3.2 5.5a.7.7 0 0 1 1 0L8 9.3l3.8-3.8a.7.7 0 1 1 1 1l-4.3 4.3a.7.7 0 0 1-1 0L3.2 6.5a.7.7 0 0 1 0-1z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; }
.filtros select:hover, .filtros input:not([type=checkbox]):not([type=radio]):hover{ border-color:var(--txt-suave); }
.filtros select:focus, .filtros input:not([type=checkbox]):not([type=radio]):focus{
  outline:none; border-color:var(--cor-primaria-3); box-shadow:var(--anel); }
.filtros .cont{ margin-left:auto; color:var(--txt-secundario); font-size:.85rem; white-space:nowrap; }
.filtros .cont b{ color:var(--txt-principal); }
/* "de / até" do período Personalizado (Periodo.datas, util.js) — vale nas duas barras */
.periodo-datas{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.periodo-ate{ font-size:.82rem; color:var(--txt-secundario); }
.filtros-bar input[type=date]{ height:34px; border:1px solid var(--borda-forte); border-radius:8px;
  background:var(--cor-superficie); padding:0 8px; font-size:.85rem; color:var(--txt-principal); }
.lista-mais{ display:flex; justify-content:center; padding:12px 0 4px; }
.campo-inline{ display:inline-flex; flex-direction:column; gap:4px; }
.campo-inline > label{ font-size:.72rem; font-weight:600; color:var(--txt-secundario); }
.desk-vazio-inline{ color:var(--txt-secundario); font-size:.82rem; }
/* ===== UI kit compartilhado (ui.js) ===== */
/* skeleton */
@keyframes sk-shine{ 0%{ background-position:-200px 0; } 100%{ background-position:calc(200px + 100%) 0; } }
/* No escuro o shimmer e branco-sobre-branco fraco: --cor-fundo-2 como parada apagava tudo. */
.sk-row .sk-bar{ display:block; height:12px; border-radius:6px;
  background:linear-gradient(90deg, var(--cor-superficie) 0px, var(--cor-superficie-2) 80px, var(--cor-superficie) 160px);
  background-size:200px 100%; animation:sk-shine 1.1s linear infinite; width:70%; }
.sk-row td:first-child .sk-bar{ width:90%; } .sk-row td:last-child .sk-bar{ width:40%; }
.sk-line{ padding:12px 4px; border-bottom:1px solid var(--borda); }
/* botao gravando voz (nova despesa) */
.btn.gravando{ color:var(--cor-erro); border-color:var(--cor-erro); animation:pulse-rec 1.1s ease-in-out infinite; }
@keyframes pulse-rec{ 0%,100%{ opacity:1; } 50%{ opacity:.6; } }
/* tela de erro 403/404 */
/* transparente para deixar o --grad-fundo do body aparecer atras do card */
.tela-erro{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:transparent; }
.erro-card{ background:var(--cor-superficie); border:1px solid var(--borda); border-radius:var(--raio-lg); box-shadow:var(--sombra-md);
  -webkit-backdrop-filter:var(--vidro-blur); backdrop-filter:var(--vidro-blur);
  padding:40px 36px; max-width:420px; text-align:center; }
.erro-codigo{ font-size:3.4rem; font-weight:800; letter-spacing:-.03em; color:var(--cor-primaria-3); line-height:1; }
.erro-titulo{ margin:8px 0 6px; font-size:1.3rem; }
.erro-msg{ color:var(--txt-secundario); margin:0 0 22px; }
.erro-acoes{ display:flex; gap:8px; justify-content:center; }
/* impressao (poor-man PDF dos relatorios): so o conteudo, sem chrome do app */
@media print{
  .desk-side, .desk-top, .bottomnav, .avatar-menu, .filtros, .acoes,
  .desk-search, .btn-desk, #toast, .modal-ov{ display:none !important; }
  body{ background:#fff !important; }
  .desk, .desk-main, .desk-body{ display:block !important; margin:0 !important; padding:0 !important; }
  /* o vidro tem de virar papel: sem tirar o backdrop-filter o card sai cinza na impressora */
  .card, .desk-list, .kpi, .diag-card, .erro-card{ box-shadow:none !important; break-inside:avoid;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .kpi-row{ display:flex !important; gap:12px; }
  a[href]:after{ content:""; }
}
/* empty state */
.empty-state{ text-align:center; padding:40px 16px; color:var(--txt-secundario); }
.empty-state .empty-ic{ font-size:2.4rem; opacity:.75; margin-bottom:8px; }
.empty-state .empty-ic svg{ color:var(--txt-suave); display:inline-block; }
.empty-state .empty-msg{ font-size:.95rem; }
/* spinner em botao */
.btn-desk.is-loading{ position:relative; color:transparent !important; pointer-events:none; }
.btn-desk.is-loading::after{ content:""; position:absolute; top:50%; left:50%; width:15px; height:15px; margin:-8px 0 0 -8px;
  /* trilha do spinner: preta a 25% desaparecia no escuro */
  border:2px solid var(--realce-forte); border-top-color:currentColor; border-radius:50%; color:var(--cor-primaria-3); animation:spin .7s linear infinite; }
.btn-desk.primario.is-loading::after{ border-color:rgba(255,255,255,.45); border-top-color:var(--txt-sobre-cor); }
.btn-desk.destaque.is-loading::after{ border-color:rgba(0,0,0,.25); border-top-color:var(--txt-sobre-cor); }
/* botao de perigo: --cor-erro e VERMELHO CLARO; texto branco nele reprova AA */
.btn-desk.perigo{ background:var(--cor-erro); color:var(--txt-sobre-cor); border-color:var(--cor-erro); }
.btn-desk.perigo:hover{ filter:brightness(1.06); }
/* campo invalido (validacao inline) */
.campo.invalido input, .campo.invalido select, input.invalido, select.invalido{ border-color:var(--cor-erro) !important; }
.campo .erro-campo{ color:var(--cor-erro); font-size:.76rem; margin-top:4px; display:none; }
.campo.invalido .erro-campo{ display:block; }
/* modal de confirmacao */
@keyframes modal-in{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
.modal-ov{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:20px; }
/* SOLIDO obrigatorio: com --cor-superficie (vidro) lia-se a pagina atraves do modal */
.modal{ background:var(--cor-superficie-solida); border:1px solid var(--borda-forte); border-radius:var(--raio-lg);
  box-shadow:var(--sombra-lg); width:100%; max-width:400px; padding:22px; animation:modal-in .18s ease both; }
.modal-tit{ font-weight:700; font-size:1.05rem; margin-bottom:6px; }
.modal-msg{ color:var(--txt-secundario); font-size:.92rem; margin-bottom:18px; }
.modal-acoes{ display:flex; gap:8px; justify-content:flex-end; }
/* Lista de opcoes do UI.escolher — cada canal e um alvo grande e explicito, com o
   destino embaixo. Ler "vai para ••••6834" antes de clicar evita o convite sair para
   o numero errado, que e o erro caro aqui (o link so pode ser usado uma vez). */
.modal-ops{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.modal-op{ display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:12px 14px; border:1px solid var(--borda-forte); border-radius:12px;
  background:var(--cor-superficie); color:var(--txt-principal); cursor:pointer;
  font:inherit; transition:border-color .14s, background .14s; }
.modal-op:hover{ background:var(--cor-superficie-2); border-color:var(--cor-primaria); }
.modal-op:focus-visible{ outline:2px solid var(--cor-primaria); outline-offset:2px; }
.modal-op .mo-ic{ width:38px; height:38px; flex:0 0 auto; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--cor-primaria) 12%, transparent); color:var(--cor-primaria); }
.modal-op .mo-txt{ display:flex; flex-direction:column; min-width:0; }
.modal-op .mo-txt b{ font-size:.94rem; font-weight:650; }
.modal-op .mo-txt span{ font-size:.8rem; color:var(--txt-secundario);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* menu do avatar (topbar) */
.avatar{ cursor:pointer; user-select:none; }
/* dropdown: SOLIDO, sem blur — translucido deixaria ler o conteudo da pagina por baixo */
.avatar-menu{ position:absolute; top:52px; right:16px; z-index:40; background:var(--cor-superficie-solida); border:1px solid var(--borda-forte);
  border-radius:var(--raio-lg); box-shadow:var(--sombra-lg); min-width:180px; padding:6px; animation:modal-in .14s ease both; }
.avatar-menu a{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; color:var(--txt-principal); font-size:.9rem; font-weight:500; }
.avatar-menu a:hover{ background:var(--cor-superficie-2); }
.avatar-menu a.sair:hover{ background:var(--cor-superficie-2); color:var(--cor-erro); }
.avatar-menu .sep{ height:1px; background:var(--borda); margin:4px 0; }
/* badge de contagem (menu Notificacoes) */
.nav-badge{ display:inline-flex; min-width:18px; height:18px; padding:0 5px; margin-left:auto; align-items:center; justify-content:center;
  border-radius:9px; background:var(--cor-erro); color:var(--txt-sobre-cor); font-size:.68rem; font-weight:700; }

/* grid de selects curados (config IA) */
.grid-cfg-ia{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:14px; }
.grid-cfg-ia .campo select{ width:100%; height:40px; border:1px solid var(--borda-forte); border-radius:9px; background:var(--cor-superficie); padding:0 12px; font-size:.9rem; color:var(--txt-principal); }
.grid-cfg-ia .campo select:focus{ outline:none; border-color:var(--cor-primaria-3); box-shadow:var(--anel); }
@media (max-width:720px){ .grid-cfg-ia{ grid-template-columns:1fr; } }
/* secao avancada colapsavel */
.card-avancado{ border:1px solid var(--borda); border-radius:var(--raio-lg); padding:12px 14px; background:var(--cor-superficie); }
.card-avancado > summary{ cursor:pointer; font-weight:600; color:var(--txt-secundario); font-size:.88rem; list-style:none; }
.card-avancado > summary::-webkit-details-marker{ display:none; }
.card-avancado > summary::before{ content:"▸ "; color:var(--txt-suave); }
.card-avancado[open] > summary::before{ content:"▾ "; }

/* ---------- list view (tabela densa) ---------- */
/* o blur fica no CONTAINER da lista; as linhas (item repetido) so ganham background */
/* overflow-x:auto (e nao hidden): no celular a tabela e mais larga que a tela e
   o hidden cortava as colunas sem barra de rolagem (Willian, 23/09/2026). O auto
   continua recortando o canto arredondado. */
.desk-list{ background:var(--cor-superficie); border:1px solid var(--borda); border-radius:14px; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; box-shadow:var(--sombra-sm);
  -webkit-backdrop-filter:var(--vidro-blur); backdrop-filter:var(--vidro-blur); }
table.desk-table{ width:100%; border-collapse:collapse; font-size:.87rem; }
/* O popup nativo do <select> herda o background do proprio select. Com superficie
   TRANSLUCIDA o navegador compoe sobre o branco padrao do popup e o texto claro some.
   Regra generica de proposito (e nao so .filtros select): assim o proximo select solto
   ja nasce legivel, sem repetir o defeito. */
select option, select optgroup{
  background: var(--cor-superficie-solida);
  color: var(--txt-principal);
}

.desk-table thead th{ text-align:left; padding:11px 14px; color:var(--txt-secundario); font-weight:600; font-size:.74rem;
  text-transform:uppercase; letter-spacing:.04em; background:var(--cor-superficie-2); border-bottom:1px solid var(--borda); }
/* Cabeçalho clicável (Aprovação): seta só na coluna ativa, para a tabela não virar
   um painel de setas. user-select off porque clique rápido selecionava o texto. */
.desk-table thead th.ordenavel{ cursor:pointer; user-select:none; white-space:nowrap; }
.desk-table thead th.ordenavel:hover{ color:var(--txt-principal); }
.desk-table thead th.ordenavel.asc::after{ content:' ▲'; font-size:.6rem; }
.desk-table thead th.ordenavel.desc::after{ content:' ▼'; font-size:.6rem; }
/* Seletor de viagem no detalhe da despesa: cabe na linha de dado, alinhado à direita. */
.sel-viagem{ height:32px; max-width:min(100%, 320px); border:1px solid var(--borda-forte); border-radius:8px;
  background:var(--cor-superficie); padding:0 26px 0 8px; font-size:.82rem; color:var(--txt-principal); }
.desk-table tbody td{ padding:12px 14px; border-bottom:1px solid var(--borda); vertical-align:middle; }
.desk-table tbody tr:last-child td{ border-bottom:none; }
/* Zebra: no escuro a borda de 1px quase some, entao a leitura da linha depende do stripe.
   Branco a ~2.5% (excecao permitida de realce sutil) fica abaixo do --cor-superficie-2 do hover. */
.desk-table tbody tr:nth-child(even){ background:var(--realce); }
.desk-table tbody tr:hover{ background:var(--cor-superficie-2); }
/* selecionada: mesmo tom do hover + faixa azul, senao "selecionado" e "sob o mouse" empatam */
.desk-table tbody tr.sel{ background:var(--cor-superficie-2); box-shadow:inset 3px 0 0 var(--cor-primaria-3); }
.desk-table .num{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
/* Checkbox da tabela Desk — custom (mesma linguagem do .chk do login), nao o nativo cru.
   Descobribilidade: fica levemente visivel sempre (.35), plena no hover/checked/header —
   opacity:0 escondia a selecao multipla de quem nunca passou o mouse (e de touch). */
.desk-table .chk{ width:38px; }
.desk-table .chk input{
  appearance:none; -webkit-appearance:none;
  width:16px; height:16px; margin:0;
  border:1.5px solid var(--borda-forte); border-radius:4px; background:var(--cor-superficie-2);
  cursor:pointer; position:relative; vertical-align:middle;
  opacity:.35; transition:opacity .12s, background .15s, border-color .15s;
}
.desk-table tbody tr:hover .chk input,
.desk-table .chk input:checked,
.desk-table .chk input:indeterminate,
.desk-table thead .chk input{ opacity:1; }
.desk-table .chk input:hover{ border-color:var(--cor-primaria-3); }
.desk-table .chk input:checked{ background:var(--cor-primaria-3); border-color:var(--cor-primaria-3); }
.desk-table .chk input:checked::after{
  content:""; position:absolute; left:4px; top:1px; width:5px; height:8px;
  /* o check cai sobre --cor-primaria-3, que e azul CLARO: risco branco sumiria */
  border:solid var(--txt-sobre-cor); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.desk-table .chk input:indeterminate{ background:var(--cor-primaria-3); border-color:var(--cor-primaria-3); }
.desk-table .chk input:indeterminate::after{
  content:""; position:absolute; left:3px; top:6px; width:8px; height:2px; background:var(--txt-sobre-cor); border-radius:1px;
}
.desk-table .chk input:focus-visible{ opacity:1; box-shadow:var(--anel); outline:none; }

/* Campo de texto dentro do modal (ex.: motivo da reprovacao) */
.modal .modal-campo{ display:block; margin:4px 0 14px; }
.modal .modal-campo span{
  display:block; font-size:12.5px; font-weight:600; color:var(--txt-secundario); margin-bottom:6px;
}
.modal .modal-campo textarea{
  width:100%; resize:vertical; min-height:64px;
  border:1px solid var(--borda-forte); border-radius:var(--raio-sm);
  padding:8px 10px; font:inherit; font-size:14px; color:var(--txt-principal);
  background:var(--cor-superficie);
}
.modal .modal-campo textarea:focus{ border-color:var(--cor-primaria-3); box-shadow:var(--anel); outline:none; }
.desk-table .cat-tag{ display:inline-flex; align-items:center; gap:7px; }
.desk-table .cat-dot{ width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
.desk-vazio{ padding:48px 16px; text-align:center; color:var(--txt-secundario); }

/* ---------- bulk action bar ---------- */
.bulk-bar{ position:sticky; bottom:0; z-index:25; display:none; align-items:center; gap:12px;
  /* era background:--txt-principal (quase branco) com texto branco: ilegivel. Barra fixa = SOLIDA. */
  margin-top:12px; padding:12px 16px; background:var(--cor-superficie-solida); color:var(--txt-principal);
  border:1px solid var(--borda-forte); border-radius:12px; box-shadow:var(--sombra-lg); }
.bulk-bar.on{ display:flex; }
.bulk-bar .n{ font-weight:700; }
.bulk-bar .btn-desk{ background:transparent; color:var(--txt-principal); border-color:var(--borda-forte); }
.bulk-bar .btn-desk.ok{ border-color:var(--st-ok); color:var(--st-ok); }
.bulk-bar .btn-desk.danger{ border-color:var(--st-danger); color:var(--st-danger); }

/* ---------- number cards (KPI) ---------- */
.kpi-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:20px; }
.kpi{ background:var(--cor-superficie); border:1px solid var(--borda); border-radius:14px; padding:16px 18px; box-shadow:var(--sombra-card);
  -webkit-backdrop-filter:var(--vidro-blur); backdrop-filter:var(--vidro-blur); }
.kpi .rot{ color:var(--txt-secundario); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
/* o numero e o unico ponto de cor forte do card: usa --cor-acento */
.kpi .val{ font-size:1.8rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; margin-top:4px; color:var(--cor-acento); }
.kpi .delta{ font-size:.8rem; font-weight:600; margin-top:2px; }
.kpi .delta.up{ color:var(--st-ok); } .kpi .delta.down{ color:var(--st-danger); }
.kpi.link{ cursor:pointer; transition:box-shadow .15s, transform .05s; } .kpi.link:hover{ box-shadow:var(--sombra-md); }

/* ---------- responsivo: sidebar (desktop) x bottomnav (mobile) ---------- */
@media (max-width:900px){
  .desk-side{ display:none; }
  .desk-body{ padding:16px 16px calc(var(--bottomnav-h) + 20px); }
  .desk-search{ display:none; }
  /* Busca que funciona (input com id, ligada no JS da tela) aparece também no celular —
     é onde o vendedor usa. No lugar dela sai a trilha "Início / ...": o título da página
     logo abaixo já diz onde ele está, e as duas não cabem nos 56px da barra. */
  .desk-search:has(input[id]){ display:block; min-width:0; max-width:none; }
  .desk-top:has(.desk-search input[id]) .desk-crumb{ display:none; }
}
@media (min-width:901px){ .bottomnav{ display:none !important; } }

/* ---------- home Desk: aviso da Eva + acoes de lancamento ---------- */
.lia{ display:flex; gap:10px; align-items:center; background:var(--cor-superficie); border:1px solid var(--borda);
  border-radius:12px; padding:12px 14px; margin-bottom:16px; box-shadow:var(--sombra-sm); font-size:.9rem; }
/* --cor-secundaria e verde CLARO: a inicial da Eva tem de ser escura */
.lia .b{ width:30px; height:30px; border-radius:50%; background:var(--cor-secundaria); color:var(--txt-sobre-cor);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.72rem; flex:0 0 auto; }
.secao-titulo{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--txt-secundario);
  font-weight:700; margin:22px 0 10px; }
.desk-actions{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.act{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--cor-superficie); border:1px solid var(--borda);
  border-radius:12px; box-shadow:var(--sombra-sm); cursor:pointer; color:var(--txt-principal); }
.act:hover{ border-color:var(--cor-primaria-3); }
.act .ic{ width:40px; height:40px; border-radius:10px; background:var(--cor-superficie-2); border:1px solid var(--borda);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex:0 0 auto; }
.act .tx{ display:flex; flex-direction:column; gap:1px; }
.act .tx b{ font-size:.92rem; } .act .tx small{ color:var(--txt-secundario); font-size:.78rem; }
.act.pri{ background:var(--grad-brand); border-color:var(--cor-primaria); color:var(--txt-sobre-cor); box-shadow:var(--sombra-md); }
.act.pri .tx small{ color:rgba(255,255,255,.85); }
.act.pri .ic{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.28); }

/* ---------- ROOT (administracao global) ---------- */
.root-badge{ display:inline-flex; align-items:center; gap:6px; font-size:.66rem; font-weight:800; letter-spacing:.04em;
  /* o roxo original nao tem token (--grad-root nao existe): usando a marca ate haver um */
  text-transform:uppercase; color:var(--txt-sobre-cor); background:var(--grad-brand);
  border:1px solid var(--borda-forte); padding:4px 10px; border-radius:var(--raio-pill); }
.alerta-item{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-bottom:1px solid var(--borda); font-size:.88rem; }
.alerta-item:last-child{ border-bottom:none; }
.alerta-ic .dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.alerta-ic.st-danger .dot{ background:var(--cor-erro); }
.alerta-ic.st-warn .dot{ background:var(--cor-atencao); }
.alerta-ic.st-info .dot{ background:var(--cor-info); }

/* ---------- relatorios: grid de charts + legenda + ranking ---------- */
.rel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:8px; }
.card-tit{ font-size:.85rem; font-weight:700; color:var(--txt-principal); margin-bottom:12px; }
.legenda{ display:flex; flex-direction:column; gap:8px; font-size:.82rem; min-width:150px; }
.leg-item{ display:flex; align-items:center; gap:8px; } .leg-item b{ margin-left:auto; color:var(--txt-secundario); }
.leg-dot{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.chart-legenda{ display:flex; flex-direction:column; gap:6px; min-width:160px; font-size:.86rem; }
.rank-item{ display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--borda); font-size:.88rem; }
.rank-item:last-child{ border-bottom:none; }
.rank-n{ width:22px; height:22px; border-radius:6px; background:var(--cor-superficie-2); border:1px solid var(--borda); display:flex; align-items:center; justify-content:center; font-size:.74rem; font-weight:700; color:var(--txt-secundario); flex:0 0 auto; }
.rank-nome{ flex:1 1 auto; } .rank-val{ font-weight:700; }
@media (max-width:900px){ .rel-grid{ grid-template-columns:1fr; } }
.ult-item{ display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--borda); }
.ult-item:last-child{ border-bottom:none; }
.ult-item[data-id]{ cursor:pointer; border-radius:8px; transition: background .15s ease; }
.ult-item[data-id]:hover{ background:var(--cor-superficie-2); }
.ult-item .cat-dot{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.ult-corpo{ flex:1 1 auto; min-width:0; } .ult-corpo b{ font-size:.88rem; } .ult-corpo .meta{ color:var(--txt-secundario); font-size:.76rem; }
.ult-dir{ text-align:right; white-space:nowrap; } .ult-dir .vlr{ font-weight:700; }

/* ---------- painel de diagnostico da IA (verificacao do agente Eva) ----------
   Port do ReduzziTech (atendimento.jsp): espaco/raio continuam 1:1 com a tela de origem.
   As cores literais foram removidas: espaco e raio seguem a referencia, mas a cor sai
   dos tokens para o bloco acompanhar a paleta como o resto do painel. */
.diag-card{ padding:0; overflow:hidden; border:1px solid var(--borda); border-radius:14px;
  box-shadow:var(--sombra-card); background:var(--cor-superficie);
  -webkit-backdrop-filter:var(--vidro-blur); backdrop-filter:var(--vidro-blur); }
.diag-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding:1rem 1.25rem; border-bottom:1px solid var(--borda); background:transparent; }
.diag-head-l{ display:flex; align-items:center; gap:.7rem; }
.diag-chip{ width:38px; height:38px; flex:0 0 38px; border-radius:12px; background:var(--cor-superficie-2); color:var(--cor-primaria-3);
  display:inline-flex; align-items:center; justify-content:center; }
.diag-title{ font-size:1.15rem; font-weight:700; letter-spacing:-.01em; color:var(--txt-principal); margin:0; }
.diag-sub{ color:var(--txt-secundario); font-size:.84rem; }
.diag-body{ padding:1rem 1.25rem .35rem; }
.diag-actions{ display:flex; gap:.5rem; padding:.85rem 1.25rem; border-top:1px solid var(--borda); background:var(--cor-superficie-2); }

.diag-grupo{ display:flex; align-items:center; gap:.5rem; margin:1.25rem 0 .55rem; font-size:.72rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--txt-secundario); }
.diag-grupo:first-child{ margin-top:0; }
.diag-grupo svg{ color:var(--cor-primaria-3); flex:0 0 auto; }
.diag-grupo::after{ content:""; flex:1; height:1px; background:var(--borda); }

/* item repetido de lista: so background+borda, NADA de backdrop-filter (mata a rolagem) */
.diag-item{ display:flex; align-items:flex-start; gap:.7rem; padding:.65rem .8rem; margin-bottom:.45rem;
  background:var(--cor-superficie); border:1px solid var(--borda); border-radius:10px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.diag-item:hover{ transform:translateX(3px); box-shadow:var(--sombra-sm); border-color:var(--borda-forte); }
.diag-item.erro{ border-left:3px solid var(--cor-erro); }
.diag-item.aviso{ border-left:3px solid var(--cor-atencao); }
.diag-status{ width:26px; height:26px; flex:0 0 26px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; font-size:.8rem; margin-top:.05rem; }
/* mesmo esquema do .status: leite da propria cor derivado do token, icone na cor viva */
.diag-item.ok    .diag-status{ color:var(--cor-secundaria); background:color-mix(in srgb, currentColor 16%, transparent); }
.diag-item.aviso .diag-status{ color:var(--cor-atencao);    background:color-mix(in srgb, currentColor 16%, transparent); }
.diag-item.erro  .diag-status{ color:var(--cor-erro);       background:color-mix(in srgb, currentColor 16%, transparent); }
.diag-item.pend  .diag-status{ color:var(--txt-secundario); background:var(--cor-superficie-2); }
.diag-item-body{ flex:1 1 auto; min-width:0; }
.diag-rotulo{ font-weight:600; font-size:.92rem; line-height:1.3; color:var(--txt-principal); }
.diag-detalhe{ font-size:.84rem; color:var(--txt-secundario); line-height:1.4; margin-top:.12rem; }

.diag-segredo{ display:flex; gap:.5rem; align-items:center; margin-top:.5rem; flex-wrap:wrap; }
.diag-seg-input{ flex:1 1 240px; max-width:340px; padding:.25rem .5rem; font-size:.875rem; line-height:1.5;
  border:1px solid var(--borda-forte); border-radius:.25rem; background:var(--cor-superficie-2); color:var(--txt-principal); }
.diag-seg-input:focus{ outline:none; border-color:var(--cor-primaria-3); box-shadow:var(--anel); }
.btn-desk.diag-seg-btn{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap;
  padding:.25rem .5rem; font-size:.875rem; font-weight:400; color:var(--cor-primaria-3); background:transparent;
  border:1px solid var(--cor-primaria-3); border-radius:.375rem; }
/* --cor-primaria-3 e azul CLARO: preenchido, o texto tem de escurecer */
.btn-desk.diag-seg-btn:hover{ background:var(--cor-primaria-3); color:var(--txt-sobre-cor); }

.diag-nota{ display:flex; gap:.45rem; align-items:flex-start; margin:1rem 0 .25rem; color:var(--txt-secundario);
  font-size:.82rem; line-height:1.45; }
.diag-nota svg{ flex:0 0 auto; margin-top:.15rem; }

/* conexao/login do WhatsApp (QR) */
.wa-login-row{ display:flex; align-items:center; gap:10px; }
.wa-dot{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; background:var(--st-gray); }
/* halo derivado do proprio token (nao ha --glow-* em tokens.css) */
.wa-dot.ok{ background:var(--st-ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--st-ok) 22%, transparent); }
.wa-dot.aviso{ background:var(--st-warn); box-shadow:0 0 0 3px color-mix(in srgb, var(--st-warn) 22%, transparent); }
.wa-dot.erro{ background:var(--st-danger); box-shadow:0 0 0 3px color-mix(in srgb, var(--st-danger) 22%, transparent); }
.wa-login-txt{ min-width:0; }
.wa-login-status{ font-weight:600; color:var(--txt-principal); font-size:.95rem; }
.wa-qr{ margin-top:12px; }
/* #fff aqui e LEGITIMO e nao vira token: o QR precisa da zona-quieta branca,
   senao o leitor do celular nao decodifica. Nao trocar por --cor-superficie. */
.wa-qr img{ width:220px; height:220px; display:block; padding:10px; background:#fff;
  border:1px solid var(--borda); border-radius:var(--raio); image-rendering:pixelated; }

/* Linha de tabela que abre o detalhe ao clique (aprovação e afins). */
.desk-table tbody tr.row-abre{ cursor:pointer; }
.desk-table tbody tr.row-abre:hover{ background:var(--cor-superficie-2); }

/* =====================================================================
   PLANO / CONTRATACAO (/app/assinatura)
   Duas colunas: o que esta incluido e a conta. Em telas estreitas viram
   uma so, com a conta EM CIMA — quem abre esta tela ja sabe o que o
   produto faz; o que ele quer saber e quanto custa.
   ===================================================================== */
.ass-grade{ display:grid; grid-template-columns:1.15fr .85fr; gap:16px; align-items:start; }
@media (max-width: 900px){
  .ass-grade{ grid-template-columns:1fr; }
  .ass-conta{ order:-1; }
}

/* faixa de estado (trial contando / vencido / ativo) */
.ass-faixa{ border:1px solid var(--borda); border-left-width:3px; border-radius:var(--raio);
  padding:12px 16px; margin-bottom:16px; background:var(--cor-superficie); }
.ass-faixa .ass-faixa-txt{ font-size:.94rem; }
.ass-faixa b{ margin-right:4px; }
.ass-faixa span{ color:var(--txt-secundario); }
.ass-faixa.ok{ border-left-color:var(--cor-secundaria); }
.ass-faixa.alerta{ border-left-color:var(--cor-atencao); }
.ass-faixa.perigo{ border-left-color:var(--cor-erro); }
.ass-faixa.perigo b{ color:var(--cor-erro); }

/* coluna do plano */
.ass-plano-cab{ margin-bottom:14px; }
.ass-plano-cab h2{ font-size:1.35rem; margin:6px 0 2px; }
.ass-selo{ display:inline-block; background:var(--cor-primaria-100); color:var(--cor-primaria);
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--raio-pill); }
.ass-itens{ list-style:none; padding:0; margin:0; }
.ass-itens li{ position:relative; padding:8px 0 8px 26px; border-bottom:1px solid var(--borda);
  font-size:.92rem; }
.ass-itens li:last-child{ border-bottom:0; }
.ass-itens li::before{ content:"✓"; position:absolute; left:2px; top:8px;
  color:var(--cor-secundaria); font-weight:800; }

/* coluna da conta */
.ass-conta-cab{ font-size:.78rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--txt-secundario); margin-bottom:10px; }
.ass-calc{ background:var(--cor-superficie-2); border:1px solid var(--borda);
  border-radius:var(--raio); padding:16px; }
.ass-calc-linha{ display:flex; align-items:baseline; gap:8px; }
.ass-qtd{ font-size:2.4rem; font-weight:800; line-height:1; color:var(--cor-primaria);
  font-variant-numeric:tabular-nums; }
.ass-calc-rot{ font-size:.9rem; color:var(--txt-secundario); }
.ass-calc-op{ margin-top:10px; font-size:.88rem; color:var(--txt-secundario);
  font-variant-numeric:tabular-nums; }
.ass-calc-total{ display:flex; justify-content:space-between; align-items:baseline;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--borda-forte); }
.ass-calc-total .rot{ font-size:.9rem; color:var(--txt-secundario); }
.ass-calc-total b{ font-size:1.5rem; font-variant-numeric:tabular-nums; }
.ass-nota{ font-size:.84rem; margin:12px 0 14px; }
.ass-formas{ font-size:.82rem; margin-top:10px; text-align:center; }
.ass-rodape{ margin-top:18px; font-size:.84rem; }

/* Aviso de fim de teste no topo de QUALQUER tela (montado por app.js). */
.trial-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 16px; border-radius:var(--raio); margin-bottom:14px;
  border:1px solid var(--borda); border-left:3px solid var(--cor-atencao);
  background:var(--cor-superficie); font-size:.9rem; }
.trial-bar.vencido{ border-left-color:var(--cor-erro); }
.trial-bar .txt{ flex:1 1 260px; }
.trial-bar .txt b{ margin-right:4px; }
.trial-bar .txt span{ color:var(--txt-secundario); }

/* Celebração do pagamento confirmado (/app/assinatura). Aparece uma vez, no
   retorno da tela do Asaas — o único instante em que o cliente está olhando
   e esperando uma resposta. */
.ass-celebra{ display:flex; align-items:flex-start; gap:14px; margin-bottom:16px;
  padding:16px 18px; border-radius:var(--raio);
  border:1px solid color-mix(in srgb, var(--cor-secundaria) 30%, transparent);
  background:color-mix(in srgb, var(--cor-secundaria) 10%, transparent); }
.ass-celebra-ico{ font-size:1.7rem; line-height:1; flex:0 0 auto; }
.ass-celebra b{ display:block; font-size:1.02rem; color:var(--cor-secundaria); margin-bottom:2px; }
.ass-celebra p{ margin:0; font-size:.92rem; color:var(--txt-secundario); }
.ass-celebra > div{ flex:1 1 auto; }
.ass-celebra button{ flex:0 0 auto; padding:0 10px; height:28px; font-size:.9rem; }

/* ---------- Receita no painel ROOT (26/08/2026) ----------
   Primeiro bloco da tela: com a cobranca ligada, "quanto entra por mes" passou a ser
   a pergunta de abertura do dia. Antes o painel so contava uso (usuarios, mensagens),
   e o dinheiro so aparecia abrindo o Asaas. */
.kpi-receita{ margin-bottom:18px; }
/* O MRR e o unico numero destacado: se tudo chama atencao, nada chama. */
.kpi-receita .kpi.destaque{ border-color:color-mix(in srgb, var(--cor-primaria) 35%, transparent);
  background:color-mix(in srgb, var(--cor-primaria) 6%, var(--cor-superficie)); }
.kpi-receita .kpi.destaque .val{ color:var(--cor-primaria-3, var(--cor-primaria)); }
/* Linha de apoio do cartao: contexto do numero, nunca um segundo numero disputando. */
.kpi-pe{ margin-top:4px; font-size:.72rem; color:var(--txt-suave); line-height:1.35; }
.kpi-pe.alerta{ color:var(--cor-atencao); font-weight:600; }