/* ===========================================================================
 * VENTANA PREVIA A WHATSAPP (MED-63, 07/10/2026)
 *
 * La pinta assets/js/whatsapp-modal.js. Sale de los tokens de style.css, que
 * carga en todas las paginas, asi que se ve igual en las landings y en las
 * paginas de Elementor.
 *
 * Todas las reglas van colgadas de #sk-wa: Astra y Elementor pintan button,
 * input y select con selectores de etiqueta y atributo, y con el id delante el
 * orden de carga deja de importar (el CSS combinado de LiteSpeed lo cambia).
 *
 * Tipografia: solo Montserrat 700 y Lato 400, los dos pesos que el sitio pide
 * en todas las paginas. Un peso que no existe el navegador lo simula, y fuera de
 * las landings el 500 no se carga.
 * ======================================================================== */

html.sk-wa-abierta,
html.sk-wa-abierta body {
	overflow: hidden;
}

#sk-wa[hidden] {
	display: none;
}

#sk-wa {
	/* Medidas propias de la ventana, en un solo lugar. */
	--sk-wa-ancho: 440px;
	--sk-wa-toque: 44px;
	--sk-wa-campo: 48px;
	--sk-wa-boton: 52px;
	--sk-wa-pais: 7em;
	--sk-wa-pais-movil: 6.5em;
	--sk-wa-velo: 0.6;
	--sk-wa-logo: 28px;
	--sk-wa-logo-boton: 22px;

	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: var( --sk-e-4 );
	position: fixed;
	/* Por encima de la cabecera de Astra, de Joinchat y del aviso de cookies. */
	z-index: 2147483000;
}

#sk-wa .sk-wa__fondo {
	background: rgba( var( --sk-marino-rgb ), var( --sk-wa-velo ) );
	inset: 0;
	position: absolute;
}

#sk-wa .sk-wa__caja {
	background: var( --sk-fondo );
	border-radius: var( --sk-radio );
	box-shadow: var( --sk-sombra-3 );
	box-sizing: border-box;
	color: var( --sk-texto );
	font-family: var( --sk-tipo-cuerpo );
	font-size: var( --sk-fs-cuerpo );
	font-weight: var( --sk-peso-cuerpo );
	line-height: var( --sk-lh-cuerpo );
	max-height: calc( 100% - var( --sk-e-4 ) );
	max-width: var( --sk-wa-ancho );
	overflow-y: auto;
	padding: var( --sk-e-8 ) var( --sk-e-7 ) var( --sk-e-7 );
	position: relative;
	width: 100%;
}

#sk-wa .sk-wa__caja:focus {
	outline: none;
}

#sk-wa .sk-wa__paso[hidden] {
	display: none;
}

#sk-wa .sk-wa__titulo {
	color: var( --sk-marino );
	font-family: var( --sk-tipo-titulos );
	font-size: var( --sk-fs-subtitulo );
	font-weight: var( --sk-peso-titulo );
	line-height: var( --sk-lh-subtitulo );
	margin: 0 var( --sk-e-7 ) var( --sk-e-4 ) 0;
	text-wrap: balance;
}

#sk-wa .sk-wa__texto {
	margin: 0 0 var( --sk-e-6 );
}

/* --- WhatsApp: el glifo y el encabezado ------------------------------- */

/* El verde y el tamano de base vienen en el SVG (whatsapp-modal.js). */
#sk-wa .sk-wa__logo {
	display: block;
	flex: 0 0 auto;
	/* El JS le pone un margen de respaldo para la hoja vieja; aca manda el gap. */
	margin: 0 !important;
	height: var( --sk-wa-logo );
	width: var( --sk-wa-logo );
}

#sk-wa .sk-wa__marca {
	align-items: center;
	color: var( --sk-texto-fuerte );
	display: flex;
	font-family: var( --sk-tipo-titulos );
	font-size: var( --sk-fs-cuerpo );
	font-weight: var( --sk-peso-titulo );
	gap: var( --sk-e-2 );
	line-height: 1.2;
	/* A la derecha queda la cruz de cerrar. */
	margin: 0 var( --sk-e-7 ) var( --sk-e-3 ) 0;
}

/* --- Cerrar ------------------------------------------------------------ */

#sk-wa .sk-wa__cerrar {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var( --sk-radio-boton );
	box-shadow: none;
	color: var( --sk-gris-600 );
	cursor: pointer;
	display: flex;
	height: var( --sk-wa-toque );
	justify-content: center;
	padding: 0;
	position: absolute;
	right: var( --sk-e-2 );
	top: var( --sk-e-2 );
	width: var( --sk-wa-toque );
}

#sk-wa .sk-wa__cerrar:hover {
	background: var( --sk-gris-100 );
	color: var( --sk-marino );
}

/* --- Botones ----------------------------------------------------------- */

#sk-wa .sk-wa__opciones {
	display: grid;
	gap: var( --sk-e-3 );
}

#sk-wa .sk-wa__opcion,
#sk-wa .sk-wa__boton {
	border: 0;
	border-radius: var( --sk-radio-boton );
	box-shadow: none;
	box-sizing: border-box;
	cursor: pointer;
	display: block;
	font-family: var( --sk-tipo-titulos );
	font-size: var( --sk-fs-etiqueta );
	font-weight: var( --sk-peso-titulo );
	letter-spacing: 0.04em;
	line-height: 1.3;
	margin: 0;
	min-height: var( --sk-wa-boton );
	padding: var( --sk-e-4 ) var( --sk-e-5 );
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var( --sk-transicion ), color var( --sk-transicion );
	width: 100%;
}

/* El CTA en marino, como en todo fondo claro del sistema. */
#sk-wa .sk-wa__opcion--principal,
#sk-wa .sk-wa__boton {
	background: var( --sk-marino );
	color: var( --sk-texto-invertido );
}

#sk-wa .sk-wa__opcion--principal:hover,
#sk-wa .sk-wa__boton:hover {
	background: var( --sk-marino-claro );
	color: var( --sk-texto-invertido );
}

/* La segunda puerta, de linea: se lee como opcion y no compite con la primera. */
#sk-wa .sk-wa__opcion:not( .sk-wa__opcion--principal ) {
	background: transparent;
	box-shadow: inset 0 0 0 1px var( --sk-marino );
	color: var( --sk-marino );
}

#sk-wa .sk-wa__opcion:not( .sk-wa__opcion--principal ):hover {
	background: var( --sk-azul-tenue );
	color: var( --sk-marino );
}

#sk-wa .sk-wa__boton[disabled] {
	cursor: progress;
	opacity: 0.75;
}

/*
 * Botones que abren WhatsApp: el glifo va antes del texto, en su verde. Esta
 * regla va despues de la de los botones para pisar su display: block.
 */
#sk-wa .sk-wa__con-logo {
	align-items: center;
	display: flex;
	gap: var( --sk-e-3 );
	justify-content: center;
}

#sk-wa .sk-wa__con-logo .sk-wa__logo {
	height: var( --sk-wa-logo-boton );
	width: var( --sk-wa-logo-boton );
}

#sk-wa .sk-wa__volver {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var( --sk-marino );
	cursor: pointer;
	display: block;
	font-family: var( --sk-tipo-cuerpo );
	font-size: var( --sk-fs-etiqueta );
	font-weight: var( --sk-peso-cuerpo );
	margin: var( --sk-e-4 ) auto 0;
	min-height: var( --sk-wa-toque );
	padding: var( --sk-e-2 ) var( --sk-e-4 );
	text-decoration: underline;
	text-transform: none;
}

#sk-wa .sk-wa__volver:hover {
	background: transparent;
	color: var( --sk-marino-claro );
}

#sk-wa button:focus-visible,
#sk-wa a:focus-visible,
#sk-wa .sk-wa__campo:focus-visible {
	outline: 3px solid var( --sk-azul );
	outline-offset: var( --sk-e-1 );
}

/* --- Campos ------------------------------------------------------------ */

#sk-wa .sk-wa__grupo {
	margin: 0 0 var( --sk-e-5 );
}

#sk-wa .sk-wa__etiqueta {
	color: var( --sk-texto-fuerte );
	display: block;
	font-family: var( --sk-tipo-cuerpo );
	font-size: var( --sk-fs-etiqueta );
	font-weight: var( --sk-peso-cuerpo );
	line-height: var( --sk-lh-etiqueta );
	margin: 0 0 var( --sk-e-2 );
}

#sk-wa .sk-wa__campo {
	background: var( --sk-fondo );
	border: 1px solid var( --sk-gris-500 );
	border-radius: var( --sk-radio-boton );
	box-shadow: none;
	box-sizing: border-box;
	color: var( --sk-texto-fuerte );
	font-family: var( --sk-tipo-cuerpo );
	/* 16px o mas: con menos, Safari del iPhone hace zoom al enfocar. */
	font-size: var( --sk-fs-cuerpo );
	height: var( --sk-wa-campo );
	line-height: 1.2;
	margin: 0;
	padding: 0 var( --sk-e-3 );
	width: 100%;
}

#sk-wa .sk-wa__campo:focus {
	border-color: var( --sk-marino );
	box-shadow: 0 0 0 1px var( --sk-marino );
}

#sk-wa .sk-wa__campo[aria-invalid="true"] {
	border-color: var( --sk-error );
}

#sk-wa .sk-wa__telefono {
	display: flex;
	gap: var( --sk-e-2 );
}

#sk-wa .sk-wa__campo--pais {
	flex: 0 0 auto;
	padding-right: var( --sk-e-2 );
	width: var( --sk-wa-pais );
}

#sk-wa .sk-wa__telefono .sk-wa__campo:not( .sk-wa__campo--pais ) {
	flex: 1 1 auto;
	min-width: 0;
}

#sk-wa .sk-wa__ayuda,
#sk-wa .sk-wa__aviso {
	color: var( --sk-texto-suave );
	font-size: var( --sk-fs-etiqueta );
	line-height: var( --sk-lh-etiqueta );
	margin: var( --sk-e-2 ) 0 0;
}

#sk-wa .sk-wa__aviso {
	margin-top: var( --sk-e-4 );
}

#sk-wa .sk-wa__aviso a {
	color: var( --sk-marino );
	text-decoration: underline;
}

#sk-wa .sk-wa__error {
	color: var( --sk-error );
	font-size: var( --sk-fs-etiqueta );
	line-height: var( --sk-lh-etiqueta );
	margin: var( --sk-e-1 ) 0 0;
}

#sk-wa .sk-wa__error:empty {
	display: none;
}

/* Campo trampa: fuera de la vista sin display:none, que algunos robots saltean. */
#sk-wa .sk-wa__trampa {
	height: 1px;
	left: -10000px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

/* --- Celular: la caja ocupa el ancho, con el margen del sistema ------- */

@media ( max-width: 480px ) {
	#sk-wa {
		align-items: flex-end;
		padding: var( --sk-e-4 );
	}

	#sk-wa .sk-wa__caja {
		padding: var( --sk-e-7 ) var( --sk-e-5 ) var( --sk-e-6 );
	}

	#sk-wa .sk-wa__campo--pais {
		width: var( --sk-wa-pais-movil );
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	#sk-wa:not( [hidden] ) .sk-wa__caja {
		animation: sk-wa-entra 0.18s ease-out;
	}
}

@keyframes sk-wa-entra {
	from {
		opacity: 0;
		transform: translateY( var( --sk-e-2 ) );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ===========================================================================
 * SIN BURBUJA (MED-63)
 *
 * En /trabaja-con-nosotros/, /hospitales/ y /colegios/ la burbuja de Joinchat no
 * se muestra. functions.php pone la clase en el body; los enlaces a WhatsApp del
 * cuerpo siguen pasando por la ventana.
 * ======================================================================== */

body.sk-wa-sin-burbuja .joinchat {
	display: none !important;
}