/* =========================================================================
   ThothDesk — layout da aplicação
   Depende de tokens.css. Aqui mora só o que é arranjo de tela.
   ========================================================================= */

.oculto{ display:none !important }

/* ============================ LOGIN ============================ */
.login{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:var(--e6); background:var(--bg);
}
.login__caixa{
  width:100%; max-width:400px; background:var(--sup);
  border:1px solid var(--linha); border-radius:var(--r-lg);
  padding:var(--e8) var(--e6) var(--e6); box-shadow:var(--sombra);
  animation:sobe .5s var(--ease);
}
.login__titulo{ font-size:34px; margin:var(--e5) 0 var(--e2) }
.login__lead{ color:var(--suave); margin-bottom:var(--e6); font-size:14px; line-height:1.6 }
.login__campo{ display:block; margin-bottom:var(--e3) }
.login__campo .rotulo{ display:block; margin-bottom:6px }
.login__btn{ width:100%; justify-content:center; margin-top:var(--e4) }
.login__erro{
  font-size:12.5px; color:var(--tinta); border:1px solid var(--tinta);
  border-radius:var(--r-sm); padding:9px 12px; margin-top:var(--e3);
}

/* ============================ TOPO ============================= */
.topo{
  height:56px; display:flex; align-items:center; gap:var(--e5);
  padding:0 var(--e4); border-bottom:1px solid var(--linha);
  background:var(--sup); position:sticky; top:0; z-index:40;
}
.marca{ font:500 15px/1 var(--fonte); letter-spacing:-.02em; color:var(--forte) }
.marca b{ font-weight:400; color:var(--fraco) }

.segmentado{ display:flex; gap:var(--e1) }
.segmentado__it{
  font-family:var(--fonte-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fraco); background:transparent;
  border:1px solid transparent; border-radius:var(--r-pill);
  padding:7px 12px; cursor:pointer; white-space:nowrap;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.segmentado__it:hover:not(:disabled){ color:var(--tinta) }
.segmentado__it:disabled{ opacity:.45; cursor:not-allowed }
.segmentado__it.ativo{
  color:var(--tinta); border-color:var(--linha2); background:var(--elev); font-weight:500;
}
.segmentado__it.ativo::before{
  content:''; display:inline-block; width:14px; height:1px;
  background:var(--amarelo); vertical-align:middle; margin-right:8px;
}

.topo__dir{ margin-left:auto; display:flex; align-items:center; gap:var(--e2) }
.busca{
  display:flex; align-items:center; gap:var(--e3); min-width:230px;
  height:32px; padding:0 12px; border:1px solid var(--linha2);
  border-radius:var(--r-pill); background:transparent; cursor:pointer;
  font:var(--t-peq); color:var(--fraco);
}
.busca:hover{ border-color:var(--amarelo) }
.busca .tecla{ margin-left:auto; font-family:var(--fonte-mono); font-size:10px }

/* ========================== LINHA DE ESTADO ===================== */
.estado{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--e4);
  padding:var(--e4) var(--e4) var(--e3); flex-wrap:wrap;
}
.estado .rotulo{ margin-top:5px; display:block }
.estado__nums{ display:flex; gap:6px; flex-wrap:wrap }
.num{
  border:1px solid var(--linha2); border-radius:var(--r-sm);
  padding:6px 11px; font-family:var(--fonte-mono); font-size:11px; color:var(--fraco);
  white-space:nowrap;
}
.num b{ color:var(--tinta); font-weight:600 }
.num--alerta{ border-width:1.5px; border-color:var(--tinta); color:var(--tinta) }

/* =========================== FERRAMENTAS ======================== */
.ferramentas{
  display:flex; align-items:center; gap:6px; padding:0 var(--e4) var(--e3);
  flex-wrap:wrap;
}
.ferramentas__espaco{ flex:1 }
.ferramentas .pastilha{ cursor:pointer; font-family:var(--fonte-mono);
  font-size:10px; letter-spacing:.08em; text-transform:uppercase }
.ferramentas .pastilha b{ color:var(--tinta); font-weight:600; text-transform:none;
  font-family:var(--fonte); letter-spacing:0; font-size:11.5px }
.ferramentas .pastilha:hover{ border-color:var(--amarelo) }
.btn--peq{ padding:8px 14px; font-size:12px }

/* ============================= BOARD =========================== */
.board{
  display:flex; gap:var(--e3); align-items:stretch;
  padding:0 var(--e4) var(--e4); overflow-x:auto;
  height:calc(100dvh - 190px); min-height:320px;
}
.coluna{ height:100% }
.coluna__cab{ cursor:pointer; user-select:none }
.coluna__corpo{ min-height:60px }
.coluna--alvo .coluna__corpo{ background:var(--amarelo-fraco); border-radius:var(--r-md) }
.coluna--recolhida .coluna__cab,
.coluna--recolhida .coluna__corpo,
.coluna--recolhida .coluna__pe{ display:none }
.coluna--recolhida{ justify-content:flex-start; gap:var(--e3) }
.coluna__vertical{
  font-family:var(--fonte-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--fraco);
}
.coluna__pe:hover{ color:var(--tinta); cursor:pointer }
.coluna__novo{ display:flex; gap:6px; align-items:center }
.coluna__novo input{ flex:1; font-size:12.5px; padding:7px 10px }

.grupo:hover .grupo__nome{ color:var(--forte) }
.grupo__cv{ font-family:var(--fonte-mono); font-size:9px; color:var(--fraco); width:9px }
.grupo--fechado{ opacity:.7 }

.card__chips{ display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.mini{
  font-family:var(--fonte-mono); font-size:9px; color:var(--fraco);
  display:inline-flex; align-items:center; gap:3px;
}
.vazio{
  font-family:var(--fonte-mono); font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fraco); text-align:center;
  padding:var(--e5) var(--e2); border:1px dashed var(--linha); border-radius:var(--r-md);
}

/* ========================== CARD ABERTO ======================== */
.painel{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-start;
         justify-content:center; padding:var(--e5) var(--e4); overflow:auto }
.painel__fundo{ position:fixed; inset:0; background:rgba(10,10,10,.42);
                backdrop-filter:blur(6px); animation:fade .25s var(--ease) }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.painel__caixa{
  position:relative; width:100%; max-width:1120px; background:var(--sup);
  border:1px solid var(--linha2); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sombra); animation:painelEntra .4s var(--spring); margin:auto;
}
@keyframes painelEntra{ from{opacity:0; transform:translateY(18px) scale(.985)} to{opacity:1; transform:none} }

.pcab{ padding:var(--e4) var(--e4) var(--e3) }
.pcab__linha{ display:flex; align-items:flex-start; gap:var(--e4) }
.pcab__tit{ flex:1; min-width:0; display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap }
.pcab__dir{ display:flex; align-items:center; gap:var(--e3); flex-shrink:0 }
.ptitulo{
  font:500 21px/1.25 var(--fonte); letter-spacing:-.022em; color:var(--forte);
  border:1px solid transparent; border-radius:var(--r-sm); padding:2px 6px; margin:-2px -6px;
  min-width:60px; outline:none;
}
.ptitulo:hover{ border-color:var(--linha) }
.ptitulo:focus{ border-color:var(--amarelo); background:var(--elev) }
.cliente-chip{
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--linha2);
  border-radius:var(--r-sm); padding:5px 11px; font-size:12.5px; font-weight:500;
  background:var(--elev); white-space:nowrap;
}
.cliente-chip i{ width:9px; height:9px; border-radius:3px }

.faixa{
  display:flex; align-items:center; gap:6px; padding:10px var(--e4);
  border-top:1px solid var(--linha); border-bottom:1px solid var(--linha);
  background:var(--elev); flex-wrap:wrap;
}
.faixa select{
  font:inherit; font-size:12px; border:none; background:transparent; color:inherit;
  outline:none; cursor:pointer; max-width:170px;
}
.faixa .pastilha--acao select{ color:var(--amarelo-tinta) }

.pcorpo{ display:grid; grid-template-columns:1fr var(--largura-conversa) }
.pcorpo--sozinho{ grid-template-columns:1fr 44px }
.pmain{ padding:var(--e4); display:flex; flex-direction:column; gap:var(--e3);
        border-right:1px solid var(--linha); min-width:0 }
.pconversa{ padding:var(--e4) var(--e3) var(--e5); background:var(--elev); min-width:0 }
.pcorpo--sozinho .pconversa{ display:none }
.pfaixa-conversa{ display:none; background:var(--elev); padding:var(--e3) 0;
                  flex-direction:column; align-items:center; gap:var(--e3) }
.pcorpo--sozinho .pfaixa-conversa{ display:flex }
.pfaixa-conversa__v{ writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--fonte-mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--fraco) }

.campos{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e2) }
.campo-mini{ border:1px solid var(--linha); border-radius:var(--r-sm);
             padding:7px 10px; background:var(--elev) }
.campo-mini .rotulo{ display:block; margin-bottom:4px; font-size:8px }
.campo-mini input, .campo-mini select{
  width:100%; border:none; background:transparent; color:var(--tinta);
  font:400 12.5px/1.4 var(--fonte); outline:none;
}
.campo-mini input::placeholder{ color:var(--fraco) }

.brief{ font:400 13.5px/1.65 var(--fonte); color:var(--suave); white-space:pre-wrap;
        outline:none; border:1px solid transparent; border-radius:var(--r-sm); padding:4px; margin:-4px }
.brief:hover{ border-color:var(--linha) }
.brief:focus{ border-color:var(--amarelo); background:var(--elev) }
.brief:empty::before{ content:'Escreve o briefing…'; color:var(--fraco) }

.itens{ display:flex; flex-direction:column }
.item{ display:flex; align-items:center; gap:10px; padding:8px 0;
       border-bottom:1px solid var(--linha); font-size:13px }
.item:last-child{ border-bottom:none }
.item__tx{ flex:1 }
.item--feito .item__tx{ color:var(--fraco); text-decoration:line-through;
                        text-decoration-color:var(--linha2) }
.filho{ display:flex; align-items:center; gap:8px; border:1px solid var(--linha);
        border-radius:var(--r-sm); padding:7px 10px; background:var(--elev);
        margin-bottom:5px; font-size:12.5px; cursor:pointer }
.filho:hover{ border-color:var(--amarelo) }
.filho__etapa{ margin-left:auto; font-family:var(--fonte-mono); font-size:8px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--fraco);
  border:1px solid var(--linha2); border-radius:var(--r-tag); padding:1px 6px; white-space:nowrap }

.escrever{ display:flex; gap:var(--e2); align-items:center; padding-bottom:var(--e3);
           border-bottom:1px solid var(--linha); margin-bottom:var(--e1) }
.escrever textarea{ flex:1; resize:none; min-height:36px; max-height:140px;
  border:1px solid var(--linha2); border-radius:var(--r-sm); padding:8px 11px;
  background:var(--sup); color:var(--tinta); font:400 12px/1.45 var(--fonte); outline:none }
.escrever textarea:focus{ border-color:var(--amarelo) }
.enviar{ width:27px; height:27px; border-radius:var(--r-sm); border:none;
  background:var(--amarelo); color:var(--amarelo-tinta); font-weight:600;
  cursor:pointer; flex-shrink:0 }

.fio__ct{ flex:1; min-width:0 }
.fio--resposta{ padding-left:24px; position:relative }
.fio--resposta::before{ content:''; position:absolute; left:11px; top:0; bottom:8px; width:2px; background:var(--linha); border-radius:2px }
.fio__col{ display:flex; flex-direction:column; align-items:center; flex-shrink:0 }
.fio__imgs{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap }
.fio__imgs img{ width:74px; height:56px; object-fit:cover; border-radius:var(--r-sm);
                border:1px solid var(--linha2); cursor:pointer }
.fio__acoes button{ background:none; border:none; color:inherit; font:inherit;
                    cursor:pointer; padding:0 }
.fio__acoes button:hover{ color:var(--tinta) }

.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--tinta); color:var(--bg); padding:11px 18px;
  border-radius:var(--r-pill); font-size:13px; z-index:90;
  box-shadow:var(--sombra); animation:sobe .3s var(--spring);
}

/* arrastar */
.arrastando{ opacity:.4 }

@media (max-width:900px){
  .pcorpo{ grid-template-columns:1fr }
  .pcorpo .pconversa{ border-top:1px solid var(--linha) }
  .busca{ display:none }
  .board{ height:auto; min-height:60dvh }
}