/*
 * Censo VTLP — hoja de estilo de las paginas publicas.
 *
 * Propia y autonoma: no depende del tema ni de Elementor, y no carga nada de
 * ningun servidor ajeno. Las tipografias se sirven desde aqui.
 *
 * VALORES TOMADOS DE LA WEB DE VTLP el 30-07-2026, leyendo su CSS y no a ojo:
 * verde corporativo #00ac94 (el color dominante de la pagina), secundario
 * #5d4fff, gris de texto #32373c, y las familias Work Sans y Space Grotesk.
 */

/*
 * LAS TIPOGRAFIAS NO SE DECLARAN AQUI, LAS DECLARA EL TEMA.
 *
 * Work Sans y Space Grotesk son parte de la identidad visual del sitio, que es
 * de lo que responde un tema, y tenerlas en los dos sitios significaria dos
 * copias de los mismos archivos. Aqui se piden por su nombre, con una pila de
 * reserva del sistema detras: si este plugin corriera algun dia bajo otro tema,
 * el formulario se veria distinto pero se leeria igual.
 *
 * Lo que no cambia esten donde esten: se sirven desde nuestro servidor y nunca
 * desde Google. La web de VTLP las carga de fonts.gstatic.com, y copiar eso
 * enviaria la IP de cada visitante a un tercero sin base legal, en la pagina
 * donde declara su afiliacion politica.
 */

.vtlp-censo {
	/*
	 * EL VERDE CORPORATIVO NO SE USA PARA TEXTO, Y NO ES UN DESCUIDO.
	 *
	 * #00ac94 sobre blanco da un contraste de 2,86:1, y las pautas de
	 * accesibilidad piden 4,5:1 para texto normal. Con texto blanco encima da
	 * lo mismo, 2,86:1. Asi que el corporativo va a fondos, bordes y acentos,
	 * y para texto y botones se usa --vtlp-verde-oscuro, que es el mismo tono
	 * oscurecido hasta 4,87:1. La identidad se reconoce igual y la pagina se
	 * puede leer, que en un formulario publico no es opcional.
	 */
	--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-suave: #f7f9f9;

	--vtlp-error: #a4262c;
	--vtlp-error-fondo: #fdf3f3;

	--vtlp-radio: 4px;
	--vtlp-hueco: 1.25rem;

	max-width: 44rem;
	margin: 0 auto;
	padding: 0 1rem;
	font-family: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--vtlp-texto);

	/*
	 * NINGUNA PALABRA LARGA EMPUJA LA PAGINA A LO ANCHO.
	 *
	 * En estas pantallas hay al menos tres cadenas que no se pueden partir por
	 * un espacio: censo@valladolidtomalapalabra.org, que sale en casi todas, los
	 * domicilios que alguien teclee de corrido, y las etiquetas de barrio. En
	 * 320 px de ancho una sola de ellas basta para sacar barra de desplazamiento
	 * horizontal a la pagina entera, que es el fallo de movil mas clasico que
	 * hay y el que menos se ve desde un escritorio.
	 */
	overflow-wrap: break-word;
}

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

/*
 * EL LOGOTIPO NO ESTA AQUI. Va en la cabecera del sitio, que la pinta el tema.
 * Estuvo un rato encima del formulario y se veia mal: dos identidades seguidas,
 * la del sitio y la del formulario, diciendo lo mismo.
 */

.vtlp-censo h1,
.vtlp-censo h2 {
	font-family: 'Space Grotesk', 'Work Sans', system-ui, sans-serif;
	font-weight: 700;
	line-height: 1.25;
	color: var(--vtlp-texto);
	margin: 0 0 0.5rem;
}

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

.vtlp-censo .vtlp-censo-entradilla {
	color: var(--vtlp-texto-suave);
	margin: 0 0 2rem;
}

/* --- Agrupaciones --- */

.vtlp-censo fieldset {
	border: 1px solid var(--vtlp-borde);
	border-radius: var(--vtlp-radio);
	padding: 1.25rem 1.25rem 0.5rem;
	margin: 0 0 1.75rem;
}

.vtlp-censo legend {
	font-family: 'Space Grotesk', 'Work Sans', sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	padding: 0 0.5rem;
	color: var(--vtlp-verde-oscuro);
}

/* --- Campos --- */

.vtlp-campo {
	margin-bottom: var(--vtlp-hueco);
}

.vtlp-campo label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.vtlp-campo .vtlp-obligatorio {
	color: var(--vtlp-error);
	margin-left: 0.15rem;
}

.vtlp-campo input[type="text"],
.vtlp-campo input[type="email"],
.vtlp-campo input[type="tel"],
.vtlp-campo input[type="date"],
.vtlp-campo input[type="file"],
.vtlp-campo select {
	width: 100%;
	/*
	 * min-width: 0 Y max-width: 100%, LAS DOS.
	 *
	 * Un campo de formulario trae de fabrica un ancho minimo propio —el que le
	 * da el navegador por su atributo size— y ese minimo GANA a width: 100%
	 * cuando el campo esta dentro de una rejilla o de un flex. Sin esto, en la
	 * fila de dos columnas los campos no se encogen: se desbordan.
	 *
	 * El caso que lo hace seguro y no teorico es el campo de archivo, que
	 * ademas pinta dentro el nombre del archivo elegido. Una foto hecha con el
	 * movil se llama IMG_20260806_124512.jpg, y ese texto no se parte.
	 */
	min-width: 0;
	max-width: 100%;
	padding: 0.6rem 0.7rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--vtlp-texto);
	background: #fff;
	border: 1px solid var(--vtlp-borde);
	border-radius: var(--vtlp-radio);
}

/*
 * EL CAMPO DE FECHA EN iOS NO SE PARECE A LOS DEMAS SI NO SE LE DICE.
 *
 * Safari de iPhone le pone su propio relleno interior y su propia altura, de
 * modo que la fecha de nacimiento queda mas baja que el campo del documento que
 * tiene al lado en la misma fila. Con el aspecto nativo desactivado se alinea
 * con el resto; el selector de fecha del sistema sigue apareciendo al tocarlo,
 * que es lo unico que no se puede perder.
 *
 * La altura minima se fija en las mismas unidades que el relleno de los demas
 * campos para que las dos columnas queden a ras.
 */
.vtlp-campo input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	min-height: calc(1.6rem + 1.2rem + 2px);
}

/*
 * EL SELECTOR DE ARCHIVO SE PULSA CON EL DEDO, y de fabrica es una linea de
 * texto pequena. Aqui se sube el area tactil y se deja que el nombre del archivo
 * se corte en lugar de empujar.
 */
.vtlp-campo input[type="file"] {
	padding: 0.75rem 0.7rem;
}

.vtlp-campo input:focus-visible,
.vtlp-campo select:focus-visible,
.vtlp-censo button:focus-visible,
.vtlp-censo a:focus-visible {
	/* Un formulario largo se rellena mucho con el teclado. El foco tiene que
	   verse sin lugar a dudas, no insinuarse. */
	outline: 3px solid var(--vtlp-azul);
	outline-offset: 2px;
}

.vtlp-campo .vtlp-ayuda {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.875rem;
	color: var(--vtlp-texto-suave);
}

/* Dos columnas donde tiene sentido, y una sola en pantalla estrecha. */
.vtlp-fila {
	display: grid;
	gap: 0 var(--vtlp-hueco);
	grid-template-columns: 1fr;
}

/*
 * 1fr NO ES "la mitad": es minmax(auto, 1fr), y ese auto significa "nunca mas
 * estrecho que su contenido". Una columna con un <select> cuyas opciones son
 * largas —las etiquetas de barrio y las de codigo postal lo son— reclama el
 * ancho de su opcion mas larga, la rejilla suma dos anchos que no caben y LA
 * FILA SE SALE DEL CONTENEDOR.
 *
 * No se ve en un escritorio ancho porque ahi sobra sitio. Se ve entre 545 y
 * 700 px, que es un movil grande en horizontal y una tablet pequena en
 * vertical: justo el tramo que no se prueba nunca.
 */
.vtlp-fila > * {
	min-width: 0;
}

@media (min-width: 34rem) {
	.vtlp-fila--dos {
		grid-template-columns: 1fr 1fr;
	}
}

/* --- Consentimiento --- */

.vtlp-censo-privacidad {
	background: var(--vtlp-verde-claro);
	border: 1px solid var(--vtlp-verde);
	border-radius: var(--vtlp-radio);
	padding: 1rem;
	margin-bottom: 1.75rem;
}

.vtlp-censo-privacidad label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.7rem;
	align-items: start;
	font-weight: 400;
	cursor: pointer;
}

.vtlp-censo-privacidad input[type="checkbox"] {
	/*
	 * 1,4rem son 22 px. Es la casilla del consentimiento expreso del articulo 9:
	 * la que menos se puede fallar con el dedo, y la unica del formulario.
	 * flex-shrink a cero porque dentro de la rejilla del label la casilla no
	 * debe encogerse cuando el texto de al lado ocupa tres lineas.
	 */
	width: 1.4rem;
	height: 1.4rem;
	flex-shrink: 0;
	margin-top: 0.15rem;
	accent-color: var(--vtlp-verde-oscuro);
}

.vtlp-censo-privacidad a {
	color: var(--vtlp-verde-oscuro);
	font-weight: 600;
}

/*
 * LA CASILLA DEL BOLETIN (1.21.0): misma rejilla que la de privacidad, pero
 * sin su recuadro verde. Aquella es el consentimiento obligatorio del
 * articulo 9 y tiene que destacar; esta es opcional, y vestirla igual
 * invitaria a marcarla por inercia junto con la otra.
 */
.vtlp-censo-boletin {
	margin: -0.75rem 0 1.75rem;
	padding: 0 1rem;
}

.vtlp-censo-boletin label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.7rem;
	align-items: start;
	font-weight: 400;
	cursor: pointer;
}

.vtlp-censo-boletin input[type="checkbox"] {
	width: 1.4rem;
	height: 1.4rem;
	flex-shrink: 0;
	margin-top: 0.15rem;
	accent-color: var(--vtlp-verde-oscuro);
}

.vtlp-censo-boletin-privacidad {
	margin: 0.5rem 0 0 2.1rem;
	font-size: 0.85rem;
	color: var(--vtlp-texto-suave);
}

/* --- Avisos --- */

.vtlp-censo-aviso {
	border-radius: var(--vtlp-radio);
	padding: 1rem 1.25rem;
	margin-bottom: 1.75rem;
	/*
	 * CON COLOR, Y NO SOLO "4px solid".
	 *
	 * Sin color, el filete toma currentColor, que es el gris oscuro del texto:
	 * un aviso neutro —el del formulario de correccion tras un rechazo, que no
	 * lleva modificador— salia con una barra negra al lado. Y desde la 1.19.1
	 * hay dentro otro recuadro con su propio filete, el de la nota de quien
	 * valida, asi que se veian dos barras anidadas y la de fuera pesaba mas que
	 * la de dentro.
	 *
	 * Los modificadores de error y de exito siguen poniendo el suyo encima.
	 */
	border-left: 4px solid var(--vtlp-borde);
}

.vtlp-censo-aviso p:first-child {
	margin-top: 0;
}

.vtlp-censo-aviso p:last-child,
.vtlp-censo-aviso ul:last-child {
	margin-bottom: 0;
}

.vtlp-censo-aviso--error {
	background: var(--vtlp-error-fondo);
	border-left-color: var(--vtlp-error);
}

.vtlp-censo-aviso--exito {
	background: var(--vtlp-verde-claro);
	border-left-color: var(--vtlp-verde);
}

.vtlp-censo-aviso ul {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
}

/*
 * LA NOTA DE QUIEN HA REVISADO, dentro del aviso de rechazo.
 *
 * Se distingue del texto que la rodea porque NO ES DEL SISTEMA: la ha escrito
 * una persona del partido dirigiendose a quien acaba de ser rechazado. Sin
 * marcarla se lee como una linea mas del aviso automatico, que fue lo que se
 * vio probando el circuito el 06-08-2026 —en el correo, y aqui pasaba igual—.
 *
 * Mismo tratamiento que en el correo: etiqueta encima y recuadro con filete.
 */
.vtlp-censo-nota-revision-titulo {
	margin: 1.25rem 0 0.35rem;
}

/*
 * MISMO ASPECTO QUE EN EL CORREO, Y POR ESO RECUADRO Y NO FILETE.
 *
 * Es el mismo texto y la misma persona lo ve en los dos sitios con minutos de
 * diferencia: le llega el correo, pulsa el enlace y aterriza aqui.
 *
 * Lo que manda es la forma del correo, y alli el filete a la izquierda esta
 * PROHIBIDO: Gmail lo lee como texto citado y pliega lo que viene detras, que
 * es el boton de corregir. El detalle, en AGI_VTLP_Censo_Correo::nota_de_revision().
 * Aqui no haria dano —esto es una pagina, no un correo—, pero se copia la misma
 * forma para que las dos pantallas se parezcan, que es de lo que iba esto.
 */
.vtlp-censo-nota-revision {
	margin: 0;
	padding: 0.8rem 1rem;
	background: var(--vtlp-fondo-suave);
	border: 1px solid var(--vtlp-borde);
	border-radius: var(--vtlp-radio);
}

/* --- Boton --- */

.vtlp-censo button {
	font-family: 'Space Grotesk', 'Work Sans', sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
	background: var(--vtlp-verde-oscuro);
	border: 0;
	border-radius: var(--vtlp-radio);
	padding: 0.8rem 2rem;
	cursor: pointer;
}

.vtlp-censo button:hover {
	background: #006e5e;
}

/* --- La trampa para robots --- */

.vtlp-censo-trampa {
	/*
	 * Fuera de la vista pero SIN display:none. Algunos robots omiten los campos
	 * ocultos de la forma evidente, y este campo solo sirve si lo rellenan.
	 * aria-hidden y tabindex=-1 lo sacan del camino de quien usa lector de
	 * pantalla o teclado, que es lo que importa de verdad.
	 */
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Pie --- */

.vtlp-censo-pie {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--vtlp-borde);
	font-size: 0.875rem;
	color: var(--vtlp-texto-suave);
}

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

/* --- Pagina de gestion de la inscripcion --- */

/*
 * Los botones de la gestion son a veces enlaces —"volver atras", "pedir otro
 * enlace"— y a veces botones de formulario. Comparten clase para que se vean
 * igual, porque para quien los usa hacen lo mismo.
 */

.vtlp-censo .vtlp-boton {
	display: inline-block;
	font-family: 'Space Grotesk', 'Work Sans', sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
	background: var(--vtlp-verde-oscuro);
	border: 0;
	border-radius: var(--vtlp-radio);
	padding: 0.8rem 2rem;
	text-decoration: none;
	cursor: pointer;
}

.vtlp-censo a.vtlp-boton:hover {
	background: #006e5e;
	color: #fff;
}

/*
 * EL BOTON DE BAJA NO SE PARECE AL DE GUARDAR, y no es cuestion de gusto: son
 * la accion reversible y la que no lo es, y tienen que distinguirse antes de
 * leerlas.
 *
 * Solido para CONFIRMAR la baja, que es el momento en que se ejecuta.
 */
.vtlp-censo .vtlp-boton--peligro {
	background: var(--vtlp-error);
}

.vtlp-censo a.vtlp-boton--peligro:hover,
.vtlp-censo button.vtlp-boton--peligro:hover {
	background: #8a1f24;
}

/*
 * Y EN CONTORNO PARA ENTRAR EN ELLA, que es lo que hay en el panel al lado del
 * boton de guardar.
 *
 * Desde la 1.11.0 los dos estan en la misma fila. Antes la baja vivia al final
 * de la pagina, separada por un espacio grande, y Ricardo no la encontro
 * probando su propia inscripcion: la distancia no protegia de nada —de eso se
 * encarga la pantalla de confirmacion por POST— y escondia la salida, que en un
 * censo de afiliacion politica es lo que menos se puede esconder.
 *
 * Lo que si se conserva es que no se parezcan. Rojo sobre fondo claro, no un
 * segundo boton solido que compita con el de guardar.
 */
.vtlp-censo .vtlp-boton--peligro-contorno {
	color: var(--vtlp-error);
	background: transparent;
	border: 2px solid var(--vtlp-error);
	padding: calc(0.8rem - 2px) calc(2rem - 2px);
}

.vtlp-censo a.vtlp-boton--peligro-contorno:hover {
	color: #fff;
	background: var(--vtlp-error);
}

/* Explica que la salida pide confirmacion, justo debajo de los dos botones. */
.vtlp-censo-acciones-aviso {
	margin: 0.6rem 0 0;
	font-size: 0.9rem;
	color: var(--vtlp-texto-suave);
}

.vtlp-censo .vtlp-boton--secundario {
	color: var(--vtlp-texto);
	background: transparent;
	border: 1px solid var(--vtlp-borde);
}

.vtlp-censo a.vtlp-boton--secundario:hover,
.vtlp-censo button.vtlp-boton--secundario:hover {
	color: var(--vtlp-texto);
	background: var(--vtlp-fondo-suave);
}

/*
 * LA DESCARGA DE LOS PROPIOS DATOS, en la pagina de gestion (1.20.0). Es un
 * formulario de un solo boton dentro de un recuadro de nota: en contorno y no
 * solido, porque la accion principal de esa pagina es guardar los cambios y
 * esta es un derecho que se ejerce una vez.
 */
.vtlp-censo-descarga form {
	margin: 0.75rem 0 0;
}

.vtlp-censo-descarga button.vtlp-boton--secundario {
	font-size: 0.95rem;
	padding: 0.6rem 1.4rem;
}

.vtlp-censo-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin: 1.5rem 0 0;
}

.vtlp-censo-aviso--peligro {
	color: var(--vtlp-error);
	background: var(--vtlp-error-fondo);
	border-left: 4px solid var(--vtlp-error);
}

.vtlp-censo-nota {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--vtlp-fondo-suave);
	border-radius: var(--vtlp-radio);
	font-size: 0.9rem;
	color: var(--vtlp-texto-suave);
}

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

/*
 * RECUADRO DE "YA ME HABIA INSCRITO", arriba del formulario de alta.
 *
 * Tiene que verse antes del primer campo y NO competir con el boton de enviar,
 * que es lo que la pagina viene a hacer: por eso lleva el boton en contorno y
 * no solido. Ocupa el ancho del formulario, asi que funciona igual en movil,
 * que es donde una columna lateral no habria servido de nada.
 */
.vtlp-censo-ya-inscrito {
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem;
	background: var(--vtlp-fondo-suave);
	border: 1px solid var(--vtlp-borde);
	border-left: 4px solid var(--vtlp-verde);
	border-radius: var(--vtlp-radio);
}

.vtlp-censo-ya-inscrito p {
	margin: 0;
}

.vtlp-censo-ya-inscrito p + p {
	margin-top: 1rem;
}

/*
 * (Aqui vivia .vtlp-censo-baja, el apartado del final del panel de gestion:
 * "separada del formulario por un espacio grande, no se llega a ella por
 * descuido al bajar guardando". Retirado en la 1.11.0 con el apartado entero.
 * La separacion no evitaba ningun descuido —eso lo hace la confirmacion por
 * POST— y en cambio escondia la salida.)
 */

/* ------------------------------------------------------------------------- *
 * PANTALLA ESTRECHA
 *
 * Anadido el 06-08-2026. Hasta aqui la unica regla para movil era pasar la
 * fila de dos columnas a una: correcto, pero insuficiente, y NADIE LO HABIA
 * VISTO EN UN TELEFONO.
 *
 * POR QUE 33,99rem Y NO 34rem: la regla de las dos columnas usa
 * min-width: 34rem, y los dos limites son inclusivos. Escrito 34 aqui, a
 * exactamente 544 px se aplicarian los dos bloques a la vez. No rompe nada,
 * pero es el tipo de solape que despista al que venga a tocarlo.
 * ------------------------------------------------------------------------- */

@media (max-width: 33.99rem) {

	/*
	 * LOS BOTONES A TODO EL ANCHO, Y ESTE ES EL ARREGLO QUE DE VERDAD HACIA
	 * FALTA.
	 *
	 * El relleno lateral era de 2rem fijos, 64 px, mas el texto sin encoger.
	 * "Si, retirar mi solicitud" mide unos 220 px en Space Grotesk de 1,05rem:
	 * con el relleno pasa de 280 px. En un iPhone SE quedan 256 px utiles una
	 * vez descontados los margenes del tema y los de esta hoja, ASI QUE ESE
	 * BOTON SE SALIA DE LA PANTALLA. Los de "Pedir un enlace nuevo" y "Guardar
	 * los cambios" van justos por el mismo motivo.
	 *
	 * A todo el ancho no solo caben: dan un area tactil de lado a lado, que es
	 * lo que se agradece rellenando un formulario largo con una mano.
	 */
	.vtlp-censo button,
	.vtlp-censo .vtlp-boton {
		display: block;
		width: 100%;
		padding-left: 1rem;
		padding-right: 1rem;
		text-align: center;
	}

	/* El de contorno lleva 2px de borde: se le descuentan igual que en ancho. */
	.vtlp-censo .vtlp-boton--peligro-contorno {
		padding-left: calc(1rem - 2px);
		padding-right: calc(1rem - 2px);
	}

	/*
	 * Y APILADOS, NO EN FILA. Con los dos a todo el ancho, flex-wrap ya los
	 * bajaba de linea; ponerlo en columna lo hace explicito y reparte el hueco
	 * igual entre ellos.
	 *
	 * LO QUE NO CAMBIA ES QUE NO SE PAREZCAN, que es lo que protege: el de
	 * guardar sigue solido y verde, el de salir sigue en contorno rojo. Es la
	 * decision de la 1.11.0 y en movil vale igual.
	 */
	.vtlp-censo-acciones {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	/*
	 * MENOS PARED Y MAS CAMPO. En 360 px de ancho se iban 32 px en los margenes
	 * del tema, otros 32 en los de esta hoja y 40 mas en los del fieldset: 104
	 * px de 360, casi un tercio de la pantalla, para que quedaran 256 de campo.
	 * El margen exterior lo quita el tema —que es quien sabe que ya pone el
	 * suyo—; aqui se recorta el del fieldset.
	 */
	.vtlp-censo fieldset {
		padding: 1rem 0.9rem 0.4rem;
	}

	.vtlp-censo legend {
		font-size: 1rem;
	}

	/*
	 * El titular baja de 1,9rem a 1,5rem. A 30 px, "Hemos recibido tu
	 * inscripcion" se come tres lineas de pantalla antes de que se lea nada.
	 */
	.vtlp-censo h1 {
		font-size: 1.5rem;
	}

	.vtlp-censo-privacidad,
	.vtlp-censo-aviso,
	.vtlp-censo-nota,
	.vtlp-censo-ya-inscrito {
		padding: 0.9rem 1rem;
	}
}