/* CEI WhatsApp Chat — frontend styles. No dependency on any icon font. */

.ceiwa {
	--ceiwa-brand: #25d366;
	--ceiwa-text: #ffffff;
	--ceiwa-text-secondary: #303030;
	--ceiwa-font-size: 18px;
	--ceiwa-icon-size: 60px;
	--ceiwa-box-max-height: 400px;

	position: fixed;
	z-index: 999999;
	font-size: var( --ceiwa-font-size );
	font-family: inherit;
	line-height: 1.4;
}

.ceiwa--bottom-right { right: 20px; bottom: 20px; }
.ceiwa--bottom-left  { left: 20px; bottom: 20px; }
.ceiwa--middle-right { right: 20px; top: 50%; transform: translateY( -50% ); }
.ceiwa--middle-left  { left: 20px; top: 50%; transform: translateY( -50% ); }

.ceiwa--inline {
	position: static;
	display: inline-block;
}

/*
 * The colour of the area we are standing in.
 *
 * On a course page the theme already works this out: `tipo_pagina` goes
 * on <body> as a class, and style.css maps those seven legacy classes to
 * `--Curso-Color-Area` (an `--Area-*-Secondary` token). The widget sits
 * inside <body>, so it just inherits the answer — no slug table of its
 * own to write, and none to keep in step when theirs changes.
 *
 * White when there is no area colour: every use below mixes this into a
 * white-ish tint, so the fallback reproduces exactly what the widget
 * looked like before. That covers the whole site outside a course sheet,
 * and also the courses whose `tipo_pagina` was left blank.
 */
.ceiwa--ai {
	--ceiwa-area: var( --Curso-Color-Area, #ffffff );
}

/*
 * With the box open, the page behind it goes soft.
 *
 * A fixed pseudo-element inside the widget's own stacking context, so it
 * covers the page but still sits under the toggle and the box. It never
 * takes a click: the widget already closes on an outside click, and a
 * scrim that swallowed clicks would quietly turn the chat into a modal —
 * a bigger change than asking for a bit of blur.
 *
 * `visibility` rather than opacity alone: an element at zero opacity
 * still composites, and a full-viewport backdrop-filter is not something
 * to leave running on a phone for the 99% of the time the box is shut.
 */
.ceiwa--ai::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	background: rgba( 10, 10, 14, 0.25 );
	-webkit-backdrop-filter: blur( 5px );
	backdrop-filter: blur( 5px );
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.ceiwa--ai.ceiwa--open::before {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.35s ease, visibility 0s linear 0s;
}

@media ( prefers-reduced-motion: reduce ) {
	.ceiwa--ai::before { transition: none; }
}

/*
 * Lámina de vidrio, mismo lenguaje que la cabecera y el aviso de cookies
 * (ver css/cei-header-admin.css del tema): fondo verde translúcido +
 * blur/saturación por defecto, y la refracción del filtro SVG «liquid
 * glass» sólo donde el propio tema ya la ha activado (motores Blink).
 *
 * `background` se declara dos veces a propósito: la primera es un rgba()
 * fijo que cualquier navegador entiende; la segunda usa color-mix() sobre
 * el color de marca configurado en Apariencia, así que respeta el color
 * elegido en el panel. Un navegador sin color-mix() (Safari <16.4, iOS
 * 15.x) ignora esa única línea y se queda con el rgba() de refuerzo.
 */
.ceiwa__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba( 37, 211, 102, 0.55 );
	background: color-mix( in srgb, var( --ceiwa-brand ) 55%, transparent );
	-webkit-backdrop-filter: var( --Global-Vidrio-Blur, blur( 18px ) saturate( 180% ) );
	backdrop-filter: var( --Global-Vidrio-Blur, blur( 18px ) saturate( 180% ) );
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	color: var( --ceiwa-text );
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.2 ), inset 0 1px 0 rgba( 255, 255, 255, 0.35 );
}


/*
 * LA REFRACCIÓN «LIQUID GLASS» NO PUEDE VIVIR EN ESTE ARCHIVO.
 *
 * Es un `backdrop-filter: … url( #CeiLiquidGlass )`, y un `url()` escrito
 * dentro de una hoja externa se resuelve contra LA HOJA, no contra la
 * página: el navegador se va a pedir `…/assets/css/#CeiLiquidGlass` y
 * devuelve 404. Autoptimize además reescribe las rutas relativas al
 * juntar las hojas, así que el fragmento acaba convertido en una ruta de
 * verdad y el 404 sale en la consola de cada visita.
 *
 * Por eso esas tres reglas se imprimen en línea, dentro del documento,
 * junto al `<svg>` que define el filtro. Ver ceiwa_liquid_glass_style()
 * en includes/helpers.php.
 */

.ceiwa--button .ceiwa__toggle {
	padding: 12px 20px;
	border-radius: 8px;
}

.ceiwa--bubble .ceiwa__toggle {
	width: var( --ceiwa-icon-size );
	height: var( --ceiwa-icon-size );
	justify-content: center;
	padding: 0;
}

.ceiwa--rounded .ceiwa--bubble .ceiwa__toggle,
.ceiwa--rounded.ceiwa--bubble .ceiwa__toggle {
	border-radius: 50%;
}

.ceiwa--square.ceiwa--bubble .ceiwa__toggle {
	border-radius: 8px;
}

.ceiwa__icon {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}

.ceiwa__close {
	display: none;
	font-style: normal;
	line-height: 1;
}

.ceiwa--open > .ceiwa__toggle .ceiwa__icon { display: none; }
.ceiwa--open > .ceiwa__toggle .ceiwa__close { display: inline-block; }
.ceiwa--open > .ceiwa__toggle .ceiwa__text { display: none; }

.ceiwa--offline .ceiwa__toggle { opacity: 0.55; }

/* Device targeting: hides via CSS media query so a full-page cache stays
   valid across devices (see includes/class-visibility.php). */
@media ( max-width: 767px ) {
	.ceiwa-hide-mobile { display: none !important; }
}
@media ( min-width: 768px ) {
	.ceiwa-hide-desktop { display: none !important; }
}

/* -------------------------------------------------------------------- *
 * The contact box (only present when button.box === 'yes')
 * -------------------------------------------------------------------- */

.ceiwa__box {
	display: none;
	position: absolute;
	bottom: calc( var( --ceiwa-icon-size ) + 16px );
	right: 0;
	width: 320px;
	max-width: calc( 100vw - 40px );
	max-height: var( --ceiwa-box-max-height );
	background: #fff;
	color: var( --ceiwa-text-secondary );
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba( 0, 0, 0, 0.25 );
	overflow: hidden;
	display: none;
	flex-direction: column;
}

.ceiwa--bottom-left .ceiwa__box,
.ceiwa--middle-left .ceiwa__box {
	right: auto;
	left: 0;
}

.ceiwa--open .ceiwa__box { display: flex; }

.ceiwa__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	background: var( --ceiwa-brand );
	color: var( --ceiwa-text );
	padding: 16px;
}

.ceiwa__header-text { font-size: 14px; }
.ceiwa__header-text p { margin: 0 0 4px; }
.ceiwa__header .ceiwa__close {
	display: inline-block;
	background: transparent;
	border: none;
	color: inherit;
	font-size: 22px;
	cursor: pointer;
	padding: 0;
}

.ceiwa__consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	padding: 12px 16px;
	font-size: 13px;
	border-bottom: 1px solid #eee;
}

.ceiwa__contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
}

.ceiwa__contact {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
}

.ceiwa__contact:hover { background: #f7f7f7; }
.ceiwa__contact--offline { opacity: 0.5; }

.ceiwa__avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.ceiwa__info { display: flex; flex-direction: column; font-size: 14px; min-width: 0; }
.ceiwa__name { font-weight: 600; }
.ceiwa__label { font-size: 12px; opacity: 0.7; }
.ceiwa__hours { font-size: 11px; opacity: 0.6; }

.ceiwa__status {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 4px;
}
.ceiwa__status--online { background: #2ecc71; }
.ceiwa__status--offline { background: #bbb; }

.ceiwa__chat {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
}

.ceiwa__back {
	align-self: flex-start;
	background: none;
	border: none;
	color: var( --ceiwa-brand );
	cursor: pointer;
	padding: 0;
	font-size: 13px;
}

.ceiwa__chat-contact { font-weight: 600; }

.ceiwa__chat-input {
	width: 100%;
	min-height: 70px;
	resize: vertical;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 8px;
	font: inherit;
	box-sizing: border-box;
}

.ceiwa__chat-send {
	align-self: flex-end;
	background: var( --ceiwa-brand );
	color: var( --ceiwa-text );
	border: none;
	border-radius: 8px;
	padding: 8px 18px;
	cursor: pointer;
	font: inherit;
}

.ceiwa__footer {
	padding: 10px 16px;
	font-size: 12px;
	border-top: 1px solid #eee;
	opacity: 0.8;
}
.ceiwa__footer p { margin: 0; }

.ceiwa__contact-list[hidden],
.ceiwa__chat[hidden] { display: none; }

/* WooCommerce product/archive button (includes/class-woocommerce.php). */
.ceiwa-wc-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0;
	padding: 10px 16px;
	background: #25d366;
	color: #fff;
	border-radius: 6px;
	text-decoration: none;
	font-size: 14px;
}
.ceiwa-wc-button:hover { opacity: 0.9; color: #fff; }

/* -------------------------------------------------------------------- *
 * CEI AI (includes/class-ai.php) — the site's main floating button today
 * (see `is_main_button` in CEIWA_Settings::defaults_ai()). Reuses the
 * shared box/back/textarea/send rules above; this section only adds its
 * own toggle, dark "chat card" box, question screen and campus cards.
 * -------------------------------------------------------------------- */

/*
 * Hidden until frontend.js finds a valid unlock cookie — only relevant
 * when the admin sets "Quién lo ve" to hidden (see class-ai.php). A plain
 * CSS rule, not `hidden` on the element itself: the class is what a
 * full-page cache can safely bake into the shared HTML, while the cookie
 * check that removes it only ever runs client-side, per visitor.
 */
.ceiwa--gated { display: none !important; }

/*
 * La otra mitad de lo mismo: el botón de WhatsApp cuando CEI AI ocupa su
 * sitio pero está oculto. El servidor imprime los dos —no sabe quién
 * mira— y frontend.js retira este en cuanto la cookie destapa el otro,
 * así que nadie ve dos botones y nadie se queda sin ninguno. Ver
 * settleMainButton().
 */
.ceiwa--yielded { display: none !important; }

/*
 * The toggle: a dark glass ball. The orb inside is drawn with additive
 * blending (see assets/js/ceiwa-orb.js), which only reads as light when
 * there is something dark for it to shine against — on the white tint
 * this used to have, the same ribbons washed out to pale pastel.
 *
 * The radial gradient is the glass itself: lighter towards the top-left,
 * where a real ball would catch the room, darkest at the bottom-right.
 * The inset shadows add the thin bright rim along the top edge and the
 * shading that keeps it from looking like a flat disc.
 *
 * Its own backdrop-filter is deliberately lighter than the box's below:
 * at ~60px across, the heavy blur that works on a large panel just turns
 * something this small into a formless smudge.
 */
.ceiwa--ai .ceiwa__toggle {
	background:
		radial-gradient( circle at 32% 28%, rgba( 255, 255, 255, 0.30 ), rgba( 255, 255, 255, 0.05 ) 70% ),
		radial-gradient( circle at 50% 48%, rgba( 0, 0, 0, 0.60 ), rgba( 0, 0, 0, 0.34 ) 72%, rgba( 0, 0, 0, 0.16 ) 100% );
	/* Cristal ahumado, ni bola negra ni cristal del todo limpio.
	 *
	 * Las cintas de dentro se dibujan con mezcla aditiva (ver
	 * ceiwa-orb.js), y eso por definición NO puede oscurecer: sobre una
	 * página clara el neón se suma a blanco y se lava. Hizo falta un velo
	 * oscuro detrás para que tenga contra qué brillar.
	 *
	 * Velo, no fondo: es un radial que aprieta en el centro —justo donde
	 * está el signo— y se abre hacia el filo, así que la página sigue
	 * viéndose por los bordes y la bola sigue leyéndose como cristal. Va
	 * DEBAJO del brillo blanco (en CSS, la primera capa se pinta encima),
	 * para que el reflejo de arriba a la izquierda siga estando.
	 *
	 * El lado iluminado toma el color del área en una ficha de curso;
	 * fuera de una, --ceiwa-area es blanco y esto cae en el cristal
	 * blanco de siempre. */
	background:
		radial-gradient(
			circle at 32% 28%,
			color-mix( in srgb, var( --ceiwa-area ) 40%, rgba( 255, 255, 255, 0.30 ) ),
			rgba( 255, 255, 255, 0.05 ) 70%
		),
		radial-gradient( circle at 50% 48%, rgba( 0, 0, 0, 0.60 ), rgba( 0, 0, 0, 0.34 ) 72%, rgba( 0, 0, 0, 0.16 ) 100% );
	border-color: rgba( 255, 255, 255, 0.28 );
	border-color: color-mix( in srgb, var( --ceiwa-area ) 55%, rgba( 255, 255, 255, 0.28 ) );
	box-shadow:
		inset 0 1px 1px rgba( 255, 255, 255, 0.5 ),
		inset 0 -8px 16px rgba( 0, 0, 0, 0.18 ),
		0 6px 18px rgba( 0, 0, 0, 0.25 );
	-webkit-backdrop-filter: blur( 6px ) saturate( 160% );
	backdrop-filter: blur( 6px ) saturate( 160% );
	overflow: hidden; /* keeps the edge-to-edge orb canvas inside the round bubble */
}

/* The orb fills the bubble edge-to-edge instead of sitting as a small
   centred icon with a ring of empty glass around it. */
.ceiwa--ai .ceiwa__toggle .ceiwa__icon {
	width: 100%;
	height: 100%;
}

/* El orbe se enciende cuando la página ya ha cargado (ceiwa-orb.js espera
   al navegador libre): la luz entra con un fundido en vez de aparecer de
   golpe en el cristal vacío. */
.ceiwa__orb-canvas {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.ceiwa__orb-canvas--encendido { opacity: 1; }

@media ( prefers-reduced-motion: reduce ) {
	.ceiwa__orb-canvas { transition: none; }
}

/* CEI AI does not swap the orb for a text "×" when the box opens: the
   ribbons themselves fold into the X (see the morph in ceiwa-orb.js), so
   the canvas has to stay on screen and the glyph has to stay off it.
   Clicking the bubble still closes — the toggle's own handler does that
   whenever the box is open, with or without a separate close element. */
.ceiwa--ai.ceiwa--open > .ceiwa__toggle .ceiwa__icon { display: block; }
.ceiwa--ai .ceiwa__toggle .ceiwa__close { display: none !important; }

/*
 * The box: a dark, frosted "chat card" — the same family of surface as an
 * iOS notification (dark translucent, blurred, rounded, white text)
 * rather than the plain white panel the WhatsApp box uses.
 */
.ceiwa--ai .ceiwa__box {
	/* Stays absolutely positioned like the WhatsApp box — an earlier
	   `position: relative` here put the box back in the flow, where it
	   overlapped and completely hid the toggle underneath it. The toggle
	   has to stay visible: it is the only close control. */
	isolation: isolate; /* own stacking context, so the ::before gradient's z-index:-1 reliably sits behind the content instead of depending on backdrop-filter's side effects */
	overflow: hidden; /* clips the ::before gradient and the bounce-in animation to the rounded corners */
	background: rgba( 24, 24, 27, 0.2 );
	-webkit-backdrop-filter: blur( 28px ) saturate( 200% ) brightness( 0.9 );
	backdrop-filter: blur( 28px ) saturate( 200% ) brightness( 0.9 );
	color: #fff;
	border-radius: 28px;
	border: 1px solid rgba( 255, 255, 255, 0.14 );
	border-color: color-mix( in srgb, var( --ceiwa-area ) 40%, rgba( 255, 255, 255, 0.14 ) );
	box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.45 );
	max-height: min( 640px, 80vh );
	transform-origin: bottom right;
	/* Now that the glass itself is much more see-through (0.2 alpha, up
	   above), plain white text can vanish against a light patch of
	   whatever page is behind it — text-shadow is inherited, so this one
	   declaration keeps every label/name/button legible regardless of
	   what's showing through the glass. */
	text-shadow: 0 0 1rem #000;
}

/* Positions anchored to the left (see the Position field on the CEI AI
   tab) grow from their own bottom-left corner instead — the box always
   grows outward from whichever corner sits nearest the toggle. */
.ceiwa--bottom-left.ceiwa--ai .ceiwa__box,
.ceiwa--middle-left.ceiwa--ai .ceiwa__box {
	transform-origin: bottom left;
}

/* Appearing: grows from the toggle's corner with a slight overshoot
   ("back ease out") rather than a plain fade — a visible bounce, not just
   a scale-up. */
@keyframes ceiwa-ai-box-in {
	from { opacity: 0; transform: scale( 0.35 ); }
	to { opacity: 1; transform: scale( 1 ); }
}
.ceiwa--ai.ceiwa--open .ceiwa__box {
	animation: ceiwa-ai-box-in 0.45s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

/* Closing is the same move played backwards: the keyframes are mirrored,
   and so is the easing — cubic-bezier(0.36, 0, 0.66, -0.56) is the exact
   reflection of the opening curve, so the box gathers itself up with the
   same anticipation it sprang open with. `ceiwa--closing` exists only to
   keep it on screen while that runs; frontend.js takes it off again on
   animationend. */
@keyframes ceiwa-ai-box-out {
	from { opacity: 1; transform: scale( 1 ); }
	to { opacity: 0; transform: scale( 0.35 ); }
}
.ceiwa--ai.ceiwa--closing .ceiwa__box {
	display: flex;
	animation: ceiwa-ai-box-out 0.45s cubic-bezier( 0.36, 0, 0.66, -0.56 );
}

@media ( prefers-reduced-motion: reduce ) {
	.ceiwa--ai.ceiwa--open .ceiwa__box { animation: none; }
	/* No closing animation either — and frontend.js knows not to hold the
	   box open waiting for an animationend that will never fire. */
	.ceiwa--ai.ceiwa--closing .ceiwa__box { display: none; animation: none; }
}

/* Depth layer: solid black fading to transparent top-to-bottom, UNDER the
   glass blur's own tint but OVER whatever is visible through it — the same
   trick that keeps a notification's header legible over a busy photo. */
.ceiwa--ai .ceiwa__box::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient( to bottom, rgba( 0, 0, 0, 0.65 ), rgba( 0, 0, 0, 0 ) 65% ),
		linear-gradient( to bottom, transparent, color-mix( in srgb, var( --ceiwa-area ) 20%, transparent ) );
}

.ceiwa__ai-question {
	padding: 20px 16px;
	text-align: center;
	color: #fff;
}
.ceiwa__ai-question-text { margin: 0 0 14px; font-weight: 600; color: #fff; }

/* -------------------------------------------------------------------- *
 * CEI AI as a transcript: what you picked stays on screen as your own
 * message, and each answer arrives as a bubble underneath. The choices
 * live in their own row at the foot of the box, the way a keyboard would.
 * -------------------------------------------------------------------- */

.ceiwa__thread {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 16px 6px;
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
	scroll-behavior: smooth;
}

/* Lo dicho se apoya en las opciones, no cuelga de arriba.
 *
 * Con pocas burbujas y muchas opciones —una ficha de curso ofrece hasta
 * diez— quedaba un vacío enorme entre la pregunta y los botones, como si
 * faltara algo por cargar. `margin-top: auto` en el primer hijo y no
 * `justify-content: flex-end` en el contenedor: con `overflow-y: auto`,
 * eso último deja el principio de una conversación larga fuera de
 * alcance, sin forma de subir hasta él. */
.ceiwa__thread > *:first-child { margin-top: auto; }

.ceiwa__msg {
	max-width: 88%;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 1.5;
	color: #fff;
}

/* Asymmetric corners are what make these read as speech rather than as
   cards: the flat corner points at whoever said it. */
.ceiwa__msg--bot {
	align-self: flex-start;
	border-radius: 18px 18px 18px 4px;
	background: rgba( 255, 255, 255, 0.14 );
	border: 1px solid rgba( 255, 255, 255, 0.16 );
}

.ceiwa__msg--user {
	align-self: flex-end;
	border-radius: 18px 18px 4px 18px;
	background: rgba( 255, 255, 255, 0.9 );
	border: 1px solid rgba( 255, 255, 255, 0.9 );
	color: #16161a;
	text-shadow: none;
	font-weight: 600;
}

.ceiwa__msg p { margin: 0 0 8px; color: #fff; }
.ceiwa__msg p:last-child { margin-bottom: 0; }
.ceiwa__msg ul { margin: 0 0 8px; padding-left: 18px; }
.ceiwa__msg li { margin: 0 0 4px; color: #fff; }
.ceiwa__msg strong { color: #fff; }

.ceiwa__typing { opacity: 0.7; }

/* The choices. Pinned under the thread rather than scrolling with it, so
   the next thing to do is always in the same place. */
/* Las opciones se desplazan cuando son muchas.
 *
 * Antes no: la fila era `flex: 0 0 auto` y el cuadro recorta lo que
 * sobra, así que un área con doce formaciones dejaba los últimos
 * botones —y el «Otra cosa» del final— fuera del cuadro y sin manera de
 * llegar a ellos. Ahora encoge y se desplaza, y nunca se queda con más
 * de media pantalla: por debajo del hilo tiene que seguir viéndose la
 * pregunta a la que se está contestando. */
.ceiwa__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 16px 16px;
	flex: 0 1 auto;
	min-height: 0;
	max-height: 50vh;
	overflow-y: auto;
}
.ceiwa__actions:empty { display: none; }

.ceiwa__reply {
	/* Left, always. Course names run to three lines in a narrow box, and
	   centring them turns a list into a ragged column nobody can scan. */
	box-sizing: border-box;
	text-align: left;
	padding: 9px 16px;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-radius: 9999px;
	background: rgba( 255, 255, 255, 0.12 );
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}
.ceiwa__reply:hover { background: rgba( 255, 255, 255, 0.24 ); }

/* On a course page the main choices take the area's colour. Kept to a
   tint rather than the flat token: those tokens are pale pastels made for
   dark text on white, and at full strength on this glass they read as a
   washed-out grey. */
.ceiwa__reply {
	border-color: color-mix( in srgb, var( --ceiwa-area ) 45%, rgba( 255, 255, 255, 0.35 ) );
	background: color-mix( in srgb, var( --ceiwa-area ) 18%, rgba( 255, 255, 255, 0.12 ) );
}
.ceiwa__reply:hover { background: color-mix( in srgb, var( --ceiwa-area ) 30%, rgba( 255, 255, 255, 0.2 ) ); }
.ceiwa__reply--quiet {
	background: transparent;
	border-color: rgba( 255, 255, 255, 0.22 );
}

/* Secondary choices — "Otra cosa", "Ver otra formación" — sit back so the
   one thing we actually want them to do stays the loudest. */
.ceiwa__reply--quiet {
	background: transparent;
	border-color: rgba( 255, 255, 255, 0.22 );
	font-weight: 400;
	opacity: 0.8;
}
.ceiwa__reply--quiet:hover { background: rgba( 255, 255, 255, 0.12 ); opacity: 1; }

.ceiwa__note { font-size: 13px; color: #fff; opacity: 0.75; }


/* A link that stands on its own is an action, so it looks like the
   choices below — just smaller, because it belongs to the answer rather
   than to the row of things to do next. A link inside a sentence is not:
   turning "la garantía laboral" into a pill breaks the line it is part
   of, which is why the two are told apart by position rather than given
   the same treatment. */
.ceiwa__msg--bot a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: rgba( 255, 255, 255, 0.5 );
}

.ceiwa__msg .ceiwa__course-link,
.ceiwa__msg p > a:only-child {
	display: inline-block;
	margin: 6px 6px 0 0;
	padding: 5px 12px;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-radius: 9999px;
	background: rgba( 255, 255, 255, 0.1 );
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	width: auto;
}
.ceiwa__msg .ceiwa__course-link:hover,
.ceiwa__msg p > a:only-child:hover { background: rgba( 255, 255, 255, 0.22 ); }

/*
 * La flecha de los enlaces sueltos. Es la misma de la cabecera del sitio
 * —ver betheme-child/css/cei-header-admin.css, .MenuNavegacion-ctaArrow—:
 * el glifo ↓ de Inter, girado -135° para apuntar ↗ cuando el enlace lleva
 * a otro sitio, y sin girar cuando lo que hace es descargar. Un solo
 * carácter dice las dos cosas.
 *
 * `\FE0E` es el selector de variación de texto y la familia va dicha a
 * mano: sin las dos cosas, el sistema lo sustituye por su emoji. Y va en
 * `content` en vez de en el marcado para que no se cuele en la
 * transcripción que se manda al CRM.
 *
 * Solo en los enlaces que ya se pintan como pastilla: un enlace dentro de
 * una frase es parte de la frase, y sembrarla de flechas la rompe.
 */
.ceiwa__msg .ceiwa__course-link::after,
.ceiwa__msg p > a:only-child::after {
	content: "\2193\FE0E";
	display: inline-block;
	margin-left: 6px;
	rotate: -135deg;
	scale: 0.9;
	font-family: var( --Font-Family-Primary, "Inter", "Helvetica Neue", Arial, sans-serif );
	font-weight: 400;
}

/* Descargar no es irse a ninguna parte: la misma flecha, hacia abajo. */
.ceiwa__msg .ceiwa__course-link[download]::after,
.ceiwa__msg p > a[download]:only-child::after {
	rotate: none;
	margin-left: 5px;
}

/* The lead form and the WhatsApp textarea take the whole row. */
.ceiwa__actions .ceiwa__lead,
.ceiwa__actions .ceiwa__chat {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	gap: 0;
}

/*
 * On a phone the 320px card is a postage stamp: the course summary and
 * the discount notice both need more room than that, and a thread you
 * have to scroll three lines at a time is not a conversation.
 *
 * `position: fixed` takes it out of the widget's bottom-right corner and
 * pins it to the viewport instead, leaving 96px at the foot — enough for
 * the bubble, which stays put and is still the way to close it.
 */
@media ( max-width: 600px ) {
	.ceiwa--ai .ceiwa__box {
		position: fixed;
		inset: 12px 12px 96px;
		width: auto;
		max-width: none;
		max-height: none;
		border-radius: 28px;
	}

	.ceiwa--ai .ceiwa__msg { max-width: 84%; font-size: 15px; }
	.ceiwa--ai .ceiwa__thread { padding: 18px 18px 8px; }
	.ceiwa--ai .ceiwa__actions { padding: 10px 18px 18px; }

	/* Full-width choices: side by side they end up as two-word stubs on a
	   narrow screen, and they are easier to hit stacked. */
	.ceiwa--ai .ceiwa__actions .ceiwa__reply {
		width: 100%;
	}
}

.ceiwa__ai-intro { margin: 0 0 8px; font-size: 13px; color: #fff; opacity: 0.75; }

/* The opening menu: one option per row rather than a grid, because the
   labels are whole phrases ("Hablar con mi sede") and two columns would
   wrap every one of them. */
.ceiwa__menu { display: flex; flex-direction: column; gap: 8px; }
.ceiwa__menu-option {
	padding: 12px 18px;
	border: 1px solid rgba( 255, 255, 255, 0.3 );
	border-radius: 9999px;
	background: rgba( 255, 255, 255, 0.08 );
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.ceiwa__menu-option:hover { background: rgba( 255, 255, 255, 0.18 ); }

/* Every answer screen shares this shell. Scrolls on its own so a long
   discount notice can never push the box past the height the toggle
   sits below. */
.ceiwa__ai-panel {
	display: flex;
	flex-direction: column;
	padding: 12px 16px 16px;
	color: #fff;
	overflow-y: auto;
	min-height: 0;
}
.ceiwa__ai-panel[hidden] { display: none; }

/* Every text element in here states its own colour rather than relying on
   inheriting from the panel. The theme styles bare `p`, `dt`, `dd` and
   `li` with dark text, and a direct rule like that beats an inherited
   colour no matter how specific the ancestor is — which is exactly how
   the course title came out black on black glass. */
.ceiwa__prose { font-size: 14px; line-height: 1.55; color: #fff; }
.ceiwa__prose p,
.ceiwa__prose li { margin: 0 0 10px; color: #fff; }
.ceiwa__prose ul { margin: 0 0 10px; padding-left: 20px; }
.ceiwa__prose strong { color: #fff; }
.ceiwa__prose a { color: #fff; text-decoration: underline; }

.ceiwa__course-title { margin: 0 0 10px; font-weight: 600; font-size: 15px; color: #fff; }

/* One column, label above value. Two columns looked tidier in the
   abstract, but inside a 320px bubble the value column came out around
   140px wide and "Presencial Valencia" wrapped onto three lines. Stacked,
   every value gets the full width and most fit on one line.

   Borders and margins are stated rather than left alone: themes style
   bare `dl`, `dt` and `dd`, and BeTheme was drawing a rule under each
   row. */
.ceiwa__course-facts {
	display: block;
	margin: 0 0 14px;
	padding: 0;
	border: 0;
}
.ceiwa__course-facts dt {
	/* Forced block: BeTheme floats `dt`, which pulled the label and the
	   value onto the same line and left the value wrapping around it. */
	display: block;
	float: none;
	clear: both;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	color: #fff;
	opacity: 0.65;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
}
.ceiwa__course-facts dd {
	display: block;
	float: none;
	clear: both;
	width: auto;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	color: #fff;
	font-size: 14px;
	line-height: 1.35;
}
.ceiwa__course-facts dd:last-of-type { margin-bottom: 0; }

/* One per line: side by side they ran together into what looked like a
   single sentence. */
.ceiwa__course-link {
	display: block;
	width: fit-content;
	margin-bottom: 8px;
	color: #fff;
	font-size: 14px;
	text-decoration: underline;
	text-decoration-color: rgba( 255, 255, 255, 0.35 );
}

.ceiwa__lead-offer {
	margin-top: 10px;
	padding: 12px 18px;
	border: 1px solid rgba( 255, 255, 255, 0.3 );
	border-radius: 9999px;
	background: rgba( 255, 255, 255, 0.12 );
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.ceiwa__lead-offer:hover { background: rgba( 255, 255, 255, 0.22 ); }

/* White fields, because what you type has to read as plainly as in any
   other form.
   
   Every declaration here is forced. These inputs live in the site footer,
   inside whatever theme is active, and BeTheme styles bare `input` with
   its own background, size, border and height. A single class loses that
   fight — which is how this form ended up as oversized grey text on no
   background at all. A widget dropped into someone else's page has to
   state its form styling outright rather than hope. */
.ceiwa--ai .ceiwa__lead input[type="text"],
.ceiwa--ai .ceiwa__lead input[type="email"] {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 0 8px !important;
	padding: 11px 14px !important;
	border: 1px solid rgba( 255, 255, 255, 0.4 ) !important;
	border-radius: 14px !important;
	background: #fff !important;
	color: #1a1a1a !important;
	font-family: inherit !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
.ceiwa--ai .ceiwa__lead input::placeholder,
.ceiwa--ai .ceiwa__find::placeholder { color: rgba( 0, 0, 0, 0.45 ) !important; }
.ceiwa--ai .ceiwa__lead input:focus,
.ceiwa--ai .ceiwa__find:focus {
	outline: 2px solid rgba( 255, 255, 255, 0.8 ) !important;
	outline-offset: 1px !important;
}

/* Buscar dentro de una lista larga de formaciones. Mismo campo blanco
   que el formulario —y por la misma razón: el tema estiliza `input` a
   pelo y hay que decirlo todo—, más lo que necesita un `type="search"`:
   sin la lupa ni el aspa que Safari le añade por su cuenta. */
.ceiwa--ai .ceiwa__actions .ceiwa__find {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 0 2px !important;
	padding: 11px 14px !important;
	border: 1px solid rgba( 255, 255, 255, 0.4 ) !important;
	border-radius: 9999px !important;
	background: #fff !important;
	color: #1a1a1a !important;
	font-family: inherit !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
.ceiwa--ai .ceiwa__find::-webkit-search-decoration,
.ceiwa--ai .ceiwa__find::-webkit-search-cancel-button { -webkit-appearance: none; }

.ceiwa__find-none,
.ceiwa__find-more {
	width: 100%;
	margin: 0;
	color: #fff;
	font-size: 13px;
	opacity: 0.8;
}


/* Un botón oculto por el filtro tiene que desaparecer de verdad: el
   `display: none` que trae `[hidden]` del navegador lo pisa cualquier
   tema que estilice `button` directamente, y BeTheme lo hace. */
.ceiwa__actions [hidden] { display: none !important; }

/* The checkbox is drawn here rather than left to the browser: the
   native square is the one thing in this box with a hard corner, and
   themes routinely hide the real control to draw their own, which left
   nothing to tick. So the control itself is stripped bare and the tick
   is a rotated pseudo-element on top of a round well. */
.ceiwa--ai .ceiwa__lead input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: relative !important;
	box-sizing: border-box !important;
	width: 20px !important;
	height: 20px !important;
	min-height: 0 !important;
	margin: 1px 0 0 !important;
	padding: 0 !important;
	flex: 0 0 auto !important;
	opacity: 1 !important;
	border: 1px solid rgba( 255, 255, 255, 0.55 ) !important;
	border-radius: 50% !important;
	background: rgba( 255, 255, 255, 0.12 ) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.ceiwa--ai .ceiwa__lead input[type="checkbox"]:hover {
	background: rgba( 255, 255, 255, 0.22 ) !important;
}
.ceiwa--ai .ceiwa__lead input[type="checkbox"]:checked {
	background: #fff !important;
	border-color: #fff !important;
}
/* The tick: two borders of a rotated box, which needs no icon font and
   no SVG to load. */
.ceiwa--ai .ceiwa__lead input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #16161a;
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}
.ceiwa--ai .ceiwa__lead input[type="checkbox"]:focus-visible {
	outline: 2px solid rgba( 255, 255, 255, 0.85 ) !important;
	outline-offset: 2px !important;
}

.ceiwa__lead-consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 4px 0 10px;
	cursor: pointer;
}

/* Esto es un `label`, y BeTheme estiliza `label` a pelo: le pone su
   color oscuro y su tamaño, y gana a lo que hereda del cuadro. El
   resultado era texto negro con la sombra negra del cuadro detrás —
   una mancha. Mismo tratamiento que los `input` de aquí al lado: se
   dice todo explícitamente. La sombra se repite en vez de heredarse
   porque el tema también la puede quitar desde su regla de `label`. */
.ceiwa--ai .ceiwa__lead .ceiwa__lead-consent,
.ceiwa--ai .ceiwa__lead .ceiwa__lead-consent span {
	color: #fff !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-shadow: 0 0 1rem #000 !important;
}
.ceiwa--ai .ceiwa__lead .ceiwa__lead-consent a { color: #fff !important; text-decoration: underline !important; }

/* Off-screen rather than display:none — a bot that skips hidden fields
   would sail straight past a honeypot it can tell is hidden. */
.ceiwa__lead-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* Not WhatsApp green: this button sends an email, not a message. Solid
   white rather than the tinted glass it used to be — the glass version
   vanished whenever the page behind the box happened to be light. */
.ceiwa--ai .ceiwa__lead .ceiwa__chat-send {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: auto !important;
	margin: 4px 0 0 !important;
	padding: 12px 18px !important;
	border: 0 !important;
	border-radius: 9999px !important;
	background: #fff !important;
	color: #16161a !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-shadow: none !important;
	cursor: pointer;
}
.ceiwa--ai .ceiwa__lead .ceiwa__chat-send:hover { background: rgba( 255, 255, 255, 0.88 ) !important; }
.ceiwa--ai .ceiwa__lead .ceiwa__chat-send:disabled { opacity: 0.55 !important; cursor: default; }

.ceiwa__lead-error {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: #ffd7d7;
}
.ceiwa__lead-error[hidden] { display: none; }

.ceiwa--ai .ceiwa__back {
	color: #fff;
	opacity: 0.75;
	/* Room to breathe: pressed right up against the heading below it, the
	   back link read as part of the title rather than as a control. */
	margin-bottom: 18px;
	/* Pinned to the top of its panel. The panels scroll (an area can hold
	   thirty-odd courses), and an unpinned back button scrolls away with
	   the list — leaving no visible way out of the screen. The padding and
	   negative margins let its background span the panel's full width so
	   rows pass underneath it cleanly rather than showing through. */
	position: sticky;
	top: 0;
	z-index: 1;
	align-self: stretch;
	text-align: left;
	margin-left: -16px;
	margin-right: -16px;
	padding: 4px 16px 8px;
	background: rgba( 24, 24, 27, 0.75 );
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
}
.ceiwa--ai .ceiwa__back:hover { opacity: 1; }

/* A real white field, not a tinted-glass one: typed text needs to read as
   plainly as any normal form input, and a white input also visually marks
   this as the one truly interactive, "type here" spot in the box. */
.ceiwa--ai .ceiwa__chat-input {
	background: #fff;
	border-color: rgba( 255, 255, 255, 0.4 );
	border-radius: 14px;
	color: #1a1a1a;
	text-shadow: none; /* the box's inherited white-text shadow would be pointless (and slightly odd-looking) on dark text over a white field */
	flex: 1 1 auto;
	resize: none;
}
.ceiwa--ai .ceiwa__chat-input::placeholder { color: rgba( 0, 0, 0, 0.4 ); }

.ceiwa--ai .ceiwa__chat-send {
	border-radius: 9999px;
}

/* The taller box (see .ceiwa--ai .ceiwa__box above) is put to use here:
   both the campus list and the free-text box grow to fill the extra
   height instead of leaving empty space under a few short lines. */
.ceiwa--ai .ceiwa__chat {
	flex: 1 1 auto;
	min-height: 0; /* lets the flex child shrink so its own overflow can scroll */
}

.ceiwa__campus-screen {
	padding: 12px 16px 16px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.ceiwa__campus-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

/* A pickable row: a campus, an area, or a course. Purely presentational,
   and separate from .ceiwa__campus for a reason — that class carries
   BEHAVIOUR (frontend.js opens the campus detail screen from it). Reusing
   it on the area rows made picking an area also open an empty campus
   card underneath. Style goes here, behaviour on the specific class. */
.ceiwa__row {
	/* No side padding: these rows have to start on the same vertical line
	   as the heading and the back link above them, and 4px of inset was
	   enough to read as misaligned. */
	padding: 14px 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.1 );
	font-weight: 600;
	color: #fff;
	cursor: pointer;
}
.ceiwa__row:last-child { border-bottom: none; }
.ceiwa__row:hover,
.ceiwa__row:focus-visible { background: rgba( 255, 255, 255, 0.08 ); }

.ceiwa__campus-empty {
	padding: 16px 0;
	font-size: 13px;
	color: #fff;
	text-align: center;
	opacity: 0.7;
	list-style: none;
}

/* Step 2: the chosen campus's actual details, built by frontend.js. */
.ceiwa__campus-detail {
	padding: 12px 16px 16px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
.ceiwa__campus-detail-body { margin-top: 8px; }

/* The answer arrives as a chat message — one bubble with the phone and
   the email written into a sentence, not a list of fields. */
.ceiwa__campus-message {
	margin: 0;
	padding: 12px 14px;
	border-radius: 18px 18px 18px 4px;
	background: rgba( 255, 255, 255, 0.14 );
	border: 1px solid rgba( 255, 255, 255, 0.16 );
	font-size: 14px;
	line-height: 1.55;
	color: #fff;
}
.ceiwa__campus-link {
	font-size: 14px;
	color: #fff;
	opacity: 0.9;
	text-decoration: underline;
	text-decoration-color: rgba( 255, 255, 255, 0.35 );
}
.ceiwa__campus-link:hover { opacity: 1; }

.ceiwa__ai-question[hidden],
.ceiwa__campus-screen[hidden],
.ceiwa__campus-detail[hidden] { display: none; }