/* ==========================================================================
   publico-responsive.css
   Adaptación de la web pública a tablet y móvil.
   Solo se carga con el interruptor Responsive=1 en web.config (ver clResponsive).
   Se carga DESPUÉS de publico.css y publico-custom.css: por encima de 1024px
   no cambia nada (el escritorio sigue siendo el de siempre).
   Puntos de corte: tablet <= 1023px, móvil <= 767px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   DEFENSIVO: contenido de BD (TinyMCE) con anchos fijos. Aplica a todos los
   tamaños porque en escritorio tampoco debe salirse de su columna.
   -------------------------------------------------------------------------- */
/* :where() deja la especificidad a 0: solo actúa sobre imágenes a las que ningún otro CSS
   les da tamaño (miniaturas de galerías, logos... conservan el suyo). Los atributos
   width/height del HTML de TinyMCE no son CSS, así que sí quedan limitados. */
:where(section.page, section.subPage, section.sessionDetails, .noticia-detalle, #interior, body.ventana) img {
	max-width: 100%;
}
/* Popups (body.ventana, p. ej. sponsorship-type-details): tablas de TinyMCE con width fijo */
body.ventana table table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}
:where(section.page, section.subPage) :where(iframe, video, embed) {
	max-width: 100%;
}

/* Botón del menú móvil (lo inserta menu-responsive.js): oculto en escritorio */
#btnMenuMovil,
.menu .btnSubmenu {
	display: none;
}

/* Buscador del programa: width 100% + padding lo sacaba 8px de su columna (también en escritorio) */
.program-search {
	box-sizing: border-box;
}

/* Programa: la vista en lista (clProgram.ProgramaListaDia) solo se usa en móvil */
.programaLista {
	display: none;
}


/* ==========================================================================
   TABLET Y MÓVIL (<= 1023px)
   ========================================================================== */
@media (max-width: 1023px) {

	/* #main, .row, #header y #footer usan display:table/table-row/table-cell en escritorio,
	   y una "tabla" crece hasta el ancho de su contenido más ancho (menú, imágenes con width=).
	   En pantallas estrechas se pasan a bloque para que el ancho mande el viewport. */
	#main, .row, #header, #footer {
		display: block;
		width: auto;
	}

	/* Contenedores fluidos */
	.content, .contenido {
		max-width: none;
		box-sizing: border-box;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* En pantallas estrechas las imágenes del contenido mantienen su proporción al encogerse
	   (en escritorio se respeta el alto que puso el editor para no cambiar el aspecto actual) */
	:where(section.page, section.subPage, section.sessionDetails, .noticia-detalle, #interior, body.ventana) img {
		height: auto;
	}

	/* Tablas del contenido de BD: se desplazan en horizontal en lugar de romper la página */
	section.page table, section.subPage table, section.sessionDetails table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* ---------- Cabecera ---------- */
	#header {
		height: auto;
		min-height: 0;
		background-size: cover;
	}
	#header .content {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding-top: 12px;
		padding-bottom: 0;
	}
	#header .logo {
		position: static;
		flex: 0 0 auto;
		margin: 0 16px 8px 0;
	}
	#header .logo img {
		max-width: 260px;
		width: 100%;
		height: auto;
	}
	#header .header-titles {
		float: none;
		flex: 1 1 300px;
		margin: 0 0 8px 0;
	}
	#header .header-titles h2, #header .header-titles h3 {
		font-size: 20px;
		line-height: 1.25em;
	}
	#header .header-text {
		position: static;
		flex: 1 1 100%;
		max-width: 100%;
	}
	#header .botones {
		position: static;
		flex: 1 0 100%;
		height: auto;
		text-align: right;
	}
	#header .botones button {
		margin-left: 0;
	}

	/* ---------- MENÚ MÓVIL (botones insertados por jquery.global/menu-responsive.js) ---------- */
	/* La barra (#navbarfixed) sigue fija arriba: deja hueco para que no tape la cabecera */
	#header .content {
		padding-top: 56px;
	}
	#navbarfixed .content, #navbar .content {
		padding-left: 0;
		padding-right: 0;
	}
	#btnMenuMovil {
		display: flex;
		align-items: center;
		gap: 10px;
		height: 44px;
		padding: 0 16px;
		border: 0;
		background: transparent;
		color: #fff;
		font-family: 'Titillium Web', sans-serif;
		font-size: 18px;
		cursor: pointer;
	}
	#btnMenuMovil i {
		font-size: 22px;
		width: 22px;
	}
	.menu {
		display: none;
		width: auto;
		height: auto;
		max-height: calc(100vh - 44px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.menu-abierto .menu {
		display: block;
	}
	.menu ul, .menu li, .menu li li {
		display: block;
		height: auto;
		min-width: 0;
		width: auto;
	}
	.menu li {
		position: relative;
		border-top: 1px solid rgba(255, 255, 255, 0.25);
	}
	.menu li a {
		height: auto;
		padding: 12px 56px 12px 16px;
		line-height: 22px;
	}
	/* En pantalla táctil el hover no abre submenús: solo el botón de despliegue */
	.menu li:hover ul,
	.menu li:hover ul li:hover ul,
	.menu li ul {
		display: none;
		position: static;
		box-shadow: none;
	}
	.menu li.submenu-abierto > ul {
		display: block;
	}
	.menu li ul a {
		height: auto;
		line-height: 22px;
		padding: 10px 56px 10px 32px;
		color: #fff;
	}
	.menu li ul ul a {
		padding-left: 48px;
	}
	.menu .btnSubmenu {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 48px;
		height: 46px;
		border: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.25);
		background: transparent;
		color: inherit;
		cursor: pointer;
	}
	.menu li.submenu-abierto > .btnSubmenu i {
		transform: rotate(180deg);
	}

	/* ---------- Imagen de cabecera del cliente (bg-header.png, publico-custom.css) ----------
	   La imagen (1920x350) lleva texto y logos dibujados en el centro; en pantallas estrechas
	   se escala para que ese motivo quede entero abajo y el resto se rellena con su azul de fondo. */
	#header {
		background-color: #73a4ce;
		background-size: 1100px auto;
		background-position: 62% bottom;
		padding-bottom: 110px;
	}

	/* ---------- Slider de portada (royalSlider) ---------- */
	.royalSlider, .royalSlider .contenido {
		height: 300px;
	}
	.royalSlider .rsABlock {
		left: 16px !important;
		right: 16px !important;
		width: auto !important;
	}
	.banner_text1 p {
		font-size: 2.2em !important;
		line-height: 1.1em;
	}
	.banner_text2 p {
		font-size: 1.3em !important;
		white-space: normal;
	}

	/* ---------- Cuerpo: página + columna ---------- */
	section.page {
		width: auto;
		float: none;
		box-sizing: border-box;
		overflow: hidden;
	}
	section.columnRight {
		float: none;
		width: auto;
	}
	section.subPage {
		float: none;
		width: auto;
	}
	section.columnProgram {
		float: none;
		width: auto;
	}

	/* ---------- Sponsors ---------- */
	#sponsors article {
		width: 29%;
		margin: 0 1% 16px;
	}
	#sponsors article img {
		max-width: 100%;
		height: auto;
	}
	#sponsors article span {
		width: auto;
		display: block;
	}

	/* ---------- Pie ---------- */
	#footer {
		background-size: 0 0;
		height: auto;
	}
	#footer .footer-info {
		float: none;
		width: auto;
		overflow: hidden;
	}
	#footer .logo {
		float: none;
		width: auto;
		margin: 16px 0 16px;
		text-align: left;
	}
	#footer ul {
		float: none;
		width: auto;
	}
	#footer .final .legal,
	#footer .final .copyright {
		float: none;
		padding-left: 0;
	}
	#footer .footer-buttons {
		position: static;
		display: flex;
		justify-content: flex-end;
		padding: 0 16px;
	}
	#footer .footer-buttons a {
		height: auto;
		padding-bottom: 8px;
	}

	/* ---------- Pie: altos fijos (138px del bloque, 44px de la franja) que cortaban el texto ---------- */
	#footer .content {
		height: auto;
	}
	#footer .final .copyright {
		line-height: 1.5em;
		padding-right: 0;
	}
	#footer .final {
		height: auto;
		line-height: 1.5em;
		padding: 8px 0;
	}
	#footer .final .legal {
		float: none;
		text-align: left;
		height: auto;
		padding-right: 0;
	}
	#footer .social {
		position: static;
		width: auto;
		height: auto;
		margin: 8px 0 0;
	}
}


/* ==========================================================================
   TABLET (768px - 1023px): página y columna lado a lado
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
	section.page {
		float: left;
		width: calc(100% - 290px);
	}
	section.columnRight {
		float: right;
		width: 270px;
	}
	/* Programa: la parrilla (60px de horas + 660px de salas) cabe a todo el ancho;
	   los filtros (columnProgram) pasan encima en lugar de a la derecha */
	#homeBody .content {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}
	#homeBody .content > section.page {
		flex: 1 1 0;
		float: none;
		width: auto;
		margin-right: 20px;
	}
	#homeBody .content > section.columnRight {
		flex: 0 0 270px;
		float: none;
	}
	#homeBody .content > section.subPage {
		flex: 1 1 100%;
	}
	#homeBody .content > section.columnProgram {
		flex: 1 1 100%;
		order: -1;
	}
}


/* ==========================================================================
   MÓVIL (<= 767px): todo en una columna
   ========================================================================== */
@media (max-width: 767px) {

	.content, .contenido {
		padding-left: 12px;
		padding-right: 12px;
	}
	.content p {
		text-align: left;
	}

	#header .logo {
		margin-right: 0;
	}
	#header .logo img {
		max-width: 200px;
	}
	#header .header-titles {
		flex-basis: 100%;
		text-align: left;
	}
	#header .header-titles h2, #header .header-titles h3 {
		font-size: 17px;
	}
	#header {
		background-size: 720px auto;
		padding-bottom: 72px;
	}

	.royalSlider, .royalSlider .contenido {
		height: 220px;
	}
	.banner_text1 p {
		font-size: 1.5em !important;
	}
	.banner_text2 p {
		font-size: 1em !important;
	}

	section.page {
		padding-left: 12px;
		padding-right: 12px;
	}
	section.page h1 {
		font-size: 1.6em;
		line-height: 1.2em;
	}

	#sponsors {
		padding: 12px 0;
	}
	#sponsors article {
		width: 44%;
	}

	#footer .footer-info img {
		max-width: 90px;
	}

	/* ---------- Programa (clProgram.Programs) ----------
	   La parrilla por salas se sustituye por la lista del día ordenada por hora. */
	#homeBody .content {
		display: flex;
		flex-direction: column;
	}
	#homeBody .content > section.columnProgram {
		order: -1;
	}
	section.day .roomsRow,
	section.day article.timeColumn,
	section.day article.sessionColumn {
		display: none;
	}
	section.day header {
		overflow: hidden;
	}
	.programaLista {
		display: block;
		clear: both;
		padding: 8px 0 16px;
	}
	.programaListaSesion {
		border-left: 6px solid #ccc;
		background-color: #fff;
		margin-bottom: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	}
	.programaListaSesion a {
		display: block;
		padding: 8px 12px;
		color: #333;
		text-decoration: none;
	}
	.programaListaSesion .hora {
		font-weight: 700;
		margin-right: 12px;
	}
	.programaListaSesion .sala {
		color: #666;
		font-size: 0.9em;
	}
	.programaListaSesion .titulo {
		display: block;
		margin-top: 4px;
		line-height: 1.3em;
	}
	/* Copias fijas que crea el JS del esqueleto (textoIntro, filtros y cabeceras de día):
	   en móvil taparían media pantalla */
	[class*="_cloned"] {
		display: none !important;
	}
	.textoIntro a.weekDay {
		width: auto;
	}
	.program-search, .program-search input {
		box-sizing: border-box;
		max-width: 100%;
	}

	/* ---------- Patrocinio: resumen del pedido ---------- */
	.infoSponsor.inicial.resumen {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.infoSponsor.resumen .generalInfo,
	.infoSponsor.resumen .invoiceInfo {
		grid-template-columns: 1fr;
	}

	/* ---------- Listas de opciones en tabla (table.datos: tipos de patrocinio, métodos de pago,
	   buscador de abstracts, formularios): cada fila pasa a ser una tarjeta ---------- */
	section.page table.datos {
		overflow-x: visible;
	}
	table.datos, table.datos > tbody, table.datos > tbody > tr,
	table.datos > tbody > tr > td, table.datos > tr, table.datos > tr > td,
	table.datos > caption {
		display: block;
		width: auto !important;
		box-sizing: border-box;
	}
	/* Filas de cabecera de columnas (dos o más th): en tarjetas no aportan.
	   Una fila con un único th es un título (p. ej. sponsorship-type-details) y se mantiene. */
	table.datos tr:has(> th + th) {
		display: none;
	}
	table.datos > tbody > tr, table.datos > tr {
		border-bottom: 1px solid #ccc;
	}
	/* Fila seleccionable (radio o marca de ya elegido): selector a la izquierda, resto a la derecha */
	table.datos tr:has(> td.seleccion), table.datos tr:has(> td > input[type="radio"]) {
		display: grid;
		grid-template-columns: 44px 1fr;
	}
	table.datos tr:has(> td.seleccion) > td,
	table.datos tr:has(> td > input[type="radio"]) > td {
		grid-column: 2;
	}
	table.datos tr > td.seleccion,
	table.datos tr > td:first-child:has(> input[type="radio"]) {
		grid-column: 1;
		grid-row: 1 / span 4;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	table.datos td.precio {
		text-align: left;
		width: auto;
		padding-top: 0;
		font-weight: bold;
	}
	table.datos td.masInfo {
		text-align: left;
		font-size: 1.5em;
		background-color: transparent;
	}

	/* Campos de formulario con ancho fijo (style="width: 300px" desde los metadatos de BD) */
	#homeBody input[type="text"], #homeBody input[type="email"], #homeBody input[type="password"],
	#homeBody select, #homeBody textarea {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* ---------- Barra de progreso (#progreso: patrocinio y carrito) ---------- */
	#progreso ul.literales li {
		font-size: 10px;
		line-height: 1.2em;
		text-transform: none;
		letter-spacing: 0;
		padding: 0 2px;
		width: auto !important;
	}

	/* ---------- Fichas de abstracts (publico.css fija 550px con !important) ---------- */
	.abstracts .infoAbstract {
		width: auto !important;
		float: none;
	}

	/* ---------- Contacto: datos y formulario apilados ---------- */
	section.contact, section.contact article {
		display: block;
		width: auto;
	}
	section.contact article.contactForm {
		width: auto;
	}

	/* ---------- Noticias (clNoticias.NoticiaListadoFicha) ----------
	   La fecha y "Read more" van en posición absoluta a la derecha del texto; en móvil
	   pasan al flujo normal: fecha arriba, imagen a todo el ancho y el enlace debajo. */
	.noticia .cuerpo, .noticias.portada .noticia .cuerpo {
		min-height: 0;
		margin-top: 0;
		padding-right: 0;
	}
	.noticia .cuerpo p {
		margin-right: 0;
		padding-right: 0;
		width: auto;
	}
	.noticia .fecha, .noticias.portada .noticia .fecha {
		position: static;
		display: inline-flex;
		gap: 6px;
		width: auto;
		height: auto;
		margin: 0 0 8px;
		padding: 4px 10px;
		line-height: 20px;
	}
	.noticia .fecha div {
		display: inline;
		float: none;
		height: auto;
	}
	.noticia img {
		float: none;
		display: block;
		max-width: 100%;
		max-height: none;
		margin: 0 0 8px;
	}
	.noticia .mas {
		position: static;
		display: inline-block;
		width: auto;
		height: auto;
		margin: 4px 0 0;
		padding: 6px 14px;
	}

}