/* =====================================================
   SOLO KANBAN — STYLES
   v0.2 — Onda 1 visual completa
   ===================================================== */

/* ---------- TOKENS ---------- */
:root {
  --bg: #0a0a0a;
  --bg-elev: #131313;
  --bg-elev-2: #1a1a1a;
  --panel: #1c1c1c;        /* superfície opaca de modais/painéis (v0.8.4) */
  --border: #262626;
  --border-strong: #334155;
  --text: #f5f5f5;
  --text-muted: #a3a3a3;
  --text-dim: #737373;
  --accent: #FF4D00;
  --accent-soft: rgba(255, 77, 0, 0.12);
  --accent-glow: rgba(255, 77, 0, 0.35);
  --green: #22c55e;
  --green-soft: rgba(34, 197, 94, 0.12);
  --orange: #f59e0b;
  --orange-soft: rgba(245, 158, 11, 0.12);
  --red: #ef4444;
  --red-soft: rgba(239, 68, 68, 0.12);
  --blue: #3b82f6;
  --blue-soft: rgba(59, 130, 246, 0.12);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

body.light,
html.light body {
  --bg: #fafaf9;
  --bg-elev: #ffffff;
  --bg-elev-2: #f5f5f4;
  --panel: #ffffff;
  --border: #e7e5e4;
  --border-strong: #d6d3d1;
  --text: #18181b;
  --text-muted: #52525b;
  --text-dim: #a1a1aa;
  --accent-soft: rgba(255, 77, 0, 0.08);
}

/* FOUC fix: no-flash entre html.light (aplicado inline no head) e body.light */
html.light { background: #fafaf9; }

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

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background 0.3s ease, color 0.3s ease;
  font-feature-settings: 'ss01', 'cv11';
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.03;
  z-index: 1;
}

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  position: relative;
  z-index: 2;
  transition: padding-right 0.3s cubic-bezier(0.16, 1, 0.3, 1), grid-template-columns 0.2s ease;
}
/* v0.10.12: rail (Equipe/Agenda) empurra o conteúdo em vez de sobrepor */
body.rail-open .layout { padding-right: 360px; }
/* v0.10.12: operador não tem sidebar — layout ocupa largura cheia */
body.no-sidebar .layout { grid-template-columns: 1fr; }
body.no-sidebar .sidebar { display: none; }

/* ---------- SIDEBAR ---------- */
.sidebar {
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  padding: 28px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  padding: 0 24px 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

/* v0.8.6: logo é link pra página principal (view Kanban) */
#brand-home {
  cursor: pointer;
  outline: none;
  transition: opacity .12s ease;
}
#brand-home:hover { opacity: .72; }
#brand-home:hover .brand-mark em { filter: brightness(1.15); }
#brand-home:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
  border-radius: 6px;
}

.brand-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}

.brand-mark em {
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 6px;
}

.nav-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 12px 24px 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  color: var(--text-muted);
  cursor: pointer;
  border-left: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.18s ease;
  user-select: none;
}

.nav-item:hover { color: var(--text); background: var(--bg-elev-2); }
.nav-item.active {
  color: var(--text);
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.nav-item-icon { font-size: 14px; width: 18px; text-align: center; }
.nav-item-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  background: var(--bg-elev-2);
  padding: 2px 7px;
  border-radius: 10px;
}
.nav-item.active .nav-item-count {
  color: var(--accent);
  background: rgba(255, 77, 0, 0.15);
}

/* ---------- MAIN ---------- */
.main {
  padding: 28px 32px 40px;
  overflow-x: auto;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 24px;
}

.header-block h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text);
  margin: 0;   /* v0.10.49: zera margem default do browser — meta cola no título */
}

.header-block h1 em { color: var(--accent); font-style: italic; font-weight: 400; }

/* v0.10.45: título padronizado vira link pra Home (Jobs) */
.page-title-home { cursor: pointer; transition: opacity .15s ease; outline: none; }
.page-title-home:hover { opacity: 0.72; }
.page-title-home:focus-visible { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.page-title-home::after {
  content: "⌂ home";
  display: inline-block; vertical-align: middle; white-space: nowrap;
  font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim);
  border: 0 solid var(--border); border-radius: 6px;
  /* v0.10.54: oculto com footprint ZERO — não reserva uma linha em coluna
     estreita, então a meta ("ao vivo") cola no nome. Expande no hover. */
  max-width: 0; margin-left: 0; padding: 0; opacity: 0; overflow: hidden;
  transition: opacity .15s ease, max-width .15s ease, padding .15s ease;
}
.page-title-home:hover::after, .page-title-home:focus-visible::after {
  max-width: 140px; margin-left: 10px; padding: 2px 6px; border-width: 1px; opacity: 0.8;
}

.header-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 3px;   /* v0.10.54: meta ("ao vivo") encosta no nome */
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

.header-meta span { display: inline-flex; align-items: center; gap: 6px; }

.pulse-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 var(--green);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.topbar-actions { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 38px; height: 38px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.15s ease;
  font-family: var(--font-body);
}

.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }

/* ---------- v0.6.5: Sino de notificações + dropdown ---------- */
.notif-wrap {
  position: relative;
}
.notif-btn {
  position: relative;
  overflow: visible;
}
.notif-icon-svg { display: block; }
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--red);
  color: white;
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  box-sizing: content-box;
  animation: notifPulse 2s ease-in-out infinite;
}
@keyframes notifPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-height: 500px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow: hidden;
}
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev-2);
}
.notif-head-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.notif-mark-all {
  background: transparent;
  border: none;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}
.notif-mark-all:hover { background: var(--accent-soft); }

.notif-list {
  flex: 1;
  overflow-y: auto;
  max-height: 380px;
}
.notif-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease;
}
.notif-item:hover { background: var(--bg-elev-2); }
.notif-item.unread { background: rgba(245, 158, 11, 0.05); }
.notif-item.unread:hover { background: rgba(245, 158, 11, 0.10); }

.notif-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notif-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.notif-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.notif-body {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.notif-time {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-top: 2px;
}
/* v0.10.3: meta da notificação — data · pessoa · status · hora */
.notif-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin-top: 5px; font-size: 10px; color: var(--text-dim);
}
.notif-meta-status {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text-muted); border-radius: 4px; padding: 0 6px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 9px;
}
.notif-meta-data, .notif-meta-hora { font-family: var(--font-mono); letter-spacing: 0.04em; }
.notif-dot {
  position: absolute;
  right: 12px;
  top: 14px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
}

.notif-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-elev-2);
  text-align: center;
}
.notif-foot-link {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.notif-foot-link:hover { text-decoration: underline; }

.notif-empty {
  padding: 32px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

/* ---------- VIEW SWITCHER ---------- */
.view-switcher {
  display: inline-flex;
  align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
/* v0.10.4: separador entre o grupo Projetos/Jobs e as visualizações */
.view-sep {
  width: 1px; align-self: stretch; margin: 4px 5px;
  background: var(--border-strong, var(--border));
}

/* v0.10.5: switcher de persona no cartão de identificação (chip dropdown) */
.user-chip-personas { border-top: 1px solid var(--border, #3a3a3a); margin: 4px 0; padding: 6px 4px 4px; }
.ucp-label {
  font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim, #888); padding: 2px 8px 6px;
}
.ucp-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: transparent; border: none; border-radius: 8px; padding: 6px 8px; cursor: pointer;
  font-family: inherit; color: var(--text, #e8e8e8);
}
.ucp-item:hover { background: var(--bg-elev-2, #2d2d2d); }
.ucp-item.on { background: var(--accent-soft, rgba(255,77,0,0.12)); }
.ucp-ava {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff; background: var(--accent, #ff4d00);
}
.ucp-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.ucp-nome { font-size: 13px; font-weight: 500; }
.ucp-role { font-size: 10px; color: var(--text-dim, #888); }
.ucp-exit { color: var(--text-muted, #aaa); font-size: 12px; justify-content: flex-start; }

.view-switcher button {
  padding: 7px 14px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 5px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.view-switcher button:hover { color: var(--text); }
.view-switcher button.active { background: var(--accent); color: white; }

/* ---------- METRICS BAR ---------- */
.metrics-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
  position: relative;   /* v0.10.42: ancla o botão minimizar status */
}
/* v0.10.42: minimizar/maximizar a tira de status (PARA FAZER/FAZENDO/...) —
   espelha o padrão do .kpis-toggle. Compartilha o estado com os KPIs. */
.metrics-toggle {
  position: absolute; top: -2px; right: 0; z-index: 6;
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted); cursor: pointer; font-size: 10px; line-height: 1;
  transition: transform .15s ease, color .15s ease, border-color .15s ease;
}
.metrics-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.metrics-collapsed-label { display: none; }
.metrics-bar.metrics-collapsed {
  display: flex; align-items: center; gap: 8px; min-height: 28px; margin-bottom: 8px;
}
.metrics-bar.metrics-collapsed .metric { display: none; }
/* v0.10.49: quando o operador tem a barra de Indicadores, a tira de status
   recolhida some de vez — fica 1 botão só (o de cima). */
.metrics-bar.metrics-collapsed-hidden { display: none !important; }
/* v0.10.49: toggle recolhido em destaque (vermelho/accent) */
.kpis-toolbar.collapsed .kpis-toggle,
.metrics-bar.metrics-collapsed .metrics-toggle {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.kpis-toolbar.collapsed .kpis-toggle:hover,
.metrics-bar.metrics-collapsed .metrics-toggle:hover { filter: brightness(1.08); }
.metrics-bar.metrics-collapsed .metrics-collapsed-label {
  display: inline-flex; align-items: center; cursor: pointer;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim);
}
.metrics-bar.metrics-collapsed .metrics-toggle { transform: rotate(-90deg); }

.metric {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}

.metric::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  opacity: 0.7;
}

.metric-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.metric-value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}

.metric-unit { font-size: 13px; color: var(--text-dim); font-weight: 400; }

.metric-trend {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 6px;
}

.metric-trend.up { color: var(--green); }
.metric-trend.down { color: var(--green); }
.metric-trend.bad { color: var(--red); }

/* ---------- TABS ---------- */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: fit-content;
}

.tab {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tab:hover { color: var(--text); }
.tab.active { background: var(--accent); color: white; }
.tab-count {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
}
.tab:not(.active) .tab-count { background: var(--bg-elev-2); color: var(--text-dim); }

/* ---------- KANBAN BOARD ---------- */
.board-wrap {
  overflow-x: auto;
  padding-bottom: 12px;
  margin: 0 -32px;
  padding-left: 32px;
  padding-right: 32px;
}

.board { display: flex; gap: 16px; min-width: max-content; }

.column {
  width: 280px;
  flex-shrink: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  /* v0.10.3: clipa o gradiente do header nos cantos arredondados (remove os
     "bicos"/orelhas que vazavam além da borda). */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 280px);
}

.col-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.col-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 600;
}

.col-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  background: var(--bg-elev-2);
  padding: 2px 8px;
  border-radius: 10px;
}

.col-body {
  padding: 12px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100px;
}

.col-body.drag-over { background: var(--accent-soft); }

/* ---------- CARDS ---------- */
.card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  cursor: grab;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--green);
}

.card[data-sla="warning"]::before { background: var(--orange); }
.card[data-sla="danger"]::before { background: var(--red); }

.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.card.dragging { opacity: 0.4; cursor: grabbing; }

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.card-client {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}

.card-id { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); display: none; }
/* v0.7.1: numero do trabalho e do projeto visíveis no card resumido.
   #id (últimos 5 do uuid) segue oculto — irrelevante operacionalmente. */
.card-proj { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.04em; }

.card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.pill {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.pill-tipo { background: var(--blue-soft); color: var(--blue); }
.pill-pilar { background: var(--accent-soft); color: var(--accent); }

.card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.assignee { display: flex; align-items: center; gap: 8px; }

.avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text);
}

.assignee-name { font-size: 12px; color: var(--text-muted); font-weight: 500; }
/* v0.10.1: card sem executor — sem bola/traço, só rótulo discreto */
.assignee-empty { font-style: italic; color: var(--text-dim); }

.due {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.due[data-sla="warning"] { color: var(--orange); }
.due[data-sla="danger"] { color: var(--red); }

/* Conflito — agora inline junto das outras pills (não absolute) */
.conflict-badge {
  display: inline-flex;
  align-items: center;
  background: var(--red);
  color: white;
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.handoff-btn {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.handoff-btn:hover {
  background: #e64500;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ---------- EMPTY STATE ---------- */
.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}

/* ---------- v0.6.4: CALENDÁRIO Google Calendar-style ---------- */
.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.cal-btn {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cal-btn:hover { background: var(--bg-elev-2); border-color: var(--border-strong); }
.cal-btn-today { font-weight: 600; }

.cal-nav {
  display: inline-flex;
  gap: 2px;
  background: var(--bg-elev-2);
  border-radius: 6px;
  padding: 2px;
}
.cal-nav-btn {
  width: 28px; height: 28px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cal-nav-btn:hover { background: var(--bg-elev); color: var(--text); }

.cal-period-label {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}

.cal-view-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--bg-elev-2);
  border-radius: 6px;
  padding: 2px;
}
.cal-view-btn {
  padding: 5px 12px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cal-view-btn:hover { color: var(--text); }
.cal-view-btn.active { background: var(--accent); color: white; }

/* Grade semanal / diária */
.cal-week {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.cal-week-head {
  display: grid;
  grid-template-columns: 60px 1fr;
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--border);
}
.cal-week-head > .cal-week-day-head { /* fallback caso ordem ímpar */ }
.cal-week-head-spacer { width: 60px; }
.cal-week-head { grid-template-columns: 60px repeat(7, 1fr); }
.cal-week-head.day-mode,
.cal-week.day-mode .cal-week-head { grid-template-columns: 60px 1fr; }

.cal-week-day-head {
  padding: 10px 8px;
  text-align: center;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cal-week-day-head.today { background: var(--accent-soft); }
.cal-week-day-name {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  font-weight: 600;
}
.cal-week-day-num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
}
.cal-week-day-head.today .cal-week-day-num { color: var(--accent); }

.cal-week-body {
  display: grid;
  grid-template-columns: 60px 1fr;
  position: relative;
  overflow-y: auto;
  max-height: calc(100vh - 320px);
}

.cal-hours-col {
  border-right: 1px solid var(--border);
  position: relative;
}
.cal-hour-row {
  border-bottom: 1px solid var(--border);
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-align: right;
  box-sizing: border-box;
}

.cal-days-grid {
  display: grid;
  position: relative;
}

.cal-day-col {
  position: relative;
  border-left: 1px solid var(--border);
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--cal-hour-px, 56px) - 1px),
      var(--border) calc(var(--cal-hour-px, 56px) - 1px),
      var(--border) var(--cal-hour-px, 56px)
    );
}

/* v0.7.25: Team view — pessoas como colunas, horas como linhas */
.cal-team {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.cal-team-head {
  display: grid;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.cal-team-head-spacer { width: 60px; }
.cal-team-head-cell {
  padding: 10px 8px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  min-width: 0;
}
.cal-team-head-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-team-head-role {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-team-body {
  display: grid;
  grid-template-columns: 60px 1fr;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
}
.cal-team-grid {
  display: grid;
  position: relative;
}
.cal-team-col {
  position: relative;
  border-left: 1px solid var(--border);
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--cal-hour-px, 56px) - 1px),
      var(--border) calc(var(--cal-hour-px, 56px) - 1px),
      var(--border) var(--cal-hour-px, 56px)
    );
  min-width: 110px;
}
.cal-team-col[data-pid="__unassigned__"] {
  background-color: rgba(148, 163, 184, 0.04);
}
.cal-team-event {
  /* herda .cal-event, mas com indicação visual de movível */
  cursor: grab;
}
.cal-team-event:active { cursor: grabbing; }

/* Linha "agora" horizontal vermelha */
.cal-now-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: #ef4444;
  z-index: 10;
  pointer-events: none;
}
.cal-now-line::before {
  content: '';
  position: absolute;
  left: -5px; top: -4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ef4444;
}

/* Evento (card) no calendário */
.cal-event {
  position: absolute;
  left: 4px;
  right: 4px;
  background: color-mix(in srgb, var(--evt-color) 25%, var(--bg-elev));
  border-left: 3px solid var(--evt-color);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 11px;
  color: var(--text);
  cursor: grab;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
  transition: box-shadow 0.15s ease, background 0.15s ease;
  user-select: none;
}
.cal-event:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  background: color-mix(in srgb, var(--evt-color) 35%, var(--bg-elev));
}
.cal-event:active { cursor: grabbing; }

.cal-event[data-sla="warning"] { border-left-color: var(--orange); }
.cal-event[data-sla="danger"]  { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 22%, var(--bg-elev)); }

/* v0.10.1: períodos não-úteis em cinza (almoço / fim de semana / férias / feriado).
   Fundo translúcido (sem z-index) → fica atrás dos eventos e a grade aparece. */
.cal-lunch {
  position: absolute; left: 0; right: 0;
  background: rgba(128,128,128,0.13);
  border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
  pointer-events: none;
}
.cal-day-off-fill {
  position: absolute; inset: 0;
  background: rgba(128,128,128,0.14);
  pointer-events: none;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 8px;
}
.cal-day-off-fill span {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-dim); background: var(--panel);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px;
}

.cal-event-time {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.cal-event-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-event-meta {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Handle de resize na borda inferior do evento */
.cal-event-resize {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  cursor: ns-resize;
  background: transparent;
}
.cal-event:hover .cal-event-resize { background: rgba(255,255,255,0.08); }

/* Month view (mantido como antes) */
.cal-month {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.calendar-wrap {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.cal-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--border);
}

.cal-head-cell {
  padding: 12px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(110px, auto);
}

.cal-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px;
  position: relative;
  min-height: 110px;
}

.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell.outside { background: var(--bg); opacity: 0.4; }
.cal-cell.today { background: var(--accent-soft); }

.cal-day {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 6px;
  font-weight: 600;
}

.cal-cell.today .cal-day { color: var(--accent); }

.cal-card {
  background: var(--bg-elev-2);
  border-left: 2px solid var(--green);
  padding: 4px 8px;
  margin-bottom: 4px;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.cal-card:hover { background: var(--bg); transform: translateX(2px); }
.cal-card[data-sla="warning"] { border-left-color: var(--orange); }
.cal-card[data-sla="danger"] { border-left-color: var(--red); }

.cal-card-cli {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-right: 4px;
}

/* ---------- CLIENT VIEW ---------- */
.client-board { display: flex; flex-direction: column; gap: 18px; }

/* ---------- v0.10.3: ÁREA DE PROJETOS (grid → jobs → card) ---------- */
.projetos-loading { padding: 32px; color: var(--text-dim); font-style: italic; }
.projetos-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.projetos-title { font-family: var(--font-display, inherit); font-size: 20px; font-weight: 700; color: var(--text); }
.projetos-sub { font-size: 12px; color: var(--text-dim); font-weight: 500; margin-left: 6px; }
.projetos-filter { display: inline-flex; gap: 4px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.pj-fbtn {
  border: none; background: transparent; color: var(--text-muted);
  font-family: inherit; font-size: 12px; padding: 5px 12px; border-radius: 6px; cursor: pointer;
}
.pj-fbtn.on { background: var(--accent); color: #fff; }
/* v0.10.48: botão "+ Novo projeto" na toolbar de Projetos */
.pj-novo-btn {
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  font-family: inherit; font-size: 12px; font-weight: 600; padding: 5px 14px;
  border-radius: 6px; cursor: pointer; margin-right: 10px; transition: background .15s ease, color .15s ease;
}
.pj-novo-btn:hover { background: var(--accent); color: #fff; }
/* v0.10.53: filtro por cliente na view BI (substitui Todos/Meu papel/...) */
.bi-cli-filtro { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.bi-cli-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-right: 4px; }
.bi-cli-btn {
  border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text-muted);
  font-family: inherit; font-size: 12px; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bi-cli-btn:hover { color: var(--text); border-color: var(--border-strong); }
.bi-cli-btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
/* descrição do projeto no detalhe (pasta) */
.projeto-detalhe-desc {
  font-size: 13px; color: var(--text-muted); margin-top: 10px; line-height: 1.5;
  max-width: 760px; white-space: pre-wrap;
}
/* campo opcional + textarea no wizard */
.ncard-opt { color: var(--text-dim); font-weight: 400; text-transform: none; letter-spacing: 0; }
.ncard-textarea { min-height: 60px; resize: vertical; line-height: 1.45; font-family: inherit; }
.pj-back {
  border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text-muted);
  font-family: inherit; font-size: 13px; padding: 6px 14px; border-radius: 8px; cursor: pointer;
}
.pj-back:hover { color: var(--text); border-color: var(--border-strong); }

.projetos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px;
}
.projeto-card {
  text-align: left; cursor: pointer; font-family: inherit;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 6px; transition: all 0.15s ease;
}
.projeto-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,0.25); transform: translateY(-1px); }
.projeto-card-num { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; }
.projeto-card-name { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.25; }
.projeto-card-cli { font-size: 12px; color: var(--text-muted); }
.projeto-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
}
.projeto-card-jobs { color: var(--text-muted); font-weight: 600; }
.projeto-card-owner {
  display: flex; align-items: center; gap: 7px; margin-top: 8px;
  padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--text-muted);
}

.projeto-detalhe-head { margin-bottom: 16px; }
.projeto-detalhe-num { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; }
.projeto-detalhe-name { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.2; }
.projeto-detalhe-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-family: var(--font-mono); }

.projeto-jobs { display: flex; flex-direction: column; gap: 8px; }
.projeto-job {
  display: grid; grid-template-columns: 88px 1fr 140px 130px 92px; align-items: center; gap: 12px;
  text-align: left; cursor: pointer; font-family: inherit;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; transition: all 0.15s ease;
}
.projeto-job:hover { border-color: var(--accent); background: var(--bg-elev-2); }
.projeto-job[data-sla="danger"] { box-shadow: inset 3px 0 0 0 var(--red); }
.projeto-job[data-sla="warning"] { box-shadow: inset 3px 0 0 0 var(--orange); }
.projeto-job-num { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.projeto-job-title { font-size: 14px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.projeto-job-dept { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.projeto-job-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.projeto-job-assignee { font-size: 12px; color: var(--text-muted); }
.projeto-job-due { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); text-align: right; }
@media (max-width: 720px) {
  .projeto-job { grid-template-columns: 1fr auto; }
  .projeto-job-num, .projeto-job-dept, .projeto-job-assignee { display: none; }
}

/* v0.5.9: bloco "Atendimento · por cliente" abaixo do Kanban padrão */
.atd-por-cliente {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.atd-por-cliente-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.atd-por-cliente-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.atd-por-cliente-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}
.atd-cliente-empty {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  padding: 6px;
}

.client-section {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.client-section-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-elev-2);
}

.client-section-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}

.client-section-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

.client-depts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--border);
}

/* v0.7.29: engrenagem de preferências no header de notificações */
.notif-prefs-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 15px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}
.notif-prefs-btn:hover { background: var(--bg-elev); color: var(--text); }

/* v0.7.29: modal de preferências de notificação */
.np-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: min(620px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.np-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.np-body { padding: 8px 20px 20px; overflow-y: auto; }
.np-cat { margin-top: 18px; }
.np-cat-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}
.np-cat-head {
  display: grid;
  grid-template-columns: 1fr 64px 64px;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 0 4px;
  border-bottom: 1px solid var(--border);
}
.np-cat-head span:not(:first-child) { text-align: center; }
.np-row {
  display: grid;
  grid-template-columns: 1fr 64px 64px;
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.np-row-label { font-size: 12px; color: var(--text); line-height: 1.35; }
.np-toggle {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 5px 0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.np-toggle.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.np-na { text-align: center; color: var(--text-dim); font-size: 12px; }
.np-note {
  margin-top: 16px;
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.4;
}

/* v0.7.26: TM Agent banner no modal — sugestão de operador+prazo */
.tm-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.45;
  border: 1px solid var(--border);
  background: var(--bg-elev);
}
.tm-banner-loading {
  color: var(--text-dim);
  font-style: italic;
}
.tm-banner-suggest {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(99, 102, 241, 0.06);
}
.tm-banner-warn {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.08);
}
.tm-banner-error {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}
.tm-banner-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}
.tm-banner-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tm-banner-content > strong {
  font-size: 13px;
  color: var(--text);
}
.tm-banner-motivo {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.tm-banner-btn {
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: white;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
}
.tm-banner-btn:hover { filter: brightness(1.1); }
.tm-banner-btn:disabled {
  background: var(--text-dim);
  cursor: not-allowed;
}

/* v0.8.0: Motor de Workflow — painel "Enviar pra execução" + resumo da cadeia */
.wf-panel {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.45;
}
.wf-panel.wf-loading { color: var(--text-dim); font-style: italic; }
.wf-panel.wf-error   { border-color: rgba(239,68,68,0.4);  background: rgba(239,68,68,0.08); }
.wf-panel.wf-warn,
.wf-warn             { color: var(--text-dim); font-style: italic; }
.wf-launch  { border-color: rgba(255,77,0,0.30);  background: var(--accent-soft); }
.wf-summary { border-color: rgba(99,102,241,0.28); background: rgba(99,102,241,0.05); }

.wf-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.wf-head-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.wf-head-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wf-head-txt > strong { font-size: 13px; color: var(--text); }
.wf-head-txt > span { font-size: 11px; color: var(--text-dim); }
.wf-workflow-sel {
  font-size: 11px; padding: 5px 8px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text);
}

.wf-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
/* v0.10.19: linha da cadeia em 2 níveis (cabeçalho + meta) */
.wf-row { display: flex; flex-direction: column; gap: 5px; padding: 8px 0; border-top: 1px solid var(--border); }
.wf-row:first-child { border-top: none; padding-top: 2px; }
.wf-row-head { display: flex; align-items: center; gap: 10px; }
.wf-row-meta { display: flex; align-items: center; gap: 10px; padding-left: 30px; }
.wf-row-num {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--accent); color: #fff;
}
.wf-row-label { flex: 1; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.wf-row-hint {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase; color: #fff;
  background: var(--accent); padding: 1px 6px; border-radius: 999px; opacity: .85;
}
.wf-person-pick { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.wf-person-name { font-size: 12px; color: var(--text); font-weight: 600; }
.wf-person-edit {
  background: none; border: none; cursor: pointer; font-size: 11px;
  padding: 0 2px; opacity: 0.6; line-height: 1;
}
.wf-person-edit:hover { opacity: 1; }
.wf-person {
  flex: 1; font-size: 12px; padding: 6px 8px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text);
}
.wf-person[hidden] { display: none; }
.wf-row-prazo { flex-shrink: 0; font-size: 11px; color: var(--text-dim); white-space: nowrap; }

.wf-launch-btn, .wf-advance-btn {
  width: 100%; padding: 10px 14px; border: none; border-radius: 8px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 12px;
  cursor: pointer; letter-spacing: 0.02em;
}
.wf-launch-btn:hover, .wf-advance-btn:hover { filter: brightness(1.1); }
.wf-launch-btn:disabled, .wf-advance-btn:disabled { background: var(--text-dim); cursor: not-allowed; }

/* v0.9.3: Aprovação Rápida — painel pendente no card */
.ar-panel { margin-top: 10px; border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.07); }
.ar-head { font-size: 13px; color: var(--text); margin-bottom: 4px; }
.ar-sub  { font-size: 11px; color: var(--text-muted); line-height: 1.4; margin-bottom: 10px; }
.ar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ar-actions .btn { flex: 1; min-width: 140px; }

/* v0.9.3: diálogo Próximos Passos + Justificativa (overlay) */
.pp-box {
  width: min(440px, 94vw); background: var(--panel); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 14px; padding: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4); display: flex; flex-direction: column; gap: 10px;
}
.pp-head { margin-bottom: 4px; }
.pp-eyebrow {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; background: var(--accent-soft); color: var(--accent);
  padding: 3px 8px; border-radius: 5px; margin-bottom: 8px;
}
.pp-title { display: block; font-size: 17px; color: var(--text); }
.pp-sub { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; }
.pp-opt {
  display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; cursor: pointer; transition: border-color .12s, background .12s;
}
.pp-opt:hover { border-color: var(--accent); background: var(--bg-elev-2); }
.pp-opt:disabled { opacity: .5; cursor: not-allowed; }
.pp-opt-ic { font-size: 18px; flex-shrink: 0; line-height: 1.3; }
.pp-opt-txt { display: flex; flex-direction: column; gap: 2px; }
.pp-opt-txt strong { font-size: 13px; color: var(--text); }
.pp-opt-txt span { font-size: 11px; color: var(--text-muted); line-height: 1.35; }
.pp-foot { display: flex; justify-content: flex-start; margin-top: 4px; }

/* v0.10.3: modal Nova subtarefa (reaproveita .pp-box) */
.st-box { width: min(480px, 94vw); }
.st-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim); margin: 6px 0 -4px;
}
.st-select, .st-textarea {
  width: 100%; background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px;
  font-family: inherit; font-size: 13px; box-sizing: border-box;
}
.st-select:focus, .st-textarea:focus { outline: none; border-color: var(--accent); }
.st-textarea { min-height: 84px; resize: vertical; line-height: 1.45; }
/* v0.10.18: cascata cliente → projeto + "pra você mesmo" */
.st-cascade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-cascade-col { min-width: 0; }
.st-cascade .st-select { margin-top: 2px; }
.st-para-fixo {
  margin-top: 10px; padding: 8px 11px; border-radius: 8px;
  background: var(--bg-elev); border: 1px dashed var(--border);
  font-size: 12px; color: var(--text-dim);
}
.st-para-fixo strong { color: var(--text); }

/* v0.10.3: painel de subtarefas dentro do card */
.st-parent-link {
  display: inline-block; font-size: 12px; color: var(--text-muted);
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 11px; margin-bottom: 12px; cursor: pointer;
}
.st-parent-link:hover { color: var(--text); border-color: var(--accent); }
.st-panel {
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  margin-bottom: 14px; background: var(--bg-elev);
}
.st-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.st-panel-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; }
.st-add-btn {
  border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text-muted);
  font-family: inherit; font-size: 12px; padding: 4px 10px; border-radius: 7px; cursor: pointer;
}
.st-add-btn:hover { color: var(--accent); border-color: var(--accent); }
.st-children { display: flex; flex-direction: column; gap: 6px; }
.st-child {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 11px; font-family: inherit;
}
.st-child:hover { border-color: var(--accent); }
.st-child-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); flex: 0 0 auto; }
.st-child-dot.late { background: var(--red); }
.st-child-title { flex: 1; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-child-who { font-size: 11px; color: var(--text-dim); }
.st-empty { font-size: 12px; color: var(--text-dim); font-style: italic; padding: 4px 0; }
.justif-input {
  width: 100%; min-height: 90px; resize: vertical; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text);
  padding: 10px 12px; font: inherit; font-size: 13px;
}

.wf-trows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.wf-trow { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.wf-trow-ic { flex-shrink: 0; font-size: 13px; width: 16px; text-align: center; }
.wf-trow-label { flex: 0 0 120px; font-weight: 600; color: var(--text); }
.wf-trow-person { flex: 1; color: var(--text-dim); min-width: 0; }
.wf-trow-prazo { flex-shrink: 0; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.wf-trow[data-status="active"] .wf-trow-label { color: var(--accent); }
.wf-trow[data-status="active"] .wf-trow-person { color: var(--text); }
.wf-trow[data-status="done"] .wf-trow-label,
.wf-trow[data-status="done"] .wf-trow-person { opacity: 0.6; }
.wf-done-note { font-size: 12px; color: var(--text-dim); font-style: italic; }
.wf-flip-btn {
  margin-top: 10px; width: 100%; padding: 9px 14px; border: 1px solid var(--orange);
  border-radius: 8px; background: rgba(245,158,11,0.10); color: var(--orange);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.wf-flip-btn:hover { background: rgba(245,158,11,0.18); }
.wf-flip-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* v0.8.1: tela admin "Time dos clientes" */
.ct-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: min(560px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
/* v0.10.2: Hub Admin — abas fichário reunindo os 4 tools admin */
.admin-hub {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  width: min(1000px, 100%); height: 86vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4); overflow: hidden;
}
.admin-hub-head { gap: 10px; align-items: flex-end; }
.admin-hub-tabs { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.admin-hub-tab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0; padding: 7px 12px; font-size: 13px; font-weight: 600;
  color: var(--text-muted); cursor: pointer;
}
.admin-hub-tab:hover { color: var(--text); background: var(--bg-elev-2); }
.admin-hub-tab.on { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-soft); }
.admin-hub-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
/* v0.10.2: sub-abas da view Workflow */
.wf-subtabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.wf-subtab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.wf-subtab:hover { color: var(--text); }
.wf-subtab.on { color: var(--accent); border-bottom-color: var(--accent); }

/* v0.10.5: toggle Por cliente | Capacidade + painel de capacidade/saturação */
.ct-subtabs { display: inline-flex; gap: 2px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 3px; margin-right: 10px; }
.ct-subtab { background: transparent; border: none; border-radius: 6px; padding: 5px 12px; font-size: 12px; color: var(--text-muted); cursor: pointer; font-family: inherit; }
.ct-subtab.on { background: var(--accent); color: #fff; }
.cap-head { padding: 12px 18px; font-size: 12px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.cap-table { padding: 6px 0; }
.cap-row { display: grid; grid-template-columns: 1fr 70px 60px 130px 150px; align-items: center; gap: 10px; padding: 9px 18px; font-size: 13px; border-bottom: 1px solid var(--border); }
.cap-row-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--border-strong, var(--border)); }
.cap-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cap-name-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.cap-role { font-style: normal; font-size: 10px; color: var(--text-dim); }
.cap-ava { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; background: var(--accent); }
.cap-load { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.cap-sat { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; }
.cap-bar { flex: 1; height: 7px; background: var(--bg-elev-2); border-radius: 4px; overflow: hidden; }
.cap-bar-fill { display: block; height: 100%; background: #22c55e; }
.cap-sat.warn .cap-bar-fill { background: var(--orange, #f59e0b); }
.cap-sat.danger .cap-bar-fill { background: var(--red, #ef4444); }
.cap-sat.warn b { color: var(--orange, #f59e0b); }
.cap-sat.danger b { color: var(--red, #ef4444); }

/* v0.10.6 (#2): edição inline do cargo */
.ct-role-editable { cursor: pointer; border-bottom: 1px dashed transparent; }
.ct-role-editable:hover { border-bottom-color: var(--border-strong, var(--border)); color: var(--text); }
.ct-role-input { width: 100%; background: var(--bg-elev); color: var(--text); border: 1px solid var(--accent); border-radius: 6px; padding: 3px 7px; font-family: inherit; font-size: 13px; }
/* v0.10.6 (#1): CRUD do catálogo de funções */
.fc-addrow { display: flex; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.fc-addrow input { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-family: inherit; font-size: 13px; }
#fc-new-label { flex: 1; }
#fc-new-code { width: 150px; }
.fc-row { display: flex; align-items: center; gap: 10px; }
.fc-row.fc-off { opacity: 0.5; }
.fc-label { flex: 1; background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; font-family: inherit; font-size: 13px; }
.fc-ordem { width: 60px; background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 6px; font-family: var(--font-mono); font-size: 12px; }
.fc-codetag { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); min-width: 84px; }
/* v0.10.31: excluir função (completa o CRUD) */
.fc-del { background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-size: 13px; padding: 5px 7px; opacity: 0.55; }
.fc-del:hover { opacity: 1; background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.4); }
.fc-del:disabled { opacity: 0.4; cursor: not-allowed; }
.fc-note { padding: 12px 18px; font-size: 11px; color: var(--text-dim); }

/* tools embutidos no hub: preenchem o corpo (sem moldura/sombra própria) */
.ct-modal.embedded, .wfe-modal.embedded {
  width: 100%; max-width: none; height: 100%; max-height: none; flex: 1; min-height: 0;
  border: none; border-radius: 0; box-shadow: none; background: transparent;
}
/* v0.10.4: scaffold das abas previstas (SLA / Regras de Tráfego) */
.hub-scaffold { padding: 40px 32px; max-width: 560px; }
.hub-scaffold-ic { font-size: 34px; }
.hub-scaffold-title { display: block; font-size: 20px; color: var(--text); margin: 8px 0 4px; }
.hub-scaffold-sub { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0 0 14px; }
.hub-scaffold-list { margin: 0 0 16px; padding-left: 18px; color: var(--text-muted); font-size: 13px; line-height: 1.7; }
.hub-scaffold-note { font-size: 12px; color: var(--text-dim); border-top: 1px dashed var(--border); padding-top: 12px; }
.hub-scaffold-note code { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

/* v0.10.8 — aba SLA (catálogo de peças) */
.sla-body { overflow-y: auto; padding: 4px 16px 18px; max-height: 62vh; }
.sla-summary { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--text-muted); padding: 8px 18px; border-bottom: 1px solid var(--border); }
.sla-summary strong { color: var(--accent); }
.sla-sum-dot { color: var(--text-dim); }
.sla-group { margin-top: 14px; }
.sla-group-head { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; background: var(--bg-elev); padding: 6px 4px; z-index: 1; border-bottom: 1px solid var(--border); }
.sla-group-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.sla-group-n { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.sla-cat-toggle { margin-left: auto; font-size: 11px; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--bg-elev-2); color: var(--text-muted); cursor: pointer; }
.sla-cat-toggle:hover { color: var(--text); border-color: var(--accent); }
.sla-cols-head, .sla-row { display: grid; grid-template-columns: 1fr 52px 52px 52px 52px 60px 54px; align-items: center; gap: 6px; padding: 5px 4px; }
.sla-cols-head { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px dashed var(--border); }
.sla-row { border-bottom: 1px solid var(--border); font-size: 13px; }
.sla-row.off { opacity: .42; }
.sla-c-peca { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sla-c-h { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 12px; }
.sla-cols-head .sla-c-h { text-align: right; }
.sla-c-tog { text-align: center; }
.sla-c-h-edit { cursor: pointer; border-radius: 4px; }
.sla-c-h-edit:hover { background: var(--accent-soft); color: var(--text); }
/* v0.10.29: countdown AO VIVO da promessa ao cliente no card (só Atendimento) */
.card-promessa {
  margin: 6px 0 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #f97316;
  background: rgba(249,115,22,0.10);
  border: 1px solid rgba(249,115,22,0.30);
  border-radius: 6px;
  padding: 3px 8px;
  font-variant-numeric: tabular-nums;
}
.card-promessa .promessa-live-pre { font-weight: 400; opacity: 0.85; }
.card-promessa.promessa-overdue {
  color: #ef4444;
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.45);
}
.mini-card-sla.promessa-live { font-variant-numeric: tabular-nums; }
/* v0.10.29: coluna SLA Cliente (promessa) — destaque em laranja (cor da Atendimento/countdown) */
.sla-c-cli { color: #f97316; font-weight: 600; }
.sla-cols-head .sla-c-cli { color: #f97316; }
.sla-c-cli-edit { cursor: pointer; border-radius: 4px; }
.sla-c-cli-edit:hover { background: rgba(249,115,22,0.14); }
.sla-h-input { width: 46px; font-size: 12px; text-align: right; padding: 1px 3px; border: 1px solid var(--accent); border-radius: 4px; background: var(--bg-elev); color: var(--text); }
.sla-switch { position: relative; display: inline-block; width: 34px; height: 18px; cursor: pointer; }
.sla-switch input { opacity: 0; width: 0; height: 0; }
.sla-switch-track { position: absolute; inset: 0; background: var(--bg-elev-2); border: 1px solid var(--border-strong); border-radius: 999px; transition: .15s; }
.sla-switch-track::before { content: ''; position: absolute; left: 2px; top: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-dim); transition: .15s; }
.sla-switch input:checked + .sla-switch-track { background: var(--accent-soft); border-color: var(--accent); }
.sla-switch input:checked + .sla-switch-track::before { transform: translateX(16px); background: var(--accent); }
.sla-switch input:disabled + .sla-switch-track { cursor: not-allowed; opacity: .6; }

/* v0.10.9 — wiring SLA no wizard + card + perfil do cliente */
.nc-peca-prazo { margin-top: 8px; padding: 8px 11px; border-radius: 8px; background: var(--accent-soft); border: 1px solid var(--accent); font-size: 13px; color: var(--text); display: flex; flex-direction: column; gap: 2px; }
.nc-peca-meta { font-size: 11px; color: var(--text-muted); }
.nc-peca-loading { font-size: 12px; color: var(--text-dim); }
.m-sla-promessa { margin-top: 6px; font-size: 12px; color: var(--text-muted); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 7px; padding: 5px 9px; }
.m-sla-promessa strong { color: var(--text); }
.m-sla-promessa.has-conflito { border-color: #ef4444; background: rgba(239,68,68,.08); }
.m-sla-conflito { display: inline-block; margin-top: 4px; color: #ef4444; font-size: 11px; line-height: 1.4; }
.pill-conflito-sla { background: rgba(239,68,68,.14); color: #ef4444; font-weight: 600; }
.ct-sla-profile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 14px; margin: 8px 0 4px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 9px; }
.ct-sla-label { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.ct-sla-ia { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text); cursor: pointer; }
.ct-sla-hint { font-size: 11px; color: var(--text-dim); flex: 1; min-width: 140px; }

/* v0.10.8 — aba Regras de Tráfego (espelho read-only do painel n8n) */
.trf-modal { overflow-y: auto; max-height: 70vh; padding: 14px 18px 20px; }
.trf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.trf-open-btn { flex: none; font-size: 12px; padding: 7px 12px; border-radius: 7px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; }
.trf-open-btn:hover { filter: brightness(1.08); }
.trf-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 18px 0 8px; display: flex; align-items: center; gap: 8px; }
.trf-preset-pill { font-size: 10px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 8px; text-transform: none; letter-spacing: 0; }
.trf-preset-pill.sm { padding: 1px 6px; }
.trf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.trf-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; }
.trf-k { font-size: 11px; color: var(--text-dim); }
.trf-v { font-size: 13px; color: var(--text); font-weight: 600; }
.trf-sub { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.trf-yes { color: #22c55e; font-size: 12px; }
.trf-no { color: var(--text-dim); font-size: 12px; }
.trf-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.trf-preset { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.trf-preset.on { border-color: var(--accent); background: var(--accent-soft); }
.trf-preset strong { font-size: 13px; color: var(--text); }
.trf-preset span { font-size: 11px; color: var(--text-muted); line-height: 1.45; }
.trf-legend { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 0 0 10px; }
.trf-rules { display: flex; flex-direction: column; gap: 6px; }
.trf-rule { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; }
.trf-rule-top { display: flex; align-items: center; gap: 8px; }
.trf-rule-n { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-elev-2); border: 1px solid var(--border-strong); color: var(--text-muted); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.trf-rule-name { flex: 1; font-size: 13px; color: var(--text); font-weight: 600; }
.trf-rule-note { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin-top: 4px; padding-left: 28px; }
.trf-st { flex: none; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.trf-st-on { color: #22c55e; background: rgba(34,197,94,.12); }
.trf-st-mid { color: #f59e0b; background: rgba(245,158,11,.12); }
.trf-st-off { color: var(--text-dim); background: var(--bg-elev-2); }
.ct-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
}
.ct-toolbar label { font-size: 12px; color: var(--text-dim); }
.ct-toolbar select {
  font-size: 13px; padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text);
}
.ct-hint { flex: 1 1 100%; font-size: 11px; color: var(--text-dim); }
.ct-body { overflow-y: auto; padding: 8px 18px 18px; }
.ct-group { margin-top: 14px; }
.ct-group-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-dim); margin-bottom: 6px;
}
.ct-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.ct-row-name { flex: 0 0 160px; font-weight: 600; color: var(--text); font-size: 13px; }
.ct-row-role { flex: 1; font-size: 12px; color: var(--text-muted); min-width: 0; }
.ct-toggle {
  flex-shrink: 0; padding: 5px 12px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: var(--bg-elev);
  color: var(--text-dim); font-size: 11px; font-weight: 600; cursor: pointer;
}
.ct-toggle.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ct-toggle:disabled { opacity: 0.5; cursor: wait; }

/* v0.10.1: tela admin Feriados & Férias (reusa .ct-modal/.ct-row) */
.ff-tab {
  padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border-strong);
  background: var(--bg-elev); color: var(--text-dim); font-size: 12px; font-weight: 600; cursor: pointer;
}
.ff-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ff-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.ff-form input[type="text"], .ff-form input[type="date"], .ff-form select {
  font-size: 12px; padding: 6px 8px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text);
}
.ff-form input[type="text"] { flex: 1; min-width: 140px; }
.ff-check { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-dim); }
/* v108: labels de início/fim do feriado */
.ff-datelabel { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--text-dim); }
.ff-opt { color: var(--text-dim); opacity: 0.8; }
.ff-add {
  padding: 6px 12px; border-radius: 6px; border: none;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer;
}
/* v109: painel Distribuição (metodologia SLA) */
.dx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 12px 0; align-items: start; }
@media (max-width: 720px) { .dx-cols { grid-template-columns: 1fr; } }
.dx-col { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--bg-elev); }
.dx-col-h { font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--text); }
.dx-col-sub { font-size: 11px; color: var(--text-dim); margin: 2px 0 10px; }
.dx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 12.5px; color: var(--text); }
.dx-row-h { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 2px; }
.dx-in {
  width: 72px; text-align: right; font-family: var(--font-mono); font-size: 12px;
  padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border-strong);
  background: var(--panel); color: var(--text);
}
.dx-in:focus { outline: none; border-color: var(--accent); }
.dx-in:disabled { opacity: .6; }
.dx-sum { margin-top: 8px; font-size: 11px; color: var(--text-dim); text-align: right; }
.dx-ok { color: var(--green); }
.dx-warn { color: var(--orange); }
/* Fase 2 (mig 124): painel Aprovadores por departamento */
.apv-wrap { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; }
.apv-dept { display: grid; grid-template-columns: 160px 1fr 170px; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); }
@media (max-width: 720px) { .apv-dept { grid-template-columns: 1fr; } }
.apv-dept-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.apv-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.apv-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); font-size: 12px; color: var(--text); }
.apv-chip .apv-x { border: none; background: none; color: var(--text-dim); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.apv-chip .apv-x:hover { color: #ef4444; }
.apv-empty { font-size: 11.5px; color: var(--text-dim); font-style: italic; }
.apv-add { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 12px; }
/* Anotação da regra teto ↔ SLA no painel Distribuição */
.dx-rule { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 2px; padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--orange); border-radius: 8px; background: var(--bg-elev); }
.dx-rule-ic { font-size: 15px; line-height: 1.2; }
.dx-rule strong { display: block; font-size: 12px; margin-bottom: 3px; color: var(--text); }
.dx-rule span { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; }
.dx-rule em { color: var(--orange); font-style: italic; }
/* Fase B (mig 121): comparativo shadow manual × computado no painel Distribuição */
.dx-cmp { padding: 4px 0 8px; }
.dx-cmp-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-top: 10px; background: var(--bg-elev); }
.dx-cmp-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.dx-cmp-row { display: grid; grid-template-columns: 1.4fr 1fr 56px 56px 56px; gap: 8px; align-items: center; padding: 4px 0; font-size: 12.5px; color: var(--text); }
.dx-cmp-row-h { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.dx-cmp-row > span:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }

/* v0.8.2: tela admin Funções & senioridade (reusa .ct-modal/.ct-row) */
.fa-row .ct-row-name { flex: 1; }
.fa-sen {
  flex-shrink: 0; font-size: 11px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text);
}
.fa-sen:disabled { opacity: 0.4; }
/* v0.10.79: cabeçalhos de grupo na aba Atribuir (Departamento/Direção/IA) */
.fa-sec-h { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); margin: 18px 2px 2px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.fa-sec-h:first-child { margin-top: 4px; }
.fa-sec-n { font-weight: 600; color: var(--text-dim); background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; font-size: 10px; }
.fa-sec-h + .ct-group { margin-top: 4px; }

/* v0.8.3: Editor de workflows (drag-and-drop) */
.wfe-modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  width: min(980px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4); overflow: hidden;
}
.wfe-cols { display: flex; flex: 1; min-height: 0; }
.wfe-list {
  flex: 0 0 230px; border-right: 1px solid var(--border); overflow-y: auto;
  padding: 12px 10px; display: flex; flex-direction: column; gap: 2px;
}
.wfe-cat { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin: 10px 6px 4px; }
.wfe-item { display: flex; align-items: center; gap: 8px; padding: 8px 8px; border-radius: 7px; cursor: pointer; }
.wfe-item:hover { background: var(--bg-elev); }
.wfe-item.sel { background: var(--accent-soft); }
.wfe-item-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; }
.wfe-item-dot.on { background: #22c55e; }
.wfe-item-name { flex: 1; font-size: 13px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfe-item-n { font-size: 11px; color: var(--text-dim); }
.wfe-new {
  margin-top: 10px; padding: 9px; border-radius: 7px; border: 1px dashed var(--border-strong);
  background: transparent; color: var(--accent); font-weight: 600; font-size: 12px; cursor: pointer;
}
.wfe-new:hover { background: var(--accent-soft); }

.wfe-editor { flex: 1; overflow-y: auto; padding: 18px 20px; min-width: 0; }
.wfe-empty { padding: 40px 24px; color: var(--text-dim); font-style: italic; text-align: center; }
.wfe-meta { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.wfe-meta-row { display: flex; gap: 8px; }
.wfe-meta-row .wfe-input { flex: 1; }
.wfe-input {
  font-size: 13px; padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text);
}
#wfe-name { font-size: 15px; font-weight: 600; }

.wfe-seqwrap { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.wfe-end { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-dim); flex-shrink: 0; }
.wfe-seq {
  flex: 1; min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px; border: 1.5px dashed var(--border-strong); border-radius: 10px; background: var(--bg-elev);
}
.wfe-seq.wfe-dragover, .wfe-slot.wfe-dragover { border-color: var(--accent); background: var(--accent-soft); }
.wfe-seq-hint { color: var(--text-dim); font-size: 12px; font-style: italic; }
.wfe-slot {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid rgba(99,102,241,0.3); background: rgba(99,102,241,0.07); cursor: grab;
}
.wfe-slot:active { cursor: grabbing; }
.wfe-slot-num {
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0;
}
.wfe-slot-label { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.wfe-slot-fields { display: flex; align-items: center; gap: 2px; }
.wfe-slot-fields span { font-size: 10px; color: var(--text-dim); }
.wfe-sla, .wfe-min {
  width: 42px; font-size: 11px; padding: 3px 5px; border-radius: 5px;
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text);
}
.wfe-slot-x {
  border: none; background: transparent; color: var(--text-dim); font-size: 16px; cursor: pointer; line-height: 1; padding: 0 2px;
}
.wfe-slot-x:hover { color: #ef4444; }

.wfe-palette-label { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; }
.wfe-palette { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
/* v0.10.67: paleta em blocos (Equipe / Diretores / IA) */
.wfe-palette-grp { margin-bottom: 6px; }
.wfe-palette-grp .wfe-palette { margin-bottom: 12px; }
.wfe-palette-sub { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin: 10px 0 6px; opacity: .85; }
/* v0.10.68: validador de workflow */
.wfe-valida { margin: 4px 0 14px; display: flex; flex-direction: column; gap: 5px; }
.wfe-valida-item { font-size: 12px; line-height: 1.35; padding: 7px 10px; border-radius: 7px; border: 1px solid transparent; }
.wfe-valida-item.warn { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.35); color: #f59e0b; }
.wfe-valida-item.info { background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.30); color: #93c5fd; }
.wfe-valida-item.ok   { background: rgba(34,197,94,.10);  border-color: rgba(34,197,94,.30);  color: #86efac; }
/* v0.10.69: rodapé com as regras de cada página de admin */
.admin-hub-rules { margin: 18px 16px 6px; padding: 10px 12px 0; border-top: 1px solid var(--border, rgba(255,255,255,.08)); font-size: 11px; line-height: 1.5; color: var(--text-dim, #8a8f98); }
.admin-hub-rules strong { color: var(--text-dim, #9aa0a8); font-weight: 600; }

/* v0.10.71 — aba Pessoas (CRUD) */
.px-search { background: var(--bg-elev-2); border: 1px solid var(--border-strong); color: var(--text); border-radius: 6px; padding: 5px 10px; font-size: 12px; font-family: inherit; min-width: 200px; }
.px-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); cursor: pointer; }
.px-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px 1fr; gap: 0; overflow: hidden; }
.px-list { border-right: 1px solid var(--border); overflow-y: auto; padding: 6px; }
.px-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.px-item:hover { background: var(--bg-elev-2); }
.px-item.on { background: var(--accent-soft); border-color: rgba(255,77,0,0.3); }
.px-item.px-off { opacity: .55; }
.px-item-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.px-item-name { font-size: 13px; font-weight: 600; color: var(--text); }
.px-item-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.px-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 5px; white-space: nowrap; }
.px-papel-admin { background: rgba(255,77,0,0.16); color: var(--accent); }
.px-papel-diretor { background: rgba(96,165,250,0.16); color: #60a5fa; }
.px-papel-operador { background: var(--bg-elev-2); color: var(--text-muted); }
.px-detail { overflow-y: auto; padding: 16px 20px; }
.px-empty { padding: 28px 8px; color: var(--text-dim); font-size: 13px; }
.px-form { max-width: 520px; }
.px-form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.px-form-head strong { font-size: 15px; color: var(--text); }
.px-active { font-size: 11px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border-strong); background: transparent; cursor: pointer; font-family: inherit; }
.px-active.on { color: #22c55e; border-color: rgba(34,197,94,0.4); }
.px-active.off { color: var(--text-dim); }
.px-field { display: block; margin-bottom: 12px; }
.px-field > span { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.px-field > span em { color: var(--text-dim); font-style: normal; }
.px-field input, .px-field select { width: 100%; box-sizing: border-box; background: var(--bg-elev-2); border: 1px solid var(--border-strong); color: var(--text); border-radius: 6px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.px-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.px-fns { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding: 6px 8px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px; }
.px-fn { display: flex; align-items: center; justify-content: flex-start; gap: 8px; font-size: 12px; color: var(--text); cursor: pointer; padding: 3px 4px; border-radius: 5px; }
.px-fn:hover { background: var(--bg-elev-1); }
/* checkbox não pode herdar o width:100%/padding de .px-field input */
.px-fn input { flex: 0 0 auto; width: auto; min-width: 0; padding: 0; margin: 0; }
.px-form-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.px-msg { font-size: 12px; color: var(--text-dim); }
@media (max-width: 720px) { .px-cols { grid-template-columns: 1fr; } .px-list { max-height: 160px; } .px-fns, .px-field-row { grid-template-columns: 1fr; } }
.wfe-chip {
  padding: 8px 14px; border-radius: 8px; cursor: grab; font-size: 12px; font-weight: 600;
  background: var(--accent-soft); border: 1px solid rgba(255,77,0,0.3); color: var(--text);
}
.wfe-chip:active { cursor: grabbing; }

.wfe-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); padding-top: 14px; }
.wfe-save {
  padding: 10px 22px; border: none; border-radius: 8px; background: var(--accent); color: #fff;
  font-weight: 700; font-size: 13px; cursor: pointer;
}
.wfe-save:hover { filter: brightness(1.1); }
.wfe-save:disabled { background: var(--text-dim); cursor: not-allowed; }
.wfe-toggle {
  padding: 9px 16px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--bg-elev); color: var(--text-dim); font-size: 12px; font-weight: 600; cursor: pointer;
}
/* v0.10.30: excluir workflow (completa o CRUD) */
.wfe-actions-left { display: flex; align-items: center; gap: 8px; }
.wfe-delete {
  padding: 9px 16px; border: 1px solid rgba(239,68,68,0.45); border-radius: 8px;
  background: rgba(239,68,68,0.08); color: #ef4444; font-size: 12px; font-weight: 600; cursor: pointer;
}
.wfe-delete:hover { background: rgba(239,68,68,0.16); }
.wfe-delete:disabled { opacity: 0.5; cursor: not-allowed; }
.wfe-protegido { padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); color: var(--text-dim); font-size: 12px; font-weight: 600; cursor: default; }
.wfe-aviso { display: flex; gap: 8px; align-items: baseline; margin-bottom: 12px; padding: 9px 12px; border: 1px solid var(--border); border-left: 3px solid var(--orange); border-radius: 8px; background: var(--bg-elev); font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.wfe-aviso strong { color: var(--text); }
.wfe-item-lock { font-size: 10px; opacity: 0.85; }

/* v0.8.5: visão "Em execução" */
.exec-wrap { padding: 8px 4px; }
.exec-head { font-size: 13px; color: var(--text-muted); margin: 4px 6px 14px; }
.exec-empty { padding: 48px 24px; text-align: center; color: var(--text-dim); font-style: italic; }
.exec-list { display: flex; flex-direction: column; gap: 6px; }
.exec-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
}
.exec-row:hover { border-color: var(--accent); background: var(--bg-elev-2); }
.exec-num { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); flex: 0 0 70px; }
.exec-title { flex: 2; font-weight: 600; font-size: 13px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exec-cli { flex: 0 0 90px; font-size: 12px; color: var(--text-muted); }
.exec-wf { flex: 1.4; font-size: 11px; color: var(--accent); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exec-resp { flex: 0 0 150px; font-size: 12px; color: var(--text); }
.exec-board { flex: 0 0 140px; font-size: 12px; color: var(--text-muted); }
.exec-prazo { flex: 0 0 90px; font-size: 12px; color: var(--text-dim); text-align: right; }
.exec-prazo.late { color: var(--red); font-weight: 700; }

/* v0.7.23: modal Editar card — layout em 2 colunas */
.ed-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: min(900px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.ed-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.ed-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 22px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  line-height: 1;
  border-radius: 6px;
}
.ed-close:hover { background: var(--bg-elev); color: var(--text); }
.ed-body {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ed-section { display: flex; flex-direction: column; gap: 8px; }
.ed-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border);
}
.ed-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .ed-row-2 { grid-template-columns: 1fr; }
}
.ed-field { display: flex; flex-direction: column; gap: 4px; }
.ed-field-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}
.ed-input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}
.ed-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,77,0,0.15);
}
.ed-textarea { resize: vertical; min-height: 70px; line-height: 1.4; }
.ed-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}

/* v0.7.22: matriz BI cliente × status */
.bi-matrix {
  display: flex;
  flex-direction: column;
  background: var(--border);
  gap: 1px;
  overflow-x: auto;
}
.bi-matrix-row {
  display: grid;
  grid-template-columns: 180px repeat(var(--bi-cols), minmax(150px, 1fr));
  gap: 1px;
  background: var(--border);
}
.bi-matrix-header {
  position: sticky;
  top: 0;
  z-index: 1;
}
.bi-matrix-cell-cli {
  background: var(--bg-elev);
  padding: 10px 12px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
}
.bi-matrix-header .bi-matrix-cell-cli {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-transform: uppercase;
  background: var(--panel);
}
.bi-matrix-cell-head {
  background: var(--panel);
  padding: 10px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bi-matrix-cell {
  background: var(--bg-elev);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 56px;
}
.bi-matrix-empty {
  color: var(--text-dim);
  font-size: 18px;
  text-align: center;
  opacity: 0.35;
}
.mini-card.bi-mini {
  padding: 6px 8px;
  font-size: 11px;
}
.mini-card.bi-mini .mini-card-title {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-dept-col {
  background: var(--bg-elev);
  padding: 12px;
  min-height: 120px;
}

.client-dept-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.client-dept-count {
  background: var(--bg-elev-2);
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9px;
}

.mini-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
  cursor: pointer;
  border-left: 2px solid var(--green);
  transition: all 0.15s ease;
}

.mini-card[data-sla="warning"] { border-left-color: var(--orange); }
.mini-card[data-sla="danger"] { border-left-color: var(--red); }
.mini-card:hover { transform: translateX(2px); border-color: var(--border-strong); }

.mini-card-title {
  font-size: 12px;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
}

.mini-card-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
/* v0.10.21: countdown da promessa ao cliente no mini-card */
.mini-card-sla {
  margin-top: 4px; font-family: var(--font-mono); font-size: 9px;
  font-weight: 700; letter-spacing: 0.03em; color: var(--green);
  display: inline-block; padding: 2px 6px; border-radius: 4px;
  background: color-mix(in srgb, var(--green) 14%, transparent);
}
.mini-card-sla-late {
  color: #fff; background: var(--red);
  animation: sla-pulse 1.6s ease-in-out infinite;
}
@keyframes sla-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.62; } }
/* rollup da promessa no cabeçalho do cliente */
.client-sla-head {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--green); margin-right: 8px;
  padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--green) 14%, transparent);
}
.client-sla-head.late { color: #fff; background: var(--red); }

/* ---------- WORKLOAD PANEL ---------- */
.workload-toggle {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 14px 8px;
  cursor: pointer;
  z-index: 50;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.workload-toggle:hover { color: var(--accent); padding-right: 12px; }

.workload-toggle-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}

.workload-panel {
  position: fixed;
  right: -360px;
  top: 0; bottom: 0;
  width: 360px;
  background: var(--bg-elev);
  border-left: 1px solid var(--border);
  z-index: 60;
  transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workload-panel.open { right: 0; }

.wl-header {
  padding: 22px 20px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wl-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}

.wl-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  width: 30px; height: 30px;
  border-radius: 6px;
}

.wl-close:hover { background: var(--bg-elev-2); color: var(--text); }

.wl-body { padding: 16px 20px; overflow-y: auto; flex: 1; }

/* v0.10.1: itens da Agenda do dia (drawer do operador) */
.agenda-date { font-size: 11px; text-transform: capitalize; color: var(--text-dim); margin-bottom: 12px; }
.agenda-empty { color: var(--text-dim); font-style: italic; font-size: 13px; padding: 6px 0; }
.agenda-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; margin-bottom: 8px; cursor: pointer; border-radius: 6px;
  background: color-mix(in srgb, var(--evt-color, var(--accent)) 16%, var(--bg-elev));
  border-left: 3px solid var(--evt-color, var(--accent));
  transition: background .15s ease;
}
.agenda-item:hover { background: color-mix(in srgb, var(--evt-color, var(--accent)) 28%, var(--bg-elev)); }
.agenda-item-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.agenda-item-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.25; }
.agenda-item-meta { font-size: 11px; color: var(--text-dim); }

.wl-person { margin-bottom: 18px; }

.wl-person-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.wl-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}

.wl-info { flex: 1; }
.wl-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 1px; }
.wl-role {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wl-count { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text); }

.wl-bar {
  height: 6px;
  background: var(--bg-elev-2);
  border-radius: 3px;
  overflow: hidden;
}

.wl-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
  background: var(--green);
}

.wl-bar-fill[data-load="warning"] { background: var(--orange); }
.wl-bar-fill[data-load="danger"] { background: var(--red); }

.wl-stats {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 4px;
  letter-spacing: 0.05em;
}

/* ---------- FAB & NEW CARD MODAL ---------- */
.fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px var(--accent-glow), 0 2px 6px rgba(0,0,0,0.3);
  z-index: 40;
  transition: all 0.2s ease;
  font-family: var(--font-body);
  font-weight: 300;
}

.fab:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 28px var(--accent-glow), 0 4px 10px rgba(0,0,0,0.4);
}

.fab.shifted { right: 388px; }

.ncard-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ncard-modal.show { display: flex; animation: fadeBackdrop 0.2s ease; }

.ncard-box {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 540px;
  overflow: hidden;
  animation: slideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.ncard-head { padding: 22px 26px 18px; border-bottom: 1px solid var(--border); position: relative; }
/* botão fechar (X) do wizard */
.ncard-close {
  position: absolute; top: 14px; right: 16px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px; background: transparent;
  color: var(--text-dim); font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
}
.ncard-close:hover { background: var(--bg); color: var(--text); border-color: var(--text-dim); }
/* ícone do date picker visível no tema escuro (#1) */
.ncard-box input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.85; cursor: pointer; }
.ncard-box input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* v0.10.47: modo CLARO → ícone do date-picker preto (sem inverter); modo escuro mantém branco */
body.light .ncard-box input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }

.ncard-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.ncard-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
}

.ncard-body {
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ncard-field { display: flex; flex-direction: column; gap: 6px; }

/* v0.7.3: layout horizontal compacto pra wizard pág 1 (cabia 2 campos por linha). */
.ncard-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 640px) {
  .ncard-grid-2col { grid-template-columns: 1fr; }
}

/* v0.7.6: toggle compacto (Urgente / Reunião) */
.ncard-toggle-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
}
.ncard-toggle-card input[type="checkbox"] { margin: 2px 0 0 0; }
.ncard-toggle-card span { display: block; }
.ncard-toggle-hint { color: var(--text-dim); font-size: 11px; margin-left: 4px; display: inline; }

/* v0.7.6: header pág 2 com botões de Transcrição no canto direito */
.ncard-page2-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.ncard-page2-header .ncard-page2-summary { flex: 1; }
.ncard-transcricao-btns { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.ncard-ia-transcricao-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #e0e7ff 0%, #ddd6fe 100%);
  border: 1px solid #c4b5fd;
  border-radius: 8px;
  color: #5b21b6;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.ncard-ia-transcricao-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}
/* v0.7.8: variante p/ "Transcrever reunião feita" — verde (action Drive watcher) */
.ncard-ia-reuniao-btn {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-color: #6ee7b7;
  color: #047857;
}
.ncard-ia-reuniao-btn:hover { box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); }

/* v0.7.6: campos do briefing em 2 colunas (layout horizontal pág 2) */
.ncard-briefing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.ncard-briefing-grid .ncard-field { gap: 4px; }
.ncard-briefing-grid .ncard-textarea { min-height: 64px; }
@media (max-width: 720px) {
  .ncard-briefing-grid { grid-template-columns: 1fr; }
}

.ncard-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}

.ncard-input,
.ncard-select {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  /* v0.7.10: padding direito maior pra não cortar texto longo
     ("Briefing | Criação Tech (VA / e-Detail)") na seta nativa do select */
  padding: 10px 36px 10px 12px;
  font-size: 14px;
  color: var(--text);
  font-family: var(--font-body);
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.ncard-input:focus,
.ncard-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* v0.9.9: "Quem pode participar" — dropdowns por função */
.nc-participantes { display: flex; flex-direction: column; gap: 8px; }
.nc-part-row { display: flex; align-items: center; gap: 10px; }
.nc-part-funcao {
  flex: 0 0 120px; font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: capitalize;
}
.nc-part-row .nc-part-select { flex: 1; }
.nc-part-empty { font-size: 12px; color: var(--text-dim); font-style: italic; padding: 4px 0; }

.ncard-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.ncard-foot {
  padding: 14px 26px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

/* ============================================================================
 * v0.7.26: Design refresh wizard — bate com briefing-form em n8n.
 * Overrides aplicados em cascata (mantém compat com seletor existente).
 * ========================================================================= */
.ncard-box {
  max-width: 680px;          /* mais largo (era 540) */
  border-radius: 16px;
}
.ncard-head {
  padding: 28px 32px 22px;
}
.ncard-eyebrow {
  color: var(--accent);      /* eyebrow em laranja (era cinza) */
  font-weight: 600;
  letter-spacing: 0.18em;
}
.ncard-title {
  font-size: 30px;           /* maior (era 22) */
  font-weight: 400;
  line-height: 1.1;
}
.ncard-title em {
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.ncard-body { padding: 24px 32px 12px; gap: 18px; }
.ncard-foot { padding: 18px 32px 24px; }

/* Inputs maiores, hover/focus ring com accent */
.ncard-input,
.ncard-select {
  padding: 12px 38px 12px 14px;
  font-size: 14px;
  border-radius: 10px;
  background: var(--bg);
  border-width: 1px;
}
.ncard-input:focus,
.ncard-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 77, 0, 0.15);
}

/* Toggle radio chip-style (igual aos checkboxes do briefing-form) */
.ncard-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
  transition: border-color 0.15s, background 0.15s;
}
.ncard-toggle:hover { border-color: var(--accent); }
.ncard-toggle input[type="radio"]:checked + span,
.ncard-toggle:has(input:checked) {
  border-color: var(--accent);
  background: rgba(255, 77, 0, 0.08);
  color: var(--accent);
  font-weight: 600;
}
.ncard-toggle-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* CTA principal full-width laranja (matching ENVIAR BRIEFING) */
.ncard-foot .btn-primary,
.ncard-foot .ncard-cta {
  padding: 12px 24px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 10px;
}
.ncard-foot .btn-primary[data-full="1"],
.ncard-foot .ncard-cta[data-full="1"] {
  width: 100%;
  justify-content: center;
}

/* ---------- BRIEFING MODAL ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}

body.light .modal-backdrop { background: rgba(24, 24, 27, 0.55); }

.modal-backdrop.show { display: flex; animation: fadeBackdrop 0.2s ease; }

@keyframes fadeBackdrop { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 1080px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  display: grid;
  grid-template-columns: 1fr 280px;
  overflow: hidden;
  animation: slideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  margin: auto;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-main { overflow-y: auto; max-height: calc(100vh - 80px); }

.modal-header {
  padding: 24px 32px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-elev);
  z-index: 5;
}

/* v0.7.2: botão Fechar no canto superior direito do header */
.modal-header-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 6;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.modal-header-close:hover {
  background: var(--bg);
  color: var(--text);
  border-color: var(--text-dim);
}

.modal-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  /* v0.7.12: reserva espaço pro botão X (32px + 14px right + buffer) */
  padding-right: 52px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.modal-eyebrow-id { color: var(--accent); font-weight: 600; }

.modal-status-pill {
  margin-left: auto;
  padding: 4px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
}

.modal-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 14px;
}

.modal-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.modal-meta-item { display: flex; flex-direction: column; gap: 3px; }

.modal-meta-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.modal-meta-value { font-size: 13px; color: var(--text); font-weight: 500; }

.modal-body { padding: 12px 32px 24px; }

.section { padding: 22px 0; border-bottom: 1px solid var(--border); }
.section:last-child { border-bottom: none; }

.section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }

.section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.section-content { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.section-content p { margin-bottom: 10px; }
.section-content p:last-child { margin-bottom: 0; }

.section-content a.link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  transition: border-color 0.15s ease;
  cursor: pointer;
}

.section-content a.link:hover { border-bottom-color: var(--accent); }

.pecas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  margin-top: 6px;
}

.peca-item { display: flex; flex-direction: column; gap: 4px; }

.peca-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.peca-value { font-size: 14px; color: var(--text); }

.peca-elementos {
  grid-column: span 2;
  margin-top: 6px;
  padding: 14px;
  background: var(--bg-elev-2);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.peca-elementos ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.peca-elementos li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.peca-elementos li::before {
  content: '↗';
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

.modal-footer {
  padding: 16px 32px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elev);
  position: sticky;
  bottom: 0;
  z-index: 5;
}

.btn {
  padding: 10px 16px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.btn:hover { border-color: var(--border-strong); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.btn-primary:hover { background: #e64500; box-shadow: 0 0 0 3px var(--accent-glow); }

.btn-ghost { background: transparent; color: var(--text-muted); }

/* v0.10.3: botão Aprovar já aprovado — cinza/inerte. !important vence o estilo
   inline verde do #m-aprovar. */
.btn.btn-aprovado {
  border-color: var(--border) !important;
  color: var(--text-dim) !important;
  background: var(--bg-elev-2) !important;
  cursor: default !important;
  opacity: 0.75;
}
.btn.btn-aprovado:hover { background: var(--bg-elev-2) !important; box-shadow: none !important; }

.btn-close {
  margin-left: auto;
  width: 38px; height: 38px;
  padding: 0;
  justify-content: center;
  font-size: 18px;
}

.modal-side {
  background: var(--bg-elev-2);
  border-left: 1px solid var(--border);
  padding: 24px 22px;
  overflow-y: auto;
  max-height: calc(100vh - 80px);
}

.side-section { margin-bottom: 26px; }
.side-section:last-child { margin-bottom: 0; }

.side-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.timeline { position: relative; padding-left: 22px; }

.timeline::before {
  content: '';
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--border);
}

.tl-item { position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }

.tl-dot {
  position: absolute;
  left: -22px; top: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  border: 2px solid var(--border-strong);
}

.tl-item.current .tl-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.tl-item.done .tl-dot { background: var(--green); border-color: var(--green); }

.tl-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.tl-title { font-size: 13px; color: var(--text); font-weight: 600; margin-bottom: 2px; }
.tl-by { font-size: 12px; color: var(--text-muted); }
.tl-by strong { color: var(--text); font-weight: 500; }

.side-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
}

.side-card-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 6px;
}

.side-card-line:last-child { margin-bottom: 0; }

.side-card-key {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.side-card-val { color: var(--text); font-weight: 500; }

/* ---------- TOAST ---------- */
/* F12: user-chip no topbar (preenchido por auth-ui.js após login) */
.user-chip { position: relative; display: inline-flex; }
.user-chip-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-3, #2d2d2d); padding: 4px 12px 4px 4px;
  border-radius: 999px; font-size: 13px; cursor: pointer;
  border: 1px solid var(--border-1, #3a3a3a); color: var(--text-1, #e8e8e8);
}
.user-chip-btn:hover { background: var(--bg-4, #3a3a3a); }
.user-chip-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: #6366f1; color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 600; font-size: 12px;
}
.user-chip-dropdown {
  position: absolute; top: 100%; right: 0; margin-top: 6px;
  background: var(--bg-2, #242424); border: 1px solid var(--border-1, #3a3a3a);
  border-radius: 8px; min-width: 240px; padding: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4); z-index: 9000;
}
.user-chip-info { font-size: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-1, #3a3a3a); margin-bottom: 8px; }
.user-chip-info-name { font-weight: 600; color: var(--text-1, #e8e8e8); margin-bottom: 4px; }
.user-chip-info-email { color: var(--text-3, #888); font-family: var(--font-mono); font-size: 11px; }
.user-chip-info-papel { color: var(--text-3, #888); text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; margin-top: 4px; }
.user-chip-logout {
  display: block; width: 100%; padding: 8px 12px;
  background: transparent; border: 1px solid #ef4444; color: #ef4444;
  border-radius: 4px; cursor: pointer; font-size: 13px;
}
.user-chip-logout:hover { background: rgba(239, 68, 68, 0.1); }

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 13px;
  z-index: 9999; /* F12 fix: acima de modal-backdrop (200), modal-side (300), user-chip-dropdown (9000) */
  max-width: 360px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s ease;
}

.toast.show { transform: translateY(0); opacity: 1; }

.toast-icon { color: var(--accent); font-weight: 700; margin-right: 8px; }

/* ---------- SCROLLBARS & ANIM ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.card { animation: fadeInUp 0.25s ease backwards; }
.card:nth-child(1) { animation-delay: 0.02s; }
.card:nth-child(2) { animation-delay: 0.05s; }
.card:nth-child(3) { animation-delay: 0.08s; }
.card:nth-child(4) { animation-delay: 0.11s; }
.card:nth-child(5) { animation-delay: 0.14s; }

/* =====================================================
   v0.3 — ADIÇÕES PLANO REFINADO
   Cores por depto · Banner protótipo · Profile switcher
   Tela Diretor · Tela Admin
   ===================================================== */

/* ---------- CORES POR DEPTO (8 finais) ---------- */
:root {
  --dep-atendimento:   #3b82f6;
  --dep-social:        #ec4899;
  --dep-criacao:       #FF4D00;
  --dep-midia:         #22c55e;
  --dep-producao:      #f59e0b;
  --dep-administracao: #6b7280;
  --dep-tecnologia:    #06b6d4;
  --dep-planejamento:  #8b5cf6;
}

/* Avatar colorido por depto da pessoa que segura o card */
.avatar[data-depto="atendimento"]   { background: var(--dep-atendimento);   color: white; border-color: var(--dep-atendimento); }
.avatar[data-depto="social"]        { background: var(--dep-social);        color: white; border-color: var(--dep-social); }
.avatar[data-depto="criacao"]       { background: var(--dep-criacao);       color: white; border-color: var(--dep-criacao); }
.avatar[data-depto="midia"]         { background: var(--dep-midia);         color: white; border-color: var(--dep-midia); }
.avatar[data-depto="producao"]      { background: var(--dep-producao);      color: white; border-color: var(--dep-producao); }
.avatar[data-depto="administracao"] { background: var(--dep-administracao); color: white; border-color: var(--dep-administracao); }
.avatar[data-depto="tecnologia"]    { background: var(--dep-tecnologia);    color: white; border-color: var(--dep-tecnologia); }
.avatar[data-depto="planejamento"]  { background: var(--dep-planejamento);  color: white; border-color: var(--dep-planejamento); }

/* Border-left sutil colorido no card */
.card[data-depto-card="atendimento"]::before   { background: var(--dep-atendimento); }
.card[data-depto-card="social"]::before        { background: var(--dep-social); }
.card[data-depto-card="criacao"]::before       { background: var(--dep-criacao); }
.card[data-depto-card="midia"]::before         { background: var(--dep-midia); }
.card[data-depto-card="producao"]::before      { background: var(--dep-producao); }
.card[data-depto-card="administracao"]::before { background: var(--dep-administracao); }
.card[data-depto-card="tecnologia"]::before    { background: var(--dep-tecnologia); }
.card[data-depto-card="planejamento"]::before  { background: var(--dep-planejamento); }

/* Sidebar nav-item com bolinha cor depto */
.nav-item-color {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  flex-shrink: 0;
}

/* ---------- BANNER PROTÓTIPO ---------- */
.proto-banner {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.08));
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  padding: 8px 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--orange);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.proto-banner::before {
  content: '◉';
  color: var(--orange);
  animation: pulse 2s infinite;
}

/* v0.10.82: STAGING — vermelho listrado, inconfundível (compartilha a base de PRODUÇÃO) */
.proto-banner.proto-banner-staging {
  background: repeating-linear-gradient(45deg, rgba(220,38,38,0.16), rgba(220,38,38,0.16) 12px, rgba(220,38,38,0.30) 12px, rgba(220,38,38,0.30) 24px);
  border-bottom: 2px solid rgba(220,38,38,0.6);
  color: #fecaca;
  font-weight: 700;
}
.proto-banner.proto-banner-staging::before { content: '⚠'; color: #f87171; animation: none; }

/* ---------- PROFILE SWITCHER (Operador / Diretor / Admin) ---------- */
.profile-switcher {
  display: inline-flex;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  margin-right: 10px;
}

.profile-switcher button {
  padding: 7px 12px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 5px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.profile-switcher button:hover { color: var(--text); }
.profile-switcher button.active {
  background: var(--accent);
  color: white;
}

.profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- SUBDEPTO FILTER (só visível em Criação) ---------- */
.subdepto-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.subdepto-pill {
  padding: 6px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: all 0.15s ease;
  font-weight: 600;
}

.subdepto-pill:hover { color: var(--text); border-color: var(--border-strong); }
.subdepto-pill.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* ---------- TELA DIRETOR ---------- */
.diretor-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.diretor-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.diretor-card-full { grid-column: span 2; }

.diretor-card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.diretor-card-title-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}

.workload-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.workload-row:last-child { border-bottom: none; }

.workload-row-name { flex: 1; font-size: 13px; color: var(--text); font-weight: 500; }
.workload-row-role {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.workload-row-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-elev-2);
  border-radius: 3px;
  overflow: hidden;
  max-width: 200px;
}

.workload-row-bar-fill {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.workload-row-bar-fill[data-load="warning"] { background: var(--orange); }
.workload-row-bar-fill[data-load="danger"]  { background: var(--red); }

.workload-row-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  min-width: 38px;
  text-align: right;
}

.parado-row {
  padding: 10px 12px;
  background: var(--bg-elev-2);
  border-radius: 8px;
  margin-bottom: 8px;
  border-left: 3px solid var(--orange);
  cursor: pointer;
  transition: all 0.15s ease;
}

.parado-row:hover { transform: translateX(2px); }
.parado-row[data-sla="danger"] { border-left-color: var(--red); }

.parado-row-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.parado-row-title { color: var(--text); font-weight: 500; }
.parado-row-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.parado-row-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--orange);
  font-weight: 600;
}

.parado-row[data-sla="danger"] .parado-row-time { color: var(--red); }

.metric-mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--bg-elev-2);
  border-radius: 8px;
}

.metric-mini-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.metric-mini-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
}

.metric-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* ---------- TELA ADMIN (visão global) ---------- */
.admin-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* v0.10.72 — Console Admin ("/admin"): menu lateral + conteúdo */
.adminc { display: grid; grid-template-columns: 220px 1fr; gap: 0; align-items: start; min-height: 60vh; }
.adminc-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 12px 4px 0; border-right: 1px solid var(--border); position: sticky; top: 0; }
.adminc-nav-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); padding: 6px 10px 10px; }
.adminc-nav-sep { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); padding: 16px 10px 6px; border-top: 1px solid var(--border); margin-top: 8px; }
.adminc-navitem { text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--text-muted); cursor: pointer; font-family: inherit; }
.adminc-navitem:hover { background: var(--bg-elev-2); color: var(--text); }
.adminc-navitem.on { background: var(--accent-soft); border-color: rgba(255,77,0,0.3); color: var(--text); font-weight: 600; }
.adminc-content { padding: 4px 0 12px 24px; min-width: 0; display: flex; flex-direction: column; min-height: 70vh; }
/* abas embutidas (funcoes/workflow) usam flex:1/height:100% — o pai flex acima dá o contexto */
.adminc-por-cliente { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 860px) { .adminc { grid-template-columns: 1fr; } .adminc-nav { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); position: static; } .adminc-content { padding-left: 0; } }

.admin-deptos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.admin-depto-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
}

.admin-depto-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}

.admin-depto-card[data-depto="atendimento"]::before   { background: var(--dep-atendimento); }
.admin-depto-card[data-depto="social"]::before        { background: var(--dep-social); }
.admin-depto-card[data-depto="criacao"]::before       { background: var(--dep-criacao); }
.admin-depto-card[data-depto="midia"]::before         { background: var(--dep-midia); }
.admin-depto-card[data-depto="producao"]::before      { background: var(--dep-producao); }
.admin-depto-card[data-depto="administracao"]::before { background: var(--dep-administracao); }
.admin-depto-card[data-depto="tecnologia"]::before    { background: var(--dep-tecnologia); }
.admin-depto-card[data-depto="planejamento"]::before  { background: var(--dep-planejamento); }

.admin-depto-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.admin-depto-name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 4px;
}

.admin-depto-diretor {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.admin-depto-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.admin-depto-stat {
  text-align: center;
}

.admin-depto-stat-num {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  display: block;
}

.admin-depto-stat-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-depto-stat-num[data-state="warning"] { color: var(--orange); }
.admin-depto-stat-num[data-state="danger"]  { color: var(--red); }

/* =====================================================
   v0.4 — ADIÇÕES GAPS OPERAND
   Search · Checklist subtasks · Timer · Numeração · Breadcrumb campanha
   View Por Responsável · Minha Pauta · Pauta Status
   ===================================================== */

/* ---------- SEARCH BAR (topbar) ---------- */
.search-wrap {
  display: inline-flex;
  align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  height: 38px;
  min-width: 220px;
  gap: 8px;
}

.search-wrap:focus-within { border-color: var(--accent); }

.search-wrap input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  width: 100%;
}

.search-wrap input::placeholder { color: var(--text-dim); }

.search-icon {
  color: var(--text-dim);
  font-size: 13px;          /* v0.10.1: casa com a altura do texto do input (13px) */
  line-height: 1;
  font-family: var(--font-mono);
}

/* ---------- CARD: pílula DEPTO|STATUS + numeração + breadcrumb ---------- */
.card-numero {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
}

.card-breadcrumb {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pill-depto-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  border: 1px solid var(--border);
  color: var(--text);
}

.pill-depto-status .ds-sep { color: var(--text-dim); margin: 0 2px; }

.subtask-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-left: auto;
  padding: 2px 6px;
  background: var(--bg-elev);
  border-radius: 4px;
}

.subtask-counter::before { content: '☰'; font-size: 10px; }

/* ---------- MODAL: checklist + timer + concluir ---------- */
.modal-actions-extra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev-2);
}

.timer-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
}

.timer-box.ativo { border-color: var(--green); color: var(--green); }

.timer-box.ativo::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s infinite;
}

.timer-label {
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 4px;
}

.btn-concluir {
  background: var(--green);
  color: white;
  border-color: var(--green);
  margin-left: auto;
}

.btn-concluir:hover {
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
}

/* Checklist sub-tarefas */
.subtasks-section { padding: 18px 0 22px; border-bottom: 1px solid var(--border); }

.subtasks-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.subtasks-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.subtasks-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.subtasks-counter {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

.subtask-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-elev-2);
  margin-bottom: 6px;
  transition: all 0.15s ease;
  cursor: pointer;
}

.subtask-row:hover { background: var(--bg-elev); }

.subtask-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  color: transparent;
}

.subtask-row[data-status="concluido"] .subtask-check {
  background: var(--green);
  border-color: var(--green);
  color: white;
}

.subtask-row[data-status="em_andamento"] .subtask-check {
  border-color: var(--orange);
  background: var(--orange-soft);
}

.subtask-row[data-status="concluido"] .subtask-check::after { content: '✓'; }

.subtask-row[data-status="concluido"] .subtask-titulo {
  color: var(--text-dim);
  text-decoration: line-through;
}

.subtask-titulo { flex: 1; font-size: 13px; color: var(--text); }

.subtask-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}

.subtask-due[data-sla="warning"] { color: var(--orange); }
.subtask-due[data-sla="danger"]  { color: var(--red); }

/* ---------- VIEW: PAUTA POR RESPONSÁVEL ---------- */
/* v0.10.4: toolbar com filtro de departamento na view Por Responsável */
.resp-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.resp-dept-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.resp-dept-select {
  background: var(--bg-elev); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 11px; font-family: inherit; font-size: 13px; cursor: pointer;
}
.resp-dept-select:focus { outline: none; border-color: var(--accent); }

.responsavel-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
}

.responsavel-col {
  width: 260px;
  flex-shrink: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 280px);
  overflow: hidden;
}

.responsavel-col-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.responsavel-col-header .avatar {
  width: 28px; height: 28px;
  font-size: 11px;
}

.responsavel-col-name {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.01em;
  flex: 1;
}

.responsavel-col-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  background: var(--bg-elev-2);
  padding: 2px 8px;
  border-radius: 10px;
}

.responsavel-col-body {
  padding: 12px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.responsavel-mini {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--green);
  cursor: pointer;
  transition: all 0.15s ease;
}

.responsavel-mini[data-sla="warning"] { border-left-color: var(--orange); }
.responsavel-mini[data-sla="danger"]  { border-left-color: var(--red); }
.responsavel-mini:hover { transform: translateY(-1px); border-color: var(--border-strong); }

.responsavel-mini-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.responsavel-mini-title {
  font-size: 12px;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 6px;
}

.responsavel-mini-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ---------- VIEW: MINHA PAUTA (lista pessoal) ---------- */
.minhapauta-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.minhapauta-row {
  display: grid;
  grid-template-columns: 80px 1fr 200px 100px 140px 32px;
  gap: 14px;
  align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  cursor: pointer;
  transition: all 0.15s ease;
  border-left: 3px solid var(--green);
}

.minhapauta-row[data-sla="warning"] { border-left-color: var(--orange); }
.minhapauta-row[data-sla="danger"]  { border-left-color: var(--red); }
.minhapauta-row:hover {
  border-color: var(--border-strong);
  transform: translateX(2px);
}

.minhapauta-numero {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.minhapauta-info { min-width: 0; }

.minhapauta-titulo {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.minhapauta-status {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.minhapauta-cliente {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.minhapauta-due {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.minhapauta-due[data-sla="warning"] { color: var(--orange); }
.minhapauta-due[data-sla="danger"]  { color: var(--red); }

.minhapauta-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 700;
  text-align: center;
  border: 1px solid var(--border);
  color: var(--text);
}

.minhapauta-action {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted);
}

.minhapauta-action:hover { color: var(--text); border-color: var(--border-strong); }

/* ---------- VIEW: PAUTA POR STATUS (cross-depto) ---------- */
.pauta-status-board {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 12px;
}

.pauta-status-col {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 280px);
}

.pauta-status-col-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elev-2);
  border-radius: 10px 10px 0 0;
}

.pauta-status-col-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
}

.pauta-status-col-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

.pauta-status-col-body {
  padding: 10px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 880px) {
  .modal { grid-template-columns: 1fr; }
  .modal-side { border-left: none; border-top: 1px solid var(--border); }
  .pecas-grid { grid-template-columns: 1fr; }
  .diretor-wrap { grid-template-columns: 1fr; }
  .diretor-card-full { grid-column: span 1; }
  .minhapauta-row { grid-template-columns: 60px 1fr 100px; gap: 10px; }
  .minhapauta-row > .minhapauta-cliente,
  .minhapauta-row > .minhapauta-pill,
  .minhapauta-row > .minhapauta-action { display: none; }
}

/* =====================================================
   v0.5 — VISUAL UPDATE OPERAND-STYLE
   Novos status uniformes · Próximo papel laranja + flip ·
   Dúvida Rápida · Negociável switch · Topbar Diretor ·
   Modal fichário lateral · Apontar horas
   ===================================================== */

/* ---------- COLUNA "Próximo papel" (highlight laranja) ---------- */
.column[data-status="Próximo papel"] {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.10) 0%, var(--bg-elev) 60%);
  border-color: rgba(245, 158, 11, 0.35);
}
.column[data-status="Próximo papel"] .col-title { color: var(--orange); }

/* ============================================================
   v0.6.2: cores TODO / DOING / DONE estilo Trello aplicadas
   nas colunas via [data-fase]. Realça topo da coluna pra
   feedback visual rápido de fase do trabalho.
   ============================================================ */
.column[data-fase="todo"] {
  border-color: rgba(245, 158, 11, 0.4);
}
.column[data-fase="todo"] .col-header {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.04));
  border-bottom-color: rgba(245, 158, 11, 0.35);
}
.column[data-fase="todo"] .col-title { color: #fbbf24; }

.column[data-fase="doing"] {
  border-color: rgba(239, 68, 68, 0.4);
}
.column[data-fase="doing"] .col-header {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.04));
  border-bottom-color: rgba(239, 68, 68, 0.35);
}
.column[data-fase="doing"] .col-title { color: #f87171; }

.column[data-fase="done"] {
  border-color: rgba(34, 197, 94, 0.4);
}
.column[data-fase="done"] .col-header {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.04));
  border-bottom-color: rgba(34, 197, 94, 0.35);
}
.column[data-fase="done"] .col-title { color: #4ade80; }

.column[data-fase="standby"] .col-header {
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.15), transparent);
}
.column[data-fase="standby"] .col-title { color: var(--text-dim); }

/* ============================================================
   v0.6.2: card atrasado — destaque forte (fundo vermelho
   suave + borda lateral grossa + animação pulse no due).
   Aplica em qualquer card com data-sla="danger".
   ============================================================ */
.card[data-sla="danger"] {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.10), var(--bg-elev-2));
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: inset 4px 0 0 0 #ef4444;
}
.card[data-sla="danger"]::before {
  background: #ef4444 !important;
}
.card[data-sla="danger"] .card-sla-relative {
  font-weight: 700;
  animation: pulseAtrasado 1.8s ease-in-out infinite;
}
@keyframes pulseAtrasado {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
/* Tag visual de "atrasado" pra deixar inequívoco */
.card[data-sla="danger"] .card-meta::after {
  content: '⚠ ATRASADO';
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  background: #ef4444;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
  margin-left: 2px;
}

/* ============================================================
   v0.6.2: Banner "Reunião de início" no modal de detalhes
   + pill "📅 reunião" no card resumido + visual de bloqueio
   ============================================================ */
.reuniao-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 0 0 18px;
  border-radius: 10px;
  border-left: 4px solid var(--orange);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), var(--bg-elev));
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.reuniao-banner-done {
  border-left-color: var(--green);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.10), var(--bg-elev));
  border-color: rgba(34, 197, 94, 0.35);
}
.reuniao-banner-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.reuniao-banner-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reuniao-banner-content strong {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text);
}
.reuniao-banner-content span {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.reuniao-banner-btn {
  padding: 8px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.reuniao-banner-btn:hover {
  background: var(--bg-elev-2);
  color: var(--text);
}
.reuniao-banner-btn-primary {
  background: var(--orange);
  border-color: var(--orange);
  color: white;
  font-weight: 600;
}
.reuniao-banner-btn-primary:hover {
  background: #d97706;
  border-color: #d97706;
  color: white;
  transform: translateY(-1px);
}

/* Pill no card resumido */
.pill-reuniao-pendente {
  background: rgba(245, 158, 11, 0.18) !important;
  color: var(--orange) !important;
  border: 1px dashed rgba(245, 158, 11, 0.5);
}

/* Card em estado bloqueado (aguardando reunião): fita laranja diagonal sutil + cursor */
.card[data-reuniao-pendente="true"] {
  position: relative;
}
.card[data-reuniao-pendente="true"]::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 18px 18px 0;
  border-color: transparent var(--orange) transparent transparent;
  opacity: 0.7;
  pointer-events: none;
}

/* Card em "Próximo papel" — laranja (sem flip 3D, fix v0.5.1) */
.card[data-proximo-papel="true"] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), var(--bg-elev-2));
  border-color: rgba(245, 158, 11, 0.5);
  padding-bottom: 14px; /* card próximo papel não precisa de bottom-padding extra (sem mini-botões) */
}
.card[data-proximo-papel="true"]::before { background: var(--orange) !important; }
.card[data-proximo-papel="true"] .card-title { color: var(--orange); }
.card[data-proximo-papel="true"] .card-help-btn,
.card[data-proximo-papel="true"] .card-drive-btn,
.card[data-proximo-papel="true"] .card-icons { display: none; }

/* v0.5.6: card em "Próximo papel" exibe APENAS título + perguntas das próximas fases.
   Esconde top (numero/switch/#id), breadcrumb, meta (pills/badges) e bottom (assignee/due). */
.card[data-proximo-papel="true"] .card-top,
.card[data-proximo-papel="true"] .card-breadcrumb,
.card[data-proximo-papel="true"] .card-meta,
.card[data-proximo-papel="true"] .card-bottom { display: none; }
.card[data-proximo-papel="true"] .card-title {
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.3;
}
.card[data-proximo-papel="true"] .proximo-papel-ask { margin-top: 6px; }

/* Mini bot pergunta dentro do card "Próximo papel" */
.proximo-papel-ask {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px dashed var(--orange);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  backface-visibility: hidden;
}
.proximo-papel-ask-text {
  font-size: 11px;
  color: var(--orange);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.proximo-papel-ask-text::before { content: '🤖 IA: '; }
.proximo-papel-ask-buttons { display: flex; gap: 6px; }
.proximo-papel-ask-btn {
  flex: 1;
  padding: 6px 8px;
  background: var(--bg-elev);
  border: 1px solid var(--orange);
  color: var(--orange);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.proximo-papel-ask-btn:hover { background: var(--orange); color: white; }

/* ---------- v0.6.3: ícones Drive + Help no canto inferior direito (sem due junto) ---------- */
.card-icons {
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  z-index: 2;
}

/* SLA agora vive dentro do .card-bottom alinhado horizontalmente com o nome do executor.
   Linha 1: due relativo (+1h, -2d) · Linha 2: data absoluta (14/05 17:30). */
.card-sla {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
  line-height: 1.1;
}
.card-sla-relative {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.card-sla-relative[data-sla="warning"] { color: var(--orange); }
.card-sla-relative[data-sla="danger"]  { color: var(--red); }
.card-sla-absolute {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.card-sla-absolute[data-sla="warning"] { color: rgba(245, 158, 11, 0.75); }
.card-sla-absolute[data-sla="danger"]  { color: rgba(239, 68, 68, 0.85); }
.card-icons .card-due-bottom[data-sla="warning"] { color: var(--orange); }
.card-icons .card-due-bottom[data-sla="danger"]  { color: var(--red); }

.card-help-btn,
.card-drive-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
  overflow: hidden;
}
.card-help-btn:hover {
  background: #ec4899;
  border-color: #ec4899;
  color: white;
  transform: scale(1.1);
}
.card-help-btn::before { content: '⚡'; font-weight: 700; font-size: 14px; }

.card-drive-btn { background: white; }
.card-drive-btn:hover {
  border-color: var(--border-strong);
  transform: scale(1.1);
}
.card-drive-btn svg { width: 16px; height: 16px; display: block; }

/* v0.10.60: mais respiro embaixo — os ícones (Drive/⚡) estavam colando na data.
   padding-bottom maior afasta a linha de ícones do texto da SLA. */
.card { padding-bottom: 58px; }

/* ---------- TAG "DÚVIDA RÁPIDA" (subtask especial) ---------- */
.subtask-row[data-tipo="duvida_rapida"] {
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.20), rgba(236, 72, 153, 0.06));
  border: 1px solid rgba(236, 72, 153, 0.4);
}
.subtask-row[data-tipo="duvida_rapida"] .subtask-titulo::before {
  content: '⚡ DÚVIDA RÁPIDA ';
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  background: #ec4899;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 8px;
  font-weight: 700;
}
.subtask-row[data-tipo="duvida_rapida"] .subtask-check {
  border-color: #ec4899;
  background: rgba(236, 72, 153, 0.15);
}

/* Indicador de dúvida rápida ABERTA no kanban (linha topo) */
.duvida-rapida-banner {
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.20), rgba(236, 72, 153, 0.06));
  border: 1px solid rgba(236, 72, 153, 0.4);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text);
}
.duvida-rapida-banner-tag {
  background: #ec4899;
  color: white;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border-radius: 3px;
  font-weight: 700;
}
.duvida-rapida-banner-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #ec4899;
  font-weight: 700;
}
.duvida-rapida-banner-chevron {
  font-size: 11px;
  color: #ec4899;
  transition: transform 0.15s ease;
  user-select: none;
}
.duvida-rapida-banner.esteira-aberta .duvida-rapida-banner-chevron { transform: rotate(180deg); }
/* quando a esteira está aberta, banner encosta nela (sem gap, cantos retos embaixo) */
.duvida-rapida-banner.esteira-aberta { margin-bottom: 0; border-radius: 10px 10px 0 0; }

/* ---------- v0.10.17: ESTEIRA DE APROVAÇÕES REPARTIDA ---------- */
/* v0.10.26: esteira horizontal — cards ~300px lado a lado, scroll horizontal,
   somem ao resolver. Dúvidas + aprovações. */
.aprovacoes-esteira {
  margin: 0 0 14px;
  border: 1px solid rgba(236, 72, 153, 0.4);
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: rgba(236, 72, 153, 0.04);
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(236, 72, 153, 0.4) transparent;
}
.aprovacoes-esteira::-webkit-scrollbar { height: 8px; }
.aprovacoes-esteira::-webkit-scrollbar-thumb { background: rgba(236, 72, 153, 0.35); border-radius: 4px; }
.esteira-card {
  flex: 0 0 300px;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 8px;
  background: rgba(236, 72, 153, 0.07);
  font-size: 12px;
}
.esteira-card.saindo { opacity: 0; transform: translateX(16px); transition: all 0.2s ease; }
.esteira-card-kind {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ec4899;
  font-weight: 700;
}
.esteira-card-main { cursor: pointer; min-width: 0; }
.esteira-card-main:hover .esteira-card-title { text-decoration: underline; }
.esteira-card-title {
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.esteira-card-q {
  color: var(--text);
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.35;
  margin: 4px 0 2px;
  padding-left: 8px;
  border-left: 2px solid rgba(236, 72, 153, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.esteira-card-sub {
  color: var(--text-dim);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.esteira-card-btn {
  margin-top: auto;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid #22c55e;
  color: #22c55e;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease;
  white-space: nowrap;
}
.esteira-card-btn:hover { background: rgba(34, 197, 94, 0.24); }
.esteira-card-btn.alt { background: rgba(236, 72, 153, 0.1); border-color: #ec4899; color: #ec4899; }
.esteira-card-btn.alt:hover { background: rgba(236, 72, 153, 0.2); }
.esteira-card-btn:disabled { opacity: 0.5; cursor: default; }
/* v0.10.28: cor por tipo — ROSA = aprovação de diretor; ÂMBAR = dúvida rápida */
.esteira-card.k-aprov { border-color: rgba(236, 72, 153, 0.35); background: rgba(236, 72, 153, 0.07); }
.esteira-card.k-aprov .esteira-card-kind { color: #ec4899; }
.esteira-card.k-duvida { border-color: rgba(245, 158, 11, 0.40); background: rgba(245, 158, 11, 0.07); }
.esteira-card.k-duvida .esteira-card-kind { color: #f59e0b; }
.esteira-card.k-duvida .esteira-card-q { border-left-color: rgba(245, 158, 11, 0.55); }
.esteira-card.k-duvida .esteira-card-btn.alt { background: rgba(245, 158, 11, 0.12); border-color: #f59e0b; color: #f59e0b; }
.esteira-card.k-duvida .esteira-card-btn.alt:hover { background: rgba(245, 158, 11, 0.22); }
/* v0.10.28: painel de resposta da dúvida no modal (espelha .ar-panel, em âmbar) */
.dr-panel { margin-top: 10px; border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.07); }
.dr-head { font-size: 13px; color: var(--text); margin-bottom: 4px; }
.dr-sub  { font-size: 12px; color: var(--text-muted); line-height: 1.4; margin-bottom: 10px; font-style: italic; }
.dr-resposta { width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; font-size: 13px;
  padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); margin-bottom: 8px; }
.dr-actions { display: flex; gap: 8px; }
.dr-actions .btn { flex: 1; }

/* ---------- SWITCH iPhone "NEGOCIÁVEL" (inline no lugar do #id) ---------- */
.card-negociavel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  transition: 0.3s;
}
.toggle-slider::before {
  position: absolute;
  content: '';
  height: 14px; width: 14px;
  left: 2px; top: 2px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--green);
  border-color: var(--green);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px);
}
.toggle-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}
.toggle-switch input:checked ~ .toggle-label,
.card-negociavel:has(input:checked) .toggle-label { color: var(--green); }

/* ---------- ÁREA KPIs (Operador / Diretor / ADM) ----------
   v0.5.7: grid de 4 colunas no modo Operador.
   Col 1: Jobs em curso + Atrasados (estreita) · Col 2: Clientes atendidos
   Col 3: Produtividade (atalhos) · Col 4: Tarefas do dia
   Mantém id #diretor-toolbar por compatibilidade JS. */
.kpis-toolbar {
  display: grid;
  gap: 18px;
  margin-bottom: 14px;
  padding: 0;
  background: transparent;
  border: none;
  position: relative;   /* v0.10.1: ancla o botão minimizar */
}
.kpis-toolbar.kpis-operador {
  grid-template-columns: 180px 1.1fr 1fr 1.3fr;
}
/* v0.10.1: minimizar/maximizar a faixa de indicadores */
.kpis-toggle {
  position: absolute; top: -2px; right: 0; z-index: 6;
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted); cursor: pointer; font-size: 10px; line-height: 1;
  transition: transform .15s ease, color .15s ease, border-color .15s ease;
}
.kpis-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.kpis-collapsed-label { display: none; }
.kpis-toolbar.collapsed {
  display: flex; align-items: center; gap: 8px;
  min-height: 28px; margin-bottom: 8px;
}
.kpis-toolbar.collapsed .kpi-col { display: none; }
.kpis-toolbar.collapsed .kpis-collapsed-label {
  display: inline-flex; align-items: center; cursor: pointer;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim);
}
.kpis-toolbar.collapsed .kpis-toggle { transform: rotate(-90deg); }
/* v0.5.8: cada coluna vira um box independente */
.kpi-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.kpi-col-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
/* Esconde metrics-bar geral só no modo persona (Luiz) — diretor/admin tem própria visão */
body.modo-persona .metrics-bar { display: none; }

/* v0.5.7: .diretor-kpis virou .kpi-col-jobs (grid de 4 col) — mantém font-size compacto interno */
#diretor-kpis .diretor-kpi-value { font-size: 18px; line-height: 1; }
#diretor-kpis .diretor-kpi-label { font-size: 8px; }
.diretor-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.diretor-kpi-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.diretor-kpi-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.diretor-kpi-value[data-state="warning"] { color: var(--orange); }
.diretor-kpi-value[data-state="danger"]  { color: var(--red); }
.diretor-kpi-link {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
}
.diretor-kpi-link:hover { text-decoration: underline; }

/* Lista vertical de clientes atendidos — compacta */
.diretor-clientes-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}
.diretor-cliente-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  text-decoration: none;
  font-size: 11px;
  color: var(--text);
  transition: all 0.15s ease;
  cursor: pointer;
}
.diretor-cliente-row:hover {
  border-color: var(--accent);
  transform: translateX(2px);
}
.diretor-cliente-name { font-weight: 500; }
.diretor-cliente-link {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Modal: timer + apontar horas na parte principal */
.modal-actions-extra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev-2);
}
.modal-actions-extra .ts-timer-display {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.modal-actions-extra .ts-timer-display.ativo { color: var(--green); }
.modal-actions-extra .ts-timer-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 4px;
}
.modal-actions-extra .ts-apontar-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.modal-actions-extra .ts-apontar-link:hover { background: var(--accent-soft); }

.diretor-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.diretor-tools-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.diretor-tools-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.diretor-tool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  transition: all 0.15s ease;
  cursor: pointer;
}
.diretor-tool:hover {
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-1px);
}
.diretor-tool-icon {
  width: 18px; height: 18px;
  border-radius: 4px;
  background: var(--accent);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0;
}
/* v0.5.8: ícone SVG (Drive) — sem cor de fundo do depto, fundo branco e padding zero */
.diretor-tool-icon.diretor-tool-icon-svg {
  background: white !important;
  padding: 1px;
  overflow: hidden;
}
.diretor-tool-icon.diretor-tool-icon-svg svg { width: 100%; height: 100%; display: block; }
.diretor-cal-switch {
  display: inline-flex;
  background: var(--bg-elev-2);
  border-radius: 6px;
  padding: 3px;
  gap: 2px;
  margin-top: 8px;
}
.diretor-cal-switch button {
  background: transparent;
  border: none;
  padding: 5px 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
}
.diretor-cal-switch button.active { background: var(--accent); color: white; }

/* ---------- MINI LISTA "TAREFAS DO DIA" — compacta ---------- */
.diretor-hoje {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}
.diretor-hoje-row {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 6px;
  align-items: center;
  padding: 3px 6px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  border-left: 2px solid var(--green);
}
.diretor-hoje-row[data-sla="warning"] { border-left-color: var(--orange); }
.diretor-hoje-row[data-sla="danger"] { border-left-color: var(--red); }
.diretor-hoje-row:hover { transform: translateX(2px); border-color: var(--border-strong); }
.diretor-hoje-hora {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.diretor-hoje-title {
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diretor-hoje-due {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
  font-weight: 600;
}
.diretor-hoje-due[data-sla="warning"] { color: var(--orange); }
.diretor-hoje-due[data-sla="danger"] { color: var(--red); }
.diretor-hoje-empty {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  padding: 8px;
  letter-spacing: 0.06em;
}

/* v0.5.7: .diretor-painel-direito removido — Col 3/Col 4 viraram .kpi-col separadas */

/* ---------- MODAL FICHÁRIO LATERAL (abas Comentários/Timesheet/Histórico) ---------- */
.modal-side-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.modal-side-tab {
  flex: 1;
  padding: 12px 8px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.15s ease;
}
.modal-side-tab:hover { color: var(--text); }
.modal-side-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--bg-elev-2);
}
.modal-side-tab-count {
  font-size: 9px;
  margin-left: 4px;
  background: var(--bg-elev-2);
  padding: 1px 5px;
  border-radius: 8px;
  color: var(--text-dim);
}
.modal-side-tab.active .modal-side-tab-count { background: var(--accent-soft); color: var(--accent); }

.modal-side-pane { display: none; padding: 16px 18px; }
.modal-side-pane.active { display: block; }

/* COMENTÁRIOS */
.comentario {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.comentario-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.comentario-autor { font-size: 12px; font-weight: 600; color: var(--text); }
.comentario-ts {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.comentario-texto { font-size: 12px; color: var(--text-muted); line-height: 1.45; }

/* v0.7.28: menu kebab Editar/Excluir (só comentários próprios) */
.comentario-head { gap: 6px; }
.comentario-ts { flex: 1; text-align: right; }
.comentario-menu-wrap { position: relative; flex-shrink: 0; }
.comentario-menu-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  border-radius: 4px;
}
.comentario-menu-btn:hover { background: var(--bg-elev); color: var(--text); }
/* v0.10.4: o atributo `hidden` não funcionava (display:flex sobrescrevia) — todos
   os menus apareciam sobrepostos. Guard explícito mantém fechado até clicar no ⋯. */
.comentario-menu[hidden] { display: none !important; }
.comentario-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.16);
  display: flex;
  flex-direction: column;
  min-width: 132px;
  z-index: 60;
  overflow: hidden;
}
.comentario-menu button {
  background: none;
  border: none;
  text-align: left;
  padding: 9px 14px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.comentario-menu button:hover { background: var(--bg-elev); }
.comentario-menu .comentario-del { color: #ef4444; }
.comentario-edit-box { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.comentario-edit-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
  min-height: 50px;
}
.comentario-edit-actions { display: flex; gap: 6px; justify-content: flex-end; }

.comentario-new {
  margin-top: 10px;
  padding: 10px;
  background: var(--bg-elev);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.comentario-new textarea {
  width: 100%;
  min-height: 60px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12px;
  resize: vertical;
}
.comentario-new-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

/* v0.10.1 — Editor de texto rico (RTE) de comentários */
.rte-input {
  width: 100%; min-height: 56px;
  background: transparent; border: none; outline: none;
  color: var(--text); font-family: var(--font-body); font-size: 12px; line-height: 1.5;
  overflow-wrap: anywhere;
}
.rte-input:empty::before { content: attr(data-ph); color: var(--text-dim); pointer-events: none; }
.rte-input a, .comentario-texto a { color: var(--accent); text-decoration: underline; }
.rte-input code, .comentario-texto code {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
}
.rte-input ul, .rte-input ol, .comentario-texto ul, .comentario-texto ol { margin: 4px 0 4px 18px; }
.comentario-texto strong, .comentario-texto b { color: var(--text); }

.rte-toolbar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); position: relative;
}
.rte-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 6px;
  background: transparent; border: none; border-radius: 5px;
  color: var(--text-muted); cursor: pointer; font-size: 13px; font-family: var(--font-body);
}
.rte-btn:hover { background: var(--bg-elev-2); color: var(--text); }
.rte-send { margin-left: auto; padding: 5px 13px; font-size: 13px; line-height: 1; }
.rte-emoji-pop {
  position: absolute; bottom: 32px; right: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.rte-emoji { background: transparent; border: none; cursor: pointer; font-size: 18px; padding: 3px 4px; border-radius: 5px; }
.rte-emoji:hover { background: var(--bg-elev-2); }
/* v0.10.64: dropdown de @menção */
.mention-pop {
  position: absolute; left: 8px; bottom: 46px; z-index: 40; min-width: 220px; max-width: 280px;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 1px;
}
.mention-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer; padding: 6px 8px; border-radius: 7px;
  color: var(--text); font-size: 13px; font-family: var(--font-sans, inherit);
}
.mention-opt:hover, .mention-opt.on { background: var(--bg-elev-2); }
.mention-ava {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: #fff; background: var(--accent);
}
.mention-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* editor no modo edição: mantém a borda accent + caixa */
.comentario-edit-box .rte-input {
  border: 1px solid var(--accent); border-radius: 6px; padding: 8px 10px;
  background: var(--bg); min-height: 44px;
}

/* TIMESHEET LIST */
.ts-row {
  display: grid;
  grid-template-columns: 50px 1fr 60px 22px 22px;
  gap: 8px;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.ts-row:last-child { border-bottom: none; }

/* v0.7.30: menu kebab + edição inline de apontamento */
.ts-menu-wrap { position: relative; }
.ts-menu-btn {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 15px; padding: 0 2px; border-radius: 4px;
}
.ts-menu-btn:hover { background: var(--bg-elev); color: var(--text); }
.ts-menu {
  position: absolute; right: 0; top: 20px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  display: flex; flex-direction: column; min-width: 100px; z-index: 20; overflow: hidden;
}
.ts-menu button {
  background: none; border: none; text-align: left;
  padding: 8px 12px; font-size: 12px; color: var(--text); cursor: pointer;
}
.ts-menu button:hover { background: var(--bg-elev); }
.ts-menu .ts-del { color: #ef4444; }
.ts-edit-box {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; margin: 4px 0 8px;
  background: var(--bg-elev); border: 1px solid var(--accent); border-radius: 8px;
}
.ts-edit-field {
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em;
  color: var(--text-dim); text-transform: uppercase;
}
.ts-edit-field input {
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 12px; font-family: var(--font-body);
}
.ts-edit-retr { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text); }
.ts-edit-actions { display: flex; gap: 6px; justify-content: flex-end; }
.ts-data {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}
.ts-tarefa {
  font-size: 12px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ts-tarefa-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
}
.ts-horas {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--green);
  font-weight: 600;
  text-align: right;
}
.ts-retrabalho {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--red-soft);
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ts-add-btn {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  background: var(--bg-elev);
  border: 1px dashed var(--accent);
  color: var(--accent);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
}
.ts-add-btn:hover { background: var(--accent-soft); }

.ts-total {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
}
.ts-total strong { color: var(--green); font-size: 13px; }

/* HISTÓRICO */
.hist-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  padding: 8px 0;
  font-size: 12px;
  border-bottom: 1px dashed var(--border);
}
.hist-row:last-child { border-bottom: none; }
.hist-ts {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.hist-evt { color: var(--text-muted); }
.hist-evt strong { color: var(--text); }
.hist-evt-from { color: var(--text-dim); }
.hist-evt-to { color: var(--accent); }
.hist-evt-by { font-size: 11px; color: var(--text-dim); display: block; margin-top: 2px; }
/* v0.10.3: narrativa do motor de workflow (ex-comentário de sistema) no Histórico */
.hist-narrativa-texto { display: block; color: var(--text); line-height: 1.45; }
.hist-row-narrativa .hist-evt { color: var(--text); }

/* ---------- MODAL: nova coluna lateral à direita do briefing (abas) ---------- */
.modal {
  max-width: 1200px !important;
  grid-template-columns: 1fr 340px !important;
}
.modal-side {
  padding: 0 !important;
  background: var(--bg-elev) !important;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 80px);
}
.modal-side-body {
  flex: 1;
  overflow-y: auto;
}
/* v0.10.4: "Caminho do trabalho" na coluna direita (topo), acima das abas.
   Cap de altura com scroll próprio pra não esmagar os comentários. */
.modal-side-workflow {
  flex-shrink: 0; padding: 14px 14px 0; max-height: 46%; overflow-y: auto;
  border-bottom: 1px solid var(--border);
}
.modal-side-workflow:empty { display: none; }

/* Esconde Status do card e Timeline antigos quando v0.5 está ativo */
.modal-side .side-section-old { display: none; }

/* ---------- BOTÃO TIMER START/STOP NO TIMESHEET ---------- */
.ts-timer-control {
  margin-bottom: 12px;
  padding: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ts-timer-display {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.ts-timer-display.ativo { color: var(--green); }
.ts-timer-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.2s ease;
}
.ts-timer-btn.play  { background: var(--green); color: white; }
.ts-timer-btn.pause { background: var(--orange); color: white; }
.ts-timer-btn.play::before  { content: '▶'; margin-left: 2px; }
.ts-timer-btn.pause::before { content: '■'; }
.ts-timer-btn:hover { transform: scale(1.08); }

/* ---------- MODAL "APONTAR HORAS" (estilo Operand) ---------- */
.apontar-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.apontar-modal.show { display: flex; }
.apontar-box {
  background: var(--bg-elev);
  border-radius: 14px;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--border);
}
.apontar-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}
.apontar-tab {
  flex: 1;
  padding: 14px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.apontar-tab.active {
  color: var(--accent);
  background: var(--bg-elev-2);
}
.apontar-tab-icon { font-size: 14px; }
.apontar-body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.apontar-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.apontar-field { display: flex; flex-direction: column; gap: 6px; }
.apontar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}
.apontar-label::after { content: ' *'; color: var(--orange); }
.apontar-input,
.apontar-select,
.apontar-textarea {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 11px;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font-body);
}
.apontar-textarea { min-height: 60px; resize: vertical; }
.apontar-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--bg-elev-2);
}
.apontar-foot-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.apontar-realizado {
  padding: 12px 22px;
  background: var(--bg-elev-2);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  text-align: center;
}
.apontar-realizado-block { display: flex; flex-direction: column; gap: 4px; }
.apontar-realizado-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.apontar-realizado-value {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--text);
  font-weight: 700;
  background: var(--bg-elev);
  border-radius: 6px;
  padding: 6px;
}

/* ---------- MODAL "PEDIR AJUDA" (Dúvida Rápida) ---------- */
.ajuda-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ajuda-modal.show { display: flex; }
.ajuda-box {
  background: var(--bg-elev);
  border-radius: 14px;
  width: 100%;
  max-width: 480px;
  border: 1px solid rgba(236, 72, 153, 0.4);
  animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.ajuda-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ajuda-tag {
  background: #ec4899;
  color: white;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 3px;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.ajuda-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
}
.ajuda-body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ajuda-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- MODAL FOOTER: trocar handoff por "Ver Apresentação" + botão Drive ---------- */
#m-handoff::after { content: ''; }
.btn-apresentacao::before { content: '◳ '; }
.btn-drive {
  background: #4285f4;
  color: white;
  border-color: #4285f4;
}
.btn-drive::before { content: '◰ '; }
.btn-drive:hover { background: #3367d6; }

/* ---------- MODAL "ABRIR JOB" — escolher depto ---------- */
.ncard-depto-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.ncard-depto-card {
  padding: 12px 14px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ncard-depto-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.ncard-depto-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ncard-depto-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ncard-depto-info { display: flex; flex-direction: column; gap: 2px; }
.ncard-depto-info-name { font-size: 13px; color: var(--text); font-weight: 500; }
.ncard-depto-info-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

/* ---------- v0.6.0: WIZARD 2 PÁGINAS no modal Novo Job ---------- */
.ncard-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.nc-step {
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
}
.nc-step.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
.nc-step-sep { color: var(--text-dim); }

.ncard-label-hint {
  font-weight: 400;
  color: var(--text-dim);
  font-size: 10px;
  margin-left: 4px;
}

/* Radios de cliente (cards horizontais) */
.ncard-radio-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ncard-radio-card {
  flex: 1;
  min-width: 120px;
  padding: 10px 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ncard-radio-card:hover { border-color: var(--accent); }
.ncard-radio-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.ncard-radio-card input[type="radio"] { accent-color: var(--accent); }
.ncard-radio-cli-name { font-size: 13px; color: var(--text); font-weight: 500; }

/* Toggle inline (projeto existente/novo, trabalho existente/novo) */
.ncard-toggle-row {
  display: flex;
  gap: 8px;
  background: var(--bg-elev-2);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.ncard-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  transition: all 0.15s ease;
}
.ncard-toggle:has(input:checked) {
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  font-weight: 500;
}
.ncard-toggle input[type="radio"] { accent-color: var(--accent); }

/* Textarea de briefing (pag 2) */
.ncard-textarea {
  font-family: var(--font-sans);
  resize: vertical;
  min-height: 50px;
  line-height: 1.4;
}

/* Resumo no topo da pag 2 */
.ncard-page2-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 18px;
}
.ncard-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.ncard-summary-row > span {
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ncard-summary-row > strong {
  color: var(--text);
  font-weight: 500;
}

/* ---------- v0.6.1: wizard 3 páginas — agrupamento + ações ---------- */
/* Barra de ações rápidas (topo das pag 2 e 3) */
.ncard-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 18px;
}
.ncard-action-btn {
  flex: 1;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.ncard-action-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.ncard-action-ia {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), var(--bg-elev));
  border-color: rgba(124, 58, 237, 0.4);
  color: rgb(167, 139, 250);
}
.ncard-action-ia:hover {
  background: rgba(124, 58, 237, 0.18);
  border-color: rgb(124, 58, 237);
  color: rgb(196, 181, 253);
}

/* Sections (agrupamento de campos relacionados) */
.ncard-section {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ncard-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Lista de anexos (pílulas) */
.ncard-attachments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ncard-anexo-label {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ncard-anexo-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 11px;
  color: var(--text);
}
.ncard-anexo-pill.ncard-anexo-img { cursor: zoom-in; }
.ncard-anexo-pill.ncard-anexo-img:hover { border-color: var(--accent); }
.ncard-anexo-size {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
}

/* Sub-página Briefing — textareas mais respiráveis dentro da section */
#nc-briefing-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#nc-briefing-fields .ncard-field { gap: 4px; }
#nc-briefing-fields .ncard-textarea {
  min-height: 64px;
}
@media (max-width: 720px) {
  #nc-briefing-fields { grid-template-columns: 1fr; }
}

/* ---------- ATALHO BRANDBOOK CLIENTE ---------- */
.brandbook-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  text-decoration: none;
  margin-left: 6px;
  cursor: pointer;
}
.brandbook-link::before { content: '📖 '; font-size: 9px; }
.brandbook-link:hover { background: var(--accent-soft); }

/* ---------- MODO DEMO PERSONA (visualização "como Luiz") ---------- */
.nav-item-persona {
  background: linear-gradient(90deg, rgba(255, 77, 0, 0.15), transparent);
  border-left: 2px solid var(--accent) !important;
  font-weight: 600;
}
/* v0.10.1: nome na 1ª linha, cargo na 2ª em itálico */
.nav-item-persona-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-item-persona-name { font-style: normal; font-weight: 600; line-height: 1.2; }
.nav-item-persona-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-style: italic;
  line-height: 1.2;
}
.nav-item-persona.active .nav-item-persona-meta { color: var(--accent); }

/* Banner topo no modo demo */
.persona-banner {
  background: linear-gradient(90deg, rgba(255, 77, 0, 0.18), rgba(255, 77, 0, 0.04));
  border: 1px solid rgba(255, 77, 0, 0.35);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text);
}
.persona-banner-tag {
  background: var(--accent);
  color: white;
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 3px;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.persona-banner-exit {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 6px;
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.08em;
}
.persona-banner-exit:hover { background: var(--accent-soft); }

/* Quando modoPessoa ativo: esconde estes elementos.
   IMPORTANTE: a .diretor-toolbar (KPIs+atalhos+tarefas do dia) DEVE
   aparecer no Luiz operador — ela é controlada por renderDiretorToolbar() */
body.modo-persona .profile-switcher,
body.modo-persona #view-switcher button[data-view="responsavel"],
body.modo-persona #wl-toggle,
body.modo-persona .metrics-bar { display: none !important; }

/* Modo persona: calendar semanal (linhas verticais empilhadas, 7 dias) */
.cal-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  padding: 14px;
}
.cal-semana-dia {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 220px;
  padding: 8px;
}
.cal-semana-dia.today { border-color: var(--accent); background: var(--accent-soft); }
.cal-semana-dia-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}
.cal-semana-dia-num {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
}
.cal-semana-dia.today .cal-semana-dia-num { color: var(--accent); }
.cal-semana-card {
  background: var(--bg-elev);
  border-left: 2px solid var(--green);
  padding: 6px 8px;
  margin-bottom: 4px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-semana-card[data-sla="warning"] { border-left-color: var(--orange); }
.cal-semana-card[data-sla="danger"] { border-left-color: var(--red); }
.cal-semana-card:hover { background: var(--bg); }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .main { padding: 20px; }
  .metrics-bar { grid-template-columns: repeat(2, 1fr); }
  .search-wrap { min-width: 140px; }
  .kpis-toolbar.kpis-operador { grid-template-columns: 1fr; }
}
@media (max-width: 1280px) and (min-width: 901px) {
  .kpis-toolbar.kpis-operador { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   OUTBOX ADMIN (Etapa 2 PLANO_TRANSICAO_KANBAN_SOT)
   ===================================================================== */
.oa-root { padding: 24px; max-width: 1400px; margin: 0 auto; color: var(--text, #e8e8e8); }
.oa-header { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.oa-header h1 { font-size: 24px; margin: 0; font-weight: 600; }
.oa-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--border-1, #3a3a3a); }
.oa-tabs button {
  background: transparent; color: var(--text-3, #888); border: none; padding: 12px 18px;
  font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s;
}
.oa-tabs button:hover { color: var(--text-1, #e8e8e8); }
.oa-tabs button.active { color: var(--text-1, #e8e8e8); border-bottom-color: #6366f1; }
.oa-tab-meta { font-size: 11px; color: var(--text-3, #888); margin-left: 6px; font-weight: normal; }

.oa-stats { background: var(--bg-2, #242424); border: 1px solid var(--border-1, #3a3a3a); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.oa-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; }
.oa-kpi { display: flex; flex-direction: column; gap: 4px; }
.oa-kpi-l { font-size: 11px; color: var(--text-3, #888); text-transform: uppercase; letter-spacing: 0.5px; }
.oa-kpi-v { font-size: 22px; font-weight: 600; color: var(--text-1, #e8e8e8); }
.oa-top-wf { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-1, #3a3a3a); font-size: 12px; color: var(--text-3, #888); }

.oa-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center; }
.oa-filters input, .oa-filters select {
  background: var(--bg-3, #2d2d2d); color: var(--text-1, #e8e8e8); border: 1px solid var(--border-1, #3a3a3a);
  padding: 8px 12px; border-radius: 6px; font-size: 13px; min-width: 140px;
}
.oa-filters button {
  background: #6366f1; color: #fff; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.oa-filters button:hover { background: #4f46e5; }

.oa-list { background: var(--bg-2, #242424); border: 1px solid var(--border-1, #3a3a3a); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.oa-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.oa-table th { background: var(--bg-3, #2d2d2d); color: var(--text-3, #888); text-align: left; padding: 10px 14px; font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.oa-table td { padding: 10px 14px; border-top: 1px solid var(--border-1, #3a3a3a); vertical-align: middle; }
.oa-row { cursor: pointer; transition: background 0.1s; }
.oa-row:hover { background: var(--bg-3, #2d2d2d); }
.oa-detail-btn { background: transparent; color: var(--text-3, #888); border: none; cursor: pointer; font-size: 18px; padding: 4px 8px; }
.oa-detail-btn:hover { color: #6366f1; }
.oa-err { color: #f97316; font-family: var(--font-mono, monospace); font-size: 11px; }
.oa-endpoint { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-3, #888); }

.oa-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; }
.oa-loading, .oa-empty { padding: 40px; text-align: center; color: var(--text-3, #888); font-size: 13px; }

.oa-pager { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 12px; }
.oa-pager button { background: var(--bg-3, #2d2d2d); color: var(--text-1, #e8e8e8); border: 1px solid var(--border-1, #3a3a3a); padding: 6px 14px; border-radius: 6px; cursor: pointer; }
.oa-pager button:disabled { opacity: 0.4; cursor: not-allowed; }

.oa-drawer {
  position: fixed; top: 0; right: 0; width: 540px; height: 100vh; background: var(--bg-2, #242424);
  border-left: 1px solid var(--border-1, #3a3a3a); box-shadow: -4px 0 16px rgba(0,0,0,0.4);
  overflow-y: auto; z-index: 9000;
}
.oa-drawer-inner { padding: 20px; }
.oa-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.oa-drawer-head h2 { margin: 0; font-size: 18px; }
.oa-drawer-head button { background: transparent; color: var(--text-3, #888); border: none; cursor: pointer; font-size: 18px; }
.oa-drawer-meta { font-size: 13px; line-height: 1.8; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border-1, #3a3a3a); }
.oa-drawer-meta div { display: flex; gap: 8px; }
.oa-err-block { display: block; color: #f97316; }
.oa-err-block pre { background: #1a1a1a; padding: 8px; border-radius: 4px; font-size: 11px; overflow-x: auto; margin-top: 4px; }
.oa-drawer-section { margin-bottom: 16px; }
.oa-drawer-section h3 { font-size: 13px; color: var(--text-3, #888); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 8px; }
.oa-payload { background: #1a1a1a; padding: 12px; border-radius: 6px; font-family: var(--font-mono, monospace); font-size: 11px; overflow-x: auto; max-height: 240px; }
.oa-audit-row { background: var(--bg-3, #2d2d2d); padding: 8px 12px; border-radius: 4px; margin-bottom: 6px; font-size: 12px; }
.oa-audit-row strong { color: #6366f1; margin-right: 8px; }
.oa-audit-row span { color: var(--text-3, #888); float: right; font-size: 11px; }
.oa-audit-reason { margin-top: 4px; color: var(--text-3, #888); font-style: italic; }
.oa-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-1, #3a3a3a); }
.oa-action { background: var(--bg-3, #2d2d2d); color: var(--text-1, #e8e8e8); border: 1px solid var(--border-1, #3a3a3a); padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.oa-action:hover { background: #6366f1; border-color: #6366f1; color: #fff; }

/* ===========================================================
   v0.10.1 — Versões do entregável (fichário + diff + Nova versão) — mig 087
   =========================================================== */
/* Abas fichário no header do modal */
.version-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.version-tabs[hidden] { display: none; }   /* display:flex sobrescreveria o [hidden] da UA — reforça aqui */
.version-tabs-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-right: 4px; }
.version-tab {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; cursor: pointer;
  background: var(--bg-elev-2); color: var(--text-muted);
  border: 1px solid var(--border); transition: all .15s ease;
}
.version-tab:hover { border-color: var(--border-strong); color: var(--text); }
.version-tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* Diff: campo alterado vs versão anterior */
.section.section-changed { background: var(--orange-soft); border-radius: 8px; padding-left: 12px; padding-right: 12px; }
.section.section-changed .section-title { color: var(--orange); }
.section-diff-tag {
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange); background: var(--orange-soft);
  border: 1px solid var(--orange); border-radius: 4px; padding: 1px 6px; margin-left: 8px;
}
.version-view-banner {
  background: var(--bg-elev-2); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; font-size: 13px; color: var(--text);
}
.version-view-banner span { color: var(--text-dim); font-size: 12px; }
.version-view-motivo { margin-top: 8px; font-size: 12px; color: var(--text-muted); }

/* Modal "Nova versão" */
.nv-overlay {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); backdrop-filter: blur(2px); padding: 24px;
}
.nv-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  width: 640px; max-width: 100%; max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.nv-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.nv-head h2 { font-size: 18px; font-weight: 600; margin: 2px 0 0; }
.nv-eyebrow { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.nv-close { background: none; border: none; color: var(--text-dim); font-size: 24px; cursor: pointer; line-height: 1; }
.nv-close:hover { color: var(--text); }
.nv-body { padding: 18px 22px; overflow-y: auto; }
.nv-section { margin-bottom: 20px; }
.nv-section-title { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.nv-req { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-dim); }
.nv-input {
  width: 100%; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-family: var(--font-body); font-size: 13px; padding: 9px 11px; resize: vertical;
}
.nv-input:focus { outline: none; border-color: var(--accent); }
select.nv-input { padding: 9px 11px; }
.nv-hint { margin-top: 6px; font-size: 11px; color: var(--text-dim); }
.nv-suggestion { margin-top: 8px; font-size: 12px; color: var(--green); }
.nv-suggestion strong { color: var(--green); }
.nv-types { display: flex; gap: 10px; }
.nv-type {
  flex: 1; text-align: left; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; cursor: pointer; transition: all .15s ease; display: flex; flex-direction: column; gap: 4px;
}
.nv-type:hover { border-color: var(--border-strong); }
.nv-type-t { font-size: 14px; font-weight: 600; color: var(--text); }
.nv-type-d { font-size: 12px; color: var(--text-muted); }
.nv-type.nv-suggested { border-color: var(--green); box-shadow: 0 0 0 1px var(--green-soft) inset; }
.nv-type.nv-active { background: var(--accent-soft); border-color: var(--accent); }
.nv-type.nv-active .nv-type-t { color: var(--accent); }
.nv-fields { display: flex; flex-direction: column; gap: 12px; }
.nv-field { display: flex; flex-direction: column; gap: 5px; }
.nv-field-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.nv-empty { font-size: 13px; color: var(--text-dim); font-style: italic; }
.nv-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border); }
.nv-submit:disabled { opacity: .45; cursor: not-allowed; }