/* =========================================================
   TCS · Design System v4 — Componentes base
   Etapa 1 · Fundação visual
   ---------------------------------------------------------
   Depende de tokens.css. Todos os componentes usam tokens,
   nunca valores literais. Estilos puramente visuais —
   nenhuma lógica de negócio.
   ========================================================= */

/* ---------- RESET ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--color-bg);
  color:var(--color-ink);
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11","ss01";
}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
input,textarea,select{font-family:inherit;color:inherit}

/* ---------- UTILITÁRIOS TIPOGRÁFICOS ---------- */
.t-serif{font-family:var(--font-serif);font-weight:var(--fw-regular);letter-spacing:var(--tracking-snug)}
.t-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.t-tnum{font-variant-numeric:tabular-nums}

/* =========================================================
   BOTÕES — densidade compact v5
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:var(--space-3);
  height:30px;padding:0 12px;border-radius:var(--radius-md);
  font-size:12.5px;font-weight:var(--fw-medium);
  border:1px solid var(--color-line-strong);
  background:var(--color-card);color:var(--color-ink-80);
  transition:all var(--dur-fast) var(--ease-out);
  cursor:pointer;line-height:1;white-space:nowrap;
}
.btn:hover{background:var(--color-bg-alt);color:var(--color-ink);border-color:var(--color-line-strong)}
.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-color:var(--color-olive)}

.btn.primary{background:var(--color-olive);border-color:var(--color-olive);color:#fff;font-weight:var(--fw-semibold)}
.btn.primary:hover{background:var(--color-olive-700);border-color:var(--color-olive-700)}

.btn.ink{background:var(--color-ink);border-color:var(--color-ink);color:#fff;font-weight:var(--fw-semibold)}
.btn.ink:hover{background:#000}

.btn.ghost{background:transparent;border-color:transparent;color:var(--color-ink-60)}
.btn.ghost:hover{background:var(--color-bg-alt);color:var(--color-ink)}

.btn.danger{background:var(--color-danger);border-color:var(--color-danger);color:#fff;font-weight:var(--fw-semibold)}
.btn.danger:hover{background:var(--color-danger-600);border-color:var(--color-danger-600)}

.btn[disabled]{opacity:0.5;cursor:not-allowed;pointer-events:none}
.btn svg{width:13px;height:13px}

.btn.sm{height:26px;padding:0 10px;font-size:11.5px}
.btn.lg{height:34px;padding:0 14px;font-size:13px}

/* ---------- Icon button ---------- */
.icon-btn{
  width:30px;height:30px;border-radius:var(--radius-md);
  display:grid;place-items:center;color:var(--color-ink-60);
  position:relative;transition:all var(--dur-fast) var(--ease-out);
  cursor:pointer;background:transparent;border:1px solid transparent;
}
.icon-btn:hover{background:var(--color-bg-alt);color:var(--color-ink);border-color:var(--color-line)}
.icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* =========================================================
   CHIPS & BADGES — v5
   Default: texto + dot opcional (sem fundo). Apenas .alarm tem
   fundo, reservado pra alertas críticos (EM RISCO, SLA estourado).
   Variantes legadas (.olive, .lilac, .info, .warn, .danger, .neutral)
   mantidas com fundo pra retrocompatibilidade.
   ========================================================= */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:var(--fw-medium);
  color:var(--color-ink-70);letter-spacing:0.01em;
  line-height:1.5;
}
.chip .dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
}
.chip .dot.success{background:var(--color-success)}
.chip .dot.warn   {background:var(--color-warn)}
.chip .dot.info   {background:var(--color-info)}
.chip .dot.danger {background:var(--color-danger)}
/* Departamentos — uso restrito a dot 6px + borda de avatar */
.chip .dot.com{background:var(--dept-comercial)}
.chip .dot.tec{background:var(--dept-tecnica)}
.chip .dot.fin{background:var(--dept-financeiro)}
.chip .dot.cob{background:var(--dept-cobranca)}
.chip .dot.adm{background:var(--dept-admin)}
.chip .dot.dir{background:var(--dept-diretoria)}

/* Variantes com fundo — .alarm é a única recomendada pra novo código */
.chip.alarm,
.chip.olive,.chip.lilac,.chip.info,.chip.warn,.chip.danger,.chip.neutral{
  padding:1px 6px;border-radius:var(--radius-sm);
  font-weight:var(--fw-semibold);
}
.chip.alarm{
  background:var(--color-danger-bg);color:var(--color-danger);
  text-transform:uppercase;font-size:10.5px;letter-spacing:0.04em;
}
.chip.olive  {background:var(--color-olive-50);color:var(--color-olive-700)}
.chip.lilac  {background:var(--color-lilac-50);color:var(--color-lilac)}
.chip.info   {background:var(--color-info-bg);color:var(--color-info)}
.chip.warn   {background:var(--color-warn-bg);color:var(--color-warn)}
.chip.danger {background:var(--color-danger-bg);color:var(--color-danger)}
.chip.neutral{background:var(--color-bg-alt);color:var(--color-ink-70);border:1px solid var(--color-line)}

/* Sidebar badges ("Em breve", "Pro", "Beta", "Novo") */
.badge{
  font-size:9px;padding:1px 5px;border-radius:3px;
  font-weight:var(--fw-bold);letter-spacing:0.05em;
  text-transform:uppercase;line-height:1.3;
  border:1px solid transparent;
}
.badge.soon{color:var(--color-ink-40);border-color:var(--color-ink-20)}
.badge.pro{color:#d4b862;background:rgba(212,184,98,0.09);border-color:rgba(212,184,98,0.22)}
.badge.beta{color:var(--color-info);background:var(--color-info-bg);border-color:rgba(63,106,138,0.28)}
.badge.new{color:var(--color-olive-700);background:var(--color-olive-50);border-color:var(--color-olive-100)}

/* =========================================================
   STATUS (pill com ponto colorido)
   ========================================================= */
.status{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;border-radius:var(--radius-md);
  font-size:11px;font-weight:var(--fw-semibold);line-height:1.5;
}
.status::before{content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0}

.status.active   {background:var(--color-success-bg);color:var(--color-success)}
.status.active::before   {background:var(--color-success)}
.status.pending  {background:var(--color-warn-bg);color:var(--color-warn)}
.status.pending::before  {background:var(--color-warn)}
.status.overdue  {background:var(--color-danger-bg);color:var(--color-danger)}
.status.overdue::before  {background:var(--color-danger)}
.status.scheduled{background:var(--color-lilac-50);color:var(--color-lilac)}
.status.scheduled::before{background:var(--color-lilac)}
.status.draft    {background:var(--color-bg-alt);color:var(--color-ink-60)}
.status.draft::before    {background:var(--color-ink-40)}

/* =========================================================
   INPUTS / FORM — densidade compact v5
   ========================================================= */
.field{display:flex;flex-direction:column;gap:var(--space-3)}
.field > label{
  font-size:11px;color:var(--color-ink-60);
  font-weight:var(--fw-semibold);letter-spacing:0.04em;
}

.input,.select,.textarea{
  width:100%;height:32px;
  border:1px solid var(--color-line-strong);
  border-radius:var(--radius-md);
  padding:0 var(--space-5);
  font-family:inherit;font-size:12.5px;
  background:var(--color-card);color:var(--color-ink);
  outline:none;
  transition:border-color var(--dur-base),box-shadow var(--dur-base);
}
.textarea{height:auto;padding:var(--space-5);line-height:var(--lh-normal);min-height:72px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--color-ink-40)}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--color-olive);box-shadow:var(--shadow-focus);
}
.input[disabled]{background:var(--color-bg-alt);color:var(--color-ink-50);cursor:not-allowed}
.input.error{border-color:var(--color-danger)}
.input.error:focus{box-shadow:0 0 0 3px rgba(180,68,46,0.12)}

.help{font-size:11px;color:var(--color-ink-60);margin-top:-2px}
.help.error{color:var(--color-danger)}

/* Checkbox / radio use native styling with accent color */
input[type=checkbox],input[type=radio]{
  width:13px;height:13px;accent-color:var(--color-olive);cursor:pointer;
}

/* =========================================================
   SEGMENTED CONTROL
   ========================================================= */
.seg{
  display:inline-flex;background:var(--color-bg-alt);
  border-radius:var(--radius-md);padding:2px;gap:1px;
  border:1px solid var(--color-line);
}
.seg button{
  padding:4px 10px;font-size:11.5px;
  font-weight:var(--fw-semibold);color:var(--color-ink-60);
  border-radius:var(--radius-sm);line-height:1.4;
}
.seg button.on{
  background:var(--color-card);color:var(--color-ink);
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
}

/* =========================================================
   PAINEL / CARD
   ========================================================= */
.panel{
  background:var(--color-card);
  border:1px solid var(--color-line);
  border-radius:var(--radius-2xl);
  overflow:hidden;
}
.panel-head{
  padding:var(--space-7) var(--space-8) var(--space-6);
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--color-line);
  gap:var(--space-6);flex-wrap:wrap;
}
.panel-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.panel-title h3{
  font-size:13.5px;font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-snug);
}
.panel-title span{font-size:11.5px;color:var(--color-ink-60)}

/* =========================================================
   BANNER (alertas contextuais)
   ========================================================= */
.banner{
  background:var(--color-card);
  border:1px solid var(--color-line);
  border-left:3px solid var(--color-warn);
  border-radius:var(--radius-xl);
  padding:12px 16px;display:flex;align-items:center;
  gap:var(--space-7);
}
.banner.info{border-left-color:var(--color-info)}
.banner.success{border-left-color:var(--color-success)}
.banner.danger{border-left-color:var(--color-danger)}

.banner-ic{
  width:30px;height:30px;border-radius:var(--radius-lg);
  background:var(--color-warn-bg);color:var(--color-warn);
  display:grid;place-items:center;flex-shrink:0;
  border:1px solid rgba(181,120,26,0.28);
}
.banner.info .banner-ic{background:var(--color-info-bg);color:var(--color-info);border-color:rgba(63,106,138,0.25)}
.banner.success .banner-ic{background:var(--color-success-bg);color:var(--color-success);border-color:rgba(75,122,74,0.25)}
.banner.danger .banner-ic{background:var(--color-danger-bg);color:var(--color-danger);border-color:rgba(180,68,46,0.25)}

.banner-body{flex:1;min-width:0;line-height:var(--lh-normal)}
.banner-body b{font-size:12.5px;font-weight:var(--fw-semibold);display:block}
.banner-body p{font-size:11.5px;color:var(--color-ink-60);margin-top:1px}

/* =========================================================
   TABELA — densidade compact v5 (linha 32px, header em wider)
   ========================================================= */
.table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.table thead th{
  text-align:left;font-size:10.5px;text-transform:uppercase;
  letter-spacing:var(--tracking-wider);color:var(--color-ink-50);
  font-weight:var(--fw-semibold);padding:8px 14px;
  background:transparent;
  border-bottom:1px solid var(--color-line);white-space:nowrap;
}
.table thead th.num{text-align:right}
.table tbody td{
  padding:8px 14px;height:32px;border-bottom:1px solid var(--color-line);
  vertical-align:middle;color:var(--color-ink-80);
}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr{transition:background var(--dur-fast);cursor:pointer}
.table tbody tr:hover td{background:var(--color-olive-25)}
.table td.num{text-align:right;font-weight:var(--fw-semibold);color:var(--color-ink)}

/* =========================================================
   KPI CARD — densidade compact v5 (pad 16, val 22/600)
   ========================================================= */
.kpi{
  background:var(--color-card);border:1px solid var(--color-line);
  border-radius:var(--radius-lg);padding:16px;
  position:relative;overflow:hidden;
  transition:border-color var(--dur-base);
}
.kpi:hover{border-color:var(--color-line-strong)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.kpi-label{
  font-size:10.5px;color:var(--color-ink-50);
  font-weight:var(--fw-semibold);letter-spacing:0.12em;
  text-transform:uppercase;
}
.kpi-ic{
  width:26px;height:26px;border-radius:var(--radius-md);
  background:var(--color-olive-50);color:var(--color-olive-700);
  display:grid;place-items:center;border:1px solid var(--color-olive-100);
}
.kpi-val{
  font-size:var(--text-2xl);font-weight:var(--fw-semibold);
  letter-spacing:-0.015em;line-height:var(--lh-tight);
  font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:4px;
}
.kpi-val .unit{font-size:13px;color:var(--color-ink-50);font-weight:var(--fw-medium)}
.kpi-val .cur{font-size:13px;color:var(--color-ink-50);font-weight:var(--fw-medium);margin-right:2px}
.kpi-foot{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:11.5px}

.delta{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 6px;border-radius:var(--radius-md);
  font-weight:var(--fw-semibold);font-size:11px;line-height:1;
}
.delta.up{background:var(--color-success-bg);color:var(--color-success)}
.delta.dn{background:var(--color-danger-bg);color:var(--color-danger)}
.delta.flat{background:var(--color-bg-alt);color:var(--color-ink-60)}

/* =========================================================
   AVATAR
   ========================================================= */
.avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--color-olive-100),var(--color-olive));
  display:grid;place-items:center;
  color:var(--color-ink);font-weight:var(--fw-bold);font-size:11px;
  flex-shrink:0;border:1px solid rgba(255,255,255,0.1);
  position:relative;
}
.avatar.sm{width:24px;height:24px;font-size:9.5px}
.avatar.lg{width:40px;height:40px;font-size:13px}
.avatar .online{
  position:absolute;bottom:-1px;right:-1px;
  width:10px;height:10px;border-radius:50%;
  background:var(--color-success);border:2px solid var(--color-card);
}

/* =========================================================
   AI CARD — sugestão da IA (v5, usado no atendimento)
   Card lilac inline na conversa, dedicado à sugestão da IA.
   Editável inline + 3 ações: Ignorar / Pedir nova / Enviar.
   ========================================================= */
.ai-card{
  margin:8px 0 4px;background:var(--color-lilac-50);
  border:1px solid rgba(137,132,189,0.28);
  border-radius:var(--radius-lg);overflow:hidden;position:relative;
}
.ai-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;background:rgba(137,132,189,0.12);
  border-bottom:1px solid rgba(137,132,189,0.18);
}
.ai-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:var(--fw-semibold);
  color:#5d5990;letter-spacing:0.06em;text-transform:uppercase;
}
.ai-tag-icon{
  width:18px;height:18px;border-radius:var(--radius-sm);
  background:var(--color-lilac);color:#fff;
  display:grid;place-items:center;font-size:10px;font-weight:var(--fw-bold);
}
.ai-edit-hint{font-size:10.5px;color:#6b6796;font-style:italic}
.ai-body{
  padding:14px 16px;font-size:13px;color:var(--color-ink-80);
  line-height:1.55;max-height:200px;overflow-y:auto;position:relative;
}
.ai-body p{margin:0 0 10px}
.ai-body p:last-child{margin-bottom:0}
.ai-body strong{font-weight:var(--fw-semibold);color:var(--color-ink)}
.ai-actions{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:rgba(255,255,255,0.5);
  border-top:1px solid rgba(137,132,189,0.18);
}
.ai-meta{
  font-size:10.5px;color:#6b6796;
  display:flex;align-items:center;gap:6px;
}
.ai-buttons{display:flex;gap:6px}
.ai-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:var(--radius-md);
  font-size:11.5px;font-weight:var(--fw-semibold);
  font-family:inherit;cursor:pointer;border:1px solid transparent;
  transition:all var(--dur-fast) var(--ease-out);letter-spacing:0.02em;
}
.ai-btn.ignore{background:transparent;color:#6b6796;border-color:rgba(137,132,189,0.3)}
.ai-btn.ignore:hover{background:rgba(137,132,189,0.08)}
.ai-btn.new{background:#fff;color:#5d5990;border-color:rgba(137,132,189,0.4)}
.ai-btn.new:hover{background:var(--color-lilac-50)}
.ai-btn.send{background:var(--color-olive);color:#fff}
.ai-btn.send:hover{background:var(--color-olive-700)}