/* ============================================================
   CASTELLUM FINANCIAL BPO/BTO — Sistema de Design
   Tokens, componentes e utilitários
   
   Uso: importe este arquivo em qualquer projeto Castellum
   <link rel="stylesheet" href="castellum-system.css">
   
   Fontes da marca (servidas localmente pelo landing.css nesta distribuição):
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
   ============================================================ */

/* ════════════════════════════════════════════════════════════════
   CASTELLUM FINANCIAL BPO · DESIGN SYSTEM v1.0
   Unidade: Soluções Integradas (BPO / BTO)
   Acento: azul-petróleo — dourado reservado à Contabilidade
   Tipografia: Montserrat (display) + Inter (corpo)
   Proporção: 70% neutro / 20% cor de unidade / 10% semântica
   ════════════════════════════════════════════════════════════════ */


/* ── 1. TOKENS ─────────────────────────────────────────────────── */

:root {
  /* Paleta institucional */
  --black:        #111111;
  --white:        #FFFFFF;
  --off-white:    #F5F5F3;
  --petrol:       #3E505A;
  --petrol-08:    rgba(62, 80, 90, .08);
  --petrol-15:    rgba(62, 80, 90, .15);
  --gray-tech:    #A7ADB1;
  --muted:        #6B7280;
  --border:       #E4E4E4;
  --border-mid:   #CACDD1;

  /* Semântica operacional */
  --done:         #2D6A4F;
  --done-bg:      rgba(45, 106, 79, .09);
  --warn:         #92400E;
  --warn-bg:      #FEF3C7;
  --alert:        #991B1B;
  --alert-bg:     #FEE2E2;

  /* Tipografia */
  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Espaçamentos */
  --s1: 4px;    --s2: 8px;    --s3: 12px;   --s4: 16px;
  --s5: 20px;   --s6: 24px;   --s8: 32px;   --s10: 40px;
  --s12: 48px;  --s16: 64px;

  /* Radii — sharp por definição */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);

  /* Superfícies — light mode (padrão) */
  --surface:        #FFFFFF;
  --surface-sub:    #F6F7F8;
  --surface-raised: #FFFFFF;
  --ground:         #F0F1F3;
  --text-primary:   #111111;
  --text-secondary: #6B7280;
  --text-tertiary:  #A3A9B1;
  --border-color:   #E2E4E8;
  --border-mid:     #C8CDD4;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
}

/* ── Dark mode: preto real, sem viés de cor ───────────────────── */
/* A diferença entre premium e genérico: ground #080808, zero hue no neutro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:        #141414;
    --surface-sub:    #0E0E0E;
    --surface-raised: #1C1C1C;
    --ground:         #080808;
    --text-primary:   #F0F0EF;
    --text-secondary: #868686;
    --text-tertiary:  #4A4A4A;
    --border-color:   #1E1E1E;
    --border-mid:     #282828;
    --petrol:         #6A8FA0;
    --petrol-08:      rgba(106,143,160,.10);
    --petrol-15:      rgba(106,143,160,.18);
    --done:           #3D8B68;
    --done-bg:        rgba(61,139,104,.10);
    --warn-bg:        rgba(146,64,14,.12);
    --alert-bg:       rgba(153,27,27,.12);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  --surface:        #141414;
  --surface-sub:    #0E0E0E;
  --surface-raised: #1C1C1C;
  --ground:         #080808;
  --text-primary:   #F0F0EF;
  --text-secondary: #868686;
  --text-tertiary:  #4A4A4A;
  --border-color:   #1E1E1E;
  --border-mid:     #282828;
  --petrol:         #6A8FA0;
  --petrol-08:      rgba(106,143,160,.10);
  --petrol-15:      rgba(106,143,160,.18);
  --done:           #3D8B68;
  --done-bg:        rgba(61,139,104,.10);
  --warn-bg:        rgba(146,64,14,.12);
  --alert-bg:       rgba(153,27,27,.12);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.4);
}
:root[data-theme="light"] {
  --surface:        #FFFFFF;
  --surface-sub:    #F6F7F8;
  --surface-raised: #FFFFFF;
  --ground:         #F0F1F3;
  --text-primary:   #111111;
  --text-secondary: #6B7280;
  --text-tertiary:  #A3A9B1;
  --border-color:   #E2E4E8;
  --border-mid:     #C8CDD4;
  --petrol:         #3E505A;
  --petrol-08:      rgba(62,80,90,.08);
  --petrol-15:      rgba(62,80,90,.15);
  --done:           #2D6A4F;
  --done-bg:        rgba(45,106,79,.09);
  --warn-bg:        #FEF3C7;
  --alert-bg:       #FEE2E2;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
}


/* ── 2. RESET ──────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--ground);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }


/* ── 3. TIPOGRAFIA ─────────────────────────────────────────────── */

/* Scale de display — Montserrat */
.t-display-xl {
  font-family: var(--font-display);
  font-size: 52px; font-weight: 800;
  line-height: 1; letter-spacing: -.5px;
  color: var(--text-primary);
}
.t-display-lg {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 800;
  line-height: 1.1; letter-spacing: -.3px;
  color: var(--text-primary);
}
.t-display-md {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
}
.t-display-sm {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800;
  line-height: 1.2;
  color: var(--text-primary);
}

/* Headings */
.t-h1 { font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.3; }
.t-h2 { font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.35; }
.t-h3 { font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.4; }
.t-h4 { font-family: var(--font-display); font-size: 13px; font-weight: 700; line-height: 1.4; }

/* Label — micro-tipografia de área (assinatura do sistema) */
.t-label {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--text-tertiary);
}
.t-label-md {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-secondary);
}
.t-label-petrol {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--petrol);
}

/* Body — Inter */
.t-body-lg { font-size: 15px; line-height: 1.7; }
.t-body    { font-size: 14px; line-height: 1.65; }
.t-body-sm { font-size: 13px; line-height: 1.6; }
.t-caption { font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.t-micro   { font-size: 11px; line-height: 1.4; color: var(--text-tertiary); }

/* Modificadores de cor */
.t-primary  { color: var(--text-primary); }
.t-secondary{ color: var(--text-secondary); }
.t-tertiary { color: var(--text-tertiary); }
.t-petrol   { color: var(--petrol); }
.t-done     { color: var(--done); }
.t-warn     { color: var(--warn); }
.t-alert    { color: var(--alert); }
.t-white    { color: #FFFFFF; }
.t-white-70 { color: rgba(255,255,255,.7); }
.t-white-50 { color: rgba(255,255,255,.5); }

/* Numérico tabulado */
.t-tabular  { font-variant-numeric: tabular-nums; }
.t-mono     { font-family: 'SF Mono', 'Fira Code', monospace; font-size: .92em; }

/* Wrap de título */
h1, h2, h3, h4 { text-wrap: balance; }


/* ── 4. LAYOUT ─────────────────────────────────────────────────── */

.container       { max-width: 1080px; margin: 0 auto; padding-inline: var(--s6); }
.container-wide  { max-width: 1280px; margin: 0 auto; padding-inline: var(--s6); }
.container-tight { max-width: 720px;  margin: 0 auto; padding-inline: var(--s6); }

/* Grids */
.grid-2   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.grid-3   { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.grid-4   { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s6); }
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s6); }

@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4,
  .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; }
}
@media (max-width: 960px) and (min-width: 721px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
}

/* Main content */
main { max-width: 1080px; margin: 0 auto; padding: var(--s10) var(--s6) var(--s16); }
.section { display: none; }
.section.active { display: block; animation: fadein .22s ease; }
@keyframes fadein {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── 5. HEADER ─────────────────────────────────────────────────── */

.header {
  background: var(--black);
  height: 56px;
  padding: 0 var(--s10);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
  /* easter egg: micro-stripe de unidade */
  border-bottom: 1px solid #1E2A30;
}
/* Stripe lateral da unidade BPO — intencional, discreto */
.header::before {
  content: '';
  position: absolute; left: 0; top: 0;
  width: 3px; height: 100%;
  background: var(--petrol);
}
.header-brand {
  display: flex; align-items: center; gap: var(--s3);
}
.header-brand-name {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 800;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--white);
}
.header-divider {
  width: 1px; height: 14px;
  background: #2A2A2A;
}
.header-client {
  font-size: 12px; color: var(--gray-tech);
  letter-spacing: .3px;
}
.header-meta {
  display: flex; align-items: center; gap: var(--s4);
}
.header-status {
  display: flex; align-items: center;
  gap: var(--s2); font-size: 11px; color: var(--gray-tech);
  letter-spacing: .3px;
}
.header-dot {
  width: 6px; height: 6px;
  background: #4CAF50; border-radius: 50%;
}
/* Versão proposta — sem nome de cliente */
.header-proposal {
  background: var(--black);
  height: 56px; padding: 0 var(--s10);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #1E2A30;
}
.header-proposal::before {
  content: '';
  position: absolute; left: 0; top: 0;
  width: 3px; height: 100%;
  background: var(--petrol);
}


/* ── 6. NAVEGAÇÃO ──────────────────────────────────────────────── */

.nav-tabs {
  background: var(--surface);
  border-bottom: 1px solid var(--border-color);
  padding: 0 var(--s10);
  display: flex; overflow-x: auto;
  position: sticky; top: 56px; z-index: 90;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tab {
  padding: var(--s4) var(--s5);
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: color .18s, border-color .18s;
  user-select: none;
}
.nav-tab:hover { color: var(--text-primary); }
.nav-tab.active {
  color: var(--text-primary); font-weight: 600;
  border-bottom-color: var(--petrol);
}


/* ── 7. SECTION LABELS / PAGE HEADERS ─────────────────────────── */

/* Label de seção — separação de área */
.section-label {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--s4);
}
/* Separador com linha */
.section-label-rule {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--s4); margin-top: var(--s8);
  display: flex; align-items: center; gap: var(--s3);
}
.section-label-rule::after {
  content: '';
  flex: 1; height: 1px;
  background: var(--border-color);
}
/* Cabeçalho de página */
.page-header {
  margin-bottom: var(--s8);
}
.page-header .section-label {
  margin-bottom: var(--s2);
}
.page-header-title {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 800;
  color: var(--text-primary); line-height: 1.15;
}
.page-header-sub {
  font-size: 14px; color: var(--text-secondary);
  margin-top: var(--s2); line-height: 1.65;
  max-width: 560px;
}


/* ── 8. CARDS ──────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  padding: var(--s6);
}
.card-sm  { padding: var(--s4) var(--s5); }
.card-lg  { padding: var(--s8) var(--s10); }

/* Variantes */
.card-highlight {
  border-color: var(--petrol);
  border-width: 1.5px;
}
.card-dark {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}
.card-subtle {
  background: var(--surface-sub);
  border-color: transparent;
}
.card-outline {
  background: transparent;
  border: 1px solid var(--border-color);
}

/* Accents laterais — easter egg de área */
.card-accent-left { border-left: 3px solid var(--petrol); }
.card-accent-top  { border-top: 3px solid var(--petrol); }

/* Header interno de card */
.card-header {
  padding: var(--s3) var(--s6);
  border-bottom: 1px solid var(--border-color);
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-secondary);
}
.card-body   { padding: var(--s6); }
.card-footer {
  padding: var(--s3) var(--s6);
  border-top: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--s3);
}


/* ── 9. KPI / STAT TILES ───────────────────────────────────────── */

.kpi {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  padding: var(--s5) var(--s6);
}
.kpi-num {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi-num-xl { font-size: 52px; }
.kpi-num-sm { font-size: 26px; }
.kpi-unit {
  font-size: 18px; font-weight: 400;
  color: var(--text-secondary);
}
.kpi-label {
  font-size: 12px; color: var(--text-secondary);
  margin-top: var(--s2);
}
.kpi-detail {
  font-size: 11px; color: var(--text-tertiary);
  margin-top: var(--s1); line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.kpi-trend {
  font-size: 11px; font-weight: 600;
  margin-top: var(--s3);
  display: flex; align-items: center; gap: var(--s1);
}
.kpi-trend.up   { color: var(--done); }
.kpi-trend.down { color: var(--alert); }


/* ── 10. HERO ESCURO ───────────────────────────────────────────── */

.hero-dark {
  background: var(--black);
  border-radius: var(--r-md);
  padding: var(--s10);
  display: flex; align-items: center;
  justify-content: space-between;
  gap: var(--s8); flex-wrap: wrap;
  position: relative; overflow: hidden;
}
/* Easter egg: micro-grid de fundo */
.hero-dark::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(62,80,90,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62,80,90,.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.hero-dark-value {
  font-family: var(--font-display);
  font-size: 52px; font-weight: 800;
  color: #FFFFFF; line-height: 1;
  font-variant-numeric: tabular-nums;
  position: relative;
}
.hero-dark-value .unit {
  font-size: 22px; font-weight: 400;
  color: var(--gray-tech);
}
.hero-dark-sub {
  font-size: 13px; color: var(--gray-tech);
  margin-top: var(--s2);
  position: relative;
}
.hero-dark-content {
  max-width: 360px;
  font-size: 14px; color: rgba(255,255,255,.6);
  line-height: 1.7;
  position: relative;
}


/* ── 11. PHASE TRACKER ─────────────────────────────────────────── */

.phase-wrap {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  padding: var(--s8) var(--s6);
  overflow-x: auto;
}
.phase-track {
  display: flex; align-items: flex-start;
  gap: 0; min-width: 480px;
}
.phase-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: var(--s3); position: relative;
}
.phase-item:not(:last-child)::after {
  content: '';
  position: absolute; top: 15px; left: 50%;
  width: 100%; height: 2px;
  background: var(--border-color); z-index: 0;
}
.phase-item.done:not(:last-child)::after { background: var(--done); }
.phase-circle {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  background: var(--border-color); color: var(--text-secondary);
  position: relative; z-index: 1; flex-shrink: 0;
  transition: background .2s;
}
.phase-item.done .phase-circle {
  background: var(--done); color: #fff;
}
.phase-item.current .phase-circle {
  background: var(--petrol); color: #fff;
  box-shadow: 0 0 0 4px var(--petrol-15);
  animation: pulse-ring 2.2s ease infinite;
}
@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 4px var(--petrol-15); }
  50%       { box-shadow: 0 0 0 8px rgba(62,80,90,.04); }
}
.phase-name {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  letter-spacing: .4px; text-align: center;
  line-height: 1.4; color: var(--text-secondary);
}
.phase-item.done    .phase-name { color: var(--done); }
.phase-item.current .phase-name { color: var(--petrol); font-weight: 700; }
.phase-date {
  font-size: 10px; color: var(--text-tertiary);
  letter-spacing: .3px;
}


/* ── 12. INFO ROWS ─────────────────────────────────────────────── */

.info-block {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  overflow: hidden;
}
.info-row {
  display: flex; align-items: flex-start;
  gap: var(--s4); padding: var(--s4) var(--s6);
  border-bottom: 1px solid var(--border-color);
}
.info-row:last-child { border-bottom: none; }
.info-label {
  font-size: 13px; color: var(--text-secondary);
  min-width: 180px; flex-shrink: 0; padding-top: 1px;
}
.info-value {
  font-size: 13px; color: var(--text-primary);
  font-weight: 500; flex: 1;
  font-variant-numeric: tabular-nums;
}
.info-value a { color: var(--petrol); }
.info-value a:hover { text-decoration: underline; }


/* ── 13. PILLS / STATUS ────────────────────────────────────────── */

.pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  white-space: nowrap; line-height: 1.4;
}
.pill-petrol  { background: var(--petrol-08);  color: var(--petrol); }
.pill-done    { background: var(--done-bg);    color: var(--done); }
.pill-warn    { background: var(--warn-bg);    color: var(--warn); }
.pill-alert   { background: var(--alert-bg);   color: var(--alert); }
.pill-gray    {
  background: var(--surface-sub);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.pill-black   { background: var(--black); color: #fff; }
/* Pill grande — para dashboards */
.pill-lg {
  padding: 6px 14px;
  font-size: 11px; letter-spacing: 1.2px;
}


/* ── 14. BOTÕES ────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center;
  justify-content: center; gap: var(--s2);
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  border-radius: var(--r-sm); cursor: pointer;
  border: none; text-decoration: none;
  transition: background .18s, opacity .18s, border-color .18s, color .18s;
  white-space: nowrap;
  padding: 11px var(--s5);
  line-height: 1;
}
/* Primário */
.btn-primary { background: var(--black); color: #fff; }
.btn-primary:hover { background: var(--petrol); }

/* BPO (acento de unidade) */
.btn-petrol  { background: var(--petrol); color: #fff; }
.btn-petrol:hover { opacity: .85; }

/* Outline neutro */
.btn-outline {
  background: transparent; color: var(--text-primary);
  border: 1.5px solid var(--border-mid);
}
.btn-outline:hover { border-color: var(--text-primary); }

/* Outline de unidade */
.btn-outline-petrol {
  background: transparent; color: var(--petrol);
  border: 1.5px solid var(--petrol);
}
.btn-outline-petrol:hover { background: var(--petrol-08); }

/* Ghost */
.btn-ghost {
  background: transparent; color: var(--text-secondary);
  border: 1.5px solid transparent;
}
.btn-ghost:hover { color: var(--text-primary); border-color: var(--border-color); }

/* Ghost dark — para uso sobre fundo preto */
.btn-ghost-dark {
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.8);
  border: 1.5px solid rgba(255,255,255,.12);
}
.btn-ghost-dark:hover { background: rgba(255,255,255,.12); }

/* Tamanhos */
.btn-sm { padding: 7px var(--s3); font-size: 10px; letter-spacing: 1px; }
.btn-lg { padding: var(--s4) var(--s8); font-size: 12px; letter-spacing: 1.5px; }


/* ── 15. ALERTAS ───────────────────────────────────────────────── */

.alert {
  border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
  display: flex; align-items: flex-start; gap: var(--s3);
  font-size: 13px; line-height: 1.55;
}
.alert-icon    { flex-shrink: 0; margin-top: 2px; font-size: 14px; }
.alert-title   { font-weight: 600; margin-bottom: var(--s1); }

.alert-info    {
  background: var(--petrol-08);
  color: var(--petrol);
  border-left: 3px solid var(--petrol);
}
.alert-done    {
  background: var(--done-bg);
  color: var(--done);
  border-left: 3px solid var(--done);
}
.alert-warn    {
  background: var(--warn-bg);
  color: var(--warn);
  border-left: 3px solid var(--warn);
}
.alert-danger  {
  background: var(--alert-bg);
  color: var(--alert);
  border-left: 3px solid var(--alert);
}


/* ── 16. TABELAS ───────────────────────────────────────────────── */

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  overflow-x: auto;
}
.table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.table th {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-secondary);
  padding: var(--s3) var(--s5);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
.table td {
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--surface-sub); }
.table td.t-muted { color: var(--text-secondary); }


/* ── 17. ESCOPO / CHECKLIST ────────────────────────────────────── */

.escopo-list {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  overflow: hidden;
}
.escopo-item {
  display: flex; align-items: flex-start;
  gap: var(--s4); padding: var(--s4) var(--s6);
  border-bottom: 1px solid var(--border-color);
}
.escopo-item:last-child { border-bottom: none; }
.escopo-dot {
  width: 5px; height: 5px;
  background: var(--petrol); border-radius: 50%;
  flex-shrink: 0; margin-top: 8px;
}
.escopo-title {
  font-size: 14px; font-weight: 600;
  color: var(--text-primary);
}
.escopo-desc {
  font-size: 13px; color: var(--text-secondary);
  margin-top: 3px; line-height: 1.5;
}


/* ── 18. COPY / DISPLAY BOX ────────────────────────────────────── */

.copy-box {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600;
  color: var(--petrol);
  background: var(--surface-sub);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-color);
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--s2);
  word-break: break-all; cursor: pointer;
  transition: background .15s;
}
.copy-box:hover { background: var(--petrol-08); }
.copy-box-hint {
  font-size: 10px; color: var(--text-tertiary);
  flex-shrink: 0; letter-spacing: .5px;
  text-transform: uppercase; white-space: nowrap;
}


/* ── 19. DIVIDERS ──────────────────────────────────────────────── */

.divider    { border: none; border-top: 1px solid var(--border-color); }
.divider-sm { border: none; border-top: 1px solid var(--border-color); }

/* Espaçamentos de divider */
.divider-space    { margin-block: var(--s8); }
.divider-space-sm { margin-block: var(--s4); }


/* ── 20. UTILITIES ─────────────────────────────────────────────── */

/* Display */
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.grid         { display: grid; }
.hidden       { display: none !important; }
.block        { display: block; }

/* Alinhamento */
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-end   { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.wrap          { flex-wrap: wrap; }
.flex-1        { flex: 1; }
.shrink-0      { flex-shrink: 0; }

/* Gaps */
.gap-1 { gap: var(--s1); } .gap-2 { gap: var(--s2); }
.gap-3 { gap: var(--s3); } .gap-4 { gap: var(--s4); }
.gap-5 { gap: var(--s5); } .gap-6 { gap: var(--s6); }

/* Margens top */
.mt-1 { margin-top: var(--s1); } .mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); }
.mt-6 { margin-top: var(--s6); } .mt-8 { margin-top: var(--s8); }

/* Margens bottom */
.mb-2 { margin-bottom: var(--s2); } .mb-4 { margin-bottom: var(--s4); }
.mb-6 { margin-bottom: var(--s6); } .mb-8 { margin-bottom: var(--s8); }

/* Dimensões */
.w-full   { width: 100%; }
.min-w-0  { min-width: 0; }

/* Texto */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.font-600    { font-weight: 600; }
.font-700    { font-weight: 700; }
.font-800    { font-weight: 800; }
.uppercase   { text-transform: uppercase; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bordas */
.rounded-sm { border-radius: var(--r-sm); }
.rounded-md { border-radius: var(--r-md); }
.rounded-lg { border-radius: var(--r-lg); }
.rounded-full { border-radius: 999px; }

/* Superfícies */
.bg-surface { background: var(--surface); }
.bg-sub     { background: var(--surface-sub); }
.bg-black   { background: var(--black); }
.bg-petrol  { background: var(--petrol); }
.border-default { border: 1px solid var(--border-color); }

/* Overflow */
.overflow-hidden  { overflow: hidden; }
.overflow-x-auto  { overflow-x: auto; }

/* ════════════════════════════════════════════════════════════════
   FIM DO DESIGN SYSTEM
   ════════════════════════════════════════════════════════════════ */