/* ========================================================================
   PATCH.CSS v1 — CNH Neutral (para simulador.html)
   Objetivo: aplicar “visual CNH” SEM mudar NENHUMA classe/ID do simulador.
   Use junto com: cnh_kit.css  (base) + este patch (por último).
   ======================================================================== */

/* ------------------------------------------------------------------------
   0) “Ponte” de tokens: reaproveita o que o simulador já usa (variáveis dele),
      só que apontando para os tokens do kit CNH.
   ------------------------------------------------------------------------ */

:root{
  /* Tokens CNH (do cnh_kit.css) */
  --sim-cnh-red: var(--cnh-red);
  --sim-cnh-black: var(--cnh-black);
  --sim-cnh-gray-60: var(--cnh-gray-60);
  --sim-cnh-gray-30: var(--cnh-gray-30);
  --sim-cnh-white: var(--cnh-white);

  /* Re-mapeia o “mundo” do simulador */
  --primary: var(--sim-cnh-black);
  --primary-light: #2b2b2b;
  --secondary: var(--sim-cnh-red);
  --secondary-light: #e04a46;

  /* Mantém semântica (sucesso/aviso/erro) */
  --success: #27AE60;
  --success-light: #2ECC71;
  --warning: #F39C12;
  --warning-light: #F5B041;
  --danger: #C3231E;
  --danger-light: #E74C3C;

  /* Onde o simulador tinha “dealer” — agora é CNH */
  --dealer-red: var(--sim-cnh-red);
  --dealer-orange: #111111; /* neutro CNH (preto) */
  --dealer-dark: #111111;

  /* Gradientes: CNH é “preto + vermelho”, sem carnaval de cores */
  --gradient-primary: linear-gradient(135deg, var(--sim-cnh-black), #1a1a1a);
  --gradient-dealer: linear-gradient(135deg, var(--sim-cnh-black) 0%, var(--sim-cnh-black) 65%, var(--sim-cnh-red) 100%);

  /* Superfícies (light-first real): aqui a gente “puxa” pro kit */
  --bg-dark: var(--bg-secondary);
  --bg-card: var(--card-bg);
  --bg-card-hover: var(--bg-tertiary);
  --bg-input: var(--bg-primary);

  --text-primary: var(--text-primary);
  --text-secondary: var(--text-secondary);
  --text-muted: var(--text-tertiary);

  --border: var(--border-color);
  --border-light: var(--border-color);
  --shadow-lg: var(--shadow-lg);

  /* Overlays */
  --overlay-bg: rgba(0,0,0,0.65);
}

/* Mantém compatibilidade com o tema do simulador:
   quando ele colocar data-theme="light", ainda fica CNH */
[data-theme="light"]{
  --overlay-bg: rgba(0,0,0,0.55);
}

/* Se você quiser usar o modo escuro do kit (data-theme="dark"),
   o próprio cnh_kit.css já redefine bg/text/border. A ponte aqui acompanha. */


/* ------------------------------------------------------------------------
   1) Header do simulador — troca o “degradê cinza arco-íris” por CNH clean
   ------------------------------------------------------------------------ */

.header-wrapper{
  /* nada agressivo aqui, só garantia */
  z-index: 1200;
}

.header{
  background: var(--gradient-dark) !important; /* do kit */
  border-bottom: 4px solid var(--sim-cnh-red) !important;
  padding: 14px 22px !important;
  box-shadow: var(--shadow-md) !important;
}

.header::before,
.header::after{
  /* mata as “faixas” antigas */
  content: none !important;
}

.header-stripes,
.header-bands{
  display: none !important;
}

.logo img{
  filter: none !important;
  height: 44px !important;
}

.header-actions{
  gap: 10px !important;
}

/* Toggle de tema (mantém a classe do simulador) */
.theme-toggle{
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

.theme-toggle:hover{
  background: rgba(255,255,255,0.14) !important;
  transform: translateY(-1px) !important;
}

.theme-toggle .label{
  text-shadow: none !important;
  letter-spacing: 0.2px;
}

.theme-slider{
  background: rgba(255,255,255,0.12) !important;
}

.theme-slider::after{
  /* “pino” vermelho CNH */
  background: linear-gradient(135deg, var(--sim-cnh-red), #8a1412) !important;
}

[data-theme="light"] .theme-slider{
  background: rgba(255,255,255,0.22) !important;
}

[data-theme="light"] .theme-slider::after{
  background: linear-gradient(135deg, var(--sim-cnh-black), #2a2a2a) !important;
}


/* ------------------------------------------------------------------------
   2) Botões — CNH: preto, branco, vermelho (sem “laranja dealer”)
   ------------------------------------------------------------------------ */

.btn{
  border-radius: 5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
}

.btn-outline{
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #fff !important;
}

.btn-outline:hover:not(:disabled){
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.26) !important;
}

.btn-primary{
  background: var(--sim-cnh-red) !important;
  box-shadow: 0 8px 20px rgba(195,35,30,0.25) !important;
}

.btn-primary:hover:not(:disabled){
  filter: brightness(0.92);
}

.btn-secondary{
  background: var(--sim-cnh-black) !important;
}

.btn-secondary:hover:not(:disabled){
  background: #222 !important;
}

.btn-pdf{
  background: linear-gradient(135deg, var(--sim-cnh-black), var(--sim-cnh-red)) !important;
}

.btn-success{
  background: #27AE60 !important;
}

.btn-warning{
  background: #F39C12 !important;
}

.btn-danger{
  background: var(--sim-cnh-red) !important;
}

/* Quando o simulador estiver em light, os outlines precisam ficar legíveis */
[data-theme="light"] .btn-outline{
  color: var(--sim-cnh-black) !important;
  background: rgba(248, 247, 247, 0.857) !important;
  border-color: rgba(0,0,0,0.14) !important;
}

[data-theme="light"] .btn-outline:hover:not(:disabled){
  background: rgba(253, 252, 252, 0.936) !important;
}


/* ------------------------------------------------------------------------
   3) Cards / painéis — aproxima do kit (bordas, sombras e topo sutil)
   ------------------------------------------------------------------------ */

.card{
  border-radius: 14px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--card-bg) !important;
}

.card-header{
  background: linear-gradient(135deg, rgba(38, 38, 38, 0.836), rgba(90, 90, 90, 0.869)) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.card-header h3{
  letter-spacing: 0.2px;
}

/* Intro e Result headers: tira o “laranjão” e deixa CNH */
.page-intro{
  background: linear-gradient(10deg, rgb(157, 2, 2), rgb(125, 3, 3)) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
},
.result-header{
  background: linear-gradient(10deg, rgb(85, 85, 85), rgb(159, 159, 159)) !important;
  border: 2px solid rgba(0, 0, 0, 0.878) !important;
}

[data-theme="dark"] .page-intro,
[data-theme="dark"] .result-header{
  background: linear-gradient(400deg, rgba(255,255,255,0.06), rgba(195,35,30,0.10)) !important;
  border-color: rgba(255,255,255,0.10) !important;
}


/* ------------------------------------------------------------------------
   4) Inputs / selects / checkbox items — foco vermelho CNH
   ------------------------------------------------------------------------ */

.form-input{
  border-radius: 8px !important;
  border: 2px solid var(--border-color) !important;
}

.form-input:focus{
  border-color: var(--sim-cnh-red) !important;
  box-shadow: 0 0 0 3px rgba(195,35,30,0.12) !important;
}

/* O simulador usa .checkbox-item com hover laranja; troca por vermelho CNH */
.checkbox-item:hover{
  background: rgba(195,35,30,0.06) !important;
  border-color: rgba(195,35,30,0.25) !important;
}

.checkbox-item.selected{
  background: rgba(195,35,30,0.10) !important;
  border-color: rgba(195,35,30,0.55) !important;
}

.checkbox-item input[type="checkbox"]{
  accent-color: var(--sim-cnh-red) !important;
}

/* Tags selecionadas */
.selected-cargo-tag,
.result-cargo-tag{
  background: rgba(195,35,30,0.10) !important;
  border-color: rgba(195,35,30,0.35) !important;
  color: var(--sim-cnh-red) !important;
}

[data-theme="dark"] .selected-cargo-tag,
[data-theme="dark"] .result-cargo-tag{
  color: #fff !important;
}


/* ------------------------------------------------------------------------
   5) Timeline / marcadores — remove “arco-íris”, mantém CNH (neutro + vermelho)
   ------------------------------------------------------------------------ */

.timeline::before{
  background: linear-gradient(to bottom, rgba(0,0,0,0.25), var(--sim-cnh-red), rgba(0,0,0,0.25)) !important;
}

.phase-marker{
  border-color: var(--sim-cnh-red) !important;
}

.phase-marker.phase-1,
.phase-marker.phase-2,
.phase-marker.phase-3,
.phase-marker.phase-4{
  /* mantém variação, mas sem pintar o mundo inteiro */
  background: rgba(0,0,0,0.04) !important;
}

[data-theme="dark"] .phase-marker.phase-1,
[data-theme="dark"] .phase-marker.phase-2,
[data-theme="dark"] .phase-marker.phase-3,
[data-theme="dark"] .phase-marker.phase-4{
  background: rgba(255,255,255,0.06) !important;
}


/* ------------------------------------------------------------------------
   6) Badges e indicadores — CNH “limpo”
   ------------------------------------------------------------------------ */

.count-badge{
  background: var(--sim-cnh-black) !important;
}

.status-indicator{
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.16) !important;
}

.status-indicator.warning{
  background: rgba(243,156,18,0.14) !important;
  border-color: rgba(243,156,18,0.28) !important;
}

.status-indicator.danger{
  background: rgba(195,35,30,0.14) !important;
  border-color: rgba(195,35,30,0.28) !important;
}

.status-dot{
  box-shadow: none !important;
}


/* ------------------------------------------------------------------------
   7) “Polimento” mobile e acessibilidade (sem mexer no layout)
   ------------------------------------------------------------------------ */

@media (max-width: 700px){
  .header{
    padding: 12px 14px !important;
  }
  .logo img{
    height: 40px !important;
  }
  .btn{
    padding: 10px 14px !important;
  }
}

/* Fim do patch v1 */