/**
 * Todos los selectores de acá repiten ".apas-res-wrapper" (sube la
 * especificidad sin usar `id`, que no serviría porque el shortcode puede
 * aparecer más de una vez en la misma página). Tanto las propiedades
 * visuales (color, fondo, borde) como las de estructura (display, flex,
 * grid, width) llevan !important. Es a propósito: en el sitio de APAS
 * (tema Avada) no solo se comía los colores — pisaba directamente el
 * `display: flex` del asistente, dejando todo apilado en bloque al 100% del
 * ancho sin importar el tamaño de pantalla. Ver ERRORES_FRECUENTES.md en la
 * carpeta del plugin para el detalle de este tipo de choque.
 */

.apas-res-wrapper.apas-res-wrapper {
	--apas-res-primario: #3d9dbb;
	--apas-res-primario-oscuro: #2c7891;
	--apas-res-primario-claro: #e7f4f8;
	--apas-res-borde: #dfe3e6;
	--apas-res-texto: #333;
	--apas-res-texto-muted: #6b7378;
	--apas-res-fondo-disponible: #eaf5ee;
	--apas-res-fondo-ocupado: #f3f3f3;
	color: var(--apas-res-texto) !important;
	max-width: 980px !important;
	box-sizing: border-box !important;
	/* El apilado sidebar/contenido de acá abajo reacciona al ancho real del
	   contenedor (container query), no al ancho de la ventana. */
	container-type: inline-size;
	/* Mismo bug que en pic-catalogo (ver ERRORES_FRECUENTES.md): Avada
	   envuelve el contenedor del plugin en una fila Fusion Builder con
	   display:flex + align-items:flex-start (no "stretch"), así que este
	   wrapper no se estira solo para ocupar el ancho disponible y queda
	   dimensionado por un cálculo "según el contenido" ambiguo — a veces se
	   resuelve angosto, arrastrando también el container-query de acá
	   arriba a un tamaño incorrecto. Forzar el estirado acá corta el
	   problema de raíz. */
	width: 100% !important;
	flex: 1 1 auto !important;
	align-self: stretch !important;
}

.apas-res-wrapper.apas-res-wrapper * {
	box-sizing: border-box !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-error {
	color: #b32d2e !important;
}

/* -------------------- estructura del asistente -------------------- */

/* SIN espacio antes de .apas-res-wizard a propósito: en el HTML esa clase
   va en el MISMO elemento que .apas-res-wrapper (<div class="apas-res-wrapper
   apas-res-wizard">), no en un descendiente. Con un espacio ahí (como estaba
   antes) el selector pedía un DESCENDIENTE con esa clase, que no existe, y
   la regla nunca aplicaba — quedaba en el "display: block" por defecto del
   navegador pase lo que pase con Avada. Este fue el bug real detrás del
   apilado que no se iba con ningún refuerzo de especificidad. */
.apas-res-wrapper.apas-res-wrapper.apas-res-wizard {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	width: 100% !important;
	gap: 20px;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-sidebar {
	display: block !important;
	flex: 0 0 260px !important;
	width: 260px !important;
	max-width: 260px !important;
	background: #f7fafb !important;
	border: 1px solid var(--apas-res-borde) !important;
	border-radius: 10px;
	padding: 22px 20px;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-pasos {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-paso {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #e6ebed;
	opacity: .55;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-paso:last-child {
	border-bottom: none;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-paso-activo,
.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-paso-completado {
	opacity: 1;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-paso-completado {
	cursor: pointer;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-paso-completado:hover .apas-res-wizard-paso-titulo {
	text-decoration: underline !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-paso-numero {
	display: flex !important;
	flex: 0 0 24px !important;
	width: 24px !important;
	height: 24px !important;
	border-radius: 50%;
	background: #d8dfe2 !important;
	color: #fff !important;
	font-size: .8em;
	font-weight: 700;
	align-items: center !important;
	justify-content: center !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-paso-activo .apas-res-wizard-paso-numero {
	background: var(--apas-res-primario) !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-paso-completado .apas-res-wizard-paso-numero {
	background: var(--apas-res-primario-oscuro) !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-paso-completado .apas-res-wizard-paso-numero::before {
	content: "\2713";
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-paso-texto {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px;
	min-width: 0;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-paso-titulo {
	font-weight: 600;
	font-size: .95em;
	color: var(--apas-res-texto) !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-paso-activo .apas-res-wizard-paso-titulo {
	color: var(--apas-res-primario-oscuro) !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-paso-resumen {
	font-size: .82em;
	color: var(--apas-res-texto-muted) !important;
	overflow-wrap: anywhere;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-contacto {
	display: flex !important;
	flex-direction: column !important;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #e6ebed;
	gap: 8px;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-contacto-titulo {
	margin: 0 0 2px;
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--apas-res-texto-muted) !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-contacto a {
	align-items: center !important;
	gap: 6px;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-contacto .dashicons {
	width: 16px !important;
	height: 16px !important;
	font-size: 16px;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-contenido {
	display: block !important;
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	background: #fff !important;
	border: 1px solid var(--apas-res-borde) !important;
	border-radius: 10px;
	padding: 22px 24px;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-panel-titulo {
	margin: 0 0 14px;
	color: var(--apas-res-texto) !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-nav {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-nav .apas-res-wizard-continuar-fecha,
.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-nav .apas-res-enviar {
	background: var(--apas-res-primario) !important;
	border-color: var(--apas-res-primario) !important;
	color: #fff !important;
	width: auto !important;
	margin-left: auto;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-nav .apas-res-wizard-continuar-fecha:disabled {
	background: #cfd6d9 !important;
	border-color: #cfd6d9 !important;
	color: #8a8d91 !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-nav .apas-res-wizard-atras-espacio,
.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-nav .apas-res-wizard-atras-datos {
	background: #fff !important;
	border-color: var(--apas-res-borde) !important;
	color: var(--apas-res-texto) !important;
	width: auto !important;
}

/* Selector de espacios */
.apas-res-wrapper.apas-res-wrapper .apas-res-selector {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
	width: 100% !important;
	gap: 16px;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-card {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	gap: 4px;
	text-align: left;
	padding: 16px;
	border: 1px solid var(--apas-res-borde) !important;
	border-radius: 8px;
	background: #fff !important;
	color: var(--apas-res-texto) !important;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-card:hover {
	border-color: var(--apas-res-primario) !important;
	box-shadow: 0 0 0 1px var(--apas-res-primario);
}

.apas-res-wrapper.apas-res-wrapper .apas-res-card-imagen img {
	width: 100% !important;
	height: 140px !important;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 8px;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-card-imagen-vacia {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 140px !important;
	background: var(--apas-res-primario-claro) !important;
	border-radius: 6px;
	margin-bottom: 8px;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-card-imagen-vacia .dashicons {
	width: 40px !important;
	height: 40px !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-card-imagen-vacia .dashicons::before {
	font-size: 40px;
	line-height: 1;
	color: var(--apas-res-primario) !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-card-nombre {
	font-weight: 700;
	font-size: 1.05em;
	color: var(--apas-res-texto) !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-card-direccion,
.apas-res-wrapper.apas-res-wrapper .apas-res-card-capacidad {
	font-size: .9em;
	color: #666 !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-motor-direccion {
	margin: 0 0 16px;
	color: #666 !important;
	font-size: .95em;
}

/* Calendario */
.apas-res-wrapper.apas-res-wrapper .apas-res-cal-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	margin-bottom: 8px;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-cal-mes-titulo {
	font-weight: 700;
	text-transform: capitalize;
	color: var(--apas-res-texto) !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-cal-nav {
	display: inline-block !important;
	width: auto !important;
	border: none !important;
	background: transparent !important;
	cursor: pointer;
	font-size: 1.4em;
	line-height: 1;
	padding: 4px 10px;
	color: var(--apas-res-primario) !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-cal-grid {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	width: 100% !important;
	gap: 4px;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-cal-dia-semana {
	text-align: center;
	font-size: .8em;
	font-weight: 600;
	color: #888 !important;
	padding-bottom: 4px;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-cal-dia {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	aspect-ratio: 1;
	border-radius: 6px;
	font-size: .9em;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-cal-vacio {
	background: transparent !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-cal-disponible {
	background: var(--apas-res-fondo-disponible) !important;
	cursor: pointer;
	color: #1b5e30 !important;
	font-weight: 600;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-cal-disponible:hover {
	background: var(--apas-res-primario) !important;
	color: #fff !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-cal-deshabilitado {
	background: var(--apas-res-fondo-ocupado) !important;
	color: #aaa !important;
	cursor: not-allowed;
}

/* Resaltado de rango de fechas (estilo booking): banda continua entre
   check-in y check-out/fecha bajo el cursor. */
.apas-res-wrapper.apas-res-wrapper .apas-res-cal-en-rango {
	background: var(--apas-res-primario-claro) !important;
	color: var(--apas-res-primario-oscuro) !important;
	border-radius: 0;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-cal-rango-inicio,
.apas-res-wrapper.apas-res-wrapper .apas-res-cal-rango-fin {
	background: var(--apas-res-primario) !important;
	color: #fff !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-cal-leyenda {
	display: flex !important;
	width: 100% !important;
	gap: 16px;
	margin-top: 12px;
	font-size: .85em;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-cal-leyenda-item {
	color: var(--apas-res-texto) !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-cal-leyenda-item i {
	display: inline-block !important;
	width: 12px !important;
	height: 12px !important;
	border-radius: 3px;
	margin-right: 4px;
	vertical-align: middle;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-cal-leyenda-item i.apas-res-cal-disponible { background: var(--apas-res-fondo-disponible) !important; }
.apas-res-wrapper.apas-res-wrapper .apas-res-cal-leyenda-item i.apas-res-cal-deshabilitado { background: var(--apas-res-fondo-ocupado) !important; }

/* Selección de fecha/horario o rango */
.apas-res-wrapper.apas-res-wrapper .apas-res-seleccion {
	display: block !important;
	width: 100% !important;
	margin-top: 16px;
	padding: 12px 14px;
	background: var(--apas-res-primario-claro) !important;
	border-radius: 6px;
	font-weight: 600;
	color: var(--apas-res-primario-oscuro) !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-horarios {
	display: flex !important;
	width: 100% !important;
	gap: 16px;
	margin-top: 8px;
	font-weight: 400;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-horarios select {
	width: auto !important;
	margin-left: 4px;
	background: #fff !important;
	color: var(--apas-res-texto) !important;
	border: 1px solid var(--apas-res-borde) !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-reiniciar-rango {
	display: block !important;
	width: auto !important;
	margin-top: 6px;
	font-weight: 400;
	font-size: .85em;
	background: none !important;
	border: none !important;
	color: var(--apas-res-primario-oscuro) !important;
	text-decoration: underline !important;
	cursor: pointer;
	padding: 0 !important;
}

/* Formulario */
.apas-res-wrapper.apas-res-wrapper .apas-res-formulario {
	display: block !important;
	width: 100% !important;
	margin-top: 4px;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-campo {
	display: block !important;
	width: 100% !important;
	margin-bottom: 14px;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-campo label {
	display: block !important;
	width: auto !important;
	font-weight: 600;
	margin-bottom: 4px;
	color: var(--apas-res-texto) !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-campo input,
.apas-res-wrapper.apas-res-wrapper .apas-res-campo textarea {
	display: block !important;
	width: 100% !important;
	padding: 8px 10px;
	border: 1px solid var(--apas-res-borde) !important;
	border-radius: 4px;
	background: #fff !important;
	color: var(--apas-res-texto) !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-campo .description {
	color: var(--apas-res-texto-muted) !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-form-error {
	color: #b32d2e !important;
	font-weight: 600;
}

/* Confirmación */
.apas-res-wrapper.apas-res-wrapper .apas-res-exito {
	text-align: center;
	max-width: 420px !important;
	width: 100% !important;
	margin: 0 auto !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-exito h2 {
	color: var(--apas-res-texto) !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-exito-icono {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 52px !important;
	height: 52px !important;
	border-radius: 50%;
	background: var(--apas-res-primario) !important;
	color: #fff !important;
	font-size: 1.6em;
	margin: 0 auto 10px;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-exito-resumen {
	display: block !important;
	width: 100% !important;
	text-align: left;
	background: #f7fafb !important;
	border-radius: 8px;
	padding: 14px 18px;
	margin: 18px 0;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-exito-resumen div {
	display: flex !important;
	justify-content: space-between !important;
	width: 100% !important;
	gap: 12px;
	padding: 5px 0;
	border-bottom: 1px solid #e6ebed;
	font-size: .92em;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-exito-resumen div:last-child {
	border-bottom: none;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-exito-resumen dt {
	color: var(--apas-res-texto-muted) !important;
	font-weight: 600;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-exito-resumen dd {
	margin: 0 !important;
	text-align: right;
	overflow-wrap: anywhere;
	color: var(--apas-res-texto) !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-exito-texto {
	color: var(--apas-res-texto) !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-exito-contacto {
	margin-top: 14px;
	font-size: .9em;
	color: var(--apas-res-texto-muted) !important;
}

/* Refuerzo "a prueba de balas" para estos dos enlaces puntuales: además del
   color, se fuerza tamaño/visualización/visibilidad porque en el sitio de
   APAS (tema Avada) el texto aparecía directamente vacío, no solo mal
   coloreado — probablemente algún estilo de ícono/red social del tema con
   font-size:0 o similar, pensado para <a> con un ícono de fondo, se estaba
   aplicando también acá. */
.apas-res-wrapper.apas-res-wrapper .apas-res-exito-contacto a,
.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-contacto a {
	color: var(--apas-res-primario-oscuro) !important;
	text-decoration: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	text-indent: 0 !important;
	overflow: visible !important;
	white-space: normal !important;
	width: auto !important;
	height: auto !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-exito-contacto a {
	font-size: 1em !important;
	font-weight: 600;
	display: inline !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-contacto a {
	font-size: .9em !important;
	display: flex !important;
}

.apas-res-wrapper.apas-res-wrapper .apas-res-exito-contacto a:hover,
.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-contacto a:hover {
	text-decoration: underline !important;
}

/* -------------------- responsive -------------------- */

/* Reacciona al ancho real del contenedor (ver container-type más arriba),
   no al de la ventana: si el shortcode queda en una columna angosta del
   tema aunque la pantalla sea grande, el apilado igual se activa a tiempo.
   Subido junto con el ancho del sidebar (260px) para que no quede
   demasiado apretado justo antes de apilarse. */
@container (max-width: 560px) {
	.apas-res-wrapper.apas-res-wrapper.apas-res-wizard {
		flex-direction: column !important;
	}

	.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-sidebar {
		width: 100% !important;
		max-width: 100% !important;
	}

	.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-contenido {
		width: 100% !important;
		padding: 18px;
	}

	.apas-res-wrapper.apas-res-wrapper .apas-res-horarios {
		flex-direction: column !important;
		gap: 8px;
	}
}

/* Red de seguridad para navegadores sin soporte de container queries
   (poco probable a esta altura, pero por las dudas): un piso de ventana
   angosta de verdad. */
@media (max-width: 360px) {
	.apas-res-wrapper.apas-res-wrapper.apas-res-wizard {
		flex-direction: column !important;
	}

	.apas-res-wrapper.apas-res-wrapper .apas-res-wizard-sidebar {
		width: 100% !important;
		max-width: 100% !important;
	}
}