/*
 * Páginas legales del nuevo diseño (v2/partials/pagina_legal): condiciones,
 * aviso legal, privacidad, cookies y desistimiento. Pág. 20 del PDF.
 * Los apartados (<h2 class="jo-legal__apartado">) y el índice
 * (.jo-legal__indice) los genera App\Support\TextoLegal a partir del texto
 * compartido. Colores y fuentes: tokens.css. Mobile-first.
 */

.tema-v2 .jo-legal { padding-top: 32px; }

.tema-v2 .jo-legal__titulo {
	font-family: var(--jo-fuente-titulos);
	font-size: var(--jo-titulo-m);
	line-height: 1.15;
	margin: 0 0 32px;
	max-width: 900px;
}
.tema-v2 .jo-legal__titulo em { font-style: italic; font-weight: 400; }

/* Columna de lectura */
.tema-v2 .jo-legal__texto {
	max-width: 720px;
	margin: 0 auto;
	font-size: var(--jo-texto-m);
	line-height: 1.7;
}
.tema-v2 .jo-legal__texto p { margin: 0 0 1.1em; }
.tema-v2 .jo-legal__texto ul,
.tema-v2 .jo-legal__texto ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.tema-v2 .jo-legal__texto li { margin-bottom: .5em; }
/* La plantilla quita los marcadores de las listas: aquí se recuperan. */
.tema-v2 .jo-legal__texto ol { list-style: decimal; }
.tema-v2 .jo-legal__texto ul { list-style: disc; }
.tema-v2 .jo-legal__texto li { display: list-item; list-style: inherit; }
.tema-v2 .jo-legal__texto a { text-decoration: underline; text-underline-offset: 3px; }

.tema-v2 .jo-legal__apartado {
	font-family: var(--jo-fuente-titulos);
	font-size: var(--jo-titulo-s);
	line-height: 1.2;
	margin: 1.8em 0 .7em;
	scroll-margin-top: calc(var(--jo-alto-cabecera) + 16px);
}
.tema-v2 .jo-legal__texto > .jo-legal__apartado:first-child { margin-top: 0; }

/* Tablas (titular del servicio, tipos de cookies...) sobre panel topo */
.tema-v2 .jo-legal__texto .table-responsive {
	overflow-x: auto;
	background: var(--jo-panel);
	border-radius: var(--jo-radio);
	padding: 20px;
	margin: 0 0 1.6em;
}
.tema-v2 .jo-legal__texto table { width: 100%; border-collapse: collapse; font-size: var(--jo-texto-xs); line-height: 1.5; }
.tema-v2 .jo-legal__texto th,
.tema-v2 .jo-legal__texto td { border: 0; border-bottom: 1px solid var(--jo-linea); padding: 8px 10px; text-align: left; vertical-align: top; }
.tema-v2 .jo-legal__texto th { font-weight: 600; background: transparent; }
.tema-v2 .jo-legal__texto td:first-child { color: var(--jo-texto-suave); width: 38%; }

/* Índice: entre dos líneas, en columnas */
.tema-v2 .jo-legal__apartado--indice {
	border-top: 1px solid var(--jo-texto-tenue);
	padding-top: 28px;
	margin-top: 1.6em;
}
.tema-v2 .jo-legal__indice {
	padding-bottom: 28px !important;
	border-bottom: 1px solid var(--jo-texto-tenue);
	font-size: var(--jo-texto-s);
	line-height: 1.5;
}
.tema-v2 .jo-legal__indice a { text-decoration: none; display: inline; } /* inline-block en la plantilla: descolocaba el número */
.tema-v2 .jo-legal__indice a:hover { text-decoration: underline; }

@media (min-width: 768px) {
	.tema-v2 .jo-legal { padding-top: 56px; }
	.tema-v2 .jo-legal__titulo { font-size: var(--jo-titulo-l); margin-bottom: 48px; }
	.tema-v2 .jo-legal__apartado { font-size: 28px; }
	.tema-v2 .jo-legal__texto .table-responsive { padding: 32px 40px; }
	/* Rejilla que se llena por columnas; las filas por columna las calcula el
	   servidor (TextoLegal::filasIndice). No con «columns»: Safari reparte de
	   nuevo los apartados al pasar el ratón y el índice parpadea. */
	.tema-v2 .jo-legal__indice {
		display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
		grid-template-rows: repeat(var(--filas-2, 9), auto); column-gap: 40px;
	}
}

@media (min-width: 1200px) {
	.tema-v2 .jo-legal__texto { max-width: 760px; }
	.tema-v2 .jo-legal__indice { grid-template-rows: repeat(var(--filas-3, 6), auto); }
}