/*
 * Estilos de los bloques Raima (ficha, formularios, filtros, WhatsApp).
 *
 * Usan las variables de color y espaciado que define el tema en theme.json
 * (--wp--preset--color--naranja, etc.) con un valor de respaldo después de la coma.
 * Así el plugin se ve bien con el tema raima y no se rompe si algún día cambia el tema.
 */

:root {
	--raima-naranja: var(--wp--preset--color--naranja, #f98c2f);
	--raima-naranja-profundo: var(--wp--preset--color--naranja-profundo, #b8520b);
	--raima-turquesa: var(--wp--preset--color--turquesa, #31afc7);
	--raima-turquesa-profundo: var(--wp--preset--color--turquesa-profundo, #137a8c);
	--raima-verde-profundo: var(--wp--preset--color--verde-profundo, #4f7f1c);
	--raima-tinta: var(--wp--preset--color--gris-oscuro, #2d3748);
	--raima-gris-medio: var(--wp--preset--color--gris-medio, #5a6578);
	--raima-fondo: var(--wp--preset--color--gris-claro, #f8fafc);
	--raima-borde: #e2e8f0;
	--raima-radio: 16px;
	--raima-sombra: 0 10px 30px -12px rgba(45, 55, 72, 0.25);
}

/* ───── Botones propios (heredan el estilo de botón del tema vía .wp-element-button) ───── */

.raima-boton {
	cursor: pointer;
}
.raima-boton--grande {
	width: 100%;
	justify-content: center;
	font-size: 1.05rem;
	padding-block: 0.95em;
}
.raima-boton--whatsapp {
	background: #1f8f4e !important;
	color: #fff !important;
}

/* ───── Ficha del tour ───── */

.raima-ficha {
	background: #fff;
	border: 1px solid var(--raima-borde);
	border-radius: var(--raima-radio);
	box-shadow: var(--raima-sombra);
	padding: clamp(20px, 3vw, 28px);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.raima-ficha__precio {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: 16px;
	border-bottom: 1px dashed var(--raima-borde);
}
.raima-ficha__desde {
	font-size: 0.95rem;
	color: var(--raima-gris-medio);
}
.raima-ficha__monto {
	font-family: var(--wp--preset--font-family--titulos, inherit);
	font-size: clamp(2rem, 4vw, 2.5rem);
	line-height: 1.1;
	color: var(--raima-naranja-profundo);
}
.raima-ficha__monto--consulta {
	font-size: 1.5rem;
}
.raima-ficha__nota {
	color: var(--raima-gris-medio);
	font-size: 0.95rem;
}
.raima-ficha__aviso {
	margin: 0;
	background: #fff4ea;
	border-left: 4px solid var(--raima-naranja);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 0.95rem;
}
.raima-ficha__datos {
	margin: 0;
	display: grid;
	gap: 10px;
}
.raima-ficha__datos > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 0.95rem;
}
.raima-ficha__datos dt {
	color: var(--raima-gris-medio);
}
.raima-ficha__datos dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}
.raima-ficha__subtitulo {
	margin: 4px 0 0;
	font-size: 1rem;
}
.raima-ficha__acciones {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: stretch;
	margin-top: 4px;
}
.raima-enlace-whatsapp {
	text-align: center;
	font-size: 0.95rem;
	color: var(--raima-turquesa-profundo);
}

.raima-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
	font-size: 0.95rem;
}
.raima-lista li {
	position: relative;
	padding-left: 26px;
}
.raima-lista li::before {
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 700;
}
.raima-lista--incluye li::before {
	content: "✓";
	background: #e9f5dc;
	color: var(--raima-verde-profundo);
}
.raima-lista--no-incluye li::before {
	content: "–";
	background: #edf0f4;
	color: var(--raima-gris-medio);
}

.raima-etiquetas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.raima-etiquetas li {
	background: #e6f6f9;
	color: var(--raima-turquesa-profundo);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 0.85rem;
	font-weight: 600;
}

/* ───── Ventana emergente ───── */

.raima-dialogo {
	width: min(640px, calc(100vw - 24px));
	max-height: calc(100dvh - 24px);
	border: 0;
	border-radius: var(--raima-radio);
	padding: 0;
	box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.5);
	color: var(--raima-tinta);
}
.raima-dialogo::backdrop {
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(2px);
}
.raima-dialogo[open] {
	animation: raima-aparecer 0.2s ease-out;
}
@keyframes raima-aparecer {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.raima-dialogo[open] { animation: none; }
}
.raima-dialogo__cabecera {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	padding: 22px 24px 18px;
	background: linear-gradient(135deg, var(--raima-turquesa-profundo), var(--raima-turquesa));
	color: #fff;
}
.raima-dialogo__titulo {
	margin: 0;
	font-size: 1.35rem;
	color: #fff;
}
.raima-dialogo__resumen {
	margin: 4px 0 0;
	font-size: 0.95rem;
	opacity: 0.95;
}
.raima-dialogo__cerrar {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.raima-dialogo__cerrar:hover,
.raima-dialogo__cerrar:focus-visible {
	background: rgba(255, 255, 255, 0.35);
}
.raima-dialogo .raima-formulario,
.raima-dialogo .raima-exito {
	padding: 20px 24px 24px;
}

/* ───── Formularios ───── */

.raima-tarjeta-formulario {
	background: #fff;
	border: 1px solid var(--raima-borde);
	border-radius: var(--raima-radio);
	box-shadow: var(--raima-sombra);
	padding: clamp(20px, 3vw, 32px);
}
.raima-formulario__rejilla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
}
@media (max-width: 560px) {
	.raima-formulario__rejilla {
		grid-template-columns: 1fr;
	}
}
.raima-campo {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.raima-campo--ancho {
	grid-column: 1 / -1;
}
.raima-campo > label,
.raima-campo > legend {
	font-weight: 600;
	font-size: 0.92rem;
}
.raima-formulario input[type="text"],
.raima-formulario input[type="tel"],
.raima-formulario input[type="email"],
.raima-formulario input[type="number"],
.raima-formulario input[type="date"],
.raima-formulario input[type="time"],
.raima-formulario select,
.raima-formulario textarea,
.raima-filtros input,
.raima-filtros select {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 1rem;
	color: var(--raima-tinta);
	background: #fff;
	border: 1.5px solid #cbd5e1;
	border-radius: 10px;
	padding: 0.7em 0.85em;
	min-height: 48px;
}
.raima-formulario textarea {
	min-height: 96px;
	resize: vertical;
}
.raima-formulario :is(input, select, textarea):focus-visible,
.raima-filtros :is(input, select):focus-visible {
	outline: 3px solid color-mix(in srgb, var(--raima-turquesa) 45%, transparent);
	outline-offset: 1px;
	border-color: var(--raima-turquesa-profundo);
}
.raima-campo.tiene-error :is(input, select, textarea) {
	border-color: #c0392b;
}
.raima-campo__error {
	color: #b42318;
	font-size: 0.85rem;
}
/* Un grupo de opciones (fieldset) se ve igual que cualquier otro campo. */
fieldset.raima-campo {
	border: 0;
	padding: 0;
}
.raima-campo > legend {
	padding: 0;
	margin-bottom: 6px;
}
.raima-obligatorio {
	color: var(--raima-naranja-profundo);
}
.raima-ayuda {
	font-weight: 400;
	color: var(--raima-gris-medio);
}
small.raima-ayuda {
	font-size: 0.85rem;
}

/* ───── Pastillas: opción única que se toca con el pulgar ─────
 * Por dentro es un radio normal (teclado, lector de pantalla y validación funcionan solos);
 * solo se esconde el circulito y la etiqueta entera hace de botón.
 */
.raima-pastillas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.raima-pastillas--columnas-2,
.raima-pastillas--columnas-3 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.raima-pastillas--columnas-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.raima-pastilla {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 6px 14px;
	box-sizing: border-box;
	border: 1.5px solid #cbd5e1;
	border-radius: 999px;
	background: #fff;
	color: var(--raima-tinta);
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.raima-pastilla input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.raima-pastilla:hover {
	border-color: var(--raima-turquesa-profundo);
}
.raima-pastilla:has(input:checked) {
	background: var(--raima-turquesa-profundo);
	border-color: var(--raima-turquesa-profundo);
	color: #fff;
}
.raima-pastilla:has(input:focus-visible) {
	outline: 3px solid color-mix(in srgb, var(--raima-turquesa) 45%, transparent);
	outline-offset: 2px;
}
.raima-campo.tiene-error .raima-pastilla {
	border-color: #c0392b;
}

/* ───── Panel del servicio elegido ───── */

.raima-aviso-servicio {
	grid-column: 1 / -1;
	margin: 0;
	padding: 16px;
	border: 1.5px dashed #cbd5e1;
	border-radius: var(--raima-radio);
	color: var(--raima-gris-medio);
	font-size: 0.92rem;
}
.raima-panel-servicio {
	grid-column: 1 / -1;
	min-width: 0;
	margin: 0;
	padding: 18px 16px;
	border: 0;
	border-radius: var(--raima-radio);
	background: #e6f6f9;
}
.raima-panel-servicio--simple {
	padding: 0;
	background: none;
}
/* "float" saca la leyenda del borde del fieldset y la deja como un título normal adentro. */
.raima-panel-servicio__titulo {
	float: left;
	width: 100%;
	margin: 0 0 14px;
	padding: 0;
	font-family: var(--wp--preset--font-family--titulos, Georgia, serif);
	font-size: 1.2rem;
	font-weight: 600;
	color: #1f2937;
}
.raima-panel-servicio__rejilla {
	clear: both;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 12px;
	/* En dos campos lado a lado, si una etiqueta ocupa dos líneas, los campos quedan alineados abajo. */
	align-items: end;
}
.raima-panel-servicio__rejilla > * {
	grid-column: 1 / -1;
}
.raima-panel-servicio__rejilla > .raima-ancho-mitad {
	grid-column: auto;
}
.raima-panel-servicio__nota {
	margin: 0;
	font-size: 0.85rem;
	color: var(--raima-gris-medio);
}
.raima-condicion {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
[data-raima-panel][hidden],
.raima-condicion[hidden],
.raima-aviso-servicio[hidden] {
	display: none;
}

/* ───── Contador − n + ───── */

.raima-campo--contador {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.raima-contador {
	display: flex;
	align-items: center;
	gap: 6px;
}
.raima-contador__boton {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1.5px solid #cbd5e1;
	border-radius: 50%;
	background: #fff;
	color: var(--raima-turquesa-profundo);
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}
.raima-contador__boton:hover {
	border-color: var(--raima-turquesa-profundo);
}
.raima-formulario .raima-contador input[type="number"] {
	width: 3.2em;
	min-height: 44px;
	padding: 0.3em;
	border-color: transparent;
	background: transparent;
	text-align: center;
	font-weight: 800;
	-moz-appearance: textfield;
	appearance: textfield;
}
.raima-contador input[type="number"]::-webkit-inner-spin-button,
.raima-contador input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.raima-campo--casilla label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 400;
	font-size: 0.9rem;
}
/* El enlace a la política: sin subrayado como el resto del sitio, pero en negrita
 * para que se note que es un enlace dentro de un texto pequeño. */
.raima-campo--casilla .raima-enlace-politica {
	font-weight: 700;
}
.raima-campo--casilla input {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	flex: none;
}
.raima-formulario__pie {
	margin-top: 18px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}
.raima-formulario__estado {
	margin: 0;
	font-size: 0.95rem;
}
.raima-formulario__estado.es-error {
	color: #b42318;
}
/* Campo trampa: fuera de la vista y del lector de pantalla, pero existe para los robots. */
.raima-formulario__trampa {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.raima-exito {
	text-align: center;
	outline: none;
}
.raima-exito__titulo {
	font-family: var(--wp--preset--font-family--titulos, inherit);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--raima-verde-profundo);
}

/* ───── Filtros ───── */

.raima-filtros {
	display: grid;
	grid-template-columns: 2fr repeat(4, minmax(0, 1fr)) auto;
	gap: 12px;
	align-items: end;
	background: #fff;
	border: 1px solid var(--raima-borde);
	border-radius: var(--raima-radio);
	box-shadow: var(--raima-sombra);
	padding: 18px;
}
@media (max-width: 1100px) {
	.raima-filtros {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.raima-filtros__campo--buscar,
	.raima-filtros__acciones {
		grid-column: 1 / -1;
	}
}
@media (max-width: 520px) {
	.raima-filtros {
		grid-template-columns: 1fr;
	}
}
.raima-filtros__campo {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.raima-filtros__campo label {
	font-weight: 600;
	font-size: 0.85rem;
}
.raima-filtros__acciones {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 12px;
}
.raima-filtros__acciones .wp-element-button {
	min-height: 48px;
}
.raima-filtros__limpiar {
	font-size: 0.9rem;
	white-space: nowrap;
}

/* ───── WhatsApp flotante ───── */

.raima-whatsapp-flotante {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 50;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #1f8f4e;
	color: #fff;
	text-decoration: none;
	border-radius: 999px;
	padding: 12px;
	box-shadow: 0 12px 28px -8px rgba(31, 143, 78, 0.6);
	transition: transform 0.15s ease;
}
.raima-whatsapp-flotante:hover,
.raima-whatsapp-flotante:focus-visible {
	transform: translateY(-2px);
	color: #fff;
}
.raima-whatsapp-flotante__texto {
	font-weight: 700;
	padding-right: 6px;
}
@media (max-width: 600px) {
	.raima-whatsapp-flotante__texto {
		display: none;
	}
}

/* ───── Marcador en el editor ───── */

.raima-marcador-editor {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px;
	border: 2px dashed var(--raima-turquesa);
	border-radius: 12px;
	background: #f0fafc;
	color: var(--raima-tinta);
	font-size: 14px;
}

/* ───── Horario de oficina ─────
 * Dos columnas: la de los días toma el ancho del día más largo ("Lunes a viernes")
 * y la de las horas el resto. Así las horas quedan alineadas en una sola vertical,
 * que es lo que hace que se lea como tabla. Los colores se heredan, para que
 * funcione igual sobre el pie oscuro que sobre el fondo claro de Contacto.
 */
.raima-horario {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 1.25em;
	row-gap: 0.35em;
	margin-block: 0;
	line-height: 1.45;
}
.raima-horario dt {
	font-weight: 700;
}
.raima-horario dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}
.raima-horario .raima-horario__nota {
	grid-column: 1 / -1;
	opacity: 0.8;
	font-style: italic;
}
/* En pantallas angostas las horas bajan debajo del día, sin cortar palabras a la mitad. */
@media (max-width: 380px) {
	.raima-horario {
		grid-template-columns: 1fr;
		row-gap: 0;
	}
	.raima-horario dd {
		margin-bottom: 0.5em;
	}
}