/* =========================================================================
   Ruta Sur · Comprobador de Disponibilidad — Front-end styles
   Todas las variables (--rsd-*) se inyectan inline desde el branding.
   ========================================================================= */

.rsd-tool,
.rsd-tool *,
.rsd-modal,
.rsd-modal *,
.rsd-fab,
.rsd-fab * {
	box-sizing: border-box;
}

.rsd-tool {
	--_p: var(--rsd-primary, #128DAF);
	--_d: var(--rsd-dark, #07536B);
	--_bg: var(--rsd-bg, #E8F7FB);
	--_sf: var(--rsd-surface, #FFFFFF);
	--_btn: var(--rsd-button, #128DAF);
	--_r: var(--rsd-radius, 24px);
	--_rs: var(--rsd-radius-sm, 14px);
	--_sh: var(--rsd-shadow, 0 12px 40px rgba(7, 83, 107, .14));
	font-family: var(--rsd-font, inherit);
	color: var(--_d);
	background: var(--_bg);
	border-radius: var(--_r);
	padding: clamp(20px, 4vw, 40px);
	max-width: 640px;
	margin: 0 auto;
	box-shadow: var(--_sh);
	position: relative;
	overflow: hidden;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.rsd-tool.rsd-context-popup {
	background: transparent;
	box-shadow: none;
	padding: clamp(16px, 2.4vw, 26px) clamp(16px, 2.6vw, 30px) clamp(14px, 2vw, 22px);
	max-width: 100%;
}

/* ---- Paso 3 dentro del popup: máxima compactación para evitar scroll ---- */
.rsd-context-popup .rsd-step-3 .rsd-result-title {
	font-size: clamp(1.1rem, 2.2vw, 1.35rem);
	margin-bottom: 4px;
}

.rsd-context-popup .rsd-step-3 .rsd-result-text {
	font-size: .9rem;
	margin-bottom: 10px;
}

.rsd-context-popup .rsd-step-3 .rsd-badge {
	margin-bottom: 8px;
	padding: 6px 14px;
	font-size: .85rem;
}

.rsd-context-popup .rsd-step-3 .rsd-trip {
	padding: 12px 14px;
	margin-bottom: 10px;
}

.rsd-context-popup .rsd-step-3 .rsd-trip-meta {
	margin-top: 10px;
}

/* En el popup el diagnóstico se compacta aún más */
.rsd-context-popup .rsd-step-3 .rsd-diagnostic {
	gap: 6px;
	margin-bottom: 10px;
}

.rsd-context-popup .rsd-step-3 .rsd-diag-chip {
	padding: 5px 11px 5px 9px;
	font-size: .76rem;
}

.rsd-context-popup .rsd-step-3 .rsd-diag-chip .rsd-ico {
	width: 13px;
	height: 13px;
}

.rsd-context-popup .rsd-step-3 .rsd-urgency,
.rsd-context-popup .rsd-step-3 .rsd-notice {
	padding: 9px 13px;
	font-size: .8rem;
	margin-bottom: 10px;
}

.rsd-context-popup .rsd-step-3 .rsd-route-tag {
	padding: 10px 14px;
	font-size: .85rem;
	margin-bottom: 10px;
}

.rsd-context-popup .rsd-step-3 .rsd-capture {
	padding: 18px 18px;
	margin-bottom: 10px;
}

.rsd-context-popup .rsd-step-3 .rsd-capture-title {
	font-size: 1.05rem;
	margin-bottom: 4px;
}

.rsd-context-popup .rsd-step-3 .rsd-fields-2 {
	gap: 8px;
	margin-bottom: 10px;
}

.rsd-context-popup .rsd-step-3 .rsd-fields-2 .rsd-input {
	padding: 9px 13px;
	font-size: .92rem;
}

.rsd-context-popup .rsd-step-3 .rsd-fields-2 textarea.rsd-input {
	min-height: 52px;
}

.rsd-context-popup .rsd-step-3 .rsd-consent {
	font-size: .76rem;
	margin-bottom: 10px;
}

.rsd-context-popup .rsd-step-3 .rsd-actions .rsd-btn {
	padding: 12px 20px;
	font-size: .95rem;
}

.rsd-context-popup .rsd-step-3 .rsd-restart {
	margin-top: 8px;
	padding: 9px 18px;
	font-size: .86rem;
}

/* ---- Resultado en 2 columnas (popup ancho) ---- */
.rsd-result-cols {
	display: block;
}

.rsd-modal-wide .rsd-result-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	align-items: start;
}

.rsd-modal-wide .rsd-result-left,
.rsd-modal-wide .rsd-result-right {
	min-width: 0;
}

/* En 2 columnas el diagnóstico sigue como chips en fila compacta */
.rsd-modal-wide .rsd-context-popup .rsd-step-3 .rsd-diagnostic {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.rsd-modal-wide .rsd-context-popup .rsd-step-3 .rsd-capture {
	margin-bottom: 0;
	height: 100%;
}

/* La columna derecha (captación) no necesita su propio margen inferior */
.rsd-result-right {
	display: flex;
	flex-direction: column;
}

.rsd-result-right[hidden],
.rsd-capture[hidden] {
	display: none !important;
}

/* ---------- Pasos ---------- */
.rsd-step {
	display: none;
	animation: rsd-fade .35s ease both;
}

.rsd-step.is-active {
	display: block;
}

@keyframes rsd-fade {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Paso 4: pantalla de gracias ---------- */
.rsd-thanks {
	text-align: center;
	padding: clamp(20px, 5vw, 48px) clamp(16px, 4vw, 40px);
	max-width: 520px;
	margin: 0 auto;
}

.rsd-thanks-icon {
	width: 76px;
	height: 76px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background: rgba(31, 170, 89, .14);
	color: #1faa59;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: rsd-thanks-pop .45s cubic-bezier(.2, .9, .3, 1.2) both;
}

.rsd-thanks-icon .rsd-ico {
	width: 38px;
	height: 38px;
	stroke-width: 2.6;
}

@keyframes rsd-thanks-pop {
	from { opacity: 0; transform: scale(.5); }
	to   { opacity: 1; transform: scale(1); }
}

.rsd-thanks-title {
	font-size: clamp(1.3rem, 3.4vw, 1.7rem);
	font-weight: 800;
	color: var(--_d);
	margin: 0 0 10px;
	line-height: 1.2;
}

.rsd-thanks-text {
	font-size: 1rem;
	color: var(--_p);
	margin: 0 0 22px;
	line-height: 1.55;
}

.rsd-thanks-trip {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--_sf);
	border-radius: 999px;
	padding: 11px 22px;
	margin-bottom: 26px;
	font-weight: 700;
	color: var(--_d);
	font-size: .95rem;
	max-width: 100%;
	flex-wrap: wrap;
	justify-content: center;
}

.rsd-thanks-arrow {
	color: var(--_p);
	font-weight: 400;
}

.rsd-thanks .rsd-btn {
	width: 100%;
	max-width: 340px;
	margin: 0 auto 12px;
}

.rsd-thanks .rsd-thanks-wa[hidden] {
	display: none !important;
}

.rsd-thanks .rsd-restart {
	margin-bottom: 0;
}

/* ---------- Cabecera ---------- */
.rsd-tool-logo {
	margin-bottom: 14px;
}

.rsd-logo {
	max-height: 52px;
	width: auto;
	display: block;
}

.rsd-title {
	font-size: clamp(1.4rem, 3.4vw, 2rem);
	line-height: 1.2;
	font-weight: 700;
	color: var(--_d);
	margin: 0 0 8px;
}

.rsd-subtitle {
	font-size: .98rem;
	color: var(--_p);
	margin: 0 0 18px;
	opacity: .92;
}

/* ---------- Campos (UI moderna en marca) ---------- */
.rsd-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.rsd-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rsd-fields > .rsd-field:first-child,
.rsd-fields > .rsd-field:nth-child(2) {
	grid-column: span 2;
}

.rsd-field-wide {
	grid-column: span 2 !important;
}

.rsd-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .82rem;
	font-weight: 700;
	color: var(--_d);
	letter-spacing: .015em;
	padding-left: 4px;
}

.rsd-label .rsd-ico {
	display: none; /* el icono va ahora DENTRO del campo */
}

/* Contenedor del campo con icono integrado */
.rsd-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.rsd-input-wrap .rsd-field-ico {
	position: absolute;
	left: 18px;
	width: 19px;
	height: 19px;
	color: var(--_p);
	pointer-events: none;
	opacity: .85;
	transition: color .2s, transform .2s;
	z-index: 2;
}

/* TODOS los campos idénticos. Anclado al contenedor y con !important
   para que el tema de WordPress no pueda imponer su propio borde/fondo
   a los <input> (el <select> se libraba; ahora todos van igual). */
.rsd-tool .rsd-input,
.rsd-tool input.rsd-input,
.rsd-tool select.rsd-input,
.rsd-tool textarea.rsd-input,
.rsd-modal .rsd-input,
.rsd-modal input.rsd-input,
.rsd-modal select.rsd-input,
.rsd-modal textarea.rsd-input {
	box-sizing: border-box !important;
	width: 100% !important;
	font-family: inherit !important;
	font-size: 1.02rem !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	color: var(--_d) !important;
	background-color: #fff !important;
	background-image: none !important;
	border: none !important;
	border-radius: 14px !important;
	padding: 16px 20px !important;
	min-height: 56px !important;
	box-shadow:
		0 0 0 1.5px rgba(7, 83, 107, .12),
		0 2px 6px -2px rgba(7, 83, 107, .12) !important;
	outline: none !important;
	text-shadow: none !important;
	transition: box-shadow .2s ease, background-color .2s ease !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
}

/* Con icono integrado dejamos hueco a la izquierda */
.rsd-tool .rsd-input-wrap .rsd-input,
.rsd-modal .rsd-input-wrap .rsd-input {
	padding-left: 52px !important;
}

.rsd-tool .rsd-input:hover,
.rsd-modal .rsd-input:hover {
	box-shadow:
		0 0 0 1.5px rgba(18, 141, 175, .42),
		0 4px 12px -4px rgba(7, 83, 107, .18) !important;
}

.rsd-tool select.rsd-input,
.rsd-modal select.rsd-input {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23128DAF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 18px center !important;
	background-size: 14px !important;
	padding-right: 46px !important;
	cursor: pointer;
}

.rsd-tool textarea.rsd-input,
.rsd-modal textarea.rsd-input {
	resize: vertical;
	min-height: 76px !important;
	line-height: 1.55 !important;
}

.rsd-input::placeholder {
	color: rgba(7, 83, 107, .36) !important;
	font-weight: 400 !important;
	opacity: 1;
}

.rsd-tool .rsd-input:focus,
.rsd-modal .rsd-input:focus {
	background-color: #fff !important;
	box-shadow:
		0 0 0 2.5px var(--_p),
		0 8px 22px -8px rgba(18, 141, 175, .4) !important;
}

.rsd-input:focus + .rsd-field-ico,
.rsd-input-wrap:focus-within .rsd-field-ico {
	color: var(--_p);
	transform: scale(1.05);
}

/* Campo validado correctamente (ubicación real) */
.rsd-tool .rsd-input.rsd-valid,
.rsd-modal .rsd-input.rsd-valid {
	box-shadow:
		0 0 0 2px rgba(31, 170, 89, .6),
		0 2px 8px -3px rgba(31, 170, 89, .3) !important;
}

.rsd-tool .rsd-input.rsd-valid:focus,
.rsd-modal .rsd-input.rsd-valid:focus {
	box-shadow:
		0 0 0 2.5px rgba(31, 170, 89, .85),
		0 8px 22px -8px rgba(31, 170, 89, .35) !important;
}

.rsd-input-wrap:has(.rsd-valid) .rsd-field-ico { color: #1faa59; }

/* Campo con valor no reconocido */
.rsd-tool .rsd-input.rsd-invalid,
.rsd-modal .rsd-input.rsd-invalid {
	box-shadow:
		0 0 0 2px rgba(208, 67, 46, .6),
		0 2px 8px -3px rgba(208, 67, 46, .3) !important;
}

.rsd-tool .rsd-input.rsd-invalid:focus,
.rsd-modal .rsd-input.rsd-invalid:focus {
	box-shadow:
		0 0 0 2.5px rgba(208, 67, 46, .85),
		0 8px 22px -8px rgba(208, 67, 46, .35) !important;
}

.rsd-input-wrap:has(.rsd-invalid) .rsd-field-ico { color: #d0432e; }

/* Icono del datepicker en tono de marca */
.rsd-input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: .65;
	filter: invert(28%) sepia(45%) saturate(1100%) hue-rotate(155deg) brightness(92%);
}

.rsd-input[type="date"]::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
}

.rsd-error {
	margin: 14px 0 0;
	color: #c0392b;
	font-size: .9rem;
	font-weight: 600;
}

.rsd-error[hidden] {
	display: none;
}

/* ---------- Autocompletado ---------- */
.rsd-ac-box {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	z-index: 30;
	background: #fff;
	border: 1.5px solid rgba(18, 141, 175, .25);
	border-radius: var(--_rs);
	box-shadow: 0 12px 30px rgba(7, 83, 107, .18);
	overflow: hidden;
	max-height: 240px;
	overflow-y: auto;
}

.rsd-ac-item {
	display: block;
	width: 100%;
	text-align: left;
	font: inherit;
	font-size: .92rem;
	color: var(--_d);
	background: none;
	border: none;
	padding: 11px 16px;
	cursor: pointer;
	border-bottom: 1px solid rgba(7, 83, 107, .07);
}

.rsd-ac-item:last-child {
	border-bottom: none;
}

.rsd-ac-item:hover,
.rsd-ac-item.is-active {
	background: var(--_bg);
	color: var(--_d);
}

/* ---------- Botones ---------- */
.rsd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	border: none;
	border-radius: 999px;
	padding: 15px 28px;
	cursor: pointer;
	text-decoration: none;
	transition: transform .15s, box-shadow .18s, background-color .18s, opacity .18s;
	white-space: nowrap;
}

.rsd-btn .rsd-ico {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
}

/* Botones primarios.
   IMPORTANTE: muchos temas de WordPress estilizan `button`/`a.button` con
   selectores muy específicos (a veces con !important y gradientes). Para que
   el botón mantenga SIEMPRE el color de marca, anclamos las reglas al
   contenedor (.rsd-tool / .rsd-modal) y neutralizamos también
   background-image, border y text-shadow. */
.rsd-tool .rsd-btn-primary,
.rsd-tool .rsd-btn-primary:link,
.rsd-tool .rsd-btn-primary:visited,
.rsd-modal .rsd-btn-primary,
.rsd-modal .rsd-btn-primary:link,
.rsd-modal .rsd-btn-primary:visited,
.rsd-btn.rsd-btn-primary {
	background-color: var(--_btn) !important;
	background-image: none !important;
	color: #fff !important;
	border: none !important;
	text-shadow: none !important;
	box-shadow: 0 8px 22px rgba(18, 141, 175, .32);
	margin-top: 22px;
	width: 100%;
}

.rsd-tool .rsd-btn-primary:hover,
.rsd-tool .rsd-btn-primary:focus,
.rsd-tool .rsd-btn-primary:focus-visible,
.rsd-tool .rsd-btn-primary:active,
.rsd-tool .rsd-btn-primary:hover:focus,
.rsd-modal .rsd-btn-primary:hover,
.rsd-modal .rsd-btn-primary:focus,
.rsd-modal .rsd-btn-primary:focus-visible,
.rsd-modal .rsd-btn-primary:active,
.rsd-modal .rsd-btn-primary:hover:focus,
.rsd-btn.rsd-btn-primary:hover,
.rsd-btn.rsd-btn-primary:focus,
.rsd-btn.rsd-btn-primary:active {
	background-color: var(--_d) !important;
	background-image: none !important;
	color: #fff !important;
	border: none !important;
	text-shadow: none !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(18, 141, 175, .42);
	filter: none !important;
	opacity: 1 !important;
}

.rsd-tool .rsd-btn-primary:active,
.rsd-modal .rsd-btn-primary:active {
	transform: translateY(0);
}

.rsd-tool .rsd-btn-ghost,
.rsd-tool .rsd-btn-ghost:link,
.rsd-tool .rsd-btn-ghost:visited,
.rsd-modal .rsd-btn-ghost,
.rsd-btn.rsd-btn-ghost {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--_p) !important;
	border: 1.5px solid rgba(18, 141, 175, .35) !important;
	text-shadow: none !important;
}

.rsd-tool .rsd-btn-ghost:hover,
.rsd-tool .rsd-btn-ghost:focus,
.rsd-tool .rsd-btn-ghost:active,
.rsd-modal .rsd-btn-ghost:hover,
.rsd-modal .rsd-btn-ghost:focus,
.rsd-modal .rsd-btn-ghost:active,
.rsd-btn.rsd-btn-ghost:hover {
	background-color: rgba(18, 141, 175, .08) !important;
	background-image: none !important;
	color: var(--_p) !important;
}

.rsd-tool .rsd-btn-wa,
.rsd-tool .rsd-btn-wa:link,
.rsd-tool .rsd-btn-wa:visited,
.rsd-modal .rsd-btn-wa,
.rsd-btn.rsd-btn-wa {
	background-color: #25D366 !important;
	background-image: none !important;
	color: #fff !important;
	border: none !important;
	text-shadow: none !important;
	box-shadow: 0 8px 22px rgba(37, 211, 102, .32);
}

.rsd-tool .rsd-btn-wa:hover,
.rsd-tool .rsd-btn-wa:focus,
.rsd-tool .rsd-btn-wa:active,
.rsd-modal .rsd-btn-wa:hover,
.rsd-btn.rsd-btn-wa:hover {
	background-color: #1eb858 !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(37, 211, 102, .42);
}

.rsd-btn[disabled] {
	opacity: .6 !important;
	cursor: not-allowed;
	transform: none !important;
}

.rsd-btn-primary.rsd-check span {
	margin: 0;
}

/* Estado de validación/carga del botón comprobar */
.rsd-btn.is-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.rsd-btn.is-loading .rsd-ico {
	visibility: hidden;
}

.rsd-btn.is-loading::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	top: calc(50% - 10px);
	left: calc(50% - 10px);
	border: 2.5px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: rsd-spin .7s linear infinite;
}

/* Botón disparador / inline */
.rsd-trigger {
	width: auto;
	margin-top: 0;
	display: inline-flex;
}

/* ---------- Paso 2: mapa + carga ---------- */
.rsd-map {
	position: relative;
	margin: 0 auto 26px;
	max-width: 460px;
}

.rsd-map-svg {
	width: 100%;
	height: auto;
	display: block;
}

.rsd-map-bg {
	fill: var(--_sf);
	stroke: rgba(7, 83, 107, .08);
	stroke-width: 1.5;
}

.rsd-map-grid line {
	stroke: rgba(7, 83, 107, .06);
	stroke-width: 1;
}

.rsd-map-route {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	filter: drop-shadow(0 4px 8px rgba(18, 141, 175, .22));
}

.rsd-map-route.is-drawing {
	transition: stroke-dashoffset linear;
}

.rsd-map-dot {
	fill: var(--_sf);
	stroke: var(--_p);
	stroke-width: 4;
}

.rsd-dot-b {
	stroke: var(--_d);
}

.rsd-map-pulse {
	fill: var(--_p);
	opacity: .35;
	transform-origin: 70px 170px;
	animation: rsd-pulse 1.8s ease-out infinite;
}

@keyframes rsd-pulse {
	0%   { transform: scale(1);   opacity: .35; }
	70%  { transform: scale(3.4); opacity: 0; }
	100% { transform: scale(3.4); opacity: 0; }
}

.rsd-map-truck {
	opacity: 0;
	transition: opacity .3s;
}

.rsd-map-truck.is-on {
	opacity: 1;
}

.rsd-truck-bubble {
	fill: var(--_p);
}

.rsd-truck-ico {
	color: #fff;
}

.rsd-truck-ico .rsd-ico {
	width: 24px;
	height: 24px;
}

.rsd-map-route-label {
	position: absolute;
	left: 50%;
	bottom: 8px;
	transform: translateX(-50%);
	background: var(--_d);
	color: #fff;
	font-size: .9rem;
	font-weight: 600;
	padding: 7px 16px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 6px 16px rgba(7, 83, 107, .28);
	opacity: 0;
	transition: opacity .3s;
}

.rsd-map-route-label.is-on {
	opacity: 1;
}

.rsd-loading {
	text-align: center;
}

.rsd-spinner {
	width: 38px;
	height: 38px;
	margin: 0 auto 16px;
	border: 3.5px solid rgba(18, 141, 175, .18);
	border-top-color: var(--_p);
	border-radius: 50%;
	animation: rsd-spin .8s linear infinite;
}

@keyframes rsd-spin {
	to { transform: rotate(360deg); }
}

.rsd-loading-msg {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--_d);
	min-height: 1.5em;
	margin: 0 0 18px;
	transition: opacity .25s;
}

.rsd-progress {
	height: 8px;
	background: rgba(7, 83, 107, .1);
	border-radius: 999px;
	overflow: hidden;
	max-width: 320px;
	margin: 0 auto;
}

.rsd-progress-bar {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--_p), var(--_d));
	border-radius: 999px;
	transition: width .2s linear;
}

/* ---------- Paso 3: resultado ---------- */
.rsd-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--_sf);
	border-radius: 999px;
	padding: 8px 16px;
	font-weight: 700;
	font-size: .92rem;
	box-shadow: 0 4px 14px rgba(7, 83, 107, .1);
	margin-bottom: 12px;
}

.rsd-badge-dot {
	position: relative;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #9aa;
	flex: 0 0 auto;
}

/* Halo que late alrededor del punto */
.rsd-badge-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	opacity: .55;
	transform: scale(1);
}

.rsd-badge.is-ok .rsd-badge-dot {
	background: #1faa59;
}

.rsd-badge.is-ko .rsd-badge-dot {
	background: #d0432e;
}

.rsd-badge.is-ok .rsd-badge-dot::after,
.rsd-badge.is-ko .rsd-badge-dot::after {
	animation: rsd-dot-pulse 1.6s ease-out infinite;
}

@keyframes rsd-dot-pulse {
	0%   { transform: scale(1);   opacity: .55; }
	70%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}

.rsd-badge.is-ok { color: #15803d; }
.rsd-badge.is-ko { color: #b91c1c; }

.rsd-result-title {
	font-size: clamp(1.2rem, 2.6vw, 1.55rem);
	font-weight: 700;
	color: var(--_d);
	margin: 0 0 6px;
	line-height: 1.2;
}

.rsd-result-text {
	font-size: .96rem;
	color: var(--_p);
	margin: 0 0 14px;
}

/* ---------- Mini-gráfico de ruta (Origen ····> Destino) ---------- */
.rsd-trip {
	background: var(--_sf);
	border-radius: var(--_rs);
	padding: 16px 18px;
	margin-bottom: 14px;
	box-shadow: 0 3px 12px rgba(7, 83, 107, .07);
}

.rsd-trip[hidden] { display: none; }

.rsd-trip-graph {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: flex-start;
	gap: 8px;
}

.rsd-trip-point {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 3px;
	min-width: 0;
}

.rsd-trip-pin {
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--_bg);
	color: var(--_p);
}

.rsd-trip-to .rsd-trip-pin {
	color: var(--_d);
}

.rsd-trip-pin .rsd-ico {
	width: 18px;
	height: 18px;
}

.rsd-trip-name {
	font-weight: 700;
	font-size: .92rem;
	color: var(--_d);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rsd-trip-cap {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--_p);
	opacity: .8;
}

.rsd-trip-line {
	position: relative;
	flex: 1;
	height: 34px;
	min-width: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rsd-trip-dots {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 0;
	border-top: 3px dotted rgba(18, 141, 175, .5);
}

.rsd-trip-truck {
	position: relative;
	z-index: 1;
	display: inline-flex;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--_p);
	color: #fff;
	box-shadow: 0 4px 10px rgba(18, 141, 175, .35);
	animation: rsd-trip-move 2.4s ease-in-out infinite;
}

.rsd-trip-truck .rsd-ico {
	width: 17px;
	height: 17px;
}

@keyframes rsd-trip-move {
	0%, 100% { transform: translateX(-22%); }
	50%      { transform: translateX(22%); }
}

.rsd-trip-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	justify-content: center;
}

.rsd-trip-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--_bg);
	color: var(--_d);
	font-size: .82rem;
	font-weight: 600;
	padding: 6px 13px;
	border-radius: 999px;
}

.rsd-trip-chip .rsd-ico {
	width: 15px;
	height: 15px;
	color: var(--_p);
}

.rsd-trip-chip[hidden] { display: none; }

.rsd-route-tag {
	display: block;
	background: var(--_bg);
	border-left: 4px solid var(--_p);
	border-radius: var(--_rs);
	padding: 12px 16px;
	font-size: .92rem;
	color: var(--_d);
	margin-bottom: 14px;
}

.rsd-route-tag[hidden] { display: none; }

.rsd-route-tag strong {
	display: block;
	margin-bottom: 3px;
	color: var(--_d);
}

.rsd-diagnostic {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 14px;
}

.rsd-diagnostic[hidden] { display: none; }

.rsd-diag-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(31, 170, 89, .1);
	color: #15803d;
	border-radius: 999px;
	padding: 6px 13px 6px 11px;
	font-size: .8rem;
	font-weight: 600;
	white-space: nowrap;
}

.rsd-diag-chip .rsd-ico {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.rsd-urgency {
	display: flex;
	align-items: center;
	gap: 10px;
	background: linear-gradient(120deg, rgba(18, 141, 175, .12), rgba(7, 83, 107, .12));
	border-radius: var(--_rs);
	padding: 11px 15px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--_d);
	margin-bottom: 12px;
}

.rsd-urgency[hidden] { display: none; }

.rsd-urgency .rsd-ico {
	width: 18px;
	height: 18px;
	color: var(--_p);
	flex: 0 0 auto;
}

.rsd-notice {
	background: #fff7e6;
	border: 1px solid #f3d99b;
	border-radius: var(--_rs);
	padding: 11px 15px;
	font-size: .84rem;
	color: #8a6d1d;
	margin-bottom: 16px;
}

.rsd-notice[hidden] { display: none; }

/* ---------- Captación ---------- */
.rsd-capture {
	background: var(--_sf);
	border-radius: var(--_r);
	padding: clamp(14px, 2.5vw, 20px);
	box-shadow: 0 6px 22px rgba(7, 83, 107, .08);
	margin-bottom: 12px;
}

.rsd-capture[hidden] { display: none; }

.rsd-capture-head {
	margin-bottom: 16px;
}

.rsd-capture-eyebrow {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--_p);
	background: rgba(18, 141, 175, .1);
	padding: 4px 11px;
	border-radius: 999px;
	margin-bottom: 8px;
}

.rsd-capture-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--_d);
	margin: 0;
	line-height: 1.25;
}

.rsd-fields-2 {
	margin-bottom: 12px;
	gap: 10px;
}

.rsd-fields-2 .rsd-input {
	padding: 10px 14px;
}

.rsd-fields-2 textarea.rsd-input {
	min-height: 64px;
	resize: vertical;
}

.rsd-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .8rem;
	color: var(--_d);
	margin-bottom: 12px;
	cursor: pointer;
}

.rsd-consent input {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	accent-color: var(--_p);
}

.rsd-consent a {
	color: var(--_p);
	text-decoration: underline;
}

.rsd-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.rsd-actions .rsd-btn {
	flex: 1 1 180px;
	margin-top: 0;
	width: auto;
}

.rsd-actions .rsd-budget[hidden],
.rsd-actions .rsd-whatsapp[hidden] {
	display: none;
}

.rsd-capture-feedback {
	margin: 16px 0 0;
	padding: 13px 16px;
	border-radius: var(--_rs);
	font-size: .92rem;
	font-weight: 600;
	background: rgba(31, 170, 89, .12);
	color: #15803d;
}

.rsd-capture-feedback[hidden] { display: none; }

.rsd-capture-feedback.is-error {
	background: rgba(208, 67, 46, .12);
	color: #b91c1c;
}

.rsd-restart {
	margin: 12px auto 0;
	display: flex;
	padding: 11px 22px;
	font-size: .92rem;
}

/* ---------- Modal / popup ---------- */
.rsd-modal {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.rsd-modal.is-open {
	display: flex;
}

.rsd-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(7, 36, 47, .62);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	animation: rsd-fade .25s ease both;
}

.rsd-modal-box {
	position: relative;
	z-index: 1;
	background: var(--rsd-bg, #E8F7FB);
	border-radius: var(--rsd-radius, 24px);
	width: 100%;
	max-width: 640px;
	max-height: 95vh;
	overflow-y: auto;
	box-shadow: 0 30px 80px rgba(7, 36, 47, .4);
	animation: rsd-pop .3s cubic-bezier(.2, .9, .3, 1.1) both;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	transition: max-width .25s ease;
}

/* Cuando se muestra el resultado, el popup se ensancha para que la
   información y la captación quepan en 2 columnas sin scroll. */
.rsd-modal-box.rsd-modal-wide {
	max-width: 920px;
}

@keyframes rsd-pop {
	from { opacity: 0; transform: scale(.94) translateY(16px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

.rsd-modal-close {
	position: absolute;
	top: 14px;
	right: 16px;
	z-index: 2;
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--rsd-dark, #07536B);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(7, 83, 107, .2);
	transition: transform .15s, background-color .15s;
}

.rsd-modal-close:hover {
	transform: rotate(90deg);
	background: #fff;
}

.rsd-modal-content {
	padding: 0;
}

/* ---------- Botón flotante (FAB) ---------- */
.rsd-fab,
.rsd-fab:link,
.rsd-fab:visited {
	position: fixed;
	z-index: 99980;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--rsd-font, inherit);
	font-size: 1rem;
	font-weight: 600;
	color: #fff !important;
	background-color: var(--rsd-button, #128DAF) !important;
	background-image: none !important;
	border: none !important;
	text-shadow: none !important;
	border-radius: 999px;
	padding: 15px 24px;
	cursor: pointer;
	box-shadow: 0 12px 28px rgba(18, 141, 175, .42);
	transition: box-shadow .18s, filter .18s;
	animation: rsd-fab-in .5s ease both;
	--rsd-fab-x: 22px;
	--rsd-fab-y: 22px;
}

@keyframes rsd-fab-in {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

.rsd-fab:hover,
.rsd-fab:focus,
.rsd-fab:active {
	background-color: var(--rsd-dark, #07536B) !important;
	background-image: none !important;
	color: #fff !important;
	box-shadow: 0 16px 36px rgba(18, 141, 175, .55);
	filter: none !important;
}

.rsd-fab .rsd-ico {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

/* --- 8 posiciones --- */
.rsd-fab-br { right: var(--rsd-fab-x); bottom: var(--rsd-fab-y); }
.rsd-fab-bl { left:  var(--rsd-fab-x); bottom: var(--rsd-fab-y); }
.rsd-fab-tr { right: var(--rsd-fab-x); top:    var(--rsd-fab-y); }
.rsd-fab-tl { left:  var(--rsd-fab-x); top:    var(--rsd-fab-y); }

.rsd-fab-bc { left: 50%; bottom: var(--rsd-fab-y); transform: translateX(-50%); }
.rsd-fab-tc { left: 50%; top:    var(--rsd-fab-y); transform: translateX(-50%); }
.rsd-fab-cr { right: var(--rsd-fab-x); top: 50%; transform: translateY(-50%); }
.rsd-fab-cl { left:  var(--rsd-fab-x); top: 50%; transform: translateY(-50%); }

/* ---------- Responsive ---------- */
/* Pantallas medianas: el popup ancho no cabe a 2 columnas → 1 columna */
@media (max-width: 980px) {
	.rsd-modal-wide {
		max-width: 640px !important;
	}

	.rsd-modal-wide .rsd-result-cols {
		display: block;
	}

	.rsd-modal-wide .rsd-context-popup .rsd-step-3 .rsd-diagnostic {
		display: flex;
		flex-wrap: wrap;
	}

	.rsd-modal-wide .rsd-context-popup .rsd-step-3 .rsd-capture {
		margin-top: 10px;
	}
}

@media (max-width: 560px) {
	.rsd-fields {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.rsd-fields > .rsd-field:first-child,
	.rsd-fields > .rsd-field:nth-child(2),
	.rsd-field-wide {
		grid-column: span 1 !important;
	}

	.rsd-diagnostic {
		grid-template-columns: 1fr;
	}

	.rsd-actions {
		flex-direction: column;
	}

	.rsd-actions .rsd-btn {
		flex: 1 1 100%;
		width: 100%;
	}

	.rsd-title {
		font-size: 1.35rem;
	}

	.rsd-subtitle {
		font-size: .92rem;
	}

	.rsd-input {
		font-size: 16px; /* evita el zoom automático de iOS al enfocar */
		padding: 15px 16px;
	}

	.rsd-input-wrap .rsd-input {
		padding-left: 46px;
	}

	.rsd-input-wrap .rsd-field-ico {
		left: 16px;
		width: 18px;
		height: 18px;
	}

	.rsd-btn,
	.rsd-btn-primary {
		padding: 15px 22px;
		font-size: 1rem;
	}

	/* Mini-gráfico de ruta en móvil: nombres más pequeños y truncados */
	.rsd-trip-graph {
		gap: 4px;
	}

	.rsd-trip-name {
		font-size: .8rem;
	}

	.rsd-trip-cap {
		font-size: .64rem;
	}

	.rsd-trip-line {
		min-width: 34px;
	}

	.rsd-trip-pin {
		width: 28px;
		height: 28px;
	}

	.rsd-trip-pin .rsd-ico {
		width: 15px;
		height: 15px;
	}

	.rsd-trip-meta {
		justify-content: center;
		gap: 6px;
	}

	.rsd-trip-chip {
		font-size: .78rem;
		padding: 5px 11px;
	}

	.rsd-tool {
		padding: 22px 16px;
		border-radius: 18px;
	}

	.rsd-context-popup {
		padding: 20px 16px 18px;
	}

	.rsd-modal {
		padding: 0;
	}

	.rsd-modal-box,
	.rsd-modal-wide {
		max-width: 100% !important;
		max-height: 100vh;
		height: 100%;
		border-radius: 0;
	}

	.rsd-result-cols,
	.rsd-modal-wide .rsd-result-cols {
		display: block;
	}

	.rsd-modal-wide .rsd-context-popup .rsd-step-3 .rsd-capture {
		margin-top: 10px;
	}

	.rsd-modal-close {
		top: 10px;
		right: 12px;
		width: 36px;
		height: 36px;
	}

	/* FAB compacto en móvil */
	.rsd-fab {
		padding: 14px;
		--rsd-fab-x: 16px;
		--rsd-fab-y: 16px;
	}

	.rsd-fab .rsd-fab-text {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rsd-step,
	.rsd-modal-overlay,
	.rsd-modal-box,
	.rsd-fab,
	.rsd-map-pulse,
	.rsd-trip-truck,
	.rsd-spinner {
		animation: none !important;
	}

	/* El pulso del punto de disponibilidad se mantiene pero más suave,
	   ya que comunica el estado del resultado. */
	.rsd-badge.is-ok .rsd-badge-dot::after,
	.rsd-badge.is-ko .rsd-badge-dot::after {
		animation-duration: 2.6s !important;
	}

	.rsd-btn,
	.rsd-fab,
	.rsd-modal-close {
		transition: none !important;
	}
}