/* =============================================================================
   FI v2 - Base: identidade visual (Blueprint sec.10), reset e componentes
   Cores: navy #0D1B2A | laranja destaque | azul Master #1A56DB
   Fontes: Inter (UI), Poppins (titulos), Roboto Mono (numeros)
   ============================================================================= */
:root {
  --navy:        #0D1B2A;
  --navy-2:      #12263a;
  --navy-3:      #1b3450;
  --laranja:     #F97316;
  --laranja-2:   #ea670c;
  --azul-master: #1A56DB;
  --verde:       #16A34A;
  --vermelho:    #DC2626;

  /* Cores semânticas — Fase 1. Recapado é significado distinto de --laranja
     (que passará a marcar atraso/pendente no design novo); tom 1:1 com o atual.
     Consumo no mapa.js (atributo SVG) fica para a Fase 2. */
  --laranja-recapado: #E8742C;
  --verde-2:          #15803d;  /* variante escura (hover/texto), par de --laranja-2 */
  --verde-suave:      #e7f6ec;  /* fundo de estado positivo (badge, Bom do checklist) */

  --bg:          #F3F4F6;
  --card:        #FFFFFF;
  --borda:       #E5E7EB;
  --texto:       #1F2937;
  --texto-suave: #6B7280;

  /* Superfícies e cores de apoio — Fase 1 (neutros e fundos de estado recorrentes).
     #fff fica fora por decisão (significado misto: texto sobre navy vs superfície). */
  --linha:          #f1f3f5;  /* separador de linha (tabelas, cards, seções) */
  --fundo-chip:     #eef2f7;  /* chips, badges cinza, ícones de ação */
  --fundo-suave:    #f8fafc;  /* hovers e fundos de contexto */
  --borda-2:        #cbd5e1;  /* dots, slider do switch, bordas hover */
  --texto-chip:     #5b6b7e;  /* texto de chip/badge cinza */
  --vermelho-fundo: #fef2f2;  /* hover ghost/sair, fundo de banner de erro */
  --vermelho-suave: #fdecec;  /* fundo badge-vermelho, ação danger */
  --laranja-fundo:  #fff7ed;  /* sugestão-box, banner de mínimos */
  --laranja-suave:  #fff1e6;  /* fundo badge-laranja, contador de aba ativa */
  --laranja-borda:  #fed7aa;  /* borda de sugestão-box/banner de mínimos */
  --superficie:     #fff;     /* P-5: formaliza o fallback var(--superficie,#fff) usado em JS */

  /* Fase 2 — visual novo. Consumidos SÓ pela tela piloto (Marcas) até o rollout.
     Veredito do Helton (Fase 2): thead NEUTRO em --navy (o #0F172A do piloto
     perdeu). Nota: o navy azulado da sidebar foi substituído no veredito
     ajustado da Fase 3 — ver o grupo "Fase 3 — shell" abaixo. */
  --tabela-header:       var(--navy);
  --tabela-header-texto: #fff;
  --fonte-mono:          ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
  /* (--azul-master-2 morreu com o veredito final: primário é navy) */

  /* Mapa de eixos (SVG, mapa.js) — quick-win pós-Fase 1, valores byte-fiéis.
     (#eef1f5 coincide com --cj-neutral-fill, mas o mapa tem semântica própria.) */
  --mapa-traco:  #c4cbd4;  /* contorno de cabine/chassi/eixos/posição livre */
  --mapa-cabine: #e6e9ee;  /* preenchimento da cabine e para-choque */
  --mapa-eixo:   #e0e4ea;  /* preenchimento do chassi e dos eixos */
  --mapa-livre:  #eef1f5;  /* preenchimento da posição livre (tracejada) */
  --mapa-vidro:  #bbd4ea;  /* faixa de para-brisa da cabine */
  --mapa-vidro-borda: #6f9bc4;  /* contorno do para-brisa */
  --mapa-kingpin: #cfd6df;  /* pino de engate (king-pin) da carreta */
  --mapa-kingpin-borda: #8a94a3;  /* contorno do king-pin */

  --sombra:      0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --sombra-md:   0 4px 14px rgba(16,24,40,.10);
  /* Sombra sutil aprovada no piloto da Fase 2 (promovida do escopo .piloto-v2
     na Fase 3; o .conj-card, antigo consumidor de 'none', ganha a sombra real). */
  --sombra-sm:   0 1px 3px rgba(15,23,42,.06);

  /* Fase 3 — shell. VEREDITO AJUSTADO pós-smoke (07/07): layout do sistema de
     referência — sidebar full-height na MESMA cor da appbar antiga (--navy;
     o #0E2A66 morreu), logo no topo da sidebar, header CLARO ao lado com a
     pill bar e o chip sobre --superficie. */
  --sidebar-bg:        var(--navy);
  --sidebar-texto:     #CBD5E1;
  --sidebar-hover:     rgba(255,255,255,.08);
  --sidebar-w:         240px;
  --appbar-bg:         var(--superficie);
  --appbar-borda:      var(--borda);

  /* REGRA DO ATIVO (veredito final Fase 3): "ativo = inversão do fundo —
     sobre escuro, claro; sobre claro, navy". Dois pares de tokens; a sidebar
     consome o primeiro, todo o resto (pill bar, abas, segmented, chips,
     botão primário) o segundo. --azul-master segue codificando DADO
     (master no mapa de eixos, badges) e NÃO participa de estado ativo. */
  --ativo-sobre-escuro:       #fff;
  --ativo-sobre-escuro-texto: var(--navy);
  --ativo-sobre-claro:        var(--navy);
  --ativo-sobre-claro-texto:  #fff;

  --pillbar-bg:        var(--fundo-chip);
  --pill-texto:        var(--texto-suave);
  --pill-ativa-bg:     var(--ativo-sobre-claro);
  --pill-ativa-texto:  var(--ativo-sobre-claro-texto);

  /* Forma — Fase 1. Base 10px (valor dominante); usos antigos de --raio (12px)
     re-apontados para --raio-md. 9px arredondado para --raio (aprovado). */
  --raio-sm:   8px;
  --raio:      10px;
  --raio-md:   12px;
  --raio-lg:   16px;
  --raio-full: 999px;

  /* Espaçamento — Fase 1. Aplicado onde o valor bate exatamente com a escala
     (shorthand só quando todos os valores estão na escala). */
  --sp-4:  4px;
  --sp-6:  6px;
  --sp-8:  8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-22: 22px;

  --fonte-ui:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fonte-tit:   'Poppins', var(--fonte-ui);
  --fonte-num:   'Roboto Mono', ui-monospace, monospace;

  /* Tipografia — escala (Fase 1). Arredondamentos aplicados: 11.5->12, 12.5->13,
     13.5->14. Fora da escala (uso único, hardcoded): 10, 15, 19, 28px.
     Atenção: --fs-16 é o piso anti-zoom do Safari iOS (inputs mobile) — não reduzir. */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fonte-ui);
  color: var(--texto);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--fonte-tit); margin: 0; }
.mono { font-family: var(--fonte-num); }

/* Logo da marca: FR[O]TA INTELIGENTE, com o "O" laranja ------------------- */
.brand-logo {
  font-family: var(--fonte-tit);
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  white-space: nowrap;
}
.brand-logo .o { color: var(--laranja); }
.brand-logo .light { font-weight: 300; opacity: .92; margin-left: .35em; }

/* Botoes ------------------------------------------------------------------- */
.btn {
  font-family: var(--fonte-ui);
  font-weight: 600;
  font-size: var(--fs-14);
  border: 1px solid transparent;
  border-radius: var(--raio);
  padding: 11px 16px;
  cursor: pointer;
  transition: background .15s, opacity .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--navy-2); }
.btn-ghost { background: transparent; color: var(--vermelho); border-color: var(--borda); }
.btn-ghost:hover { background: var(--vermelho-fundo); }

/* Campos de formulario ----------------------------------------------------- */
.field { display: block; margin-bottom: var(--sp-16); }
.field label {
  display: block;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--texto);
  margin-bottom: var(--sp-6);
}
.field input, .field textarea {
  width: 100%;
  font-family: var(--fonte-ui);
  font-size: 15px;
  color: var(--texto);
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 11px 13px;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 56px; box-sizing: border-box; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--laranja);
  box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}
/* Linha de confirmacao (checkbox + texto) */
.check-line { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-14); color: var(--texto); margin-top: var(--sp-4); cursor: pointer; }
.check-line input { width: auto; }

/* Banner de erro ----------------------------------------------------------- */
.banner-erro {
  background: var(--vermelho-fundo);
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: var(--fs-14);
  border-radius: var(--raio);
  padding: var(--sp-10) var(--sp-12);
  margin-bottom: var(--sp-16);
}
.hidden { display: none !important; }