/* CRM Karyna Saab — identidade extraída de karynasaab.com.br (18/09/2026).
   Usar SEMPRE as variáveis. Dourado é ênfase, não enchimento: o primário é preto. */
:root{
  --preto:#0D0D0D; --preto-2:#1A1917; --preto-3:#2A2825;
  --ouro:#C38D37; --ouro-claro:#E2A646; --ouro-suave:rgba(195,141,55,.12);
  --creme:#F9F4EB; --bege:#EBE5DE; --branco:#FFFFFF;
  --texto:#0D0D0D; --texto-2:#7A7A7A; --texto-3:#A8A29A;
  --ok:#2F7D5B; --atencao:#C38D37; --erro:#B3261E;
  --raio:12px; --raio-p:8px;
  --fonte:"Manrope",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:var(--fonte);font-weight:500;font-size:14px;line-height:1.5;color:var(--texto);background:var(--creme);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}

/* Assinatura tipográfica do site: rótulo pequeno em caixa alta e espaçado */
.olho{font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--ouro)}
.rotulo{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--texto-2)}
h1{font-size:24px;font-weight:500;letter-spacing:-.2px}
h2{font-size:17px;font-weight:600}

/* ── Estrutura ── */
.app{display:flex;min-height:100dvh}
.lateral{width:232px;flex:none;background:var(--preto);color:#fff;display:flex;flex-direction:column;padding:26px 14px 18px;position:sticky;top:0;height:100dvh}
.lateral .logo{width:150px;margin:0 8px 30px;display:block}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--raio-p);color:rgba(255,255,255,.62);font-size:13px;font-weight:600;letter-spacing:.3px;border:0;background:none;width:100%;text-align:left;transition:background .15s,color .15s}
.nav-item:hover{background:var(--preto-2);color:#fff}
.nav-item.ativo{background:var(--preto-3);color:var(--ouro-claro)}
.nav-item svg{flex:none}
.lateral .pe{margin-top:auto;padding:12px;border-top:1px solid var(--preto-3);font-size:12px;color:rgba(255,255,255,.5)}
.main{flex:1;min-width:0;padding:30px 32px}   /* min-width:0: sem isso o quadro cria rolagem horizontal na página */
.topo{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}

/* ── Botões (todo botão tem hover) ── */
.btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 20px;border-radius:999px;border:1px solid var(--preto);background:var(--preto);color:#fff;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--ouro);border-color:var(--ouro)}
.btn-ghost{background:transparent;color:var(--preto);border-color:var(--bege)}
.btn-ghost:hover{background:var(--branco);border-color:var(--ouro);color:var(--ouro)}
.ib{width:38px;height:38px;border-radius:50%;border:1px solid var(--bege);background:var(--branco);display:inline-flex;align-items:center;justify-content:center;color:var(--texto-2);transition:all .15s}
.ib:hover{border-color:var(--ouro);color:var(--ouro)}

/* ── Campos ── */
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.campo input,.campo select,.campo textarea{height:46px;padding:0 14px;border:1px solid var(--bege);border-radius:var(--raio-p);background:var(--branco);font-size:16px;outline:0;transition:border-color .15s,box-shadow .15s}
.campo textarea{height:auto;padding:12px 14px;min-height:88px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--ouro);box-shadow:0 0 0 3px var(--ouro-suave)}
input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--branco) inset}

/* ── Indicadores ── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:26px}
.kpi{background:var(--branco);border:1px solid var(--bege);border-radius:var(--raio);padding:18px 20px}
.kpi b{display:block;font-size:26px;font-weight:500;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi b.ouro{color:var(--ouro)}
.kpi small{color:var(--texto-2);font-size:12px}

/* ── Funil (kanban) ── */
.quadro{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:14px;overflow-x:auto;padding-bottom:12px}
.col{background:rgba(235,229,222,.45);border-radius:var(--raio);padding:12px;display:flex;flex-direction:column;min-height:420px}
.col-topo{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 12px}
.col-topo .n{font-size:12px;font-weight:700;color:var(--texto-2);font-variant-numeric:tabular-nums}
.col.auto .col-topo .rotulo::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ouro);margin-left:8px;vertical-align:middle} /* etapa que vem da Amplimed */
.col-lista{display:flex;flex-direction:column;gap:10px;overflow-y:auto;overscroll-behavior-y:contain} /* nunca 'contain' nos dois eixos: mata a rolagem lateral do quadro */
.card{background:var(--branco);border:1px solid var(--bege);border-radius:var(--raio);padding:14px;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.card:hover{border-color:var(--ouro);transform:translateY(-1px);box-shadow:0 6px 18px rgba(13,13,13,.06)}
.card .nome{font-weight:600;font-size:14px}
.card .proc{color:var(--texto-2);font-size:12px;margin-top:2px}
.card .pe{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:8px}
.card.alerta{border-left:3px solid var(--atencao)}
.card.atraso{border-left:3px solid var(--erro)}
.selo{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;background:var(--creme);color:var(--texto-2)}
.selo.google{background:#EEF3FB;color:#2B5BA8}
.selo.meta{background:#EFEDFB;color:#4B3FB0}
.selo.ouro{background:var(--ouro-suave);color:var(--ouro)}
.tempo{font-size:12px;color:var(--texto-2);font-variant-numeric:tabular-nums}
.tempo.atraso{color:var(--erro);font-weight:700}

/* ── Listas (toda linha tem hover, clicável ou não) ── */
.lista{background:var(--branco);border:1px solid var(--bege);border-radius:var(--raio);overflow:hidden}
.linha{display:flex;align-items:center;gap:14px;padding:14px 18px;border-top:1px solid var(--bege);transition:background .12s}
.linha:first-child{border-top:0}
.linha:hover{background:var(--creme)}

/* ── Gaveta (sempre gaveta, nunca modal central) ── */
.veu{position:fixed;inset:0;background:rgba(13,13,13,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:90}
.gaveta{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);background:var(--creme);transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:95;display:flex;flex-direction:column}
.gaveta-topo{background:var(--preto);color:#fff;padding:22px 24px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.gaveta-topo .olho{color:var(--ouro-claro)}
.gaveta-corpo{flex:1;min-height:0;overflow-y:auto;padding:24px}
.gaveta-pe{padding:16px 24px;border-top:1px solid var(--bege);background:var(--branco);display:flex;gap:10px;justify-content:flex-end}
body.gaveta-on .veu{opacity:1;pointer-events:auto}
body.gaveta-on .gaveta{transform:none}

/* ── Linha do tempo da ficha ── */
.tl{list-style:none;padding:0;border-left:1px solid var(--bege);margin-left:6px}
.tl li{position:relative;padding:0 0 18px 20px;font-size:13px}
.tl li::before{content:"";position:absolute;left:-4px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--ouro)}
.tl time{display:block;font-size:11px;color:var(--texto-3);letter-spacing:.5px}

/* ── Tooltip próprio (ícone sem texto SEMPRE tem data-tip) ── */
[data-tip]{position:relative}
[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--preto);color:#fff;font-size:11px;font-weight:600;letter-spacing:.3px;padding:6px 10px;border-radius:6px;white-space:nowrap;z-index:99;pointer-events:none}

/* ── Login (fundo preto: é onde o logo branco funciona) ── */
.login{min-height:100dvh;background:var(--preto);display:flex;align-items:center;justify-content:center;padding:24px}
.login-cx{width:min(380px,100%);text-align:center}
.login-cx .logo{width:220px;margin:0 auto 34px;display:block}
.login-cx .campo{text-align:left}
.login-cx .rotulo{color:rgba(255,255,255,.55)}
.login-cx .campo input{background:var(--preto-2);border-color:var(--preto-3);color:#fff}
.login-cx input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--preto-2) inset;-webkit-text-fill-color:#fff}
.login-cx .btn{width:100%;justify-content:center;background:var(--ouro);border-color:var(--ouro);height:48px}
.login-cx .btn:hover{background:var(--ouro-claro);border-color:var(--ouro-claro);color:var(--preto)}

/* ── Celular: menu vira barra inferior ── */
@media (max-width:820px){
  .app{flex-direction:column}
  .lateral{position:fixed;bottom:0;top:auto;left:0;right:0;width:auto;height:auto;flex-direction:row;padding:6px 8px calc(6px + env(safe-area-inset-bottom));z-index:80;justify-content:space-around}
  .lateral .logo,.lateral .pe{display:none}
  .nav-item{flex-direction:column;gap:4px;font-size:10px;padding:8px 6px;text-align:center;width:auto}
  .main{padding:20px 16px 96px}
  .quadro{grid-auto-columns:82vw}
}