/* =============================================================
   BPMN Process Builder — Design System
   Fonte única de verdade dos COMPONENTES. Sem passo de build.

   Divisão de responsabilidade:
     - app.css  (este arquivo, editável direto): tokens + tema +
       TODOS os componentes semânticos (.btn-*, .card, .field, .input,
       .badge, .alert, .table, .modal, .toast, .empty-state, .segmented…).
     - tailwind.css (compilado, versionado): SÓ utilitários de layout
       (flex/grid/spacing/responsivo). Rebuild: build-assets.cmd.
     - base.html: sem <style> próprio.

   Estrutura:
     1. Tokens Material 3 (tripletos RGB) — consumidos por app.css e tailwind
     2. Tokens legados (hex) — painel de propriedades do builder, popups
     3+ Base, componentes, overrides bpmn-js
   Tema único: paleta "Dabang" (Estilo/Sales Dashboard Design) —
   fundo cinza-claro, cards brancos, roxo #5d5fef, texto azul-marinho.
   ============================================================= */

/* ---------- 1. TOKENS MATERIAL (TEMA DABANG) ---------- */
:root {
  /* superfícies */
  --background:                250 251 252;/* #fafbfc */
  --surface:                   255 255 255;/* #ffffff */
  --surface-dim:               255 255 255;
  --surface-bright:            245 246 250;/* #f5f6fa */
  --surface-container-lowest:  255 255 255;
  --surface-container-low:     248 249 252;/* #f8f9fc */
  --surface-container:         243 244 248;/* #f3f4f8 */
  --surface-container-high:    238 240 246;/* #eef0f6 */
  --surface-container-highest: 226 229 238;/* #e2e5ee */
  --surface-variant:           238 240 246;

  /* texto */
  --on-surface:                21 29 72;   /* #151d48 */
  --on-surface-variant:        115 119 145;/* #737791 */
  --inverse-surface:           21 29 72;
  --inverse-on-surface:        250 251 252;
  --on-background:             21 29 72;

  /* contornos */
  --outline:                   150 165 184;/* #96a5b8 */
  --outline-variant:           229 231 240;/* #e5e7f0 */

  /* primary (roxo Dabang) */
  --primary:                   93 95 239;  /* #5d5fef */
  --on-primary:                255 255 255;
  --primary-container:         237 237 255;/* #ededff */
  --on-primary-container:      60 62 200;  /* #3c3ec8 */
  --inverse-primary:           192 193 255;/* #c0c1ff */
  --primary-fixed:             237 237 255;
  --primary-fixed-dim:         190 191 250;/* #bebffa */
  --on-primary-fixed:          20 20 110;
  --on-primary-fixed-variant:  60 62 200;

  /* secondary (azul Dabang) */
  --secondary:                 0 149 255;  /* #0095ff */
  --on-secondary:              255 255 255;
  --secondary-container:       224 242 255;/* #e0f2ff */
  --on-secondary-container:    0 94 163;   /* #005ea3 */
  --secondary-fixed:           224 242 255;
  --secondary-fixed-dim:       153 213 255;
  --on-secondary-fixed:        0 40 70;
  --on-secondary-fixed-variant:0 94 163;

  /* tertiary (laranja Dabang) */
  --tertiary:                  255 148 122;/* #ff947a */
  --on-tertiary:               255 255 255;
  --tertiary-container:        255 244 222;/* #fff4de */
  --on-tertiary-container:     160 72 40;
  --tertiary-fixed:            255 244 222;
  --tertiary-fixed-dim:        255 207 180;
  --on-tertiary-fixed:         80 30 10;
  --on-tertiary-fixed-variant: 160 72 40;

  /* error (rosa Dabang) */
  --error:                     250 90 125; /* #fa5a7d */
  --on-error:                  255 255 255;
  --error-container:           255 226 229;/* #ffe2e5 */
  --on-error-container:        190 30 70;  /* #be1e46 */

  /* ---------- 2. TOKENS LEGADOS (hex) ---------- */
  --bg:            #fafbfc;
  --surface-sunken:#ffffff;
  --surface-x:     #ffffff;
  --surface-raised:#f5f6fa;
  --surface-hover: #eef0f6;
  --border:        #e5e7f0;
  --border-strong: #c9cfdc;
  --text:          #151d48;
  --text-soft:     #3a4169;
  --text-muted:    #737791;
  --text-faint:    #96a5b8;
  --accent:        #5d5fef;
  --accent-hover:  #4b4de0;
  --accent-text:   #4b4de0;
  --accent-soft:   #ededff;
  --accent-ring:   rgba(93,95,239,.22);
  --success:       #07875a;  --success-hover:#066e49; --success-text:#07875a;
  --success-soft:  #dcfce7;  --success-line:#9ee6c1;
  --danger:        #fa5a7d;  --danger-hover:#e8426a; --danger-text:#d02b55;
  --danger-soft:   #ffe2e5;  --danger-line:#f9b4c2;
  --warn:          #ff947a;  --warn-hover:#f47a5e;  --warn-text:#b4532a;
  --warn-soft:     #fff4de;  --warn-line:#fbd29a;
  --r-xs: 4px; --r-sm: 6px; --r: 8px; --r-lg: 16px; --r-full: 999px;
  --nav-h: 56px; --page-max: 80rem;
  --overlay:       rgba(21,29,72,.35);
  --shadow-sm: 0 1px 2px rgba(21,29,72,.04), 0 2px 6px rgba(21,29,72,.04);
  --shadow:    0 4px 20px rgba(21,29,72,.06);
  --shadow-lg:  0 16px 48px rgba(21,29,72,.16);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
}

/* ============================================================================
   3. BASE
   ========================================================================== */
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: rgb(var(--background));
  color: rgb(var(--on-background));
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* superfícies do browser vestidas com a paleta */
::selection { background: rgb(var(--primary) / 0.28); color: rgb(var(--on-surface)); }
:root { accent-color: rgb(var(--primary)); caret-color: rgb(var(--primary)); }
:focus-visible { outline: 2px solid rgb(var(--primary)); outline-offset: 2px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--outline-variant)); border-radius: 6px; border: 2px solid rgb(var(--background)); }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--outline)); }

a { color: rgb(var(--primary)); text-underline-offset: 2px; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 20px; line-height: 1; vertical-align: middle;
  user-select: none; flex-shrink: 0;
}
.material-symbols-outlined.fill { font-variation-settings: 'FILL' 1; }
.material-symbols-outlined.sym-sm { font-size: 18px; }
.material-symbols-outlined.sym-lg { font-size: 24px; }

/* ============================================================================
   3-nav. SHELL + NAVEGAÇÃO (sidebar desktop + drawer mobile)
   ========================================================================== */
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; min-width: 0; }

.sidebar {
  display: flex; flex-direction: column;
  width: 260px; flex-shrink: 0;
  height: 100vh; position: sticky; top: 0;
  background: rgb(var(--surface));
  padding: 1.75rem 1.25rem 1.25rem;
  z-index: 20;
}
.sidebar__brand { display: flex; align-items: center; gap: 0.75rem; padding: 0 0.5rem; margin-bottom: 2.5rem; text-decoration: none; }
.sidebar__mark {
  width: 2.5rem; height: 2.5rem; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--primary)); color: rgb(var(--on-primary));
}
.sidebar__name { display: block; font-size: 18px; font-weight: 700; color: rgb(var(--on-surface)); line-height: 1.15; }
.sidebar__tagline { display: block; font-size: 11px; color: rgb(var(--on-surface-variant)); margin-top: 2px; }
.sidebar__nav { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.sidebar__foot { display: flex; flex-direction: column; gap: 0.35rem; padding-top: 1rem; margin-top: 0.5rem; border-top: 1px solid rgb(var(--outline-variant)); }

.nav-link {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.75rem 1rem; border-radius: 12px;
  font-size: 14px; font-weight: 500; text-decoration: none;
  color: rgb(var(--on-surface-variant));
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.nav-link:hover { background: rgb(var(--primary-container)); color: rgb(var(--primary)); }
.nav-link.is-active {
  background: rgb(var(--primary)); color: rgb(var(--on-primary)); font-weight: 600;
  box-shadow: 0 8px 20px rgb(var(--primary) / 0.28);
}
.nav-link.is-active .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.nav-link--danger:hover { background: var(--danger-soft); color: var(--danger-text); }
.nav-link .material-symbols-outlined { font-size: 22px; }

/* barra de topo (desktop): título da seção + usuário */
.appbar {
  display: flex; align-items: center; gap: 1rem;
  height: 5.5rem; padding: 0 2rem;
  position: sticky; top: 0; z-index: 25;
  background: rgb(var(--surface));
}
.appbar__title {
  flex: 1; min-width: 0; margin: 0;
  font-size: 28px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
  color: rgb(var(--on-surface));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.appbar__user { display: flex; align-items: center; gap: 0.75rem; }
.appbar__avatar {
  width: 2.75rem; height: 2.75rem; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--primary-container)); color: rgb(var(--primary));
  font-size: 16px; font-weight: 700; text-transform: uppercase;
}
.appbar__name { display: block; font-size: 14px; font-weight: 600; color: rgb(var(--on-surface)); line-height: 1.2; }
.appbar__role { display: block; font-size: 12px; color: rgb(var(--on-surface-variant)); text-transform: capitalize; }

/* topbar (mobile) */
.topbar {
  display: none;
  align-items: center; gap: 0.5rem;
  height: 3.25rem; padding: 0 0.75rem;
  position: sticky; top: 0; z-index: 30;
  background: rgb(var(--surface));
  border-bottom: 1px solid rgb(var(--outline-variant) / 0.4);
}
.topbar__title { display: flex; align-items: center; gap: 0.4rem; font-size: 14px; font-weight: 700; color: rgb(var(--on-surface)); }
.topbar__title .material-symbols-outlined { color: rgb(var(--primary)); }

/* drawer */
.drawer { position: fixed; inset: 0; z-index: 60; display: none; }
.drawer[open], .drawer.is-open { display: block; }
.drawer__scrim { position: absolute; inset: 0; background: var(--overlay); animation: fade-in .15s ease-out; }
.drawer__panel {
  position: absolute; inset: 0 auto 0 0; width: min(80vw, 300px);
  background: rgb(var(--surface)); border-right: 1px solid rgb(var(--outline-variant) / 0.4);
  padding: 1rem 0.75rem; display: flex; flex-direction: column; gap: 2px;
  animation: drawer-in .2s cubic-bezier(.16,1,.3,1);
  overflow-y: auto;
}
@keyframes drawer-in { from { transform: translateX(-100%); } }
.drawer__close { align-self: flex-end; }

@media (max-width: 767px) {
  .sidebar { display: none; }
  .appbar { display: none; }
  .topbar { display: flex; }
}

/* ============================================================================
   3a. CABEÇALHO DE PÁGINA  — um só padrão para todas as telas
   ========================================================================== */
.page-header {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}
.page-header__titles { min-width: 0; }
.page-header h1 {
  font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em;
  color: rgb(var(--on-background)); margin: 0;
}
.page-header p {
  font-size: 15px; line-height: 1.5; color: rgb(var(--on-surface-variant));
  margin: 0.375rem 0 0;
}
.page-header__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }

.page-back {
  display: inline-flex; align-items: center; gap: 0.25rem;
  color: rgb(var(--on-surface-variant)); font-size: 13px; font-weight: 500; text-decoration: none;
  margin-bottom: 1rem;
}
.page-back:hover { color: rgb(var(--primary)); }
.page-back .material-symbols-outlined { font-size: 18px; }

/* trilha empresa › processo */
.crumb { display: inline-flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.crumb__sep { color: rgb(var(--outline)); font-size: 16px; }
.crumb strong { color: rgb(var(--primary)); font-weight: 600; }

/* ============================================================================
   3b. BOTÕES
   ========================================================================== */
.btn,
.btn-primary, .btn-success, .btn-warn, .btn-danger, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.5rem 0.95rem; border-radius: 8px;
  font-size: 13px; font-weight: 600; font-family: inherit; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease;
}
.btn .material-symbols-outlined,
.btn-primary .material-symbols-outlined, .btn-success .material-symbols-outlined,
.btn-warn .material-symbols-outlined, .btn-danger .material-symbols-outlined,
.btn-ghost .material-symbols-outlined { font-size: 18px; }

.btn-primary { background: rgb(var(--primary)); color: rgb(var(--on-primary)); }
.btn-primary:hover { filter: brightness(1.08); }

.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: var(--success-hover); }

.btn-warn {
  background: rgb(var(--surface-container-high)); color: rgb(var(--on-surface));
  border-color: rgb(var(--outline-variant));
}
.btn-warn:hover { background: rgb(var(--surface-container-highest)); }

.btn-danger { background: transparent; color: var(--danger-text); border-color: var(--danger-line); }
.btn-danger:hover { background: var(--danger-soft); }

.btn-ghost { background: transparent; color: rgb(var(--on-surface)); border-color: rgb(var(--outline-variant)); }
.btn-ghost:hover { background: rgb(var(--surface-container-high)); border-color: rgb(var(--outline)); }

.btn-link {
  display: inline-flex; align-items: center; gap: 0.25rem;
  color: rgb(var(--primary)); font-size: 12px; font-weight: 500;
  text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit;
}
.btn-link:hover { text-decoration: underline; }

.btn-sm { padding: 0.35rem 0.65rem; font-size: 12px; border-radius: 6px; gap: 0.35rem; }
.btn-sm .material-symbols-outlined { font-size: 16px; }

.btn-block { width: 100%; }

.btn:disabled,
.btn-primary:disabled, .btn-success:disabled, .btn-warn:disabled,
.btn-danger:disabled, .btn-ghost:disabled,
.btn.is-loading { opacity: .55; cursor: not-allowed; filter: none; pointer-events: none; }

/* ============================================================================
   3c. CARDS
   ========================================================================== */
.card {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--outline-variant) / 0.6);
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card-hover:hover { border-color: rgb(var(--primary) / 0.35); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(21,29,72,.1); }
.card__head {
  padding: 1.1rem 1.25rem 0.4rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.card__head h2, .card__head h3 {
  font-size: 17px; font-weight: 600; color: rgb(var(--on-surface)); margin: 0;
  display: flex; align-items: center; gap: 0.5rem;
}
.card__body { padding: 1rem 1.25rem 1.25rem; }
.card-title { font-size: 16px; font-weight: 600; color: rgb(var(--on-surface)); }

/* ============================================================================
   3d. FORMULÁRIOS
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.label { font-size: 12px; font-weight: 600; color: rgb(var(--on-surface-variant)); }
.hint { font-size: 12px; line-height: 1.45; color: rgb(var(--on-surface-variant)); }

.input, .select, .textarea,
.input-field, .select-field {
  width: 100%; font-family: inherit; font-size: 14px;
  background: rgb(var(--surface-container-low));
  color: rgb(var(--on-surface));
  border: 1px solid rgb(var(--outline-variant));
  border-radius: 8px; padding: 0.5rem 0.65rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder, .input-field::placeholder { color: rgb(var(--on-surface-variant) / 0.7); }
.input:focus, .select:focus, .textarea:focus,
.input-field:focus, .select-field:focus {
  outline: none; border-color: rgb(var(--primary));
  box-shadow: 0 0 0 3px rgb(var(--primary) / 0.2);
}
.select, .select-field { appearance: none; cursor: pointer; padding-right: 2rem; }
.textarea { resize: vertical; line-height: 1.55; min-height: 4.5rem; }

/* área de upload */
.dropzone {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25rem;
  padding: 1.5rem 1rem; cursor: pointer;
  border: 1.5px dashed rgb(var(--primary) / 0.4); border-radius: 12px;
  background: rgb(var(--surface-container-low) / 0.5);
  transition: background-color .15s ease, border-color .15s ease;
}
.dropzone:hover { background: rgb(var(--surface-container-low)); border-color: rgb(var(--primary) / 0.7); }
.dropzone .material-symbols-outlined { font-size: 34px; color: rgb(var(--primary)); margin-bottom: 0.25rem; }
.dropzone__title { font-size: 13px; font-weight: 600; color: rgb(var(--on-surface)); }
.dropzone__hint { font-size: 12px; color: rgb(var(--on-surface-variant)); }

/* select com chevron sobreposto */
.select-wrap { position: relative; }
.select-wrap .material-symbols-outlined {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: rgb(var(--on-surface-variant)); font-size: 18px;
}

/* toggle (config: LLM ativa) — anel de foco visível */
input.sr-only.peer:focus-visible + span { outline: 2px solid rgb(var(--primary)); outline-offset: 2px; }

/* ============================================================================
   3e. CONTROLE SEGMENTADO (filtros / abas)
   ========================================================================== */
.segmented {
  display: inline-flex; flex-wrap: wrap; gap: 2px;
  background: rgb(var(--surface-container-high)); border: 1px solid rgb(var(--outline-variant) / 0.5);
  border-radius: 8px; padding: 3px;
}
.segmented__item {
  padding: 0.3rem 0.7rem; border-radius: 6px;
  font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer;
  color: rgb(var(--on-surface-variant)); background: transparent; border: 0; font-family: inherit;
  transition: color .15s ease, background-color .15s ease;
}
.segmented__item:hover { color: rgb(var(--on-surface)); }
.segmented__item.is-active {
  background: rgb(var(--surface)); color: rgb(var(--primary));
  box-shadow: var(--shadow-sm);
}

/* ============================================================================
   3f. BADGES
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 2px 8px; border-radius: 9999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
  background: rgb(var(--surface-container-high)); color: rgb(var(--on-surface-variant));
  border: 1px solid rgb(var(--outline-variant) / 0.6);
}
.badge-accent, .badge-active {
  background: rgb(var(--primary) / 0.16); color: rgb(var(--primary)); border-color: rgb(var(--primary) / 0.4);
}
.badge-success, .badge-completed {
  background: var(--success-soft); color: var(--success-text); border-color: var(--success-line);
}
.badge-warn, .badge-pending {
  background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn-line);
}
.badge-danger {
  background: var(--danger-soft); color: var(--danger-text); border-color: var(--danger-line);
}

/* ============================================================================
   3g. ALERTS
   ========================================================================== */
.alert {
  border-radius: 10px; padding: 0.75rem 1rem; font-size: 13px; line-height: 1.5;
  border: 1px solid transparent;
}
.alert-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-text); }
.alert-danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-text); }
.alert-success { background: var(--success-soft); border-color: var(--success-line); color: var(--success-text); }

/* ============================================================================
   3h. EMPTY STATE
   ========================================================================== */
.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 3rem 1.5rem; gap: 0.25rem;
  border: 1px dashed rgb(var(--outline-variant));
  border-radius: 12px;
  color: rgb(var(--on-surface-variant));
  background: rgb(var(--surface-container-lowest) / 0.4);
}
.empty-state .material-symbols-outlined { font-size: 40px; color: rgb(var(--outline)); margin-bottom: 0.75rem; }
.empty-state p { margin: 0; }
.empty-state .btn-primary, .empty-state .btn-ghost { margin-top: 1rem; }

/* ============================================================================
   3i. TABELA
   ========================================================================== */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; padding: 0.6rem 0.75rem;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: rgb(var(--on-surface-variant));
  border-bottom: 1px solid rgb(var(--outline-variant));
}
.table td { padding: 0.7rem 0.75rem; border-bottom: 1px solid rgb(var(--outline-variant) / 0.5); }
.table tr:last-child td { border-bottom: 0; }
.table--card {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--outline-variant) / 0.5); border-radius: 12px; overflow: hidden;
}

/* linha-item reutilizável (setores / empresas / prompts) */
.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
  padding: 1rem;
}
.list-row__main { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.list-row__icon {
  width: 2.25rem; height: 2.25rem; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--surface-container-high)); color: rgb(var(--on-surface-variant));
}
.list-row__title { display: block; font-weight: 600; color: rgb(var(--on-surface)); }
.list-row__meta { display: block; font-size: 12px; color: rgb(var(--on-surface-variant)); margin-top: 1px; }
.list-row__actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* ============================================================================
   3j. PROGRESSO / SPINNER
   ========================================================================== */
.progress-track {
  height: 6px; border-radius: 9999px; overflow: hidden;
  background: rgb(var(--surface-container-high));
}
.progress-fill { height: 100%; border-radius: 9999px; background: rgb(var(--primary)); transition: width .3s ease; }
.progress-fill.is-success { background: var(--success); }
.progress-fill.is-error { background: var(--danger-text); }

.spinner {
  width: 14px; height: 14px; display: inline-block;
  border: 2px solid rgb(var(--primary) / 0.3); border-top-color: rgb(var(--primary));
  border-radius: 9999px; animation: spin .7s linear infinite;
}
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* texto de status semântico (usado também pelo markup gerado por JS) */
.txt-muted { color: rgb(var(--on-surface-variant)); }
.txt-accent { color: rgb(var(--primary)); }
.txt-success { color: var(--success-text); }
.txt-warn { color: var(--warn-text); }
.txt-danger { color: var(--danger-text); }

/* ============================================================================
   4. PROPERTIES PANEL (builder, injetado por JS)
   ========================================================================== */
.prop-group { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.prop-group h4 { font-size: 11px; font-weight: 600; color: var(--accent-text); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em; }
.prop-label { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.prop-input, .prop-select {
  width: 100%; background: rgb(var(--surface-container-lowest));
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px;
  font-size: 13px; color: rgb(var(--on-surface));
}
.prop-input:focus, .prop-select:focus { outline: none; border-color: rgb(var(--primary)); box-shadow: 0 0 0 3px rgb(var(--primary) / 0.2); }
#properties-panel { width: 288px; overflow-y: auto; background: rgb(var(--surface)); border-left: 1px solid var(--border); }
#properties-panel .djs-scrollable { overflow: visible; }
.prop-tabs { display: flex; border-bottom: 1px solid var(--border); }
.prop-tab {
  flex: 1; padding: 8px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); background: transparent; border: none; cursor: pointer; border-bottom: 2px solid transparent;
}
.prop-tab:hover { color: rgb(var(--on-surface)); }
.prop-tab.is-active { color: rgb(var(--primary)); border-bottom-color: rgb(var(--primary)); }
#prop-oficial { min-width: 0; overflow-y: auto; }
#prop-oficial .bio-properties-panel { --text-color: rgb(var(--on-surface)); --text-color-light: var(--text-muted); }
#prop-custom { min-width: 0; overflow-y: auto; }

.zoom-btn {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; color: rgb(var(--on-surface-variant)); font-size: 14px;
  border: 1px solid var(--border); background: rgb(var(--surface-container-low)); cursor: pointer;
}
.zoom-btn:hover { background: rgb(var(--surface-container-high)); color: rgb(var(--on-surface)); }

.bpmn-color-popup {
  position: fixed; z-index: 9999; background: rgb(var(--surface-container-high));
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 6px;
  display: flex; gap: 4px; box-shadow: var(--shadow-lg);
}
.bpmn-color-swatch { width: 20px; height: 20px; border-radius: 3px; cursor: pointer; }

/* ============================================================================
   5. RECONCILIAÇÃO (elementos_consenso — DOM montado por JS)
   ========================================================================== */
.painel-ia li, .consenso-list li { border-radius: 8px; }
.origem-list { border: 1px solid rgb(var(--outline-variant) / 0.5); background: rgb(var(--surface-container-low)); border-radius: 10px; }
.consenso-list { border: 1px solid rgb(var(--primary) / 0.35); background: rgb(var(--primary) / 0.06); border-radius: 10px; }

/* item da lista: convergente vs divergente — sinal por ícone + rótulo + borda, não só cor */
.rec-item {
  display: flex; align-items: flex-start; gap: 0.5rem;
  border: 1px solid rgb(var(--outline-variant) / 0.7);
  border-radius: 8px; padding: 0.4rem 0.55rem; font-size: 13px;
  background: rgb(var(--surface));
}
.rec-item__body { flex: 1; min-width: 0; }
.rec-item__tag {
  display: inline-flex; align-items: center; gap: 0.2rem; white-space: nowrap;
  font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; margin-right: 0.4rem;
}
.rec-item--conv { border-color: var(--success-line); }
.rec-item--conv .rec-item__tag { background: var(--success-soft); color: var(--success-text); }
.rec-item--div { border-color: var(--warn-line); border-style: dashed; }
.rec-item--div .rec-item__tag { background: var(--warn-soft); color: var(--warn-text); }
.rec-item--in { opacity: 0.55; }
.rec-item__actions { display: flex; gap: 0.15rem; flex-shrink: 0; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  color: rgb(var(--on-surface-variant));
}
.icon-btn:hover { background: rgb(var(--surface-container-high)); color: rgb(var(--on-surface)); }
.icon-btn--danger:hover { background: var(--danger-soft); color: var(--danger-text); }
.icon-btn .material-symbols-outlined { font-size: 18px; }

/* ============================================================================
   5b. TO-BE — revisão em 2 colunas (AS-IS travado | TO-BE editável)
   ========================================================================== */
.cmp2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) { .cmp2 { grid-template-columns: 1fr; } }
.cmp2__col { min-width: 0; }
.cmp2__label {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 12px; font-weight: 600; color: rgb(var(--on-surface-variant));
  margin-bottom: 0.5rem;
}
.cmp2__col--locked { opacity: 0.85; }
.cmp2__col--locked .asis-list { pointer-events: none; }
.asis-list, .tobe-list { display: flex; flex-direction: column; gap: 0.35rem; }
.cmp2__col--locked .asis-list > .rec-item {
  background: rgb(var(--surface-container-low));
  border-style: dashed;
}
.rec-item--drag { cursor: default; }
.rec-item--drag.is-dragging { opacity: 0.4; }
.tobe-list > .rec-item--drag { border-color: rgb(var(--primary) / 0.4); background: rgb(var(--primary) / 0.04); }
.drag-handle {
  font-size: 18px; color: rgb(var(--on-surface-variant)); cursor: grab;
  flex-shrink: 0; margin-top: 1px;
}
.drag-handle:active { cursor: grabbing; }

/* ============================================================================
   5c. PANORAMA — dashboard de métricas do AS-IS (_asis_dashboard.html)
   ========================================================================== */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}
.metric {
  display: flex; flex-direction: column; gap: 0.15rem;
  border: 1px solid rgb(var(--outline-variant) / 0.6);
  border-radius: 10px; padding: 0.7rem 0.8rem;
  background: rgb(var(--surface-container-low));
}
.metric--wide { grid-column: span 2; }
@media (max-width: 520px) { .metric--wide { grid-column: span 1; } }
.metric--alerta {
  border-color: var(--warn-line);
  background: var(--warn-soft);
}
.metric__label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: rgb(var(--on-surface-variant));
}
.metric__value {
  font-size: 26px; font-weight: 700; line-height: 1.1; color: rgb(var(--on-surface));
}
.metric__value--sm { font-size: 15px; font-weight: 600; }
.metric__unit { font-size: 14px; font-weight: 500; color: rgb(var(--on-surface-variant)); }
.metric--alerta .metric__value { color: var(--warn-text); }
.metric__foot { font-size: 11px; color: rgb(var(--on-surface-variant)); margin-top: 0.1rem; }
.metric__chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.2rem 0; }
.metric__more { margin-top: 0.35rem; font-size: 12px; }
.metric__more > summary { cursor: pointer; color: rgb(var(--primary)); font-weight: 500; }
.metric__more ul { margin: 0.35rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.metric__more li { color: rgb(var(--on-surface)); }

/* ============================================================================
   6. TOAST / MODAL
   ========================================================================== */
.toast {
  position: fixed; bottom: 1rem; right: 1rem; z-index: 80;
  background: rgb(var(--surface-container-high)); border: 1px solid var(--border);
  color: rgb(var(--on-surface)); border-radius: 10px; padding: 10px 14px; font-size: 13px;
  box-shadow: var(--shadow-lg);
  animation: toast-in .2s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }
.modal-overlay {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: var(--overlay); backdrop-filter: blur(2px); padding: 1rem;
  animation: fade-in .15s ease-out;
}
@keyframes fade-in { from { opacity: 0; } }
.modal-box {
  background: rgb(var(--surface-container-high)); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.25rem; width: 100%; max-width: 28rem;
  box-shadow: var(--shadow-lg);
  animation: modal-in .18s cubic-bezier(.16,1,.3,1);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal-box h3 { margin: 0 0 1rem; font-size: 16px; font-weight: 600; color: rgb(var(--on-surface)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================================
   7. BPMN-JS (canvas "papel" claro)
   ========================================================================== */
#bpmn-canvas,
#bpmn-canvas .djs-container,
#bpmn-canvas .bjs-container,
#bpmn-canvas svg { background-color: #ffffff !important; }
#bpmn-canvas .djs-palette,
#bpmn-canvas .djs-context-pad .entry { color: #374151; }
#bpmn-canvas .djs-palette { top: 12px; left: 12px; }
#bpmn-canvas .djs-palette .separator { margin: 4px 0; }
.bpmn-canvas-pattern {
  background-color: #f8f9fa;
  background-image: radial-gradient(#d1d5db 1px, transparent 1px);
  background-size: 20px 20px;
}

/* modo builder: tela cheia */
.page-builder .app-sidebar { display: none; }
.page-builder .app-content { min-width: 0; }

/* ============================================================================
   8. .prose — Markdown renderizado (relatorio de melhorias TO-BE)
   ========================================================================== */
.prose { color: rgb(var(--on-surface)); font-size: 13.5px; line-height: 1.65; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h1, .prose h2, .prose h3, .prose h4 {
  color: rgb(var(--on-surface)); font-weight: 650; line-height: 1.3;
  margin: 1.4em 0 0.5em;
}
.prose h1 { font-size: 1.35em; }
.prose h2 {
  font-size: 1.15em; padding-bottom: 0.25em;
  border-bottom: 1px solid rgb(var(--outline-variant));
}
.prose h3 { font-size: 1.03em; }
.prose p { margin: 0.6em 0; }
.prose ul, .prose ol { margin: 0.6em 0; padding-left: 1.5em; }
.prose li { margin: 0.28em 0; }
.prose li > ul, .prose li > ol { margin: 0.2em 0; }
.prose a { color: rgb(var(--primary)); text-decoration: underline; }
.prose strong { font-weight: 650; color: rgb(var(--on-surface)); }
.prose code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: rgb(var(--surface-container-high)); border-radius: 4px;
  padding: 0.1em 0.35em;
}
.prose pre {
  background: rgb(var(--surface-container-high)); border-radius: 8px;
  padding: 0.8em 1em; overflow-x: auto; margin: 0.8em 0;
}
.prose pre code { background: none; padding: 0; font-size: 0.85em; }
.prose blockquote {
  margin: 0.8em 0; padding: 0.1em 1em;
  border-left: 3px solid rgb(var(--outline-variant));
  color: rgb(var(--on-surface-variant));
}
.prose hr { border: 0; border-top: 1px solid rgb(var(--outline-variant)); margin: 1.4em 0; }
.prose__tablewrap { overflow-x: auto; margin: 0.9em 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.prose th, .prose td {
  border: 1px solid rgb(var(--outline-variant));
  padding: 0.45em 0.7em; text-align: left; vertical-align: top;
}
.prose thead th {
  background: rgb(var(--surface-container-high));
  font-weight: 650; white-space: nowrap;
}
.prose tbody tr:nth-child(even) { background: rgb(var(--on-surface) / 0.03); }
/* ============================================================================
   Fluxo do processo em 4 etapas (Entrevista, Análise, BPMN, Melhorias)
   ========================================================================== */
.etapas { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 1.25rem; padding: 0; overflow: hidden; }
.etapa { flex: 1 1 13rem; min-width: 0; border-bottom: 3px solid rgb(var(--outline-variant)); }
.etapa--done { border-bottom-color: var(--success); }
.etapa--current { border-bottom-color: rgb(var(--primary)); background: rgb(var(--primary-container) / 0.45); }
.etapa__link {
  display: flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0.8rem 1rem;
  color: inherit; text-decoration: none;
}
a.etapa__link:hover { background: rgb(var(--primary-container) / 0.45); }
a.etapa__link:focus-visible { outline: 2px solid rgb(var(--primary)); outline-offset: -2px; }
.etapa__num {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2rem;
  width: 2rem; height: 2rem; border-radius: 50%; font-weight: 700; font-size: 13px;
  border: 2px solid rgb(var(--outline)); color: rgb(var(--on-surface-variant)); background: rgb(var(--surface));
}
.etapa__num .material-symbols-outlined { font-size: 18px; }
.etapa--done .etapa__num { background: var(--success); border-color: var(--success); color: #fff; }
.etapa--current .etapa__num { background: rgb(var(--primary)); border-color: rgb(var(--primary)); color: rgb(var(--on-primary)); }
.etapa--livre .etapa__num { border-color: rgb(var(--primary)); color: rgb(var(--on-primary-container)); }
.etapa__txt { display: flex; flex-direction: column; min-width: 0; }
.etapa__nome { font-weight: 600; font-size: 14px; }
.etapa__st { font-size: 12px; color: rgb(var(--on-surface-variant)); }
.etapa--bloq .etapa__nome { color: rgb(var(--on-surface-variant)); }

/* versão compacta: dentro da barra de ferramentas do BPMN (tela cheia) */
.etapas--compacto { flex-wrap: nowrap; margin: 0; gap: 2px; align-items: center; overflow: visible; }
.etapas--compacto .etapa { flex: 0 0 auto; border-bottom: 0; background: none; border-radius: 999px; }
.etapas--compacto .etapa { display: flex; align-items: center; }
.etapas--compacto .etapa--current { background: none; }
.etapas--compacto .etapa--current .etapa__link { background: rgb(var(--primary-container)); }
.etapas--compacto .etapa__link { min-height: 0; padding: 0.25rem 0.7rem 0.25rem 0.35rem; gap: 0.45rem; border-radius: 999px; }
.etapas--compacto .etapa__num { width: 1.5rem; height: 1.5rem; flex-basis: 1.5rem; font-size: 12px; }
.etapas--compacto .etapa__num .material-symbols-outlined { font-size: 15px; }
.etapas--compacto .etapa__nome { font-size: 13px; }
.etapas--compacto .etapa + .etapa::before {
  content: ""; width: 14px; height: 2px; background: rgb(var(--outline-variant)); margin-right: 2px;
}
.etapas--compacto .etapa--done + .etapa::before { background: var(--success); }
@media (max-width: 900px) { .etapas--compacto .etapa__nome { display: none; } }

.banner-etapa {
  display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1.25rem;
  padding: 0.85rem 1rem; border-radius: 12px; font-size: 14px;
  background: rgb(var(--primary-container)); color: rgb(var(--on-surface));
}
.banner-etapa .material-symbols-outlined { color: rgb(var(--on-primary-container)); }

.fluxo-rodape {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between;
  margin-top: 1.5rem; padding: 0.85rem 1.1rem;
}
.fluxo-rodape--compacto {
  margin: 0; background: rgb(var(--surface-container)); border-top: 1px solid rgb(var(--outline-variant));
  padding: 0.5rem 0.75rem;
}
.fluxo-rodape__acao { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.fluxo-rodape__dica { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 13px; color: rgb(var(--on-surface-variant)); }
.fluxo-rodape__dica .material-symbols-outlined { font-size: 18px; }
.fluxo-rodape .btn-primary, .fluxo-rodape .btn-ghost { min-height: 44px; }
.fluxo-rodape .btn-primary:disabled { background: rgb(var(--surface-container-high)); color: rgb(var(--on-surface-variant)); cursor: not-allowed; filter: none; }

/* lista de processos: progresso por card */
.progresso { display: flex; gap: 4px; }
.progresso__seg { flex: 1; height: 8px; border-radius: 4px; background: rgb(var(--outline-variant)); }
.progresso__seg--ok { background: var(--success); }
.progresso__seg--atual { background: rgb(var(--primary)); }
.progresso-pill {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; white-space: nowrap;
  padding: 2px 10px; border-radius: 999px; background: rgb(var(--primary-container)); color: rgb(var(--on-primary-container));
}
.progresso-pill--novo { background: rgb(var(--surface-container-high)); color: rgb(var(--on-surface-variant)); }
.progresso-pill--ok { background: var(--success-soft); color: var(--success-text); }

/* Análise: escolha entre desmembrar e desenhar de forma única */
.escolha-fluxo {
  display: flex; flex-direction: column; gap: 0.75rem; margin: 0;
  padding: 1rem; border-radius: 12px; border: 1px solid rgb(var(--primary));
  background: rgb(var(--primary-container) / 0.45);
}
.escolha-fluxo legend { font-weight: 700; padding: 0 0.5rem; }
.escolha-fluxo__opcoes { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.opcao-modo {
  flex: 1 1 15rem; display: flex; flex-direction: column; gap: 0.6rem; cursor: pointer;
  padding: 0.75rem 0.9rem; border-radius: 10px; background: rgb(var(--surface));
  border: 1px solid rgb(var(--outline-variant));
}
.opcao-modo:has(input:checked) { border-color: rgb(var(--primary)); background: rgb(var(--primary-container) / 0.45); }
.opcao-modo:has(input:focus-visible) { outline: 2px solid rgb(var(--primary)); outline-offset: 2px; }
.opcao-modo__topo { display: flex; gap: 0.6rem; align-items: flex-start; }
.opcao-modo input { margin-top: 0.2rem; width: 18px; height: 18px; accent-color: rgb(var(--primary)); }
.mini-fluxo { display: flex; align-items: center; gap: 5px; }
.mini-fluxo i { display: block; flex: none; border: 2px solid rgb(var(--on-surface)); }
.mini-fluxo .mf-ev { width: 14px; height: 14px; border-radius: 50%; }
.mini-fluxo .mf-fim { width: 14px; height: 14px; border-radius: 50%; border-width: 4px; }
.mini-fluxo .mf-tk { width: 36px; height: 22px; border-radius: 5px; }
.mini-fluxo .mf-ln { flex: 1; height: 0; border-width: 1px 0 0 0; }