/* =====================================================================
   Central Colina — sistema visual
   Escuro, denso, celular primeiro.

   Três decisões que sustentam o resto:
   1. Uma escala tipográfica de 6 degraus, não tamanhos avulsos.
   2. Superfície que LEVANTA (cartão mais claro que a página), nunca afunda.
   3. Cor tem função: laranja é ação, âmbar é espera, verde é andamento,
      vermelho é prazo estourado. Nada de cor decorativa.
   ===================================================================== */

:root{
  /* profundidade: cada camada é mais clara que a de baixo */
  --p0:#0b0d11;            /* página */
  --p1:#12151b;            /* painel */
  --p2:#181c24;            /* cartão */
  --p3:#20252f;            /* cartão sobre cartão / hover */
  --linha:#252b36;
  --linha-forte:#333a48;

  --txt:#eceef2;
  --txt-2:#a8b0be;         /* secundário */
  --txt-3:#6f7887;         /* terciário, metadados */

  --acao:#ff7c03;
  --acao-sombra:rgba(255,124,3,.14);
  --espera:#f0a839;
  --andamento:#3ec489;
  --prazo:#f2555a;
  --info:#57b6f0;

  /* escala tipográfica: 6 degraus, e só */
  --t1:1.5rem; --t2:1.075rem; --t3:.925rem;
  --t4:.845rem; --t5:.775rem; --t6:.695rem;

  /* ritmo de espaçamento em múltiplos de 4 */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;

  --r1:8px; --r2:11px; --r3:16px;
  --transicao:140ms cubic-bezier(.2,.7,.4,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--p0); color:var(--txt);
  font:400 15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;   /* número não dança ao atualizar */
}
a{color:inherit;text-decoration:none}
::selection{background:var(--acao-sombra);color:var(--txt)}
:focus-visible{outline:2px solid var(--acao);outline-offset:2px;border-radius:var(--r1)}

/* ---------------------------------------------------------- moldura */
.app{display:flex;height:100vh;height:100svh;overflow:hidden}

.rail{
  width:212px;flex:0 0 212px;background:var(--p1);
  border-right:1px solid var(--linha);display:flex;flex-direction:column;
}
.rail .marca{padding:var(--e5) var(--e4) var(--e4)}
.rail .marca b{display:block;font-size:var(--t3);font-weight:640;letter-spacing:-.01em}
.rail .marca span{display:block;font-size:var(--t6);color:var(--txt-3);margin-top:2px;
  text-transform:uppercase;letter-spacing:.09em}
.rail nav{padding:0 var(--e2);flex:1;display:flex;flex-direction:column;gap:2px}
.rail nav a{
  display:flex;align-items:center;gap:var(--e3);padding:9px var(--e3);
  border-radius:var(--r1);font-size:var(--t4);color:var(--txt-2);
  transition:background var(--transicao),color var(--transicao);
}
.rail nav a:hover{background:var(--p2);color:var(--txt)}
.rail nav a.ativo{background:var(--acao-sombra);color:var(--acao);font-weight:600}
.rail nav a .ic{width:15px;height:15px;flex:0 0 auto;opacity:.85}
.rail .rodape{padding:var(--e4);border-top:1px solid var(--linha);font-size:var(--t5);color:var(--txt-3)}
.rail .rodape a{color:var(--txt-2)}
.rail .rodape a:hover{color:var(--acao)}

.conteudo{flex:1;min-width:0;display:flex;flex-direction:column}
.topo{
  display:flex;align-items:center;gap:var(--e4);height:52px;padding:0 var(--e5);
  border-bottom:1px solid var(--linha);background:var(--p1);flex:0 0 auto;
}
.topo h1{margin:0;font-size:var(--t3);font-weight:620;letter-spacing:-.01em}
.topo .espaco{flex:1}
.topo .quem{font-size:var(--t5);color:var(--txt-3)}
.corpo{flex:1;min-height:0;overflow:auto;padding:var(--e5)}
.corpo.cheio{padding:0;overflow:hidden}

/* ---------------------------------------------------------- peças */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--acao);color:#12100d;border:0;border-radius:var(--r1);
  padding:0 var(--e4);height:38px;font:600 var(--t4)/1 inherit;cursor:pointer;
  transition:filter var(--transicao),transform var(--transicao);
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn.fraco{background:var(--p3);color:var(--txt);box-shadow:inset 0 0 0 1px var(--linha-forte)}
.btn.fraco:hover{background:var(--linha)}
.btn.largo{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

.campo{margin-bottom:var(--e4)}
.campo label{display:block;font-size:var(--t5);color:var(--txt-2);margin-bottom:6px;font-weight:500}
.campo input,.campo select,.campo textarea{
  width:100%;height:42px;background:var(--p0);color:var(--txt);
  border:1px solid var(--linha-forte);border-radius:var(--r1);
  padding:0 var(--e3);font:inherit;font-size:var(--t4);
  transition:border-color var(--transicao),box-shadow var(--transicao);
}
.campo textarea{height:auto;padding:var(--e3);min-height:88px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0;border-color:var(--acao);box-shadow:0 0 0 3px var(--acao-sombra);
}
.aviso{border-radius:var(--r1);padding:10px var(--e3);font-size:var(--t4);margin-bottom:var(--e4);
  border:1px solid transparent}
.aviso.erro{background:rgba(242,85,90,.1);border-color:rgba(242,85,90,.32);color:#ffb3b6}
.aviso.ok{background:rgba(62,196,137,.1);border-color:rgba(62,196,137,.32);color:#8ee7bd}

.selo{
  display:inline-flex;align-items:center;gap:5px;height:19px;padding:0 7px;
  border-radius:5px;font-size:var(--t6);font-weight:600;letter-spacing:.01em;
  white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis;
}
.selo.neutro{background:var(--p3);color:var(--txt-2)}

.vazio{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;min-height:200px;color:var(--txt-3);text-align:center;padding:var(--e6) var(--e4)}
.vazio strong{display:block;color:var(--txt-2);font-size:var(--t3);font-weight:560;margin-bottom:6px}
.vazio p{margin:0;font-size:var(--t4);max-width:30ch;line-height:1.55}

/* avatar com inicial: ancora a linha e dá identidade sem precisar de foto */
.av{
  width:32px;height:32px;flex:0 0 auto;border-radius:9px;
  display:grid;place-items:center;font-size:var(--t5);font-weight:650;
  background:var(--p3);color:var(--txt-2);letter-spacing:-.02em;
}

/* ---------------------------------------------------------- login */
.tela-login{display:grid;place-items:center;min-height:100svh;padding:var(--e4);
  background:radial-gradient(1000px 500px at 50% -15%, #171b23 0%, var(--p0) 62%)}
.tela-login form{
  width:100%;max-width:352px;background:var(--p1);border:1px solid var(--linha);
  border-radius:var(--r3);padding:var(--e6) var(--e5);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 24px 56px -20px rgba(0,0,0,.7);
}
.tela-login h1{font-size:var(--t1);font-weight:660;letter-spacing:-.025em;margin:0 0 4px}
.tela-login .sub{color:var(--txt-3);font-size:var(--t4);margin:0 0 var(--e5)}

/* ---------------------------------------------------------- atendimento */
.atend{display:grid;grid-template-columns:296px minmax(0,1fr) 288px;height:100%;overflow:hidden}
.atend > *{min-height:0;min-width:0}
.col-lista{border-right:1px solid var(--linha);display:flex;flex-direction:column;background:var(--p1)}
.col-msgs{display:flex;flex-direction:column;background:var(--p0)}
.col-card{border-left:1px solid var(--linha);background:var(--p1);overflow-y:auto}

.filtros{display:flex;gap:5px;padding:var(--e3);border-bottom:1px solid var(--linha);flex:0 0 auto}
.filtros a{
  flex:1;text-align:center;font-size:var(--t6);font-weight:600;padding:6px 4px;
  border-radius:6px;color:var(--txt-3);transition:all var(--transicao);
}
.filtros a:hover{background:var(--p2);color:var(--txt-2)}
.filtros a.ativo{background:var(--p3);color:var(--txt)}

.lista{overflow-y:auto;flex:1}
.conv{
  display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--e3);
  padding:11px var(--e4);border-bottom:1px solid var(--linha);
  position:relative;transition:background var(--transicao);
}
.conv:hover{background:var(--p2)}
.conv.sel{background:var(--p2)}
.conv.sel::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--acao)}
.conv .topo-l{display:flex;align-items:baseline;gap:var(--e2);margin-bottom:2px}
/* hierarquia: o nome domina, o resto recua */
.conv .nome{font-size:var(--t4);font-weight:600;letter-spacing:-.01em;
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .quando{font-size:var(--t6);color:var(--txt-3);flex:0 0 auto;font-weight:500}
.conv .quando.tarde{color:var(--prazo);font-weight:700}
.conv .previa{font-size:var(--t5);color:var(--txt-3);line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .tags{display:flex;gap:5px;margin-top:7px;align-items:center}
.conv .av{position:relative}
.conv .av .estado{
  position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;
  border:2px solid var(--p1);
}
.conv:hover .av .estado,.conv.sel .av .estado{border-color:var(--p2)}
.e-aguardando{background:var(--espera)}
.e-atendendo{background:var(--andamento)}
.e-resolvida{background:var(--txt-3)}

/* cabeçalho da conversa: dá contexto sem obrigar a olhar a lista */
.cabec-conv{
  display:flex;align-items:center;gap:var(--e3);padding:0 var(--e5);height:52px;
  border-bottom:1px solid var(--linha);background:var(--p1);flex:0 0 auto;
}
.cabec-conv .quem b{display:block;font-size:var(--t4);font-weight:620;letter-spacing:-.01em}
.cabec-conv .quem span{display:block;font-size:var(--t6);color:var(--txt-3);margin-top:1px}

.msgs{flex:1;overflow-y:auto;padding:var(--e5);display:flex;flex-direction:column;gap:5px}
.dia{align-self:center;font-size:var(--t6);color:var(--txt-3);background:var(--p2);
  padding:3px 10px;border-radius:999px;margin:var(--e3) 0 var(--e2);font-weight:600}
.bolha{
  max-width:min(70%,540px);padding:9px 13px;font-size:var(--t4);line-height:1.5;
  border-radius:var(--r2);position:relative;word-wrap:break-word;
}
.bolha.ent{background:var(--p2);align-self:flex-start;border-bottom-left-radius:4px}
.bolha.sai{background:#1c3a2e;align-self:flex-end;border-bottom-right-radius:4px}
.bolha .meta{display:block;font-size:var(--t6);color:var(--txt-3);margin-top:5px;font-weight:500}
.bolha.sai .meta{text-align:right}

.compor{display:flex;gap:var(--e2);padding:var(--e3) var(--e4);
  border-top:1px solid var(--linha);background:var(--p1);flex:0 0 auto}
.compor input{
  flex:1;height:40px;background:var(--p0);border:1px solid var(--linha-forte);
  border-radius:999px;padding:0 var(--e4);color:var(--txt);font:inherit;font-size:var(--t4);
  transition:border-color var(--transicao),box-shadow var(--transicao);
}
.compor input:focus{outline:0;border-color:var(--acao);box-shadow:0 0 0 3px var(--acao-sombra)}
.compor .btn{border-radius:999px;height:40px;padding:0 18px}

/* painel do cliente: ficha de verdade, não lista solta */
.ficha{padding:var(--e4)}
.ficha .quem{display:flex;gap:var(--e3);align-items:center;margin-bottom:var(--e4)}
.ficha .quem .av{width:40px;height:40px;border-radius:11px;font-size:var(--t4)}
.ficha .quem b{display:block;font-size:var(--t3);font-weight:620;letter-spacing:-.015em}
.ficha .quem span{display:block;font-size:var(--t5);color:var(--txt-3);margin-top:2px}

.card-mini{
  background:var(--p2);border:1px solid var(--linha);border-radius:var(--r2);
  padding:var(--e3);margin-bottom:var(--e4);
}
.card-mini .l1{display:flex;align-items:center;justify-content:space-between;gap:var(--e2);margin-bottom:6px}
.card-mini .num{font-size:var(--t5);font-weight:700;color:var(--txt-3);letter-spacing:.02em}
.card-mini .tit{font-size:var(--t4);font-weight:560;line-height:1.4}
.card-mini .prazo{font-size:var(--t6);color:var(--txt-3);margin-top:6px}

.grupo{margin-bottom:var(--e4)}
.grupo > h4{
  margin:0 0 var(--e2);font-size:var(--t6);font-weight:700;color:var(--txt-3);
  text-transform:uppercase;letter-spacing:.09em;
}
.grupo dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px var(--e3)}
.grupo dt{font-size:var(--t5);color:var(--txt-3);padding:5px 0;white-space:nowrap}
.grupo dd{font-size:var(--t5);margin:0;padding:5px 0;text-align:right;font-weight:520;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grupo dt + dd{border-bottom:1px solid var(--linha)}
.grupo dt{border-bottom:1px solid var(--linha)}
.grupo dl > :nth-last-child(-n+2){border-bottom:0}

/* ------------------------------------------- celular é a tela principal */
@media (max-width:900px){
  .app{flex-direction:column}
  .rail{width:100%;flex:0 0 auto;order:2;border-right:0;border-top:1px solid var(--linha);
    padding-bottom:env(safe-area-inset-bottom)}
  .rail .marca,.rail .rodape{display:none}
  .rail nav{flex-direction:row;padding:5px;gap:3px}
  .rail nav a{flex:1;flex-direction:column;gap:3px;font-size:var(--t6);
    padding:7px 2px;min-height:50px;justify-content:center;text-align:center}
  .conteudo{order:1;min-height:0}
  .corpo{padding:var(--e4)}
  .atend{grid-template-columns:1fr}
  .atend .col-msgs,.atend .col-card{display:none}
  .atend.aberta .col-lista{display:none}
  .atend.aberta .col-msgs{display:flex}
  .conv{padding:12px var(--e4)}          /* alvo de toque maior */
  .compor input,.compor .btn{height:44px}
  .voltar{display:inline-flex!important}
}
.voltar{display:none;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:var(--r1);background:var(--p2);color:var(--txt-2);flex:0 0 auto}

/* A ficha do cliente no celular. No desktop ela mora na coluna da direita;
   no celular a coluna nao cabe e o vinculo (que e o produto) nao pode sumir.
   Vira uma faixa recolhivel logo abaixo do cabecalho da conversa. */
.ficha-mobile{display:none}
@media (max-width:900px){
  .ficha-mobile{display:block;flex:0 0 auto;background:var(--p1);border-bottom:1px solid var(--linha)}
  .ficha-mobile summary{
    display:flex;align-items:center;gap:var(--e2);padding:0 var(--e4);
    cursor:pointer;list-style:none;min-height:46px;
  }
  .ficha-mobile summary::-webkit-details-marker{display:none}
  .ficha-mobile .num{font-size:var(--t5);font-weight:700;color:var(--txt-3)}
  .ficha-mobile .seta{margin-left:auto;color:var(--txt-3);transition:transform var(--transicao)}
  .ficha-mobile[open] .seta{transform:rotate(180deg)}
  .ficha-mobile .ficha{max-height:46vh;overflow-y:auto;border-top:1px solid var(--linha)}
}