/* ======================================================================
   Tokens: el color, la tipografía y las medidas se definen aquí una vez.
   ====================================================================== */

:root {
	/* Azul de la marca y sus variantes */
	--marca: #4c6d93;
	--marca-oscura: #3a5473;
	--marca-clara: #6995c6;

	/* Fondos: el azul del entorno, la superficie blanca y los cremas de siempre */
	--fondo: #cfe3f0;
	--superficie: #ffffff;
	--crema: #fdf6e9;
	--crema-fuerte: #ffedd1;
	--beige: #d8d2c0;
	--barra: #33475f;

	/* Texto */
	--tinta: #2b2b2b;
	--tinta-suave: #5a5a5a;
	--tinta-clara: #ffffff;

	/* Líneas y relieve */
	--borde: #d9d2c4;
	--borde-fuerte: #b3a98f;
	--radio: 4px;
	--sombra: 0 1px 3px rgba(0, 0, 0, .15);

	/* Acciones */
	--exito: #4a7f16;
	--error: #c62b17;

	/* Tipografía del sistema: no hay nada que descargar. */
	--tipo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Reinicio de elementos  */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

/* Estilos generales */
body {
	background: var(--fondo);
	font-family: var(--tipo);
	/* 14px: los 12 de antes se quedaban cortos para trabajar a diario. */
	font-size: 87.5%;
	color: var(--tinta);
	line-height: 1.5;
}
img {
	border: 0;
}
h1 {
	margin: 5px 0 20px 0;
	font-size: 1.7em;
	font-weight: bold;
	color: var(--tinta);
	line-height: 1.2;
}
h2 {
	font-size: 1.4em;
	font-weight: bold;
	margin: 10px 0;
	color: var(--marca);
	line-height: 1.2;
}
ul, li, p {
	padding-left: 20px;
}

a {
	color: var(--marca);
}

/* Por posicion */

#cuerpo {
	max-width: 1024px;
	margin: 10px auto;
	padding: 0 10px;
	box-sizing: border-box;
}

/* Encabezado */
header {
	background: none;
}

header #header_superior {
	display: flex;
	/* El menú se apoya en el borde inferior, sea cual sea su alto. */
	align-items: flex-end;
	height: 100px;
}

img#logo {
	/* Anclado arriba, así sobresale por debajo de la cabecera, como siempre. */
	align-self: flex-start;
	margin: 10px;
}

nav {
	margin: 0 0 0 20px;
}

header #header_inferior {
	padding: 4px 10px;
	background: var(--barra);
	text-align: right;
	color: white;
}

header #header_inferior a {
	color: #a8d0f0;
	text-decoration: underline;
}

header #header_inferior a:hover {
	color: var(--tinta-clara);
}

/* ======================================================================
   Menú de navegación

   Viene de superfish, pero su JavaScript ya no existe: el desplegable de
   escritorio lo hace `li:hover > ul`, y en pantalla estrecha manda la clase
   `abierto` que pone el controlador de Stimulus.
   ====================================================================== */

#menu,
#menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu {
	float: left;
}

#menu li {
	position: relative;
	background: var(--marca);
	white-space: nowrap;
	transition: background .2s;
}

#menu > li {
	float: left;
}

#menu a {
	display: block;
	position: relative;
	padding: .75em 1em;
	border-left: 1px solid var(--marca-oscura);
	border-top: 1px solid rgba(0, 0, 0, .25);
	color: var(--tinta-clara);
	font-weight: bold;
	font-size: 1.15em;
	text-decoration: none;
}

#menu li:hover {
	background: var(--marca-oscura);
	/* Se atenúa al salir, no al entrar. */
	transition: none;
}

/* Submenús */

#menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);
}

#menu ul ul {
	top: 0;
	left: 100%;
}

#menu ul li {
	font-size: 0.9em;
}

#menu li:hover > ul {
	display: block;
}

/* Cuerpo */

#tabs {
	margin-top: 40px;
}

#tabs ul {
	list-style: none;
	padding:0;
	margin:0;
}

#tabs li {
	display: inline-block;
	/* El margen inferior negativo se come el borde del panel, y así la pestaña activa
	   queda unida a él en vez de montarse encima o separarse un pelo. */
	margin: 0 0.4em -1px 0;
	border: 1px solid var(--borde-fuerte);
	border-radius: var(--radio) var(--radio) 0 0;
	background: var(--beige);
}

#tabs li a {
	display: inline-block;
	padding: 6px 16px;
	text-decoration: none;
	font-weight: bold;
	color: var(--tinta);
}


#tabs li.activa {
	background: var(--crema-fuerte);
	border-bottom-color: var(--crema-fuerte);
}

#tabs li.activa a {
	color: var(--barra);
}

#subtabs {
	margin-top: 0;
	border: 1px solid var(--borde-fuerte);
	border-radius: 0 var(--radio) var(--radio) var(--radio);
	background: var(--crema-fuerte);
}

div.total {
	color: black;
}

section {
	min-height: 300px;
	/* Más aire arriba: el logo sobresale por debajo de la cabecera y el titular le queda
	   justo debajo. */
	padding: 55px 50px 30px;
	background: var(--superficie);
	border-radius: var(--radio);
}

section p {
	padding: 0 25px 10px 25px ;
}

section li {
	margin-bottom: 10px;
}

section .flash-notice {
	margin-top: 45px;
	background: var(--marca);
	color: white;
	border: 1px solid black;
	text-align: center;
}

section .flash-error {
	background: red;
	color: white;
	border: 1px solid black;
	text-align: center;
}

section form div {
	margin-bottom: 14px;
}

section form div.campo_error {
	border: 1px solid black;
	background: red;
	margin: 2px;
}

section form div.campo_error li {
	margin-bottom: 0;
}

section fieldset {
	/* Sin margen lateral: el recuadro se alinea con el titular y con las pestañas, que
	   cuelgan directamente del relleno de `section`. */
	margin: 10px 0 30px;
	padding: 15px;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	color: var(--tinta);
	background: var(--crema);
	box-shadow: var(--sombra);
}

section fieldset a {
	color: black;
	font-weight: bold;
	font-size: 1.1em;
}

section fieldset legend {
	padding: 0 6px;
	font-size: 1.3em;
	font-weight: bold;
	color: var(--marca);
}

section fieldset .campo {
	font-weight: bold;
}

/* Cada campo con su etiqueta encima, en una sola columna: se lee de arriba abajo y
   la vista de escritorio y la de móvil son la misma. */

section form label {
	display: block;
	margin-bottom: 3px;
	font-weight: bold;
	color: var(--tinta-suave);
}

/* El formulario de acceso es corto y va solo en la página: centrado. */
section form#autentificar {
	max-width: 22rem;
	margin: 50px auto;
}

section form input,
section form select,
section form textarea {
	width: 100%;
	max-width: 30rem;
	padding: 7px 9px;
	border: 1px solid var(--borde-fuerte);
	border-radius: var(--radio);
	background: var(--superficie);
	box-sizing: border-box;
	font-family: inherit;
	font-size: 1em;
	color: var(--tinta);
}

section form input:focus,
section form select:focus,
section form textarea:focus {
	outline: 2px solid var(--marca);
	outline-offset: 1px;
	border-color: var(--marca);
}

section form input[type="checkbox"],
section form input[type="radio"] {
	width: auto;
	margin-right: 6px;
}

section form input.corto {
	max-width: 11rem;
}

section form input.largo,
section form textarea {
	max-width: 40rem;
}

/* Campos de solo lectura, como las coordenadas que rellena el mapa */
section form input.no_cambiar {
	background: #f3f4f6;
	color: var(--tinta-suave);
}

section form button[type="submit"] {
	margin-left: 0;
}

section div.opciones {
	margin: 20px 0 0;
}

section table {
	margin: 10px 0 30px;
	border: none;
	border-collapse: collapse;
}

section table.completa {
	width: 100%;
}

section tr {
	height: 40px;
}

section thead.titulo {
	background: var(--marca-oscura);
	color: var(--tinta-clara);
	font-weight: bold;
	text-align: left;
}

section thead.titulo th {
	padding: 10px;
}

section tr.impar {
	background: white;
}

section tr.par {
	background: #f3f4f6;
}

/* La miniatura llega a 200px: en una fila de listado basta con mucho menos. */
td.miniatura img {
	display: block;
	max-width: 80px;
	max-height: 80px;
}

section td, th {
	padding: 8px 10px;
	border-bottom: 1px solid var(--borde);
}

section tr.impar th {
	background: var(--marca-clara);
	color: white;
}

section tr.par th {
	background: var(--marca);
	color: white;
}

section tr td {
	min-width: 60px;
}

div.separador {
	border-top: 1px dotted var(--borde-fuerte);
	padding: 6px 0;
	margin: 6px;
}

div.separador-bajo {
	border-bottom: 1px dotted var(--borde-fuerte);
}

/* Imágenes */
section img {
	border: 1px solid var(--borde-fuerte);
	border-radius: var(--radio);
}

section .imagenes_faciales {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

section .lanzador_facial,
section .lanzador_facial_activo {
	/* Se encogen si no caben los tres, en vez de tirar uno a la línea siguiente. */
	flex: 0 1 220px;
	text-align: center;
	font-weight: bold;
	color: white;
}

.lanzador_facial .cabecera,
.lanzador_facial_activo .cabecera {
	height: 25px;
	background: var(--marca);
}

.lanzador_facial .imagen,
.lanzador_facial_activo .imagen {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 202px;
	width: auto;
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	background: white;
	color: black;
	text-align: center;
	vertical-align: middle;
}

.lanzador_facial .imagen img,
.lanzador_facial_activo .imagen img {
	border: 0;
	margin: auto;
}

.lanzador_facial .pie,
.lanzador_facial_activo .pie {
	height: 25px;
}

.lanzador_facial_activo .imagen_procesada {
	background: green;
}

.lanzador_facial_activo .imagen_no_procesada {
	background: red;
}

canvas#imagen_facial {
	display: block;
	margin: 20px auto;
	border: 1px solid black;
	background: white;
}


/* Paginador */
section div.paginacion {
	text-align:center;
}

section div.pagination {
	color: black;
	text-align: center;
	margin: 20px 0;
}

section div.pagination span {
	display: inline-block;
	margin: 0 5px;
}

section div.pagination a {
	text-decoration: none;
	color: black;
	padding: 4px 8px;
	border: 1px solid var(--borde);
	border-radius: 4px;
	display: inline-block;
	min-width: 30px;
	text-align: center;
	font-size: 14px;
	transition: background-color 0.2s;
}

section div.pagination a:hover {
	background-color: #f3f4f6;
}

section div.pagination .first a,
section div.pagination .last a
{
	color: blue;
	font-weight: bold;
}

section div.pagination .previous a,
section div.pagination .next a
{
	color: var(--marca);
	font-weight: bold;
}

section div.pagination .current {
	font-weight: bold;
	padding: 4px 8px;
	background-color: var(--marca);
	color: white;
	border-radius: 4px;
	display: inline-block;
	min-width: 30px;
	text-align: center;
	font-size: 14px;
}

section div.pagination .separator {
	padding: 8px 5px;
	font-size: 14px;
	color: var(--tinta-suave);
}

/* El z-index crea un contexto de apilamiento para que los controles de Leaflet (1000)
   no tapen la cortinilla (998) ni el superpuesto (999) del visor de imágenes. */
#mapa_canvas {
	margin: auto;
	position: relative;
	z-index: 0;
}

/* Pie */

footer {
	color: #333;
}

div#copyright {
	padding: 8px 0;
	text-align: center;
	font-size: 1.15em;
	color: var(--tinta-suave);
}

div#desarrollo {
	text-align: center;
	color: white;
	background: red;
	font-weight: bold;
}
div#preprod {
	text-align: center;
	background: blue;
	color: white;
	font-weight: bold;
}

/* Clases genéricas */

.centrado {
	margin-left:auto;
	margin-right:auto;
	text-align: center;
}


.ocultar {
	display: none;
}

.izquierda {
	float: left;
}

.negro {
	color: black;
}

.separacion_vertical {
	margin-top: 20px;
}

.cortinilla {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 998;
}

/* El centrado y el tamaño son cosa del CSS: el visor solo pone y quita `visible`. */
.superpuesto {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 95vw;
	max-height: 95vh;
	background: var(--superficie);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
	z-index: 999;
}

.cortinilla.visible,
.superpuesto.visible {
	display: block;
}

.superpuesto img {
	display: block;
	max-width: 95vw;
	max-height: 95vh;
	width: auto;
	height: auto;
}

.dialog {
	display: none;
}

.error {
	margin: 30px auto;
	text-align: center;
	background: red;
	color: white;
}

/* Botones */

.buttons a,
.buttons button {
	display: inline-block;
	margin: 0 7px 0 0;
	padding: 6px 12px;
	border: 1px solid var(--borde-fuerte);
	border-radius: var(--radio);
	background-color: #f7f5f0;
	font-family: inherit;
	font-size: 100%;
	font-weight: bold;
	line-height: 1.4;
	color: var(--tinta-suave);
	text-decoration: none;
	cursor: pointer;
}

.buttons button img,
.buttons a img {
	width: 16px;
	height: 16px;
	margin: 0 3px -3px 0 !important;
	padding: 0;
	border: none;
}

.buttons a:hover,
.buttons button:hover {
	border-color: var(--marca);
	background-color: #eaf1f8;
	color: var(--marca-oscura);
}

.buttons a:active,
.buttons button:active {
	background-color: var(--marca);
	border-color: var(--marca);
	color: var(--tinta-clara);
}

.buttons a:focus-visible,
.buttons button:focus-visible {
	outline: 2px solid var(--marca);
	outline-offset: 2px;
}

/* Acción que añade o confirma */
.buttons a.positive,
.buttons button.positive {
	color: var(--exito);
}

.buttons a.positive:hover,
.buttons button.positive:hover {
	border-color: var(--exito);
	background-color: #eef5e3;
}

.buttons a.positive:active,
.buttons button.positive:active {
	background-color: var(--exito);
	border-color: var(--exito);
	color: var(--tinta-clara);
}

/* Acción que destruye */
.buttons a.negative,
.buttons button.negative {
	color: var(--error);
}

.buttons a.negative:hover,
.buttons button.negative:hover {
	border-color: var(--error);
	background-color: #fbeae8;
}

.buttons a.negative:active,
.buttons button.negative:active {
	background-color: var(--error);
	border-color: var(--error);
	color: var(--tinta-clara);
}

/* ======================================================================
   Adaptación a pantallas estrechas
   ====================================================================== */

/* El botón del menú solo aparece cuando el menú se pliega. */
.menu-alternar {
	display: none;
}

img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 768px) {

	/* --- Cabecera --- */

	header #header_superior {
		display: block;
		height: auto;
		overflow: hidden;
	}

	img#logo {
		width: 90px;
		margin: 10px;
	}

	nav {
		margin: 0 4px 10px;
		clear: both;
	}

	/* --- Menú plegable --- */

	.menu-alternar {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		margin: 0;
		padding: .75em 1em;
		border: 0;
		background: #38342e;
		color: white;
		font-family: Verdana, sans-serif;
		font-size: 1.1em;
		font-weight: bold;
		text-align: left;
		cursor: pointer;
	}

	#menu {
		display: none;
		float: none;
		margin-bottom: 0;
	}

	/* Tres barras dibujadas con el propio color del texto, así que acompañan al
	   tamaño de letra sin necesidad de una imagen. */
	.menu-alternar .barras,
	.menu-alternar .barras::before,
	.menu-alternar .barras::after {
		display: block;
		width: 20px;
		height: 2px;
		background: currentColor;
	}

	.menu-alternar .barras {
		position: relative;
	}

	.menu-alternar .barras::before,
	.menu-alternar .barras::after {
		content: '';
		position: absolute;
		left: 0;
	}

	.menu-alternar .barras::before {
		top: -6px;
	}

	.menu-alternar .barras::after {
		top: 6px;
	}

	/* Con el menú abierto, las barras se cruzan en aspa. El controlador ya mantiene
	   `aria-expanded`, así que no hace falta nada más en JavaScript. */
	.menu-alternar[aria-expanded="true"] .barras {
		background: transparent;
	}

	.menu-alternar[aria-expanded="true"] .barras::before,
	.menu-alternar[aria-expanded="true"] .barras::after {
		top: 0;
	}

	.menu-alternar[aria-expanded="true"] .barras::before {
		transform: rotate(45deg);
	}

	.menu-alternar[aria-expanded="true"] .barras::after {
		transform: rotate(-45deg);
	}

	#menu.abierto {
		display: block;
	}

	#menu > li {
		float: none;
	}

	/* En táctil no hay hover que valga: manda la clase que pone el botón. */
	#menu li:hover > ul {
		display: none;
	}

	#menu ul {
		position: static;
		box-shadow: none;
	}

	#menu li.abierto > ul {
		display: block;
	}

	#menu ul a {
		padding-left: 2.5em;
	}

	/* --- Contenido --- */

	#cuerpo {
		margin-top: 0;
		padding: 0;
	}

	/* Los 50px de relleno a cada lado se comen una quinta parte de un móvil. */
	section {
		padding: 15px 10px;
	}

	/* --- Pestañas --- */

	/* Con `display: inline` una pestaña larga se parte por la mitad al saltar de línea y
	   deja el borde abierto; en bloque salta entera. */
	/* La separación entre filas va arriba: abajo despegaría del panel la última. */
	#tabs li {
		margin-top: 4px;
	}

	#tabs li a {
		padding: 6px 10px;
	}

	/* --- Tablas --- */

	section table,
	section table.completa {
		width: 100%;
		margin: 10px 0 20px;
	}

	/* Si una tabla no cabe, se desplaza dentro de su recuadro en vez de desbordar. */
	section fieldset {
		overflow-x: auto;
	}

	/* Los botones de acción de cada fila, uno sobre otro y sin apretar. */
	td.botones .buttons a,
	td.botones .buttons button {
		display: block;
		margin: 2px 0;
	}

	td.miniatura img {
		max-width: 56px;
		max-height: 56px;
	}

}

/* Portada: texto de bienvenida, algo mayor y sin viñetas. */
fieldset.portada {
	font-size: 1.15em;
}