/**
 * Páginas del pilar legal (/legal/*).
 *
 * Estas páginas no se construyen con Bricks: el tema imprime su `content` tal cual
 * dentro de <article id="brx-content">, sin ninguna clase de maquetación. O sea que
 * aquí hay que dar el ancho, el ritmo vertical y el estilo de las tablas, que en el
 * resto del sitio pone el constructor.
 *
 * Casi todo cuelga de `.gdm-legal`, así que nada de esto se escapa a la portada ni a
 * las reseñas. La excepción es el <h1>, que el tema imprime como hermano del bloque y
 * no dentro de él: para ese se usa `#brx-content > h1`, y no hay riesgo de alcance
 * porque el PHP sólo encola esta hoja cuando el contenido lleva la clase `gdm-legal`.
 *
 * Los colores van en rgba sobre `currentColor` siempre que se puede, porque el sitio
 * tiene conmutador de modo oscuro por plugin: un color fijo se ve bien en un modo y
 * desaparece en el otro.
 *
 * UN SOLO ANCHO, Y POR QUÉ
 * Antes el texto se leía a una medida corta (64ch) y las tablas se salían de ella 90 px
 * por lado. Sobre el papel es buena tipografía; en pantalla se veía una columna estrecha
 * de texto al lado de unas tablas mucho más anchas, y el ojo lo lee como dos bloques que
 * no van juntos. Ahora todo comparte contenedor: las tablas lo ocupan entero y el texto
 * el 94 %, lo justo para que se note que es prosa y no una discrepancia.
 *
 * Una línea larga se pierde al volver al renglón siguiente, así que lo que se recorta en
 * ancho se compensa en cuerpo y en interlineado: 18 px y 1.75 en vez de 17 y 1.68.
 */

#brx-content {
	--gdm-ancho: 940px;
	--gdm-texto: 94%;
	--gdm-lado: 18px;
}

/* ---------- Título de la página ----------
 *
 * El <h1> lo pinta el tema fuera de `.gdm-legal`, así que no heredaba ni el ancho ni
 * los márgenes del cuerpo: arrancaba pegado a la cabecera y más a la izquierda que el
 * texto que va debajo. Se le dan aquí la misma caja y un respiro arriba. */

#brx-content > h1 {
	box-sizing: border-box;
	max-width: var(--gdm-ancho);
	margin: 0 auto .55em;
	padding: 44px var(--gdm-lado) 0;
	/* Bricks deja el h1 sin clase en 30px, un punto por encima de los h2 de esta
	   página: leído de corrido, el título no se distinguía de una sección más. */
	font-size: clamp(28px, 4vw, 34px);
	line-height: 1.18;
	/* Reparte las líneas del título en vez de dejar una palabra suelta abajo. */
	text-wrap: balance;
}

.gdm-legal {
	box-sizing: border-box;
	max-width: var(--gdm-ancho);
	margin: 0 auto;
	padding: 0 var(--gdm-lado) 48px;
	font-size: 18px;
	line-height: 1.75;
}

/* El texto corrido, a un pelo del ancho del contenedor. Las tablas no llevan tope: lo
   ocupan entero, y ésa es la única diferencia de ancho que hay en la página. */
.gdm-legal > p,
.gdm-legal > ul,
.gdm-legal > ol,
.gdm-legal > details,
.gdm-legal > .gdm-legal__resumen,
.gdm-legal > .gdm-legal__indice {
	max-width: var(--gdm-texto);
}

.gdm-legal h2 {
	margin: 2.4em 0 .7em;
	font-size: 28px;
	line-height: 1.25;
	text-wrap: balance;
	/* La cabecera es fija: sin esto, saltar desde el índice deja el título debajo. */
	scroll-margin-top: 90px;
}

.gdm-legal h2:first-of-type {
	margin-top: 1.6em;
}

.gdm-legal p {
	margin: 0 0 1.1em;
	/* Evita el renglón final de una sola palabra. Donde no está soportado, no hace nada. */
	text-wrap: pretty;
}

.gdm-legal ul,
.gdm-legal ol {
	margin: 0 0 1.3em;
	padding-left: 1.35em;
}

.gdm-legal li {
	margin-bottom: .55em;
}

/* Los dominios son largos y no tienen espacios. `anywhere` los parte sólo cuando no
   caben; `break-all` los partía siempre, incluso con sitio de sobra. */
.gdm-legal code {
	font-size: .93em;
	padding: 1px 5px;
	border-radius: 4px;
	background: rgba(128, 128, 128, .16);
	overflow-wrap: anywhere;
}

/* ---------- Caja de resumen ----------
 *
 * Va antes del primer h2 y responde en cuatro líneas a lo que trae al lector: cuántos
 * sitios, quién está detrás, cuántos ya se movieron y qué NO cambia. Quien llega desde
 * el buscador se lleva la respuesta sin bajar. */

.gdm-legal__resumen {
	margin: 0 0 1.8em;
	padding: 20px 22px 16px;
	border-radius: 12px;
	border: 1px solid rgba(49, 143, 87, .3);
	background: rgba(49, 143, 87, .07);
}

.gdm-legal__resumen ul {
	margin: 0;
	padding-left: 1.15em;
}

.gdm-legal__resumen li:last-child {
	margin-bottom: 0;
}

.gdm-legal__actualizado {
	margin: 0 0 .9em;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .01em;
	opacity: .8;
	text-transform: uppercase;
}

/* ---------- Índice ----------
 *
 * Diez secciones y dos tablas largas: sin índice, quien viene con una pregunta concreta
 * —«¿está mi casa en la lista?»— tiene que recorrer la página entera.
 *
 * OJO CON EL CSS GLOBAL DEL SITIO: hay una regla `ol li:before` que le pone a TODA lista
 * numerada un círculo verde de 24 px en absoluto, más `padding-left: 35px` y `left: -16px`
 * en el <li>. Pensada para los pasos de una guía, aquí convertía el índice en diez
 * renglones altos con media página en blanco al lado. Se neutraliza (`content: none` y
 * los paddings a cero) y se usa un contador propio, mucho más discreto.
 *
 * En pantalla ancha va a dos columnas: diez entradas en vertical empujaban el primer h2
 * fuera de la pantalla, y el índice existe justamente para que no haya que bajar. */

.gdm-legal__indice {
	margin: 0 0 2.6em;
	padding: 16px 18px 18px;
	border: 1px solid rgba(128, 128, 128, .22);
	border-radius: 12px;
	background: rgba(128, 128, 128, .05);
}

/* La raya sale del propio título y llega hasta el borde: separa sin meter otra línea. */
.gdm-legal__indice-titulo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	opacity: .7;
}

/* El título hereda `opacity: .7`, así que la raya necesita algo más de cuerpo que los
   demás filetes de la página para verse igual de firme.
 *
 * `display: block` NO sobra: el CSS global del sitio trae una regla
 * `.lwptoc_toggle::before, ::after { display: none }` —falta el prefijo en el segundo
 * selector— que apaga TODOS los ::after del sitio. Nuestra regla gana en especificidad,
 * pero sólo en las propiedades que declara; sin `display` la raya se quedaba oculta. */
.gdm-legal__indice-titulo::after {
	content: "";
	display: block;
	flex: 1;
	height: 1px;
	background: rgba(128, 128, 128, .4);
}

.gdm-legal__indice ol {
	counter-reset: gdm-indice;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15.5px;
	line-height: 1.45;
	columns: 2;
	column-gap: 26px;
}

.gdm-legal__indice li {
	margin: 0;
	/* Anula el hueco del círculo global y el `left` negativo que lo acompaña. */
	padding: 0;
	left: auto;
	break-inside: avoid;
}

.gdm-legal__indice li::before {
	content: none;
}

/* El enlace ocupa toda la fila: en móvil el destino táctil es la línea entera, no las
   dos palabras del título. */
.gdm-legal__indice a {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 7px 10px;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	border-bottom: 0;
	transition: background-color .15s ease, color .15s ease;
}

/* Número propio: `decimal-leading-zero` para que el 1 y el 10 ocupen lo mismo y los
   títulos arranquen todos de la misma vertical. */
.gdm-legal__indice a::before {
	counter-increment: gdm-indice;
	content: counter(gdm-indice, decimal-leading-zero);
	flex: none;
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #2f8d56;
}

.gdm-legal__indice a:hover,
.gdm-legal__indice a:focus-visible {
	background: rgba(49, 143, 87, .1);
	color: #2f8d56;
}

.gdm-legal__indice a:focus-visible {
	outline: 2px solid #318f57;
	outline-offset: 1px;
}

/* ---------- Avisos ---------- */

.gdm-legal__aviso {
	padding: 13px 16px;
	border-left: 3px solid rgba(190, 90, 40, .55);
	border-radius: 0 8px 8px 0;
	background: rgba(190, 90, 40, .08);
	font-size: 15.5px;
	line-height: 1.6;
}

/* ---------- Tablas ----------
 *
 * `overflow-x` en un envoltorio propio y no en la tabla: la tabla tiene que seguir
 * siendo una tabla para los lectores de pantalla. En móvil, dejar que se desplace de
 * lado es preferible a exprimir tres columnas de dominios en 360 px. */

.gdm-legal__scroll {
	margin: 0 0 1.6em;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.gdm-legal__tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 15.5px;
	line-height: 1.5;
}

.gdm-legal__tabla caption {
	caption-side: top;
	text-align: left;
	padding: 0 0 12px;
	font-size: 14px;
	line-height: 1.55;
	max-width: var(--gdm-texto);
	opacity: .75;
}

.gdm-legal__tabla th,
.gdm-legal__tabla td {
	padding: 11px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid rgba(128, 128, 128, .22);
}

.gdm-legal__tabla thead th {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	border-bottom-width: 2px;
	white-space: nowrap;
}

.gdm-legal__tabla tbody th {
	font-weight: 700;
	min-width: 130px;
}

/* Reparto de las tres columnas. Sin esto, el navegador las mide por el contenido más
   ancho —una nota al pie de fila— y deja un palmo de blanco entre el nombre de la casa
   y su dominio, que son justo los dos datos que se leen juntos. */
.gdm-legal__tabla tbody th {
	width: 26%;
}

.gdm-legal__tabla td:nth-child(2) {
	width: 36%;
}

/* Franjas alternas: son 34 filas de tres columnas, y sin ellas el ojo salta de fila al
   volver del final de una línea. El valor es muy bajo a propósito, para que funcione
   igual en modo claro y en oscuro. */
.gdm-legal__tabla tbody tr:nth-child(even) {
	background: rgba(128, 128, 128, .06);
}

.gdm-legal__tabla tbody tr:hover {
	background: rgba(49, 143, 87, .09);
}

.gdm-legal__dominios {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gdm-legal__dominios li {
	margin: 0 0 4px;
}

.gdm-legal__dominios li:last-child {
	margin-bottom: 0;
}

/* La nota de la fila explica por qué un dominio del SII y uno bloqueado no coinciden,
   o qué no pudimos establecer. Es la letra pequeña que evita afirmar de más. */
.gdm-legal__nota {
	margin: 6px 0 0;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.5;
	opacity: .72;
	max-width: 30ch;
}

.gdm-legal__razon {
	display: block;
	margin-top: 5px;
	font-size: 12.5px;
	opacity: .7;
}

/* ---------- Distintivos del SII ----------
 *
 * Mismos tres estados y misma paleta que la tabla de la portada, a propósito: quien
 * llega aquí desde el ranking reconoce el código de colores sin tener que releerlo. */

.gdm-legal__sii {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.3;
	padding: 4px 9px;
	border-radius: 999px;
	white-space: nowrap;
}

.gdm-legal__sii.sii-si {
	background: rgba(49, 143, 87, .16);
	color: #2f8d56;
	border: 1px solid rgba(49, 143, 87, .38);
}

.gdm-legal__sii.sii-ret {
	background: rgba(190, 90, 40, .14);
	color: #b4632c;
	border: 1px solid rgba(190, 90, 40, .34);
}

.gdm-legal__sii.sii-no {
	background: rgba(120, 120, 120, .14);
	color: #6d6d6d;
	border: 1px solid rgba(120, 120, 120, .32);
}

/* ---------- Cronología ---------- */

.gdm-legal__cronologia {
	list-style: none;
	margin: 0 0 1.6em;
	max-width: var(--gdm-texto);
	padding: 0 0 0 22px;
	border-left: 2px solid rgba(128, 128, 128, .28);
}

.gdm-legal__cronologia li {
	position: relative;
	margin-bottom: 1.35em;
}

.gdm-legal__cronologia li::before {
	content: "";
	position: absolute;
	left: -28px;
	top: .55em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #318f57;
}

.gdm-legal__fecha {
	display: block;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .01em;
	margin-bottom: 3px;
}

.gdm-legal__hecho {
	display: block;
}

/* ---------- Preguntas frecuentes ----------
 *
 * <details> nativo en vez de acordeón con JS: funciona sin scripts, es accesible por
 * teclado de serie, y Google lee el contenido igual porque está en el DOM. */

.gdm-legal__faq {
	border-bottom: 1px solid rgba(128, 128, 128, .22);
	padding: 4px 0;
}

.gdm-legal__faq:first-of-type {
	border-top: 1px solid rgba(128, 128, 128, .22);
}

.gdm-legal__faq summary {
	cursor: pointer;
	padding: 13px 34px 13px 0;
	position: relative;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.45;
	list-style: none;
}

.gdm-legal__faq summary::-webkit-details-marker {
	display: none;
}

/* `display: block` por lo mismo que en la raya del índice: el `::after` suelto del CSS
   global deja el signo sin pintar. */
.gdm-legal__faq summary::after {
	content: "+";
	display: block;
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	opacity: .6;
}

.gdm-legal__faq[open] summary::after {
	content: "−";
}

.gdm-legal__faq summary:hover {
	opacity: .82;
}

.gdm-legal__faq summary:focus-visible {
	outline: 2px solid #318f57;
	outline-offset: 3px;
}

.gdm-legal__faq p {
	margin: 0 0 14px;
	padding-right: 34px;
	font-size: 16px;
}

/* ---------- Fuentes ---------- */

.gdm-legal__fuentes {
	font-size: 15px;
	line-height: 1.6;
}

.gdm-legal__fuentes li {
	margin-bottom: .7em;
}

.gdm-legal__primaria {
	display: inline-block;
	margin-left: 4px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(49, 143, 87, .16);
	color: #2f8d56;
}

/* ---------- Móvil ----------
 *
 * Ojo: el resto del sitio arrastra contenedores con `width: 400px` fijo por debajo de
 * 767 px, que es lo que sacaba el pie fuera de la pantalla. Aquí se fija `max-width`
 * explícito para que esta página no herede ese problema. */

@media (max-width: 767px) {
	#brx-content > h1,
	.gdm-legal {
		max-width: 100%;
		width: auto;
	}

	#brx-content > h1 {
		padding: 28px 14px 0;
	}

	.gdm-legal {
		padding: 0 14px 36px;
		font-size: 17px;
		line-height: 1.7;
	}

	/* En una pantalla estrecha el ancho ya lo impone la pantalla: dejar el 94 % aquí
	   metería un margen derecho que no hace falta y volvería a separar el texto de las
	   tablas, que es justo lo que se quería quitar. */
	#brx-content {
		--gdm-texto: 100%;
	}

	.gdm-legal h2 {
		font-size: 23px;
	}

	/* Dos columnas en 360 px partirían los títulos en tres renglones. Una sola, con una
	   línea de separación entre entradas: se lee como una lista de navegación y cada
	   fila queda con altura de dedo. */
	.gdm-legal__indice {
		padding: 14px 14px 8px;
	}

	.gdm-legal__indice ol {
		columns: 1;
		font-size: 16px;
	}

	.gdm-legal__indice li + li {
		border-top: 1px solid rgba(128, 128, 128, .16);
	}

	.gdm-legal__indice a {
		padding: 11px 8px;
		border-radius: 6px;
	}

	.gdm-legal__tabla {
		font-size: 14.5px;
	}

	.gdm-legal__tabla th,
	.gdm-legal__tabla td {
		padding: 9px 10px;
	}

	.gdm-legal__nota {
		max-width: none;
	}
}