/*
 * Estilos del wizard de Reservas ([asseo_reservas]).
 * Paleta de marca Asseo (variables :root definidas en
 * assets/css/portal-cliente/login.css, que se enqueue como dependencia de
 * este archivo, actualizadas 2026-07-31 al manual de marca oficial):
 * teal #075C5D primario, acento #17AEA2, mint #B1DACF.
 *
 * 2026-07-30: rediseño completo pedido via /ui-ux-pro-max a partir de un
 * screenshot exacto (tarjeta con stepper de circulos + linea de progreso,
 * grid de 2 columnas con panel de Resumen fijo al lado del formulario en
 * los pasos 1-4, barra de navegacion compartida abajo). Reemplaza el
 * layout anterior (una tarjeta separada por paso, sin resumen visible
 * hasta el paso 5).
 */

/*
 * 2026-07-31: el header (".asseo-wizard__topbar"), el stepper
 * (".asseo-wizard__stepper") y el formulario (".asseo-wizard__card") se
 * piden como UN SOLO modulo visual, sin gaps entre ellos. En vez de un
 * wrapper nuevo, ".asseo-wizard-wrap" (ya era el contenedor de ancho
 * 980px que los agrupaba a todos, exclusivo de Reservas — no lo usa
 * ningun otro modulo) pasa a ser esa tarjeta compartida: fondo blanco +
 * radio 16px + sombra unica. Cada hijo pierde su propio
 * fondo/radio/sombra/margen individual (eran de cuando cada uno se veia
 * como su propia tarjeta separada) y deja que overflow:hidden aca
 * recorte las esquinas.
 */
.asseo-wizard-wrap {
	max-width: 980px;
	margin: 0 auto;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	font-family: "Poppins", system-ui, sans-serif;
}

/* .asseo-portal__topbar (portal.css) trae su propio margin-bottom (20px)
   y max-width (1440px), pensados para cuando el header vivia SUELTO
   arriba de la tarjeta — ahora que esta dentro de ".asseo-wizard-wrap"
   (que ya define el ancho de 980px para los 3), ambos se anulan aca para
   que quede pegado al stepper sin hueco. No se toca .asseo-portal__topbar
   directamente porque ese mismo selector lo usan sin modificar el
   dashboard de Portal Cliente y el Panel Admin. */
.asseo-wizard__topbar {
	max-width: none;
	margin: 0;
	border-radius: 16px 16px 0 0;
}

/* Agrupa "Volver al portal" (solo si logged_in) + el logo/titulo a la
   izquierda del header — asi ".asseo-portal__topbar" (justify-content:
   space-between, portal.css) sigue viendo solo 2 hijos directos (este
   grupo + "Volver al sitio" a la derecha) y el logo no se corre hacia
   el centro al agregar el boton nuevo. */
.asseo-wizard__topbar-left {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.asseo-wizard__step-subtitle {
	margin: 4px 0 0;
	font-size: 13.5px;
	color: var(--asseo-text-secondary);
}

.asseo-wizard__step-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.asseo-wizard__step-head-text {
	min-width: 0;
}

/* Paso 1: espaciados especificos pedidos para el titulo/subtitulo y el
   selector de propiedad, distintos del resto de pasos (que usan el
   margin:0 del h2 y el margin:4px de ".step-subtitle" sin modificar).
   !important en el h2 porque ".asseo-wizard__step h2" ya define
   "margin: 0 !important" mas abajo — esta regla es mas especifica
   (2 clases + tag contra 1 clase + tag) asi que gana igual, pero se deja
   el !important explicito para que quede claro que es intencional, no
   un empate de especificidad accidental. */
.asseo-wizard__step-head-text h2 {
	margin-bottom: 8px !important;
}

.asseo-wizard__step-head-text .asseo-wizard__step-subtitle {
	margin-bottom: 16px;
}

.asseo-wizard__propiedad-selector {
	margin-bottom: 24px;
}

/* ============ Stepper: circulos numerados + linea de progreso ============ */

.asseo-wizard__stepper {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin: 0;
	padding: 16px 24px;
	background: #f0f9f8;
}

/*
 * La linea NO se posiciona directamente contra ".asseo-wizard__stepper"
 * (top:19px fijo) porque ese contenedor incluye el padding propio (16px)
 * Y el texto del paso debajo de cada circulo — un "top" fijo ahi se
 * desalinea apenas cambia cualquiera de esos dos valores (paso justo lo
 * que se reporto). En vez de eso, ".asseo-wizard__stepper-line-track" es
 * una caja invisible del mismo alto que el circulo (38px, ver
 * ".asseo-wizard__stepper-circle") y arranca justo donde termina el
 * padding-top del stepper (16px) — la linea real, adentro, se centra con
 * top:50%/translateY(-50%) relativo a ESA caja, asi que siempre cae en
 * el centro vertical exacto del circulo sin importar el texto de abajo.
 */
/*
 * Insets calculados, no aproximados: hay 5 pasos con "flex:1" repartidos
 * en partes iguales, asi que el CENTRO del primer/ultimo circulo cae
 * exactamente en el 10% del ancho del contenedor (1 / (2*5) = 10%), no
 * en el 50% — "left/right: calc(50% + Npx)" en los dos lados a la vez
 * habria hecho que el lado izquierdo empiece MAS A LA DERECHA que donde
 * termina el lado derecho (ancho negativo, la linea directamente no se
 * dibuja). Desde ese 10% se suma el radio real del circulo (19px, no
 * 20 — el circulo mide 38px de diametro) mas los 4px de aire pedidos
 * entre la linea y el borde del circulo: 19 + 4 = 23px.
 */
.asseo-wizard__stepper-line-track {
	position: absolute;
	left: calc(10% + 23px);
	right: calc(10% + 23px);
	top: 16px;
	height: 38px;
	z-index: 0;
}

.asseo-wizard__stepper-line {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	height: 2px;
	background: rgba(7, 92, 93, 0.18);
	border-radius: 2px;
}

.asseo-wizard__stepper-line-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--asseo-accent), var(--asseo-primary));
	border-radius: 2px;
	transition: width 0.35s ease;
}

.asseo-wizard__stepper-item {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
}

.asseo-wizard__stepper-circle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
	color: var(--asseo-primary);
	border: 2px solid rgba(255, 255, 255, 0.7);
	font-weight: 800;
	font-size: 14.5px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* ".asseo-wizard__stepper-circle" ya es flex + centrado (align-items y
   justify-content) — ese centrado alinea a ".stepper-check" como bloque
   dentro del circulo, pero el SVG del icono podia quedar corrido dentro
   de SU PROPIO span si este quedaba en "display:block" (line-height/
   baseline del span, no del circulo). Se centra el SVG tambien adentro
   de su propio span para que quede exacto sin importar eso. */
.asseo-wizard__stepper-check {
	display: none;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.asseo-wizard__stepper-item.is-active .asseo-wizard__stepper-circle {
	background: var(--asseo-primary);
	color: #fff;
	border-color: var(--asseo-primary);
	box-shadow: 0 0 0 4px #b1dacf;
}

.asseo-wizard__stepper-item.is-done .asseo-wizard__stepper-circle {
	background: var(--asseo-accent);
	border-color: var(--asseo-accent);
}

.asseo-wizard__stepper-item.is-done .asseo-wizard__stepper-number {
	display: none;
}

.asseo-wizard__stepper-item.is-done .asseo-wizard__stepper-check {
	display: flex;
}

.asseo-wizard__stepper-label {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--asseo-primary);
	white-space: nowrap;
	opacity: 0.55;
}

.asseo-wizard__stepper-item.is-active .asseo-wizard__stepper-label,
.asseo-wizard__stepper-item.is-done .asseo-wizard__stepper-label {
	opacity: 1;
}

/* ============ Tarjeta contenedora (todo el wizard vive adentro) ============ */

.asseo-wizard__card {
	background: #fff;
	border-radius: 0 0 16px 16px;
	overflow: hidden;
}

.asseo-wizard__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 18px;
	align-items: stretch;
	padding: 26px 28px 8px;
}

/*
 * !important a proposito: .asseo-btn ya lleva "display:inline-block
 * !important" (necesario para el Kit de Elementor, ver login.css) — eso
 * gana por origen de cascada sobre el "[hidden]{display:none}" del
 * navegador aunque este ultimo sea mas especifico, asi que hay que forzar
 * el ocultamiento real aca. Mismo motivo para el grid: su propio
 * "display:grid" (normal, autor) tambien le ganaria al "[hidden]" del
 * navegador si no se refuerza.
 */
.asseo-wizard__grid[hidden] {
	display: none !important;
}

.asseo-wizard__nav .asseo-btn[hidden] {
	display: none !important;
}

.asseo-wizard__main {
	background: rgba(243, 251, 250, 0.7);
	border: 1px solid rgba(177, 218, 207, 0.5);
	border-radius: 18px;
	padding: 24px;
	min-height: 300px;
}

.asseo-wizard__step {
	display: none;
}

.asseo-wizard__step.is-active {
	display: block;
}

/* ============ Tabs de modalidad (Hogar / Oficina) ============ */

.asseo-wizard__tabs {
	display: flex;
	gap: 10px;
	margin: 16px 0 4px;
	flex-wrap: wrap;
}

/*
 * !important en color/background/border a proposito: "Hogar"/"Oficina"
 * son <button>, y el reset.css de Hello Elementor trae
 * "[type=button],button { border: 1px solid #c36; background-color:
 * transparent; color: #c36 }" — attribute selector, misma especificidad
 * (0,1,0) que ".asseo-wizard__tab" sola, y ese reset se carga DESPUES de
 * este archivo en el <head>, asi que en un empate gana el que carga
 * ultimo. Eso era el borde/tono rojo que se veia en "Oficina" (el activo
 * no lo mostraba porque el problema estaba solo en el color por defecto,
 * no en que "ganara" o no — igual estaba perdiendo el pulso de
 * especificidad, solo que por casualidad el resultado visual coincidia).
 */
/*
 * !important en display/width/height/padding tambien a proposito (no solo
 * color/background/border como antes): el reset.css de Hello Elementor
 * trae "[type=button],button { display:inline-block; width:auto;
 * padding:.5rem 1rem }" — misma especificidad (0,1,0) que esta clase,
 * cargado despues en el <head>, asi que sin !important esas 3 propiedades
 * le ganaban a las nuestras en "Hogar"/"Oficina" (<button>): volvian a
 * inline-block sin flex real (icono/texto sin centrar) y a ancho auto —
 * esa era la desalineacion entre los botones que se reporto.
 */
.asseo-wizard__tab {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 160px !important;
	height: 48px !important;
	box-sizing: border-box;
	white-space: nowrap;
	border: 1.5px solid var(--asseo-primary) !important;
	background: #fff !important;
	color: var(--asseo-primary) !important;
	border-radius: 999px;
	padding: 0 12px !important;
	cursor: pointer;
	font-weight: 700;
	font-size: 13.5px;
	font-family: inherit;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.asseo-wizard__tab.is-active {
	background: var(--asseo-primary) !important;
	color: #fff !important;
	border: none !important;
}

/* "[hidden]" nativo pone "display:none" sin !important — pierde contra
   el "display:flex !important" de arriba (mismo motivo documentado ahi:
   el reset de Hello Elementor obligo a reforzar esa propiedad). Se
   necesita para el pre-filtro por tipo de propiedad (2026-08-20, pedido
   explicito, ver wizard.js/aplicarFiltroModalidadPorTipoPropiedad()):
   cuando la propiedad elegida es "Hogar" u "Oficina", la pestaña que no
   corresponde se oculta por completo, no solo se deja de preseleccionar. */
.asseo-wizard__tab[hidden] {
	display: none !important;
}

.asseo-wizard__hint {
	background: var(--asseo-warning-bg);
	color: var(--asseo-warning-text);
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 13px;
	/* Sin esto, texto de varias lineas (ej. el aviso de "Auxiliares de
	   limpieza disponibles"/"No hay auxiliares...") hereda el line-height
	   por defecto del navegador (~1.2) — se ve apretado/desparejo,
	   reportado como "textos no estan bien alineados" (2026-08-20,
	   /ui-ux-pro-max). 1.5 es el estandar de legibilidad para texto de
	   parrafo (regla "line-height"), consistente con el resto del plugin. */
	line-height: 1.5;
	margin-top: 12px;
}

/* Aviso "Estos datos se toman de tu perfil registrado..." (paso "Tu
   asistente de limpieza", 2026-08-12, pedido explicito) — texto simple,
   sin caja de color (no es una advertencia como ".asseo-wizard__hint",
   solo un dato informativo con un link). Color/subrayado del link:
   valores exactos pedidos, "#075C5D" en minuscula porque asi ya esta
   definido "--asseo-primary" en este proyecto (ver login.css), pero se
   deja el hex literal aca porque el pedido especifico el color a mano,
   no "usa el primary" — coinciden en valor de todos modos. */
.asseo-wizard__hint-perfil {
	font-size: 13px;
	color: var(--asseo-text-secondary);
	margin: 0 0 14px;
}

.asseo-wizard__link-perfil {
	color: #075c5d;
	text-decoration: underline;
	font-weight: 600;
}

/* Alerta del rango "121 m² o mas" (paso 1, filtro por propiedad elegida
   en el paso 3): mismos colores que ".asseo-wizard__hint", solo agrega el
   layout flex para el icono + texto. margin-bottom en vez de solo
   margin-top porque va ANTES de las tarjetas de servicio, no despues de
   otro bloque como el resto de los ".asseo-wizard__hint". */
.asseo-wizard__metraje-alerta {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 0;
	margin-bottom: 16px;
}

.asseo-wizard__metraje-alerta svg {
	flex: none;
	margin-top: 1px;
}

.asseo-wizard__metraje-alerta[hidden] {
	display: none;
}

/* Nota informativa (no es advertencia): mismo layout que
   ".asseo-wizard__metraje-alerta". Paleta cambiada de azul a teal
   (2026-08-12, pedido explicito: "aplicar este mismo estilo a TODOS los
   avisos informativos del modulo de reservas") — antes era azul con el
   mismo criterio de color que el aviso de Wompi del paso de revision
   (".asseo-wizard__step--revision .asseo-wizard__hint": amarillo =
   "necesita atencion", azul = "solo informativo"); ese criterio de
   familia de color se mantiene igual, solo cambia el tono azul por el
   teal de marca. Como ".asseo-wizard__hint--info" siempre se usa junto
   con ".asseo-wizard__hint" (ver PHP, las 3 apariciones en este modulo
   usan ambas clases), "padding"/"border-radius" tambien se redefinen
   aca — si no, seguirian heredando los valores de ".asseo-wizard__hint"
   (10px 14px / 10px), que ya no coinciden con lo pedido (12px 16px /
   8px). */
.asseo-wizard__hint--info {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 0;
	margin-bottom: 16px;
	padding: 12px 16px;
	border-radius: 8px;
	background: #e8f5f5;
	border: none;
	border-left: 3px solid #075c5d;
	color: #075c5d;
}

.asseo-wizard__hint--info svg {
	flex: none;
	margin-top: 1px;
	color: #075c5d;
}

/* ============ Tarjetas de servicio ============ */

.asseo-wizard__servicios {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
	margin: 18px 0 4px;
	align-items: stretch;
}

.asseo-wizard__servicio-card,
.asseo-wizard__auxiliar-card {
	position: relative;
	background: #fff;
	border: 1.5px solid var(--asseo-mint);
	border-radius: 16px;
	padding: 18px;
	text-align: left;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

/* "border-radius: 12px" + "overflow: hidden" (2026-08-10, pedido
   explicito) escopados SOLO a la card de servicio, no a
   ".asseo-wizard__auxiliar-card" (paso 4, sin relacion con este pedido)
   con la que comparte la regla de arriba — el "overflow: hidden" es
   para que ".asseo-wizard__servicio-franja" (franja superior de color,
   ver mas abajo) respete la esquina redondeada en vez de sobresalir en
   angulo recto. No afecta al box-shadow de hover/focus de abajo — el
   "overflow" de un elemento no recorta su propia sombra, solo lo que
   hay DENTRO de el. */
.asseo-wizard__servicio-card {
	border-radius: 12px;
	overflow: hidden;
	height: 100%;
}

.asseo-wizard__servicio-card:hover,
.asseo-wizard__auxiliar-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 26px rgba(43, 181, 175, 0.12);
}

.asseo-wizard__servicio-card:focus-visible,
.asseo-wizard__auxiliar-card:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(23, 174, 162, 0.3);
}

.asseo-wizard__servicio-card.is-selected,
.asseo-wizard__auxiliar-card.is-selected {
	border-color: var(--asseo-accent);
	background: var(--asseo-bg-light-2);
}

.asseo-wizard__servicio-check {
	position: absolute;
	top: 14px;
	right: 14px;
	display: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--asseo-primary);
	color: #fff;
}

.asseo-wizard__servicio-card.is-selected .asseo-wizard__servicio-check {
	display: flex;
}

/* Card "Agotado" (2026-08-17, pedido explicito) — a diferencia de un
   servicio inactivo (que ni siquiera llega a esta lista, ver
   get_servicios()), el cliente SI debe seguir viendo esta card, solo
   que sin poder seleccionarla. wizard.js ya bloquea el click/Enter por
   "data-agotado"; esto es solo la señal visual. Se apaga el hover de
   la card base (mismo selector combinado con ".asseo-wizard__auxiliar-card"
   mas arriba) sin tocarlo a el. El ">*:not(...)" atenua el contenido
   (h3, duracion, precio, incluye) pero deja el banner de abajo y el
   check (que nunca se muestra en una card agotada, pero por si acaso)
   con su color real. */
.asseo-wizard__servicio-card--agotado {
	cursor: not-allowed;
	border-color: #ddd;
}

.asseo-wizard__servicio-card--agotado:hover {
	transform: none;
	box-shadow: none;
	border-color: #ddd;
}

.asseo-wizard__servicio-card--agotado > *:not(.asseo-wizard__servicio-agotado-banner):not(.asseo-wizard__servicio-check) {
	opacity: 0.55;
}

/* Banner en flujo normal (no absolute como ".asseo-wizard__servicio-franja"
   de abajo) — bleed a los bordes con margenes negativos que cancelan el
   "padding: 18px" de la card; el "overflow: hidden" de la card (ver
   ".asseo-wizard__servicio-card" mas arriba) se encarga de redondear las
   esquinas superiores sin que el banner necesite su propio border-radius. */
.asseo-wizard__servicio-agotado-banner {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: -18px -18px 12px;
	padding: 6px 18px;
	background: var(--asseo-warning-bg);
	color: var(--asseo-warning-text);
	font-size: 12px;
	font-weight: 700;
}

/* Badge inline reusable "Agotado" (2026-08-17, extendido a Adicionales y
   Kits) — a diferencia del banner de arriba (pensado para una card
   entera), este va PEGADO al nombre del item (adicional/kit), que no
   tiene una franja propia donde poner un aviso de ancho completo. */
.asseo-wizard__badge-agotado {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	border-radius: 999px;
	padding: 2px 8px;
	margin-left: 6px;
	font-size: 10.5px;
	font-weight: 700;
	white-space: nowrap;
	background: var(--asseo-warning-bg);
	color: var(--asseo-warning-text);
}

/* Franja superior de color (2026-08-10, pedido explicito) — reemplaza
   el badge flotante de esquina de la version anterior (mismo dia, ver
   historial en DOCUMENTACION_TECNICA.md). "top/left/right: 0" con la
   card en "position: relative" hace que la franja ocupe todo el ancho
   ignorando el "padding: 18px" de la card (el "containing block" de un
   elemento absoluto es la padding-box del ancestro posicionado, asi que
   0/0/0 llega hasta el borde real) — combinado con el "overflow: hidden"
   de la card (ver arriba), respeta la esquina redondeada en vez de
   sobresalir en angulo recto. */
.asseo-wizard__servicio-franja {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 32px;
	display: flex;
	align-items: center;
	padding-left: 16px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

/* Colores pedidos explicitamente. Aviso de contraste (no bloqueante,
   informativo): texto blanco sobre estos 2 fondos da ~2.4:1 y ~2.5:1
   respectivamente — por debajo del minimo de accesibilidad WCAG AA
   (4.5:1 para texto de 12px). Si se reporta que se ve poco legible, la
   correccion es oscurecer cada tono ~15-20% sin cambiarle la identidad
   (ej. #d4a017→#a67d12, #2bb5af→#1f8f8a), no cambiar el texto a otro
   color. */
.asseo-wizard__servicio-franja--destacada {
	background: #d4a017;
}

.asseo-wizard__servicio-franja--recomendada {
	background: #2bb5af;
}

/* El check de "seleccionado" (top:14px normalmente) queda dentro de la
   franja (0-32px) si no se corre — 32px de franja + 14px del offset
   normal. */
.asseo-wizard__servicio-card--con-franja .asseo-wizard__servicio-check {
	top: 46px;
}

/* La franja es "position: absolute" (no le resta espacio al padding-top
   de 18px de la card que ya trae ".asseo-wizard__servicio-card"), asi
   que el contenido (h3, duracion, precio, incluye) necesita su propio
   padding-top para no quedar tapado por los primeros 32px: 32px de
   franja + 12px de aire = 44px, en vez del "padding: 18px" (que sigue
   aplicando igual para abajo/los lados) de las cards sin franja. */
.asseo-wizard__servicio-card--con-franja {
	padding-top: 44px;
}

.asseo-wizard__servicio-tag {
	color: var(--asseo-text-secondary) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	margin: 0 0 10px !important;
	padding-right: 22px;
}

/*
 * Badge de disponibilidad ("Disponible solo sabados" / "en la mañana" /
 * "en la tarde"). Aviso informativo, no un bloqueo — la fecha real recien
 * se elige en el paso 4 (ver Asseo_App_Reservas::etiqueta_disponibilidad()).
 */
.asseo-wizard__servicio-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 0 10px !important;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--asseo-warning-bg);
	color: var(--asseo-warning-text);
	font-size: 11.5px !important;
	font-weight: 700 !important;
}

.asseo-wizard__servicio-precio {
	font-weight: 800;
	font-size: 18px;
	color: var(--asseo-teal);
}

.asseo-wizard__servicio-precio span {
	font-weight: 600;
	font-size: 12px;
	color: var(--asseo-text-secondary);
}

/* Selector interno Mañana/Tarde de "Media Jornada Oficina" (2026-08-11)
   — 2 <button> reales (no <div role="button">, ver PHP/wizard.js), asi
   que ya son accesibles por teclado sin CSS ni JS extra para eso.
   "!important" en casi todo (2026-08-11, reportado con screenshot: solo
   se veia "Mañana", a lo ancho, con borde rosado) — Hello Elementor
   (reset.css) trae "[type=button], [type=submit], button { ... }", y
   "[type=button]" empata en especificidad (0,1,0) con esta clase — al
   empatar gana el que carga despues en la cascada, que resulto ser el
   del tema. Mismo problema ya documentado varias veces en este archivo
   con otros botones (".asseo-reserva-modal__cerrar-x", etc.) — la unica
   forma de no depender del orden de carga es "!important" en cada
   propiedad que el reset tambien fija (background-color, border,
   border-radius, color, display, padding, text-align, white-space). */
.asseo-wizard__servicio-oficina-toggle {
	display: flex;
	gap: 8px;
	margin: 10px 0;
}

.asseo-wizard__servicio-oficina-opcion {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center;
	gap: 2px;
	padding: 8px 6px !important;
	border: 1.5px solid var(--asseo-primary) !important;
	border-radius: 10px !important;
	background: #fff !important;
	font-family: inherit;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: var(--asseo-primary) !important;
	text-align: center !important;
	white-space: normal !important;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.asseo-wizard__servicio-oficina-opcion span {
	font-size: 13px;
	font-weight: 800;
	color: var(--asseo-teal);
}

/* "[type=button]:hover"/"button:hover" del reset (mismo archivo, ver
   comentario arriba) tambien fija "background-color:#c36; color:#fff"
   en hover — mismo empate de especificidad, por eso el "!important" acá
   también, no solo en el "border-color". ":not(.is-selected)" para que el
   hover no le gane visualmente al estilo "seleccionado" (mismo criterio
   de toggle que ".asseo-wizard__tab", que tampoco define un hover propio
   distinto de ".is-active"). */
.asseo-wizard__servicio-oficina-opcion:hover:not(.is-selected) {
	border-color: var(--asseo-accent) !important;
	background: #fff !important;
	color: var(--asseo-primary) !important;
}

/* Mismo toggle visual que "Hogar"/"Oficina" (".asseo-wizard__tab.is-active"
   mas arriba en este archivo): seleccionado = fondo #075C5D solido, texto
   blanco (incluido el precio en el <span> de adentro, que por defecto usa
   el teal de marca y quedaria ilegible sobre fondo oscuro sin este
   override). "Mañana" viene con esta clase ya puesta en el PHP por
   defecto (ver render_servicio_oficina_media_jornada()) — nunca arranca
   sin ninguna de las 2 opciones marcada. */
.asseo-wizard__servicio-oficina-opcion.is-selected {
	border-color: var(--asseo-primary) !important;
	background: var(--asseo-primary) !important;
	color: #fff !important;
}

.asseo-wizard__servicio-oficina-opcion.is-selected span {
	color: #fff !important;
}

/* Mañana/Tarde agotada (2026-08-17, pedido explicito) — el boton ya
   nace con "disabled" real desde PHP (un <button disabled> nativo no
   dispara click solo, no hace falta guard de JS aparte), esto es la
   señal visual. ":disabled" cubierto tambien por si el navegador no
   aplica la clase modificadora en algun caso raro. Mismo "!important"
   que el resto de este selector (ver comentario grande arriba) porque
   pelea contra el mismo reset de Hello Elementor. */
.asseo-wizard__servicio-oficina-opcion--agotado,
.asseo-wizard__servicio-oficina-opcion:disabled {
	cursor: not-allowed !important;
	opacity: 0.55;
	border-color: var(--asseo-text-secondary) !important;
	color: var(--asseo-text-secondary) !important;
	background: var(--asseo-bg-light-2) !important;
}

.asseo-wizard__servicio-oficina-opcion--agotado span,
.asseo-wizard__servicio-oficina-opcion:disabled span {
	color: var(--asseo-text-secondary) !important;
}

.asseo-wizard__servicio-incluye-titulo {
	margin: 10px 0 4px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--asseo-label-dark) !important;
}

.asseo-wizard__servicio-incluye {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.asseo-wizard__servicio-incluye li {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: 12px;
	color: var(--asseo-text-secondary);
	line-height: 1.4;
}

.asseo-wizard__servicio-incluye li svg {
	flex: none;
	margin-top: 1px;
	color: var(--asseo-success-text);
}

/*
 * "Beneficios laborales" (2026-08-10): ya no se repite dentro de cada
 * card — ahora es esta seccion unica debajo de la grilla completa (se
 * quitaron las reglas de la version por-card,
 * ".asseo-wizard__servicio-beneficios-titulo"/"-disclaimer-list").
 * Lista vertical (2026-08-10, corregido el mismo dia): la primera
 * version era una fila horizontal con "·" como separador entre items,
 * pero al envolver en pantallas angostas el "·" quedaba flotando
 * desalineado del icono de la linea siguiente (reportado con
 * screenshot). Vertical, un item por linea, icono+texto siempre
 * alineados a la izquierda — mismo patron ya usado sin problemas en
 * ".asseo-wizard__servicio-incluye" un poco mas arriba.
 */
.asseo-wizard__beneficios-compartidos {
	margin: 4px 0 16px;
	padding-top: 12px;
	border-top: 1px dashed rgba(43, 181, 175, 0.14);
}

.asseo-wizard__beneficios-compartidos-titulo {
	margin: 0 0 8px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--asseo-label-dark) !important;
}

.asseo-wizard__beneficios-compartidos-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.asseo-wizard__beneficios-compartidos-list li {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--asseo-text-secondary);
	line-height: 1.4;
}

.asseo-wizard__beneficios-compartidos-list li svg {
	flex: none;
	color: var(--asseo-success-text);
}

/*
 * !important en "background"/"color" a proposito (mismo motivo que
 * ".asseo-wizard__tab" arriba): es un <button>, y el Kit de Elementor
 * define ".elementor-kit-832 button" con background-color solido y
 * color:#FFFFFF, mas especifico que esta clase sola. Sin esto el boton
 * quedaria con un fondo de color solido en vez de transparente, y el
 * texto/icono blanco en vez de teal.
 */
.asseo-wizard__ver-detalle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 8px;
	padding: 0;
	background: none !important;
	border: none !important;
	color: var(--asseo-teal) !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	cursor: pointer;
	text-decoration: underline;
	font-family: inherit;
}

.asseo-wizard__servicio-detalle {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed rgba(43, 181, 175, 0.16);
	font-size: 13px;
	color: var(--asseo-text-secondary);
	line-height: 1.55;
}

.asseo-wizard__servicio-detalle p:last-child {
	margin-bottom: 0;
}

/*
 * Modal de "Servicios adicionales" (2026-07-30): overlay oscuro encima de
 * todo el formulario, se abre solo cuando el servicio elegido en el paso 1
 * tiene adicionales (Jornada Completa / Jornada Completa Sabado). Oculto
 * por default con el atributo nativo "hidden" — como ".asseo-btn" y otras
 * clases de este mismo archivo ya usan "display:... !important" en varios
 * lugares, se refuerza el ocultamiento real aca tambien (mismo gotcha que
 * ".asseo-wizard__grid[hidden]" mas arriba).
 */
.asseo-wizard__adicionales-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(7, 92, 93, 0.6);
	animation: asseoAdicionalesFadeIn 0.25s ease both;
}

.asseo-wizard__adicionales-modal-overlay[hidden] {
	display: none !important;
}

@keyframes asseoAdicionalesFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.asseo-wizard__adicionales-modal-overlay {
		animation: none;
	}
}

.asseo-wizard__adicionales-modal {
	width: min(560px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 24px;
	padding: 22px;
	box-shadow: 0 30px 70px rgba(7, 92, 93, 0.35);
}

.asseo-wizard__adicionales-modal h3 {
	color: var(--asseo-primary) !important;
	font-weight: 800 !important;
	font-size: 18px !important;
	margin: 0 !important;
}

.asseo-wizard__adicionales-modal-subtitulo {
	margin: 3px 0 12px;
	font-size: 13px;
	color: var(--asseo-text-secondary);
}

/*
 * "Ver condiciones del servicio" (2026-08-12, pedido explicito) —
 * reemplaza los 2 avisos azules sueltos y siempre visibles que habia
 * antes (el aviso fijo de insumos + la duracion del servicio, cada uno
 * con su propia caja "hint--info"/texto simple). Ahora es un <details>
 * nativo: colapsado por defecto, sin JS para abrir/cerrar (el navegador
 * ya lo hace solo), wizard.js solo llena el texto de duracion segun el
 * panel activo — ver abrirModalAdicionales().
 */
.asseo-wizard__condiciones {
	margin-bottom: 14px;
}

.asseo-wizard__condiciones-resumen {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--asseo-primary);
	list-style: none;
}

/* Chrome/Firefox agregan un triangulo nativo antes del <summary> — se
   reemplaza por el propio icono "info" (ya en el markup) para no tener
   2 indicadores redundantes de "esto se puede abrir". */
.asseo-wizard__condiciones-resumen::-webkit-details-marker {
	display: none;
}

.asseo-wizard__condiciones-resumen svg {
	flex: none;
	color: var(--asseo-teal);
}

.asseo-wizard__condiciones-contenido {
	margin-top: 8px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #ebf5ff;
	border: 1px solid #90c4f0;
	color: #2e6da4;
	font-size: 12.5px;
	line-height: 1.5;
}

.asseo-wizard__condiciones-contenido p {
	margin: 0 0 8px !important;
}

.asseo-wizard__condiciones-contenido p:last-child {
	margin-bottom: 0 !important;
}

.asseo-wizard__condiciones-duracion[hidden] {
	display: none !important;
}

.asseo-wizard__adicionales-panel {
	margin-top: 14px;
}

.asseo-wizard__adicionales-max-msg {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px !important;
	padding: 9px 12px;
	border-radius: 10px;
	background: var(--asseo-warning-bg);
	color: var(--asseo-warning-text);
	font-size: 12.5px !important;
	font-weight: 600 !important;
}

.asseo-wizard__adicionales-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/*
 * Tarjeta de una sola fila: icono | texto (nombre+descripcion+precio en
 * badge+nota) | checkbox. El checkbox es un item de flex normal (ya NO
 * position:absolute) — al ir al final de la fila y el texto ser
 * "flex:1", queda solo a la derecha sin necesidad de sacarlo del flujo,
 * y "align-items:center" en el contenedor lo centra verticalmente.
 *
 * 2026-08-03: "display"/"flex-direction"/"align-items" pasan a
 * "!important". Un screenshot real mostro el icono, el nombre, la
 * descripcion, el precio y el checkbox apilados uno debajo del otro
 * (columna, checkbox abajo a la izquierda) pese a que este selector ya
 * tenia "display:flex" sin !important — algo con mas peso (Kit de
 * Elementor / reset del tema, mismo tipo de conflicto ya documentado en
 * ".asseo-wizard__tab" mas arriba en este archivo) le estaba ganando el
 * empate. Se fuerza aca por las dudas, en vez de seguir cazando la regla
 * exacta que lo pisaba.
 */
.asseo-wizard__adicional-item {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 12px;
	position: relative;
	background: #fff;
	border: 1.5px solid var(--asseo-mint);
	border-radius: 16px;
	padding: 12px;
	min-height: 60px;
	box-sizing: border-box;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(7, 92, 93, 0.06);
	transition: border-color 0.2s, background 0.2s, opacity 0.2s, box-shadow 0.2s;
}

.asseo-wizard__adicional-item:hover {
	box-shadow: 0 4px 12px rgba(7, 92, 93, 0.1);
}

.asseo-wizard__adicional-item:has(.asseo-wizard__adicional-checkbox:checked) {
	border: 2px solid #075c5d;
	background: #e8f5f5;
	/* compensa el 0.5px extra del borde (1.5px base -> 2px seleccionado)
	   para que el contenido no salte de posicion al seleccionar. */
	padding: 11.5px;
}

.asseo-wizard__adicional-item:has(.asseo-wizard__adicional-checkbox:disabled:not(:checked)) {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

.asseo-wizard__adicional-icono {
	flex: none !important;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #e8f5f5;
	color: var(--asseo-teal);
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.asseo-wizard__adicional-texto {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 5px;
	min-width: 0;
}

.asseo-wizard__adicional-nombre {
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	color: var(--asseo-primary);
}

.asseo-wizard__adicional-desc {
	font-size: 12px;
	line-height: 1.4;
	color: var(--asseo-text-secondary);
}

/* Nota de advertencia (ej. closets: "el cliente debe estar presente, no
   incluye joyas ni objetos de valor"), siempre visible, no oculta detras
   de ninguna interaccion porque es informacion de seguridad/responsabilidad.
   Antes era solo texto naranja; ahora es una caja con la paleta de marca
   (mismo lenguaje visual que otros avisos del wizard, ver
   ".asseo-wizard__step--revision .asseo-wizard__hint" mas abajo). */
.asseo-wizard__adicional-nota {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 6px;
	padding: 8px 10px;
	background: #e8f5f5;
	border-left: 3px solid #2bb5af;
	border-radius: 0 8px 8px 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	color: #075c5d;
}

.asseo-wizard__adicional-nota svg {
	flex: none;
	margin-top: 2px;
	color: #2bb5af;
}

/* Precio como badge chico, dentro del bloque de texto (ya no un chip
   grande centrado al lado del texto) — font-variant-numeric:tabular-nums
   evita que los digitos salten de ancho entre precios distintos (100,
   10.000, 156.000, etc).

   2026-08-04: paso de pill con solo contorno (fondo blanco + borde 1.5px)
   a pill "relleno" (fondo tintado, sin borde) — el contorno solo se leia
   plano/generico al lado del icono y el nombre, que ya usan el mismo
   verde solido. Mismo color de marca, mas presencia visual. */
.asseo-wizard__adicional-precio {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	margin-top: 2px;
	padding: 3px 11px;
	border-radius: 999px;
	background: #e8f5f5;
	border: none;
	font-size: 12.5px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--asseo-primary);
}

/* Checkbox personalizado (no el nativo del navegador) para poder
   controlar tamano/color exactos y que se vea igual en todos los
   navegadores. El check (::after) se dibuja solo cuando :checked, y el
   :has() de mas arriba ya tinta toda la card — este estilo cubre
   especificamente el cuadrito. "position:relative" (no "absolute": eso
   era lo que lo sacaba del flujo de la fila) se mantiene solo para que
   el "::after" del check siga anclado al propio cuadrito y no a toda la
   card.

   2026-08-04: "border-radius" paso de 50% (circulo) a 7px (cuadrado
   redondeado). El circulo se lee como radio button (eleccion unica), pero
   el cliente puede elegir varios adicionales a la vez (hasta 2 en Jornada
   Completa) — la forma visual contradecia el comportamiento real. Un
   cuadrado redondeado es el lenguaje visual estandar de checkbox. */
.asseo-wizard__adicional-checkbox {
	appearance: none !important;
	-webkit-appearance: none !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	/* margin-left:auto + align-self:center a proposito, aunque
	   ".adicional-texto" ya tiene flex:1 (que en teoria alcanza para
	   empujarlo a la derecha): son un refuerzo explicito para garantizar
	   columna derecha + centro vertical pase lo que pase con el resto de
	   la fila, en vez de depender de un solo mecanismo. !important por el
	   mismo motivo que en ".asseo-wizard__adicional-item" mas arriba. */
	margin: 0 0 0 auto !important;
	align-self: center !important;
	position: relative;
	width: 24px;
	height: 24px;
	border: 2px solid #d9d9d9;
	border-radius: 7px;
	background: #fff;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}

.asseo-wizard__adicional-checkbox:checked {
	background: #075c5d;
	border-color: #075c5d;
}

.asseo-wizard__adicional-checkbox:checked::after {
	content: '';
	position: absolute;
	left: 8px;
	top: 4px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

.asseo-wizard__adicional-checkbox:disabled {
	cursor: not-allowed;
}

.asseo-wizard__adicional-checkbox:focus-visible {
	outline: 2px solid var(--asseo-accent);
	outline-offset: 2px;
}

/* Kits de limpieza (2026-08-11) — seccion compartida debajo de los
   adicionales clasicos, dentro del mismo modal. */
.asseo-wizard__kits-seccion {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid rgba(7, 92, 93, 0.14);
}

.asseo-wizard__kits-titulo {
	margin: 0 0 10px !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	color: var(--asseo-primary) !important;
}

.asseo-wizard__kits-comparar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 12px;
}

/* Unificado con ".asseo-wizard__adicional-item" (2026-08-12, pedido
   explicito, valores EXACTOS pedidos) — aviso honesto: estos valores NO
   coinciden con los reales de ".asseo-wizard__adicional-item" hoy
   (ese usa border:1.5px var(--asseo-mint), radius:16px, padding:12px),
   asi que tras este cambio las cards de kits y de adicionales van a
   verse distintas entre si pese al nombre de este comentario. Se
   aplicaron los valores tal cual se pidieron; si la intencion real era
   que combinaran con adicionales, falta ajustar TAMBIEN esa regla. */
.asseo-wizard__kit-card {
	position: relative;
	background: #fff;
	border: 1px solid #e0f5f5;
	border-radius: 12px;
	padding: 16px;
}

.asseo-wizard__kit-card--ancho-completo {
	grid-column: 1 / -1;
}

/* Foto del kit (2026-08-18, pedido explicito: "Kit Premium Tabiclean",
   ver render_kit_card()) — opcional, solo aplica si el kit tiene imagen
   destacada asignada ("Kit Básico"/"Kit Plus" hoy no tienen y siguen
   exactamente igual que antes, sin este bloque). El padding se mueve
   de la card entera a ".kit-info" para que la foto pueda tocar los
   bordes de la card (efecto "banner"), en vez de quedar con un marco
   blanco alrededor. */
.asseo-wizard__kit-card--con-foto {
	padding: 0;
	overflow: hidden;
}

.asseo-wizard__kit-card--con-foto .asseo-wizard__kit-info {
	padding: 16px;
}

/* "aspect-ratio: 3/2" aqui es solo un FALLBACK (2026-08-18, corregido
   el mismo dia, 2do intento — reportado de nuevo con captura: "no esta
   proporcional y hay partes que se cortan", esta vez con una foto
   VERTICAL que un valor fijo horizontal recortaba). La proporcion real
   ahora se calcula por foto en PHP (ver render_kit_card(), usa las
   dimensiones reales del adjunto) y se aplica inline vía "style"; este
   valor solo aplicaria si por algun motivo no se pudo leer el tamaño
   del adjunto. */
.asseo-wizard__kit-foto {
	width: 100%;
	aspect-ratio: 3 / 2;
}

.asseo-wizard__kit-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* En ancho completo (unico caso real hoy: el Kit Premium) hay espacio
   de sobra para poner la foto al lado del contenido en vez de arriba —
   se aprovecha mejor una foto panoramica de producto que una franja
   angosta. Escopado a "min-width:640px" para no apretar texto+foto uno
   al lado del otro en pantallas chicas (ahi se apila, igual que
   cualquier otro kit). */
@media (min-width: 640px) {
	/*
	 * "display: grid" con columnas 45%/55% (2026-08-18, pedido explicito,
	 * valores exactos pedidos) — antes era flex con la foto a un ancho
	 * fijo de 320px; a un ancho de card muy angosto eso le dejaba muy
	 * poco espacio a la columna de texto (el titulo terminaba
	 * partiendose mal). Con columnas porcentuales, "kit-info" siempre
	 * tiene el 55% real disponible sin importar el ancho total de la
	 * card. "align-items: center" (ya explicado antes de este cambio, se
	 * mantiene igual): la foto conserva su "aspect-ratio: 3/2" real y se
	 * centra junto al texto, sin importar cual de los 2 sea mas alto.
	 */
	.asseo-wizard__kit-card--ancho-completo.asseo-wizard__kit-card--con-foto {
		display: grid;
		grid-template-columns: 45% 55%;
		gap: 20px;
		align-items: center;
	}

	.asseo-wizard__kit-card--ancho-completo.asseo-wizard__kit-card--con-foto .asseo-wizard__kit-info {
		min-width: 0;
	}
}

/* Kit agotado (2026-08-17, pedido explicito) — los botones +/- ya nacen
   con "disabled" real desde PHP (mismo criterio que ".asseo-wizard__
   servicio-oficina-opcion--agotado"), asi que ":disabled" alcanza para
   su estado visual sin necesitar la clase de la card como selector. */
.asseo-wizard__kit-card--agotado {
	opacity: 0.6;
}

.asseo-wizard__kit-boton:disabled {
	cursor: not-allowed !important;
	opacity: 0.5;
	border-color: var(--asseo-text-secondary) !important;
	color: var(--asseo-text-secondary) !important;
}

/*
 * Badge "Eco-friendly" SIN position:absolute (2026-08-18, corregido el
 * mismo dia, 2do intento — el 1ro con ".kit-header" + position:relative/
 * absolute seguia cortando el titulo). Se abandona el posicionamiento
 * absoluto por completo: ahora es un <div> normal ANTES del <h5>, en el
 * flujo normal del documento (ver render_kit_card()) — "display:
 * inline-block" para que la caja no ocupe el ancho completo de la
 * columna (se ajusta al contenido del badge), "margin-bottom" lo separa
 * del titulo de abajo. Sin "position" en el badge ni en ningun wrapper,
 * no hay ninguna superposicion posible por diseño.
 */
.asseo-wizard__kit-badge-wrap {
	display: inline-block;
	margin-bottom: 6px;
}

.asseo-wizard__kit-badge-eco {
	border-radius: 20px;
	padding: 4px 10px;
	font-size: 11.5px;
	font-weight: 700;
	color: #fff;
	background: var(--asseo-teal);
	white-space: nowrap;
}

/* "padding-right" quitado (2026-08-18, ya no hace falta — el badge dejo
   de ser "position:absolute", asi que nunca se superpone con el titulo
   sin importar el ancho de la columna). */
.asseo-wizard__kit-nombre {
	margin: 0 0 4px !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	color: var(--asseo-primary) !important;
}

.asseo-wizard__kit-subtitulo {
	margin: 0 0 8px !important;
	font-size: 12px !important;
	color: var(--asseo-text-secondary) !important;
}

/* Precio + contador en una sola fila (2026-08-12, pedido explicito) —
   antes el precio era su propio bloque y el contador quedaba suelto
   debajo de la lista de "incluye". */
.asseo-wizard__kit-precio-fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.asseo-wizard__kit-precio {
	font-weight: 800;
	font-size: 16px;
	color: var(--asseo-teal);
}

/* Color de los items del "incluye" (2026-08-12, pedido explicito): antes
   var(--asseo-text-secondary) se leia con un tinte azulado que parecia
   texto clickeable — #4a5568 es un gris neutro sin ambiguedad.
   "!important" agregado 2026-08-18 (reportado 2 veces con captura, la
   lista seguia viendose teal en el sitio real a pesar de que el valor
   en la hoja ya era el correcto) — mismo motivo ya documentado muchas
   veces en este archivo/panel-admin-app.css: el reset de Hello
   Elementor le gana a un selector de una sola clase sin "!important".
   El icono de check TAMBIEN paso a este mismo gris a pedido explicito
   (2026-08-18) — antes se dejaba a proposito en el verde de marca por
   ser "decorativo", pero el pedido actual es que combine con el texto,
   no que se distinga. */
.asseo-wizard__kit-contenido {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12.5px;
	color: #4a5568 !important;
}

.asseo-wizard__kit-contenido li {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	color: #4a5568 !important;
}

.asseo-wizard__kit-contenido svg {
	flex: none;
	margin-top: 1px;
	color: #4a5568 !important;
}

/* Contador +/- — mismos "!important" que ".asseo-wizard__servicio-
   oficina-opcion" (ver esa regla mas abajo, mismo motivo exacto): Hello
   Elementor (reset.css) trae "[type=button], [type=submit], button" con
   la MISMA especificidad (0,1,0) que estas clases, y gana el que carga
   despues en la cascada. Sin esto, los botones +/- pierden su
   display/border/tamaño reales. */
/* "min-width:120px" + "justify-content:space-between" + "overflow:
   visible" (2026-08-18, pedido explicito, reportado: el boton "+"
   quedaba cortado) — sin un ancho minimo propio, el contador se
   achicaba a lo que sus 3 hijos ocupaban justo, y en la fila angosta
   junto al precio (".kit-precio-fila", display:flex) terminaba
   recortando el circulo del boton "+" contra el borde de la card. */
.asseo-wizard__kit-contador {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 120px;
	overflow: visible;
}

.asseo-wizard__kit-boton {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	border: 1.5px solid var(--asseo-mint) !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--asseo-primary) !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.asseo-wizard__kit-boton:hover {
	border-color: var(--asseo-accent) !important;
	background: #fff !important;
	color: var(--asseo-primary) !important;
}

.asseo-wizard__kit-cantidad {
	min-width: 20px;
	text-align: center;
	font-size: 15px;
	font-weight: 800;
	color: var(--asseo-primary);
}

.asseo-wizard__kits-nota {
	margin: 4px 0 0 !important;
	font-size: 12px !important;
	color: var(--asseo-text-secondary) !important;
}

@media (max-width: 640px) {
	.asseo-wizard__kits-comparar {
		grid-template-columns: 1fr;
	}
}

/*
 * Bug real corregido (2026-08-21, reportado con captura: "el texto del
 * boton se desfasa") — sin "align-items", un flex container usa
 * "stretch" por defecto: los 2 botones se estiran a la altura del mas
 * alto. "Continuar sin adicionales" (".asseo-btn--outline") tiene
 * borde de 1.5px; "Confirmar seleccion" (sin borde, "border:none" mas
 * abajo) es intrinsecamente un poco mas bajo, pero al estirarse a la
 * misma altura le queda un sobrante de espacio vertical — y un boton
 * no centra su texto solo por tener una caja mas alta (eso no es
 * automatico en CSS), asi que el texto se quedaba pegado arriba,
 * dejando el espacio de mas abajo. "align-items:center" hace que cada
 * boton ocupe solo la altura real de su propio contenido, sin estirar
 * a ninguno.
 */
.asseo-wizard__adicionales-modal-botones {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}

/*
 * Botones mas chicos que el tamano base de ".asseo-btn" (0.8em 1.8em a
 * 15px): con textos largos ("Continuar sin adicionales"/"Confirmar
 * seleccion") lado a lado, ese tamano no entraba en el ancho del modal
 * y forzaba scroll horizontal de toda la pagina (reportado con
 * screenshot). "min-width:0" es el fix real del overflow — por defecto
 * un item de flex no se achica mas alla del ancho de su contenido
 * ("min-width:auto"), asi que sin esto el boton mas largo podia seguir
 * empujando el ancho total aunque el font-size/padding bajen.
 */
.asseo-wizard__adicionales-modal-botones .asseo-btn[data-adicionales-confirmar] {
	border: none !important;
	font-weight: 700 !important;
}

/*
 * Bug real corregido (2026-08-21, "sigue igual" tras el fix anterior —
 * la linea vertical de la captura NO era el texto desfasado, era el
 * texto DESBORDADO): "min-width:0" (arriba) permite que el boton se
 * achique mas alla del ancho de su propio texto, pero "white-space:
 * nowrap" (del reset de botones del tema, nunca sobreescrito aca)
 * sigue prohibiendo que ese texto pase a una 2da linea — sin
 * "overflow"/"text-overflow", el texto que no entra simplemente se
 * renderiza POR ENCIMA del borde del boton, sin control, y terminaba
 * cortado a lo bruto por el borde redondeado del modal (eso es lo que
 * se veia como una linea vertical en medio de "Adicionales"). Con
 * "overflow:hidden"+"text-overflow:ellipsis", si el texto no entra se
 * trunca con "…" en vez de desbordarse sin contenerse.
 */
.asseo-wizard__adicionales-modal-botones .asseo-btn {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	padding: 0.6em 0.9em !important;
	font-size: 13px !important;
}

/*
 * Apilado vertical en pantallas angostas (2026-08-21, mismo bug de
 * arriba) — el "…" evita el desborde sin control, pero en un telefono
 * comun (~375px) el ancho disponible por boton no alcanza ni para
 * mostrar "Continuar sin adicionales" truncado con elegancia (quedaria
 * cortado casi de inmediato, "Continuar sin ad…") — un CTA truncado a
 * la mitad no es un buen resultado igual. Debajo de este ancho, los 2
 * botones se apilan uno sobre el otro (ancho completo cada uno) en vez
 * de competir por la misma fila.
 */
@media (max-width: 480px) {
	.asseo-wizard__adicionales-modal-botones {
		flex-direction: column;
	}

	.asseo-wizard__adicionales-modal-botones .asseo-btn {
		width: 100%;
	}
}

/* Aviso de disponibilidad en el paso 4 (fecha/hora incompatible con el
   servicio elegido en el paso 1). */
/* Calendario propio (2026-08-11) — reemplaza el <input type="date">
   nativo (ver comentario en PHP/wizard.js: ningun navegador soporta
   deshabilitar fechas sueltas dentro de un rango, solo min/max
   continuo). Los dias habilitados son <button> reales; los
   deshabilitados son <span> (nunca clickeables, y el "title" para el
   tooltip funciona sin pelear con estados disabled/aria-disabled). */
.asseo-wizard__calendario {
	border: 1.5px solid var(--asseo-mint);
	border-radius: 14px;
	padding: 14px;
	margin-top: 6px;
	max-width: 340px;
}

.asseo-wizard__calendario-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.asseo-wizard__calendario-mes {
	font-weight: 700;
	font-size: 14px;
	color: var(--asseo-primary);
	text-transform: capitalize;
}

/* Mismo motivo de "!important" que ".asseo-wizard__servicio-oficina-
   opcion"/".asseo-wizard__kit-boton" (ver esas reglas) — Hello Elementor
   (reset.css) trae "[type=button], [type=submit], button" con la MISMA
   especificidad (0,1,0), y gana el que carga despues en la cascada. */
.asseo-wizard__calendario-nav {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	border: 1.5px solid var(--asseo-mint) !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--asseo-primary) !important;
	cursor: pointer;
}

.asseo-wizard__calendario-nav:hover {
	border-color: var(--asseo-accent) !important;
	background: #fff !important;
	color: var(--asseo-primary) !important;
}

.asseo-wizard__calendario-dias-semana,
.asseo-wizard__calendario-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	text-align: center;
}

.asseo-wizard__calendario-dias-semana {
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 700;
	color: var(--asseo-text-secondary);
	text-transform: uppercase;
}

.asseo-wizard__calendario-vacio {
	aspect-ratio: 1;
}

.asseo-wizard__calendario-dia {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	aspect-ratio: 1;
	width: 100%;
	padding: 0 !important;
	border: 1.5px solid transparent !important;
	border-radius: 8px !important;
	background: transparent !important;
	color: var(--asseo-primary) !important;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
}

button.asseo-wizard__calendario-dia {
	cursor: pointer;
}

button.asseo-wizard__calendario-dia:hover {
	border-color: var(--asseo-mint) !important;
	background: var(--asseo-bg-light-2) !important;
}

.asseo-wizard__calendario-dia.is-selected {
	border-color: var(--asseo-accent) !important;
	background: var(--asseo-accent) !important;
	color: #fff !important;
}

span.asseo-wizard__calendario-dia.is-disabled {
	color: #b9c4c4 !important;
	cursor: not-allowed;
}

.asseo-wizard__calendario-seleccionada {
	margin: 8px 0 0 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--asseo-teal) !important;
}

.asseo-wizard__disponibilidad-error {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: -6px 0 16px;
	padding: 10px 14px;
	border-radius: 10px;
	background: #fdecea;
	color: var(--asseo-danger);
	font-size: 13px;
	font-weight: 600;
}

/* Titulo "Auxiliares de limpieza disponibles" (2026-08-12, pedido
   explicito) — el <svg> hereda "color" via "currentColor" (ver
   Asseo_App_Portal_Dashboard::icon()), no necesita una regla propia.
   Selector calificado con ".asseo-wizard__step" + "h4" a proposito: hay
   una regla generica ".asseo-wizard__step h4" (mas abajo en este mismo
   archivo) con "font-weight: 800 !important" — con solo la clase nueva
   (0,1,0) esa regla generica (0,1,1) le habria ganado por especificidad
   pese al !important de los 2 lados, dejando el font-weight pedido
   (600) sin aplicarse nunca. */
.asseo-wizard__step h4.asseo-wizard__auxiliares-titulo {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #075c5d !important;
	font-weight: 600 !important;
}

.asseo-wizard__auxiliares {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
	margin: 14px 0;
}

/* Estado "sin fecha seleccionada" (2026-08-12, pedido explicito) —
   reemplaza la card amarilla de advertencia: sin fondo/borde, icono +
   texto centrados. El <svg> del calendario toma el gris via
   "currentColor" (heredado de esta clase); el texto pisa su propio color
   distinto (mas oscuro que el icono, para que siga siendo legible). */
.asseo-wizard__auxiliares-vacio {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 12px;
	padding: 24px;
	color: #b0bec5;
}

.asseo-wizard__auxiliares-vacio p {
	margin: 0;
	color: #6b7280;
	font-size: 14px;
}

/* "overflow: hidden" (2026-08-18, pedido explicito, reportado: el boton
   "Elegir auxiliar de limpieza" se desbordaba de la card) — la card
   base (".asseo-wizard__servicio-card, .asseo-wizard__auxiliar-card",
   mas arriba) nunca lo necesito antes porque nunca tuvo un elemento que
   pudiera sobresalir. Combinado con el texto de boton mas corto
   ("Seleccionar") y las reglas de ".asseo-wizard__elegir-auxiliar" mas
   abajo, esto es la ultima barrera: aunque algo se desborde por
   cualquier motivo, la card lo recorta en vez de dejarlo salir. */
/* "display:flex; flex-direction:column" (2026-08-18, /ui-ux-pro-max,
   "mas profesional") — diagnostico real antes de tocar nada: la card es
   un grid item que ya se estira a la altura de la fila mas alta
   (comportamiento default de CSS Grid), pero el CONTENIDO de adentro
   seguia apilado como bloque normal — una auxiliar sin habilidades
   destacadas (badge) o con "especialidad" de una sola linea terminaba
   con su boton "Seleccionar" mas arriba que el de la card vecina en la
   misma fila (la que si tenia badge o texto de 2 lineas), aunque ambas
   cards midieran lo mismo por fuera. Con flex column + el boton en
   "margin-top:auto" (ver mas abajo), el boton siempre queda anclado
   abajo del todo sin importar cuanto contenido haya arriba — los
   botones de una misma fila quedan alineados entre si. */
.asseo-wizard__auxiliar-card {
	text-align: center;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Avatar con inicial (2026-08-18, pedido explicito, valores exactos
   pedidos) — circulo de 56px, mismo par de colores ya establecido para
   "card plana" en el resto del panel (fondo #E8F5F5 + texto/borde
   #075C5D, ver ".asseo-admin-kpi--flat" en panel-admin-app.css), asi
   que no es una paleta nueva aunque este archivo (wizard.css) no
   comparta hoja con ese. */
.asseo-wizard__auxiliar-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #e8f5f5;
	color: #075c5d;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 10px;
	font-size: 20px;
	font-weight: 700;
	flex: none;
	overflow: hidden;
}

/* Foto real (2026-08-19, bug encontrado en auditoria): el backend ya
   mandaba "auxiliar.foto" pero wizard.js nunca la usaba, mostraba
   siempre la inicial aunque la auxiliar tuviera foto de perfil real
   cargada — mismo criterio que el resto del portal (Mis reservas,
   Panel Admin): foto real cuando existe, inicial solo como respaldo. */
.asseo-wizard__auxiliar-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* Boton "Seleccionar" (2026-08-18, pedido explicito, reportado con
   captura: se desbordaba de la card con el texto largo de antes,
   "Elegir auxiliar de limpieza") — "box-sizing: border-box" agregado
   aca aunque no fue pedido explicitamente: sin el, "width:100%" +
   cualquier padding horizontal hace que el boton sea MAS ANCHO que el
   100% del contenedor (el default del navegador es "content-box"), lo
   que hubiera recreado el mismo desborde por otro motivo. */
.asseo-wizard__elegir-auxiliar {
	width: 100%;
	box-sizing: border-box;
	font-size: 14px;
	white-space: nowrap;
	padding: 10px 8px;
	/* "margin-top: auto" en vez de un valor fijo (2026-08-18, /ui-ux-pro-max)
	   — con la card ahora en flex-column (ver arriba), esto empuja el
	   boton al fondo de la card sin importar cuanto contenido haya
	   arriba, alineando los botones de toda la fila entre si. */
	margin-top: auto;
}

/* "!important" en border/outline/box-shadow (2026-08-18, reportado con
   captura: borde rojo/rosa visible) — mismo conflicto de especificidad
   con el reset de Hello Elementor ya documentado decenas de veces en
   este archivo/panel-admin-app.css: ".asseo-btn" ya trae "border: none"
   (login.css) pero SIN "!important", asi que el borde de color que el
   tema le pone por defecto a "button"/"[type=button]" le gana. Se
   cubren tambien hover/focus/active — esos estados pueden traer su
   propio borde/outline del tema si no se los bloquea aparte. */
.asseo-wizard__elegir-auxiliar,
.asseo-wizard__elegir-auxiliar:hover,
.asseo-wizard__elegir-auxiliar:focus,
.asseo-wizard__elegir-auxiliar:focus-visible,
.asseo-wizard__elegir-auxiliar:active {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: #075c5d !important;
}

.asseo-wizard__estrellas {
	color: var(--asseo-star);
	letter-spacing: 2px;
}

/* Habilidades destacadas de cada auxiliar (2026-08-14, pedido explicito,
   paso 4 "Auxiliares de limpieza disponibles") — badges chicos debajo
   del nombre, ej. "🧺 Planchado" · "🍳 Cocina". Mismo criterio de
   pastilla/radius 999px que ".asseo-portal__badge" (Portal Cliente),
   pero clase propia aca: wizard.css no carga portal.css, y esta card
   vive centrada (".asseo-wizard__auxiliar-card { text-align:center }"),
   necesita quedar centrada tambien con flex-wrap en vez de heredar ese
   text-align. */
.asseo-wizard__auxiliar-habilidades {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0 0 8px;
}

.asseo-wizard__auxiliar-habilidad {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--asseo-bg-light-2);
	color: var(--asseo-primary);
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

/* ============ Panel Resumen (sticky, visible en pasos 1-4) ============ */

.asseo-wizard__summary {
	position: sticky;
	top: 16px;
	background: #fff;
	border: 1px solid rgba(43, 181, 175, 0.1);
	border-radius: 18px;
	padding: 24px;
}

.asseo-wizard__summary-head {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 10px;
}

.asseo-wizard__summary-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: var(--asseo-bg-light-2);
	color: var(--asseo-teal);
	flex: none;
}

.asseo-wizard__summary-head h4 {
	color: var(--asseo-primary) !important;
	font-weight: 800 !important;
	font-size: 15px !important;
	margin: 0 !important;
}

.asseo-wizard__summary-rows {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.asseo-wizard__summary-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px dashed rgba(43, 181, 175, 0.14);
	font-size: 12.5px;
}

.asseo-wizard__summary-row:last-child {
	border-bottom: none;
}

.asseo-wizard__summary-row > span:first-child {
	color: var(--asseo-text-secondary);
	flex: none;
}

.asseo-wizard__summary-row > span:last-child {
	font-weight: 700;
	color: var(--asseo-primary);
	text-align: right;
	max-width: 58%;
	overflow-wrap: break-word;
}

.asseo-wizard__summary-total {
	margin: 12px 0;
	padding: 12px;
	border-radius: 14px;
	background: var(--asseo-bg-light-2);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.asseo-wizard__summary-total span:first-child {
	font-size: 12px;
	font-weight: 600;
	color: var(--asseo-teal);
}

.asseo-wizard__summary-total strong {
	font-family: "Poppins", sans-serif;
	font-weight: 800;
	font-size: 19px;
	color: var(--asseo-primary);
	white-space: nowrap;
}

.asseo-wizard__summary-total strong span:last-child {
	font-size: 12px;
	font-weight: 600;
	color: var(--asseo-text-secondary);
}

.asseo-wizard__summary-lock {
	font-size: 11.5px;
	color: var(--asseo-text-secondary);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
}

/*
 * Nudge de WhatsApp para mas frecuencia (2026-08-20, pedido explicito)
 * — texto pequeño y subordinado a proposito: la unica accion principal
 * de este panel sigue siendo "Total a pagar"/"Pago seguro", esto es
 * solo una invitacion secundaria, no una 2da CTA compitiendo por
 * atencion.
 */
.asseo-wizard__summary-whatsapp {
	font-size: 11.5px;
	color: var(--asseo-text-secondary);
	text-align: center;
	margin: 10px 0 0;
}

.asseo-wizard__summary-whatsapp a {
	color: var(--asseo-teal);
	font-weight: 700;
	text-decoration: underline;
}

.asseo-wizard__summary-whatsapp a:hover {
	color: var(--asseo-primary);
}

@media (max-width: 820px) {
	.asseo-wizard__grid {
		grid-template-columns: 1fr;
	}

	.asseo-wizard__summary {
		position: static;
	}
}

/* ============ Paso 5: revision final (ancho completo, sin panel lateral) ============ */

.asseo-wizard__step--revision {
	max-width: 600px;
	margin: 0 auto;
	padding: 28px 28px 8px;
}

/*
 * Los botones Atras/Confirmar (".asseo-wizard__nav") NO estan dentro de
 * ".asseo-wizard__step--revision" en el HTML — son un hermano compartido
 * por los 5 pasos (ver render_shortcode()), asi que no se puede centrar
 * ese contenedor directamente sin afectar los pasos 1-4 (que SI deben
 * seguir ocupando el ancho completo de la tarjeta). Se centra solo
 * cuando el paso 5 esta visible, usando ":has()" para detectarlo.
 *
 * 2026-08-03: corregido de "[hidden]" a ".is-active" — irAPaso() en
 * wizard.js solo alterna la clase "is-active" entre pasos
 * (".asseo-wizard__step.is-active { display:block }" le gana a
 * "[hidden]" por especificidad, 0,2,0 contra 0,1,0), pero NUNCA quita el
 * atributo "hidden" que el paso 5 trae desde el HTML inicial. Con
 * ":not([hidden])" esta condicion era SIEMPRE falsa (el atributo nunca
 * se limpiaba) y el centrado nunca llegaba a aplicarse.
 */
.asseo-wizard__card:has(.asseo-wizard__step--revision.is-active) .asseo-wizard__nav {
	display: flex;
	justify-content: space-between;
	max-width: 600px;
	margin: 24px auto 0;
}

/*
 * El resumen (".asseo-wizard__summary", panel lateral en desktop /
 * card flotante abajo en movil) es hermano de ".asseo-wizard__grid" —
 * digo, hijo de ella junto al contenido de los pasos 1-4 — y el paso 5
 * ya trae su PROPIA revision completa (".asseo-wizard__step--revision"),
 * asi que mostrar el resumen (o su version compacta de movil, el boton
 * "servicio + total") encima del paso 5 es informacion duplicada que el
 * cliente no pidio ni deberia ver ahi. Se oculta explicitamente cuando
 * el paso 5 esta activo, con el mismo mecanismo ":has()" de arriba (y
 * el mismo fix de ".is-active" en vez de "[hidden]").
 */
.asseo-wizard__card:has(.asseo-wizard__step--revision.is-active) .asseo-wizard__summary {
	display: none !important;
}

.asseo-wizard__revision-head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.asseo-wizard__revision-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--asseo-primary);
	color: var(--asseo-accent);
	flex: none;
}

.asseo-wizard__revision-card {
	margin-top: 16px;
	margin-bottom: 20px;
	background: rgba(243, 251, 250, 0.7);
	border: 1px solid rgba(177, 218, 207, 0.5);
	border-radius: 16px;
	padding: 4px 20px;
	max-width: 560px;
}

.asseo-wizard__revision-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid #e0f5f5;
}

.asseo-wizard__revision-row--last {
	border-bottom: none;
}

/* Fila "Adicionales" (2026-08-12, "si aplica") — va DESPUES de la fila
   "--last" en el HTML (ver PHP), asi que cuando esta visible ES ella la
   ultima fila real: se le quita el borde a ELLA y se le devuelve a
   "Asistente" (":has()" ya se usaba en este archivo antes, ver
   ".asseo-wizard__adicional-item:has(...)" mas abajo — mismo criterio,
   no es una feature nueva para este codebase). */
[data-resumen-adicionales-fila] {
	border-bottom: none !important;
}

.asseo-wizard__revision-row--last:has(~ [data-resumen-adicionales-fila]:not([hidden])) {
	border-bottom: 1px solid #e0f5f5;
}

.asseo-wizard__revision-row > span:first-child {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--asseo-text-secondary);
	font-size: 13.5px;
}

.asseo-wizard__revision-row svg {
	color: var(--asseo-teal);
}

.asseo-wizard__revision-row strong {
	font-weight: 700;
	color: var(--asseo-primary);
	text-align: right;
	max-width: 55%;
	font-size: 13.5px;
	overflow-wrap: break-word;
}

/*
 * Desglose "Precio base"/"Descuento por frecuencia" (2026-08-20, pedido
 * explicito) — bloque propio y simple, separado a proposito de
 * ".revision-card" (ver comentario en class-reservas.php) para no tener
 * que extender la cadena ":has()" de arriba que decide el borde de la
 * fila "--last".
 */
.asseo-wizard__revision-precio {
	max-width: 560px;
	margin: -4px 0 16px;
	padding: 2px 20px;
	background: rgba(243, 251, 250, 0.7);
	border: 1px solid rgba(177, 218, 207, 0.5);
	border-radius: 16px;
}

.asseo-wizard__revision-precio-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 0;
	font-size: 13.5px;
}

.asseo-wizard__revision-precio-row span:first-child {
	color: var(--asseo-text-secondary);
}

.asseo-wizard__revision-precio-row span:last-child {
	font-weight: 700;
	color: var(--asseo-primary);
}

.asseo-wizard__revision-precio-row--descuento {
	border-top: 1px solid #e0f5f5;
}

.asseo-wizard__revision-precio-row--descuento span:last-child {
	color: var(--asseo-teal);
}

/*
 * Bloque "¿Necesitas una mayor frecuencia?" (2026-08-20, pedido
 * explicito, colores EXACTOS de la tarifa oficial de servicios
 * frecuentes: fondo "#E8F5F5", borde izquierdo "#075C5D", texto gris
 * "#4A5568" 14px) — hex literales a proposito, no tokens del plugin: es
 * la paleta de un material de marketing especifico, no una redefinicion
 * del texto secundario del sitio.
 */
.asseo-wizard__frecuencia-callout {
	max-width: 560px;
	margin: 0 0 16px;
	padding: 14px 16px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #e8f5f5;
	border-left: 3px solid #075c5d;
	border-radius: 8px;
}

.asseo-wizard__frecuencia-callout-icon {
	flex-shrink: 0;
	display: flex;
	color: #075c5d;
	margin-top: 1px;
}

.asseo-wizard__frecuencia-callout p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #4a5568;
}

.asseo-wizard__frecuencia-callout p strong {
	display: block;
	color: #075c5d;
	margin-bottom: 2px;
}

.asseo-wizard__revision-total {
	max-width: 560px;
	margin-top: 0;
	margin-bottom: 16px;
	padding: 16px 20px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--asseo-primary), var(--asseo-teal));
	display: flex;
	flex-direction: column;
}

.asseo-wizard__revision-total-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.asseo-wizard__revision-total span {
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.78);
}

.asseo-wizard__revision-total strong {
	font-family: "Poppins", sans-serif;
	font-weight: 800;
	font-size: 30px;
	color: #fff;
	white-space: nowrap;
}

/* "Pago seguro" se movio de estar suelto debajo de la tarjeta a vivir
   DENTRO de ella, bajo el precio — texto blanco chico centrado. */
.asseo-wizard__revision-total-lock {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin: 10px 0 0;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.85);
}

/* Aviso de politica de cancelacion del paso 5 — antes esta regla era
   compartida con ".asseo-wizard__hint" (el aviso de "Wompi pendiente",
   ELIMINADO 2026-08-20 por completo, ver PHP) — se deja solo con lo que
   sigue vivo. Padding reducido a 12px uniforme (antes "12px 16px") y
   font-size a 13px (2026-08-20, pedido explicito: "que todo quepa sin
   scroll en pantalla movil"). */
.asseo-wizard__step--revision .asseo-policy-notice {
	max-width: 560px;
	padding: 12px;
	font-size: 13px;
	border-radius: 12px;
}

/*
 * Metodo de pago (2026-08-19, pedido explicito): 2 opciones tipo "card"
 * con radio nativo (no "<button>" — Hello Elementor no le agrega border
 * a "<label>"/"<input>", asi que no hace falta el mismo blindaje
 * "!important" que ".asseo-wizard__servicio-oficina-opcion", pero se
 * agrega igual en las propiedades clave por el mismo criterio de
 * precaucion que ya vale para cualquier componente nuevo de este
 * archivo — mas barato prevenir que depurar despues).
 */
.asseo-wizard__metodo-pago {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}

.asseo-wizard__metodo-pago-titulo {
	margin: 0 !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: var(--asseo-label-dark) !important;
}

.asseo-wizard__metodo-pago-opcion {
	display: flex !important;
	align-items: center;
	gap: 10px;
	/* 12px uniforme (antes "12px 14px", 2026-08-20, pedido explicito: que
	   todo el paso de pago quepa sin scroll en movil). */
	padding: 12px !important;
	border: 1.5px solid rgba(43, 181, 175, 0.3) !important;
	border-radius: 12px !important;
	background: #fff !important;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.asseo-wizard__metodo-pago-opcion:has(input:checked) {
	border-color: var(--asseo-primary) !important;
	background: rgba(7, 92, 93, 0.05) !important;
}

.asseo-wizard__metodo-pago-opcion:has(input:disabled) {
	cursor: not-allowed;
	opacity: 0.55;
}

.asseo-wizard__metodo-pago-opcion input[type="radio"] {
	flex: none;
	width: 18px;
	height: 18px;
	accent-color: var(--asseo-primary);
}

.asseo-wizard__metodo-pago-texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.asseo-wizard__metodo-pago-texto strong {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--asseo-primary) !important;
}

.asseo-wizard__metodo-pago-texto span {
	font-size: 12.5px;
	color: var(--asseo-text-secondary);
}

/* Detalle de "saldo" en rojo cuando insuficiente — mismo <span> cambia
   de texto por JS (ver actualizarMetodoPago() en wizard.js), el color
   depende de si el radio quedo deshabilitado (insuficiente) o no. */
.asseo-wizard__metodo-pago-opcion:has(input:disabled) [data-metodo-pago-detalle] {
	color: var(--asseo-danger);
}

.asseo-wizard__step--revision .asseo-policy-notice {
	margin-top: 10px;
}

/* ============ Barra de navegacion compartida (Atras / Continuar) ============ */

.asseo-wizard__nav {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 28px;
	border-top: 1px solid rgba(43, 181, 175, 0.08);
	margin-top: 10px;
}

.asseo-wizard__nav-spacer {
	flex: 1;
}

.asseo-wizard__nav .asseo-btn {
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 1.6em !important;
	box-sizing: border-box;
	border: none !important;
	font-weight: 700 !important;
}

/* "Atras" sin texto visible (reportado con captura, 2026-08-18) — mismo
   motivo ya documentado muchas veces en este archivo: este boton trae
   type="button" explicito, asi que el reset de Hello Elementor
   ("[type=button],[type=submit],button{...}") lo alcanza con la MISMA
   especificidad (0,1,0) que ".asseo-btn"/".asseo-btn--outline" (una
   sola clase cada uno) para las propiedades que esas 2 clases NO
   marcan con "!important" (font-size, font-weight, color de fondo via
   el orden de carga real de este sitio) — normalmente solo cambia
   tamaño/peso sutilmente, pero se refuerzan TODAS las propiedades
   visuales aca, no solo la sospechosa, para no depender de adivinar
   cual gana la carrera de especificidad esta vez. */
.asseo-wizard__back {
	background: #fff !important;
	color: var(--asseo-primary) !important;
	border: 1.5px solid var(--asseo-primary) !important;
	border-radius: 999px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-align: center !important;
	white-space: nowrap !important;
}

/* ============ Campos de formulario ============ */

.asseo-wizard__step label {
	display: block;
	font-weight: 700;
	color: var(--asseo-primary);
	margin-bottom: 4px;
	font-size: 14px;
}

/* "Guardar esta dirección para la próxima vez" (2026-08-25, pedido
   explicito, paso 3) — checkbox + texto en una sola linea, NO el label
   de campo generico de arriba (bloque, 700, color primario): mismo
   criterio visual que ".asseo-login__remember" del login (peso normal,
   texto secundario), pero un selector propio en vez de reusar esa clase
   porque vive en una hoja de estilos distinta (wizard.css no depende de
   login.css). Selector con el mismo elemento+2 clases para poder ganarle
   en especificidad a ".asseo-wizard__step label" de arriba sin
   "!important". */
.asseo-wizard__step label.asseo-wizard__checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	color: var(--asseo-text-secondary);
	font-size: 14px;
	margin-bottom: 0;
	cursor: pointer;
}

.asseo-wizard__checkbox input[type="checkbox"] {
	width: auto;
	margin: 0;
	accent-color: var(--asseo-teal);
}

.asseo-wizard__guardar-propiedad {
	margin: 4px 0 10px;
}

.asseo-wizard__step input[type="text"],
.asseo-wizard__step input[type="email"],
.asseo-wizard__step input[type="password"],
.asseo-wizard__step input[type="date"],
.asseo-wizard__step select,
.asseo-wizard__step textarea {
	width: 100%;
	padding: 0.7em 0.9em;
	border: 1.5px solid var(--asseo-mint);
	border-radius: 12px;
	margin-bottom: 14px;
	box-sizing: border-box;
	font-family: inherit;
	background: #fff;
	transition: box-shadow 0.2s, border-color 0.2s;
}

/* Campos de direccion prellenados desde una propiedad guardada
   (2026-08-12, pedido explicito) — "pointer-events:none" bloquea el
   mouse (click/scroll de un <select>), el "tabIndex=-1" que pone
   wizard.js lo saca del tab del teclado. El campo sigue habilitado y se
   sigue enviando con el form (a diferencia de "disabled") — ver
   comentario en wizard.js sobre por que "disabled" no sirve aca. El
   fondo gris + cursor "not-allowed" son solo la señal visual de que esta
   bloqueado. */
.asseo-wizard__campo-bloqueado {
	pointer-events: none;
	background: #f0f0f0 !important;
	color: var(--asseo-text-secondary) !important;
	cursor: not-allowed !important;
}

.asseo-wizard__step input:focus,
.asseo-wizard__step select:focus,
.asseo-wizard__step textarea:focus {
	outline: none;
	border-color: var(--asseo-accent);
	box-shadow: 0 0 0 4px rgba(23, 174, 162, 0.22);
}

/* Nombre/Telefono/Cedula/Correo del paso "Tu asistente de limpieza"
   (2026-08-12, pedido explicito) cuando el cliente tiene sesion — a
   diferencia de ".asseo-wizard__campo-bloqueado" (direccion, mas arriba),
   aca se pidio "readonly" en vez de bloqueo por mouse/teclado: readonly
   SI permite foco/seleccionar texto/copiar, solo no permite escribir —
   semantica correcta para "esto es de tu perfil, no un dato vacio que
   nunca vas a poder tocar". Colores pedidos: fondo #F5F5F5 (distinto del
   #f0f0f0 de ".campo-bloqueado", no es el mismo componente ni se pidio
   igualarlos), "sin borde de foco activo" = anular el borde/box-shadow
   que la regla ":focus" de arriba le pone a CUALQUIER input del wizard. */
.asseo-wizard__campo-solo-lectura {
	background: #f5f5f5 !important;
}

.asseo-wizard__campo-solo-lectura:focus {
	border-color: var(--asseo-mint) !important;
	box-shadow: none !important;
}

/* Direccion estructurada formato colombiano (2026-08-08): select tipo de
   via + numero + complemento en una fila, apto/referencias en la
   siguiente. Compartido por los 6 formularios del plugin que capturan
   una direccion — ver
   Asseo_App_Portal_Dashboard::render_campos_direccion_estructurada(). */
.asseo-direccion-fields {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.asseo-direccion-fields__row {
	display: flex;
	gap: 20px;
}

/*
 * display:flex + flex-direction:column (2026-08-10, mismo fix que
 * portal.css/Mi perfil — esta copia en wizard.css se habia quedado con
 * la version vieja): antes el texto del label y su <select>/<input>
 * eran ambos contenido INLINE (un <input>/<select> es "inline-block"
 * por defecto), y con "white-space:nowrap" en la fila --principal (ver
 * mas abajo, ahora movido al span) el campo intentaba quedar en la
 * MISMA linea que el texto en vez de pasar a la suya. Resultado
 * reportado con screenshot en el paso 3 del wizard: "Número"/
 * "# Complemento" angostos, desalineados con "Tipo de vía", y el
 * segundo desbordando la fila. Con flex-direction:column el campo
 * SIEMPRE pasa a su propia linea debajo del texto.
 */
.asseo-direccion-fields__row > label {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Texto del label en su propio <span> (ver PHP) para poder aplicarle
   "white-space:nowrap" SOLO a el — el campo ya pasa a su propia linea
   por flex-direction:column arriba, sin depender de esto. */
.asseo-direccion-fields__label-text {
	white-space: nowrap;
}

/* El input de Referencias hereda "margin-bottom: 14px" de la regla
   generica ".asseo-wizard__step input[type=text]..." mas abajo en este
   archivo, + el "gap: 4px" entre filas de ".asseo-direccion-fields" — 18px
   en total antes de llegar al aviso. Reportado con screenshot como
   "muy alejado": el aviso es una aclaracion de ESE campo puntual (dice
   textualmente que habla de Referencias), asi que conceptualmente deberia
   leerse pegado a el, no como un campo mas separado por el mismo aire que
   separa a los demas. Se reduce a 6px (mismo valor que el gap interno
   label-texto/campo, ".asseo-direccion-fields__row > label", para
   mantener el mismo ritmo visual) — !important porque empata en
   especificidad con la regla generica y podria perder el orden de
   cascada si alguien reordena las reglas de este archivo mas adelante. */
.asseo-direccion-fields [data-direccion-referencias] {
	margin-bottom: 2px !important;
}

/* "margin-bottom: 14px" (2026-08-12, pedido explicito) — mismo espaciado
   que usa cualquier input/select del wizard despues de el
   (".asseo-wizard__step input... { margin-bottom: 14px }" mas abajo en
   este archivo). Antes era "margin: 0", asi que el campo siguiente
   (ej. "Barrio") quedaba pegado al segundo renglon del aviso, sin aire
   entre ellos — se reporto con screenshot. */
.asseo-direccion-fields__ayuda {
	margin: 0 0 14px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--asseo-text-secondary);
}

.asseo-direccion-fields__row--principal > label:first-child {
	flex: 1.3;
}

.asseo-direccion-fields__row--principal > label:last-child {
	flex: 1.4;
}

/* Ancho minimo para que el placeholder "— Tipo de vía —" no se corte. */
.asseo-direccion-fields__row--principal > label:first-child select {
	min-width: 150px;
}

@media (max-width: 640px) {
	.asseo-direccion-fields__row {
		flex-wrap: wrap;
	}

	.asseo-direccion-fields__row > label {
		flex: 1 1 100%;
	}

	.asseo-direccion-fields__label-text {
		white-space: normal;
	}
}

/*
 * 2026-07-30: sin font-size explicito, estos titulos heredaban la
 * tipografia grande del Kit de Elementor del sitio, viendose
 * desproporcionados frente al topbar (chico, a proposito). Tamaños
 * calcados de los inline reales de Aurora Integral.dc.html (h2 de paso:
 * 20px, h4 de subseccion: 15.5px).
 *
 * !important a proposito: ".asseo-wizard__step h2/h4" empata en
 * especificidad con ".elementor-kit-832 h2/h4" (1 clase + 1 tag en ambos
 * casos) — sin esto el resultado depende del orden de los <link> en el
 * <head>, no de la intencion del CSS. Mismo problema/solucion que .asseo-btn.
 */
.asseo-wizard__step h2,
.asseo-wizard__step--revision h2 {
	color: var(--asseo-primary) !important;
	font-weight: 800 !important;
	font-size: 20px !important;
	line-height: 1.3 !important;
	margin: 0 !important;
}

.asseo-wizard__step h4 {
	color: var(--asseo-primary) !important;
	font-weight: 800 !important;
	font-size: 15.5px !important;
	line-height: 1.3 !important;
	margin: 28px 0 12px;
}

/*
 * Titulos de tarjeta (nombre del servicio en paso 1, nombre de la auxiliar de limpieza
 * en paso 4): mismo problema de especificidad-empatada con el Kit de
 * Elementor, agravado porque antes NO tenian ninguna regla propia (ni
 * siquiera rota) — heredaban el h3/h4 grande del Kit sin ningun intento
 * de ajuste.
 */
.asseo-wizard__servicio-card h3 {
	color: var(--asseo-primary) !important;
	font-weight: 700 !important;
	font-size: 16.5px !important;
	line-height: 1.3 !important;
	margin: 0 0 6px !important;
	padding-right: 22px;
}


/*
 * Movil (<768px). Reemplaza el intento anterior de meter los tabs de
 * modalidad en una sola fila con "flex:1": a font-size 13px quedaban muy
 * apretados. Ahora es una grilla de 2 columnas, Hogar/Oficina una al
 * lado de la otra — ninguna se corta. (2026-08-10: se quito el tercer
 * tab "Plan recurrente", que antes ocupaba una fila completa aparte.)
 */
@media (max-width: 767px) {
	/* 1. Tabs de modalidad en grilla 2x1. */
	.asseo-wizard__tabs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	/* "width:160px !important" (arriba) ya no aplica: en un item de grid
	   (a diferencia de flex-basis:0 en flex) el ancho fijo SI puede ganarle
	   al ancho de la celda, asi que hay que anularlo a proposito aca. */
	.asseo-wizard__tab {
		width: auto !important;
	}

	/* 2. Cards de servicio: 1 columna, ancho completo. */
	.asseo-wizard__servicios {
		grid-template-columns: 1fr;
	}

	/* 3. "Volver al sitio" Y "Volver al portal" (2026-08-10, esta ultima
	   nueva) reusan ".asseo-portal__volver-btn"/"__volver-texto" ya
	   definidas en portal.css para el Portal Cliente — misma clase,
	   mismo comportamiento (colapsan a solo icono en movil), sin
	   duplicar reglas aca. */

	/* 4. Stepper: solo el paso activo muestra su nombre debajo del
	   circulo; el resto queda solo con el numero/check, para que "Fecha y
	   hora"/"Resumen" no se aprieten entre si en columnas flex:1 tan
	   angostas. */
	.asseo-wizard__stepper-label {
		display: none;
	}

	.asseo-wizard__stepper-item.is-active .asseo-wizard__stepper-label {
		display: block;
	}

	/*
	 * 5. Resumen: card fija abajo, MINIMIZADA por defecto — solo
	 * encabezado + Total siempre visibles (2026-08-20, pedido explicito,
	 * 2da vuelta). La 1ra version (siempre expandida por completo, hasta
	 * 75vh) tapaba "Continuar" sin ninguna forma de despejarla — bug real
	 * reportado en produccion con captura. Antes de ESA version hubo un
	 * boton expandir/colapsar que se quito por 2 motivos: chocaba con el
	 * reset de botones de Hello Elementor, y se veia duplicado con el
	 * resto del resumen. Este intento evita los 2 de raiz:
	 * - El "boton" es un <div role="button"> (".summary-head", ver PHP),
	 *   nunca un <button> real — el conflicto de Elementor con el reset
	 *   de "button"/"[type=button]" simplemente no puede aplicar aca.
	 * - El Total vive en UN SOLO lugar del DOM (afuera del wrapper
	 *   colapsable ".summary-detalle", ver PHP) — se ve igual colapsado
	 *   o expandido, nunca se pinta 2 veces a la vez.
	 */
	/*
	 * Esquinas redondeadas + sombra se movieron a ".asseo-wizard__nav"
	 * (2026-08-20, /ui-ux-pro-max, pedido explicito "mejorame
	 * visualmente esto") — con "Continuar" ahora pegado justo arriba
	 * (ver bloque de mas abajo), el TOPE real de todo el panel flotante
	 * es la nav, no el resumen; dejarle el radio/sombra al resumen (que
	 * ahora queda a la mitad de la pila, no en el borde) se veia como
	 * una costura/esquina redondeada suelta en la mitad de la pantalla,
	 * en vez de un solo panel coherente. Aca solo queda un borde
	 * superior sutil, para separar visualmente "accion" (nav) de
	 * "resumen" dentro del mismo panel sin una costura dura.
	 */
	.asseo-wizard__summary {
		position: fixed;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 400;
		border: none;
		border-top: 1px solid rgba(43, 181, 175, 0.12);
		border-radius: 0;
		box-shadow: none;
		padding: 16px 20px;
	}

	.asseo-wizard__summary-head {
		cursor: pointer;
		margin-bottom: 0;
	}

	.asseo-wizard__summary-chevron {
		display: flex;
		margin-left: auto;
		color: var(--asseo-text-secondary);
		transition: transform 0.2s ease;
	}

	.asseo-wizard__summary-total {
		margin: 10px 0 0;
	}

	/* Colapsado (sin ".is-expandido"): solo encabezado + Total ocupan
	   espacio real — el detalle completo ni se pinta. Esto la hace mas
	   CHICA, pero "position:fixed" nunca reserva espacio en el flujo del
	   documento sin importar su alto real — sigue tapando lo que tenga
	   detras a menos que se reserve el hueco a mano (ver el bloque de
	   ".asseo-wizard__nav" mas abajo, bug real reportado en produccion
	   con captura DESPUES de este mismo cambio: seguia tapando
	   "Continuar" incluso ya colapsada). */
	.asseo-wizard__summary:not(.is-expandido) .asseo-wizard__summary-detalle {
		display: none;
	}

	.asseo-wizard__summary.is-expandido .asseo-wizard__summary-detalle {
		max-height: 55vh;
		overflow-y: auto;
		margin-top: 12px;
	}

	.asseo-wizard__summary.is-expandido .asseo-wizard__summary-chevron {
		transform: rotate(180deg);
	}

	/*
	 * "Continuar" FIJO, pegado justo arriba del resumen (2026-08-20, 3ra
	 * vuelta — reportado 2 veces con captura que quedaba un hueco de
	 * sobra: primero reservando 170px fijos con "margin-bottom", despues
	 * igual aunque ese numero pasara a medirse en vivo). La causa real
	 * del hueco nunca fue el numero exacto — fue depender de scroll: un
	 * margen reservado con "margin-bottom" en el ultimo elemento del
	 * documento solo queda tapado por la card fija de abajo si la pagina
	 * alcanza a llenar el viewport Y se scrollea hasta el fondo; en una
	 * pagina corta ese margen se ve como hueco muerto, sin nada que lo
	 * tape. Sacando la nav del flujo normal (fija ella tambien, pegada
	 * arriba del resumen con "bottom: var(--asseo-resumen-alto)") el
	 * hueco desaparece de raiz, sin importar el largo de la pagina.
	 *
	 * Como la nav ya no ocupa espacio en el flujo del documento,
	 * ".asseo-wizard__card" necesita su propio padding-bottom (suma de
	 * los altos reales de nav + resumen, medidos en vivo por wizard.js)
	 * para que el contenido real (cards de servicio, kit, etc.) no
	 * quede fisicamente detras de las 2 barras fijas apiladas.
	 *
	 * Nada de esto necesita excluir el paso 5 a mano: ahi
	 * ".asseo-wizard__grid" (envuelve al resumen) ya queda oculto por
	 * completo (wizard.js: "grid.hidden = 5 === numero"), asi que su
	 * alto real medido pasa a 0 solo — la nav (mostrando "Confirmar
	 * reserva" ahi) termina pegada al fondo real del viewport.
	 */
	.asseo-wizard__nav {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		/*
		 * Fallback de 110px (sin JS): coincide con el alto real
		 * aproximado del resumen YA COLAPSADO por CSS puro (ver
		 * ".summary:not(.is-expandido) .summary-detalle{display:none}"
		 * arriba, que no depende de JS para aplicar) — sin esto, sin JS
		 * la nav caeria pegada al fondo del viewport exactamente donde
		 * el resumen (tambien fijo) sigue estando, superpuestos los 2.
		 */
		bottom: var(--asseo-resumen-alto, 110px) !important;
		z-index: 401 !important;
		margin: 0 !important;
		max-width: none !important;
		/*
		 * Radio + sombra propios (2026-08-20, /ui-ux-pro-max) — la nav
		 * pasa a ser el TOPE real del panel flotante completo (nav +
		 * resumen apilados, ver comentario grande arriba), asi que se le
		 * da el mismo tratamiento que el resumen tenia antes cuando el
		 * era el tope (radio redondeado arriba + sombra hacia arriba).
		 * "border-top" mas sutil que el de escritorio (0.08 de opacidad)
		 * porque aca ya cumple el mismo rol la sombra, no hace falta que
		 * compitan los 2 con la misma fuerza.
		 */
		border-top: 1px solid rgba(43, 181, 175, 0.06) !important;
		border-radius: 16px 16px 0 0;
		background: #fff;
		box-shadow: 0 -6px 16px rgba(7, 92, 93, 0.1);
	}

	.asseo-wizard__card {
		padding-bottom: calc( var(--asseo-nav-alto, 80px) + var(--asseo-resumen-alto, 110px) );
	}

	/*
	 * "Continuar" centrado cuando es el UNICO boton visible (2026-08-20,
	 * pedido explicito con captura: en el paso 1 — "Atras" oculto — el
	 * separador ".nav-spacer" (flex:1) empuja "Continuar" pegado a la
	 * derecha, con un vacio grande a la izquierda). ":has()" detecta
	 * cuando "Atras" esta oculto para aplicar esto SOLO ahi — en los
	 * pasos 2-4 (Atras Y Continuar visibles a la vez) el spacer sigue
	 * intacto, cada boton en su esquina como siempre. El spacer pasa a
	 * "flex:0" en este caso especifico porque "flex-grow" le gana a
	 * "justify-content" del padre — con el spacer todavia creciendo,
	 * "center" no tendria ningun espacio libre real para repartir.
	 */
	.asseo-wizard__nav:has(.asseo-wizard__back[hidden]) {
		justify-content: center;
	}

	/*
	 * "display:none", no "flex:0" (2026-08-20, corregido el mismo dia:
	 * "Continuar" quedaba centrado PERO NO EXACTO, reportado con
	 * captura) — un flex item en "flex:0" sigue contando para el "gap"
	 * del contenedor aunque su ancho real sea 0: quedaba un hueco
	 * fantasma de 12px SOLO del lado izquierdo (entre el spacer y
	 * "Continuar"), nada simetrico del lado derecho — eso corria el
	 * centro visual del boton unos px a la derecha del centro real de
	 * la barra. Sacando el spacer del layout por completo, el "gap" ya
	 * no tiene 2do item con quien aplicarse, y "justify-content:center"
	 * centra "Continuar" solo, exacto.
	 */
	.asseo-wizard__nav:has(.asseo-wizard__back[hidden]) .asseo-wizard__nav-spacer {
		display: none;
	}
}

.asseo-wizard__auxiliar-card h4 {
	color: var(--asseo-primary) !important;
	font-weight: 800 !important;
	font-size: 14.5px !important;
	line-height: 1.3 !important;
	margin: 0 0 4px !important;
	text-transform: uppercase;
}