/* ============================================================================
   CRM Kaluci Corporativo — bancada de trabalho, nao relatorio.

   Tres colunas fixas: navegacao, fila, lead aberto. Ninguem troca de aba para
   atender: a fila fica sempre a vista e o lead abre ao lado.
   Densidade alta de proposito — quem usa isso passa o dia aqui.
   ========================================================================= */

/* Preto de verdade no fundo; superficies levemente levantadas para separar
   hierarquia sem cinza lavado. Verde lima neon so como destaque — se tudo
   brilha, nada chama atencao. */
:root {
  --fundo:        #000000;
  --painel:       #0a0a0b;
  --painel-2:     #141416;
  --painel-3:     #1d1e21;
  --borda:        #262729;
  --borda-forte:  #3a3b3f;
  --texto:        #ffffff;
  --texto-2:      #b6b8be;
  --texto-3:      #8b8d95;
  --marca:        #c8fa30;
  --marca-2:      #dcff77;
  --marca-fraca:  #182005;
  --sobre-marca:  #0a0f00;
  --perigo:       #ff6b6b;
  --alerta:       #ffc247;
  --ok:           #c8fa30;
  --sombra:       0 1px 2px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.45);

  --r: 7px;  --r-g: 11px;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 22px; --e6: 30px;
  --toque: 40px;
  --lado: 212px;
  --fila: 376px;
}

/* Contraparte clara: lima neon sobre branco e ilegivel, entao aqui ela
   escurece. Mesma identidade, contraste que passa em AA. */
[data-tema="claro"] {
  --fundo:        #ffffff;
  --painel:       #ffffff;
  --painel-2:     #f4f6f0;
  --painel-3:     #e9ecE2;
  --painel-3:     #e9ece2;
  --borda:        #e0e3d9;
  --borda-forte:  #c4c9b8;
  --texto:        #0b0c09;
  --texto-2:      #494d43;
  --texto-3:      #6a6e62;
  --marca:        #4a7a06;
  --marca-2:      #3b6205;
  --marca-fraca:  #f1f8dd;
  --sobre-marca:  #ffffff;
  --perigo:       #c02626;
  --alerta:       #8a5a00;
  --ok:           #3f6f05;
  --sombra:       0 1px 2px rgba(11,12,9,.07), 0 6px 18px rgba(11,12,9,.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100dvh; overflow: hidden;
  background: var(--fundo); color: var(--texto);
  font: 400 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.num, table td { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; border-radius: var(--r); }
[hidden] { display: none !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 6px;
                            border: 3px solid transparent; background-clip: content-box; }

/* ─── MARCA ──────────────────────────────────────────────────────────── */
.marca { display: flex; align-items: center; gap: var(--e2); font-weight: 650;
         letter-spacing: -.01em; white-space: nowrap; }
.marca__k { display: grid; place-items: center; width: 26px; height: 26px;
            border-radius: 7px; background: var(--marca); color: var(--sobre-marca);
            font-weight: 800; font-size: 16px; flex: 0 0 auto; }

/* ─── LOGIN ──────────────────────────────────────────────────────────── */
.login { display: grid; place-items: center; height: 100dvh; padding: var(--e4); }
.login__caixa { width: 100%; max-width: 390px; display: flex; flex-direction: column;
  gap: var(--e4); background: var(--painel); border: 1px solid var(--borda);
  border-radius: var(--r-g); padding: var(--e6); box-shadow: var(--sombra); }
.login__texto { margin: 0; color: var(--texto-2); font-size: 13.5px; }
.login__aviso { margin: 0; font-size: 13.5px; min-height: 1.2em; }
.login__aviso[data-tipo="erro"] { color: var(--perigo); }
.login__aviso[data-tipo="ok"] { color: var(--ok); }
.campo { display: flex; flex-direction: column; gap: var(--e1); }
.campo__rotulo { font-size: 12.5px; font-weight: 500; color: var(--texto-2); }

input, textarea, select {
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--r);
  font: inherit; font-size: 16px; padding: 9px var(--e3);
}
input::placeholder, textarea::placeholder { color: var(--texto-3); }
textarea { resize: vertical; line-height: 1.5; }

/* ─── BOTOES ─────────────────────────────────────────────────────────── */
.botao {
  min-height: var(--toque);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 var(--e3);
  background: var(--painel-2); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--r);
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, opacity .14s ease;
  white-space: nowrap;
}
.botao:hover { background: var(--painel-3); border-color: var(--borda-forte); }
.botao svg { width: 17px; height: 17px; flex: 0 0 auto; }
a.botao { text-decoration: none; }
.botao--primario { background: var(--marca); border-color: var(--marca);
                   color: var(--sobre-marca); font-weight: 700; }
.botao--primario:hover { background: var(--marca-2); border-color: var(--marca-2); }
.botao--fantasma { background: none; border-color: transparent; }
.botao--fantasma:hover { background: var(--painel-2); border-color: transparent; }
.botao--icone { min-width: var(--toque); padding: 0; }
.botao--peq { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.botao[disabled] { opacity: .45; cursor: not-allowed; }

/* ─── BANCADA: TRES COLUNAS ──────────────────────────────────────────── */
.bancada {
  display: grid; height: 100dvh;
  grid-template-columns: var(--lado) var(--fila) 1fr;
}
/* Funil e Motor nao tem fila: a coluna do meio some e o conteudo respira. */
.bancada--painel { grid-template-columns: var(--lado) 1fr; }
.bancada--painel .fila { display: none; }

/* coluna 1 */
.lado {
  display: flex; flex-direction: column; gap: var(--e2);
  background: var(--painel); border-right: 1px solid var(--borda);
  padding: var(--e4) var(--e3); min-width: 0;
}
.lado__marca { padding: 0 var(--e2) var(--e3); font-size: 15px; }
.lado__grupo { display: flex; flex-direction: column; gap: 2px; }
.lado__rodape { margin-top: auto; display: flex; flex-direction: column; gap: var(--e3); }
.lado__botoes { display: flex; gap: var(--e1); }

.item {
  display: flex; align-items: center; gap: var(--e2);
  min-height: 36px; padding: 0 var(--e2);
  background: none; border: 0; border-radius: var(--r);
  color: var(--texto-2); font: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; text-align: left; width: 100%;
  transition: background .14s ease, color .14s ease;
}
.item svg { width: 17px; height: 17px; flex: 0 0 auto; }
.item:hover { background: var(--painel-2); color: var(--texto); }
.item[aria-current="page"] { background: var(--marca-fraca); color: var(--marca); font-weight: 650; }
.item__n { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums;
           color: var(--texto-3); }
.item[aria-current="page"] .item__n { color: var(--marca); }
.item__n--urgente { color: var(--perigo); font-weight: 700; }

/* estado do motor: quem opera precisa saber se a maquina esta rodando */
.motor { display: flex; flex-direction: column; gap: 5px; padding: var(--e3);
         background: var(--painel-2); border: 1px solid var(--borda);
         border-radius: var(--r); font-size: 12px; color: var(--texto-2); }
.motor__linha { display: flex; justify-content: space-between; gap: var(--e2); }
.motor__linha b { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.motor__barra { height: 4px; border-radius: 3px; background: var(--painel-3); overflow: hidden; }
.motor__barra i { display: block; height: 100%; background: var(--marca); }

/* coluna 2 */
.fila { display: flex; flex-direction: column; min-width: 0;
        background: var(--painel); border-right: 1px solid var(--borda); }
.fila__topo { display: flex; align-items: center; gap: var(--e2);
              padding: var(--e4) var(--e3) var(--e2); }
.fila__titulo { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.fila__conta { color: var(--texto-3); font-size: 12.5px; }
.fila__topo .botao { margin-left: auto; }
.fila__busca { padding: 0 var(--e3) var(--e2); }
.busca { width: 100%; font-size: 13.5px; padding: 8px var(--e3); }
.fila__dica { font-size: 11px; color: var(--texto-3); padding: 0 var(--e3) var(--e2); }
kbd { font: inherit; font-size: 10.5px; padding: 1px 5px; border-radius: 4px;
      background: var(--painel-2); border: 1px solid var(--borda); color: var(--texto-2); }
.fila__lista { flex: 1; overflow-y: auto; padding: 0 var(--e2) var(--e4); }

.linha-lead {
  display: flex; gap: 10px; width: 100%; text-align: left;
  padding: 10px var(--e3); margin-bottom: 2px;
  background: none; border: 0; border-left: 2px solid transparent;
  border-radius: var(--r); color: inherit; font: inherit; cursor: pointer;
  transition: background .12s ease;
}
.linha-lead:hover { background: var(--painel-2); }
.linha-lead[aria-selected="true"] { background: var(--marca-fraca); border-left-color: var(--marca); }
.linha-lead--urgente { border-left-color: var(--perigo); }
.linha-lead--atencao { border-left-color: var(--alerta); }
.linha-lead__mono {
  flex: 0 0 auto; width: 30px; height: 30px; margin-top: 1px;
  display: grid; place-items: center; border-radius: 8px;
  background: var(--painel-3); color: var(--texto-2);
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.linha-lead[aria-selected="true"] .linha-lead__mono { background: var(--marca);
  color: var(--sobre-marca); }
.linha-lead__corpo { min-width: 0; flex: 1; display: block; }
.linha-lead__topo { display: flex; align-items: baseline; gap: var(--e2); }
.linha-lead__nome { font-weight: 600; font-size: 13.5px; flex: 1; display: block;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-lead__quando { font-size: 11.5px; color: var(--texto-3); flex: 0 0 auto;
                      font-variant-numeric: tabular-nums; }
.linha-lead--urgente .linha-lead__quando { color: var(--perigo); font-weight: 600; }
.linha-lead__meta { display: block; font-size: 12px; color: var(--texto-3); margin-top: 1px;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-lead__fala { font-size: 12.5px; color: var(--texto-2); margin-top: 5px;
                    display: -webkit-box; -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical; overflow: hidden; }

/* coluna 3 */
.obra { display: flex; flex-direction: column; min-width: 0; overflow: hidden;
        background: var(--fundo); }
.obra__topo { display: flex; align-items: flex-start; gap: var(--e3);
              padding: var(--e4) var(--e5); border-bottom: 1px solid var(--borda);
              background: var(--painel); }
.obra__titulo { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.obra__sub { font-size: 12.5px; color: var(--texto-2); margin-top: 2px; }
.obra__acoes { margin-left: auto; display: flex; gap: var(--e2); flex-wrap: wrap;
               justify-content: flex-end; }
.obra__corpo { flex: 1; overflow-y: auto; padding: var(--e5); display: flex;
               flex-direction: column; gap: var(--e5); }
.obra__pe { border-top: 1px solid var(--borda); background: var(--painel);
            padding: var(--e3) var(--e5) var(--e4); }

/* ─── BLOCOS ─────────────────────────────────────────────────────────── */
.bloco h3 { margin: 0 0 var(--e2); font-size: 11.5px; font-weight: 650;
            color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; }

.ia { background: var(--painel); border: 1px solid var(--borda);
      border-left: 3px solid var(--marca); border-radius: var(--r);
      padding: var(--e3) var(--e4); }
.ia p { margin: 0 0 var(--e2); }
.ia p:last-child { margin-bottom: 0; }
.ia__passo { color: var(--texto); font-weight: 550; }

.ficha { display: grid; grid-template-columns: auto 1fr; gap: 3px var(--e4);
         font-size: 13px; margin: 0; }
.ficha dt { color: var(--texto-3); }
.ficha dd { margin: 0; }

/* conversa */
.conversa { display: flex; flex-direction: column; gap: 6px; }
.balao { max-width: 78%; padding: 8px var(--e3); border-radius: var(--r-g);
         font-size: 13.5px; line-height: 1.45; }
.balao--entrada { align-self: flex-start; background: var(--painel);
                  border: 1px solid var(--borda); border-bottom-left-radius: 3px; }
.balao--saida { align-self: flex-end; background: var(--marca); color: var(--sobre-marca);
                border-bottom-right-radius: 3px; }
.balao__hora { display: block; font-size: 10.5px; opacity: .72; margin-top: 3px; }

/* linha do tempo */
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 var(--e4);
               border-left: 2px solid var(--borda); }
.linha-tempo li { position: relative; padding: 0 0 var(--e3) var(--e3); font-size: 12.5px; }
.linha-tempo li::before { content: ""; position: absolute; left: calc(-1 * var(--e4) - 5px);
  top: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--texto-3); box-shadow: 0 0 0 3px var(--fundo); }
.linha-tempo li[data-tipo="resposta"]::before,
.linha-tempo li[data-tipo="replica"]::before { background: var(--marca); }
.linha-tempo li[data-tipo="falha"]::before { background: var(--perigo); }
.linha-tempo li[data-tipo="estagio"]::before { background: var(--ok); }
.linha-tempo__quando { display: block; font-size: 11px; color: var(--texto-3); }

/* ─── RESPONDER ──────────────────────────────────────────────────────── */
.responder { display: flex; flex-direction: column; gap: var(--e2); }
.responder__campo { display: flex; gap: var(--e2); align-items: flex-end; }
.responder textarea { flex: 1; min-height: 44px; max-height: 160px; font-size: 14px; }
.atalhos { display: flex; gap: 6px; flex-wrap: wrap; }
.atalho { display: inline-flex; align-items: center; min-height: 32px;
          padding: 0 12px; background: var(--painel-2); border: 1px solid var(--borda);
          border-radius: 999px; color: var(--texto-2); cursor: pointer;
          font: inherit; font-size: 12px; }
.atalho:hover { background: var(--painel-3); color: var(--texto); border-color: var(--borda-forte); }

/* No dedo o alvo cresce; no mouse a densidade fica. */
@media (pointer: coarse) {
  .atalho { min-height: 44px; padding: 0 var(--e4); font-size: 13.5px; }
  .botao--peq { min-height: 40px; }
}
.janela { font-size: 11.5px; color: var(--texto-3); }
.janela--fechada { color: var(--alerta); }

/* ─── ETIQUETAS / PILULAS ────────────────────────────────────────────── */
.et { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
      border-radius: 999px; font-size: 11.5px; font-weight: 650;
      background: var(--painel-2); color: var(--texto-2); border: 1px solid var(--borda); }
.et::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.et--quente { color: var(--perigo); }
.et--morno { color: var(--alerta); }
.et--frio { color: var(--texto-3); }

/* ─── PAINEIS DE NUMEROS ─────────────────────────────────────────────── */
.kpis { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi { background: var(--painel); border: 1px solid var(--borda);
       border-radius: var(--r-g); padding: var(--e3) var(--e4); }
.kpi__rotulo { font-size: 11px; font-weight: 600; color: var(--texto-3);
               text-transform: uppercase; letter-spacing: .06em; }
.kpi__valor { font-size: 26px; font-weight: 650; line-height: 1.2; margin-top: 2px;
              font-variant-numeric: tabular-nums; }
.kpi__nota { font-size: 12px; color: var(--texto-3); }
.kpi--alerta .kpi__valor { color: var(--alerta); }
.kpi--perigo .kpi__valor { color: var(--perigo); }
.kpi--ok .kpi__valor { color: var(--ok); }

table { width: 100%; border-collapse: collapse; background: var(--painel); font-size: 13px; }
.tabela-caixa { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--r-g); }
th, td { padding: 9px var(--e3); text-align: left; border-bottom: 1px solid var(--borda); }
th { font-size: 11px; font-weight: 650; color: var(--texto-3); text-transform: uppercase;
     letter-spacing: .05em; background: var(--painel-2); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--painel-2); }
td.num, th.num { text-align: right; }
.barra-int { display: block; height: 4px; border-radius: 3px; background: var(--marca);
             min-width: 2px; }

/* funil */
.funil { display: flex; flex-direction: column; gap: 3px; }
.funil__etapa { display: grid; grid-template-columns: 132px 1fr 62px; align-items: center;
                gap: var(--e3); padding: 5px 0; }
.funil__nome { font-size: 12.5px; color: var(--texto-2); }
.funil__trilho { height: 22px; background: var(--painel-2); border-radius: var(--r); overflow: hidden; }
.funil__preenche { height: 100%; border-radius: var(--r); min-width: 3px; }
.funil__n { text-align: right; font-size: 13px; font-weight: 600;
            font-variant-numeric: tabular-nums; }

/* ─── ESTADOS ────────────────────────────────────────────────────────── */
.vazio { display: grid; place-content: center; justify-items: center; gap: 6px;
         height: 100%; padding: var(--e6); text-align: center; color: var(--texto-3); }
.vazio strong { color: var(--texto-2); font-size: 14px; font-weight: 600; }
.vazio span { font-size: 13px; max-width: 320px; }
.esqueleto { height: 54px; border-radius: var(--r); margin-bottom: 4px;
  background: linear-gradient(90deg, var(--painel) 25%, var(--painel-2) 50%, var(--painel) 75%);
  background-size: 200% 100%; animation: brilho 1.3s ease-in-out infinite; }
@keyframes brilho { from { background-position: 200% 0 } to { background-position: -200% 0 } }

.avisos { position: fixed; right: var(--e4); bottom: var(--e4); z-index: 200;
          display: flex; flex-direction: column; gap: var(--e2); }
.aviso { background: var(--painel); border: 1px solid var(--borda);
         border-left: 3px solid var(--marca); border-radius: var(--r);
         padding: 10px var(--e4); box-shadow: var(--sombra); font-size: 13px;
         max-width: 330px; animation: sobe .18s ease; }
.aviso--erro { border-left-color: var(--perigo); }
.aviso--ok { border-left-color: var(--ok); }
@keyframes sobe { from { transform: translateY(6px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ─── RESPONSIVO ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .bancada { grid-template-columns: 64px var(--fila) 1fr; }
  .lado__nome, .item span:not(.item__n), .motor { display: none; }
  .lado { align-items: center; }
  .item { justify-content: center; padding: 0; }
  .item svg { width: 19px; height: 19px; }
}
@media (max-width: 860px) {
  html, body { overflow: auto; height: auto; }
  .bancada { grid-template-columns: 1fr; height: auto; }
  .lado { flex-direction: row; align-items: center; border-right: 0;
          border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 30; }
  .lado__grupo { flex-direction: row; overflow-x: auto; }
  .lado__rodape { margin-top: 0; margin-left: auto; }
  .lado__nome { display: none; }
  .item span:not(.item__n) { display: inline; }
  .fila { border-right: 0; border-bottom: 1px solid var(--borda); max-height: 52dvh; }
  .obra { min-height: 60dvh; }
  .obra__corpo { padding: var(--e4); }
  .obra__topo, .obra__pe { padding-left: var(--e4); padding-right: var(--e4); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}