/**
 * Programa Feria Valencia — frontend.
 *
 * Todo va prefijado con .fp- y con valores explicitos: el bloque no hereda
 * tipografia ni colores de la plantilla, para que se vea igual en las cinco
 * webs sin una hoja de correcciones por tema.
 */

.fp-programa {
	--fp-txt: #1d1d1b;
	--fp-txt2: #5f5e5a;
	--fp-txt3: #8a8a86;
	--fp-linea: #e4e3e0;
	--fp-fondo: #fff;
	--fp-suave: #f6f5f3;
	--fp-color: #5f5e5a;
	--fp-acento: var(--fp-txt);
	--fp-hora-color: inherit;
	--fp-titulo-px: 17px;
	--fp-radio: 8px;
	--fp-sep-px: 16px;

	font-family: var(--fp-fuente, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	font-size: 16px;
	line-height: 1.5;
	color: var(--fp-txt);
	max-width: var(--fp-ancho, 900px);
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
}

.fp-programa *,
.fp-programa *::before,
.fp-programa *::after { box-sizing: border-box; }

/* La herencia de font-family pierde contra cualquier regla directa del tema:
   Elementor y la mayoría de plantillas declaran la tipografía en h1…h6, p y
   button, así que el bloque la heredaría solo donde el tema no llega. Se
   fuerza la herencia en los descendientes para que la tipografía elegida en
   Plantillas mande de verdad dentro del programa. */
.fp-programa h3,
.fp-programa h4,
.fp-programa p,
.fp-programa li,
.fp-programa a,
.fp-programa span,
.fp-programa time,
.fp-programa div,
.fp-programa button,
.fp-programa summary,
.fp-programa select,
.fp-programa option,
.fp-modal, .fp-modal h3, .fp-modal p, .fp-modal div, .fp-modal span, .fp-modal button {
	font-family: inherit;
}

.fp-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------- barra */

.fp-toolbar {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--fp-fondo);
	padding: 12px 0 10px;
	border-bottom: 1px solid var(--fp-linea);
	margin-bottom: 4px;
}

.fp-dias {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 2px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.fp-dias::-webkit-scrollbar { display: none; }

.fp-dia {
	flex: 0 0 auto;
	min-width: 68px;
	min-height: 48px;
	padding: 6px 12px;
	border: 1px solid var(--fp-linea);
	border-radius: var(--fp-radio);
	background: var(--fp-fondo);
	color: var(--fp-txt2);
	font: inherit;
	font-size: 13px;
	line-height: 1.25;
	cursor: pointer;
	text-align: center;
	transition: background .12s, border-color .12s;
}
.fp-dia:hover { background: var(--fp-suave); }
.fp-dia[aria-selected="true"] {
	background: var(--fp-acento);
	border-color: var(--fp-acento);
	color: #fff;
}
.fp-dia-sem { display: block; font-size: 11px; opacity: .75; text-transform: uppercase; letter-spacing: .03em; }
.fp-dia-num { display: block; font-weight: 600; }
.fp-dia-todos { display: flex; align-items: center; justify-content: center; font-weight: 600; }

/* Los días ocupan su propia fila en móvil y comparten línea con los
   botones a partir de 700px. */
.fp-barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.fp-barra .fp-dias { flex: 1 1 100%; min-width: 0; }
.fp-barra .fp-acciones { flex: 1 1 auto; margin-top: 0; align-items: center; }

/* Panel de filtros. details/summary nativos: funciona sin JavaScript.
   El cuerpo se despliega flotando bajo la barra, para que el botón pueda
   ir en línea con los días y el idioma. */
.fp-filtros { position: static; }
.fp-filtros-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--fp-linea);
	border-radius: var(--fp-radio);
	background: var(--fp-fondo);
	font-size: 14px;
	color: var(--fp-txt);
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.fp-filtros-btn::-webkit-details-marker { display: none; }
.fp-filtros-btn::marker { content: ''; }
.fp-filtros-btn:hover { background: var(--fp-suave); }
.fp-filtros[open] .fp-filtros-btn {
	background: var(--fp-suave);
	border-color: var(--fp-txt3);
}
.fp-icono-filtro { flex: 0 0 auto; color: var(--fp-txt2); }
.fp-filtros-n {
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 20px;
	background: var(--fp-txt);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 19px;
	text-align: center;
}
.fp-filtros-cuerpo {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	padding: 12px;
	background: var(--fp-fondo);
	border: 1px solid var(--fp-linea);
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .09);
}

.fp-selects {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fp-select {
	flex: 1 1 160px;
	min-height: 44px;
	padding: 8px 30px 8px 12px;
	border: 1px solid var(--fp-linea);
	border-radius: var(--fp-radio);
	background: var(--fp-fondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235f5e5a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 11px center;
	background-size: 11px;
	font: inherit;
	font-size: 14px;
	color: var(--fp-txt);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	max-width: 100%;
}

.fp-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.fp-btn {
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--fp-linea);
	border-radius: var(--fp-radio);
	background: var(--fp-fondo);
	font: inherit;
	font-size: 14px;
	color: var(--fp-txt);
	cursor: pointer;
}
.fp-btn:hover { background: var(--fp-suave); }
.fp-btn-idioma { min-width: 52px; font-weight: 600; margin-left: auto; }
.fp-btn-reset { margin-top: 8px; }

.fp-conteo {
	margin: 12px 0 6px;
	font-size: 13px;
	color: var(--fp-txt3);
}

/* ------------------------------------------------------------ listado */

.fp-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Pegajosa bajo la barra: en un listado largo, saber en qué día se está
   mirando sin tener que subir es justo lo que evita los despistes. */
.fp-sep {
	position: sticky;
	/* Debajo de la barra, cuya altura mide el JavaScript. */
	top: var(--fp-sticky-top, 0px);
	z-index: 5;
	margin: 26px 0 10px;
	padding: 6px 0;
	background: var(--fp-fondo);
	border-bottom: 1px solid var(--fp-linea);
}
.fp-sep:first-child { margin-top: 8px; }
.fp-sep h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--fp-txt2);
}

.fp-sesion {
	display: flex;
	gap: 14px;
	padding: var(--fp-sep-px) 0;
	border-bottom: 1px solid var(--fp-linea);
	scroll-margin-top: 130px;
}

.fp-hora {
	flex: 0 0 62px;
	font-variant-numeric: tabular-nums;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	padding-top: 1px;
	color: var(--fp-hora-color);
}
.fp-hora-fin {
	display: block;
	font-weight: 400;
	font-size: 13px;
	color: var(--fp-txt3);
}

.fp-cuerpo { flex: 1 1 auto; min-width: 0; }

.fp-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 6px;
}

.fp-badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 20px;
	font-size: 11px;
	line-height: 1.6;
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
}
.fp-badge-feria {
	color: #fff;
	background: var(--fp-color);
}
.fp-badge-categoria {
	background: var(--fp-suave);
	color: var(--fp-txt2);
	font-weight: 500;
}
.fp-badge-dest { background: #fdf0d5; color: #85500b; }
.fp-badge-canc { background: #fbe4e4; color: #a32d2d; }

/* El título y el texto adicional van en el mismo bloque: el título en
   negrita y el texto a continuación en peso normal, como una aclaración. */
.fp-titulo {
	margin: 0 0 5px;
	font-size: var(--fp-titulo-px);
	line-height: 1.35;
	font-weight: 400;
	color: var(--fp-txt);
}
.fp-t { font-weight: 600; }
.fp-adicional {
	font-weight: 400;
	color: var(--fp-txt2);
}

.fp-ponentes,
.fp-organiza {
	margin: 0 0 3px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fp-txt);
}
.fp-organiza { color: var(--fp-txt2); }

/* Las etiquetas "Por:" y "Organiza:" no compiten con el contenido. */
.fp-etq {
	color: var(--fp-txt3);
	font-weight: 600;
	margin-right: 2px;
}

.fp-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 9px;
	font-size: 13px;
	color: var(--fp-txt2);
}
.fp-lugar {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
}
/* Separación con márgenes y no con gap: algunos motores no aplican gap
   dentro de inline-flex y los textos quedarían pegados. */
.fp-icono {
	flex: 0 0 auto;
	color: var(--fp-color);
	margin-right: 5px;
	vertical-align: -2px;
}
.fp-ubi { color: var(--fp-txt2); }
.fp-sep-punto { color: var(--fp-txt3); margin: 0 5px; }
.fp-espacio { font-weight: 600; color: var(--fp-txt); }

.fp-acc {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.fp-ics,
.fp-inscripcion {
	display: inline-block;
	padding: 7px 13px;
	border: 1px solid var(--fp-linea);
	border-radius: 7px;
	background: var(--fp-fondo);
	font: inherit;
	font-size: 13px;
	color: var(--fp-txt2);
	text-decoration: none;
	cursor: pointer;
}
.fp-ics:hover,
.fp-inscripcion:hover { background: var(--fp-suave); color: var(--fp-txt); }
.fp-inscripcion {
	border-color: var(--fp-color);
	color: var(--fp-color);
	font-weight: 600;
}

/* ------------------------------------------------------------ estados */

.fp-cancelada { opacity: .6; }
.fp-cancelada .fp-titulo { text-decoration: line-through; }

.fp-resaltada {
	animation: fp-flash 2.6s ease-out;
}
@keyframes fp-flash {
	0%, 55% { background: #fdf6e3; }
	100% { background: transparent; }
}

.fp-sin-resultados,
.fp-p-vacio {
	margin: 32px 0;
	padding: 26px 16px;
	text-align: center;
	font-size: 15px;
	color: var(--fp-txt2);
	background: var(--fp-suave);
	border-radius: 10px;
}

.fp-pie {
	margin: 20px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--fp-linea);
	font-size: 12px;
	color: var(--fp-txt3);
}

.fp-programa [hidden] { display: none !important; }

/* ----------------------------------------------------------- escritorio */

@media (min-width: 700px) {
	.fp-toolbar { padding: 14px 0 12px; }
	.fp-barra .fp-dias { flex: 1 1 auto; }
	.fp-barra .fp-acciones { flex: 0 0 auto; }
	.fp-filtros-cuerpo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
	.fp-selects { flex: 1 1 auto; }
	.fp-btn-reset { margin-top: 0; }
	.fp-hora { flex-basis: 78px; font-size: 16px; }
	.fp-sesion { gap: 20px; }
	.fp-titulo { font-size: calc(var(--fp-titulo-px) + 1px); }
	.fp-desc { margin-left: 98px; }
}

@media print {
	.fp-toolbar, .fp-acc, .fp-conteo { display: none; }
	.fp-filtros { display: none; }
	.fp-sesion { break-inside: avoid; }
	.fp-programa { max-width: none; font-size: 11pt; }
}

@media (prefers-reduced-motion: reduce) {
	.fp-resaltada { animation: none; background: #fdf6e3; }
	.fp-dia { transition: none; }
}


/* --------------------------------------------------- descripción ampliada */

/* Sin JavaScript esto es un details corriente y el texto se despliega
   debajo. Con JavaScript (.fp-con-modal) el mismo botón abre la ventana. */
.fp-sesion { flex-wrap: wrap; }
/* Hermana de la hora y el cuerpo. En esta plantilla ocupa su propia línea,
   sangrada para alinearse con el texto; otra puede llevarla a la derecha. */
.fp-desc {
	flex: 1 1 100%;
	margin: 2px 0 0 76px;
}
.fp-desc-btn {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 7px 13px;
	border: 1px solid var(--fp-linea);
	border-radius: var(--fp-radio);
	background: var(--fp-fondo);
	font-size: 13px;
	color: var(--fp-txt2);
	cursor: pointer;
	list-style: none;
}
.fp-desc-btn::-webkit-details-marker { display: none; }
.fp-desc-btn::marker { content: ''; }
.fp-desc-btn:hover { background: var(--fp-suave); color: var(--fp-txt); }
.fp-icono-info { flex: 0 0 auto; color: var(--fp-color); margin-right: 6px; }

.fp-desc-texto {
	margin-top: 9px;
	padding: 12px 14px;
	background: var(--fp-suave);
	border-radius: 9px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--fp-txt2);
	white-space: pre-line;
}
/* Con la ventana activa el texto en línea no se muestra nunca: es solo el
   depósito del que bebe el modal. */
.fp-con-modal .fp-desc-texto { display: none; }

/* ------------------------------------------------------------- la ventana */

.fp-modal {
	width: 640px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 64px);
	padding: 0;
	border: none;
	border-radius: 16px;
	background: var(--fp-fondo);
	color: var(--fp-txt);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
	overflow: visible;
}
.fp-modal::backdrop {
	background: rgba(20, 20, 18, .45);
	animation: fp-fundido .18s ease-out;
}
.fp-modal[open] {
	/* La burbuja crece desde el punto donde está la sesión pulsada. */
	animation: fp-burbuja .26s cubic-bezier(.22, 1.2, .36, 1);
	transform-origin: var(--fp-origen-x, 50%) var(--fp-origen-y, 60%);
}
.fp-modal.fp-cerrando { animation: fp-burbuja-sale .18s ease-in forwards; }
.fp-modal.fp-cerrando::backdrop { animation: fp-fundido .18s ease-in reverse; }

@keyframes fp-burbuja {
	0%   { opacity: 0; transform: scale(.72) translateY(14px); }
	60%  { opacity: 1; transform: scale(1.015) translateY(0); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fp-burbuja-sale {
	from { opacity: 1; transform: scale(1); }
	to   { opacity: 0; transform: scale(.88) translateY(8px); }
}
@keyframes fp-fundido { from { opacity: 0; } to { opacity: 1; } }

.fp-modal-caja {
	position: relative;
	max-height: calc(100vh - 64px);
	overflow-y: auto;
	padding: 26px 28px 28px;
	border-radius: 16px;
	-webkit-overflow-scrolling: touch;
}
.fp-modal-cerrar {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--fp-linea);
	border-radius: 50%;
	background: var(--fp-fondo);
	color: var(--fp-txt2);
	cursor: pointer;
}
.fp-modal-cerrar:hover { background: var(--fp-suave); color: var(--fp-txt); }
.fp-modal-meta {
	margin: 0 44px 6px 0;
	font-size: 13px;
	color: var(--fp-txt3);
}
.fp-modal-tit {
	margin: 0 44px 14px 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--fp-txt);
}
.fp-modal-cuerpo p {
	margin: 0 0 11px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--fp-txt2);
}
.fp-modal-cuerpo p:last-child { margin-bottom: 0; }

body.fp-sin-scroll { overflow: hidden; }

@media (max-width: 600px) {
	.fp-modal { width: auto; max-width: calc(100vw - 20px); border-radius: 14px; }
	.fp-modal-caja { padding: 22px 18px 24px; }
	.fp-modal-tit { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
	.fp-modal[open],
	.fp-modal.fp-cerrando,
	.fp-modal::backdrop { animation: none; }
}

@media print {
	.fp-desc-btn, .fp-modal { display: none; }
	/* En papel la descripción sí se imprime, que es donde hace falta. */
	.fp-con-modal .fp-desc-texto { display: block; }
}


/* ---------------------------------- piezas que cada plantilla enciende o no */
.fp-programa.fp-sin-etiquetas .fp-etiquetas { display: none; }
.fp-programa.fp-sin-calendario .fp-acc { display: none; }
.fp-programa.fp-sin-ubicacion .fp-meta { display: none; }


/* --------------------------------------- barra fija cuando sticky no puede */

/* El JavaScript activa esto solo si detecta un ancestro con overflow que
   impide position:sticky, que es lo habitual en WordPress. La barra sale
   del flujo y un hueco del mismo alto evita el salto. */
.fp-barra-fija .fp-toolbar.fp-fija {
	position: fixed;
	top: 0;
	z-index: 30;
	background: var(--fp-fondo);
}

/* La sombra se dibuja con un degradado bajo la barra y no con box-shadow:
   el desenfoque de box-shadow se reparte en todas las direcciones y, como
   la barra solo mide lo que mide el contenedor, asomaba por los lados y
   parecía una tarjeta flotando. */
.fp-toolbar::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 10px;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient( to bottom, rgba(0, 0, 0, .09), rgba(0, 0, 0, 0) );
	transition: opacity .15s ease-out;
}
.fp-toolbar.fp-fija::after,
.fp-toolbar.fp-pegada::after { opacity: 1; }
.fp-barra-hueco { height: 0; }

/* El día se lee en la barra, así que las cabeceras del listado dejan de
   pegarse: dos elementos disputándose el borde superior solo se estorban. */
.fp-dia-en-barra .fp-sep { position: static; }

/* Modo «sin barra fija»: todo se queda en su sitio. */
.fp-barra-suelta .fp-toolbar,
.fp-barra-suelta .fp-sep { position: static; }

/* ---------------------------------------- el texto bajo el título */

.fp-ponentes,
.fp-organiza { font-size: var(--fp-meta-px, 14px); }

/* La empresa se distingue del ponente: es el dato que más se busca al
   recorrer un programa de expositores. */
.fp-empresa {
	color: var(--fp-empresa-color, inherit);
	font-weight: var(--fp-empresa-peso, 400);
}


/* ------------------------------------------------- la jornada, en la barra */

.fp-dia-actual {
	margin: 8px 0 0;
	padding-top: 8px;
	border-top: 1px solid var(--fp-linea);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--fp-txt2);
}
.fp-tpl-compacta .fp-dia-actual {
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--fp-txt3);
}
/* Centinela del modo pegajoso: alto cero, solo sirve para saber cuándo la
   barra ha tocado el borde superior. */
.fp-centinela { height: 1px; margin-bottom: -1px; }
.fp-programa.fp-sin-rotulos .fp-etq { display: none; }