/* ============================================================================
 * tema-v2 / checkout.css  —  Fase 7, PR-7.6 (checkout consumidor + agente)
 * ----------------------------------------------------------------------------
 * 🔴 FLUJO DE MAYOR RIESGO (5 pasos hasta PlaceToPay). Restyle CSS **extra
 * conservador**: sólo color/forma de los indicadores de paso, paneles de
 * resumen/info y botones de hora. La verificación FUNCIONAL es manual (staging,
 * con login + carrito + recorrer pasos) — no es capturable headless.
 *
 * ⛔ NO SE TOCA — entrega a PlaceToPay (mapeada y evitada a propósito):
 *   - `#btn-pagar-pedido` / `.btn-pagar-pedido` (onclick `pagarOrdenPedido`) — hereda sólo 7.0.
 *   - `<script src="…secure.placetopay.ec/…/lightbox.min.js">` + `P.init()`.
 *   - `#urlGeneratePlaceToPay`, `.resultado-del-pago-orden`, CSP `frame-src`.
 * ⛔ NO SE TOCA — layout/JS del wizard:
 *   - el ancho `calc(100%/n)` de `.form-steps__item`, la línea conectora
 *     `.form-steps__item-line`, ni los `d-none` que el JS alterna por paso.
 *   - hooks `nextPaso`/`goStep`/`formPaso1`/`selectedHour`, radios `name=…`, ids.
 *
 * OVERRIDE-FIRST, scope a clases del checkout (`.form-steps__item-*`,
 * `.contenido-info-resumen`, `.contenedor-resumen-direccion-registrada`,
 * `.resumen-pedido`, `.btn-hora*`). 0 cambios de markup/JS.
 * ========================================================================== */

/* ===========================================================================
 * 1) INDICADOR DE PASOS  (.form-steps__item-icon)  — sólo color + transición.
 *    Alinea el azul del wizard (#133794) al azul de marca exacto. NO toca
 *    el ancho, la línea conectora ni la visibilidad por paso.
 * ========================================================================= */
.form-steps__item-icon {
	transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}
.form-steps__item--active .form-steps__item-icon {
	background-color: var(--bosch-azul);
	border-color: var(--bosch-azul);
}
.form-steps__item--completed .form-steps__item-icon {
	border-color: var(--bosch-azul);
	color: var(--bosch-azul);
}

/* ===========================================================================
 * 2) PANELES DE INFO / RESUMEN  (cajas grises → neutro de superficie + radio)
 * ========================================================================= */
.contenido-info-resumen,
.contenedor-resumen-direccion-registrada {
	background-color: var(--gris-50);
	border: 1px solid var(--gris-200);
	border-radius: var(--radio);
}

/* Resumen de pedido (aside + paso de resumen). `.resumen-pedido` se DIFERÍA de
 * 7.7 por compartirse con el checkout → se restila aquí (panel, sin hover). */
.resumen-pedido {
	border: 1px solid var(--gris-200);
	border-radius: var(--radio);
}

/* ===========================================================================
 * 3) BOTONES DE HORA DE ENTREGA  (.btn-hora*) — redondeo consistente.
 *    NO se tocan los estados que el JS pinta (.btn-hora-green/-gris con bg
 *    !important): sólo el radio.
 * ========================================================================= */
.btn-hora,
.btn-hora-white,
.btn-hora-green,
.btn-hora-gris {
	border-radius: var(--radio-btn);
}