/* ============================================================
   Trust Insight One — Estilos de páginas
   Consome as variáveis definidas em brand.css.
   Aqui ficam: layout geral, navbar, telas de autenticação,
   tabelas, dashboards, alertas, formulários estendidos.
   ============================================================ */


/* ============================================================
   1. LAYOUT GERAL
   ============================================================ */
.ti-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.ti-main {
  flex: 1;
  padding: var(--ti-esp-xl) 0;
}

.ti-footer {
  background: var(--ti-azul-escuro);
  color: var(--ti-cinza-claro);
  padding: var(--ti-esp-md) 0;
  margin-top: var(--ti-esp-xl);
}

.ti-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ti-esp-md);
  font-size: var(--ti-fs-pequeno);
}
.ti-footer em.ti-destaque {
  font-size: 1em;
  color: var(--ti-azul-intenso);
}


/* ============================================================
   2. NAVBAR
   ============================================================ */
.ti-navbar {
  background: var(--ti-branco);
  border-bottom: 1px solid rgba(25,40,71,0.06);
  box-shadow: var(--ti-sombra-sm);
  position: sticky;
  top: 0;
  z-index: 50;
}

.ti-navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ti-esp-md);
  padding: var(--ti-esp-md) var(--ti-esp-lg);
}

.ti-navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--ti-esp-sm);
  text-decoration: none;
  color: var(--ti-azul-escuro);
  font-weight: var(--ti-fw-bold);
  font-size: 1.125rem;
}
.ti-navbar__brand:hover { text-decoration: none; color: var(--ti-azul-intenso); }
.ti-navbar__brand-icon {
  width: 20px;
  height: 20px;
}
.ti-navbar__brand-name em {
  font-family: var(--ti-fonte-destaque);
  font-style: italic;
  font-weight: var(--ti-fw-regular);
  color: var(--ti-azul-intenso);
}

.ti-navbar__nav {
  display: flex;
  gap: var(--ti-esp-md);
  flex: 1;
  margin-left: var(--ti-esp-xl);
}
.ti-navbar__link {
  color: var(--ti-azul-escuro);
  text-decoration: none;
  font-weight: var(--ti-fw-medio);
  padding: var(--ti-esp-xs) var(--ti-esp-sm);
  border-radius: var(--ti-raio-sm);
  transition: background var(--ti-transicao-rapida);
}
.ti-navbar__link:hover {
  background: var(--ti-cinza-claro);
  text-decoration: none;
}

.ti-navbar__user {
  display: flex;
  align-items: center;
  gap: var(--ti-esp-md);
}
.ti-navbar__user-info {
  text-align: right;
  line-height: 1.2;
}
.ti-navbar__user-info strong {
  display: block;
  font-size: var(--ti-fs-texto-grande);
  color: var(--ti-azul-escuro);
}
.ti-navbar__user-info small {
  color: var(--ti-cinza-escuro);
  font-size: var(--ti-fs-micro);
}
.ti-navbar__lang {
  color: var(--ti-cinza-escuro);
  font-size: var(--ti-fs-pequeno);
  text-decoration: none;
  font-weight: var(--ti-fw-medio);
}
.ti-navbar__lang:hover { color: var(--ti-azul-intenso); }
.ti-navbar__lang-sep { color: var(--ti-cinza-escuro); margin: 0 4px; }


/* ============================================================
   3. AUTENTICAÇÃO (login, recuperar, definir senha)
   ============================================================ */
.ti-auth-body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--ti-cinza-claro) 0%, #d5dae4 100%);
}
.ti-auth-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Lado esquerdo institucional */
.ti-auth-side {
  background: var(--ti-azul-escuro);
  color: var(--ti-cinza-claro);
  position: relative;
  overflow: hidden;
  padding: var(--ti-esp-xxl);
  display: flex;
  align-items: flex-end;
}
.ti-auth-side__copy { position: relative; z-index: 2; max-width: 420px; }
.ti-auth-side__tag {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--ti-fs-pequeno);
  color: var(--ti-azul-intenso);
  margin: 0 0 var(--ti-esp-md);
}
.ti-auth-side__titulo {
  font-size: 3rem;
  line-height: 1.1;
  color: var(--ti-branco);
  margin: 0 0 var(--ti-esp-md);
}
.ti-auth-side__sub {
  font-size: var(--ti-fs-texto-curto);
  line-height: 1.5;
  opacity: 0.85;
}

.ti-auth-side__grafismo-1,
.ti-auth-side__grafismo-2,
.ti-auth-side__grafismo-3 {
  position: absolute;
  z-index: 1;
  opacity: 0.85;
}
.ti-auth-side__grafismo-1 {
  top: -80px; left: -40px;
  width: 340px; height: 340px;
  background: var(--ti-azul-intenso);
}
.ti-auth-side__grafismo-2 {
  top: 40%; right: -80px;
  width: 220px; height: 220px;
  background: rgba(68,160,193,0.18);
}
.ti-auth-side__grafismo-3 {
  bottom: -60px; left: 30%;
  width: 160px; height: 160px;
  border-color: rgba(255,255,255,0.4);
  background: transparent;
}

/* Lado direito (formulário) */
.ti-auth-card-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--ti-esp-xl);
}
.ti-auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--ti-branco);
  border-radius: var(--ti-raio-lg);
  padding: var(--ti-esp-xl);
  box-shadow: var(--ti-sombra-lg);
}
.ti-auth-card__brand {
  display: flex;
  align-items: center;
  gap: var(--ti-esp-sm);
  margin-bottom: var(--ti-esp-lg);
  color: var(--ti-azul-escuro);
  font-weight: var(--ti-fw-bold);
}
.ti-auth-card__brand-icon { width: 18px; height: 18px; }
.ti-auth-card__brand-name em {
  font-family: var(--ti-fonte-destaque);
  font-style: italic;
  font-weight: var(--ti-fw-regular);
  color: var(--ti-azul-intenso);
}
.ti-auth-card__titulo {
  font-size: 1.625rem;
  color: var(--ti-azul-escuro);
  margin: 0 0 var(--ti-esp-xs);
}
.ti-auth-card__sub {
  font-size: var(--ti-fs-texto-grande);
  color: var(--ti-cinza-escuro);
  margin: 0 0 var(--ti-esp-lg);
}
.ti-auth-card__rodape {
  margin-top: var(--ti-esp-md);
  text-align: center;
  font-size: var(--ti-fs-pequeno);
}
.ti-auth-foot {
  margin-top: var(--ti-esp-md);
  font-size: var(--ti-fs-pequeno);
  color: var(--ti-cinza-escuro);
}
.ti-auth-foot a { color: var(--ti-cinza-escuro); text-decoration: underline; }
.ti-auth-foot a:hover { color: var(--ti-azul-intenso); }

@media (max-width: 900px) {
  .ti-auth-wrap { grid-template-columns: 1fr; }
  .ti-auth-side { min-height: 200px; padding: var(--ti-esp-lg); }
  .ti-auth-side__titulo { font-size: 2rem; }
}


/* ============================================================
   4. FORMULÁRIOS (extensões)
   ============================================================ */
.ti-form { display: flex; flex-direction: column; gap: var(--ti-esp-md); }
.ti-form__campo { display: flex; flex-direction: column; gap: var(--ti-esp-xs); }
.ti-form__erro { color: var(--ti-erro); font-size: var(--ti-fs-pequeno); }
.ti-form__dica { color: var(--ti-cinza-escuro); font-size: var(--ti-fs-micro); }
.ti-form__linha { display: flex; align-items: center; gap: var(--ti-esp-md); }
.ti-form__linha--entre { justify-content: space-between; }
.ti-form__check {
  display: inline-flex;
  align-items: center;
  gap: var(--ti-esp-xs);
  font-size: var(--ti-fs-pequeno);
  color: var(--ti-cinza-escuro);
  cursor: pointer;
}
.ti-form__acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--ti-esp-sm);
  margin-top: var(--ti-esp-md);
}


/* ============================================================
   5. BOTÕES (variações extras)
   ============================================================ */
.ti-btn--full { width: 100%; }
.ti-btn--pequeno {
  padding: 0.375rem var(--ti-esp-md);
  font-size: var(--ti-fs-pequeno);
}


/* ============================================================
   6. LINKS DISCRETOS
   ============================================================ */
.ti-link-discreto {
  color: var(--ti-cinza-escuro);
  font-size: var(--ti-fs-pequeno);
  text-decoration: none;
}
.ti-link-discreto:hover {
  color: var(--ti-azul-intenso);
  text-decoration: underline;
}


/* ============================================================
   7. ALERTAS / FLASH MESSAGES
   ============================================================ */
.ti-flashes {
  display: flex;
  flex-direction: column;
  gap: var(--ti-esp-sm);
  margin-bottom: var(--ti-esp-lg);
}
.ti-flashes--auth { margin-bottom: var(--ti-esp-md); }

.ti-flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ti-esp-md);
  padding: var(--ti-esp-sm) var(--ti-esp-md);
  border-radius: var(--ti-raio-md);
  border-left: 4px solid;
  background: var(--ti-branco);
  font-size: var(--ti-fs-texto-grande);
  box-shadow: var(--ti-sombra-sm);
}
.ti-flash--success { border-left-color: var(--ti-sucesso); color: var(--ti-azul-escuro); }
.ti-flash--info, .ti-flash--message { border-left-color: var(--ti-azul-intenso); color: var(--ti-azul-escuro); }
.ti-flash--warning { border-left-color: var(--ti-aviso); color: var(--ti-azul-escuro); }
.ti-flash--danger, .ti-flash--error { border-left-color: var(--ti-erro); color: var(--ti-azul-escuro); }

.ti-flash__close {
  background: transparent;
  border: 0;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--ti-cinza-escuro);
  padding: 0 var(--ti-esp-sm);
}


/* ============================================================
   8. PÁGINAS COMUNS (head, sub, chip)
   ============================================================ */
.ti-page { padding-bottom: var(--ti-esp-xl); }
.ti-page__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ti-esp-md);
  margin: var(--ti-esp-md) 0 var(--ti-esp-lg);
}
.ti-page__head h1 {
  font-size: 2rem;
  color: var(--ti-azul-escuro);
  margin: 0 0 var(--ti-esp-xs);
}
.ti-page__sub {
  color: var(--ti-cinza-escuro);
  margin: 0;
  font-size: var(--ti-fs-texto-grande);
}
.ti-page__chip,
.ti-dashboard__chip {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--ti-fs-micro);
  font-weight: var(--ti-fw-semi);
  color: var(--ti-azul-intenso);
  margin-bottom: var(--ti-esp-sm);
}


/* ============================================================
   9. DASHBOARD
   ============================================================ */
.ti-dashboard { padding-bottom: var(--ti-esp-xxl); }
.ti-dashboard__head { margin: var(--ti-esp-md) 0 var(--ti-esp-xl); }
.ti-dashboard__titulo {
  font-size: 2.5rem;
  line-height: 1.1;
  color: var(--ti-azul-escuro);
  margin: 0 0 var(--ti-esp-sm);
}
.ti-dashboard__sub {
  color: var(--ti-cinza-escuro);
  font-size: var(--ti-fs-texto-curto);
  margin: 0;
}

.ti-dashboard__grid {
  display: grid;
  gap: var(--ti-esp-lg);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin-bottom: var(--ti-esp-xl);
}

.ti-dashboard-card {
  display: block;
  text-decoration: none;
  color: var(--ti-azul-escuro);
  transition: transform var(--ti-transicao-padrao), box-shadow var(--ti-transicao-padrao);
}
.ti-dashboard-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--ti-sombra-md);
}
.ti-dashboard-card__icone {
  display: inline-block;
  font-size: 1.5rem;
  margin-bottom: var(--ti-esp-sm);
}
.ti-dashboard-card h3 {
  font-size: 1.125rem;
  color: var(--ti-azul-escuro);
  margin: 0 0 var(--ti-esp-xs);
}
.ti-dashboard-card p {
  margin: 0;
  font-size: var(--ti-fs-pequeno);
  color: var(--ti-cinza-escuro);
}
.ti-dashboard-card--em-breve {
  opacity: 0.7;
  cursor: not-allowed;
  position: relative;
}
.ti-dashboard-card--em-breve::after {
  content: "em breve";
  position: absolute;
  top: var(--ti-esp-sm);
  right: var(--ti-esp-sm);
  font-size: 0.625rem;
  background: var(--ti-cinza-claro);
  color: var(--ti-cinza-escuro);
  padding: 2px 8px;
  border-radius: var(--ti-raio-pill);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--ti-fw-semi);
}

.ti-dashboard__placeholder {
  background: var(--ti-branco);
  border-radius: var(--ti-raio-lg);
  padding: var(--ti-esp-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ti-dashboard__placeholder h3 {
  font-size: 1.25rem;
  margin: 0 0 var(--ti-esp-sm);
}
.ti-dashboard__placeholder p {
  margin: 0 auto;
  max-width: 480px;
  font-size: var(--ti-fs-pequeno);
  color: var(--ti-cinza-escuro);
}
.ti-dashboard__placeholder-grafismo {
  position: absolute;
  width: 200px;
  height: 200px;
  top: -100px;
  right: -100px;
  border-color: rgba(68,160,193,0.2);
}


/* ============================================================
   10. TABELAS
   ============================================================ */
.ti-table-wrap { padding: 0; overflow: hidden; }
.ti-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;                 /* v2 (Rodada B): tabela mais compacta */
}
.ti-table thead { background: var(--ti-cinza-claro); }
.ti-table th {
  text-align: left;
  padding: 7px 12px;               /* v2: cabeçalho compacto */
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ti-cinza-escuro);
  font-weight: var(--ti-fw-semi);
}
.ti-table td {
  padding: 9px 12px;               /* v2: linhas compactas (era 16px) */
  border-top: 1px solid var(--ti-borda);
  vertical-align: middle;
}
.ti-table tbody tr:hover { background: rgba(68,160,193,0.04); }
.ti-table__acoes { text-align: right; }
.ti-table__acoes form { margin-left: var(--ti-esp-xs); }
.ti-tabela__discreto { color: var(--ti-cinza-escuro); font-size: var(--ti-fs-pequeno); }
.ti-tabela__vazio { text-align: center; padding: var(--ti-esp-xl); color: var(--ti-cinza-escuro); }

/* ============================================================
   Faixa compacta de informações (5.10.20 / B2 + B4) — projeto e ângulo.
   Caixa arredondada com células segmentadas: rótulo miúdo + valor forte.
   ============================================================ */
.ti-prj-faixa {
  display: inline-flex; flex-wrap: wrap; align-items: stretch;
  border: 1px solid var(--ti-borda); border-radius: 9px; overflow: hidden;
  background: #fff; margin: 0 0 16px; font-size: 12.5px;
}
.ti-prj-faixa__cel { padding: 6px 14px; border-right: 1px solid #eef0f4; display: flex; flex-direction: column; justify-content: center; }
.ti-prj-faixa__cel:last-child { border-right: none; }
.ti-prj-faixa__cel--alerta { background: #fbe9e9; }
.ti-prj-faixa__rot { display: block; color: var(--ti-texto-mudo); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.ti-prj-faixa__val, .ti-prj-faixa strong { color: var(--ti-texto); font-weight: 700; }
.ti-prj-faixa__cel form { margin: 0; display: flex; align-items: center; }
.ti-prj-faixa select, .ti-prj-faixa input {
  border: none; background: transparent; font-weight: 700; padding: 0; cursor: pointer;
  font-size: 12.5px; font-family: inherit; color: var(--ti-texto);
}
.ti-prj-faixa input[type="date"] { cursor: text; }
/* Etiquetas de prioridade do ângulo (5.10.20 / B2) — cores do protótipo. */
.ti-badge.ti-prio--alta  { background: #fbe0e0; color: #C84A4A; font-weight: 700; }
.ti-badge.ti-prio--media { background: #fdecdb; color: #C0791F; font-weight: 700; }
.ti-badge.ti-prio--baixa { background: #fbf3cf; color: #9A7B00; font-weight: 700; }
/* Chip de atalho (ex.: "M") dentro de botões (5.10.20 / C4). */
.ti-kbd-chip { background: rgba(255,255,255,.85); color: var(--ti-azul-intenso, #44A0C1); border-radius: 5px;
  padding: 0 5px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; margin-left: 4px; }
/* Ícone de linha nos títulos de seção (5.10.20 / C5) — coerente com o menu lateral.
   Alinha o SVG com o texto e HERDA a cor por padrão (funciona em botões coloridos,
   itens de menu, estados vazios). Só os títulos de seção ganham o azul de destaque. */
.ti-ico { display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.16em;
  margin-right: 7px; color: inherit; flex: none; }
h3 .ti-ico, .ti-prj-secao .ti-ico { color: var(--ti-azul, #44A0C1); }
h1 .ti-ico { margin-right: 9px; vertical-align: -0.12em; }
/* Prazo colorido na tabela de ângulos (5.10.20 / C2). */
.ti-prazo--atrasado { color: #C84A4A; font-weight: 700; }
.ti-prazo--proximo  { color: #2E8B6B; font-weight: 700; }
/* SLA de 72h da 1ª entrega (5.10.20 / B4) — célula colorida na faixa do ângulo. */
.ti-sla72--no_prazo  { background: #e9f6ee; } .ti-sla72--no_prazo strong  { color: #2E8B6B; }
.ti-sla72--atencao   { background: #fdf4e3; } .ti-sla72--atencao strong   { color: #8a6d00; }
.ti-sla72--critico   { background: #fbe9e9; } .ti-sla72--critico strong   { color: #C84A4A; }
.ti-sla72--ok        { background: #e9f6ee; } .ti-sla72--ok strong        { color: #2E8B6B; }
.ti-sla72--estourado { background: #fbe9e9; } .ti-sla72--estourado strong { color: #C84A4A; }
/* 5.10.20 / C3 — edição inline na faixa: prioridade colorida + campo de motivo. */
.ti-prj-faixa select.ti-prio-sel--alta  { color: #C84A4A; font-weight: 700; }
.ti-prj-faixa select.ti-prio-sel--media { color: #C0791F; font-weight: 700; }
.ti-prj-faixa select.ti-prio-sel--baixa { color: #9A7B00; font-weight: 700; }
.ti-prj-faixa [data-status-motivo] { border: 1px solid var(--ti-borda, #e4e8ee); background: #fff; border-radius: 6px; padding: 4px 6px; width: 100%; font-weight: 400; }
/* Revisão C — feedback "✓ salvo / ⚠ não salvou" do autosave da faixa (última "célula"). */
.ti-prj-faixa__salvo { align-self: center; padding: 0 12px; white-space: nowrap; }


/* ============================================================
   11. BADGES
   ============================================================ */
.ti-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--ti-raio-pill);
  font-size: var(--ti-fs-micro);
  font-weight: var(--ti-fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.ti-badge--sucesso { background: rgba(46,139,107,0.12); color: var(--ti-sucesso); }
.ti-badge--info    { background: rgba(68,160,193,0.12); color: var(--ti-azul-intenso); }
.ti-badge--aviso   { background: rgba(232,155,44,0.12); color: var(--ti-aviso); }
.ti-badge--erro    { background: rgba(200,74,74,0.12); color: var(--ti-erro); }
/* Tons do status operacional calculado */
.ti-badge--amarelo { background: rgba(232,196,44,0.18); color: #8a6d00; }
.ti-badge--laranja { background: rgba(232,120,44,0.16); color: #b3530a; }

/* ============================================================
   Status calculado · Taxonomia automática · Matriz de fees
   (Base de Experts — protótipo v3)
   ============================================================ */
/* etiqueta "auto" ao lado de campos derivados automaticamente */
.ti-auto-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: var(--ti-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ti-azul-intenso);
  background: rgba(68,160,193,0.14);
  border-radius: var(--ti-raio-pill);
  padding: 0.1rem 0.45rem;
  vertical-align: middle;
  margin-left: 0.35rem;
}
.ti-taxonomia { display: grid; gap: 0.75rem; }
.ti-taxonomia__linha { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.ti-taxonomia__linha > strong {
  min-width: 64px; color: var(--ti-cinza-escuro);
  font-size: var(--ti-fs-pequeno);
}
.ti-tax-chip {
  display: inline-block;
  font-size: var(--ti-fs-pequeno);
  border-radius: var(--ti-raio-pill);
  padding: 0.18rem 0.6rem;
  border: 1px solid transparent;
}
.ti-tax-chip--leitura { background: rgba(25,40,71,0.07);  color: var(--ti-azul-escuro); border-color: rgba(25,40,71,0.12); }
.ti-tax-chip--tema    { background: rgba(68,160,193,0.10); color: var(--ti-azul-intenso); border-color: rgba(68,160,193,0.22); }
.ti-tax-chip--setor   { background: rgba(46,139,107,0.10); color: var(--ti-sucesso); border-color: rgba(46,139,107,0.22); }

/* Resumo do fee principal */
.ti-fee-summary {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  background: var(--ti-azul-suave, rgba(68,160,193,0.06));
  border: 1px solid var(--ti-cinza-claro);
  border-radius: var(--ti-raio-md, 10px);
  padding: 0.7rem 1rem;
  margin: 0.75rem 0 1rem;
}
.ti-fee-summary__lbl { font-size: var(--ti-fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ti-cinza-escuro); }
.ti-fee-summary__val { font-size: var(--ti-fs-subtitulo); font-weight: var(--ti-fw-bold); color: var(--ti-azul-escuro); }
.ti-fee-summary__src { font-size: var(--ti-fs-pequeno); }

/* Matriz 4 modelos × online/presencial */
.ti-fee-matrix { width: 100%; border-collapse: collapse; font-size: var(--ti-fs-pequeno); }
.ti-fee-matrix th, .ti-fee-matrix td {
  border: 1px solid var(--ti-cinza-claro);
  padding: 0.55rem 0.7rem; text-align: center;
}
.ti-fee-matrix thead th { background: rgba(25,40,71,0.04); font-weight: var(--ti-fw-semi); }
.ti-fee-matrix__model { text-align: left; font-weight: var(--ti-fw-semi); }
.ti-fee-matrix__model small { display: block; font-weight: var(--ti-fw-regular); color: var(--ti-cinza-escuro); }
.ti-fee-cell--on  { background: rgba(46,139,107,0.08); color: var(--ti-azul-escuro); font-weight: var(--ti-fw-semi); }
.ti-fee-cell--off { color: var(--ti-cinza-claro); }

/* Editor da matriz de interações */
.ti-int-editor { display: grid; gap: 0.75rem; margin-top: 1rem; }
.ti-int-model {
  border: 1px solid var(--ti-cinza-claro);
  border-radius: var(--ti-raio-md, 10px);
  padding: 0.9rem 1rem;
}
.ti-int-model__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem;
}
.ti-int-cap { display: inline-flex; align-items: center; gap: 0.4rem; }
.ti-int-types { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.ti-int-type {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; flex-wrap: wrap;
  background: rgba(25,40,71,0.03); border-radius: 8px; padding: 0.5rem 0.7rem;
}
.ti-int-rate { display: inline-flex; align-items: center; gap: 0.3rem; }
.ti-input--mini { width: 110px; padding: 0.35rem 0.5rem; }
.ti-select--mini { width: auto; padding: 0.3rem 1.6rem 0.3rem 0.5rem; }
@media (max-width: 560px) { .ti-int-types { grid-template-columns: 1fr; } }

/* Cores por papel */
.ti-badge--role-admin     { background: rgba(25,40,71,0.1);  color: var(--ti-azul-escuro); }
.ti-badge--role-comercial { background: rgba(81,78,198,0.12); color: var(--ti-roxo); }
.ti-badge--role-operacoes { background: rgba(68,160,193,0.15); color: var(--ti-azul-intenso); }
.ti-badge--role-expert    { background: rgba(232,155,44,0.15); color: var(--ti-aviso); }


/* ============================================================
   12. PÁGINAS DE ERRO
   ============================================================ */
.ti-erro {
  text-align: center;
  padding: var(--ti-esp-xxl) 0;
}
.ti-erro__codigo {
  font-family: var(--ti-fonte-destaque);
  font-size: 6rem;
  line-height: 1;
  color: var(--ti-azul-intenso);
  margin: 0 0 var(--ti-esp-md);
  font-style: italic;
}
.ti-erro h1 {
  font-size: 2rem;
  margin: 0 0 var(--ti-esp-sm);
}
.ti-erro p {
  color: var(--ti-cinza-escuro);
  margin: 0 auto var(--ti-esp-lg);
  max-width: 520px;
}


/* ============================================================
   13. CRM — Layout 2 colunas, listas internas, toolbar, pills
   ============================================================ */

/* Grid de 2 colunas (informação + timeline) */
.ti-grid-2col {
  display: grid;
  gap: var(--ti-esp-lg);
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
@media (max-width: 980px) {
  .ti-grid-2col { grid-template-columns: 1fr; }
}

/* Cards com cabeçalho (título + ação) */
.ti-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ti-esp-sm);
}
.ti-card__head h3 { margin: 0; }

/* Listas dentro dos cards (contatos, oportunidades) */
.ti-lista { list-style: none; margin: 0; padding: 0; }
.ti-lista__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ti-esp-sm) 0;
  border-top: 1px solid rgba(25,40,71,0.06);
  gap: var(--ti-esp-md);
}
.ti-lista__item:first-child { border-top: none; }

/* Description list (dl/dt/dd) — usado na ficha da empresa */
.ti-dl {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--ti-esp-xs) var(--ti-esp-md);
  margin: 0;
}
.ti-dl dt {
  color: var(--ti-cinza-escuro);
  font-size: var(--ti-fs-pequeno);
  font-weight: var(--ti-fw-semi);
}
.ti-dl dd {
  margin: 0;
  font-size: var(--ti-fs-texto-grande);
  color: var(--ti-azul-escuro);
}

/* Toolbar (busca + filtros) acima das listas */
.ti-toolbar {
  display: flex;
  align-items: center;
  gap: var(--ti-esp-sm);
  margin-bottom: var(--ti-esp-md);
  flex-wrap: wrap;
}
.ti-toolbar__busca { max-width: 360px; }
.ti-toolbar__check { margin-left: var(--ti-esp-sm); }

/* Pills (filtros tipo "Todas / Prospect / ...") */
.ti-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: var(--ti-raio-pill);
  font-size: var(--ti-fs-pequeno);
  font-weight: var(--ti-fw-semi);
  color: var(--ti-azul-escuro);
  background: var(--ti-branco);
  border: 1.5px solid rgba(25,40,71,0.12);
  text-decoration: none;
  transition: all var(--ti-transicao-rapida);
}
.ti-pill:hover { border-color: var(--ti-azul-intenso); color: var(--ti-azul-intenso); text-decoration: none; }
.ti-pill--ativo {
  background: var(--ti-azul-escuro);
  color: var(--ti-branco);
  border-color: var(--ti-azul-escuro);
}
.ti-pill--ativo:hover { background: var(--ti-azul-intenso); color: var(--ti-branco); border-color: var(--ti-azul-intenso); }


/* ----- Badges por ESTÁGIO do pipeline ----- */
.ti-badge.ti-stage--prospect,
.ti-pill.ti-stage--prospect.ti-pill--ativo { background: rgba(110,166,234,0.16); color: var(--ti-azul-medio); }
.ti-badge.ti-stage--qualified,
.ti-pill.ti-stage--qualified.ti-pill--ativo { background: rgba(68,160,193,0.18); color: var(--ti-azul-intenso); }
.ti-badge.ti-stage--proposal,
.ti-pill.ti-stage--proposal.ti-pill--ativo { background: rgba(81,78,198,0.16); color: var(--ti-roxo); }
.ti-badge.ti-stage--won,
.ti-pill.ti-stage--won.ti-pill--ativo { background: rgba(46,139,107,0.16); color: var(--ti-sucesso); }
.ti-badge.ti-stage--lost,
.ti-pill.ti-stage--lost.ti-pill--ativo { background: rgba(200,74,74,0.14); color: var(--ti-erro); }


/* ============================================================
   14. KANBAN (pipeline)
   ============================================================ */
.ti-kanban {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: var(--ti-esp-md);
  margin-top: var(--ti-esp-lg);
}
@media (max-width: 960px) { .ti-kanban { grid-template-columns: 1fr; } }

.ti-kanban__coluna {
  background: var(--ti-branco);
  border-radius: var(--ti-raio-lg);
  padding: var(--ti-esp-md);
  min-height: 320px;
  border-top: 4px solid transparent;
}
.ti-kanban__coluna.ti-stage--prospect  { border-top-color: var(--ti-azul-medio); }
.ti-kanban__coluna.ti-stage--qualified { border-top-color: var(--ti-azul-intenso); }
.ti-kanban__coluna.ti-stage--proposal  { border-top-color: var(--ti-roxo); }

.ti-kanban__coluna-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ti-esp-sm);
}
.ti-kanban__coluna-head h3 { margin: 0; font-size: 1rem; }
.ti-kanban__metricas { display: flex; align-items: center; gap: var(--ti-esp-xs); color: var(--ti-cinza-escuro); font-size: var(--ti-fs-micro); }

.ti-kanban__cards { display: flex; flex-direction: column; gap: var(--ti-esp-sm); }
/* Kanban do projeto: card selecionável + botão "›" (5.10.18) */
.ti-prj-card__top { display: flex; align-items: center; gap: 6px; }
.ti-prj-card__nome { flex: 1; }
.ti-prj-card__abrir { border: 1px solid var(--ti-borda, #dbe2e8); background: #fff; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: var(--ti-azul, #3b4cca); width: 24px; height: 24px;
  border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-left: auto; }
.ti-prj-card__abrir:hover { background: var(--ti-azul-10, #eef2ff); border-color: var(--ti-azul, #3b4cca); }
.ti-prj-card--perfil { cursor: pointer; }
.ti-prj-card--perfil.is-selecionado { outline: 2px solid var(--ti-azul, #3b4cca); outline-offset: 1px; }
/* 5.10.19 / A2 — farol dentro do card do kanban do projeto (Entrega). */
.ti-prj-card__farol { margin-top: 6px; }
.ti-prj-card__farol .ti-select--mini { width: 100%; font-size: .8rem; }

.ti-kanban__card {
  display: block;
  text-decoration: none;
  color: var(--ti-azul-escuro);
  background: var(--ti-cinza-claro);
  padding: var(--ti-esp-sm) var(--ti-esp-md);
  border-radius: var(--ti-raio-md);
  border: 1px solid transparent;
  transition: all var(--ti-transicao-rapida);
}
.ti-kanban__card:hover {
  text-decoration: none;
  background: var(--ti-branco);
  border-color: var(--ti-azul-intenso);
  box-shadow: var(--ti-sombra-md);
  transform: translateY(-1px);
}
.ti-kanban__card strong { display: block; font-size: var(--ti-fs-texto-grande); margin-bottom: 2px; }
.ti-kanban__card small { display: block; margin-bottom: var(--ti-esp-sm); }
.ti-kanban__card-meta {
  display: flex; flex-wrap: wrap; gap: var(--ti-esp-sm);
  font-size: var(--ti-fs-micro); color: var(--ti-cinza-escuro);
}
.ti-kanban__vazio {
  margin: 0;
  padding: var(--ti-esp-md);
  font-size: var(--ti-fs-pequeno);
  color: var(--ti-cinza-escuro);
  text-align: center;
  font-style: italic;
}

/* 5.10.29 — colunas do kanban do PROJETO mais largas p/ o card "etiqueta"
   (era 176px, apertava o nome/ângulo). Só no kanban do projeto — o CRM e o
   quadro do ângulo não são afetados. Coluna vazia (barra 34px) tem regra mais
   específica e continua colapsando. */
.ti-prj-kanban .ti-kanban__coluna { flex-basis: 250px; width: 250px; max-width: 250px; }

/* card "etiqueta" do kanban do projeto (redesign) */
.ti-kanban__card.ti-prj-card--perfil {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 9px;
  background: #fff; border: 1px solid var(--ti-borda, #e4e8ee); border-left: 3px solid #c3ccd5; border-radius: 9px;
}
.ti-prj-card--enc-kam { border-left-color: #44a0c1; }
.ti-prj-card--enc-ra, .ti-prj-card--enc-manager { border-left-color: #e0a416; }
.ti-prj-card--enc-cliente { border-left-color: #7d5bc6; }
.ti-prj-card--enc-nenhum { border-left-color: #c3ccd5; }
.ti-kanban__card.ti-prj-card--perfil:hover {
  background: #fff; border-color: var(--ti-azul, #44a0c1); box-shadow: 0 3px 12px rgba(20, 40, 60, .12); transform: none;
}
.ti-prj-card--perfil.is-selecionado, .ti-prj-card--perfil.is-aberto {
  outline: none; border-color: var(--ti-azul, #44a0c1); box-shadow: 0 3px 12px rgba(20, 40, 60, .16);
}
.ti-prj-card--perfil .ti-prj-card__ang {
  font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: #9aa6b1; font-weight: 700; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 5.10.38 — RA do ângulo no kicker (primeiro nome, cor levemente mais forte). */
.ti-prj-card__ra { color: #6b7c8c; }
.ti-prj-card--perfil .ti-prj-card__linha { display: flex; align-items: flex-start; gap: 5px; }
.ti-prj-card--perfil .ti-prj-card__nome { flex: 1; display: block; font-weight: 700; font-size: .79rem; line-height: 1.15; margin: 0; }
.ti-prj-card--perfil .ti-prj-card__cargo {
  font-size: .66rem; color: var(--ti-cinza, #8a97a4); line-height: 1.2; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ti-prj-card--perfil .ti-kanban__card-tags { display: flex; flex-wrap: wrap; gap: 3px; margin: 0; }
/* etiquetas menores dentro do card (cabem melhor) */
.ti-prj-card--perfil .ti-badge { font-size: .58rem; padding: 1px 6px; letter-spacing: 0; }
.ti-prj-card--perfil .ti-prj-card__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  border-top: 1px dashed #eef1f4; padding-top: 4px; margin-top: 1px;
}
.ti-prj-card__modelo { font-size: .6rem; color: #9aa6b1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-prj-card__fee { font-size: .68rem; font-weight: 700; white-space: nowrap; flex: none; }
.ti-prj-card__motivo { margin: 0; }
/* aging / SLA chip do card */
.ti-aging { font-size: .58rem; font-weight: 700; padding: 1px 5px; border-radius: 5px; white-space: nowrap; flex: none;
  background: #f3f5f8; color: #8a97a4; }
.ti-aging--hoje { background: #fdf3dc; color: #8a5a00; }
.ti-aging--estourado { background: #fdecec; color: #a02929; }
/* cores das etiquetas de status / encargo / tipo */
.ti-badge--status { background: #eef4fb; border-color: #cfe0f2; color: #2f6aa8; }
.ti-badge--kam { background: #eaf5f9; border-color: #cbe6f0; color: #2f7a96; }
.ti-badge--ra, .ti-badge--manager { background: #fff5e9; border-color: #f6d9ad; color: #8a5a00; }
.ti-badge--cliente { background: #f0eefb; border-color: #d7cff2; color: #5a49a5; }
.ti-badge--tipo { background: #eef7f0; border-color: #c7e6cf; color: #2c7a49; }
/* 5.10.32 — data/hora da interação agendada (card + gaveta) */
.ti-badge--agendada { background: #e9f6ee; border-color: #bfe3cd; color: #2e7d52; font-weight: 700; }
/* 5.10.46 — tag de reagendamento em aberto (sai ao confirmar a nova data) */
.ti-badge--reagendar { background: #fdf1e3; border-color: #f2d3ad; color: #a05a1c; font-weight: 700; }
/* 5.11 — perfil que o KAM pôs direto no quadro (fora do fluxo de pesquisa) */
.ti-badge--direto { background: #eef2fb; border-color: #cfd9f2; color: #41539c; font-weight: 700; }
/* Barra de ações do quadro (hoje só o "＋ Perfil direto"). */
.ti-prj-kanban__acoes { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 10px; }
/* Popup do perfil direto: busca na Base + escolhido. */
.ti-pd-dlg { max-width: 560px; max-height: min(88vh, 900px); overflow-y: auto; }
.ti-pd-lista { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; max-height: 210px;
  overflow-y: auto; border: 1px solid var(--ti-borda, #e2e6ef); border-radius: 9px; padding: 4px; }
.ti-pd-lista[hidden] { display: none; }
.ti-pd-op { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  border: 0; background: none; cursor: pointer; text-align: left; padding: 6px 8px; border-radius: 6px;
  font: inherit; color: var(--ti-texto, #1f2d3a); }
.ti-pd-op:hover { background: var(--ti-azul-10, #eaf5f9); }
.ti-pd-op small { color: var(--ti-cinza, #8a97a4); font-size: .78rem; }
.ti-pd-escolhido { margin-top: 8px; padding: 9px 11px; border-radius: 9px;
  background: #eef2fb; border: 1px solid #cfd9f2; font-size: .88rem; }
.ti-pd-escolhido[hidden] { display: none; }
/* 5.10.38 — RA do ângulo na gaveta (mesma família do encargo RA, mais discreta) */
.ti-badge--ra-info, .ti-badge--ra[data-fluxo-ra] { background: #fdf8ec; border-color: #f0e3c0; color: #8a6d1d; }
/* 5.10.38 — caixas que crescem com o texto (comentário/Bio); teto no CSS de segurança.
   5.10.43 — e um PISO: o auto-ajuste mede o texto e encolhia a caixa para uma
   linha só. Com `min-height` ela nasce confortável e só cresce a partir daí —
   sem precisar arrastar a alcinha. */
.ti-input--cresce { resize: vertical; min-height: 4.8em; max-height: 40vh; overflow-y: auto; }
/* Caixa de comentário da gaveta: alta o bastante para ler o que se escreve. */
.ti-painel__foot [data-cmt-box].is-aberto textarea[data-cmt-input] { min-height: 6em; }
/* Bios (recrutamento e foto da entrega) pedem mais espaço que um comentário. */
.ti-painel__body [data-pessoa-campo="bio"],
.ti-painel__body [data-foto-bio] textarea { min-height: 8em; }

/* ============================================================
   5.10.32 — Disponibilidade v2 + popup de agendamento
   ============================================================ */
/* Bloco "Disponibilidade do expert" na gaveta (datas em linhas). */
.ti-disp-texto { white-space: pre-line; font-size: .8rem; color: var(--ti-texto, #1f2d3a); }
/* 5.10.34 — data escolhida pelo cliente: fica fixa, em destaque verde. */
.ti-disp-escolhida { margin: 10px 16px 0; padding: 9px 11px; border-radius: 9px;
  background: #e9f6ee; border: 1px solid #bfe3cd; }
.ti-disp-escolhida__lbl { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: #2e7d52; margin-bottom: 2px; }
.ti-disp-escolhida__val { white-space: pre-line; font-size: .85rem; font-weight: 600; color: #1f5137; }
/* Popup de agendamento (overlay sobre a gaveta). */
.ti-agendar-overlay { position: fixed; inset: 0; z-index: 1300; background: rgba(20, 30, 40, .35);
  display: flex; align-items: center; justify-content: center; }
.ti-agendar-overlay[hidden] { display: none; }
.ti-agendar-pop { background: #fff; border-radius: 12px; box-shadow: var(--ti-sombra-lg, 0 12px 40px rgba(0,0,0,.22));
  width: min(360px, 92vw); padding: 16px; }
.ti-agendar-titulo { margin: 0 0 10px; font-size: .95rem; }
.ti-agendar-resumo { margin: 0 0 12px; display: flex; flex-direction: column; gap: 4px;
  background: var(--ti-fundo, #f3f5f8); border-radius: 9px; padding: 9px 11px; }
.ti-agendar-resumo > div { display: flex; gap: 8px; font-size: .8rem; }
.ti-agendar-resumo dt { flex: 0 0 108px; color: var(--ti-cinza, #8a97a4); }
.ti-agendar-resumo dd { margin: 0; font-weight: 600; word-break: break-word; }
/* 5.10.47 — cada campo com a largura do que ele guarda: a Data esticava por
   toda a linha (flex:1) e a Hora ficava espremida no canto. Agora ficam lado a
   lado, proporcionais, e a linha respira. */
.ti-agendar-campos { display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; align-items: flex-end; }
.ti-agendar-campos label { flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; }
.ti-agendar-campos [data-agendar-data] { width: 11.5em; }
.ti-agendar-campos [data-realizado-duracao] { width: 9em; }
.ti-agendar-acoes { display: flex; justify-content: flex-end; gap: 8px; }
/* 5.10.38 — popup de agendamento v2: mais largo, em blocos (Interação + Invite).
   5.10.40 — cresceu (o texto do invite pedia espaço) e centraliza na TELA: os
   popups saíram de dentro da gaveta no template (o `transform` dela prendia o
   `position: fixed` à faixa lateral). */
.ti-agendar-pop--v2 { width: min(780px, 94vw); max-height: 90vh; overflow-y: auto; }
/* Texto do invite: nasce alto o suficiente para caber o convite inteiro. */
.ti-agendar-invite { min-height: 15.5em; line-height: 1.5; }
.ti-agendar-cap { margin: 12px 0 6px; padding-top: 10px; border-top: 1px dashed var(--ti-borda, #e4e8ee); }
.ti-agendar-pop--v2 .ti-agendar-cap:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.ti-agendar-campo-linha { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.ti-agendar-salvar-tpl { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 12px;
  font-size: .78rem; color: var(--ti-texto-2, #55636f); cursor: pointer; }
.ti-agendar-salvar-tpl input { margin-top: 2px; }
/* Bloco do Invite na gaveta (depois de agendar). */
.ti-invite-box { display: flex; flex-direction: column; gap: 7px; margin: 10px 16px 0;
  padding: 10px 12px; border-radius: 10px; background: #f4f9fc; border: 1px solid #d4e6f0; }
.ti-invite-linha { font-size: .82rem; word-break: break-all; }
.ti-invite-box .ti-btn { align-self: flex-start; }

/* ===== 5.11 / R2 — Participantes da interação =====
   Assets: campo de busca com dropdown; cada Asset escolhida vira uma LINHA com
   um campo de texto ao lado (quem participou por ela). Research segue em
   caixinhas (tem cadastro). Preenchimento é opcional. */
.ti-parts { display: flex; flex-direction: column; gap: 11px; }
.ti-parts__grupo { display: flex; flex-direction: column; gap: 5px; }

/* Busca de Asset (campo + dropdown da casa) */
.ti-parts-busca { position: relative; display: flex; align-items: center; gap: 4px; }
.ti-parts-busca .ti-input { flex: 1; }
.ti-parts-busca__seta { flex: none; width: 26px; height: 30px; border: 1px solid var(--ti-borda, #dfe6ec);
  border-radius: 8px; background: #fff; cursor: pointer; color: var(--ti-cinza, #8a97a4); font-size: .7rem; }
.ti-parts-busca__seta:hover { background: #f4f8fb; }
.ti-parts-op-lista { position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 30;
  max-height: 210px; overflow-y: auto; background: #fff; border: 1px solid var(--ti-borda, #dfe6ec);
  border-radius: 9px; box-shadow: var(--ti-sombra-md, 0 6px 18px rgba(20,40,60,.13)); padding: 3px; }
.ti-parts-op { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  padding: 6px 9px; border: 0; border-radius: 7px; background: none; cursor: pointer;
  font-size: .82rem; color: var(--ti-texto, #26333f); }
.ti-parts-op:hover { background: #eef5fa; }
.ti-parts-op__tag { margin-left: auto; font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #2a6bb0; background: #e7f0fb; border-radius: 5px; padding: 1px 6px; }

/* Linha: Asset + quem participou por ela. O rótulo do campo aparece UMA vez,
   no cabeçalho, alinhado com a coluna dos nomes (pedido do dono, 19/08). */
.ti-parts-rows-head { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.ti-parts-rows-head__espaco { flex: 0 0 33%; max-width: 33%; }
.ti-parts-rows { display: flex; flex-direction: column; gap: 5px; }
.ti-parts-row { display: flex; align-items: center; gap: 6px; }
.ti-parts-row__asset { flex: 0 0 33%; max-width: 33%; font-size: .8rem; font-weight: 700;
  color: var(--ti-texto, #26333f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-parts-row__pessoas { flex: 1; min-width: 0; }
.ti-parts-row__x { flex: none; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none;
  cursor: pointer; color: var(--ti-cinza, #8a97a4); font-size: .8rem; }
.ti-parts-row__x:hover { background: #fdecec; color: #b03a3a; }
.ti-parts__cap { font-size: .62rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ti-cinza, #8a97a4); font-weight: 800; }
.ti-parts__ops { display: flex; flex-wrap: wrap; gap: 5px; }
.ti-parts__op { display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 4px 9px; border: 1px solid var(--ti-borda, #dfe6ec); border-radius: 999px;
  background: #fff; font-size: .78rem; line-height: 1.15; transition: border-color .12s, background .12s; }
.ti-parts__op:hover { border-color: #b9cede; background: #f7fbfd; }
.ti-parts__op:has(input:checked) { border-color: #7fb3d5; background: #eaf4fa; }
.ti-parts__op input { margin: 0; flex: none; }
.ti-parts__nome { display: flex; flex-direction: column; }
.ti-parts__nome small { font-size: .66rem; color: var(--ti-cinza, #8a97a4); }
.ti-parts .ti-form__dica { margin: 0; }

/* Leitura, na gaveta */
.ti-parts-box { display: flex; flex-direction: column; gap: 7px; margin: 10px 16px 0;
  padding: 10px 12px; border-radius: 10px; background: var(--ti-fundo-2, #f7f9fb);
  border: 1px solid var(--ti-borda, #dfe6ec); }
.ti-parts-editar { margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: .72rem; font-weight: 700; color: var(--ti-azul-intenso, #2a6bb0); padding: 0; }
.ti-parts-editar:hover { text-decoration: underline; }
.ti-parts-lista { display: flex; flex-direction: column; gap: 5px; }
.ti-parts-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ti-parts-linha__cap { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ti-cinza, #8a97a4); font-weight: 800; min-width: 78px; }
.ti-parts-vazio { font-size: .72rem; color: var(--ti-cinza, #8a97a4); font-style: italic; }
.ti-parts-chip { font-size: .76rem; padding: 2px 9px; border-radius: 999px;
  background: #eef3f7; color: var(--ti-texto-2, #55636f); border: 1px solid #dde7ee; }
.ti-parts-edit { display: flex; flex-direction: column; gap: 9px;
  border-top: 1px dashed var(--ti-borda, #dfe6ec); padding-top: 9px; }
.ti-parts-acoes { display: flex; gap: 6px; justify-content: flex-end; }
/* 5.10.37 — campo Hora dividido em HH : MM (minuto sugere 00/15/30/45).
   5.10.44 — a Hora não divide a largura com a Data: HH e MM ficam do mesmo
   tamanho, compactos, e a Data fica com o resto da linha. */
.ti-agendar-hora { display: flex; align-items: center; gap: 5px; }
.ti-agendar-hora__sep { color: var(--ti-cinza, #8a97a4); font-weight: 700; }
/* 5.10.41/45 — dropdowns de HORA e MINUTO desenhados pela casa (o `<datalist>`
   e o `<input number>` eram pintados pelo Windows e ignoravam o CSS). Um
   componente só (`.ti-tempo`), na linguagem do menu ⋯ dos cards.
   5.10.44 — as duas caixas têm a MESMA largura; o espaço da setinha é reservado
   por dentro (o padding vertical fica o do .ti-input, senão as alturas
   desalinham). */
.ti-tempo { position: relative; display: block; flex: 0 0 auto; width: 4.6em; }
.ti-tempo .ti-input {
  width: 100%; padding-right: 16px; padding-left: 4px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.ti-tempo__seta {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; padding: 0 3px; line-height: 1;
  font-size: .7rem; color: var(--ti-cinza, #8a97a4);
}
.ti-tempo__seta:hover { color: var(--ti-azul-intenso, #44A0C1); }
.ti-tempo__lista {
  position: absolute; z-index: 1340; top: calc(100% + 4px); left: 0; right: 0;
  display: flex; flex-direction: column; padding: 4px;
  background: #fff; border: 1px solid var(--ti-borda, #e2e6ef); border-radius: 9px;
  box-shadow: var(--ti-sombra-lg, 0 12px 32px rgba(20,40,60,.18));
}
/* A lista de horas é longa (24) — rola dentro de si. */
.ti-tempo__lista--rola { max-height: 216px; overflow-y: auto; }
.ti-tempo__lista[hidden] { display: none; }
.ti-tempo__op {
  border: 0; background: none; cursor: pointer; padding: 6px 8px; border-radius: 6px;
  font: inherit; font-variant-numeric: tabular-nums; text-align: center; color: var(--ti-texto, #1f2d3a);
}
.ti-tempo__op:hover, .ti-tempo__op:focus-visible { background: var(--ti-azul-10, #eaf5f9); color: var(--ti-azul-intenso, #44A0C1); }
.ti-agendar-sugestao { margin: 0 0 10px; padding: 6px 10px; border-radius: 8px; font-size: .78rem;
  background: #e9f6ee; border: 1px solid #bfe3cd; color: #2e7d52; }
/* 5.10.34 — On Hold: popup (ajuda + motivo) + banner na gaveta + badge no card. */
.ti-onhold-ajuda { margin: 0 0 12px; font-size: .78rem; color: var(--ti-cinza, #8a97a4); }
.ti-onhold-motivo { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.ti-onhold-banner { display: flex; gap: 9px; align-items: flex-start; margin: 0 16px 12px;
  padding: 10px 12px; border-radius: 10px; background: #f0eefb; border: 1px solid #d7cff2; color: #4a3f7a; }
.ti-onhold-banner__ic { font-size: 1.1rem; line-height: 1; }
.ti-onhold-banner strong { font-size: .86rem; }
.ti-onhold-banner p { margin: 3px 0 0; font-size: .8rem; color: #5a4f8a; }
.ti-badge--onhold { background: #f0eefb; border-color: #d7cff2; color: #5a49a5; font-weight: 700; }


/* ============================================================
   15. TIMELINE (interações)
   ============================================================ */
.ti-timeline { list-style: none; margin: 0; padding: 0; }
.ti-timeline__item {
  display: flex;
  gap: var(--ti-esp-md);
  padding: var(--ti-esp-md) 0;
  border-top: 1px solid rgba(25,40,71,0.06);
}
.ti-timeline__item:first-child { border-top: none; }
.ti-timeline__icone {
  font-size: 1.5rem;
  flex: 0 0 40px;
  height: 40px;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ti-cinza-claro);
}
.ti-timeline__corpo { flex: 1; }
.ti-timeline__cabecalho {
  display: flex;
  align-items: baseline;
  gap: var(--ti-esp-xs);
  flex-wrap: wrap;
  margin-bottom: var(--ti-esp-xs);
}
.ti-timeline__assunto { color: var(--ti-azul-escuro); }
.ti-timeline__data {
  margin-left: auto;
  color: var(--ti-cinza-escuro);
  font-size: var(--ti-fs-micro);
}
.ti-timeline__conteudo {
  margin: 0 0 var(--ti-esp-xs);
  white-space: pre-wrap;
  color: var(--ti-azul-escuro);
}
.ti-timeline__rodape {
  color: var(--ti-cinza-escuro);
  font-size: var(--ti-fs-micro);
}
.ti-timeline__vazio {
  color: var(--ti-cinza-escuro);
  font-style: italic;
  padding: var(--ti-esp-md) 0;
}

/* Form de interação inline (dentro de card) */
.ti-form--inline-card { gap: var(--ti-esp-sm); }


/* ============================================================
   16. KPI CARDS (dashboards)
   ============================================================ */
.ti-kpi {
  background: var(--ti-branco);
  padding: var(--ti-esp-lg);
  border-radius: var(--ti-raio-lg);
  box-shadow: var(--ti-sombra-sm);
}
.ti-kpi__label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--ti-fs-micro);
  color: var(--ti-cinza-escuro);
  font-weight: var(--ti-fw-semi);
  margin: 0 0 var(--ti-esp-xs);
}
.ti-kpi__valor {
  font-family: var(--ti-fonte-principal);
  font-size: 2rem;
  font-weight: var(--ti-fw-bold);
  color: var(--ti-azul-escuro);
  margin: 0;
  line-height: 1;
}
.ti-kpi__sub {
  color: var(--ti-cinza-escuro);
  font-size: var(--ti-fs-pequeno);
  margin: var(--ti-esp-xs) 0 0;
}


/* ============================================================
   17. EXPERTS — Avatar, status badges, sensitive cards, slot list
   ============================================================ */

/* Avatar */
.ti-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ti-cinza-claro);
  border: 2px solid var(--ti-branco);
  box-shadow: var(--ti-sombra-sm);
}
.ti-avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ti-fonte-destaque);
  font-style: italic;
  font-size: 2rem;
  color: var(--ti-branco);
  background: linear-gradient(135deg, var(--ti-azul-escuro), var(--ti-azul-intenso));
}

/* Status do Expert (administrativo) */
.ti-badge.ti-status--draft    { background: rgba(232,155,44,0.16); color: var(--ti-aviso); }
.ti-badge.ti-status--active   { background: rgba(46,139,107,0.16); color: var(--ti-sucesso); }
.ti-badge.ti-status--inactive { background: rgba(64,64,64,0.16);  color: var(--ti-cinza-escuro); }

/* Disponibilidade (declarada pelo expert) */
.ti-badge.ti-avail--available   { background: rgba(46,139,107,0.16); color: var(--ti-sucesso); }
.ti-badge.ti-avail--paused      { background: rgba(232,155,44,0.16); color: var(--ti-aviso); }
.ti-badge.ti-avail--unavailable { background: rgba(200,74,74,0.14);  color: var(--ti-erro); }

/* Card de área sensível (dados bancários, fiscais) */
.ti-card--sensivel {
  border: 1.5px dashed rgba(200, 74, 74, 0.35);
  background: linear-gradient(180deg, var(--ti-branco), #fff8f8);
}
.ti-card--sensivel h3 {
  color: var(--ti-erro);
}

/* Agrupamento de tags */
.ti-tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ti-esp-xs);
}

/* Radio cards de disponibilidade */
.ti-availability-options {
  display: flex;
  flex-direction: column;
  gap: var(--ti-esp-sm);
  margin: var(--ti-esp-md) 0;
}
.ti-availability-option {
  display: flex;
  align-items: center;
  gap: var(--ti-esp-sm);
  padding: var(--ti-esp-sm) var(--ti-esp-md);
  border: 1.5px solid rgba(25,40,71,0.12);
  border-radius: var(--ti-raio-md);
  cursor: pointer;
  transition: all var(--ti-transicao-rapida);
}
.ti-availability-option:hover { border-color: var(--ti-azul-intenso); background: rgba(68,160,193,0.04); }
.ti-availability-option.is-selected,
.ti-availability-option:has(input:checked) {
  border-color: var(--ti-azul-intenso);
  background: rgba(68,160,193,0.08);
  font-weight: var(--ti-fw-semi);
}
.ti-availability-option input[type="radio"] { accent-color: var(--ti-azul-intenso); }


/* ============================================================
   18. RESPONSIVO
   ============================================================ */
@media (max-width: 768px) {
  .ti-navbar__inner { flex-wrap: wrap; }
  .ti-navbar__nav { margin: var(--ti-esp-sm) 0; order: 3; width: 100%; flex-wrap: wrap; }
  .ti-page__head { flex-direction: column; align-items: stretch; }
  .ti-table th:nth-child(5), .ti-table td:nth-child(5) { display: none; }
  .ti-dashboard__titulo { font-size: 2rem; }
  .ti-dl { grid-template-columns: 1fr; gap: var(--ti-esp-xs); }
  .ti-dl dt { margin-top: var(--ti-esp-xs); }
}

/* ============================================================
   Modal de confirmação do sistema (confirm_modal.js) — 5.10.10
   ============================================================ */
.ti-confirm-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(25, 40, 71, 0.45);
  padding: var(--ti-esp-md);
}
.ti-confirm-overlay[hidden] { display: none; }
.ti-confirm {
  background: #fff; border-radius: var(--ti-raio, 12px);
  box-shadow: var(--ti-sombra-lg);
  max-width: 440px; width: 100%;
  padding: var(--ti-esp-lg, 1.5rem);
  animation: ti-confirm-in .12s ease-out;
  /* 5.10.42 — rede de segurança: diálogo alto rola dentro de si em vez de ser
     cortado em cima e embaixo (o overlay centraliza e o excesso vazava). */
  max-height: calc(100vh - 2rem); overflow-y: auto;
}
@keyframes ti-confirm-in { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.ti-confirm__titulo { margin: 0 0 var(--ti-esp-sm, .5rem); font-size: 1.1rem; }
.ti-confirm__msg { margin: 0 0 var(--ti-esp-md); color: var(--ti-texto-2, #555); white-space: pre-wrap; }
.ti-confirm__acoes { display: flex; gap: 8px; justify-content: flex-end; }
.ti-btn-perigo { background: var(--ti-erro, #C84A4A); border-color: var(--ti-erro, #C84A4A); color: #fff; }
.ti-btn-perigo:hover { filter: brightness(0.94); }

/* Combobox filtrável (combobox.js) — 5.10.10 */
.ti-combobox { position: relative; }
.ti-combobox__lista {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--ti-borda, #e2e6ef);
  border-radius: 0 0 8px 8px; box-shadow: var(--ti-sombra-md);
  max-height: 240px; overflow-y: auto;
}
.ti-combobox__item {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 8px 12px; cursor: pointer; font-size: .92rem;
}
.ti-combobox__item:hover { background: var(--ti-azul-10, #eef2ff); }
.ti-combobox__item--vazio { color: var(--ti-texto-2, #777); font-style: italic; }

/* Menção @Nome clicável no briefing (mencoes.py) — 5.10.10 */
.ti-mencao {
  font-weight: 600; text-decoration: none; padding: 0 3px; border-radius: 4px;
}
.ti-mencao--expert { color: #1b56b0; background: #e8f0fe; }
.ti-mencao--lead   { color: #8a6d00; background: #fff6de; }
.ti-mencao:hover { text-decoration: underline; }

/* Preview de anexos (anexo_preview.js) — 5.10.10 */
.ti-anexo-overlay {
  position: fixed; inset: 0; z-index: 1010;
  display: flex; align-items: center; justify-content: center;
  background: rgba(25, 40, 71, 0.6); padding: var(--ti-esp-md);
}
.ti-anexo-overlay[hidden] { display: none; }
.ti-anexo-modal {
  background: #fff; border-radius: var(--ti-raio, 12px); box-shadow: var(--ti-sombra-lg);
  width: min(960px, 96vw); height: min(88vh, 900px); display: flex; flex-direction: column; overflow: hidden;
}
.ti-anexo-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--ti-borda, #e2e6ef);
}
.ti-anexo-modal__acoes { display: flex; gap: 8px; }
.ti-anexo-modal__corpo { flex: 1; overflow: auto; background: #f4f5f8; display: flex; }
.ti-anexo-frame { width: 100%; height: 100%; border: 0; }
.ti-anexo-img { max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; }

/* Chips de catálogo (Empresas-Alvo / Participantes) — angulo_empresas.js — 5.10.9/10 */
.ti-ea-box { position: relative; }
.ti-ea-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.ti-ea-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px;
  background: var(--ti-azul-10, #eef2ff); color: var(--ti-azul, #3b4cca);
  border-radius: 999px; font-size:.85rem; }
.ti-ea-chip__x { border:0; background:transparent; cursor:pointer; color:inherit;
  font-size:1rem; line-height:1; padding:0; }
.ti-ea-chip__x:hover { color:#c0392b; }
.ti-ea-criar { font-style: italic; }
.ti-ea-feedback { margin-left:8px; font-size:.8rem; color: var(--ti-verde, #2e7d32); }

/* ============================================================
   Comentários estilo Asana (projetos_chat.js) — 5.10.11
   ============================================================ */
.ti-cmt { display: flex; flex-direction: column; gap: var(--ti-esp-md); }
/* Abas do chat (5.10.16): Comentários / Todas as Atividades. */
.ti-cmt__tabs { display: inline-flex; gap: 3px; background: #eef1f4; border-radius: 9px; padding: 3px; margin-bottom: 8px; align-self: flex-start; }
.ti-cmt__tab { border: 0; background: none; padding: 5px 12px; border-radius: 7px; font-size: .8rem; font-weight: 600; color: #5a6b7b; cursor: pointer; }
.ti-cmt__tab.is-active { background: #fff; color: #1f6f7a; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ti-cmt__lista { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
.ti-cmt__item { display: flex; gap: 10px; padding: 10px 8px; border-radius: 10px; position: relative; }
.ti-cmt__item:hover { background: var(--ti-cinza-05, #f7f8fa); }
.ti-cmt__item--sistema { opacity: .85; font-style: italic; }
/* Aba "Comentários": esconde os eventos automáticos (status etc). */
.ti-cmt__lista--so-comentarios .ti-cmt__item--sistema { display: none; }
.ti-cmt__avatar {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  color: #fff; font-size: .78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.ti-cmt__bloco { flex: 1; min-width: 0; }
.ti-cmt__cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ti-cmt__cab strong { font-size: .92rem; }
.ti-cmt__cab small { color: var(--ti-cinza-medio, #8a90a0); font-size: .78rem; }
.ti-cmt__editado { font-style: italic; color: var(--ti-cinza-medio, #8a90a0); }
.ti-cmt__corpo { font-size: .92rem; line-height: 1.5; margin-top: 2px; word-wrap: break-word; }
.ti-cmt__corpo p { margin: 0 0 6px; }
.ti-cmt__corpo p:last-child { margin-bottom: 0; }
.ti-cmt__corpo ul, .ti-cmt__corpo ol { margin: 4px 0; padding-left: 20px; }
.ti-cmt__corpo code { background: var(--ti-cinza-10, #eef0f4); padding: 1px 5px; border-radius: 4px; font-size: .86em; }
.ti-cmt__corpo del { color: var(--ti-cinza-medio, #8a90a0); }
.ti-cmt-mencao { color: var(--ti-azul, #3b4cca); background: var(--ti-azul-10, #eef2ff); padding: 0 4px; border-radius: 4px; font-weight: 600; }
/* 5.10.21 / item 1 — menção de expert/lead no chat = link para a ficha. */
a.ti-cmt-mencao--pessoa { text-decoration: none; }
a.ti-cmt-mencao--pessoa:hover { text-decoration: underline; }
.ti-cmt-excluido { color: var(--ti-cinza-medio, #8a90a0); }
.ti-cmt__rodape { margin-top: 5px; }
.ti-cmt__curtir {
  border: 1px solid var(--ti-borda, #e2e6ef); background: #fff; border-radius: 999px;
  padding: 2px 10px; font-size: .8rem; cursor: pointer; color: var(--ti-texto-2, #555);
  transition: background .12s, border-color .12s;
}
.ti-cmt__curtir:hover { background: var(--ti-cinza-05, #f2f4f8); }
.ti-cmt__curtir.is-curtido { background: var(--ti-azul-10, #eef2ff); border-color: var(--ti-azul, #3b4cca); color: var(--ti-azul, #3b4cca); font-weight: 600; }
.ti-cmt__menu { margin-left: auto; display: none; gap: 4px; }
.ti-cmt__item:hover .ti-cmt__menu { display: flex; }
.ti-cmt__acao { border: 0; background: none; color: var(--ti-cinza-medio, #8a90a0); cursor: pointer; font-size: .78rem; padding: 2px 4px; border-radius: 4px; }
.ti-cmt__acao:hover { background: var(--ti-cinza-10, #eef0f4); color: var(--ti-texto, #222); }
.ti-cmt__edit { margin-top: 6px; }
.ti-cmt__edit-acoes { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.ti-cmt__anexo-img img { max-width: 220px; max-height: 180px; border-radius: 8px; margin-top: 6px; }
.ti-cmt__anexo-link { display: inline-block; margin-top: 6px; font-size: .85rem; }
/* Compositor + barra de formatação */
.ti-cmt__form { border: 1px solid var(--ti-borda, #e2e6ef); border-radius: 10px; padding: 8px; position: relative; }
.ti-cmt__toolbar { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.ti-cmt__toolbar button {
  border: 0; background: none; cursor: pointer; width: 28px; height: 28px; border-radius: 6px;
  color: var(--ti-texto-2, #555); font-size: .85rem;
}
.ti-cmt__toolbar button:hover { background: var(--ti-cinza-10, #eef0f4); }
.ti-cmt__toolbar-sep { width: 1px; height: 18px; background: var(--ti-borda, #e2e6ef); margin: 0 4px; }
.ti-cmt__compositor { display: flex; gap: 8px; align-items: flex-end; }
.ti-cmt__compositor textarea { flex: 1; resize: vertical; }
.ti-cmt__acoes { display: flex; align-items: center; gap: 8px; }
.ti-cmt__anexo { cursor: pointer; font-size: 1.1rem; }
.ti-cmt__mencoes { position: absolute; z-index: 20; background: #fff; border: 1px solid var(--ti-borda, #e2e6ef); border-radius: 8px; box-shadow: var(--ti-sombra-md); margin-top: 4px; }
.ti-cmt__mencao-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 12px; cursor: pointer; }
.ti-cmt__mencao-item:hover { background: var(--ti-azul-10, #eef2ff); }

/* ============================================================
   Kanban UNIFICADO do ângulo (angulo_quadros.js) — 5.10.12
   ============================================================ */
.ti-uk { display: block; }
.ti-uk__board { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; flex: 1; }
.ti-uk__col { flex: 0 0 176px; background: var(--ti-cinza-05, #f6f8fa); border-radius: 10px; padding: 7px; }
.ti-uk__col-head { background: var(--ti-cinza-05, #f6f8fa);
  margin: 0 0 8px; font-size: .76rem; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; }
.ti-uk__col-head [data-contador] { background: rgba(0,0,0,.06); border-radius: 999px; padding: 0 7px; font-size: .7rem; }
.ti-uk__col-rotulo { flex: 1; }
/* 5.10.20 / B3+C2 — coluna vazia = barra fina de 34px; expande no arraste E no
   hover. Revisão C: o estilo de "fechada" só vale quando NÃO expandida (:not) —
   a expandida fica idêntica às colunas com cards (sem corte de texto/sombra). */
.ti-uk__col--vazia { transition: flex-basis .16s ease; }
.ti-uk__board:not(.is-dragging) .ti-uk__col--vazia:not(:hover) { flex: 0 0 34px; align-items: center; overflow: hidden; }
.ti-uk__board:not(.is-dragging) .ti-uk__col--vazia:not(:hover) .ti-uk__col-head { flex-direction: column-reverse; gap: 8px; height: 100%; padding: 6px 2px; }
.ti-uk__board:not(.is-dragging) .ti-uk__col--vazia:not(:hover) .ti-uk__col-head .ti-uk__col-rotulo { writing-mode: vertical-rl; transform: rotate(180deg); flex: none; white-space: nowrap; }
.ti-uk__board:not(.is-dragging) .ti-uk__col--vazia:not(:hover) .ti-uk__col-selall,
.ti-uk__board:not(.is-dragging) .ti-uk__col--vazia:not(:hover) .ti-uk__cards { display: none; }
.ti-uk__col-head--entrega { background: rgba(46,139,107,.14); color: #2e7d52; }
.ti-uk__col-head--assinou { background: rgba(46,139,107,.10); color: #2e7d52; }
.ti-uk__col-head--recusado { background: #fdecec; color: #c0392b; }
.ti-uk__col-head--sem_retorno { background: #fdf1e3; color: #b5651d; }
.ti-uk__cards { min-height: 44px; border-radius: 8px; display: flex; flex-direction: column; gap: 7px; }
.ti-uk__cards.is-dragover { outline: 2px dashed var(--ti-azul, #3b4cca); outline-offset: 2px; background: rgba(59,76,202,.06); }
.ti-uk__col.is-bloqueado .ti-uk__cards { outline: 2px dashed #c0392b; outline-offset: 2px; background: rgba(192,57,43,.06); cursor: not-allowed; }
/* 5.10.31 — card do ângulo adota a linguagem "etiqueta" do card do projeto
   (só visual): container flex-column, borda-accent 3px pelo TIPO (expert/lead),
   subtítulo cargo·empresa, hover azul + sombra e realce do card aberto. */
.ti-uk-card { display: flex; flex-direction: column; gap: 4px;
  background: #fff; border: 1px solid var(--ti-borda, #e4e8ee); border-left: 3px solid var(--ti-cinza-medio, #c3ccd5);
  border-radius: 9px; padding: 6px 8px; font-size: .78rem; cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease; }
.ti-uk-card--expert { border-left-color: #2f6fdb; }
.ti-uk-card--lead { border-left-color: #e0a800; }
.ti-uk-card:hover { border-color: var(--ti-azul-intenso, #44A0C1); box-shadow: 0 3px 12px rgba(20, 40, 60, .12); }
.ti-uk-card.is-aberto { border-color: var(--ti-azul-intenso, #44A0C1); box-shadow: 0 3px 12px rgba(20, 40, 60, .16); }
.ti-uk-card.is-arrastando { opacity: .45; }
.ti-uk-card__top { display: flex; align-items: center; gap: 5px; }
.ti-uk-card__farol { margin-left: auto; font-size: .85rem; }
.ti-uk-card__nome { display: block; margin: 0; font-weight: 700; font-size: .78rem; line-height: 1.15; }
.ti-uk-card__cargo { display: block; margin: 0; font-size: .63rem; color: var(--ti-cinza, #8a97a4); line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-uk-card__sub { color: var(--ti-cinza-medio, #7a8794); font-size: .74rem; margin-top: 2px; }
.ti-uk-tag { font-size: .6rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px; }
.ti-uk-tag--expert { background: #e7f0fe; color: #2f6fdb; }
.ti-uk-tag--lead { background: #fff6de; color: #a5790a; }
/* 5.10.22 — vaga da Meta de Entrega (bloco pontilhado na coluna Entrega). */
.ti-uk-vaga { border: 2px dashed var(--ti-borda, #cdd8e2); border-radius: 9px; padding: 14px 10px;
  text-align: center; color: var(--ti-cinza-medio, #9aa7b4); font-size: .76rem; font-weight: 600;
  letter-spacing: .02em; background: transparent; }
/* 5.10.22 — edição inline do briefing (botão ✎ + Cancelar/Salvar). */
.ti-brief-btn { border: none; background: none; cursor: pointer; color: var(--ti-azul, #44A0C1);
  font: inherit; font-size: .8rem; font-weight: 400; margin-left: 6px; }
.ti-brief-btn:hover { text-decoration: underline; }
.ti-brief-acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
/* Painel lateral */
.ti-uk-painel { flex: 0 0 300px; background: #fff; border: 1px solid var(--ti-borda, #e7ebf0); border-radius: 12px; padding: 14px; position: sticky; top: 76px; box-shadow: var(--ti-sombra-sm); }
.ti-uk-painel[hidden] { display: none; }
.ti-uk-painel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.ti-uk-painel__dados { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.ti-uk-painel__dados > div { display: flex; gap: 8px; }
.ti-uk-painel__dados dt { flex: 0 0 76px; color: var(--ti-cinza-medio, #8a90a0); font-size: .78rem; }
.ti-uk-painel__dados dd { margin: 0; font-size: .82rem; word-break: break-word; }
.ti-uk-painel__obs { margin-top: 12px; border-top: 1px solid var(--ti-borda, #eef1f5); padding-top: 10px; }
.ti-uk-painel__obs h5 { margin: 0 0 6px; font-size: .82rem; }
.ti-uk-painel__obs textarea { margin-bottom: 6px; }
.ti-uk-painel__historico { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.ti-uk-obs { background: var(--ti-cinza-05, #f6f8fa); border-radius: 8px; padding: 6px 9px; font-size: .8rem; }
.ti-uk-obs__meta { color: var(--ti-cinza-medio, #8a90a0); font-size: .72rem; margin-top: 2px; }
.ti-uk-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #2b2f3a; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: .85rem; z-index: 1100; box-shadow: var(--ti-sombra-md); }
@media (max-width: 900px) { .ti-uk { flex-direction: column; } .ti-uk-painel { position: static; width: 100%; } }

/* Cards v2 do kanban do ângulo (5.10.13) */
.ti-uk__wrap { display: flex; gap: 12px; align-items: flex-start; }
.ti-uk__wrap .ti-uk__board { flex: 1; }
/* 5.10.19 / A5 — Placar do funil do ângulo (faixa de estatísticas, só leitura). */
.ti-uk-placar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  padding: 8px 10px; margin-bottom: 10px; background: #f6f8fb;
  border: 1px solid var(--ti-borda, #e3e8ee); border-radius: 10px; }
.ti-uk-placar__titulo { font-weight: 700; font-size: .82rem; color: #40505f; margin-right: 4px; }
.ti-uk-placar__item { font-size: .78rem; color: #55636f; background: #fff;
  border: 1px solid #e3e8ee; border-radius: 999px; padding: 2px 10px; }
.ti-uk-placar__item b { color: #1f2d3a; }
.ti-uk-placar__item--total { background: #eef2ff; border-color: #d6ddf7; }
.ti-uk-placar__item--total b { color: #3b4cca; }
.ti-uk-placar__item--assinou b, .ti-uk-placar__item--entrega b, .ti-uk-placar__item--conv b { color: #2e7d52; }
.ti-uk-placar__item--sem_retorno b, .ti-uk-placar__item--recusado b { color: #a23b3b; }
.ti-uk-placar__item--conv { margin-left: auto; background: #eafaf1; border-color: #cdeeda; }
/* Barra de filtros: fica na linha do cabeçalho "Perfis" (5.10.13, ajuste pós-teste) */
.ti-uk-filtros { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: 1; }
.ti-uk-filtros__busca { flex: 1; min-width: 160px; max-width: 260px; }
.ti-uk-filtros .ti-select { max-width: 150px; font-size: .85rem; padding-top: 5px; padding-bottom: 5px; }
.ti-uk-filtros__contagem { font-size: .8rem; color: var(--ti-cinza-medio, #8a90a0); }
.ti-uk-card__mais { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: .88rem; line-height: 1; color: var(--ti-cinza-medio, #8a90a0); padding: 0 3px; border-radius: 5px; }
.ti-uk-card__mais:hover { background: var(--ti-cinza-10, #eef0f4); color: var(--ti-texto, #222); }
/* Botão "›" que abre o painel (o clique no card seleciona) — 5.10.18 */
.ti-uk-card__abrir { border: 1px solid var(--ti-borda, #dbe2e8); background: #fff; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: var(--ti-azul, #3b4cca); width: 24px; height: 24px;
  border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ti-uk-card__mais + .ti-uk-card__abrir { margin-left: 2px; }
.ti-uk-card__abrir:hover { background: var(--ti-azul-10, #eef2ff); border-color: var(--ti-azul, #3b4cca); }
/* 5.10.20 / B3 — lápis "Registrar atualização" no card (clique no card abre o painel). */
.ti-uk-card__atu { margin-left: auto; border: 1px solid var(--ti-borda, #e4e8ee); background: #fff;
  color: var(--ti-azul-intenso, #44A0C1); cursor: pointer; width: 21px; height: 21px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ti-uk-card__atu svg { width: 12px; height: 12px; }
.ti-uk-card__atu:hover { background: #eef4f8; border-color: var(--ti-azul-intenso, #44A0C1); }
.ti-uk-card__atu + .ti-uk-card__mais { margin-left: 2px; }
/* Card selecionável: cursor de "clique seleciona" */
.ti-uk-card { cursor: pointer; }
/* Contagem de contatos por canal no painel (5.10.18) */
.ti-painel-canais { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .78rem; }
.ti-painel-canais__lbl { color: var(--ti-cinza-medio, #8a90a0); }
.ti-canal-cont { background: #eef1f5; border-radius: 999px; padding: 2px 8px; font-weight: 600; color: #40505f; }
.ti-uk-card__badges { display: flex; flex-wrap: wrap; gap: 3px; margin: 0; }
.ti-uk-badge { font-size: .6rem; padding: 1px 5px; border-radius: 999px; background: var(--ti-cinza-10, #eef0f4); color: var(--ti-texto-2, #556); white-space: nowrap; }
.ti-uk-badge--fup.is-medio { background: #fdf1e3; color: #b5651d; }
.ti-uk-badge--fup.is-alto { background: #fdecec; color: #c0392b; font-weight: 700; }
.ti-uk-badge--frio { color: #8a90a0; }
.ti-uk-badge--recontato { background: #fdf1e3; color: #b5651d; font-weight: 600; }
.ti-uk-badge--fee { background: rgba(46,139,107,.14); color: #2e7d52; font-weight: 600; }
.ti-uk-badge--dias { background: #eaf1fb; color: #2a6bb0; font-weight: 600; }
/* Etiqueta do motivo de encerramento (5.10.19 / A1) — ângulo e projeto. */
.ti-uk-badge--motivo, .ti-badge--motivo { background: #fbe9e9; color: #a23b3b; font-weight: 600; }
/* Aviso de reenvio ao mesmo cliente (5.10.19 / B1). */
.ti-badge--reenvio { background: #fdf1e3; color: #a05a1c; font-weight: 600; }
/* Card concluído = compacto (só nome + tag), 5.10.16 */
.ti-uk-card__concluido-tag { display: none; margin: 0; font-size: .64rem; color: #7a8794; }
.ti-uk-card--concluido { opacity: .82; }
.ti-uk-card--concluido .ti-uk-card__concluido-tag { display: inline-block; }
.ti-uk-card--concluido .ti-uk-card__cargo,
.ti-uk-card--concluido .ti-uk-card__badges,
.ti-uk-card--concluido .ti-uk-card__acoes { display: none; }
.ti-uk-card__acoes { display: flex; gap: 5px; margin: 0; }
.ti-uk-acao { border: 1px solid var(--ti-borda, #e7ebf0); background: #fff; border-radius: 7px; padding: 2px 8px; font-size: .68rem; cursor: pointer; }
.ti-uk-acao:hover { background: var(--ti-azul-10, #eef2ff); border-color: var(--ti-azul, #3b4cca); }
.ti-uk-menu { position: absolute; z-index: 1050; background: #fff; border: 1px solid var(--ti-borda, #e2e6ef); border-radius: 10px; box-shadow: var(--ti-sombra-lg); min-width: 200px; padding: 6px; max-height: 320px; overflow-y: auto; }
.ti-uk-menu__sec { font-size: .69rem; text-transform: uppercase; letter-spacing: .4px; color: var(--ti-cinza-medio, #8a90a0); padding: 6px 8px 2px; }
.ti-uk-menu__item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: .84rem; }
.ti-uk-menu__item:hover { background: var(--ti-azul-10, #eef2ff); }
.ti-uk-menu__item.is-off { color: #c9ced8; cursor: not-allowed; }
.ti-uk-menu__item--perigo { color: #b4433d; }
.ti-uk-menu__item--perigo:hover { background: #fbe9e9; }
/* Estado vazio do quadro do ângulo (5.10.15) */
.ti-uk-vazio { text-align: center; padding: 22px 18px; margin-bottom: 12px; background: #f6f8fb;
  border: 1px dashed var(--ti-borda, #d7deea); border-radius: 12px; color: var(--ti-cinza-escuro, #5a6b7b); }
.ti-uk-vazio__ico { font-size: 1.8rem; }
.ti-uk-vazio strong { display: block; margin: 6px 0 4px; color: var(--ti-azul-escuro, #1f2d3a); }
.ti-uk-vazio p { margin: 0 auto; max-width: 520px; font-size: .85rem; }
.ti-uk-painel__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ti-uk-campo { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.ti-uk-campo span { font-size: .74rem; color: var(--ti-cinza-medio, #8a90a0); }

/* Cards v2 — ajustes pós-teste (5.10.13) */
.ti-uk-acao--icone { display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; }
.ti-uk-acao--icone svg { display: block; width: 13px; height: 13px; }
.ti-uk-badge--sem-fee { color: #b0b6c2; }
/* Diálogo Duplicar: busca projeto → ângulo */
.ti-dup-lista { max-height: 200px; overflow-y: auto; margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.ti-dup-item { display: block; width: 100%; text-align: left; border: 1px solid var(--ti-borda, #e7ebf0); background: #fff; border-radius: 8px; padding: 7px 10px; cursor: pointer; font-size: .86rem; }
.ti-dup-item:hover { background: var(--ti-azul-10, #eef2ff); border-color: var(--ti-azul, #3b4cca); }
.ti-dup-item small { color: var(--ti-cinza-medio, #8a90a0); }
/* Picker multi-seleção (Expert da Base / Lead existente) — 5.10.15 */
.ti-pick-lista { max-height: 300px; overflow-y: auto; margin: 8px 0; display: flex; flex-direction: column; gap: 2px; }
.ti-pick-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.ti-pick-item:hover { background: var(--ti-azul-10, #eef2ff); }
.ti-pick-item small { color: var(--ti-cinza-medio, #8a90a0); }
.ti-pick-item input { margin: 0; flex: 0 0 auto; }
/* Seletor de membros do +Lista v2 / "de outro ângulo" (5.10.21 / D) */
.ti-mem-lista { max-height: 340px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.ti-mem-item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 7px; }
.ti-mem-item:hover { background: var(--ti-azul-10, #eef2ff); }
.ti-mem-item.is-desativado { opacity: .55; }
.ti-mem-item input[type="checkbox"] { margin: 0; flex: 0 0 auto; }
.ti-mem-item__nome { flex: 1; min-width: 0; font-size: .86rem; }
.ti-mem-item__nome small { color: var(--ti-cinza-medio, #8a90a0); }
.ti-mem-pos { color: var(--ti-azul, #44A0C1); font-weight: 600; }
.ti-mem-item__acao { flex: 0 0 auto; }
.ti-select--mini { padding: 2px 6px; font-size: .76rem; border-radius: 6px; }
/* Caixa suspensa de novo lead (5.10.15) */
.ti-lr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 8px; }
.ti-lr-campo { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; color: var(--ti-cinza-escuro, #5a6b7b); font-weight: 600; }
.ti-lr-campo input { font-weight: 400; }
@media (max-width: 560px) { .ti-lr-grid { grid-template-columns: 1fr; } }

/* Campo bloqueado no painel: cinza mas COPIÁVEL (readonly, não disabled — T13) */
.ti-uk-painel__dados input[readonly] {
  background: var(--ti-cinza-10, #eef0f4); color: #8a90a0; border-style: dashed; cursor: text;
}
/* Painel do card — refinamentos pós-teste (5.10.13) */
.ti-uk-painel__badges .ti-uk-badge { font-size: .8rem; padding: 3px 10px; }  /* T6: maior no painel */
.ti-uk-campo__row { display: flex; gap: 6px; align-items: center; }
.ti-uk-campo__row .ti-input { flex: 1; }
/* T14: "Abrir" e "✕" com o MESMO tamanho no cabeçalho do painel */
.ti-uk-painel__head [data-painel-ficha],
.ti-uk-painel__head [data-painel-fechar] { padding: 2px 9px; font-size: .74rem; white-space: nowrap; line-height: 1.4; }

/* Botão "＋ Expert da Base" com busca flutuante (5.10.13, add expert) */
.ti-add-pessoa { position: relative; }
.ti-add-pessoa > summary { list-style: none; cursor: pointer; }
.ti-add-pessoa > summary::-webkit-details-marker { display: none; }
.ti-add-pessoa__busca {
  position: absolute; z-index: 40; margin-top: 6px; min-width: 320px;
  background: #fff; border: 1px solid var(--ti-borda, #e2e6ef); border-radius: 10px;
  padding: 8px; box-shadow: var(--ti-sombra-md);
}

/* ============================================================
   Painel-gaveta da pessoa (overlay estilo Asana) — 5.10.14
   ============================================================ */
.ti-painel {
  position: fixed; top: 0; right: 0; height: 100vh; width: 45vw; min-width: 380px; max-width: 720px;
  background: #fff; box-shadow: -8px 0 28px rgba(25,40,71,.18); z-index: 1200;
  display: flex; flex-direction: column; padding: 16px 18px; overflow-y: auto;
  transform: translateX(100%); transition: transform .18s ease-out;
}
.ti-painel.is-open { transform: translateX(0); }
.ti-painel[hidden] { display: none; }
.ti-painel-backdrop { position: fixed; inset: 0; background: rgba(25,40,71,.18); z-index: 1190; }
.ti-painel-backdrop[hidden] { display: none; }
.ti-painel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.ti-painel__ident h4 { margin: 5px 0 2px; font-size: 1.1rem; }
.ti-painel__head-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.ti-painel__head-acoes [data-painel-ficha],
.ti-painel__head-acoes [data-painel-fechar] { padding: 2px 9px; font-size: .74rem; white-space: nowrap; line-height: 1.5; }
.ti-painel__sec { margin: 4px 0 12px; }
/* 5.10.19 / B1 — aviso de reenvio ao mesmo cliente (< 3 meses). */
.ti-painel__aviso-reenvio { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px;
  background: #fdf1e3; border: 1px solid #f2d3ad; color: #a05a1c; font-size: .82rem; font-weight: 600; }
.ti-painel__campos { display: flex; flex-direction: column; gap: 9px; }
.ti-painel__fee { font-weight: 600; font-size: .95rem; }
.ti-painel__hist { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.ti-painel__rodape { margin-top: auto; padding-top: 14px; }

/* 5.10.30 — gaveta v2: 3 faixas (cabeçalho fixo · corpo rolável · rodapé fixo).
   5.10.34 — herda a largura da base (45vw, mín. 380 / máx. 720); o 480px fixo
   apertava a gaveta. Só zera o padding (as 3 faixas têm o seu próprio). */
.ti-painel--v2 { padding: 0; overflow: hidden; }
.ti-painel--v2 .ti-painel__head {
  flex: none; display: flex; align-items: flex-start; justify-content: flex-start; gap: 12px;
  padding: 14px 16px 10px; margin: 0; border-bottom: 1px solid var(--ti-fundo, #f3f5f8);
}
.ti-painel--v2 .ti-painel__body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 14px;
}
.ti-painel--v2 .ti-painel__foot {
  flex: none; border-top: 1px solid var(--ti-borda, #e4e8ee); padding: 10px 16px 12px;
  display: flex; flex-direction: column; gap: 8px; background: #fff;
}
.ti-painel--v2 .ti-hist-bloco { margin-top: 0; }
.ti-painel--v2 .ti-painel__hist { max-height: none; overflow: visible; margin-top: 8px; }
/* cabeçalho: coluna de ícones de contato + identidade */
.ti-painel__contato-ic { display: flex; flex-direction: column; gap: 6px; flex: none; padding-top: 2px; }
/* 5.10.37 — linha de contatos: WhatsApp (número) · e-mail · LinkedIn lado a lado. */
.ti-painel__contatos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
/* 5.10.34 — número do WhatsApp sempre visível (chip com o número). */
.ti-painel__tel { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; height: 26px;
  border: 1px solid var(--ti-borda, #e4e8ee); background: #f7fbf8; border-radius: 999px; cursor: pointer;
  font-size: .74rem; font-weight: 600; color: #2e7d52; }
.ti-painel__tel:hover { border-color: #25D366; background: #eefaf1; }
.ti-painel__tel span { white-space: nowrap; }
/* na linha de contatos os ícones acompanham a altura do chip do telefone. */
.ti-painel__contatos .ti-icobtn { width: 26px; height: 26px; }
.ti-icobtn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  background: #f7f9fb; border: 1px solid var(--ti-borda, #e4e8ee); border-radius: 8px;
  color: #41505f; cursor: pointer; font-size: .9rem; text-decoration: none; padding: 0;
}
.ti-icobtn:hover { border-color: var(--ti-azul, #44a0c1); background: var(--ti-azul-10, #eaf5f9); }
.ti-icobtn--lkd { font-size: .76rem; font-weight: 700; }
.ti-painel__ident { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ti-painel__ident-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ti-painel__ident-main { min-width: 0; }
.ti-painel--v2 .ti-painel__ident-main h4 { margin: 3px 0 1px; font-size: 1.18rem; }
.ti-painel--v2 .ti-painel__head-acoes { gap: 6px; }
/* foto da entrega enxuta (v2): título + ⚠️/editável, Bio → Fee → Justificativa */
.ti-foto-cap { display: flex; align-items: center; gap: 8px; }
.ti-cap { font-size: .62rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ti-cinza, #8a97a4); font-weight: 800; }
.ti-lab { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ti-cinza, #8a97a4); font-weight: 700; }
.ti-foto-fld { display: flex; flex-direction: column; gap: 3px; }
.ti-foto-fld--fee { flex-direction: row; align-items: center; gap: 8px; }
.ti-foto-fld--fee .ti-foto-valor { font-weight: 700; font-size: .9rem; }
.ti-foto-editavel-tag { font-size: .68rem; font-weight: 700; color: #8a5a00; background: #fff5e9;
  border: 1px solid #f6d9ad; border-radius: 6px; padding: 1px 7px; margin-left: auto; }
.ti-foto-just { border-left: 3px solid #f6d9ad; background: #fffaf2; border-radius: 0 8px 8px 0;
  padding: 6px 10px; display: flex; flex-direction: column; gap: 1px; }
.ti-foto-just .ti-lab { color: #8a5a00; }
.ti-painel__remover { align-self: flex-start; }
/* Histórico estilo Asana (5.10.16) — abas + itens auto/manual + caixa embaixo.
   Compartilhado pelo painel do card (ângulo e projeto) e pela ficha do lead. */
.ti-hist-bloco { margin-top: 12px; border-top: 1px solid var(--ti-borda, #eef1f5); padding-top: 10px; display: flex; flex-direction: column; }
.ti-hist-tabs { display: inline-flex; gap: 3px; background: #eef1f4; border-radius: 9px; padding: 3px; align-self: flex-start; }
.ti-hist-tab { border: 0; background: none; padding: 5px 12px; border-radius: 7px; font-size: .8rem; font-weight: 600; color: #5a6b7b; cursor: pointer; }
.ti-hist-tab.is-active { background: #fff; color: #1f6f7a; box-shadow: var(--ti-sombra-sm, 0 1px 3px rgba(0,0,0,.08)); }
.ti-hist-item { font-size: .82rem; color: #1f2d3a; }
.ti-hist-item__head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.ti-hist-item__head strong { font-size: .84rem; }
.ti-hist-item__meta { color: #8a97a4; font-size: .72rem; }
.ti-hist-item__body { margin-top: 2px; background: #f6f8fa; border-radius: 8px; padding: 6px 9px; }
/* Evento automático: discreto, numa linha, cinza (não é comentário). */
.ti-hist-item--auto { display: flex; align-items: center; gap: 6px; color: #8a97a4; font-size: .76rem; }
.ti-hist-item--auto .ti-hist-item__ico { opacity: .8; }
/* Campo + botão de enviar (➤) lado a lado, estilo Asana (5.10.23). */
.ti-hist-compor { margin-top: 10px; display: flex; align-items: flex-end; gap: 6px; }
.ti-hist-compor > textarea, .ti-hist-compor > [data-cmt-input] { flex: 1; min-width: 0; }
/* §15 (5.10.23) — caixa de comentário estilo Asana: colapsa quando vazia/sem foco. */
[data-cmt-box]:not(.is-aberto) [data-cmt-expand] { display: none !important; }
[data-cmt-box]:not(.is-aberto) textarea[data-cmt-input] { height: 40px; min-height: 40px; resize: none; overflow: hidden; }
[data-cmt-box]:not(.is-aberto) .ti-cmt__editor { min-height: 1.5em; max-height: 2.6em; }
[data-cmt-box].is-aberto textarea[data-cmt-input] { resize: vertical; }
/* Botão de enviar comentário (ícone ➤), reaproveitado em todos os chats. */
.ti-cmt-send {
  flex: 0 0 auto; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--ti-azul, #3b4cca); color: #fff;
  font-size: .95rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: filter .15s ease;
}
.ti-cmt-send:hover { filter: brightness(1.08); }
.ti-cmt-send:disabled { opacity: .5; cursor: default; }
.ti-painel .ti-uk-painel__badges { margin-top: 6px; }
.ti-painel .ti-uk-painel__badges .ti-uk-badge { font-size: .78rem; padding: 3px 9px; }
.ti-painel input[readonly], .ti-painel textarea[readonly] {
  background: var(--ti-cinza-10, #eef0f4); color: #556; border-style: dashed; cursor: text;
}
.ti-uk-acao--remover { color: #c0392b; }
.ti-uk-acao--remover:hover { background: #fdecec; border-color: #c0392b; }
@media (max-width: 900px) { .ti-painel { width: 92vw; max-width: none; } }

/* 5.10.25 — Fluxo de Aprovação na gaveta (foto da entrega + botão Ação) */
/* Elementos com display:flex/grid ignorariam o atributo [hidden] (a regra de
   classe vence o `[hidden]{display:none}` do navegador). Reforça o hidden. */
[hidden] { display: none !important; }
.ti-fluxo-box { display: flex; flex-direction: column; gap: 10px; }
.ti-fluxo-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ti-badge--encargo { background: #eef2ff; color: #3b4cca; border: 1px solid #dfe4ff; }
.ti-foto-entrega {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--ti-fundo, #f6f8fa); border: 1px solid var(--ti-borda, #e4e8ee);
  border-radius: 10px; padding: 10px;
}
.ti-foto-aviso {
  font-size: .78rem; color: #8a5a00; background: #fff7e6;
  border: 1px solid #ffe2a8; border-radius: 8px; padding: 7px 9px;
}
.ti-foto-warn { cursor: help; }
.ti-foto-entrega .ti-uk-campo > span {
  font-size: .72rem; color: #8a97a4; text-transform: uppercase;
  letter-spacing: .02em; display: block; margin-bottom: 2px;
}
.ti-foto-valor { font-size: .85rem; color: #1f2d3a; white-space: pre-wrap; }
.ti-foto-valor textarea { width: 100%; }
.ti-foto-modelos { margin: 4px 0 0; padding-left: 16px; font-size: .8rem; color: #55606c; }
.ti-foto-modelos li { margin-bottom: 3px; }
.ti-input--mini { width: 90px; display: inline-block; padding: 3px 6px; }
.ti-input--moeda { width: 54px; display: inline-block; padding: 3px 6px; text-transform: uppercase; }
.ti-foto-edit-acoes { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 4px; }
.ti-acao-box { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.ti-acao-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.ti-acao-aguardando { font-style: italic; }
/* 5.10.28 — barra da ação "armada" (acima da caixa de comentário) */
.ti-acao-armada {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--ti-azul-10, #eef2ff); border: 1px solid var(--ti-azul, #3b4cca);
  border-radius: 8px; padding: 6px 9px; font-size: .82rem;
}
.ti-acao-armada__lbl { font-weight: 600; color: var(--ti-azul, #3b4cca); }
.ti-acao-armada__x {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: #8a97a4; font-size: 1rem; line-height: 1; padding: 2px 4px;
}
.ti-acao-armada__x:hover { color: #c0392b; }
.ti-select--mini { padding: 3px 6px; font-size: .8rem; max-width: 100%; }

/* Seleção múltipla + barra de ações em massa no kanban do ângulo (5.10.14) */
.ti-uk-card__sel { margin-right: 2px; cursor: pointer; opacity: .5; }
.ti-uk-card__sel:checked, .ti-uk-card__sel:hover,
.ti-uk-card.is-selecionado .ti-uk-card__sel { opacity: 1; }
.ti-uk-massa {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--ti-azul-10, #eef2ff); border: 1px solid var(--ti-azul, #3b4cca);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 10px;
}
.ti-uk-massa .ti-select { max-width: 180px; }
/* Barra de massa FLUTUANTE (5.10.17) — fixa no rodapé, centralizada. */
.ti-uk-massa--flutuante {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 1150; margin: 0; background: #fff; box-shadow: 0 10px 30px rgba(20,40,60,.22);
  border-color: #cdd6e6;
}
/* O display:flex acima venceria o atributo [hidden]; esta regra devolve o
   comportamento de esconder a barra quando nada está selecionado (5.10.18). */
.ti-uk-massa[hidden] { display: none; }
.ti-uk-massa__count { font-weight: 700; color: var(--ti-azul-escuro, #1f2d3a); }
.ti-uk-massa__dica { font-size: .78rem; color: var(--ti-cinza-medio, #8a90a0); }
.ti-uk__col-selall { margin-right: 4px; vertical-align: middle; cursor: pointer; }
.ti-uk-card.is-selecionado { outline: 2px solid var(--ti-azul, #3b4cca); outline-offset: 1px; }
/* Popup "Registrar atualização" (5.10.17) */
.ti-atu { text-align: left; }
.ti-atu-sec { margin-bottom: 12px; }
.ti-atu-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ti-atu-btn {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  border: 1px solid var(--ti-borda, #dbe2e8); background: #fff; border-radius: 10px;
  padding: 10px 12px; cursor: pointer; font: inherit; text-align: left;
}
.ti-atu-btn small { color: var(--ti-cinza-medio, #8a90a0); font-size: .74rem; }
.ti-atu-btn.is-on { border-color: var(--ti-azul, #3b4cca); background: var(--ti-azul-10, #eef2ff); }
/* 5.10.21 / F — tipo desabilitado quando a coluna de destino fixa o outro. */
.ti-atu-btn.is-desativado, .ti-atu-btn:disabled { opacity: .4; cursor: not-allowed; }
/* 5.10.21 / G — modelos + fee no popup de Entrega. */
.ti-eg-modelos { display: flex; flex-direction: column; gap: 5px; }
.ti-eg-modelo { display: flex; align-items: center; gap: 8px; }
.ti-eg-modelo span { flex: 1; font-size: .84rem; }
.ti-eg-modelo input { max-width: 130px; }
/* 5.10.42 — popup de Entrega: 3 faixas (título fixo · corpo rolável · botões
   fixos) e mais largo. Sem isso o diálogo estourava a tela e era cortado. */
.ti-eg-dlg {
  max-width: 720px; display: flex; flex-direction: column;
  max-height: min(88vh, 900px); overflow: hidden; padding-bottom: 0;
}
.ti-eg-dlg .ti-confirm__titulo { flex: none; }
.ti-eg-corpo {
  flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
  margin: 0 -4px; padding: 2px 4px 6px;
}
.ti-eg-dlg .ti-confirm__acoes {
  flex: none; margin: 0; padding: 12px 0 16px;
  border-top: 1px solid var(--ti-borda, #e4e8ee); background: #fff;
}
/* Fees por modelo em grade: linhas = modelo · colunas = modalidade. */
.ti-eg-grade { display: grid; gap: 6px 8px; align-items: center; }
.ti-eg-grade__col {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ti-cinza, #8a97a4); text-align: center;
}
.ti-eg-grade__lin { font-size: .82rem; color: var(--ti-texto-2, #55636f); }
.ti-eg-grade__vazio { text-align: center; color: var(--ti-cinza, #b3bfc8); font-size: .85rem; }
.ti-eg-cel .ti-input { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.ti-atu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ti-chip-btn {
  border: 1px solid var(--ti-borda, #dbe2e8); background: #fff; border-radius: 999px;
  padding: 4px 12px; font-size: .82rem; cursor: pointer; color: #1f2d3a;
}
.ti-chip-btn:hover { border-color: var(--ti-azul, #3b4cca); }
.ti-chip-btn.is-on { border-color: var(--ti-azul, #3b4cca); background: var(--ti-azul-10, #eef2ff); font-weight: 600; }
.ti-chip-btn--coment { font-size: .78rem; }
.ti-atu-det > summary { cursor: pointer; font-size: .82rem; color: var(--ti-cinza-escuro, #5a6b7b); font-weight: 600; }
.ti-atu-individual { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ti-atu-ind { display: grid; grid-template-columns: 130px 1fr; gap: 8px; align-items: center; font-size: .82rem; }
.ti-atu-ind input { border: 1px solid var(--ti-borda, #dbe2e8); border-radius: 7px; padding: 5px 8px; font: inherit; }
.ti-atu-resumo { background: #f6f8fa; border-radius: 8px; padding: 7px 10px; font-size: .82rem; color: #40505f; }

/* Editor WYSIWYG dos comentários (contenteditable) — 5.10.14 */
.ti-cmt__editor { min-height: 46px; max-height: 220px; overflow-y: auto; cursor: text; }
.ti-cmt__editor:empty:before { content: attr(data-placeholder); color: var(--ti-cinza-medio, #9aa0ab); pointer-events: none; }
.ti-cmt__editor:focus { outline: none; }
.ti-cmt__editor a { color: var(--ti-azul, #3b4cca); text-decoration: underline; }
.ti-cmt__corpo a { color: var(--ti-azul, #3b4cca); text-decoration: underline; }
.ti-cmt__edit .ti-cmt__toolbar { margin-bottom: 6px; }

/* Dropdown "＋ Adicionar ao ângulo" no cabeçalho (5.10.14) */
.ti-head-acoes { display: flex; gap: 8px; align-items: flex-start; }
.ti-add-dd { position: relative; }
.ti-add-dd > summary { list-style: none; cursor: pointer; }
.ti-add-dd > summary::-webkit-details-marker { display: none; }
.ti-add-dd__menu {
  position: absolute; right: 0; top: 100%; margin-top: 6px; z-index: 60;
  background: #fff; border: 1px solid var(--ti-borda, #e2e6ef); border-radius: 10px;
  box-shadow: var(--ti-sombra-lg); padding: 10px; min-width: 300px;
  display: flex; flex-direction: column; gap: 6px;
}
.ti-add-dd__expert { display: flex; flex-direction: column; gap: 4px; position: relative; margin-bottom: 4px; }
.ti-add-dd__item {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 8px 8px; border-radius: 7px; cursor: pointer; text-decoration: none;
  color: var(--ti-texto, #222); font-size: .9rem;
}
.ti-add-dd__item:hover { background: var(--ti-azul-10, #eef2ff); text-decoration: none; }

/* 5.11 / R5 — popup Alterar Fee */
.ti-tarifa-atual { display:flex; align-items:baseline; gap:8px; background:var(--ti-fundo-2, #f7f9fb);
  border:1px solid var(--ti-borda, #dfe6ec); border-radius:8px; padding:7px 10px; }
.ti-tarifa-atual strong { font-size:1rem; }
.ti-tarifa-celulas { display:flex; flex-direction:column; gap:5px; }
.ti-tarifa-chips { display:flex; flex-wrap:wrap; gap:5px; }
.ti-tarifa-chip { border:1px solid var(--ti-borda, #dfe6ec); background:#fff; border-radius:999px;
  padding:4px 10px; font-size:.76rem; cursor:pointer; color:var(--ti-texto-2, #55636f); }
.ti-tarifa-chip:hover { border-color:#7fb3d5; background:#eaf4fa; }

/* 5.11 / R6 — banner da sugestão automática de status do ângulo */
.ti-sug-status { display:flex; align-items:flex-start; gap:11px; margin-bottom:10px;
  background:#f3f8fd; border:1px solid #cfe0ef; border-left:4px solid #4a90c2;
  border-radius:10px; padding:11px 14px; }
.ti-sug-status__ic { font-size:1.15rem; line-height:1.2; }
.ti-sug-status__txt { flex:1; min-width:0; }
.ti-sug-status__txt strong { display:block; font-size:.88rem; color:var(--ti-azul-escuro, #1c4f7c); }
.ti-sug-status__txt p { margin:3px 0 0; font-size:.81rem; color:var(--ti-texto-2, #55636f); line-height:1.45; }
.ti-sug-status__motivo { display:flex; flex-direction:column; gap:3px; margin-top:7px; max-width:460px; }
.ti-sug-status__acoes { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.ti-sug-status__nao { border:0; background:none; cursor:pointer; font-size:.75rem;
  color:var(--ti-cinza, #8a97a4); padding:0; }
.ti-sug-status__nao:hover { text-decoration:underline; color:var(--ti-texto-2, #55636f); }

/* ============================================================
   5.11 / R7 — PALETA DO ASANA
   ------------------------------------------------------------
   As cores que a equipe já usa no Asana, trazidas para o sistema
   para que quem vem de lá reconheça tudo de bate-pronto. Cada
   token guarda o fundo, a borda e o texto de uma cor da paleta.
   De-para aprovado pelo dono em 21/08/2026.
   ============================================================ */
:root {
  --as-laranja-bg:#fdeadb; --as-laranja-bd:#f5cba7; --as-laranja-tx:#b3530a;
  --as-lar-amarelo-bg:#fdf2dd; --as-lar-amarelo-bd:#f2ddb0; --as-lar-amarelo-tx:#a5741a;
  --as-amarelo-bg:#fbf4d2; --as-amarelo-bd:#eee0a4; --as-amarelo-tx:#8a6d00;
  --as-verde-limao-bg:#eef6dc; --as-verde-limao-bd:#d3e6ae; --as-verde-limao-tx:#5c7a1e;
  --as-verde-bg:#e6f4ea; --as-verde-bd:#bfe0c9; --as-verde-tx:#1e7a3c;
  --as-verde-azul-bg:#e2f2f0; --as-verde-azul-bd:#b6ded9; --as-verde-azul-tx:#1f7a70;
  --as-aqua-bg:#e2f2f8; --as-aqua-bd:#b5dcea; --as-aqua-tx:#1c6f8c;
  --as-azul-bg:#e7effb; --as-azul-bd:#c4d7f2; --as-azul-tx:#2a5db0;
  --as-indigo-bg:#e9e9fa; --as-indigo-bd:#cbcaf0; --as-indigo-tx:#4340a8;
  --as-roxo-bg:#f0eafb; --as-roxo-bd:#d9c9f0; --as-roxo-tx:#6b3fa0;
  --as-rosa-bg:#fce8f1; --as-rosa-bd:#f3c2d9; --as-rosa-tx:#b02a68;
  --as-vermelho-bg:#fbe4e4; --as-vermelho-bd:#f0bfbf; --as-vermelho-tx:#b03030;
  --as-cinza-bg:#eef1f4; --as-cinza-bd:#dbe1e7; --as-cinza-tx:#61707e;
}

/* Aplicador — uma regra por cor, reaproveitada por todas as etiquetas. */
.ti-as-laranja      { background:var(--as-laranja-bg);      border-color:var(--as-laranja-bd);      color:var(--as-laranja-tx); }
.ti-as-lar-amarelo  { background:var(--as-lar-amarelo-bg);  border-color:var(--as-lar-amarelo-bd);  color:var(--as-lar-amarelo-tx); }
.ti-as-amarelo      { background:var(--as-amarelo-bg);      border-color:var(--as-amarelo-bd);      color:var(--as-amarelo-tx); }
.ti-as-verde-limao  { background:var(--as-verde-limao-bg);  border-color:var(--as-verde-limao-bd);  color:var(--as-verde-limao-tx); }
.ti-as-verde        { background:var(--as-verde-bg);        border-color:var(--as-verde-bd);        color:var(--as-verde-tx); }
.ti-as-verde-azul   { background:var(--as-verde-azul-bg);   border-color:var(--as-verde-azul-bd);   color:var(--as-verde-azul-tx); }
.ti-as-aqua         { background:var(--as-aqua-bg);         border-color:var(--as-aqua-bd);         color:var(--as-aqua-tx); }
.ti-as-azul         { background:var(--as-azul-bg);         border-color:var(--as-azul-bd);         color:var(--as-azul-tx); }
.ti-as-indigo       { background:var(--as-indigo-bg);       border-color:var(--as-indigo-bd);       color:var(--as-indigo-tx); }
.ti-as-roxo         { background:var(--as-roxo-bg);         border-color:var(--as-roxo-bd);         color:var(--as-roxo-tx); }
.ti-as-rosa         { background:var(--as-rosa-bg);         border-color:var(--as-rosa-bd);         color:var(--as-rosa-tx); }
.ti-as-vermelho     { background:var(--as-vermelho-bg);     border-color:var(--as-vermelho-bd);     color:var(--as-vermelho-tx); }
.ti-as-cinza        { background:var(--as-cinza-bg);        border-color:var(--as-cinza-bd);        color:var(--as-cinza-tx); }

/* --- Encargo: etiqueta rosa-choque (opção "a" do dono). A BORDA esquerda do
   card continua com as cores da casa — é ela que diz de quem é a vez. --- */
.ti-badge--kam, .ti-badge--ra, .ti-badge--manager, .ti-badge--cliente,
.ti-badge--encargo {
  background:var(--as-rosa-bg); border-color:var(--as-rosa-bd); color:var(--as-rosa-tx);
}
/* O RA do ÂNGULO (informativo, não é encargo) segue fora da paleta de Encargo. */
.ti-badge--ra-info, .ti-badge--ra[data-fluxo-ra] {
  background:#fdf8ec; border-color:#f0e3c0; color:#8a6d1d;
}

/* --- Status de Pesquisa do ÂNGULO ---------------------------------------
   A classe `ti-ang-status--*` já era usada em 6 telas (lista de ângulos,
   Prioridades, Minhas Tarefas, detalhe do projeto, referências) mas nunca
   teve cor. Agora ganha a paleta do Asana e todas se pintam sozinhas.
   "Recrutamento" não tem tag no Asana → segue com a cor neutra da casa. */
.ti-badge.ti-ang-status--mapeamento        { background:var(--as-aqua-bg);        border-color:var(--as-aqua-bd);        color:var(--as-aqua-tx); }
.ti-badge.ti-ang-status--busca_alternativa { background:var(--as-verde-azul-bg);   border-color:var(--as-verde-azul-bd);   color:var(--as-verde-azul-tx); }
.ti-badge.ti-ang-status--follow_up_final   { background:var(--as-verde-limao-bg);  border-color:var(--as-verde-limao-bd);  color:var(--as-verde-limao-tx); }
.ti-badge.ti-ang-status--on_hold           { background:var(--as-roxo-bg);         border-color:var(--as-roxo-bd);         color:var(--as-roxo-tx); }
.ti-badge.ti-ang-status--concluida         { background:var(--as-verde-bg);        border-color:var(--as-verde-bd);        color:var(--as-verde-tx); }

/* --- Prioridade do ângulo: mesmas 3 cores do Asana --- */
.ti-badge.ti-prio--alta  { background:var(--as-vermelho-bg);    color:var(--as-vermelho-tx);    font-weight:700; }
.ti-badge.ti-prio--media { background:var(--as-laranja-bg);     color:var(--as-laranja-tx);     font-weight:700; }
.ti-badge.ti-prio--baixa { background:var(--as-lar-amarelo-bg); color:var(--as-lar-amarelo-tx); font-weight:700; }

/* --- On Hold do PERFIL: azul (o do ângulo é roxo, logo acima) --- */
.ti-badge--onhold { background:var(--as-azul-bg); border-color:var(--as-azul-bd);
  color:var(--as-azul-tx); font-weight:700; }
/* --- Reagendar: laranja-amarelado, como no Asana --- */
.ti-badge--reagendar { background:var(--as-lar-amarelo-bg); border-color:var(--as-lar-amarelo-bd);
  color:var(--as-lar-amarelo-tx); font-weight:700; }

/* --- Tier do cliente (1 azul · 2 amarelo · 3 laranja · 4 cinza) --- */
.ti-tier { display:inline-block; padding:1px 7px; border-radius:6px; font-size:.72rem;
  font-weight:700; border:1px solid transparent; }
.ti-tier--1 { background:var(--as-azul-bg);     border-color:var(--as-azul-bd);     color:var(--as-azul-tx); }
.ti-tier--2 { background:var(--as-amarelo-bg);  border-color:var(--as-amarelo-bd);  color:var(--as-amarelo-tx); }
.ti-tier--3 { background:var(--as-laranja-bg);  border-color:var(--as-laranja-bd);  color:var(--as-laranja-tx); }
.ti-tier--4 { background:var(--as-cinza-bg);    border-color:var(--as-cinza-bd);    color:var(--as-cinza-tx); }

/* 5.11 / R4 — criar o evento no Google Agenda (com confirmação) */
.ti-invite-acoes { display:flex; flex-wrap:wrap; gap:6px; }
.ti-invite-criado { font-size:.8rem; color:var(--as-verde-tx); background:var(--as-verde-bg);
  border:1px solid var(--as-verde-bd); border-radius:8px; padding:6px 9px; font-weight:600; }
.ti-invite-criado a { color:inherit; }
.ti-evento-conv { display:flex; flex-direction:column; gap:4px; }
.ti-evento-conv > div { display:flex; flex-wrap:wrap; gap:4px; }
.ti-evento-texto { font-size:.8rem; }
.ti-evento-texto summary { cursor:pointer; color:var(--ti-azul-intenso, #2a6bb0); font-weight:600; }
.ti-evento-texto pre { white-space:pre-wrap; font-family:inherit; font-size:.78rem;
  background:var(--ti-fundo-2, #f7f9fb); border:1px solid var(--ti-borda, #dfe6ec);
  border-radius:8px; padding:8px 10px; margin:6px 0 0; max-height:180px; overflow-y:auto; }

/* 5.11 / R4b — prévia do evento criado, na gaveta */
.ti-invite-criado { display:flex; flex-direction:column; gap:7px; }
.ti-invite-criado__cab { font-size:.8rem; }
.ti-invite-prev { display:flex; flex-direction:column; gap:5px; }
.ti-invite-prev__lin { font-size:.8rem; }
.ti-invite-prev__links { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }

/* 21/08 — convidados avulsos no popup do evento */
.ti-evento-extra { display:flex; flex-direction:column; gap:5px; }
.ti-evento-extra__row { display:flex; gap:6px; }
.ti-evento-extra__row .ti-input { flex:1; min-width:0; }
.ti-evento-extra__chips { display:flex; flex-wrap:wrap; gap:4px; }
.ti-evento-extra__chip { display:inline-flex; align-items:center; gap:4px; }
.ti-evento-extra__x { border:0; background:none; cursor:pointer; padding:0;
  font-size:.7rem; color:var(--ti-cinza, #8a97a4); }
.ti-evento-extra__x:hover { color:#b03a3a; }

/* 21/08 — popup do evento: largo, COMPACTO e dividido em blocos cinza.
   (24/08 — dose reforçada: a primeira versão ficou sutil demais na tela do
   dono. Fontes menores, blocos com cinza visível e cabeçalhos por seção.) */
.ti-agendar-pop--evento { width: min(720px, 94vw); max-height: 88vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 7px; padding: 13px 15px; }
.ti-agendar-pop--evento .ti-agendar-titulo { margin: 0; font-size: .88rem; }
.ti-agendar-pop--evento .ti-onhold-ajuda { margin: 0 0 2px; font-size: .72rem; line-height: 1.35; }

/* Cada seção é um bloco cinza com borda — o olho separa por área. */
.ti-agendar-pop--evento .ti-agendar-resumo,
.ti-agendar-pop--evento .ti-evento-conv,
.ti-agendar-pop--evento .ti-evento-extra,
.ti-agendar-pop--evento .ti-evento-texto {
  background: #eef1f5; border: 1px solid #dbe2ea; border-radius: 8px;
  padding: 8px 11px; margin: 0;
}

/* Resumo: rótulo em coluna fixa, tudo um degrau menor */
.ti-agendar-pop--evento .ti-agendar-resumo { gap: 2px; }
.ti-agendar-pop--evento .ti-agendar-resumo > div { display: flex; gap: 10px; align-items: baseline; }
.ti-agendar-pop--evento .ti-agendar-resumo dt { flex: 0 0 108px; font-size: .62rem;
  text-transform: uppercase; letter-spacing: .06em; color: #6d7b88; font-weight: 800; }
.ti-agendar-pop--evento .ti-agendar-resumo dd { margin: 0; font-size: .74rem; line-height: 1.35; }

/* Convidados: chips pequenos, fundo branco para saltar do bloco cinza */
.ti-agendar-pop--evento .ti-evento-conv { flex-direction: row; align-items: baseline; gap: 10px; display: flex; flex-wrap: wrap; }
.ti-agendar-pop--evento .ti-evento-conv > .ti-lab { flex: 0 0 108px; font-size: .62rem; }
.ti-agendar-pop--evento .ti-evento-conv > div { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.ti-agendar-pop--evento .ti-parts-chip { font-size: .68rem; padding: 1px 8px; background: #fff; border-color: #cfd9e3; }

/* Adicionar convidados: campo estreito e baixo */
.ti-agendar-pop--evento .ti-evento-extra { gap: 5px; }
.ti-agendar-pop--evento .ti-evento-extra > .ti-lab { font-size: .62rem; }
.ti-agendar-pop--evento .ti-evento-extra__row .ti-input {
  max-width: 280px; padding: 3px 8px; font-size: .72rem; }
.ti-agendar-pop--evento .ti-evento-extra__row .ti-btn { padding: 2px 9px; font-size: .72rem; }

/* Texto do convite: fechado por padrão, compacto ao abrir */
.ti-agendar-pop--evento .ti-evento-texto summary { font-size: .7rem; font-weight: 700; }
.ti-agendar-pop--evento .ti-evento-texto pre { max-height: 150px; font-size: .7rem;
  line-height: 1.4; background: #fff; border-color: #dbe2ea; }

.ti-agendar-pop--evento .ti-agendar-acoes { margin-top: 3px; }
.ti-agendar-pop--evento .ti-agendar-acoes .ti-btn { font-size: .76rem; }

/* 24/08 — aviso de alcance no popup Alterar Fee (o fee é do expert). */
.ti-tarifa-alcance { margin: 0; font-size: .72rem; line-height: 1.45;
  color: var(--as-lar-amarelo-tx, #a5741a); background: var(--as-lar-amarelo-bg, #fdf2dd);
  border: 1px solid var(--as-lar-amarelo-bd, #f2ddb0); border-radius: 8px; padding: 6px 9px; }

/* 24/08 — Fee da entrega: matriz para ESCOLHER (não editar) + fee exclusivo */
.ti-eg-op { width: 100%; border: 1px solid var(--ti-borda, #dfe6ec); background: #fff;
  border-radius: 8px; padding: 6px 8px; font-size: .78rem; font-weight: 600;
  color: var(--ti-texto, #26333f); cursor: pointer; transition: border-color .12s, background .12s; }
.ti-eg-op:hover { border-color: #7fb3d5; background: #f2f9fd; }
.ti-eg-op.is-on { border-color: var(--as-verde-bd, #bfe0c9); background: var(--as-verde-bg, #e6f4ea);
  color: var(--as-verde-tx, #1e7a3c); box-shadow: inset 0 0 0 1px var(--as-verde-bd, #bfe0c9); }
.ti-eg-excl { display: flex; align-items: flex-start; gap: 7px; margin-top: 9px;
  font-size: .8rem; cursor: pointer; }
.ti-eg-excl input { margin-top: 3px; }
.ti-eg-excl-campos { display: flex; gap: 6px; max-width: 260px; margin-top: 6px; }
.ti-eg-excl-campos .ti-input { flex: 1; }
.ti-eg-excl-campos .ti-select { max-width: 90px; }
.ti-fee-ops, .ti-pd-fee-ops { display: flex; flex-direction: column; gap: 4px; }
.ti-pd-fee-ops .ti-eg-op, .ti-fee-ops .ti-eg-op { text-align: left; }

/* ---- 26/08: arraste no quadro do PROJETO (mesmo vocabulário do ângulo) ---- */
.ti-prj-kanban .ti-prj-card--perfil[draggable="true"] { cursor: grab; }
.ti-prj-kanban .ti-prj-card--perfil.is-arrastando { opacity: .45; cursor: grabbing; }
.ti-prj-kanban .ti-kanban__cards.is-dragover {
  outline: 2px dashed var(--ti-azul, #3b4cca); outline-offset: 2px;
  background: rgba(59, 76, 202, .06); border-radius: var(--ti-raio-sm, 6px);
}
/* Coluna que RECUSA o card arrastado (o servidor já disse o porquê). */
.ti-prj-kanban .ti-kanban__coluna.is-bloqueado .ti-kanban__cards {
  outline: 2px dashed #c0392b; outline-offset: 2px;
  background: rgba(192, 57, 43, .06); cursor: not-allowed; border-radius: var(--ti-raio-sm, 6px);
}
.ti-prj-kanban .ti-kanban__coluna.is-bloqueado .ti-kanban__coluna-head h3 { opacity: .5; }

/* 26/08 — várias reuniões do mesmo expert no mesmo projeto: a etiqueta que
   diferencia os cards gêmeos (só aparece quando existe irmão). */
.ti-badge--reuniao {
  background: var(--as-roxo-claro, #e8e3f5); color: #4a3b7a;
  border: 1px solid rgba(74, 59, 122, .18); font-variant-numeric: tabular-nums;
}