/* ==========================================================================
   FXLAT · componentes
   ========================================================================== */

/* --- Botones ------------------------------------------------------------
   Rectangulos. Sin degradado, sin sombra, sin radio mayor que 2 px.
   El color se gana: el boton principal es placa sobre papel.
   ------------------------------------------------------------------------ */

.fxlat-boton {
	display: inline-block;
	background: var(--fxlat-color-placa);
	color: var(--fxlat-color-placa-tinta);
	font-family: var(--fxlat-font-family-dato);
	font-size: var(--fxlat-font-size-dato);
	font-weight: var(--fxlat-font-weight-dato-fuerte);
	line-height: 1.2;
	letter-spacing: 0.02em;
	padding: var(--fxlat-space-3) var(--fxlat-space-5);
	border: var(--fxlat-border-width-regla) solid var(--fxlat-color-placa);
	border-radius: var(--fxlat-radius-none);
	text-decoration: none;
	cursor: pointer;
	min-height: 44px;
}

.fxlat-boton:hover,
.fxlat-boton:focus {
	background: var(--fxlat-color-acento-pizarra);
	border-color: var(--fxlat-color-acento-pizarra);
	color: var(--fxlat-color-papel);
	text-decoration: none;
}

.fxlat-boton--contorno {
	background: transparent;
	color: var(--fxlat-color-tinta);
	border-color: var(--fxlat-color-linea-fuerte);
}

.fxlat-boton--contorno:hover,
.fxlat-boton--contorno:focus {
	background: var(--fxlat-color-tinta);
	color: var(--fxlat-color-papel);
	border-color: var(--fxlat-color-tinta);
}

/*
   D08 pide que el plan anual tenga el mismo peso visual que el mensual.
   Dos botones identicos, uno al lado del otro. Ninguno es el destacado.
*/
.fxlat-botonera {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fxlat-space-4);
	margin-bottom: var(--fxlat-space-4);
}

.fxlat-botonera .fxlat-boton {
	flex: 0 1 auto;
}

.fxlat-enlace-boton {
	background: none;
	border: 0;
	padding: var(--fxlat-space-3) 0;
	font-family: var(--fxlat-font-family-texto);
	font-size: var(--fxlat-font-size-dato);
	color: var(--fxlat-color-tinta);
	text-decoration: underline;
	cursor: pointer;
}

/* --- Etiqueta de resultado ----------------------------------------------
   La pieza mas cargada de canon del tema.

   Las tres opciones —ganadora, perdedora, neutra— comparten color, peso,
   tamano y posicion. Lo unico que cambia es la palabra. No hay verde ni rojo
   en el sistema, y no los hay tampoco aqui: jerarquizar visualmente los
   aciertos sobre los errores romperia la promesa en la propia maqueta.

   El cuadro de 8 px dice otra cosa distinta del resultado: si la operacion
   cerro (relleno) o sigue abierta (contorno).
   ------------------------------------------------------------------------ */

.fxlat-resultado {
	display: inline-flex;
	align-items: center;
	gap: var(--fxlat-space-2);
	color: var(--fxlat-color-tinta);
	white-space: nowrap;
}

.fxlat-resultado__cuadro {
	flex: none;
	width: var(--fxlat-space-2);
	height: var(--fxlat-space-2);
	border: var(--fxlat-border-width-hairline) solid currentColor;
	border-radius: var(--fxlat-radius-none);
	background: transparent;
}

.fxlat-resultado[data-estado="cerrada"] .fxlat-resultado__cuadro {
	background: currentColor;
}

.fxlat-resultado__etiqueta {
	font-family: var(--fxlat-font-family-dato);
	font-size: var(--fxlat-font-size-meta);
	font-weight: var(--fxlat-font-weight-dato-fuerte);
	letter-spacing: var(--fxlat-letter-spacing-meta);
	text-transform: uppercase;
	line-height: 1;
}

.fxlat-seccion--placa .fxlat-resultado,
.fxlat-pie .fxlat-resultado {
	color: var(--fxlat-color-placa-tinta);
}

/* Leyenda del cuadro, en la cabecera del archivo. */
.fxlat-leyenda-cuadro {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fxlat-space-5);
	font-size: var(--fxlat-font-size-nota);
	color: var(--fxlat-color-grafito);
	margin-bottom: var(--fxlat-space-5);
}

.fxlat-leyenda-cuadro span {
	display: inline-flex;
	align-items: center;
	gap: var(--fxlat-space-2);
}

/* --- Tablas -------------------------------------------------------------- */

.fxlat-tabla-envoltura {
	margin-bottom: var(--fxlat-space-7);
}

.fxlat-tabla {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: var(--fxlat-font-variant-numeric-tabla);
	line-height: var(--fxlat-line-height-tabla);
}

.fxlat-tabla caption {
	text-align: left;
	margin-bottom: var(--fxlat-space-3);
}

.fxlat-tabla thead th {
	font-family: var(--fxlat-font-family-dato);
	font-size: var(--fxlat-font-size-meta);
	font-weight: var(--fxlat-font-weight-dato-fuerte);
	letter-spacing: var(--fxlat-letter-spacing-meta);
	text-transform: uppercase;
	text-align: left;
	color: var(--fxlat-color-grafito);
	padding: var(--fxlat-tabla-padding-celda-y) var(--fxlat-tabla-padding-celda-x);
	border-bottom: var(--fxlat-tabla-cabecera);
	white-space: nowrap;
}

.fxlat-tabla tbody th,
.fxlat-tabla tbody td {
	padding: var(--fxlat-tabla-padding-celda-y) var(--fxlat-tabla-padding-celda-x);
	border-bottom: var(--fxlat-tabla-separador);
	vertical-align: top;
	text-align: left;
	font-weight: var(--fxlat-font-weight-texto-regular);
}

.fxlat-tabla tbody th {
	font-weight: var(--fxlat-font-weight-texto-fuerte);
}

.fxlat-tabla tbody tr {
	min-height: var(--fxlat-tabla-alto-fila);
}

.fxlat-tabla th:first-child,
.fxlat-tabla td:first-child {
	padding-left: 0;
}

.fxlat-tabla th:last-child,
.fxlat-tabla td:last-child {
	padding-right: 0;
}

.fxlat-columna-dato {
	font-family: var(--fxlat-font-family-dato);
	font-size: var(--fxlat-font-size-dato);
	white-space: nowrap;
}

/* --- Fichas ------------------------------------------------------------- */

.fxlat-ficha {
	border-top: var(--fxlat-border-width-regla) solid var(--fxlat-color-linea-fuerte);
	padding-top: var(--fxlat-space-4);
}

.fxlat-ficha h3 {
	margin-bottom: var(--fxlat-space-3);
}

.fxlat-ficha p:last-child {
	margin-bottom: 0;
}

.fxlat-fichas {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fxlat-space-6);
	margin-bottom: var(--fxlat-space-7);
}

@media (min-width: 768px) {
	.fxlat-fichas--tres {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--fxlat-calle);
	}

	.fxlat-fichas--dos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--fxlat-calle);
	}
}

/* --- Dato de apertura --------------------------------------------------- */

.fxlat-apertura {
	border-bottom: var(--fxlat-border-width-vela) solid var(--fxlat-color-linea-fuerte);
	padding-bottom: var(--fxlat-space-6);
}

.fxlat-apertura__fuente {
	font-size: var(--fxlat-font-size-nota);
	color: var(--fxlat-color-grafito);
	max-width: 60ch;
}

/* --- Formulario --------------------------------------------------------- */

.fxlat-formulario {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fxlat-space-3);
	align-items: flex-end;
	margin-bottom: var(--fxlat-space-4);
}

.fxlat-campo {
	display: flex;
	flex-direction: column;
	gap: var(--fxlat-space-2);
	flex: 1 1 280px;
}

.fxlat-campo label {
	font-family: var(--fxlat-font-family-dato);
	font-size: var(--fxlat-font-size-meta);
	letter-spacing: var(--fxlat-letter-spacing-meta);
	text-transform: uppercase;
	color: var(--fxlat-color-grafito);
}

.fxlat-campo input,
.fxlat-campo select {
	font-family: var(--fxlat-font-family-texto);
	font-size: var(--fxlat-font-size-texto);
	padding: var(--fxlat-space-3);
	min-height: 44px;
	border: var(--fxlat-border-width-hairline) solid var(--fxlat-color-linea-fuerte);
	border-radius: var(--fxlat-radius-none);
	background: var(--fxlat-color-papel-alt);
	color: var(--fxlat-color-tinta);
}

/* --- Aviso de riesgo del pie -------------------------------------------- */

.fxlat-aviso-riesgo {
	border: var(--fxlat-border-width-hairline) solid var(--fxlat-color-placa-grafito);
	padding: var(--fxlat-space-5);
}

.fxlat-aviso-riesgo p:last-child {
	margin-bottom: 0;
}

/* --- Cita de fuente ----------------------------------------------------- */

.fxlat-fuente-cita {
	border-left: var(--fxlat-border-width-vela) solid var(--fxlat-color-acento-pizarra);
	padding-left: var(--fxlat-space-5);
	margin: 0 0 var(--fxlat-space-6);
}

.fxlat-fuente-cita p:last-child {
	margin-bottom: 0;
}

/* --- Estado vacio ------------------------------------------------------- */

.fxlat-vacio {
	border: var(--fxlat-border-width-hairline) dashed var(--fxlat-color-linea);
	padding: var(--fxlat-space-6);
	color: var(--fxlat-color-grafito);
	max-width: none;
}

/* --- Aviso de cookies --------------------------------------------------- */

.fxlat-cookies {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	background: var(--fxlat-color-placa);
	color: var(--fxlat-color-placa-tinta);
	border-top: var(--fxlat-border-width-regla) solid var(--fxlat-color-placa-grafito);
	padding-block: var(--fxlat-space-5);
}

.fxlat-cookies .fxlat-meta,
.fxlat-cookies .fxlat-nota {
	color: var(--fxlat-color-placa-grafito);
}

.fxlat-cookies a {
	color: var(--fxlat-color-placa-tinta);
}

.fxlat-cookies__caja p {
	max-width: 76ch;
}

.fxlat-cookies__opciones {
	display: grid;
	gap: var(--fxlat-space-3);
	margin-bottom: var(--fxlat-space-5);
}

.fxlat-cookies__opcion {
	display: flex;
	gap: var(--fxlat-space-3);
	align-items: flex-start;
	font-size: var(--fxlat-font-size-nota);
	line-height: var(--fxlat-line-height-tabla);
}

.fxlat-cookies__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fxlat-space-4);
	align-items: center;
	margin-bottom: var(--fxlat-space-3);
}

.fxlat-cookies .fxlat-boton--contorno {
	color: var(--fxlat-color-placa-tinta);
	border-color: var(--fxlat-color-placa-tinta);
}

.fxlat-cookies .fxlat-boton--contorno:hover,
.fxlat-cookies .fxlat-boton--contorno:focus {
	background: var(--fxlat-color-placa-tinta);
	color: var(--fxlat-color-placa);
}

.fxlat-cookies .fxlat-boton {
	background: var(--fxlat-color-placa-tinta);
	color: var(--fxlat-color-placa);
	border-color: var(--fxlat-color-placa-tinta);
}

.fxlat-cookies .fxlat-enlace-boton {
	color: var(--fxlat-color-placa-tinta);
}

/* --- Paginacion --------------------------------------------------------- */

.fxlat-paginacion {
	display: flex;
	gap: var(--fxlat-space-3);
	flex-wrap: wrap;
	margin-block: var(--fxlat-space-7);
	font-family: var(--fxlat-font-family-dato);
	font-size: var(--fxlat-font-size-dato);
}

/*
   El contorno de un control interactivo necesita 3:1 contra el fondo.
   --fxlat-color-linea da 1,34:1 contra papel: sirve de separador de tabla, no de
   borde de boton. Se usa grafito, que es 5,78:1 y ya esta en el sistema.
*/
.fxlat-paginacion .page-numbers {
	padding: var(--fxlat-space-2) var(--fxlat-space-3);
	border: var(--fxlat-border-width-hairline) solid var(--fxlat-color-grafito);
	text-decoration: none;
}

.fxlat-paginacion .current {
	border-color: var(--fxlat-color-linea-fuerte);
	border-width: var(--fxlat-border-width-regla);
}

/* --- Impresion ---------------------------------------------------------- */

@media print {
	.fxlat-encabezado,
	.fxlat-pie,
	.fxlat-cookies,
	.fxlat-filtros {
		display: none;
	}

	body {
		background: #FFFFFF;
	}
}