/* ============================================================================
   TELAS ESCALAK (redesenho por tela), carregado DEPOIS de tema-escalak.css
   Pedido do Thiago em 05/11/2026: cada tela no padrão das referências X Wallet e AI-BL, com a marca Escalak.
   Só visual. Os tokens (--e-*) e as classes reaproveitáveis (.e-card, .e-btn, .e-chip, .e-selo, .e-kpi) vêm do
   tema-escalak.css. Cada tela é escopada por html[data-tela="<rota>"], que o render() do painel.js grava.

   Lote 1 (2.73): casca (menu lateral, barra do topo, cabeçalho da página), Dashboard e Hoje.
   Decisões de marca: o lima das referências é o ciano Escalak (#13BBF1, texto marinho sobre ele);
   o preto do X Wallet é o marinho #002861; títulos em Sora; números grandes em Fraunces.
   ========================================================================== */


/* ---------- casca: menu lateral (X Wallet: escuro, item ativo em pílula, respiro) ---------- */
.lado .lista{padding:6px 10px 14px}
.secao{padding:4px 0 8px}
.secao .rot{padding:14px 12px 6px;font-size:10px;letter-spacing:.12em;opacity:.7}
.lado .cli{min-height:40px;padding:8px 12px;gap:10px;border-radius:999px}
.lado .cli .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lado .cli .nm{font-size:13.5px}
.lado .cli .qt{min-width:22px;height:20px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;background:rgba(255,255,255,.1);line-height:1}
.lado .cli[aria-current="true"] .qt{background:var(--e-ciano);color:var(--e-marinho)}
.lado .marca{padding:20px 20px 14px}
.lado .pe{padding:12px 18px 16px}

/* ---------- casca: barra do topo (botões de ícone redondos, busca em pílula) ---------- */
.barraBt{border-radius:999px;min-width:40px;min-height:40px}
.barra .buscaBt{min-height:40px;padding:0 16px}

/* ---------- cabeçalho da página (AI-BL: título grande em duas linhas, a primeira fina) ---------- */
@media(min-width:901px){
  #main .topo{padding:30px 40px 18px;align-items:flex-end}
  #main .conteudo{padding:10px 40px 80px}
}
#main .topo .mig{font-family:var(--ui,"Sora",sans-serif);font-size:clamp(15px,.6vw + 11px,20px);font-weight:400;letter-spacing:-.01em;text-transform:none;color:var(--tx3);margin-bottom:2px}
#main .topo h2{font-size:clamp(26px,1.6vw + 16px,40px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
#main .topo .abas{background:var(--painel,#fff);border:1px solid var(--linha);box-shadow:var(--e-sombra-sm)}
#main .topo .bt.pri{padding:10px 20px}

/* ---------- card de seção: raio maior e marcador de título (AI-BL: quadradinho de cor antes do título) ---------- */
#main .cx{border-radius:var(--e-r)}   /* raio unificado em 22 (decisão da 2.71, não mudar) */
#main .cx > h3,#main .cx > summary h3,#main details.cx > summary{position:relative}
#main .cx > h3::before{content:"";display:inline-block;width:12px;height:12px;border-radius:4px;background:var(--e-ciano);margin-right:10px;vertical-align:-1px}

/* ============================== DASHBOARD ============================== */
/* KPIs: cartão branco, número grande fino, rótulo pequeno (AI-BL "19,365.29") */
html[data-tela="painel"] .kpis{gap:14px}
html[data-tela="painel"] .kpis .kpi{border-radius:var(--e-r);padding:20px 20px 18px;background:var(--painel,#fff);border:1px solid var(--linha);box-shadow:var(--e-sombra)}
html[data-tela="painel"] .kpis .kpi b{font-size:clamp(22px,1.2vw + 12px,32px);font-weight:600;white-space:nowrap}
@media(max-width:600px){html[data-tela="painel"] .kpis .kpi b{white-space:normal;overflow-wrap:anywhere}}
html[data-tela="painel"] .kpis.k6 .kpi b{font-size:clamp(19px,.8vw + 11px,26px)}
html[data-tela="painel"] .kpis .kpi span{color:var(--tx2)}
html[data-tela="painel"] .kpis .kpi small{color:var(--tx3)}
html[data-tela="painel"] .kpis .kpiBt:hover{transform:translateY(-1px);box-shadow:var(--e-sombra),0 0 0 1px var(--e-ciano)}
/* barras (AI-BL: barra escura, destaque em cor da marca) */
html[data-tela="painel"] .fgBar{height:14px;border-radius:999px;background:var(--sutil)}
html[data-tela="painel"] .fgBar i{border-radius:999px;background:var(--e-marinho)}
html[data-tela="painel"] .fg:first-child .fgBar i{background:var(--e-ciano)}
html:not([data-tema="claro"])[data-tela="painel"] .fgBar i{background:#3B5B86}
html:not([data-tema="claro"])[data-tela="painel"] .fg:first-child .fgBar i{background:var(--e-ciano)}
/* alerta de contratos: cartão com borda de aviso suave */
html[data-tela="painel"] .alertaCt .lp{border-radius:var(--e-r2);background:var(--sutil);padding:12px 16px}

/* ================================ HOJE ================================ */
html[data-tela="hoje"] details.cx > summary{min-height:44px;display:flex;align-items:center;gap:10px}
html[data-tela="hoje"] .sugLista > li{border-radius:var(--e-r2);background:var(--sutil);padding:14px 16px;margin-top:10px;border:0}
/* equipe do dia: cada pessoa em cartão cinza, a selecionada em branco com contorno ciano */
html[data-tela="hoje"] .equipeDia{gap:12px}
html[data-tela="hoje"] .pessoaDia{border-radius:var(--e-r2);background:var(--sutil);border:1px solid transparent;padding:14px 16px}
html[data-tela="hoje"] .pessoaDia.sel{background:var(--painel,#fff);border-color:var(--e-ciano);box-shadow:0 0 0 3px rgba(19,187,241,.14)}
html[data-tela="hoje"] .resumoHoje{gap:8px}
html[data-tela="hoje"] .prog{border-radius:999px;background:var(--sutil)}
html[data-tela="hoje"] .prog span{border-radius:999px;background:var(--e-ciano)}
/* itens de tarefa: linha arredondada com respiro */
html[data-tela="hoje"] .item{border-radius:var(--e-r2);padding:12px 14px}

/* ---------- celular ---------- */
@media(max-width:900px){
  .lado .cli{min-height:44px}
  #main .topo .mig{font-size:14px}
  #main .topo h2{font-size:26px}
}
@media(max-width:600px){
  html[data-tela="painel"] .kpis .kpi{padding:16px}
  html[data-tela="hoje"] .pessoaDia{padding:12px}
}
@media(prefers-reduced-motion:reduce){html[data-tela="painel"] .kpis .kpiBt:hover{transform:none}}

/* ============================================================================
   Lote 2 (2.74): KPIs de topo em todas as telas, Clientes, Carteira e ficha do cliente
   ========================================================================== */
/* KPIs de topo (fora de card) em toda tela: o mesmo cartão do Dashboard */
#main .conteudo > .kpis .kpi,#main #corpo > .kpis .kpi{border-radius:var(--e-r);padding:20px 20px 18px;background:var(--painel,#fff);border:1px solid var(--linha);box-shadow:var(--e-sombra)}
#main .conteudo > .kpis,#main #corpo > .kpis{gap:14px}
#main .conteudo > .kpis .kpi span,#main #corpo > .kpis .kpi span{color:var(--tx2)}
@media(max-width:600px){#main .conteudo > .kpis .kpi,#main #corpo > .kpis .kpi{padding:16px}}

/* tabela (lista de clientes e outras): linhas em pílula suave, cabeçalho discreto */
#main .tabela .tCab{font:600 10.5px var(--ui,"Sora",sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);padding:0 14px 6px}
#main .tabela .tLin:not(.tCab){border-top:0;border-radius:var(--e-rs);padding:8px 14px;min-height:50px}
#main .tabela .tLin:not(.tCab):nth-child(even){background:var(--sutil)}
#main .tabela .tLin:not(.tCab):hover{background:var(--hover)}
#main .filtroTab .busca{border-radius:999px;padding-left:18px}

/* ================================ CLIENTES ================================ */
html[data-tela="clientes"] .miniPainel{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

/* ================================ CARTEIRA ================================ */
/* colunas cinza (X Wallet), cartão branco arredondado dentro, contador em pílula */
html[data-tela="inicio"] .quadro{gap:16px}
html[data-tela="inicio"] .coluna{background:var(--sutil);border:0;border-radius:var(--e-r);padding:14px}
html[data-tela="inicio"] .coluna h4{font-size:13.5px;margin:2px 4px 12px}
html[data-tela="inicio"] .coluna h4 small{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 7px;border-radius:999px;background:var(--painel,#fff);color:var(--tx2);font-weight:600;margin-left:4px}
html[data-tela="inicio"] .cartao.mini{border-radius:var(--e-r2);border:1px solid transparent;box-shadow:var(--e-sombra-sm);padding:12px 14px}
html[data-tela="inicio"] .cartao.mini:hover{border-color:var(--e-ciano);box-shadow:var(--e-sombra)}
html[data-tela="inicio"] .miniPainel{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

/* ============================ FICHA DO CLIENTE ============================ */
/* "Agora nesta etapa" vira o cartão de destaque (o cartão cor da marca das referências): marinho com texto branco */
html[data-tela="cliente"] .cx.agora{background:var(--e-marinho);border:0;color:#fff;--tx:#FFFFFF;--tx2:rgba(234,244,255,.88);--tx3:rgba(234,244,255,.78);--linha:rgba(255,255,255,.16);--acento:#13BBF1;padding:26px 28px}
html[data-tela="cliente"] .cx.agora .mig{color:rgba(234,244,255,.78)}
html[data-tela="cliente"] .cx.agora h3{font-size:clamp(20px,1vw + 14px,26px);color:#fff}
html[data-tela="cliente"] .cx.agora .ajI{color:#fff;border-color:rgba(255,255,255,.4)}
html[data-tela="cliente"] .cx.agora a{color:#7FD8F8}
html[data-tela="cliente"] .cx.agora .faixaCt{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
/* KPIs da visão: grade que se ajusta (sem cartão órfão) */
html[data-tela="cliente"] #corpo > .kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
/* listas internas em blocos cinza */
html[data-tela="cliente"] .linhaItem{border-top:0;background:var(--sutil);border-radius:var(--e-rs);padding:12px 14px;margin-top:8px}
html[data-tela="cliente"] .g2{gap:var(--e-vao)}
/* abas da ficha e barra de etapas */
html[data-tela="cliente"] .topo360 .abas{background:var(--painel,#fff)}
html[data-tela="cliente"] .etapaBar{gap:6px;padding:2px 0 6px}
html[data-tela="cliente"] .etapaBar button{border:1px solid transparent;font-size:12px;padding:0 12px}
html[data-tela="cliente"] .etapaBar button:not(.f):not([aria-pressed="true"]){border-color:var(--linha);background:var(--painel,#fff)}
@media(max-width:600px){html[data-tela="cliente"] .cx.agora{padding:20px 18px}}

/* ============================================================================
   Lote 3 (2.75): Fechamentos, Semanal, Vendas, Contratos, Churn e Saídas
   ========================================================================== */
/* tabelas HTML (Churn, Saídas e outras): cabeçalho discreto, linhas com respiro e hover arredondado */
#main table.tabela th{font:600 10.5px var(--ui,"Sora",sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);padding:10px 12px;border-bottom:1px solid var(--linha)}
#main table.tabela td{padding:12px;border-bottom:1px solid var(--linha)}
#main table.tabela tbody tr:last-child td{border-bottom:0}
#main table.tabela tbody tr:hover td{background:var(--hover)}
#main table.tabela tbody tr:hover td:first-child{border-radius:var(--e-rs) 0 0 var(--e-rs)}
#main table.tabela tbody tr:hover td:last-child{border-radius:0 var(--e-rs) var(--e-rs) 0}
/* filtros em chip e busca em pílula em todas as telas do lote */
@media(min-width:901px){#main .chipf{min-height:36px}}   /* celular segue com 44 (tema-escalak.css) */
#main .linha .busca,#main .semFiltro .busca{border-radius:999px;padding-left:18px}

/* ============================== FECHAMENTOS ============================== */
html[data-tela="central"] .fechItem{border:1px solid transparent;border-radius:var(--e-r2);background:var(--sutil);padding:14px 16px}
html[data-tela="central"] .fechItem:hover{background:var(--hover)}
html[data-tela="central"] .fechItem.sel{background:var(--painel,#fff);border-color:var(--e-ciano);box-shadow:0 0 0 3px rgba(19,187,241,.14)}
html[data-tela="central"] .fechItem b{font-family:var(--num,"Fraunces",Georgia,serif);font-weight:600}
html[data-tela="central"] .cx .g3{gap:12px}

/* ================================ SEMANAL ================================ */
/* cada cliente em bloco cinza arredondado; passos em cartão branco dentro (AI-BL: cartão aninhado) */
html[data-tela="semanal"] .semLinha{border-top:0;background:var(--sutil);border-radius:var(--e-r2);padding:14px 16px;margin-top:10px}
html[data-tela="semanal"] .semLinha.foco{box-shadow:inset 0 0 0 2px var(--e-ciano);background:var(--sutil)}
html[data-tela="semanal"] .semPasso{border-radius:var(--e-rs);border-color:transparent;background:var(--painel,#fff);box-shadow:var(--e-sombra-sm)}
html[data-tela="semanal"] .semPasso.ok{border-color:var(--ok);background:var(--ok-s)}
html[data-tela="semanal"] .semPasso.meio{border-color:var(--av)}
html[data-tela="semanal"] .semPasso.hoje{border-color:var(--e-ciano)}
html[data-tela="semanal"] .semNome b{font-family:var(--ui,"Sora",sans-serif)}

/* ============================ VENDAS (funil) ============================ */
/* mesmo quadro da Carteira: colunas cinza, cartões brancos */
html[data-tela="funil"] .quadro{gap:16px}
html[data-tela="funil"] .coluna{background:var(--sutil);border:0;border-radius:var(--e-r);padding:14px}
html[data-tela="funil"] .coluna h4{font-size:13.5px;margin:2px 4px 12px}
html[data-tela="funil"] .coluna h4 small{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 7px;border-radius:999px;background:var(--painel,#fff);color:var(--tx2);font-weight:600;margin-left:4px}
html[data-tela="funil"] .cartao.mini{border-radius:var(--e-r2);border:1px solid transparent;box-shadow:var(--e-sombra-sm);padding:12px 14px}
html[data-tela="funil"] .cartao.mini:hover{border-color:var(--e-ciano);box-shadow:var(--e-sombra)}
html[data-tela="funil"] .vazioCol{border-radius:var(--e-rs)}
html[data-tela="funil"] .miniPainel{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

/* =============================== CONTRATOS =============================== */
html[data-tela="contratos"] .miniPainel{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

/* ============================= CHURN E SAÍDAS ============================= */
html[data-tela="churn"] .graficos{gap:var(--e-vao)}
html[data-tela="churn"] .graficos > *{border-radius:var(--e-r)}
html[data-tela="saidas"] .linhaItem{border-top:0;background:var(--sutil);border-radius:var(--e-rs);padding:12px 14px;margin-top:8px}
/* KPIs de topo sem cartão órfão: grade que se ajusta no desktop (o celular segue com 2 colunas do painel.css) */
@media(min-width:601px){#main .conteudo > .kpis:not(.k6),#main #corpo > .kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}

/* ============================================================================
   Lote 4 (2.76): Configurações (estilo CRM), Social Media, Sprints, Roadmaps, Checklists, Tutoriais e Registro
   ========================================================================== */
/* ========================== CONFIGURAÇÕES (CRM) ========================== */
/* menu de seções em cartão branco com item ativo em pílula marinho (X Wallet), conteúdo em cartão largo ao lado */
html[data-tela="config"] .cfgWrap{grid-template-columns:260px minmax(0,1fr);gap:24px}
html[data-tela="config"] .cfgNav{border-radius:var(--e-r);padding:14px;box-shadow:var(--e-sombra);border-color:var(--linha);gap:6px}
html[data-tela="config"] .cfgGrupo .rot{padding:12px 12px 6px;font:600 10px var(--ui,"Sora",sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--tx3)}
html[data-tela="config"] .cfgIt{border-radius:999px;padding:9px 14px;font-weight:500}
html[data-tela="config"] .cfgIt[aria-current="page"]{background:var(--e-marinho);color:#fff;font-weight:600}
html[data-tela="config"] .cfgIt[aria-current="page"] .chev{opacity:.9}
html:not([data-tema="claro"])[data-tela="config"] .cfgIt[aria-current="page"]{background:var(--e-ciano);color:var(--e-marinho)}
html[data-tela="config"] .cfgCab h3{font-size:clamp(20px,.8vw + 14px,24px);letter-spacing:-.02em}
html[data-tela="config"] .cfgCab p{font-size:13.5px}
html[data-tela="config"] .cfgTab th{font-size:10.5px;letter-spacing:.08em;padding:10px 12px;border-bottom:1px solid var(--linha)}
html[data-tela="config"] .cfgTab td{padding:13px 12px}
html[data-tela="config"] .cfgTab tbody tr:last-child td{border-bottom:0}
html[data-tela="config"] .cfgTab tbody tr:hover td{background:var(--sutil)}
html[data-tela="config"] .cfgPane .linhaItem{border-top:0;background:var(--sutil);border-radius:var(--e-rs);padding:12px 14px;margin-top:8px}

/* ============================== SOCIAL MEDIA ============================== */
html[data-tela="social"] .socGrade{gap:18px}
html[data-tela="social"] .socCard{border-radius:var(--e-r);border-color:transparent;box-shadow:var(--e-sombra);padding:12px}
html[data-tela="social"] .socCard:hover{border-color:var(--e-ciano)}
html[data-tela="social"] .socThumb{border-radius:var(--e-r2);overflow:hidden}

/* ================================ SPRINTS ================================ */
html[data-tela="sprints"] .cartoesSprint{gap:18px}
html[data-tela="sprints"] .spCardW .cartao{border-radius:var(--e-r);border-color:transparent;box-shadow:var(--e-sombra);padding:18px 20px}
html[data-tela="sprints"] .spCardW .prog{border-radius:999px;background:var(--sutil)}
html[data-tela="sprints"] .spCardW .prog span{border-radius:999px;background:var(--e-ciano)}

/* ================================ ROADMAPS ================================ */
html[data-tela="roadmaps"] .gBar{border-radius:999px}
html[data-tela="roadmaps"] .gBar i{border-radius:999px}
html[data-tela="roadmaps"] .gLinha:hover{background:var(--sutil);border-radius:var(--e-rs)}

/* =============================== CHECKLISTS =============================== */
html[data-tela="checklists"] .ckGrade{gap:16px}
html[data-tela="checklists"] .ckCli{border-radius:var(--e-r);padding:18px 20px}
html[data-tela="checklists"] .ckCli>summary{grid-template-columns:minmax(0,1fr)}   /* nome em cima, números embaixo: o nome não quebra palavra por palavra */
html[data-tela="checklists"] .ckNum{justify-self:start}
html[data-tela="checklists"] .ckCli .prog{border-radius:999px;background:var(--sutil)}
html[data-tela="checklists"] .ckCli .prog span{border-radius:999px;background:var(--e-ciano)}
html[data-tela="checklists"] .ckCli .linhaItem{border-top:0;background:var(--sutil);border-radius:var(--e-rs);padding:10px 12px;margin-top:6px}

/* =========================== REGISTRO E TUTORIAIS =========================== */
html[data-tela="registro"] .reg{border-left:0;border-radius:var(--e-rs);background:var(--sutil);padding:12px 16px;position:relative}
html[data-tela="registro"] .reg::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:999px;background:var(--e-ciano)}
/* a cor por tipo, que antes vinha da borda esquerda (painel.css), passa para o traço */
html[data-tela="registro"] .reg.alerta::before{background:var(--al)}
html[data-tela="registro"] .reg.decisao::before{background:var(--ok)}
html[data-tela="registro"] .reg.pendencia::before{background:var(--av)}
html[data-tela="tutoriais"] .miniPainel{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

@media(max-width:900px){
  html[data-tela="config"] .cfgWrap{grid-template-columns:1fr}
  html[data-tela="config"] .cfgIt{min-height:44px}
}
@media(max-width:600px){
  html[data-tela="checklists"] .ckCli,html[data-tela="sprints"] .spCardW .cartao{padding:16px}
}