/* ============================================
   Academia Live Chat — estilos base
   Usa las mismas variables de marca del resto del sitio.
   Si esta hoja se carga sola (fuera del widget de Elementor),
   trae sus propios valores por defecto vía :root abajo.
   ============================================ */
:root {
	--alc-cream: #F3ECDC;
	--alc-cream-light: #FBF8F0;
	--alc-green-dark: #173404;
	--alc-green-petrol: #0F6E56;
	--alc-gold: #EF9F27;
	--alc-gold-text: #412402;
	--alc-text-body: #444441;
	--alc-text-muted: #888780;
	--alc-border: rgba(0,0,0,0.08);
}

.alc-wrap {
	font-family: 'Inter', sans-serif;
	color: var(--alc-text-body);
	max-width: 1080px;
	margin: 0 auto;
}

.alc-video-inner {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 */
	background: #000;
	border-radius: 14px;
	overflow: hidden;
}

.alc-video-inner iframe,
.alc-video-empty {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.alc-video-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--alc-text-muted);
	font-size: 14px;
	background: var(--alc-cream-light);
}

/* Reserva el lugar del video en el flujo normal cuando .alc-video pasa a
   position:fixed (ver más abajo, mobile + alumno) — así el chat no se corre
   hacia arriba al sacar el video del flujo. Oculto por defecto: solo se
   muestra en el caso puntual de abajo (mobile, alumno, sin pantalla completa
   horizontal). */
.alc-video-spacer {
	display: none;
}

.alc-video-paused {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 24px;
	color: #C9C7BC;
	font-size: 13.5px;
	background: #1A1A18;
}

/* Video apagado (modo presentador): se oculta el recuadro entero del video
   —no solo el iframe— para liberar ese espacio a favor del chat. */
.alc-wrap.alc-video-off .alc-video-inner {
	display: none;
}

/* Además del recuadro interno, se saca del layout el contenedor .alc-video
   entero. Si no, en desktop queda como ítem del grid (aunque vacío) y ocupa
   una celda: el panel de OBS caía una fila más abajo de lo esperado. */
.alc-wrap.alc-video-off .alc-video {
	display: none;
}

/* ============================================
   Toolbar del presentador: Video / Espectadores / sin leer / filtro,
   todo en una sola fila para dejarle el máximo lugar posible al chat.
   ============================================ */
.alc-host-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--alc-cream-light);
	padding: 10px 4px;
	border-bottom: 1px solid var(--alc-border);
}

.alc-toolbar-btn {
	background: var(--alc-green-petrol);
	color: var(--alc-cream-light);
	border: none;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

/* Indicador de estado del sitio (Ajuste 2): gris = todavía sin verificar,
   verde = último chequeo OK, rojo = 2+ fallos seguidos. El JS reutiliza el
   poll de mensajes (cada 3s) como chequeo de conexión, sin pedidos extra. */
.alc-status-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #B0AEA4;
	border: 2px solid rgba(0,0,0,0.12);
	box-sizing: border-box;
	flex-shrink: 0;
}

.alc-status-dot.alc-status-ok {
	background: #2E7D32;
	border-color: rgba(0,0,0,0.08);
}

.alc-status-dot.alc-status-down {
	background: #D32F2F;
	border-color: rgba(0,0,0,0.08);
	animation: alc-status-pulse 1s ease-in-out infinite;
}

@keyframes alc-status-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(211,47,47,0.55); }
	50% { box-shadow: 0 0 0 7px rgba(211,47,47,0); }
}

#alc-viewers-toggle-btn {
	background: var(--alc-gold);
	color: var(--alc-gold-text);
}

.alc-viewers-panel {
	margin-bottom: 10px;
	background: var(--alc-cream-light);
	border: 1px solid var(--alc-border);
	border-radius: 14px;
	max-height: 220px;
	overflow-y: auto;
	padding: 6px 0;
}

.alc-viewers-list {
	display: flex;
	flex-direction: column;
}

.alc-viewer-item {
	padding: 8px 16px;
	font-size: 13.5px;
	color: var(--alc-text-body);
	border-bottom: 1px solid var(--alc-border);
}

.alc-viewer-item:last-child {
	border-bottom: none;
}

.alc-viewers-empty {
	padding: 12px 16px;
	font-size: 12.5px;
	color: var(--alc-text-muted);
	text-align: center;
}

/* El panel en sí (academia-obs-panel) trae su propio fondo/borde/padding;
   acá solo controlamos el espacio que deja respecto al video/chat de abajo. */
.alc-obs-panel-wrap {
	margin-bottom: 10px;
}

.alc-chat {
	background: var(--alc-cream-light);
	border: 1px solid var(--alc-border);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	min-height: 0; /* necesario para que el scroll interno funcione dentro de flex/grid */
}

.alc-messages {
	flex: 1;
	overflow-y: auto;
	padding: 12px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.alc-msg {
	font-size: 13.5px;
	line-height: 1.4;
	word-wrap: break-word;
}

.alc-msg .alc-msg-name {
	font-weight: 600;
	color: var(--alc-green-petrol);
	margin-right: 4px;
	cursor: pointer;
}

.alc-msg .alc-msg-name:hover {
	text-decoration: underline;
}

.alc-msg.alc-msg-host .alc-msg-name {
	color: var(--alc-gold-text);
}

.alc-msg .alc-msg-time {
	font-size: 10.5px;
	color: var(--alc-text-muted);
	margin-left: 6px;
}

/* Ícono para destacar un comentario en el overlay de OBS (solo modo presentador) */
.alc-msg-pin {
	background: transparent;
	border: none;
	font-size: 15px;
	line-height: 1;
	padding: 2px 0 2px 8px;
	cursor: pointer;
	vertical-align: middle;
	opacity: 0.55;
}

.alc-msg-pin:hover {
	opacity: 1;
}

/* Comentario actualmente destacado en el overlay */
.alc-msg.alc-msg-pinned {
	background: rgba(239,159,39,0.18);
	border-radius: 6px;
	padding: 4px 6px;
	margin: -4px -6px;
}

.alc-msg.alc-msg-pinned .alc-msg-pin {
	opacity: 1;
}

/* Mensaje marcado como leído manualmente (tocando el cuerpo del mensaje, modo presentador) */
.alc-msg.alc-msg-read {
	opacity: 0.45;
}

.alc-msg.alc-msg-read .alc-msg-text {
	text-decoration: line-through;
}

/* Línea "Nuevos mensajes": la reubica solo el JS a medida que el presentador scrollea */
.alc-chat-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0;
	padding: 7px 10px;
	background: rgba(239,159,39,0.18);
	border-radius: 8px;
	color: var(--alc-gold-text);
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.alc-chat-divider::before,
.alc-chat-divider::after {
	content: '';
	flex: 1;
	height: 3px;
	background: var(--alc-gold);
	border-radius: 2px;
}

/* Contador de mensajes sin leer, en la toolbar del presentador: siempre
   visible aunque la línea de "Nuevos mensajes" haya quedado fuera de vista. */
.alc-unread-badge {
	background: #D32F2F;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

/* Chip de filtro activo por alumno (modo presentador), en la misma toolbar */
.alc-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(239,159,39,0.18);
	color: var(--alc-gold-text);
	font-size: 12.5px;
	font-weight: 600;
	padding: 5px 6px 5px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

.alc-filter-chip button {
	background: rgba(0,0,0,0.12);
	border: none;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	line-height: 1;
	font-size: 11px;
	color: var(--alc-gold-text);
	cursor: pointer;
}

.alc-form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px 14px;
	border-top: 1px solid var(--alc-border);
}

/* ============================================
   v1.6.14 — Identidad del alumno DENTRO del composer.

   Antes esto era una franja propia (`.alc-identity-trigger`) que vivía
   debajo del chat, fuera de `.alc-chat`. En mobile el chat ocupa casi toda
   la pantalla, así que esa franja quedaba sistemáticamente debajo del fold
   y nadie la encontraba. Ahora la foto va a la izquierda del cuadro de
   escribir y el alias arriba de él, en letra chica: los dos abren el mismo
   popup de nombre/foto (#alc-avatar-trigger y #alc-identity-name-btn en
   live-chat.js).
   ============================================ */

/* Columna que agrupa alias + textarea, para que el alias quede ARRIBA del
   cuadro y no al lado. La foto y el botón de enviar quedan afuera, como
   hermanos de esta columna dentro de .alc-form (que es flex en fila). */
.alc-form-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* El textarea heredaba `flex: 1` pensado para una fila; acá adentro es una
   columna, así que ese `1` lo haría estirarse a lo alto. */
.alc-form .alc-form-main textarea {
	flex: 0 0 auto;
	width: 100%;
}

.alc-identity-avatar-btn {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	padding: 0;
	margin-bottom: 2px; /* alinea con el textarea, que tiene el alias encima */
	border: 1px solid var(--alc-border);
	border-radius: 50%;
	overflow: hidden;
	background: var(--alc-cream);
	cursor: pointer;
}

.alc-identity-avatar-btn img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.alc-identity-name-btn {
	display: flex;
	align-items: baseline;
	gap: 6px;
	max-width: 100%;
	padding: 0 0 0 4px;
	border: none;
	background: none;
	font-family: 'Inter', sans-serif;
	text-align: left;
	cursor: pointer;
	line-height: 1.2;
}

.alc-identity-name {
	font-size: 11px;
	font-weight: 600;
	color: var(--alc-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Pista de que el alias es clickeable — si no, parece una etiqueta muerta. */
.alc-identity-edit {
	flex-shrink: 0;
	font-size: 10px;
	color: var(--alc-green-petrol);
	text-decoration: underline;
}

.alc-identity-name-btn:hover .alc-identity-name,
.alc-identity-name-btn:hover .alc-identity-edit {
	color: var(--alc-gold-text);
}

/* Antes era un <input type="text">; ahora es una <textarea rows="1"> que
   crece de a poco hasta 3 renglones a medida que el mensaje se extiende
   (ver alcAutoGrowInput() en live-chat.js) y vuelve a 1 renglón al enviar o
   al borrar el texto. border-radius grande + 1 renglón imitan al input de
   siempre; deja de verse "pill" recién cuando crece. */
.alc-form textarea {
	flex: 1;
	box-sizing: border-box;
	resize: none;
	overflow-y: hidden;
	border: 1px solid var(--alc-border);
	border-radius: 18px;
	padding: 9px 14px;
	font-size: 13.5px;
	line-height: 1.35;
	font-family: 'Inter', sans-serif;
}

/* Botón de enviar con ícono (antes decía "Enviar" en texto) — ahorra ancho
   en el composer, sobre todo en mobile, donde cada centímetro le queda al
   input de texto. */
.alc-send-btn {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: var(--alc-gold);
	color: var(--alc-gold-text);
	border: none;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
}

/* Estado "enviando" (ver live-chat.js): como el botón ahora es solo un
   ícono, no hay texto que cambiar a "Enviando..." — alcanza con atenuarlo
   mientras está disabled. */
.alc-send-btn:disabled {
	opacity: 0.55;
	cursor: default;
}

.alc-comments-off {
	padding: 12px 16px;
	border-top: 1px solid var(--alc-border);
	font-size: 12.5px;
	color: var(--alc-text-muted);
	text-align: center;
}

/* ============================================
   MODO PRESENTADOR (link secreto): letra más grande
   en el chat, para leer y escribir cómodo desde la tablet
   mientras transmitís por otra cámara.
   ============================================ */
.alc-wrap[data-mode="host"] .alc-msg {
	font-size: 19px;
	font-weight: 600;
	cursor: pointer;
}

.alc-wrap[data-mode="host"] .alc-msg .alc-msg-time {
	font-size: 14px;
}

.alc-wrap[data-mode="host"] .alc-msg-name {
	color: #D32F2F;
}

.alc-wrap[data-mode="host"] .alc-msg-text {
	color: #000000;
}

.alc-wrap[data-mode="host"] .alc-form textarea {
	font-size: 19px;
	font-weight: 600;
	padding: 14px 18px;
}

.alc-wrap[data-mode="host"] .alc-send-btn {
	width: 48px;
	height: 48px;
}

.alc-wrap[data-mode="host"] .alc-send-btn svg {
	width: 21px;
	height: 21px;
}

.alc-locked {
	padding: 24px 16px;
	text-align: center;
}

.alc-locked p {
	font-size: 13.5px;
	color: var(--alc-text-muted);
	margin-bottom: 14px;
}

/* Variante "sin acceso"/"iniciá sesión" cuando ocupa todo el bloque (no hay video visible al lado) */
.alc-locked-full {
	background: var(--alc-cream-light);
	border: 1px solid var(--alc-border);
	border-radius: 14px;
	padding: 48px 24px;
	max-width: 480px;
	margin: 0 auto;
}

.alc-noaccess-soon {
	font-size: 12.5px;
	color: var(--alc-text-muted);
	font-style: italic;
}

.alc-btn {
	display: inline-block;
	background: var(--alc-gold);
	color: var(--alc-gold-text);
	border-radius: 999px;
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	margin: 0 4px 8px;
}

.alc-btn-outline {
	background: transparent;
	border: 1px solid var(--alc-border);
	color: var(--alc-text-body);
}

/* Franja "Transmitir a la TV", debajo de todo (video + chat) */
.alc-cast {
	padding-top: 14px;
	border-top: 1px solid var(--alc-border);
}

.alc-cast-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--alc-green-petrol);
	text-decoration: none;
}

.alc-cast-btn:hover {
	text-decoration: underline;
}

.alc-cast-hint {
	font-size: 11.5px;
	color: var(--alc-text-muted);
	margin-top: 2px;
}

/* ============================================
   DESKTOP (>= 922px): video a la izquierda,
   chat a la derecha ocupando la misma altura del video.
   El bloque de "Transmitir a la TV" ocupa las 2 columnas, debajo de ambos.
   ============================================ */
@media (min-width: 922px) {
	.alc-wrap {
		display: grid;
		/* Video ON es ahora el caso "base": chat angosto a la izquierda,
		   video ancho a la derecha (antes era al revés). */
		/* El chat está antes que el video en el HTML: con auto-placement el chat
		   toma la columna 1 de la fila 1 y el video la columna 2 de esa misma fila.
		   (Con el video primero, el cursor de colocación ya había pasado la columna 1
		   y el chat se iba a la fila de abajo — ese era el bug de alineación.) */
		grid-template-columns: 340px 1fr;
		gap: 18px;
		align-items: start; /* el chat ya no "estira" contra el video: define su propia altura acotada abajo */
	}
	.alc-wrap:not(.alc-video-off) .alc-chat {
		grid-column: 1;
	}
	.alc-wrap:not(.alc-video-off) .alc-video {
		grid-column: 2;
	}
	.alc-chat {
		/* Antes: height: 100% dentro de un grid con align-items:stretch.
		   Eso causaba un ciclo: el grid necesita conocer la altura intrínseca del chat
		   para calcular el alto de la fila, pero un % no sirve para eso, así que el
		   navegador usaba el contenido real (todos los mensajes acumulados) — que crece
		   sin límite. Por eso el bloque se estiraba infinito hacia abajo.
		   Ahora: altura fija en vh (igual criterio que ya usás en mobile con 48vh),
		   así el chat queda acotado a la pantalla sin importar cuántos mensajes entren. */
		height: 70vh;
		max-height: 640px; /* tope en pantallas muy altas, para que no se vea desproporcionado */
		min-height: 0; /* imprescindible para que el overflow-y de .alc-messages funcione */
	}
	.alc-cast {
		grid-column: 1 / -1;
	}
	.alc-host-toolbar,
	.alc-viewers-panel,
	.alc-obs-panel-wrap {
		grid-column: 1 / -1;
	}

	/* ============================================
	   Panel de OBS + video, las 4 combinaciones:
	   Clases que agrega/saca live-chat.js:
	   - .alc-video-off      -> video apagado (ya existía)
	   - .alc-obs-open       -> panel de OBS visible
	   - .alc-obs-wide       -> el panel de OBS está en su "Vista grande"
	                            (evento academiaObsPanel:layout)
	   ============================================ */

	/* Video apagado + OBS abierto + OBS compacto:
	   chat a la izquierda, panel de OBS angosto a la derecha. */
	.alc-wrap.alc-video-off.alc-obs-open:not(.alc-obs-wide) {
		grid-template-columns: 1fr 360px;
	}
	.alc-wrap.alc-video-off.alc-obs-open:not(.alc-obs-wide) .alc-chat {
		grid-column: 1;
	}
	.alc-wrap.alc-video-off.alc-obs-open:not(.alc-obs-wide) .alc-obs-panel-wrap {
		grid-column: 2;
	}
	/* Video apagado + OBS abierto + OBS grande: sigue el comportamiento de
	   siempre (fila propia a todo el ancho, .alc-obs-panel-wrap ya tiene
	   grid-column: 1 / -1 más arriba) — no hace falta ninguna regla extra acá. */

	/* Video prendido + OBS abierto (compacto o grande): el panel de OBS
	   comparte la columna del video (columna 2) y cae automáticamente en la
	   fila de abajo, gracias al auto-placement del grid — sin necesitar
	   calcular ningún número de fila a mano. */
	.alc-wrap:not(.alc-video-off).alc-obs-open .alc-obs-panel-wrap {
		grid-column: 2;
	}

	/* "Vista compacta" del panel de OBS, en el contexto del chat en vivo:
	   fuerza pantalla arriba + escenas debajo (en vez del lado a lado nativo
	   del plugin), porque acá siempre vive en una columna angosta. Si el
	   panel está en "Vista grande" (.aop-layout-wide), no se toca nada —
	   ya usa por su cuenta ese mismo criterio de apilado. */
	.alc-obs-panel-wrap .academia-obs-panel:not(.aop-layout-wide) .aop-body {
		flex-direction: column;
	}
	.alc-obs-panel-wrap .academia-obs-panel:not(.aop-layout-wide) .aop-preview {
		flex: none;
		max-width: 100%;
		width: 100%;
	}
	.alc-obs-panel-wrap .academia-obs-panel:not(.aop-layout-wide) .aop-thumbnail {
		height: auto;
		aspect-ratio: 16 / 9;
	}
	.alc-obs-panel-wrap .academia-obs-panel:not(.aop-layout-wide) .aop-scenes {
		grid-template-rows: none;
		grid-auto-flow: row;
		grid-auto-columns: unset;
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ============================================
   MOBILE (< 922px): por defecto, apilado
   (video arriba, chat en el medio, cast al final) — esto cubre el caso vertical.
   ============================================ */
@media (max-width: 921px) {
	.alc-wrap {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}
	/* En el HTML el chat va ANTES que el video (así el grid de desktop lo ubica
	   solo en la columna izquierda de la misma fila, sin filas explícitas).
	   En mobile se restituye el orden visual original con `order`:
	   toolbar → espectadores → video → chat → OBS → cast. */
	.alc-host-toolbar {
		order: -3;
	}
	.alc-viewers-panel {
		order: -2;
	}
	.alc-video {
		order: -1;
	}
	.alc-chat {
		height: 48vh;
	}
	/* Video como ventanita flotante en la vista de alumno (v1.6.10).
	   Historia: v1.6.8 probó position:sticky (se desenganchaba al enfocar el
	   cuadro de escribir, y quedaba tapado por el header de Astra). v1.6.9
	   pasó a position:fixed puro por CSS, pero Gabriel lo probó en su
	   celular real y el video se seguía yendo hacia arriba, fuera de
	   pantalla, justo al enfocar el cuadro de escribir: el "top" fijo por
	   CSS no alcanza en mobile, porque al abrirse el teclado algunos
	   navegadores corren el viewport visible respecto del viewport contra el
	   que CSS calcula position:fixed (ver window.visualViewport.offsetTop) —
	   por eso ahora el "top" se corrige en vivo desde JS (alcPositionFloatingVideo,
	   mismo criterio que ya usa el dock del panel de OBS más arriba en el
	   JS). Acá solo quedan el resto de los costados (left/right no cambian
	   con el teclado, así que sí pueden ser fijos por CSS) y el aspecto
	   general de tarjeta flotante despegada del resto de la página.
	   .alc-video-spacer reserva su alto aproximado en el flujo normal (mismo
	   ancho + aspect-ratio 16:9) para que el chat no se corra hacia arriba
	   al sacar el video del flujo. Excluido a propósito del modo horizontal-
	   pantalla-completa (ahí el video ya tiene su propio position:fixed a
	   pantalla entera, ver body.alc-fullscreen-landscape .alc-video abajo). */
	body:not(.alc-fullscreen-landscape) .alc-wrap[data-mode="guest"] .alc-video-spacer {
		display: block;
		order: -1;
		width: 100%;
		aspect-ratio: 16 / 9;
	}
	body:not(.alc-fullscreen-landscape) .alc-wrap[data-mode="guest"] .alc-video {
		position: fixed;
		top: 10px; /* valor de respaldo; el JS lo corrige en vivo contra visualViewport.offsetTop */
		left: 10px;
		right: 10px;
		z-index: 8000; /* por encima del header de Astra, por debajo del modal de nombre/foto (z-index 9999) */
	}
	/* v1.6.15: sin sombra en el video flotante (pedido de Gabriel). La sombra
	   estaba para despegarlo visualmente del chat cuando lo tapaba al
	   scrollear; ahora que arranca debajo del header y el chat le queda
	   siempre por debajo, sobraba. */

	/* Pedido de Gabriel: no hace falta poder arrastrarla, pero sí una "×"
	   para desactivarla — como el mini-reproductor de YouTube. */
	body:not(.alc-fullscreen-landscape) .alc-wrap[data-mode="guest"] .alc-video-close-btn {
		display: flex;
	}

	/* Estado colapsado (el usuario tocó la "×"): se ocultan video + spacer
	   —el chat recupera ese espacio solo, ver alcFitGuestChatHeight()— y
	   aparece el botoncito para volver a mostrarlo. */
	body:not(.alc-fullscreen-landscape) .alc-wrap[data-mode="guest"].alc-video-collapsed .alc-video,
	body:not(.alc-fullscreen-landscape) .alc-wrap[data-mode="guest"].alc-video-collapsed .alc-video-spacer {
		display: none;
	}
	body:not(.alc-fullscreen-landscape) .alc-wrap[data-mode="guest"].alc-video-collapsed .alc-video-reopen-btn {
		display: flex;
	}
}

/* Botón "×" sobre la esquina del video flotante (mobile, alumno). Oculto
   por defecto — solo se muestra en el caso puntual de arriba. */
.alc-video-close-btn {
	display: none;
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}
.alc-video-close-btn:hover {
	background: rgba(0, 0, 0, 0.75);
}

/* Botoncito "▶ Video" para volver a mostrar el video oculto. Oculto por
   defecto — solo se muestra en .alc-video-collapsed (ver arriba). */
.alc-video-reopen-btn {
	display: none;
	position: fixed;
	top: 10px; /* valor de respaldo; el JS lo corrige en vivo contra visualViewport.offsetTop */
	right: 10px;
	z-index: 8000;
	align-items: center;
	gap: 6px;
	border: none;
	border-radius: 999px;
	padding: 8px 14px;
	background: var(--alc-green-dark);
	color: var(--alc-cream-light);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
	cursor: pointer;
}

/* ============================================
   MOBILE EN HORIZONTAL: el video ocupa toda la pantalla,
   el chat se oculta. La clase la agrega live-chat.js
   en <body> según orientación + ancho de pantalla.
   ============================================ */
body.alc-fullscreen-landscape {
	overflow: hidden;
}

body.alc-fullscreen-landscape .alc-chat {
	display: none !important;
}

body.alc-fullscreen-landscape .alc-cast {
	display: none !important;
}

body.alc-fullscreen-landscape .alc-host-toolbar,
body.alc-fullscreen-landscape .alc-viewers-panel,
body.alc-fullscreen-landscape .alc-obs-panel-wrap {
	display: none !important;
}

body.alc-fullscreen-landscape .alc-video {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: #000;
}

body.alc-fullscreen-landscape .alc-video-inner {
	position: absolute;
	inset: 0;
	padding-top: 0;
	border-radius: 0;
	height: 100%;
}

/* Oculta el header/footer de Astra mientras el video está en pantalla completa (mobile horizontal) */
body.alc-fullscreen-landscape .site-header,
body.alc-fullscreen-landscape .site-footer,
body.alc-fullscreen-landscape footer.site-footer {
	display: none !important;
}

/* Estados sin video visible (no logueado / sin acceso): centrado, sin la grilla de 2 columnas */
.alc-wrap[data-mode="locked"],
.alc-wrap[data-mode="no-access"] {
	display: block;
	min-height: 0;
}

/* Video apagado en modo presentador: el chat pasa a ocupar todo el ancho y más alto */
@media (min-width: 922px) {
	.alc-wrap.alc-video-off {
		grid-template-columns: 1fr;
	}
	.alc-wrap.alc-video-off .alc-chat {
		height: 75vh;
	}
}
@media (max-width: 921px) {
	.alc-wrap.alc-video-off .alc-chat {
		height: 70vh;
	}
}

/* ============================================
   Popup de bienvenida (nombre + foto), una sola vez por alumno
   ============================================ */
.alc-prefs-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(11,61,52,0.72);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

/* El "display: flex" de arriba pisa el "display: none" que el navegador le
   pone por defecto al atributo [hidden] (misma especificidad, gana el
   author stylesheet) — sin esto el popup quedaría siempre visible aunque
   el HTML/JS le pongan "hidden". */
.alc-prefs-modal[hidden] {
	display: none;
}

.alc-prefs-card {
	position: relative;
	background: var(--alc-cream-light);
	border-radius: 16px;
	padding: 28px 26px;
	max-width: 360px;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

.alc-prefs-close-btn {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 50%;
	background: rgba(0,0,0,0.06);
	color: var(--alc-text-muted);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

.alc-prefs-close-btn:hover {
	background: rgba(0,0,0,0.12);
}

.alc-prefs-title {
	font-family: 'Lora', serif;
	font-weight: 600;
	font-size: 19px;
	color: var(--alc-green-dark);
	margin: 0 0 6px;
}

.alc-prefs-subtitle {
	font-size: 13px;
	color: var(--alc-text-muted);
	margin: 0 0 20px;
	line-height: 1.5;
}

.alc-prefs-avatar-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.alc-prefs-avatar-preview {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--alc-border);
}

.alc-prefs-avatar-actions {
	display: flex;
	gap: 8px;
}

.alc-prefs-upload-btn {
	display: inline-block;
	background: transparent;
	border: 1px solid var(--alc-border);
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--alc-green-petrol);
	cursor: pointer;
}

.alc-prefs-remove-btn {
	background: transparent;
	border: 1px solid var(--alc-border);
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 12.5px;
	font-weight: 600;
	color: #A32D2D;
	cursor: pointer;
}

.alc-prefs-remove-btn:disabled {
	opacity: 0.5;
	cursor: default;
}

.alc-prefs-label {
	display: block;
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	color: var(--alc-text-body);
	margin-bottom: 6px;
}

.alc-prefs-name-input {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	border-radius: 999px;
	border: 1px solid var(--alc-border);
	font-size: 14px;
	font-family: 'Inter', sans-serif;
	margin-bottom: 18px;
}

.alc-prefs-accept-btn {
	width: 100%;
	background: var(--alc-gold);
	color: var(--alc-gold-text);
	border: none;
	border-radius: 999px;
	padding: 13px 18px;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

.alc-prefs-accept-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.alc-prefs-error {
	color: #A32D2D;
	font-size: 12.5px;
	margin: 10px 0 0;
}

/* ============================================
   v1.6.13 — MODO TECLADO (mobile vertical, alumno)

   Por qué existe este bloque (leer antes de tocar nada):

   Hasta v1.6.12 el video era una ventanita `position: fixed` y TODO lo demás
   (chat + cuadro de escribir) seguía viviendo en el flujo normal de la
   página. Ese esquema tiene un problema estructural que no se arregla
   ajustando alturas: la página sigue siendo scrolleable, y cuando el celular
   abre el teclado el navegador scrollea POR SU CUENTA para revelar el campo
   enfocado. Ese scroll mueve el cuadro de escribir, pero NO mueve el video
   (que es fixed) — resultado: el cuadro de escribir termina debajo del
   video. Todos los intentos anteriores (scroll-margin-top, corrección manual
   de scroll, piso dinámico del alto del chat) peleaban CONTRA ese scroll,
   en vez de eliminar el motivo por el que ocurre.

   v1.6.13 cambia el enfoque: mientras el cuadro de escribir tiene el foco,
   el widget entero pasa a ser un panel fijo que ocupa EXACTAMENTE el
   viewport visible (`visualViewport.offsetTop` + `.height`, calculados en
   vivo desde el JS), con el video como primer ítem de una columna flex y el
   cuadro de escribir como último. Dos consecuencias:

   1) El video deja de ser `fixed` y pasa a ser un ítem más de la columna:
      es geométricamente IMPOSIBLE que tape al cuadro de escribir.
   2) Todo lo que hay que ver ya está dentro del viewport visible, así que
      el navegador no tiene ningún motivo para scrollear — y de paso el
      `overflow: hidden` en <body> le saca la posibilidad de hacerlo.

   Si falta lugar, el que cede terreno es el listado de mensajes
   (`.alc-messages`, que ya es `flex: 1` + contenedor de scroll), nunca el
   composer. El JS además achica el video (manteniendo el 16:9, achicando su
   ancho) si con el teclado abierto no queda un mínimo de chat visible.

   Este modo se apaga solo al salir del cuadro de escribir: fuera del modo
   teclado todo vuelve a funcionar como en v1.6.12 (video flotante, página
   scrolleable, franja de identidad y pie del sitio accesibles scrolleando).
   ============================================ */
@media (max-width: 921px) {

	/* Sin scroll de fondo mientras el panel está abierto: es la otra mitad
	   del fix (el navegador no puede "acomodar" nada scrolleando). */
	body.alc-kb-mode-on {
		overflow: hidden !important;
	}

	body:not(.alc-fullscreen-landscape) .alc-wrap[data-mode="guest"].alc-kb-mode {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		/* `top` y `height` los escribe el JS en vivo contra visualViewport
		   (alcApplyKbGeometry) — no ponerlos acá por CSS: con el teclado
		   abierto el viewport visible se corre respecto del viewport contra
		   el que CSS calcula position:fixed. */
		z-index: 9000;
		margin: 0 !important;
		max-width: none !important;
		padding: 10px !important;
		box-sizing: border-box !important;
		background: var(--alc-cream);
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
		overflow: hidden !important;
	}

	/* El video vuelve al flujo: dentro del panel es un ítem más de la
	   columna. Acá está el fix de raíz. */
	body:not(.alc-fullscreen-landscape) .alc-wrap[data-mode="guest"].alc-kb-mode .alc-video {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		order: -1;
		flex: 0 0 auto;
	}

	/* Nada de esto tiene sentido mientras se escribe: el spacer reservaba el
	   lugar de un video que ahora SÍ está en el flujo, y la franja de
	   identidad / el botón de cast son contenido de abajo del fold. */
	body:not(.alc-fullscreen-landscape) .alc-wrap[data-mode="guest"].alc-kb-mode .alc-video-spacer,
	body:not(.alc-fullscreen-landscape) .alc-wrap[data-mode="guest"].alc-kb-mode .alc-cast {
		display: none !important;
	}

	body:not(.alc-fullscreen-landscape) .alc-wrap[data-mode="guest"].alc-kb-mode .alc-chat {
		flex: 1 1 auto !important;
		min-height: 0 !important;
		height: auto !important;
	}

	/* El composer no se achica nunca: si falta lugar, lo cede .alc-messages. */
	body:not(.alc-fullscreen-landscape) .alc-wrap[data-mode="guest"].alc-kb-mode .alc-form {
		flex: 0 0 auto;
	}

	/* Video oculto con la "×": el botoncito "▶ Video" también vuelve al
	   flujo, si no queda flotando sobre el panel. */
	body:not(.alc-fullscreen-landscape) .alc-wrap[data-mode="guest"].alc-kb-mode.alc-video-collapsed .alc-video-reopen-btn {
		position: static !important;
		top: auto !important;
		right: auto !important;
		order: -1;
		align-self: flex-end;
	}
}