/* =============================================================================
   Grupo Automotores — sitio público
   cotizador.css · el wizard, compartido por la ficha y por consignaciones

   FASE 4. Lo cargan `vehiculo_detail.html` y `consignaciones.html`: los dos
   montan `window.initCotizador()` sobre el mismo motor
   (`static/page/js/cotizador.js`) y comparten dos parciales,
   `_cotizador_escala.html` y `_cotizador_ocultos.html`.

   Consignaciones todavía tiene su layout viejo (se rediseña en la fase 6),
   pero carga esta hoja igual, porque si no el honeypot queda a la vista.

   CONTRATO DE DOM — nada de esto se renombra
   ------------------------------------------
   `[data-cot-paso="1|2|3"]`, `[data-cot-siguiente]`, `[data-cot-atras]`,
   `[data-cot-punto="N"]`, `[data-cot-err="campo"]`, `[data-cot-error]`,
   `[data-cot-escala]`, `.is-invalid`, `.d-none` y los `name=` de cada input.
   Está documentado en la cabecera de cotizador.js.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   HONEYPOT

   `.cot-trampa` es lo único que separa el campo trampa "Apodo" del visitante.
   Si esta regla no se carga, la persona lo ve, lo completa de buena fe, y
   `ContactoCotizadorForm.clean_apodo` rechaza TODAS las cotizaciones — sin
   error visible y sin una línea en ningún log. Es la regresión más cara del
   rediseño; va primera a propósito.

   No usa `display:none` porque hay bots que lo detectan.
   --------------------------------------------------------------------------- */
.cot-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   INDICADOR DE PASOS

   Barras, no círculos numerados: es el gesto de producto de la dirección B, y
   los círculos eran una de las formas que el cliente marcó como "muy clásica".
   El JS pinta `.activo` y `.hecho` sobre `[data-cot-punto]`.
   --------------------------------------------------------------------------- */
.ga-steps {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0 0 var(--ga-s-5);
  padding: 0;
}
.ga-steps li { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ga-steps li::before {
  content: '';
  height: 3px;
  border-radius: 2px;
  background: var(--ga-bone-300);
  transition: background var(--ga-dur-fast) var(--ga-ease);
}
.ga-steps li {
  font-family: var(--ga-font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ga-on-bone-mut);
}
.ga-steps li.hecho::before { background: var(--ga-goldink-a16); }
.ga-steps li.activo::before { background: var(--ga-gold-ink); }
.ga-steps li.activo { color: var(--ga-on-bone); font-weight: var(--ga-w-med); }

/* ---------------------------------------------------------------------------
   CAMPOS
   --------------------------------------------------------------------------- */
.ga-cot-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--ga-s-4); }
.ga-cot-field > label,
.ga-cot-label {
  font-family: var(--ga-font-mono);
  font-size: .625rem;
  font-weight: var(--ga-w-med);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ga-on-bone-mut);
}
.ga-cot-req { color: var(--ga-danger); }

.ga-cot-input,
.ga-cot-field input,
.ga-cot-field select {
  width: 100%;
  min-height: 44px;                 /* objetivo táctil */
  padding: 10px 12px;
  font-family: var(--ga-font-body);
  font-size: var(--ga-t-sm);
  color: var(--ga-on-bone);
  background: var(--ga-bone-0);
  border: 1px solid var(--ga-bone-300);
  border-radius: var(--ga-r);
  appearance: none;
}
.ga-cot-field input:focus,
.ga-cot-field select:focus {
  outline: none;
  border-color: var(--ga-gold-ink);
  box-shadow: 0 0 0 3px var(--ga-goldink-a16);
}
.ga-cot-field input::placeholder { color: var(--ga-on-bone-mut); }
.ga-cot-field input:disabled { background: var(--ga-bone-50); color: var(--ga-on-bone-mut); cursor: not-allowed; }

/* `.is-invalid` la pone cotizador.js sobre `[name="campo"]`. Antes la pintaba
   Bootstrap; ahora los campos no son `.form-control`, así que va acá. */
.ga-cot-field .is-invalid,
input.is-invalid, select.is-invalid {
  border-color: var(--ga-danger);
  box-shadow: 0 0 0 3px rgba(169, 68, 54, .12);
}

/* Prefijo de moneda pegado al campo. */
.ga-cot-money { display: flex; align-items: stretch; }
.ga-cot-money > span {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--ga-s-3);
  font-family: var(--ga-font-mono);
  font-size: var(--ga-t-sm);
  color: var(--ga-on-bone-mut);
  background: var(--ga-bone-50);
  border: 1px solid var(--ga-bone-300);
  border-right: 0;
  border-radius: var(--ga-r) 0 0 var(--ga-r);
}
.ga-cot-money input { border-radius: 0 var(--ga-r) var(--ga-r) 0; }

.ga-cot-help {
  font-family: var(--ga-font-mono);
  font-size: .6875rem;
  color: var(--ga-on-bone-mut);
}
.ga-cot-err { font-size: var(--ga-t-xs); color: var(--ga-danger); }
.ga-cot-alert {
  font-size: var(--ga-t-sm);
  color: var(--ga-danger);
  background: rgba(169, 68, 54, .07);
  border: 1px solid rgba(169, 68, 54, .25);
  border-radius: var(--ga-r);
  padding: 10px 12px;
  margin-bottom: var(--ga-s-4);
}
.ga-cot-legal {
  font-size: .6875rem;
  color: var(--ga-on-bone-mut);
  margin: var(--ga-s-3) 0 0;
  text-align: center;
}
.ga-cot-intro { font-size: var(--ga-t-sm); color: var(--ga-on-bone-mut); margin: 0 0 var(--ga-s-4); }

/* Interruptor "entrego mi usado" */
.ga-cot-toggle {
  display: flex;
  align-items: center;
  gap: var(--ga-s-3);
  padding: 12px 14px;
  background: var(--ga-bone-50);
  border: 1px solid var(--ga-bone-200);
  border-radius: var(--ga-r);
  cursor: pointer;
  font-family: var(--ga-font-disp);
  font-size: var(--ga-t-sm);
  font-weight: var(--ga-w-med);
  min-height: 48px;
  margin: 0;
}
.ga-cot-toggle:has(input:checked) { border-color: var(--ga-gold-ink); background: var(--ga-goldink-a08); }
.ga-cot-toggle input { width: 18px; height: 18px; min-height: 0; flex: none; accent-color: var(--ga-gold-ink); }
.ga-cot-sub {
  padding: var(--ga-s-4) 0 0;
  margin-top: var(--ga-s-4);
  border-top: 1px solid var(--ga-bone-200);
}
.ga-cot-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ga-s-3); }

/* ---------------------------------------------------------------------------
   ESCALA DE ESTADO 1-5  (`_cotizador_escala.html`)

   Radios nativos: funciona sin JS y se navega con el teclado. El resaltado
   extra que pinta cotizador.js (`.selected` / `.highlighted`) se suma al
   `:checked`, no lo reemplaza — si el JS no carga, el control sigue usable.
   --------------------------------------------------------------------------- */
.ga-escala { display: flex; gap: 6px; }
.ga-escala label { flex: 1; margin: 0; cursor: pointer; }
.ga-escala input { position: absolute; opacity: 0; pointer-events: none; }
.ga-escala-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 4px;
  min-height: 56px;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--ga-bone-300);
  border-radius: var(--ga-r);
  background: var(--ga-bone-0);
  color: var(--ga-on-bone-mut);
  font-family: var(--ga-font-disp);
  font-size: .6875rem;
  line-height: 1.15;
  transition: border-color var(--ga-dur-fast) var(--ga-ease),
              background var(--ga-dur-fast) var(--ga-ease),
              color var(--ga-dur-fast) var(--ga-ease);
}
.ga-escala-box .bi { font-size: .95rem; }
.ga-escala label:hover .ga-escala-box { border-color: var(--ga-gold-ink); color: var(--ga-on-bone); }
.ga-escala input:checked + .ga-escala-box,
.ga-escala-box.selected {
  border-color: var(--ga-gold-ink);
  background: var(--ga-goldink-a08);
  color: var(--ga-on-bone);
  font-weight: var(--ga-w-med);
}
.ga-escala-box.highlighted { border-color: var(--ga-gold-ink); }
.ga-escala input:focus-visible + .ga-escala-box { outline: 2px solid var(--ga-gold-ink); outline-offset: 1px; }

@media (max-width: 400px) {
  .ga-escala-box { font-size: .625rem; padding: 8px 2px; }
  .ga-escala-box .bi { font-size: .85rem; }
}

/* ---------------------------------------------------------------------------
   BOTONERA DEL PASO
   --------------------------------------------------------------------------- */
.ga-cot-nav { display: flex; gap: var(--ga-s-2); margin-top: var(--ga-s-5); }
.ga-cot-nav .ga-btn--gold { flex: 1; }


/* ---------------------------------------------------------------------------
   LA TARJETA DEL WIZARD

   Vive acá y no en ficha.css porque la usan las DOS pantallas del cotizador:
   la ficha de vehiculo y consignación. Estuvo en ficha.css hasta que un test
   de cobertura de hojas lo detectó — consignación la usaba sin cargar esa
   hoja, así que su tarjeta se dibujaba sin fondo, sin borde y sin sombra, y
   la página igual respondía 200.
   --------------------------------------------------------------------------- */
.ga-cot-card {
  background: var(--ga-bone-0);
  border: 1px solid var(--ga-bone-200);
  border-radius: var(--ga-r-xl);
  box-shadow: var(--ga-el-2);
  overflow: hidden;
}
.ga-cot-card__head {
  padding: var(--ga-s-5) var(--ga-s-5) var(--ga-s-4);
  border-bottom: 1px solid var(--ga-bone-200);
}
.ga-cot-card__head h2 {
  font-family: var(--ga-font-disp);
  font-size: var(--ga-t-h3);
  font-weight: var(--ga-w-semi);
  letter-spacing: var(--ga-track-disp);
  margin: var(--ga-s-2) 0 0;
}
.ga-cot-card__head p { font-size: var(--ga-t-xs); color: var(--ga-on-bone-mut); margin: var(--ga-s-2) 0 0; }
.ga-cot-card__body { padding: var(--ga-s-5); }

.ga-cot-precio {
  background: var(--ga-bone-50);
  border: 1px solid var(--ga-bone-200);
  border-radius: var(--ga-r);
  padding: var(--ga-s-3) var(--ga-s-4);
  margin-bottom: var(--ga-s-4);
}
.ga-cot-precio b {
  display: block;
  font-family: var(--ga-font-mono);
  font-weight: var(--ga-w-mono-bold);
  font-size: 1.125rem;
  letter-spacing: var(--ga-track-num);
  font-variant-numeric: tabular-nums;
}
.ga-cot-precio span { font-family: var(--ga-font-mono); font-size: .625rem; color: var(--ga-on-bone-mut); }


/* ===========================================================================
   REDISEÑO 2026 — el cotizador que calcula primero y pregunta después

   La tarjeta ahora tiene dos mitades: arriba, sobre marfil, lo que el
   visitante carga; abajo, sobre carbón, lo que le devuelve. El resultado deja
   de ser un paso al que hay que llegar y pasa a estar siempre a la vista,
   moviéndose mientras se tipea.

   El panel oscuro no es decoración: es lo que separa "lo que pongo" de "lo que
   me sale", que era exactamente lo que el wizard de tres pasos hacía con
   pantallas y ahora se hace con una línea.
   =========================================================================== */

/* --- Toggle de permuta. Es un <button aria-pressed> y no un checkbox: hace
   aparecer un bloque entero, no marca un valor de formulario. Con checkbox el
   lector de pantalla anuncia "casilla", que promete otra cosa. --- */
.ga-cot-permuta {
  display: flex;
  align-items: flex-start;
  gap: var(--ga-s-3);
  width: 100%;
  padding: var(--ga-s-3) var(--ga-s-4);
  margin-bottom: var(--ga-s-4);
  background: var(--ga-bone-50);
  border: 1px solid var(--ga-bone-300);
  border-radius: var(--ga-r);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--ga-dur-fast) var(--ga-ease),
              background var(--ga-dur-fast) var(--ga-ease);
}
.ga-cot-permuta:hover { border-color: var(--ga-gold-ink); }
.ga-cot-permuta[aria-pressed="true"] {
  border-color: var(--ga-gold-ink);
  background: var(--ga-goldink-a08);
}
.ga-cot-permuta__tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1px solid var(--ga-bone-300);
  /* sin radio: el sistema no tiene esquinas redondeadas */
  background: var(--ga-bone-0);
  color: transparent;
  font-size: .7rem;
}
.ga-cot-permuta[aria-pressed="true"] .ga-cot-permuta__tick {
  background: var(--ga-gold-ink);
  border-color: var(--ga-gold-ink);
  color: var(--ga-bone-0);
}
.ga-cot-permuta > span:last-child { display: block; min-width: 0; }
.ga-cot-permuta b {
  display: block;
  font-family: var(--ga-font-disp);
  font-size: var(--ga-t-sm);
  font-weight: var(--ga-w-med);
  color: var(--ga-on-bone);
}
.ga-cot-permuta b + span {
  display: block;
  font-size: var(--ga-t-xs);
  color: var(--ga-on-bone-mut);
  margin-top: 2px;
}

/* --- El panel del resultado --- */
.ga-cot-panel {
  padding: var(--ga-s-5);
  background: var(--ga-ink-800);
  color: var(--ga-on-ink);
  border-top: 1px solid var(--ga-gold-a20);
}
.ga-cot-cuota {
  display: block;
  font-family: var(--ga-font-mono);
  font-size: 2rem;
  font-weight: var(--ga-w-mono-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--ga-on-ink);
  margin-top: var(--ga-s-2);
}
.ga-cot-cuota__pie {
  display: block;
  font-size: var(--ga-t-xs);
  color: var(--ga-on-ink-mut);
  margin-top: 4px;
}
/* Los plazos salen de SiteConfig, así que pueden ser 2, 3 o 5. `.ga-seg` está
   clavado en tres columnas porque su otro uso —la condición del catálogo— son
   siempre tres; acá las columnas se reparten por cantidad. Sin esto, cargar
   "12,24" dejaba una tercera columna vacía. */
.ga-cot-plazos {
  margin-top: var(--ga-s-4);
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

/* Segmentado sobre carbón: mismo componente que el del catálogo, invertido. */
.ga-seg--dark { background: var(--ga-fill-ink); }
.ga-seg--dark label { color: var(--ga-on-ink-mut); }
.ga-seg--dark input:checked + label {
  background: var(--ga-ink-700);
  color: var(--ga-on-ink);
  box-shadow: none;
}
.ga-seg--dark input:focus-visible + label { outline-color: var(--ga-gold); }

/* --- Desglose --- */
.ga-cot-desglose {
  margin: var(--ga-s-5) 0 0;
  padding-top: var(--ga-s-4);
  border-top: 1px solid var(--ga-line-ink);
}
.ga-cot-desglose > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ga-s-3);
  padding: 5px 0;
}
.ga-cot-desglose dt {
  font-size: var(--ga-t-xs);
  font-weight: 400;
  color: var(--ga-on-ink-mut);
}
.ga-cot-desglose dd {
  margin: 0;
  font-family: var(--ga-font-mono);
  font-size: var(--ga-t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ga-on-ink);
}
.ga-cot-desglose__total {
  margin-top: 4px;
  padding-top: var(--ga-s-3) !important;
  border-top: 1px solid var(--ga-line-ink);
}
.ga-cot-desglose__total dt { color: var(--ga-on-ink); font-weight: var(--ga-w-med); }
.ga-cot-desglose__total dd { font-weight: var(--ga-w-mono-bold); }
/* El saldo a favor va en dorado: es la única cifra del desglose que juega a
   favor del cliente, y aparece tan poco que sin destacarla pasa desapercibida
   justo cuando más importa. */
.ga-cot-desglose__favor dt,
.ga-cot-desglose__favor dd { color: var(--ga-gold); }

.ga-cot-panel__nota {
  font-size: var(--ga-t-xs);
  color: var(--ga-on-ink-mut);
  margin: var(--ga-s-3) 0 0;
}

/* --- Acciones y pedido de contacto --- */
.ga-cot-acciones {
  display: flex;
  flex-direction: column;
  gap: var(--ga-s-2);
  margin-top: var(--ga-s-5);
}
.ga-cot-acciones .ga-btn { width: 100%; }
.ga-cot-otro {
  align-self: center;
  background: none;
  border: 0;
  padding: 4px;
  font-family: var(--ga-font-disp);
  font-size: var(--ga-t-xs);
  color: var(--ga-on-ink-mut);
  text-decoration: underline;
  cursor: pointer;
}
.ga-cot-otro:hover { color: var(--ga-gold-lit); }

.ga-cot-contacto { margin-top: var(--ga-s-5); }
.ga-cot-field--dark > label { color: var(--ga-on-ink-mut); }
.ga-cot-field--dark input {
  background: var(--ga-fill-ink);
  border-color: var(--ga-line-ink);
  color: var(--ga-on-ink);
}
.ga-cot-field--dark input::placeholder { color: var(--ga-on-ink-mut); }
.ga-cot-field--dark input:focus {
  border-color: var(--ga-gold);
  box-shadow: 0 0 0 3px var(--ga-gold-ring);
}
/* "(opcional)" es una aclaración, no un rótulo: no va en versalitas. */
.ga-cot-opt { text-transform: none; letter-spacing: 0; }

.ga-cot-ok {
  margin-top: var(--ga-s-5);
  padding: var(--ga-s-5);
  text-align: center;
  border: 1px solid var(--ga-gold-a30);
  border-radius: var(--ga-r);
}
.ga-cot-ok .bi { font-size: 1.6rem; color: var(--ga-gold); }
.ga-cot-ok p { font-size: var(--ga-t-sm); color: var(--ga-on-ink); margin: var(--ga-s-3) 0 0; }

/* La caja de error dentro del panel oscuro. Sobre marfil ya tenía su estilo. */
.ga-cot-panel .ga-cot-alert {
  margin-top: var(--ga-s-4);
  background: transparent;
  border: 1px solid var(--ga-danger, #A94436);
  color: var(--ga-error-claro, #E5A79C);
}
.ga-cot-panel .ga-cot-legal { color: var(--ga-on-ink-mut); }


/* ===========================================================================
   RESPALDO — las tres razones, debajo del cotizador

   No es un bloque de marketing suelto: está justo donde el visitante acaba de
   ver un número y está decidiendo si confía. Por eso vive en la columna del
   cotizador y no en una banda propia más abajo, donde nadie llega.
   =========================================================================== */
.ga-respaldo {
  margin-top: var(--ga-s-5);
  padding: var(--ga-s-5);
  background: var(--ga-ink-800);
  border-radius: var(--ga-r);
}
.ga-respaldo ul {
  list-style: none;
  margin: var(--ga-s-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ga-s-2);
}
.ga-respaldo li {
  display: flex;
  align-items: flex-start;
  gap: var(--ga-s-2);
  font-size: var(--ga-t-xs);
  color: var(--ga-on-ink);
}
.ga-respaldo .bi { color: var(--ga-gold); flex: none; margin-top: 2px; }


/* Confirmación del wizard de consignación (paso 3). Es el mismo gesto que el
   `.ga-cot-ok` de la ficha, pero sobre marfil: allá el panel es carbón. */
.ga-cot-hecho {
  text-align: center;
  padding: var(--ga-s-5) 0;
}
.ga-cot-hecho .bi { font-size: 2.25rem; color: var(--ga-gold-ink); }
.ga-cot-hecho h2 { margin-top: var(--ga-s-4); }
.ga-cot-hecho p {
  font-size: var(--ga-t-sm);
  color: var(--ga-on-bone-mut);
  margin-top: var(--ga-s-2);
}