/*
Theme Name: AGI - Censo VTLP
Theme URI: https://agitalo.es
Author: Agítalo 3.0
Author URI: https://agitalo.es
Description: Tema mínimo para el censo de Valladolid Toma la Palabra. Tres páginas, ningún recurso externo y nada que no se use. No es de propósito general: está hecho para este sitio.
Version: 1.3.1
Requires at least: 6.5
Requires PHP: 8.2
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agi-vtlp-censo-tema
*/

/*
 * POR QUE UN TEMA PROPIO Y NO UNO DE WORDPRESS.
 *
 * Es el mismo argumento que descarto Elementor en este proyecto: un tema grande
 * trae mucha superficie y muchas dependencias que parchear, y aqui hay tres
 * paginas que no van a crecer. Twenty Twenty-Five, que era el tema activo, trae
 * 44 archivos de tipografia propios y toda la maquinaria de temas de bloques.
 *
 * Y hay un requisito del proyecto que lo decide: estas paginas NO PUEDEN CARGAR
 * NINGUN RECURSO EXTERNO. Con doscientas lineas propias eso se garantiza
 * mirandolas; con un tema de terceros hay que auditarlo entero y volver a
 * hacerlo en cada actualizacion de WordPress.
 *
 * VALORES VISUALES tomados del CSS de valladolidtomalapalabra.org el
 * 30-07-2026, leidos y no elegidos a ojo.
 */

:root {
	/*
	 * El verde corporativo NO se usa para texto. Sobre blanco da 2,86:1 y las
	 * pautas de accesibilidad piden 4,5:1. Va a fondos, bordes y acentos; para
	 * texto y botones esta --vtlp-verde-oscuro, el mismo tono oscurecido hasta
	 * 4,87:1. La identidad se reconoce igual y la pagina se puede leer.
	 */
	--vtlp-verde: #00ac94;
	--vtlp-verde-oscuro: #00806e;
	--vtlp-verde-claro: #e6f7f4;
	--vtlp-azul: #5d4fff;

	--vtlp-texto: #32373c;
	--vtlp-texto-suave: #5b6167;
	--vtlp-borde: #ccd4d6;
	--vtlp-fondo: #ffffff;

	--vtlp-ancho: 46rem;
}

/*
 * TIPOGRAFIAS SERVIDAS DESDE AQUI, NUNCA DESDE GOOGLE.
 *
 * La web de VTLP las carga de fonts.gstatic.com. Copiar eso enviaria la IP de
 * cada visitante a un tercero sin base legal, y en estas paginas el visitante
 * declara su afiliacion politica.
 *
 * Las dos son de licencia libre (SIL Open Font License) y son variables: un
 * solo archivo cubre todos los grosores.
 *
 * VIVEN EN EL TEMA Y NO EN EL PLUGIN porque son parte de la identidad visual
 * del sitio, que es de lo que responde un tema. El plugin las pide por su
 * nombre y, si algun dia corriera bajo otro tema, caeria en la tipografia del
 * sistema: se veria distinto, pero se leeria igual.
 */
@font-face {
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/tipografias/work-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/tipografias/space-grotesk-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

body {
	margin: 0;
	background: var(--vtlp-fondo);
	color: var(--vtlp-texto);
	font-family: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
	font-family: 'Space Grotesk', 'Work Sans', system-ui, sans-serif;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 0.6em;
}

a {
	color: var(--vtlp-verde-oscuro);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 3px solid var(--vtlp-azul);
	outline-offset: 2px;
}

/* Para quien navega con teclado: un salto al contenido antes que nada. */
.vtlp-saltar {
	position: absolute;
	left: -9999px;
}

.vtlp-saltar:focus {
	left: 1rem;
	top: 1rem;
	z-index: 10;
	background: #fff;
	padding: 0.7rem 1rem;
	border: 2px solid var(--vtlp-verde-oscuro);
	border-radius: 4px;
}

/* --- Cabecera --- */

.vtlp-cabecera {
	border-bottom: 3px solid var(--vtlp-verde);
	padding: 1.5rem 1rem;
}

.vtlp-cabecera-interior {
	max-width: var(--vtlp-ancho);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.vtlp-logo img {
	display: block;
	/*
	 * 240px es el tope en pantalla ancha, pero en un telefono de 320 px, una vez
	 * descontado el margen de la cabecera, quedan 288: el logotipo se comia el
	 * 83 por ciento del ancho. Con min() nunca pasa del 70 por ciento de lo que
	 * haya, que en 320 px son 202 px y sigue leyendose.
	 */
	max-width: min(240px, 70%);
	height: auto;
}

.vtlp-logo-texto {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--vtlp-texto);
	text-decoration: none;
}

.vtlp-menu ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	font-weight: 600;
}

.vtlp-menu a {
	text-decoration: none;
}

.vtlp-menu a:hover {
	text-decoration: underline;
}

/* --- Contenido --- */

.vtlp-principal {
	max-width: var(--vtlp-ancho);
	margin: 0 auto;
	padding: 2.5rem 1rem 3rem;
}

.vtlp-principal h1 {
	font-size: 1.9rem;
}

/* El contenido de una pagina normal, como la politica de privacidad. */
.vtlp-contenido {
	/* Una URL o un correo largo pegados en el texto legal no ensanchan la
	   pagina: se parten. */
	overflow-wrap: break-word;
}

.vtlp-contenido h2 {
	font-size: 1.35rem;
	margin-top: 2rem;
}

.vtlp-contenido ul,
.vtlp-contenido ol {
	padding-left: 1.4rem;
}

.vtlp-contenido table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
}

.vtlp-contenido th,
.vtlp-contenido td {
	border: 1px solid var(--vtlp-borde);
	padding: 0.6rem 0.7rem;
	text-align: left;
	vertical-align: top;
	overflow-wrap: break-word;
}

.vtlp-contenido th {
	background: var(--vtlp-verde-claro);
}

/*
 * QUE SE DESPLACE LA TABLA, NO LA PAGINA.
 *
 * La politica de privacidad y el texto legal del bloque 3 llevan tablas —los
 * plazos de conservacion, los destinatarios—, y una tabla de tres o cuatro
 * columnas NO CABE en 360 px por mucho que se estrechen las celdas: cada una
 * tiene un ancho minimo que es su palabra mas larga. Sin esto, la tabla empuja
 * y es la PAGINA ENTERA la que se desplaza a lo ancho: la cabecera, el
 * formulario y el pie se van de sitio por una tabla que esta en medio.
 *
 * WordPress envuelve las tablas de bloque en <figure class="wp-block-table">;
 * ahi basta con dejar que el envoltorio desborde. Para una tabla pegada como
 * HTML suelto, que no lleva envoltorio, se le da a ella el desplazamiento
 * propio, y solo en pantalla estrecha para no tocar el escritorio.
 */
.vtlp-contenido .wp-block-table {
	overflow-x: auto;
}

@media (max-width: 33.99rem) {
	.vtlp-contenido table {
		display: block;
		overflow-x: auto;
	}

	/*
	 * MENOS RELLENO EN LAS CELDAS, Y ESTO SALE DE UNA PRUEBA REAL.
	 *
	 * El 06-08-2026, en el movil: la tabla de cuatro columnas se desplazaba sola
	 * y se veia bien, y la de tres cabia en la pantalla pero se desplazaba unos
	 * 5 px igualmente.
	 *
	 * No era un fallo de la regla de arriba —al reves, es la regla evitando que
	 * esos 5 px los empujara la pagina entera—, sino que la tabla no puede
	 * encogerse por debajo de la suma de lo que ocupan sus columnas, y se
	 * quedaba a un pelo.
	 *
	 * Quitando 0,25rem de relleno por lado se recuperan 8 px por columna: 24 en
	 * una tabla de tres, que es de sobra. Se toca el relleno y NO se parten las
	 * palabras con overflow-wrap: anywhere, que tambien lo habria arreglado:
	 * partir "empadronamiento" por la mitad en un texto legal se lee peor que
	 * desplazar la tabla, y para desplazarla ya esta la regla de arriba, que en
	 * la tabla de cuatro columnas funciona.
	 */
	.vtlp-contenido th,
	.vtlp-contenido td {
		padding: 0.5rem 0.45rem;
	}
}

/* --- Pie --- */

.vtlp-pie {
	border-top: 1px solid var(--vtlp-borde);
	background: #fafcfc;
	padding: 2rem 1rem 2.5rem;
	font-size: 0.9rem;
	color: var(--vtlp-texto-suave);
}

.vtlp-pie-interior {
	max-width: var(--vtlp-ancho);
	margin: 0 auto;
}

.vtlp-pie p {
	margin: 0 0 0.6rem;
}

.vtlp-pie ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0 0 0.9rem;
	padding: 0;
}

/* ------------------------------------------------------------------------- *
 * PANTALLA ESTRECHA
 *
 * 33,99rem y no 34rem: la regla de las dos columnas del plugin usa
 * min-width: 34rem y los dos limites son inclusivos, asi que a exactamente
 * 544 px se aplicarian los dos bloques. Mismo criterio en censo.css.
 * ------------------------------------------------------------------------- */

@media (max-width: 33.99rem) {

	.vtlp-cabecera {
		padding: 1rem;
	}

	.vtlp-cabecera-interior {
		justify-content: center;
		text-align: center;
	}

	/*
	 * EL MARGEN LATERAL LO PONE EL TEMA, UNA VEZ.
	 *
	 * .vtlp-principal ya deja 1rem a cada lado, y .vtlp-censo —que es del
	 * plugin— deja otro: 2rem por lado, 64 px de 360. El plugin lleva el suyo a
	 * proposito, para poder funcionar bajo otro tema; aqui, que es el tema que
	 * sabe lo que ya ha puesto, se le quita.
	 *
	 * Va con dos clases para que gane por especificidad y no dependa del orden
	 * en que se encolen las dos hojas.
	 */
	.vtlp-principal .vtlp-censo {
		padding-left: 0;
		padding-right: 0;
	}

	.vtlp-principal {
		padding: 1.75rem 1rem 2.5rem;
	}

	.vtlp-principal h1 {
		font-size: 1.5rem;
	}

	.vtlp-contenido h2 {
		font-size: 1.2rem;
	}

	.vtlp-pie {
		padding: 1.5rem 1rem 2rem;
	}

	/*
	 * Los enlaces del pie, uno por linea. En fila se quedaban en dos columnas
	 * desiguales, y uno de ellos es la direccion de correo del censo, que mide
	 * 33 caracteres y no se parte por ningun espacio.
	 */
	.vtlp-pie ul {
		display: block;
	}

	.vtlp-pie li {
		margin-bottom: 0.6rem;
	}
}