/* Painel da Dra. Elaine · grafite + dourado como acento */
:root{
  --gold:#C9A24B; --gold-light:#E6CE94; --gold-pale:#F5E9C8; --gold-deep:#8A6B2A;
  --gold-line:rgba(201,162,75,.28); --gold-wash:rgba(201,162,75,.08);
  --bg:#0F1114; --bg-2:#15181C; --surface:#1B1F25; --elev:#232831; --elev-2:#2B313B; --border:#2A3039; --border-2:#353C47;
  --ink:#FFFFFF; --ink-2:#E4E6EA; --ink-soft:#A1A8B3; --ink-dim:#8A919C;
  --borda-campo:#646C7A;       /* contorno dos campos: 3:1 contra o fundo */
  --ok:#6FBF95; --info:#7EA6F2; --alerta:#E9B260; --perigo:#E58C85;
  --quente:#E8875A; --morno:#E3B65C; --frio:#7EA6F2;
  --zap:#25D366;
  --serif:'Playfair Display', Didot, Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --raio:12px; --raio-sm:8px;
  --sombra:0 18px 50px rgba(0,0,0,.45);
  --lateral:248px;
  --acento:#E6CE94;            /* texto/ícone de destaque dourado */
  --erro-texto:#FFD6D2;
  --veu:rgba(5,6,8,.6);
  --avatar-ink:#111317;
}
/* versão clara da marca (paleta "claro" de instagram-posts/paleta.json) */
:root[data-tema="claro"]{
  --gold-line:rgba(138,107,42,.30); --gold-wash:rgba(201,162,75,.12);
  --bg:#F5F3EF; --bg-2:#FFFFFF; --surface:#FFFFFF; --elev:#F1EEE8; --elev-2:#E7E2D9; --border:#E3DED5; --border-2:#D3CDC1;
  --ink:#14161A; --ink-2:#2C3138; --ink-soft:#5F6670; --ink-dim:#656B74;
  --borda-campo:#8A8478;
  --ok:#2E8B5E; --info:#2F6FD6; --alerta:#B07A16; --perigo:#B8443B;
  --quente:#A3451A; --morno:#875E05; --frio:#285FBD;
  --sombra:0 18px 50px rgba(40,32,15,.14);
  --acento:#7A5E24;
  --erro-texto:#8E2F28;
  --veu:rgba(30,28,24,.35);
}
:root[data-tema="claro"] .so-escuro, :root:not([data-tema="claro"]) .so-claro{display:none !important}
:root[data-tema="claro"] .icone-lua, :root:not([data-tema="claro"]) .icone-sol{display:none}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink-2); font:400 14.5px/1.5 var(--sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
a{color:var(--acento); text-underline-offset:3px}
button, input, select, textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--acento); outline-offset:2px}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
h1,h2,h3{margin:0; color:var(--ink); font-weight:600}
h1{font:600 26px/1.2 var(--serif); letter-spacing:-.005em}
h2{font:600 17px/1.3 var(--sans)}
p{margin:0}

/* ── estrutura ── */
.app{display:grid; grid-template-columns:var(--lateral) 1fr; align-content:start; min-height:100svh}
.grade-2 > *{min-width:0}
.lateral{position:sticky; top:0; height:100svh; display:flex; flex-direction:column; gap:6px; padding:22px 14px; background:var(--bg-2); border-right:1px solid var(--border)}
.lateral-marca{display:flex; align-items:center; gap:10px; padding:0 8px 20px}
.lateral-marca img{height:auto}
.menu{display:flex; flex-direction:column; gap:2px; flex:1; overflow:auto}
.menu-titulo{margin:16px 10px 6px; font:600 10.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim)}
.menu a{display:flex; align-items:center; gap:11px; padding:9px 10px; white-space:nowrap; border-radius:var(--raio-sm); color:var(--ink-soft); text-decoration:none; font-weight:500}
.menu a svg{width:18px; height:18px; flex:none}
.menu a:hover{background:var(--surface); color:var(--ink-2)}
.menu a.ativo{background:var(--gold-wash); color:var(--acento); box-shadow:inset 0 0 0 1px var(--gold-line)}
.menu a.breve:not(.ativo):not(:hover){color:var(--ink-dim)}
.menu .etiqueta-breve{margin-left:auto; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--border-2); border-radius:999px; padding:1px 7px}
.menu .contador{margin-left:auto; min-width:22px; padding:1px 7px; border-radius:999px; font-size:11.5px; font-weight:600; text-align:center; color:#15171B; background:var(--gold-light)}
.usuario-caixa{display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--raio-sm); border:1px solid var(--border)}
.usuario-caixa > div{flex:1; min-width:0}
.usuario-caixa .nome{font-weight:600; color:var(--ink-2); font-size:13.5px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.usuario-caixa .papel{font-size:12px; color:var(--ink-dim)}
.usuario-caixa .tema-botao{margin-left:auto}

.principal{min-width:0; padding:28px clamp(16px, 3vw, 40px) 60px}
.cabecalho{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px}
.cabecalho p{color:var(--ink-soft); margin-top:4px}
.barra-movel{display:none}

/* ── componentes ── */
.botao{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:0 15px; border-radius:var(--raio-sm);
  border:1px solid var(--border-2); background:var(--surface); color:var(--ink-2); font-weight:500; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease, transform .1s ease}
.botao:hover{background:var(--elev); border-color:var(--border-2)}
.botao:active{transform:scale(.98)}
.botao:disabled{opacity:.55; cursor:not-allowed}
.botao svg{width:17px; height:17px; flex:none}
.botao--ouro{color:#15171B; border-color:transparent; background:linear-gradient(135deg, var(--gold-pale) 0%, var(--gold-light) 30%, var(--gold) 100%); font-weight:600}
.botao--ouro:hover{background:linear-gradient(135deg, var(--gold-pale) 0%, var(--gold-light) 40%, var(--gold) 100%); filter:brightness(1.05)}
.botao--zap{color:#fff; border-color:transparent; background:#15803D; font-weight:600}
.botao--zap:hover{background:#166534}
.botao--fantasma{background:transparent; border-color:transparent; color:var(--ink-soft)}
.botao--fantasma:hover{background:var(--surface); color:var(--ink-2)}
.botao--perigo{color:var(--perigo); border-color:rgba(229,140,133,.35); background:transparent}
.botao--perigo:hover{background:rgba(229,140,133,.08)}
.botao--sm{min-height:32px; padding:0 11px; font-size:13px}
.botao--icone{width:36px; padding:0}

.campo{display:flex; flex-direction:column; gap:6px}
.campo > span{font-size:12.5px; font-weight:500; color:var(--ink-soft)}
.entrada{width:100%; min-height:40px; padding:9px 12px; border-radius:var(--raio-sm); border:1px solid var(--borda-campo); background:var(--bg-2); color:var(--ink); outline:none; transition:border-color .15s ease, box-shadow .15s ease}
.entrada:focus{border-color:var(--acento); box-shadow:0 0 0 3px var(--gold-line)}
.entrada::placeholder{color:var(--ink-dim)}
textarea.entrada{min-height:84px; resize:vertical}
select.entrada{cursor:pointer}
.ajuda{font-size:12px; color:var(--ink-dim)}

.cartao{background:var(--surface); border:1px solid var(--border); border-radius:var(--raio); padding:18px}
.cartao-titulo{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}

.selo{display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; border:1px solid transparent}
.selo--quente{color:var(--quente); background:rgba(232,135,90,.12); border-color:rgba(232,135,90,.3)}
.selo--morno{color:var(--morno); background:rgba(227,182,92,.12); border-color:rgba(227,182,92,.3)}
.selo--frio{color:var(--frio); background:rgba(126,166,242,.12); border-color:rgba(126,166,242,.3)}
.selo--neutro{color:var(--ink-soft); background:var(--elev); border-color:var(--border-2)}
.ponto{width:8px; height:8px; border-radius:50%; flex:none}
.etiqueta{display:inline-block; padding:1px 8px; border-radius:6px; font-size:11.5px; color:var(--ink-soft); background:var(--elev); border:1px solid var(--border)}

.avatar{display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:50%; font:600 13px/1 var(--sans); color:var(--avatar-ink); background:var(--gold-light)}
.avatar--g{width:46px; height:46px; font-size:16px}

/* ── indicadores ── */
.indicadores{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px; margin-bottom:22px}
.indicador{padding:16px 18px; border-radius:var(--raio); background:var(--surface); border:1px solid var(--border)}
.indicador .rotulo{font-size:12.5px; color:var(--ink-soft)}
.indicador .valor{margin-top:6px; font:600 30px/1.1 var(--sans); color:var(--ink); font-variant-numeric:tabular-nums}
.indicador .nota{margin-top:4px; font-size:12px; color:var(--ink-dim)}
.indicador--ouro{border-color:var(--gold-line); background:linear-gradient(180deg, rgba(201,162,75,.08), var(--surface))}
.indicador--ouro .valor{color:var(--acento)}

/* ── filtros e lista de leads ── */
.filtros{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px}
.filtros .busca{flex:1 1 260px; position:relative}
.filtros .busca svg{position:absolute; left:11px; top:50%; translate:0 -50%; width:16px; height:16px; color:var(--ink-dim)}
.filtros .busca .entrada{padding-left:34px}
.filtros select.entrada{width:auto; min-width:150px}

.lista-leads{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--raio); overflow:hidden; background:var(--surface)}
.linha-lead{display:grid; grid-template-columns:minmax(220px, 1.6fr) minmax(130px, .8fr) minmax(170px, 1fr) minmax(150px, .9fr) auto; align-items:center; gap:14px;
  padding:12px 16px; border-top:1px solid var(--border); cursor:pointer; transition:background-color .12s ease}
.linha-lead:first-child{border-top:0}
.linha-lead:hover{background:var(--elev)}
.lead-ident{display:flex; align-items:center; gap:12px; min-width:0}
.lead-abrir{min-height:44px; padding:0; border:0; background:none; text-align:left; cursor:pointer; font:inherit; color:inherit; border-radius:var(--raio-sm)}
.lead-abrir .lead-nome, .lead-abrir .lead-sub{display:block}
.lead-abrir > span:last-child{min-width:0}
.lead-nome{font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lead-sub{font-size:12.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lead-tags{display:flex; flex-wrap:wrap; gap:4px}
.lead-acoes{display:flex; gap:6px; justify-content:flex-end}
.etapa-select{min-height:32px; padding:4px 8px; font-size:13px; max-width:100%}
.cabeca-lista{display:grid; grid-template-columns:minmax(220px, 1.6fr) minmax(130px, .8fr) minmax(170px, 1fr) minmax(150px, .9fr) auto; gap:14px; padding:10px 16px;
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); background:var(--bg-2); border-bottom:1px solid var(--border)}
.paginacao{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; color:var(--ink-soft); font-size:13px}

.vazio{display:flex; flex-direction:column; align-items:center; gap:10px; padding:56px 20px; text-align:center; color:var(--ink-soft)}
.vazio svg{width:40px; height:40px; color:var(--gold)}
.vazio h3{font:600 17px/1.3 var(--sans); color:var(--ink-2)}
.carregando{display:grid; place-items:center; padding:60px}
.girando{width:28px; height:28px; border-radius:50%; border:2px solid rgba(201,162,75,.2); border-top-color:var(--gold); animation:gira .9s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* ── gaveta (ficha do lead) e modal ── */
.veu{position:fixed; inset:0; z-index:40; background:var(--veu); animation:aparece .18s ease both}
.gaveta{position:fixed; top:0; right:0; bottom:0; z-index:41; width:min(620px, 100vw); display:flex; flex-direction:column; background:var(--bg-2); border-left:1px solid var(--border); box-shadow:var(--sombra); animation:desliza .25s cubic-bezier(.16,.84,.3,1) both}
.gaveta-topo{display:flex; align-items:flex-start; gap:14px; padding:20px 22px; border-bottom:1px solid var(--border)}
.gaveta-topo .titulos{flex:1; min-width:0}
.gaveta-topo h2{font:600 21px/1.25 var(--serif); color:var(--ink)}
.gaveta-corpo{flex:1; overflow:auto; padding:18px 22px 40px; display:flex; flex-direction:column; gap:18px}
.gaveta-acoes{display:flex; flex-wrap:wrap; gap:8px}
.abas{display:flex; gap:4px; border-bottom:1px solid var(--border)}
.abas button{padding:9px 12px; border:0; background:none; color:var(--ink-soft); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; font-weight:500}
.abas button.ativa{color:var(--acento); border-bottom-color:var(--acento)}
.grade-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.qa{display:flex; flex-direction:column; gap:12px}
.qa-item{padding:12px 14px; border-radius:var(--raio-sm); background:var(--surface); border:1px solid var(--border)}
.qa-item .p{font-size:12.5px; color:var(--ink-soft)}
.qa-item .r{margin-top:3px; color:var(--ink); font-weight:500}
.linha-tempo{display:flex; flex-direction:column}
.evento{display:grid; grid-template-columns:22px 1fr; gap:10px; padding:10px 0; border-top:1px solid var(--border)}
.evento:first-child{border-top:0}
.evento .marca{width:10px; height:10px; margin:5px 0 0 4px; border-radius:50%; background:var(--gold)}
.evento .marca--nota{background:var(--info)}
.evento .marca--whatsapp{background:var(--zap)}
.evento .marca--etapa{background:var(--alerta)}
.evento .texto{color:var(--ink-2); white-space:pre-wrap; word-break:break-word}
.evento .quando{font-size:12px; color:var(--ink-dim)}

.modal-caixa{position:fixed; z-index:41; left:50%; top:50%; translate:-50% -50%; width:min(460px, calc(100vw - 32px)); padding:22px; border-radius:var(--raio); background:var(--bg-2); border:1px solid var(--border); box-shadow:var(--sombra); animation:aparece .18s ease both}
.modal-caixa h2{font:600 19px/1.3 var(--serif); margin-bottom:8px}
.modal-acoes{display:flex; justify-content:flex-end; gap:8px; margin-top:18px}

.avisos{position:fixed; z-index:60; left:50%; bottom:22px; translate:-50% 0; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none}
.aviso{pointer-events:auto; padding:11px 16px; border-radius:10px; background:var(--elev-2); color:var(--ink); border:1px solid var(--border-2); box-shadow:var(--sombra); font-weight:500; animation:sobe .2s ease both}
.aviso--erro{border-color:rgba(229,140,133,.45); color:var(--erro-texto)}
.aviso--ok{border-color:rgba(111,191,149,.45)}
@keyframes aparece{from{opacity:0}}
@keyframes desliza{from{transform:translateX(30px); opacity:0}}
@keyframes sobe{from{transform:translateY(10px); opacity:0}}

/* ── formulários ── */
.grade-forms{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px}
.form-cartao{display:flex; flex-direction:column; gap:14px}
.form-cartao h3{font:600 17px/1.35 var(--serif); color:var(--ink)}
.form-numeros{display:flex; gap:18px; color:var(--ink-soft); font-size:13px}
.form-numeros b{display:block; font:600 20px/1.2 var(--sans); color:var(--ink)}
.link-copiar{display:flex; gap:6px}
.link-copiar .entrada{font-size:12.5px; color:var(--ink-soft)}
.interruptor{position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none}
.interruptor input{position:absolute; opacity:0; width:1px; height:1px}
.interruptor .trilho{width:40px; height:22px; border-radius:999px; background:var(--elev-2); border:1px solid var(--border-2); position:relative; transition:background-color .2s ease}
.interruptor .trilho::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--ink-soft); transition:transform .2s ease, background-color .2s ease}
.interruptor input:checked + .trilho{background:rgba(111,191,149,.25); border-color:rgba(111,191,149,.5)}
.interruptor input:checked + .trilho::after{transform:translateX(18px); background:var(--ok)}
.interruptor input:focus-visible + .trilho{outline:2px solid var(--acento); outline-offset:2px}

/* ── acesso (login) ── */
.acesso{min-height:100svh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(70vmax 60vmax at 100% 0%, rgba(201,162,75,.10), transparent 60%), var(--bg)}
.acesso-caixa{width:min(400px, 100%); padding:30px; border-radius:16px; background:var(--bg-2); border:1px solid var(--border); box-shadow:var(--sombra)}
.acesso-caixa .selo-marca{display:block; width:64px; height:64px; margin:0 auto 14px}
.acesso-caixa h1{text-align:center; font-size:24px}
.acesso-caixa > p{text-align:center; color:var(--ink-soft); margin:6px 0 22px}
.acesso-caixa form{display:flex; flex-direction:column; gap:14px}
.acesso-caixa .botao{min-height:44px; margin-top:4px}
.mensagem-erro{padding:10px 12px; border-radius:var(--raio-sm); background:rgba(229,140,133,.1); border:1px solid rgba(229,140,133,.3); color:var(--erro-texto); font-size:13.5px}

/* ── botão de tema ── */
.tema-botao{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:var(--raio-sm); border:1px solid var(--border-2); background:transparent; color:var(--acento); cursor:pointer; flex:none}
.tema-botao:hover{background:var(--surface)}
.tema-botao svg{width:17px; height:17px}
.acesso .tema-botao{position:fixed; top:16px; right:16px}

/* ── responsivo ── */
@media (max-width:1100px){
  .linha-lead, .cabeca-lista{grid-template-columns:minmax(200px, 1.6fr) minmax(150px, 1fr) minmax(140px, .9fr) auto}
  .col-tags{display:none}
}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  /* fechado, o menu sai também da ordem do Tab e do leitor de tela */
  .lateral{position:fixed; z-index:50; left:0; width:min(280px, 84vw); transform:translateX(-100%); visibility:hidden;
    transition:transform .25s ease, visibility 0s linear .25s; box-shadow:var(--sombra)}
  .lateral.aberta{transform:none; visibility:visible; transition:transform .25s ease, visibility 0s}
  .barra-movel{display:flex; align-items:center; justify-content:space-between; gap:10px; position:sticky; top:0; z-index:30; padding:10px 14px; background:var(--bg-2); border-bottom:1px solid var(--border)}
  .barra-movel img{height:auto}
  .principal{padding:20px 14px 60px}
  /* no celular o aviso aparece no alto, longe dos botões do fim da página */
  .avisos{top:calc(env(safe-area-inset-top) + 70px); bottom:auto}
  .cabeca-lista{display:none}
  .linha-lead{grid-template-columns:1fr auto; gap:10px}
  .col-etapa, .col-temp{display:none}
  .grade-2{grid-template-columns:1fr}
}
/* ── gráfico por dia (componentes/grafico.js) ── */
.grafico{position:relative; width:100%; min-width:0; overflow:hidden; outline-offset:4px}
.grafico svg{display:block; overflow:visible}
.grafico-grade{stroke:var(--border); stroke-width:1}
.grafico-eixo{fill:var(--ink-dim); font:500 11px/1 var(--sans); font-variant-numeric:tabular-nums}
.grafico-foco{fill:var(--gold-wash)}
.grafico-legenda{display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 10px; padding:0; list-style:none; font-size:12.5px; color:var(--ink-soft)}
.grafico-legenda li{display:inline-flex; align-items:center; gap:7px}
.grafico-cor{display:inline-block; width:10px; height:10px; border-radius:3px; flex:none}
.grafico-dica{position:absolute; top:6px; transform:translateX(-50%); z-index:2; pointer-events:none; display:flex; flex-direction:column; gap:3px;
  padding:8px 10px; border-radius:var(--raio-sm); background:var(--elev-2); border:1px solid var(--border-2); box-shadow:var(--sombra); font-size:12.5px; color:var(--ink-2); white-space:nowrap}
.grafico-dica strong{color:var(--ink); font-weight:600}
.grafico-dica span{display:flex; align-items:center; gap:6px}
.grafico-dica b{font-variant-numeric:tabular-nums; color:var(--ink)}

/* toque: alvos com pelo menos 44px */
@media (pointer:coarse){
  .botao, .botao--sm, .entrada, .etapa-select, .menu a{min-height:44px}
  .botao--icone, .tema-botao{width:44px; height:44px}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }