/* =========================================================================
   ThothDesk — design system
   -------------------------------------------------------------------------
   Regra que sustenta os dois temas: NENHUM ESTADO DEPENDE DE COR.
   Atrasado, bloqueado, selecionado e concluído se resolvem com peso de borda,
   preenchimento e opacidade. Cor entra só como identidade (etiqueta, cliente)
   e como ação (amarelo). Foi isso que deixou claro e escuro custarem o mesmo.

   O amarelo #FBBB01 é reservado para AÇÃO. Nada decorativo pode usá-lo, e a
   paleta de etiquetas não contém amarelo de propósito.
   ========================================================================= */

/* ---------- constantes de marca (não mudam com o tema) ---------- */
:root{
  --amarelo:        #FBBB01;
  --amarelo-tinta:  #14140F;   /* texto sobre amarelo */
  --amarelo-fraco:  rgba(251,187,1,.14);
  --vermelho:       #E60000;
  --azul:           #0524AC;
  --ciano:          #99EEFF;

  --fonte:      'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --fonte-mono: 'Chivo Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* as duas curvas do Diagnóstico */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease:   cubic-bezier(.2, .8, .2, 1);

  /* raios — escala fechada, nada fora dela */
  --r-pill: 999px;
  --r-lg:   16px;
  --r-md:   12px;
  --r-sm:   8px;
  --r-xs:   5px;
  --r-tag:  4px;

  /* espaçamento — escala de 4 */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px;

  /* tipografia */
  --t-display: 500 clamp(28px, 3.4vw, 40px)/1.05 var(--fonte);
  --t-titulo:  500 21px/1.2 var(--fonte);
  --t-corpo:   400 13.5px/1.6 var(--fonte);
  --t-forte:   500 13.5px/1.6 var(--fonte);
  --t-peq:     400 12px/1.5 var(--fonte);
  --rotulo-tam: 9.5px;
  --rotulo-esp: .13em;

  --largura-coluna: 288px;
  --largura-coluna-min: 44px;
  --largura-conversa: 330px;
}

/* ---------- tema claro (padrão) ---------- */
:root, [data-tema="claro"]{
  --bg:      #F3F1EA;   /* o off-white da marca virou papel */
  --sup:     #FFFFFF;
  --elev:    #FAF8F2;
  --tinta:   #14140F;
  --forte:   #000000;
  --suave:   rgba(20,20,15,.66);
  --fraco:   #6B6A63;
  --linha:   rgba(20,20,15,.11);
  --linha2:  rgba(20,20,15,.22);
  --sombra:  0 18px 44px rgba(20,20,15,.12);
  --sombra-arrasto: 0 12px 28px rgba(20,20,15,.18);
}

/* ---------- tema escuro ---------- */
[data-tema="escuro"]{
  --bg:      #0E0E0F;
  --sup:     #18181A;
  --elev:    #1E1F21;
  --tinta:   #F3F1EA;
  --forte:   #FFFFFF;
  --suave:   rgba(243,241,234,.66);
  --fraco:   #8B8E95;   /* clareado: o #6E7178 do brand kit não passa em AA */
  --linha:   rgba(255,255,255,.09);
  --linha2:  rgba(255,255,255,.18);
  --sombra:  0 20px 50px rgba(0,0,0,.55);
  --sombra-arrasto: 0 14px 32px rgba(0,0,0,.6);
}

/* ---------- paleta de etiquetas ----------
   Pastéis com texto escuro, idênticos nos dois temas. Nenhum amarelo.       */
:root{
  --tag-ciano:  #99EEFF;
  --tag-coral:  #FF9E8D;
  --tag-menta:  #A9E5B0;
  --tag-lilas:  #CBBBFF;
  --tag-areia:  #E8DCC0;
  --tag-azul:   #7FB4FF;
  --tag-rosa:   #FFB3D1;
  --tag-cinza:  #C9C7C2;
  --tag-tinta:  #14140F;
}

/* =========================================================================
   base
   ========================================================================= */
*{margin:0;padding:0;box-sizing:border-box}

html{ -webkit-text-size-adjust:100% }

body{
  background:var(--bg);
  color:var(--tinta);
  font:var(--t-corpo);
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s var(--ease), color .25s var(--ease);
}

::selection{ background:var(--amarelo); color:var(--amarelo-tinta) }

:focus-visible{
  outline:2px solid var(--amarelo);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

/* rolagem discreta */
*{scrollbar-width:thin; scrollbar-color:var(--linha2) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--linha2);border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* =========================================================================
   tipografia
   ========================================================================= */
.display{ font:var(--t-display); letter-spacing:-.024em; color:var(--forte) }
.titulo { font:var(--t-titulo);  letter-spacing:-.022em; color:var(--forte) }

/* o eyebrow do Diagnóstico, com o traço de 24px */
.rotulo{
  font-family:var(--fonte-mono);
  font-size:var(--rotulo-tam);
  letter-spacing:var(--rotulo-esp);
  text-transform:uppercase;
  color:var(--fraco);
}
.rotulo--marca{ color:var(--amarelo); display:inline-flex; align-items:center; gap:var(--e3) }
.rotulo--marca::before{ content:''; width:24px; height:1px; background:var(--amarelo) }

.mono{ font-family:var(--fonte-mono) }
.suave{ color:var(--suave) }
.fraco{ color:var(--fraco) }

/* =========================================================================
   superfícies
   ========================================================================= */
.sup { background:var(--sup);  border:1px solid var(--linha); border-radius:var(--r-md) }
.elev{ background:var(--elev); border:1px solid var(--linha); border-radius:var(--r-md) }

.bloco{ background:var(--sup); border:1px solid var(--linha); border-radius:var(--r-md); overflow:hidden }
.bloco__cab{
  display:flex; align-items:center; gap:var(--e2);
  padding:9px 12px; border-bottom:1px solid var(--linha); background:var(--elev);
}
.bloco__cab .rotulo{ color:var(--tinta) }
.bloco__corpo{ padding:var(--e3) }

/* =========================================================================
   botões
   ========================================================================= */
.btn{
  font:500 13px/1 var(--fonte); letter-spacing:-.005em;
  display:inline-flex; align-items:center; gap:var(--e2);
  padding:10px 16px; border:1px solid transparent; border-radius:var(--r-pill);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .3s var(--spring), background-color .2s var(--ease),
             color .2s var(--ease), border-color .2s var(--ease);
}
.btn--acao{ background:var(--amarelo); color:var(--amarelo-tinta); font-weight:600 }
.btn--acao:hover{ transform:translateY(-2px) scale(1.01) }
.btn--acao:disabled{ background:var(--linha2); color:var(--fraco); cursor:not-allowed; transform:none }
.btn--calmo{ background:transparent; color:var(--suave); border-color:var(--linha2) }
.btn--calmo:hover{ color:var(--forte); border-color:var(--linha2); transform:translateY(-1px) }

/* botão de ícone quadrado */
.bi{
  width:29px; height:29px; border:1px solid var(--linha2); border-radius:var(--r-sm);
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--fraco); cursor:pointer; position:relative;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.bi:hover{ color:var(--tinta); border-color:var(--linha2) }
.bi__n{
  position:absolute; top:-4px; right:-4px; min-width:15px; height:15px; padding:0 4px;
  border-radius:8px; background:var(--amarelo); color:var(--amarelo-tinta);
  font:600 8px/15px var(--fonte-mono); text-align:center;
}

/* =========================================================================
   pastilhas e etiquetas
   ========================================================================= */
.pastilha{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--linha2); border-radius:var(--r-xs);
  padding:5px 10px; background:var(--sup); font-size:12px; white-space:nowrap;
}
.pastilha__k{
  font-family:var(--fonte-mono); font-size:8px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fraco);
}
.pastilha--acao{ background:var(--amarelo); color:var(--amarelo-tinta); border-color:var(--amarelo); font-weight:500 }
.pastilha--acao .pastilha__k{ color:rgba(20,20,15,.55) }
.pastilha--tracejada{ border-style:dashed; background:transparent }
.pastilha--fantasma { border-style:dashed; background:transparent; color:var(--suave) }

.etiqueta{
  font-family:var(--fonte-mono); font-size:8.5px; letter-spacing:.05em;
  text-transform:uppercase; border-radius:var(--r-tag); padding:3px 7px;
  color:var(--tag-tinta); font-weight:500;
}
/* modo barra: mesma etiqueta sem texto, para ganhar densidade */
.etiqueta--barra{ width:26px; padding:0; height:5px; color:transparent; overflow:hidden }

/* =========================================================================
   estados — sem cor, por construção
   ========================================================================= */
.prazo        { font-family:var(--fonte-mono); font-size:9px; border:1px dashed var(--linha2);
                border-radius:var(--r-xs); padding:2px 7px; color:var(--fraco) }
.prazo--hoje  { border-style:solid; color:var(--tinta) }
.prazo--vencido{ background:var(--tinta); border-color:var(--tinta); color:var(--bg) }

.status       { font-family:var(--fonte-mono); font-size:9px; border:1px dashed var(--linha2);
                border-radius:var(--r-xs); padding:2px 7px; color:var(--tinta);
                display:inline-flex; align-items:center; gap:5px }
.status--interna{ border-style:solid; border-color:var(--tinta) }   /* depende de nós */
.status::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor }

.parado{ font-family:var(--fonte-mono); font-size:9px; color:var(--fraco);
         border-left:2px solid var(--linha2); padding-left:7px }

.concluido{ opacity:.5 }
.bloqueado{ border-width:1.5px; border-color:var(--tinta) }
.selecionado{ box-shadow:0 0 0 2px var(--amarelo) }

/* =========================================================================
   pessoas
   ========================================================================= */
.rosto{
  width:27px; height:27px; border-radius:7px; border:1px solid var(--linha2);
  background:var(--elev); color:var(--fraco);
  font:400 8.5px/1 var(--fonte-mono);
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
.rosto--peq{ width:19px; height:19px; border-radius:5px; font-size:7.5px }
.rosto--dono{
  background:var(--amarelo); color:var(--amarelo-tinta); border-color:var(--amarelo); font-weight:600;
  box-shadow:0 0 0 2px var(--sup), 0 0 0 3.5px var(--amarelo);
}
.rostos{ display:flex; align-items:center }
.rostos .rosto + .rosto{ margin-left:-6px; box-shadow:0 0 0 2px var(--sup) }
.rostos .rosto--dono + .rosto{ margin-left:-2px }

/* =========================================================================
   card fechado
   ========================================================================= */
.card{
  background:var(--elev); border:1px solid var(--linha); border-radius:var(--r-md);
  padding:11px 12px; cursor:pointer; user-select:none;
  transition:transform .35s var(--spring), border-color .2s var(--ease), background-color .2s var(--ease);
  animation:cardEntra .45s var(--spring) backwards;
}
.card:hover{ border-color:var(--linha2); transform:translateY(-2px) }
.card__titulo{ font:400 13.5px/1.35 var(--fonte); letter-spacing:-.01em; color:var(--tinta) }
.card__etiquetas{ display:flex; gap:4px; margin-bottom:8px; flex-wrap:wrap }
.card__meta{ display:flex; align-items:center; gap:6px; margin-top:10px; flex-wrap:wrap }
.card__meta .rosto{ margin-left:auto }
.card--arrastando{ transform:rotate(2deg); box-shadow:var(--sombra-arrasto); border-color:var(--linha2); z-index:20 }

.vao{
  border:1.5px dashed var(--amarelo); background:var(--amarelo-fraco);
  border-radius:var(--r-md); height:56px;
}

@keyframes cardEntra{ from{ opacity:0; transform:translateY(12px) scale(.97) } to{ opacity:1; transform:none } }
@keyframes sobe    { from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.entra{ animation:sobe .45s var(--ease) }

/* =========================================================================
   coluna
   ========================================================================= */
.coluna{
  width:var(--largura-coluna); flex-shrink:0;
  background:var(--sup); border:1px solid var(--linha); border-radius:var(--r-lg);
  display:flex; flex-direction:column; max-height:100%;
}
.coluna__termometro{ height:3px; background:var(--linha); border-radius:var(--r-lg) var(--r-lg) 0 0; overflow:hidden }
.coluna__termometro i{ display:block; height:100%; background:var(--linha2); transition:width .55s var(--ease) }
.coluna__termometro i.quente{ background:var(--amarelo) }
.coluna__cab{ display:flex; align-items:center; gap:9px; padding:12px 13px 10px; border-bottom:1px solid var(--linha) }
.coluna__corpo{ padding:10px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; flex:1 }
.coluna__pe{ padding:9px 13px; border-top:1px solid var(--linha); font-size:12.5px; color:var(--fraco) }
.coluna--recolhida{ width:var(--largura-coluna-min); align-items:center; padding:10px 0 }
.coluna--recolhida .coluna__vertical{
  writing-mode:vertical-rl; transform:rotate(180deg); margin-top:10px;
}
.contador{
  font-family:var(--fonte-mono); font-size:10px; color:var(--fraco);
  border:1px solid var(--linha2); border-radius:var(--r-pill); padding:1px 8px;
}

/* grupo de cliente dentro da coluna */
.grupo{ display:flex; align-items:center; gap:8px; padding:6px 3px 7px; cursor:pointer }
.grupo__marca{ width:9px; height:9px; border-radius:3px; flex-shrink:0 }
.grupo__nome{ font:500 12.5px/1 var(--fonte); letter-spacing:-.01em }
.grupo__n{ font-family:var(--fonte-mono); font-size:9.5px; color:var(--fraco); margin-left:auto }

/* =========================================================================
   links em botão
   ========================================================================= */
.link-btn{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--linha2); border-radius:var(--r-sm);
  padding:5px 10px 5px 7px; background:var(--elev); font-size:12px;
  color:var(--tinta); text-decoration:none; white-space:nowrap;
  transition:border-color .2s var(--ease), transform .3s var(--spring);
}
.link-btn:hover{ border-color:var(--amarelo); transform:translateY(-1px) }
.link-btn__ic{
  width:15px; height:15px; border-radius:var(--r-tag); background:var(--linha);
  display:flex; align-items:center; justify-content:center;
  font:400 6px/1 var(--fonte-mono); color:var(--fraco);
}
.link-btn--novo{ border-style:dashed; color:var(--fraco); font-family:var(--fonte-mono);
                 font-size:8.5px; letter-spacing:.08em; text-transform:uppercase }

/* =========================================================================
   anexos
   ========================================================================= */
.anexos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(94px,1fr)); gap:var(--e2) }
.anexo{ border:1px solid var(--linha); border-radius:var(--r-sm); overflow:hidden; background:var(--elev) }
.anexo__mini{ height:62px; background:var(--linha); display:block; width:100%; object-fit:cover }
.anexo__nome{ padding:5px 7px; font-family:var(--fonte-mono); font-size:8px; color:var(--fraco);
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-top:1px solid var(--linha) }
.zona-solta{
  border:1px dashed var(--linha2); border-radius:var(--r-sm); min-height:93px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  font-family:var(--fonte-mono); font-size:8px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--fraco); text-align:center; padding:var(--e2);
}
.zona-solta--ativa{ border-color:var(--amarelo); background:var(--amarelo-fraco) }
.tecla{ border:1px solid var(--linha2); border-radius:var(--r-tag); padding:1px 6px; letter-spacing:0 }

/* =========================================================================
   conversa
   ========================================================================= */
.fio{ display:flex; gap:9px; padding:10px 0 1px }
.fio__linha{ width:2px; flex:1; background:var(--linha); margin-top:5px; border-radius:2px; min-height:8px }
.fio__quem{ font:500 12.5px/1 var(--fonte) }
.fio__quando{ font-family:var(--fonte-mono); font-size:8.5px; color:var(--fraco); margin-left:7px }
.fio__texto{ font:400 12.5px/1.55 var(--fonte); margin-top:3px; color:var(--suave) }
.fio__texto .mencao{ color:var(--amarelo); font-weight:500 }
.fio__acoes{ display:flex; gap:11px; align-items:center; margin-top:7px; padding-bottom:7px;
             font-family:var(--fonte-mono); font-size:8.5px; color:var(--fraco); flex-wrap:wrap }
.reacao{ display:inline-flex; align-items:center; gap:4px; border:1px solid var(--linha2);
         border-radius:var(--r-pill); padding:1px 8px; font-size:10px; background:var(--sup); cursor:pointer }
.reacao--minha{ border-color:var(--amarelo) }
.reacao--nova { border-style:dashed }

.evento{ display:flex; align-items:center; gap:9px; padding:6px 0;
         font-family:var(--fonte-mono); font-size:8.5px; color:var(--fraco) }
.evento::before{ content:''; width:6px; height:6px; border:1.5px solid var(--linha2);
                 border-radius:50%; flex-shrink:0; margin-left:9px }
.evento b{ color:var(--tinta); font-weight:500 }
.evento__regua{ flex:1; height:1px; background:var(--linha) }

/* =========================================================================
   campos
   ========================================================================= */
.campo{
  width:100%; background:var(--sup); border:1px solid var(--linha2); border-radius:var(--r-sm);
  padding:9px 12px; color:var(--tinta); font:var(--t-corpo); outline:none;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.campo::placeholder{ color:var(--fraco) }
.campo:focus{ border-color:var(--amarelo); background:var(--elev) }
.campo--area{ min-height:110px; resize:vertical; line-height:1.55 }

.caixa{ width:14px; height:14px; border:1px solid var(--linha2); border-radius:var(--r-xs);
        flex-shrink:0; cursor:pointer }
.caixa--marcada{ background:var(--amarelo); border-color:var(--amarelo) }

/* =========================================================================
   responsivo
   ========================================================================= */
@media (max-width:900px){
  :root{ --largura-coluna:84vw; --largura-conversa:100% }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}