/* =====================================================================
 * CIOT HUB · DESIGN SYSTEM
 * Versão: 1.0 — Fase 1 (Foundation)
 * Mantenedor: Saydo
 *
 * Este arquivo define a fundação visual do CIOT Hub:
 *   - Tokens semânticos (cores, espaçamento, tipografia, sombras, raios)
 *   - Componentes-base refinados (botões, inputs, badges, alerts, cards, stepper)
 *   - Densidade configurável via body[data-density="compact"]
 *
 * Ordem de carregamento esperada em base.html:
 *   1. Bootstrap 5.3.3
 *   2. Bootstrap Icons 1.11.3
 *   3. design-system.css (este arquivo)        ← novo
 *   4. custom.css                              ← legado, mantém precedência
 *
 * Restrições não-negociáveis respeitadas:
 *   - Cores institucionais Saydo #012169 e #76BC43
 *   - Compatível com Bootstrap 5 (não substitui, complementa)
 *   - Sem dependências JS adicionais
 *   - Aliases preservados: --ciot-* continuam funcionando
 *   - .btn-dark continua válido (alias para .btn-institutional)
 *   - Documento PDF impresso intocado (regulamentado pela ANTT)
 * ===================================================================== */


/* =====================================================================
 * 1. FONTES — Inter (UI) + JetBrains Mono (números)
 * ---------------------------------------------------------------------
 * Carregadas via jsdelivr (mesma CDN do Bootstrap, sem hop adicional).
 * font-display: swap → mostra texto com fallback enquanto baixa.
 * Em conexão fraca de campo, system stack assume sem bloquear render.
 * ===================================================================== */

@import url('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.18/index.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@5.0.21/index.css');


/* =====================================================================
 * 2. TOKENS DE DESIGN
 * ===================================================================== */

:root {

  /* -------------------------------------------------------------------
   * 2.1 MARCA — cores institucionais Saydo
   * Aliases do --ciot-* mantidos para compatibilidade com custom.css.
   * Recomendado para código novo: usar --color-brand-* e --color-action-*.
   * ------------------------------------------------------------------- */

  /* Azul institucional (navbar, badges, headers, foco) */
  --color-brand-primary:        #012169;
  --color-brand-primary-hover:  #001a52;
  --color-brand-primary-active: #00134a;
  --color-brand-primary-soft:   rgba(1, 33, 105, 0.08);
  --color-brand-primary-ring:   rgba(1, 33, 105, 0.18);

  /* Verde corporativo (ação primária — "Emitir", "Salvar", confirmações) */
  --color-action-primary:        #76BC43;
  --color-action-primary-hover:  #5fa036;
  --color-action-primary-active: #4d8a27;
  --color-action-primary-soft:   rgba(118, 188, 67, 0.10);
  --color-action-primary-ring:   rgba(1, 33, 105, 0.35); /* ring SEMPRE azul, mesmo em botão verde */

  /* -------------------------------------------------------------------
   * 2.2 NEUTROS — cinzas frios (levemente azulados) harmonizam com #012169.
   * Inspirado na escala GOV.BR DS e Tailwind slate.
   * ------------------------------------------------------------------- */

  --color-gray-50:  #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e5ebf2;
  --color-gray-300: #c7d2e0;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;

  /* -------------------------------------------------------------------
   * 2.3 SEMÂNTICAS — feedback de estado.
   * Cada conceito tem 4 stops: 50 (bg sutil), 200 (borda), 600 (ícone/borda forte), 800 (texto).
   * ------------------------------------------------------------------- */

  /* Success — verde (mantém harmonia com #76BC43 mas é um verde semântico próprio) */
  --color-success-50:  #eaf3de;
  --color-success-200: #c0dd97;
  --color-success-600: #639922;
  --color-success-800: #27500a;

  /* Warning — âmbar (substitui o amarelo Bootstrap puro) */
  --color-warning-50:  #faeeda;
  --color-warning-200: #fac775;
  --color-warning-600: #ba7517;
  --color-warning-800: #633806;

  /* Danger — vermelho */
  --color-danger-50:  #fcebeb;
  --color-danger-200: #f7c1c1;
  --color-danger-600: #a32d2d;
  --color-danger-800: #501313;

  /* Info — azul informativo (distinto do brand, mais claro) */
  --color-info-50:  #e6f1fb;
  --color-info-200: #b5d4f4;
  --color-info-600: #185fa5;
  --color-info-800: #042c53;

  /* -------------------------------------------------------------------
   * 2.4 SUPERFÍCIES — backgrounds nomeados (preparados para dark mode futuro)
   * ------------------------------------------------------------------- */

  --surface-base:      #ffffff;             /* fundo de cards, modais */
  --surface-raised:    #ffffff;             /* mesma cor, diferenciado por sombra */
  --surface-sunken:    var(--color-gray-50); /* fundo de página */
  --surface-subtle:    var(--color-gray-100);/* hover/zebra */
  --surface-divider:   var(--color-gray-200);

  /* -------------------------------------------------------------------
   * 2.5 TEXTO — hierarquia semântica
   * ------------------------------------------------------------------- */

  --color-text-primary:   var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-tertiary:  var(--color-gray-500);
  --color-text-muted:     var(--color-gray-400);
  --color-text-on-brand:  #ffffff;
  --color-text-on-action: #ffffff;
  --color-text-link:      var(--color-brand-primary);
  --color-text-link-hover: var(--color-brand-primary-hover);

  /* -------------------------------------------------------------------
   * 2.6 BORDAS
   * ------------------------------------------------------------------- */

  --color-border-subtle:    var(--color-gray-200);  /* bordas decorativas */
  --color-border-default:   var(--color-gray-300);  /* inputs, botões outline */
  --color-border-strong:    var(--color-gray-400);  /* hover de inputs */
  --color-border-focus:     var(--color-brand-primary);

  /* -------------------------------------------------------------------
   * 2.7 ESPAÇAMENTO — escala base 4
   * Uso: padding: var(--space-3) var(--space-4);
   * ------------------------------------------------------------------- */

  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;

  /* -------------------------------------------------------------------
   * 2.8 TIPOGRAFIA
   * ------------------------------------------------------------------- */

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas,
               'Courier New', monospace;

  /* Escala — todos em rem para respeitar zoom do navegador */
  --font-size-xs:    0.75rem;   /* 12px — labels, captions, badges */
  --font-size-sm:    0.8125rem; /* 13px — body secundário, helper text */
  --font-size-base:  0.875rem;  /* 14px — body padrão (UI densa B2B) */
  --font-size-md:    1rem;      /* 16px — body em forms longos */
  --font-size-lg:    1.125rem;  /* 18px — H3 */
  --font-size-xl:    1.375rem;  /* 22px — H2 */
  --font-size-2xl:   1.75rem;   /* 28px — H1 */
  --font-size-display: 2.25rem; /* 36px — números grandes (dashboard) */

  /* Pesos — usamos só 4 */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:    700;

  /* Line-heights */
  --line-height-tight:   1.2;   /* títulos */
  --line-height-snug:    1.4;   /* labels, UI compact */
  --line-height-normal:  1.5;   /* body */
  --line-height-relaxed: 1.7;   /* parágrafos longos */

  /* -------------------------------------------------------------------
   * 2.9 BORDER-RADIUS
   * ------------------------------------------------------------------- */

  --radius-sm: 4px;   /* badges, tags, inputs pequenos */
  --radius-md: 6px;   /* botões, inputs, cards de lista */
  --radius-lg: 8px;   /* cards principais, modais */
  --radius-xl: 12px;  /* containers grandes, ilustrações */
  --radius-pill: 999px;

  /* -------------------------------------------------------------------
   * 2.10 SOMBRAS — frias (base rgba do azul institucional)
   * Inspirado em Stripe/Linear: sombras sutis, nunca pretas chapadas.
   * ------------------------------------------------------------------- */

  --shadow-xs: 0 1px 1px rgba(1, 33, 105, 0.04);
  --shadow-sm: 0 1px 2px rgba(1, 33, 105, 0.06);
  --shadow-md: 0 4px 12px rgba(1, 33, 105, 0.08);
  --shadow-lg: 0 12px 32px rgba(1, 33, 105, 0.12);
  --shadow-focus: 0 0 0 3px var(--color-brand-primary-ring);
  --shadow-focus-action: 0 0 0 3px var(--color-action-primary-ring);
  --shadow-focus-danger: 0 0 0 3px rgba(163, 45, 45, 0.20);

  /* -------------------------------------------------------------------
   * 2.11 TRANSIÇÕES — 120ms é o "sweet spot" Stripe/Linear
   * ------------------------------------------------------------------- */

  --transition-fast:   120ms ease-out;
  --transition-base:   180ms ease-out;
  --transition-slow:   240ms ease-out;

  /* -------------------------------------------------------------------
   * 2.12 CONTROLES — alturas e paddings de inputs/botões
   * Sobrescritos pelo modo compacto abaixo.
   * ------------------------------------------------------------------- */

  --control-height-sm: 28px;
  --control-height-md: 36px;
  --control-height-lg: 44px;

  --control-padding-x-sm: var(--space-3);  /* 12px */
  --control-padding-x-md: var(--space-4);  /* 16px */
  --control-padding-x-lg: var(--space-5);  /* 24px */

  --control-padding-y-sm: var(--space-1);  /* 4px */
  --control-padding-y-md: var(--space-2);  /* 8px */
  --control-padding-y-lg: var(--space-3);  /* 12px */

  /* -------------------------------------------------------------------
   * 2.13 ALIASES LEGADOS — mantém compatibilidade com custom.css
   * NÃO REMOVER. Templates antigos podem usar var(--ciot-*).
   * ------------------------------------------------------------------- */

  --ciot-navbar:           var(--color-brand-primary);
  --ciot-navbar-hover:     var(--color-brand-primary-hover);
  --ciot-primary:          var(--color-action-primary);
  --ciot-primary-hover:    var(--color-action-primary-hover);
  --ciot-primary-dark:     var(--color-action-primary-active);
  --ciot-text-on-navbar:   var(--color-text-on-brand);
  --ciot-text-on-primary:  var(--color-text-on-action);
}


/* =====================================================================
 * 3. DENSIDADE COMPACTA — body[data-density="compact"]
 * ---------------------------------------------------------------------
 * Ativada via JS persistido em localStorage. Reduz alturas de controle
 * e espaçamento em listas, mantendo legibilidade de tipografia.
 *
 * Uso esperado:
 *   <body data-density="comfortable">  ← default
 *   <body data-density="compact">      ← toggle
 * ===================================================================== */

body[data-density="compact"] {
  --control-height-sm: 24px;
  --control-height-md: 32px;
  --control-height-lg: 40px;

  --control-padding-y-sm: 2px;
  --control-padding-y-md: 6px;
  --control-padding-y-lg: 10px;

  --space-5: 16px;  /* 24 → 16 em listas */
  --space-6: 20px;  /* 32 → 20 entre seções */
}


/* =====================================================================
 * 4. APLICAÇÃO TIPOGRÁFICA GLOBAL
 * ---------------------------------------------------------------------
 * Aplica Inter como família padrão, ajusta hierarquia de headings,
 * antialiasing e tabular-nums para números alinhados.
 * ===================================================================== */

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--surface-sunken);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* Inter character variants para 'a', 'g', 'l', '1' mais técnicos */
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  margin-top: 0;
}

h1, .h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.015em;
}
h2, .h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
}
h3, .h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}
h4, .h4 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}
h5, .h5, h6, .h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

/* Texto menor padrão */
.text-secondary,
.text-muted {
  color: var(--color-text-secondary) !important;
}

small, .small {
  font-size: var(--font-size-sm);
}

/* Números em monospace — IDs, valores R$, códigos CIOT */
.text-mono,
.font-monospace,
.text-numeric {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
}

/* Números tabulares sem virar monospace (alinha colunas em qualquer fonte) */
.text-tabular {
  font-variant-numeric: tabular-nums;
}


/* =====================================================================
 * 5. COMPONENTES
 * ===================================================================== */


/* ---------------------------------------------------------------------
 * 5.1 BOTÕES
 * ---------------------------------------------------------------------
 * Bootstrap já estiliza .btn-primary via custom.css. Aqui adicionamos:
 *   - .btn-institutional  → secundário azul (nome semântico, alias .btn-dark)
 *   - Focus visible padronizado (ring 3px)
 *   - Botão ícone-only (.btn-icon)
 *   - .btn-ghost (sem borda, hover sutil)
 * ------------------------------------------------------------------ */

.btn {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
  letter-spacing: 0;
}

/* Tamanhos respeitam tokens */
.btn-sm {
  height: var(--control-height-sm);
  padding: var(--control-padding-y-sm) var(--control-padding-x-sm);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}
.btn-lg {
  height: var(--control-height-lg);
  padding: var(--control-padding-y-lg) var(--control-padding-x-lg);
  font-size: var(--font-size-md);
  border-radius: var(--radius-lg);
}

/* Focus ring institucional — sobrescreve o azul Bootstrap default */
.btn:focus-visible,
.btn:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.btn-primary:focus-visible,
.btn-primary:focus {
  box-shadow: var(--shadow-focus-action);
}
.btn-danger:focus-visible,
.btn-danger:focus,
.btn-outline-danger:focus-visible,
.btn-outline-danger:focus {
  box-shadow: var(--shadow-focus-danger);
}

/* Active press: sutil "afundar" */
.btn:active:not(:disabled) {
  transform: translateY(0.5px);
}

/* Botão institucional (azul navbar) — nome semântico canônico */
.btn-institutional {
  --bs-btn-bg: var(--color-brand-primary);
  --bs-btn-border-color: var(--color-brand-primary);
  --bs-btn-color: var(--color-text-on-brand);
  --bs-btn-hover-bg: var(--color-brand-primary-hover);
  --bs-btn-hover-border-color: var(--color-brand-primary-hover);
  --bs-btn-hover-color: var(--color-text-on-brand);
  --bs-btn-active-bg: var(--color-brand-primary-active);
  --bs-btn-active-border-color: var(--color-brand-primary-active);
  --bs-btn-active-color: var(--color-text-on-brand);
  --bs-btn-disabled-bg: var(--color-brand-primary);
  --bs-btn-disabled-border-color: var(--color-brand-primary);
  --bs-btn-disabled-color: var(--color-text-on-brand);
}

.btn-outline-institutional {
  --bs-btn-color: var(--color-brand-primary);
  --bs-btn-border-color: var(--color-border-default);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--color-brand-primary-soft);
  --bs-btn-hover-border-color: var(--color-brand-primary);
  --bs-btn-hover-color: var(--color-brand-primary);
  --bs-btn-active-bg: var(--color-brand-primary);
  --bs-btn-active-border-color: var(--color-brand-primary);
  --bs-btn-active-color: var(--color-text-on-brand);
}

/* Botão ghost — sem borda, usado para ações secundárias dentro de cards */
.btn-ghost {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-color: var(--color-brand-primary);
  --bs-btn-hover-bg: var(--color-brand-primary-soft);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--color-brand-primary);
  --bs-btn-active-bg: var(--color-brand-primary-soft);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-color: var(--color-brand-primary);
}

/* Botão ícone-only — quadrado, mesmo height de controle */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height-md);
  height: var(--control-height-md);
  padding: 0;
}
.btn-icon.btn-sm {
  width: var(--control-height-sm);
  height: var(--control-height-sm);
}
.btn-icon.btn-lg {
  width: var(--control-height-lg);
  height: var(--control-height-lg);
}

/* Spinner inline no botão (estado loading) */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--color-text-on-action);
  animation: ciot-spin 600ms linear infinite;
}
.btn-institutional.btn-loading::after,
.btn-outline-institutional.btn-loading::after,
.btn-ghost.btn-loading::after {
  color: var(--color-brand-primary);
}

@keyframes ciot-spin {
  to { transform: rotate(360deg); }
}


/* ---------------------------------------------------------------------
 * 5.2 INPUTS, SELECTS, TEXTAREAS
 * ---------------------------------------------------------------------
 * Bootstrap usa border #ced4da e focus ring azul próprio.
 * Sobrescrevemos para usar tokens próprios (border cinza azulado,
 * focus ring azul institucional).
 * ------------------------------------------------------------------- */

.form-control,
.form-select {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  height: var(--control-height-md);
  padding: var(--control-padding-y-md) var(--control-padding-x-md);
  color: var(--color-text-primary);
  background-color: var(--surface-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.form-control:hover:not(:focus):not(:disabled):not(.is-invalid):not(.is-valid),
.form-select:hover:not(:focus):not(:disabled) {
  border-color: var(--color-border-strong);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--surface-subtle);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Tamanhos pequeno/grande */
.form-control-sm,
.form-select-sm {
  height: var(--control-height-sm);
  padding: var(--control-padding-y-sm) var(--control-padding-x-sm);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}
.form-control-lg,
.form-select-lg {
  height: var(--control-height-lg);
  padding: var(--control-padding-y-lg) var(--control-padding-x-lg);
  font-size: var(--font-size-md);
  border-radius: var(--radius-lg);
}

/* Textarea — altura auto, padding consistente */
textarea.form-control {
  height: auto;
  min-height: calc(var(--control-height-md) * 2);
  line-height: var(--line-height-normal);
}

/* Validação */
.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: var(--color-success-600);
  background-image: none;
  padding-right: var(--control-padding-x-md);
}
.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
  border-color: var(--color-success-600);
  box-shadow: 0 0 0 3px rgba(99, 153, 34, 0.18);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--color-danger-600);
  background-image: none;
  padding-right: var(--control-padding-x-md);
}
.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
  border-color: var(--color-danger-600);
  box-shadow: var(--shadow-focus-danger);
}

.valid-feedback,
.invalid-feedback {
  font-size: var(--font-size-xs);
  margin-top: var(--space-1);
}
.valid-feedback { color: var(--color-success-800); }
.invalid-feedback { color: var(--color-danger-800); }

/* Labels */
.form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

/* Helper text — texto auxiliar abaixo do input */
.form-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

/* Input com prefixo (R$, @, etc) — input-group adaptado */
.input-group-text {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background-color: var(--surface-subtle);
  border-color: var(--color-border-default);
}

/* Checkboxes e radios — verde para "ativo" (combina com ação primária) */
.form-check-input {
  border-color: var(--color-border-default);
  width: 16px;
  height: 16px;
  margin-top: 0.125rem;
}
.form-check-input:focus {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}
.form-check-input:checked {
  background-color: var(--color-action-primary);
  border-color: var(--color-action-primary);
}
.form-check-input[type="radio"]:checked {
  background-color: var(--surface-base);
  border-color: var(--color-brand-primary);
  border-width: 5px;
}
.form-check-label {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  cursor: pointer;
}

/* Switch (toggle) */
.form-switch .form-check-input {
  width: 36px;
  height: 20px;
  margin-top: 0;
}


/* ---------------------------------------------------------------------
 * 5.3 BADGES — STATUS DO CIOT E PERFIS
 * ---------------------------------------------------------------------
 * Padrão sutil dominante (bg-50 + texto-800).
 * Variantes chapadas reservadas para estados FINAIS ou de PRIVILÉGIO.
 * ------------------------------------------------------------------- */

.badge {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 3px var(--space-3);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0;
  line-height: 1.4;
}

/* Status do CIOT — padrão sutil */
.badge-status-rascunho {
  color: #5f5e5a;
  background-color: #f1efe8;
  border: 1px solid #d3d1c7;
}
.badge-status-pronta {
  color: var(--color-info-800);
  background-color: var(--color-info-50);
  border: 1px solid var(--color-info-200);
}
.badge-status-emitido {
  color: var(--color-success-800);
  background-color: var(--color-success-50);
  border: 1px solid var(--color-success-200);
}
.badge-status-encerrado {
  color: var(--color-text-on-brand);
  background-color: var(--color-brand-primary);
  border: 1px solid var(--color-brand-primary);
}
.badge-status-cancelado {
  color: var(--color-danger-800);
  background-color: var(--color-danger-50);
  border: 1px solid var(--color-danger-200);
}
.badge-status-falha {
  color: var(--color-warning-800);
  background-color: var(--color-warning-50);
  border: 1px solid var(--color-warning-200);
}

/* Ponto colorido dentro do badge (substitui ícone em status comuns) */
.badge-dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.75;
  flex-shrink: 0;
}

/* Badges de perfil de usuário */
.badge-perfil-suporte {
  color: var(--color-text-on-brand);
  background-color: var(--color-danger-600);
}
.badge-perfil-admin-geral {
  color: var(--color-text-on-brand);
  background-color: var(--color-brand-primary);
}
.badge-perfil-admin {
  color: var(--color-info-800);
  background-color: var(--color-info-50);
  border: 1px solid var(--color-info-200);
}
.badge-perfil-operador {
  color: #5f5e5a;
  background-color: #f1efe8;
  border: 1px solid #d3d1c7;
}

/* Sub-tons harmonizados (sobrescreve Bootstrap default amarelado) */
.bg-success-subtle {
  background-color: var(--color-success-50) !important;
  color: var(--color-success-800) !important;
}
.bg-warning-subtle {
  background-color: var(--color-warning-50) !important;
  color: var(--color-warning-800) !important;
}
.bg-danger-subtle {
  background-color: var(--color-danger-50) !important;
  color: var(--color-danger-800) !important;
}
.bg-info-subtle {
  background-color: var(--color-info-50) !important;
  color: var(--color-info-800) !important;
}


/* ---------------------------------------------------------------------
 * 5.4 ALERTS — feedback inline no topo da página
 * ---------------------------------------------------------------------
 * Estrutura: borda lateral 4px na cor semântica + bg sutil + ícone.
 * Convenção GOV.BR (escaneável periférico) + Bootstrap-compatível.
 * ------------------------------------------------------------------- */

.alert {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid;
  border-left-width: 4px;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  line-height: var(--line-height-normal);
}

.alert-heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--space-1);
  color: inherit;
}

.alert-success {
  background-color: var(--color-success-50);
  border-color: var(--color-success-200);
  border-left-color: var(--color-success-600);
  color: var(--color-success-800);
}
.alert-warning {
  background-color: var(--color-warning-50);
  border-color: var(--color-warning-200);
  border-left-color: var(--color-warning-600);
  color: var(--color-warning-800);
}
.alert-danger {
  background-color: var(--color-danger-50);
  border-color: var(--color-danger-200);
  border-left-color: var(--color-danger-600);
  color: var(--color-danger-800);
}
.alert-info {
  background-color: var(--color-info-50);
  border-color: var(--color-info-200);
  border-left-color: var(--color-info-600);
  color: var(--color-info-800);
}

/* Botão close do alert — discreto */
.alert .btn-close {
  margin-left: auto;
  opacity: 0.6;
  flex-shrink: 0;
}
.alert .btn-close:hover {
  opacity: 1;
}


/* ---------------------------------------------------------------------
 * 5.5 CARDS — 3 elevações + KPI variant
 * ------------------------------------------------------------------- */

.card {
  background-color: var(--surface-base);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: none; /* flat default */
  transition: box-shadow var(--transition-fast),
              border-color var(--transition-fast);
}

.card-flat {
  box-shadow: none;
}
.card-raised {
  box-shadow: var(--shadow-sm);
}
.card-floating {
  box-shadow: var(--shadow-md);
}

/* Hover sutil em cards clicáveis */
.card-hoverable {
  cursor: pointer;
}
.card-hoverable:hover {
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-sm);
}

/* Card header — fundo idêntico, separado por linha */
.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-semibold);
}

.card-body {
  padding: var(--space-4);
}

/* KPI card — usado no dashboard */
.kpi-card {
  background-color: var(--surface-base);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: box-shadow var(--transition-fast);
}
.kpi-card:hover {
  box-shadow: var(--shadow-sm);
}
.kpi-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kpi-card__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.kpi-card__value {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-primary);
  line-height: var(--line-height-tight);
  margin: 0;
  font-feature-settings: 'tnum';
}
.kpi-card__trend {
  font-size: var(--font-size-xs);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
}
.kpi-card__trend--up { color: var(--color-success-800); }
.kpi-card__trend--down { color: var(--color-danger-800); }
.kpi-card__trend--neutral { color: var(--color-text-secondary); }


/* ---------------------------------------------------------------------
 * 5.6 STEPPER — wizard de 6 etapas
 * ---------------------------------------------------------------------
 * Estrutura HTML esperada:
 * <ol class="stepper">
 *   <li class="stepper__step stepper__step--done"> <span class="stepper__bullet"><i class="bi bi-check"></i></span> <span class="stepper__label">ETC</span></li>
 *   <li class="stepper__step stepper__step--current"> <span class="stepper__bullet">3</span> <span class="stepper__label">Carga</span></li>
 *   <li class="stepper__step"> <span class="stepper__bullet">4</span> <span class="stepper__label">Rota</span></li>
 * </ol>
 * ------------------------------------------------------------------- */

.stepper {
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  position: relative;
  gap: var(--space-1);
}

.stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

/* Linha de conexão entre bullets */
.stepper__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  right: -50%;
  height: 2px;
  background-color: var(--color-border-subtle);
  z-index: -1;
}
.stepper__step--done:not(:last-child)::after {
  background-color: var(--color-action-primary);
}

.stepper__bullet {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--surface-base);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-sans);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.stepper__step--done .stepper__bullet {
  background-color: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: var(--color-text-on-action);
}
.stepper__step--current .stepper__bullet {
  border-color: var(--color-brand-primary);
  border-width: 2px;
  color: var(--color-brand-primary);
  box-shadow: 0 0 0 4px var(--color-brand-primary-soft);
}

.stepper__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: var(--line-height-snug);
}
.stepper__step--done .stepper__label {
  color: var(--color-success-800);
  font-weight: var(--font-weight-medium);
}
.stepper__step--current .stepper__label {
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-medium);
}

/* Footer do stepper (etapa atual + autosave) */
.stepper-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}
.stepper-autosave {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.stepper-autosave__icon {
  color: var(--color-action-primary);
}


/* ---------------------------------------------------------------------
 * 5.7 LINHA DE OPERAÇÃO — lista densa
 * ---------------------------------------------------------------------
 * Estrutura semântica para lista de operações/CIOTs.
 * Modo compacto reduz padding via tokens.
 * ------------------------------------------------------------------- */

.operacao-list {
  background-color: var(--surface-base);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.operacao-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--surface-divider);
  transition: background-color var(--transition-fast);
}
.operacao-item:last-child {
  border-bottom: none;
}
.operacao-item:hover {
  background-color: var(--surface-subtle);
}

.operacao-item__id {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  min-width: 56px;
  flex-shrink: 0;
}

.operacao-item__main {
  flex: 1;
  min-width: 0;
}
.operacao-item__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-primary);
  line-height: var(--line-height-snug);
  margin: 0 0 2px;
}
.operacao-item__subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin: 0;
}

.operacao-item__value {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-align: right;
  min-width: 100px;
  flex-shrink: 0;
  font-feature-settings: 'tnum';
}

.operacao-item__actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}


/* ---------------------------------------------------------------------
 * 5.8 TOAST — notificação canto inferior direito
 * ---------------------------------------------------------------------
 * Container fixo. Sobrescreve o .toast Bootstrap para usar paleta nova.
 * ------------------------------------------------------------------- */

.toast-container {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-end;
  pointer-events: none;
}
.toast-container .toast {
  pointer-events: auto;
}

.toast {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  background-color: var(--surface-base);
  border: 1px solid var(--color-border-subtle);
  border-left: 3px solid var(--color-text-tertiary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 280px;
  max-width: 360px;
  color: var(--color-text-primary);
}
.toast--success { border-left-color: var(--color-success-600); }
.toast--warning { border-left-color: var(--color-warning-600); }
.toast--danger  { border-left-color: var(--color-danger-600); }
.toast--info    { border-left-color: var(--color-info-600); }

.toast__icon {
  font-size: 16px;
  flex-shrink: 0;
}
.toast--success .toast__icon { color: var(--color-success-600); }
.toast--warning .toast__icon { color: var(--color-warning-600); }
.toast--danger  .toast__icon { color: var(--color-danger-600); }
.toast--info    .toast__icon { color: var(--color-info-600); }

.toast__body { flex: 1; }
.toast__close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}
.toast__close:hover { color: var(--color-text-primary); }


/* =====================================================================
 * 6. ACESSIBILIDADE
 * ===================================================================== */

/* Foco visível padrão em qualquer elemento interativo sem estilo próprio */
*:focus-visible:not(.btn):not(.form-control):not(.form-select):not(.form-check-input) {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* Screen-reader only — texto invisível mas anunciado */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduz animações para usuários que pediram (prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* =====================================================================
 * 7. PRINT — preserva documento PDF do CIOT
 * ---------------------------------------------------------------------
 * O layout do CIOT impresso é regulamentado pela ANTT e está definido em
 * custom.css (.documento-rodape-logo-box). Aqui apenas reforçamos que
 * nenhum estilo novo deve interferir na impressão.
 * ===================================================================== */

@media print {
  body {
    background-color: #ffffff;
    color: #000000;
  }
  /* Esconde elementos de UI que não fazem sentido impressos */
  .toast-container,
  .navbar,
  .btn-close,
  .stepper {
    display: none !important;
  }
}


/* =====================================================================
 * 8. UTILITÁRIOS — atalhos úteis
 * ===================================================================== */

/* Stack vertical com gap consistente */
.stack-1 { display: flex; flex-direction: column; gap: var(--space-1); }
.stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-4 { display: flex; flex-direction: column; gap: var(--space-4); }

/* Cluster horizontal (wrap automático) */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* Texto truncado com ellipsis */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Surface explícita (substitui bg-white em contextos onde queremos tematização futura) */
.surface-base    { background-color: var(--surface-base); }
.surface-raised  { background-color: var(--surface-raised); }
.surface-sunken  { background-color: var(--surface-sunken); }
.surface-subtle  { background-color: var(--surface-subtle); }


/* =====================================================================
 * FIM DO DESIGN-SYSTEM.CSS
 * ===================================================================== */