/**
 * Estilos del congreso.
 *
 * Todo lo visual de la página vive aquí, en el plugin: la maqueta de la
 * plantilla del theme y el formulario de compra. Así el theme solo aporta el
 * marcado y el contenido, y el plugin es la aplicación de congresos completa.
 *
 * Usa los tokens del theme Divalyo (--dv-*) cuando están, con valores de
 * reserva para que siga siendo legible con cualquier otro theme.
 *
 * Estructura de la página: cabecera fija de una línea con el índice a la
 * izquierda y el logotipo a la derecha, y el contenido en una columna centrada
 * al mismo ancho que el pie (el .container de Bootstrap).
 *
 * @package DivalyoCongreso
 */


/* ==========================================================================
   1. TOKENS PROPIOS DE LA PÁGINA
   ========================================================================== */

.congreso-body {
	--dvc-gap-seccion: 5rem;
	--dvc-barra-movil: 68px;

	/* Alto de la cabecera fija más un respiro. Es lo que evita que al saltar a
	   una sección el titular quede escondido debajo. */
	--dvc-offset-anclaje: 84px;
}


/* ==========================================================================
   2. CABECERA
   ========================================================================== */

.congreso-header {
	position: sticky;
	top: 0;
	z-index: 1020;
	background: var(--dv-surface, #fff);
	border-bottom: solid 1px var(--dv-primary);
	padding: .7rem 0;
}

.congreso-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

/* --- Logotipo de quien organiza --- */

.congreso-organiza {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .2rem;
	text-decoration: none;
	line-height: 1;
	flex: 0 0 auto;
}

.congreso-organiza-rotulo {
	font-size: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dv-ink);
}

.congreso-organiza img {
	width: 110px;
	height: auto;
	display: block;
}

.congreso-organiza:hover .congreso-organiza-rotulo,
.congreso-organiza:focus-visible .congreso-organiza-rotulo {
	color: var(--dv-primary);
}

/* --- Botón del índice en móvil --- */

.congreso-menu-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: none;
	border: 0;
	padding: .25rem 0;
	font: inherit;
	font-size: .9rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--dv-primary);
}

/* Tres rayas dibujadas con sombras: un icono sin cargar nada. */
.congreso-menu-icono,
.congreso-menu-icono::before,
.congreso-menu-icono::after {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--dv-primary);
}

.congreso-menu-icono {
	position: relative;
}

.congreso-menu-icono::before,
.congreso-menu-icono::after {
	content: "";
	position: absolute;
	left: 0;
}

.congreso-menu-icono::before { top: -6px; }
.congreso-menu-icono::after  { top: 6px; }


/* ==========================================================================
   3. ÍNDICE DE SECCIONES
   ========================================================================== */

.congreso-nav-escritorio {
	min-width: 0; /* Sin esto el flex no deja encoger la lista. */
}

/* --- Horizontal, en la cabecera --- */

.congreso-nav-lista {
	display: flex;
	flex-wrap: nowrap;      /* Una sola línea, como pide el diseño. */
	align-items: center;
	gap: .25rem 1.25rem;
	overflow-x: auto;       /* Si no cabe, se desplaza en vez de romperse. */
	scrollbar-width: none;
}

.congreso-nav-lista::-webkit-scrollbar { display: none; }

.congreso-nav-lista .nav-item { flex: 0 0 auto; }

.congreso-nav--principal .nav-link {
	padding: .25rem 0;
	font-size: .95rem;
	white-space: nowrap;
	color: var(--dv-ink);
	border-bottom: solid 2px transparent;
	transition: color .2s ease, border-color .2s ease;
}

.congreso-nav--principal .nav-link:hover,
.congreso-nav--principal .nav-link:focus-visible {
	color: var(--dv-primary);
}

/* Estado que marca el scrollspy. El color no basta por sí solo (WCAG 1.4.1):
   por eso cambia también el filete y el grosor de la letra. */
.congreso-nav--principal .nav-link.active {
	color: var(--dv-primary);
	border-bottom-color: var(--dv-primary);
	font-weight: 700;
}

.congreso-nav-cta { margin-left: .5rem; }

/* --- Vertical, en el offcanvas de móvil --- */

.congreso-nav-lista-vertical { gap: .25rem; }

.congreso-nav--offcanvas .nav-link {
	font-size: 1.05rem;
	padding: .5rem 0 .5rem .9rem;
	color: var(--dv-ink);
	border-left: solid 3px transparent;
}

.congreso-nav--offcanvas .nav-link.active {
	color: var(--dv-primary);
	border-left-color: var(--dv-primary);
	font-weight: 700;
}

.congreso-nav--offcanvas .congreso-nav-cta {
	margin: 1.25rem 0 0;
}

.congreso-nav--offcanvas .congreso-nav-cta .btn { width: 100%; }

.congreso-offcanvas {
	background-color: var(--dv-surface, #fff);
	max-width: 300px;
}

.congreso-offcanvas .offcanvas-title {
	color: var(--dv-ink);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .75rem;
}


/* ==========================================================================
   4. ESTRUCTURA DEL CONTENIDO
   ========================================================================== */

.congreso-wrap {
	padding-bottom: 4rem;
}

/* La barra inferior de móvil tapa el final del contenido si no se compensa. */
@media (max-width: 991.98px) {
	.congreso-body { padding-bottom: var(--dvc-barra-movil); }
}

.congreso-seccion {
	padding-top: var(--dvc-gap-seccion);
	scroll-margin-top: var(--dvc-offset-anclaje);
}

.congreso-seccion + .congreso-seccion {
	border-top: solid 1px var(--dv-primary);
	margin-top: var(--dvc-gap-seccion);
}

.congreso-seccion-titulo {
	font-size: 1rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .12em;
	margin-bottom: 2.5rem;
}


/* ==========================================================================
   5. PRESENTACIÓN
   ========================================================================== */

.congreso-titular {
	font-size: clamp(2rem, 5vw, 3.4rem);
	font-weight: 800;
	line-height: 1.05;
	margin-bottom: 1.5rem;
}

.congreso-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--dv-primary);
	margin-bottom: 2rem;
}

.congreso-meta-lugar::before {
	content: "·";
	margin-right: 1.25rem;
	color: var(--dv-ink);
}

.congreso-entradilla p:last-child { margin-bottom: 0; }

.congreso-cartel { margin-top: 2rem; }

@media (min-width: 768px) {
	.congreso-cartel { margin-top: 0; }
}


/* ==========================================================================
   6. PROGRAMA
   ========================================================================== */

.congreso-programa {
	list-style: none;
	margin: 0;
	padding: 0;
}

.congreso-programa-dia {
	margin: 2.5rem 0 1rem;
}

.congreso-programa-dia:first-child { margin-top: 0; }

.congreso-programa-bloque {
	display: grid;
	grid-template-columns: 1fr;
	gap: .25rem 2rem;
	padding: 1.25rem 0;
	border-top: solid 1px rgba(0, 0, 0, .08);
}

@media (min-width: 576px) {
	.congreso-programa-bloque { grid-template-columns: 9rem 1fr; }
}

.congreso-programa-hora {
	margin: 0;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	color: var(--dv-primary);
	font-weight: 600;
}

.congreso-programa-titulo {
	font-size: 1.15rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--dv-primary);
	margin: 0 0 .35rem;
}

/* --- Quién interviene ---------------------------------------------------
   Las mesas llevan moderación y varios ponentes. La moderación va antes y con
   su rótulo, porque en un congreso es información distinta de la de ponente. */

.congreso-programa-modera {
	margin: 0 0 .5rem;
	font-size: .95rem;
	color: var(--dv-ink-strong);
}

.congreso-programa-rotulo {
	display: inline-block;
	margin-right: .4rem;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--dv-ink);
}

.congreso-programa-ponentes {
	list-style: none;
	margin: 0 0 .35rem;
	padding: 0;
}

.congreso-programa-ponentes li {
	position: relative;
	padding-left: 1rem;
	font-size: .95rem;
	line-height: 1.4;
	margin-bottom: .2rem;
	color: var(--dv-ink-strong);
}

/* Filete en lugar de bolo: más discreto y no se hereda del estilo de listas
   del contenido general. */
.congreso-programa-ponentes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .65em;
	width: .5rem;
	height: 1px;
	background: var(--dv-primary);
}

.congreso-programa-intervinientes {
	margin: 0 0 .35rem;
	font-size: 1rem;
	color: var(--dv-ink-strong);
}

/* El subtítulo del bloque: cuelga del título y necesita separarse de lo que
   viene debajo. Si es lo último —los bloques de pausa no llevan ponentes— no
   añade cola. */
.congreso-programa-descripcion {
	margin: 0 0 .6rem;
	font-size: 1rem;
}

.congreso-programa-descripcion:last-child {
	margin-bottom: 0;
}

/* Pausas: presentes, pero sin competir con las ponencias. */
.congreso-programa-bloque.es-pausa .congreso-programa-titulo {
	font-weight: 400;
	color: var(--dv-ink);
	font-size: 1rem;
}


/* ==========================================================================
   7. PONENTES
   ========================================================================== */

.congreso-ponentes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.5rem 1.75rem;
}

/* Rejilla con número fijo de columnas en lugar de auto-fill: con seis personas
   da 3+3 y 4+2, que es lo que se quiere ver. Con auto-fill saldrían cinco en
   una fila y una suelta debajo. */
@media (min-width: 768px)  { .congreso-ponentes { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .congreso-ponentes { grid-template-columns: repeat(4, 1fr); } }

.congreso-ponente-foto {
	aspect-ratio: 1;
	overflow: hidden;
	margin-bottom: .9rem;
	background: var(--dv-muted);
	border-radius: var(--dv-radius);
}

.congreso-ponente-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Sin foto: inicial sobre el fondo de marca, para que la retícula no se rompa. */
/* Marcador para quien todavía no ha enviado foto. Fondo neutro y letra en azul:
   con veintitantas fichas, un cuadrado azul macizo por cada una convertiría la
   retícula en una pared de color. */
.congreso-ponente-inicial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--dv-muted, #f5f5f5);
	color: rgba(var(--dv-primary-rgb, 0, 0, 255), .45);
	font-size: 3rem;
	font-weight: 800;
}

.congreso-ponente-nombre {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 .2rem;
	color: var(--dv-primary);
}

.congreso-ponente-rol {
	margin: 0 0 .2rem;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--dv-ink);
}

.congreso-ponente-cargo,
.congreso-ponente-organizacion {
	margin: 0;
	font-size: .95rem;
	line-height: 1.35;
}

.congreso-ponente-organizacion { color: var(--dv-ink-strong); }

.congreso-ponente-linkedin {
	margin: .5rem 0 0;
	font-size: .9rem;
}

.congreso-ponente-linkedin a { text-decoration: underline; }


/* ==========================================================================
   8. SPONSOR
   ========================================================================== */

/* Un bloque por rótulo: Patrocinan, Colaboran… */
.congreso-sponsors-bloque + .congreso-sponsors-bloque {
	margin-top: 3.5rem;
}

.congreso-sponsors-rotulo {
	font-size: .8rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .12em;
	text-align: center;
	color: var(--dv-ink);
	margin: 0 0 1.75rem;
}

/* Fila centrada, no retícula: así cada bloque se centra solo tenga dos logos o
   tenga cinco, y al no caber se parte en filas que siguen centradas. */
.congreso-sponsors {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2.5rem 3rem;
}

.congreso-sponsor {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Casilla igual para todos: es lo que hace que los logos se vean del mismo
	   tamaño aunque lleguen en proporciones distintas. */
	width: 190px;
	height: 72px;
}

/* Los logos no se recortan: se encajan dentro de la casilla. Uno cuadrado y uno
   apaisado ocupan así el mismo alto y quedan alineados. */
.congreso-sponsor img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.congreso-sponsor a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.congreso-sponsor-nombre {
	font-size: 1rem;
	color: var(--dv-primary);
	text-align: center;
}

/* En móvil la casilla fija dejaría un logo por fila. En porcentaje entran dos. */
@media (max-width: 575.98px) {

	.congreso-sponsors { gap: 2rem 1.5rem; }

	.congreso-sponsor { width: 42%; }
}


/* ==========================================================================
   9. ENTRADAS
   ========================================================================== */

.congreso-entradas-aviso {
	font-size: 1.15rem;
	color: var(--dv-primary);
}


/* ==========================================================================
   10. BARRA INFERIOR DE MÓVIL
   ========================================================================== */

.congreso-barra-movil {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	padding: .75rem 1rem;
	/* Respeta la zona segura de los iPhone con barra de gestos. */
	padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
	background: var(--dv-surface, #fff);
	border-top: solid 1px var(--dv-primary);
}


/* ==========================================================================
   11. IMPRESIÓN
   El programa se imprime. Fuera navegación y barras.
   ========================================================================== */

@media print {
	.congreso-header,
	.congreso-barra-movil,
	.congreso-offcanvas,
	.congreso-entradas,
	.site-footer { display: none !important; }

	.congreso-seccion { break-inside: avoid; padding-top: 2rem; }
	.congreso-programa-bloque { break-inside: avoid; }
}


/* ==========================================================================
   FORMULARIO DE COMPRA
   ========================================================================== */

.dvc-compra {
	--dvc-azul: var(--dv-primary, #0000ff);
	--dvc-texto: var(--dv-ink, #6d6d6d);
	--dvc-borde: rgba(0, 0, 0, .18);
	--dvc-error: #d63638;

	max-width: 760px;
}

.dvc-precio {
	font-size: 1.15rem;
	margin-bottom: .25rem;
}

/* Lo que incluye la entrada: cuelga del precio, así que va pegado a él y algo
   más discreto. */
.dvc-incluye {
	font-size: .95rem;
	color: var(--dvc-texto);
	margin-bottom: 1.5rem;
}

.dvc-quedan {
	font-size: .95rem;
	color: var(--dvc-azul);
	font-weight: 600;
	margin-bottom: 1.5rem;
}

.dvc-nota {
	font-size: .9rem;
	color: var(--dvc-texto);
	margin: .4rem 0 0;
}

.dvc-aviso {
	font-size: 1.15rem;
	color: var(--dvc-azul);
}

.dvc-aviso-info {
	border-left: solid 3px var(--dvc-azul);
	padding: .75rem 1rem;
	margin-bottom: 1.5rem;
	background: rgba(0, 0, 0, .03);
	font-size: .95rem;
}

.dvc-aviso-admin {
	border: dashed 1px var(--dvc-error);
	padding: .75rem 1rem;
	margin-top: 1rem;
	font-size: .9rem;
	color: var(--dvc-error);
}

.dvc-error-general {
	border-left: solid 3px var(--dvc-error);
	background: rgba(214, 54, 56, .06);
	color: var(--dvc-error);
	padding: .75rem 1rem;
	margin-bottom: 1.5rem;
	font-size: .95rem;
}

/* Honeypot: fuera de la vista pero no con display:none, que algunos bots
   detectan. */
.dvc-oculto {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Cantidad --- */

.dvc-cantidad {
	margin: 2rem 0;
}

.dvc-cantidad label {
	display: block;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--dvc-texto);
	margin-bottom: .4rem;
}

.dvc-cantidad select {
	font: inherit;
	font-size: 1.1rem;
	padding: .5rem .75rem;
	border: solid 1px var(--dvc-borde);
	border-radius: .25rem;
	background: #fff;
	min-width: 6rem;
}

/* --- Bloques de asistente --- */

.dvc-asistente {
	border: solid 1px var(--dvc-borde);
	border-radius: .25rem;
	padding: 1.25rem 1.5rem 1.5rem;
	margin-bottom: 1.25rem;
	min-width: 0; /* Los fieldset no encogen sin esto. */
}

.dvc-asistente-titulo {
	float: none;
	width: auto;
	padding: 0 .5rem;
	margin: 0;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--dvc-azul);
	font-weight: 700;
}

.dvc-campos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: .5rem;
}

@media (min-width: 576px) {
	.dvc-campos { grid-template-columns: 1fr 1fr; }
	.dvc-campo-ancho { grid-column: 1 / -1; }
}

.dvc-campo {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.dvc-campo label {
	font-size: .85rem;
	color: var(--dvc-texto);
	margin-bottom: .25rem;
}

.dvc-campo input {
	font: inherit;
	font-size: 1rem;
	padding: .55rem .75rem;
	border: solid 1px var(--dvc-borde);
	border-radius: .25rem;
	background: #fff;
	width: 100%;
}

.dvc-campo input:focus-visible {
	outline: 3px solid var(--dvc-azul);
	outline-offset: 1px;
}

/* El estado de error no se marca solo con color: también con el grosor del
   borde, para que se distinga sin percibir el matiz (WCAG 1.4.1). */
.dvc-campo input[aria-invalid="true"] {
	border-color: var(--dvc-error);
	border-width: 2px;
}

.dvc-obligatorio { color: var(--dvc-error); }

.dvc-ayuda {
	font-size: .8rem;
	color: var(--dvc-texto);
	margin-top: .25rem;
}

.dvc-error {
	display: block;
	font-size: .85rem;
	color: var(--dvc-error);
	margin-top: .25rem;
}

/* --- Legal --- */

.dvc-legal {
	margin: 2rem 0;
}

.dvc-check {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	font-size: .95rem;
	line-height: 1.4;
}

.dvc-check input {
	margin-top: .25rem;
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
}

.dvc-check input[aria-invalid="true"] {
	outline: 2px solid var(--dvc-error);
	outline-offset: 2px;
}

/* --- Envío --- */

.dvc-enviar {
	margin-top: 2rem;
}

.dvc-enviar button {
	display: inline-flex;
	align-items: baseline;
	gap: .75rem;
}

.dvc-total {
	font-weight: 700;
}

.dvc-enviar button.dvc-cargando {
	opacity: .7;
	cursor: progress;
}

.dvc-nota-pago {
	margin-top: .75rem;
}

/* --- Compra completada --- */

.dvc-gracias {
	border-left: solid 3px var(--dv-primary, #0000ff);
	background: rgba(0, 0, 0, .03);
	padding: 1.5rem;
}

.dvc-gracias h3 {
	margin-top: 0;
	color: var(--dv-primary, #0000ff);
}

.dvc-gracias p:last-child { margin-bottom: 0; }