/* Componentes compartidos del portal: consumen los tokens de color definidos en el :root de cada
   página anfitriona (--color-fondo/--color-panel/--color-borde/--color-texto/--color-texto-suave/
   --color-acento/--color-acento-hover — ver el comentario en css/portal.css) en vez de traer sus
   propios valores fijos. Así una utilidad nueva con otra paleta no necesita tocar este fichero:
   basta con que defina esas mismas variables en su propio :root. Los valores literales que quedan
   (rgba de overlays/sombras, blanco de texto sobre la cabecera de color de acento) no son de
   marca — son efectos universales, no algo que deba variar entre utilidades. */

/* Componente compartido: cabecera de cualquier página del portal (portada y cada utilidad).
   Estructura y medidas idénticas en todas -- lo único que varía de una página a otra es el color
   de fondo (--color-acento de su propio :root) y si lleva o no el desplegable "Proyectos ▾" en la
   fila de navegación (algunas utilidades guardan proyectos, otras no). Antes cada página traía su
   propia copia de este bloque (con la portada encima usando otro prefijo de clase, ".portal-header")
   -- centralizado aquí para que un ajuste de diseño futuro se aplique a la vez en todas en vez de
   tener que repetirlo en cada estilos.css.
   Rediseño 2026-09-11: la versión anterior apilaba en columna el ID de sesión, "Modo ayuda",
   "¿Sugerencias?" y "Estadísticas" (una debajo de otra), lo que disparaba la altura de la cabecera
   y dejaba el desplegable "Utilidades" descentrado dentro de esa fila tan alta. Ahora todo fluye en
   una sola fila horizontal (con salto de línea solo si no cabe, en pantallas estrechas). */
.app-header {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 20px;
	background: var(--color-acento);
	color: #ffffff;
	flex: 0 0 auto;
}

.app-header__fila-marca {
	display: flex;
	align-items: center;
	gap: 14px;
}

.app-header__fila-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.app-header__logo {
	height: 40px;
	width: 40px;
	object-fit: cover;
	border-radius: 50%;
	flex: 0 0 auto;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.app-header__marca-texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.app-header h1 {
	font-size: 19px;
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
}

/* Línea única descriptiva bajo el nombre de la app -- deliberadamente sin paréntesis ni jerga
   técnica entre símbolos (versión anterior: "Creador de GML de Edificios (INSPIRE Building —
   Catastro)"), una frase natural que a la vez sirve de contexto SEO en la propia página. */
.app-header__subtitulo {
	margin: 0;
	font-size: 12.5px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.85);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Bloque de la derecha de la cabecera: ID de sesión (+ "Cambia de usuario"), "Modo ayuda",
   "¿Sugerencias?" y "Estadísticas" (solo admin) -- todo en una fila, separado por un punto medio
   entre elementos consecutivos que sí existen (los que no se rellenan, como Estadísticas para un
   visitante normal, no dejan separador huérfano porque el elemento se queda vacío, no oculto). */
.cabecera-secundaria {
	margin-left: auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
}

.cabecera-secundaria > *:empty {
	display: none;
}

.cabecera-secundaria > * + *:not(:empty) {
	position: relative;
	padding-left: 12px;
}

.cabecera-secundaria > * + *:not(:empty)::before {
	content: "·";
	position: absolute;
	left: 0;
	color: rgba(255, 255, 255, 0.4);
}

.sesion-badge {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Componente compartido: desplegable "Proyectos ▾" propio de una utilidad (distinto del
   desplegable global de la portada, que muestra los de TODOS los módulos -- ver
   .selector-proyectos-global en css/portal.css). Presencia opcional: la utilidad que no guarda
   proyectos (p. ej. datosCATASTRO) simplemente no incluye este bloque en su cabecera. */
.selector-proyectos {
	position: relative;
}

.selector-proyectos .boton-secundario {
	background: transparent;
	border-color: #ffffff;
	color: #ffffff;
	font-size: 13px;
	padding: 6px 12px;
	border-radius: 4px;
}

.selector-proyectos .boton-secundario:hover {
	background: rgba(255, 255, 255, 0.15);
}

.lista-proyectos {
	position: absolute;
	left: 0;
	top: calc(100% + 4px);
	z-index: 1300;
	min-width: 240px;
	max-height: 320px;
	overflow-y: auto;
	background: #ffffff;
	border: 1px solid var(--color-borde);
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	padding: 6px;
}

.lista-proyectos__vacio {
	font-size: 12px;
	color: var(--color-texto-suave);
	font-style: italic;
	margin: 6px;
}

.lista-proyectos__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	width: 100%;
	text-align: left;
	padding: 7px 8px;
	border: none;
	background: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	color: var(--color-texto);
}

.lista-proyectos__item:hover {
	background: var(--color-fondo);
}

.lista-proyectos__nombre {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Componente compartido: selector desplegable de "Utilidades" en la cabecera. */
.barra-utilidades {
	position: relative;
}

.barra-utilidades__boton {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #ffffff;
	font-size: 13px;
	padding: 6px 12px;
	border-radius: 4px;
	cursor: pointer;
}

.barra-utilidades__boton:hover {
	background: rgba(255, 255, 255, 0.22);
}

/* Logo como acceso al panel principal del portal. */
#logo-inicio {
	cursor: pointer;
}

#logo-inicio:hover {
	opacity: 0.85;
}

.barra-utilidades__lista {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--color-panel);
	border: 1px solid var(--color-borde);
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
	/* Por encima de cualquier panel flotante propio de una utilidad (buscador, controles de mapa,
	   etc., normalmente entre 1000 y 1100) -- es chrome de cabecera, común a toda página, así que
	   debe ganar siempre a lo que haya debajo en el contenido. Verificado: se veía tapado por
	   #buscador-flotante de datosCATASTRO al abrirlo, mismo z-index (1000) y posterior en el DOM. */
	z-index: 1300;
}

.barra-utilidades__lista a {
	display: block;
	padding: 8px 10px;
	border-radius: 4px;
	color: var(--color-texto);
	text-decoration: none;
	font-size: 13px;
}

.barra-utilidades__lista a:hover {
	background: var(--color-fondo);
}

/* Tarjetas de acceso a utilidades (portada del portal). */
.tarjetas-utilidades {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

.tarjeta-utilidad {
	display: block;
	padding: 18px;
	background: var(--color-panel);
	border: 1px solid var(--color-borde);
	border-radius: 8px;
	text-decoration: none;
	color: var(--color-texto);
	transition: box-shadow 0.15s, transform 0.15s;
}

.tarjeta-utilidad:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.tarjeta-utilidad__emoji {
	display: block;
	font-size: 28px;
	line-height: 1;
	margin-bottom: 10px;
}

.tarjeta-utilidad h2 {
	margin: 0 0 6px;
	font-size: 16px;
	color: var(--color-acento);
}

.tarjeta-utilidad p {
	margin: 0;
	font-size: 13px;
	color: var(--color-texto-suave);
	line-height: 1.4;
}

/* Componente compartido: badge de sesión de usuario (ID + enlace para cambiar de usuario).
   Minimalista a propósito: solo texto, sin bordes/fondos que compitan con el resto de la
   cabecera — el contexto de cada parte se da por "title" (tooltip al pasar el ratón). */
.sesion-badge__id {
	font-size: 13px;
	color: #ffffff;
}

.sesion-badge__cambiar {
	background: none;
	border: none;
	padding: 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
}

.sesion-badge__cambiar:hover {
	color: #ffffff;
}

/* Componente compartido: pie de página (misma marca/enlace/legal en la portada y en cada
   utilidad). Rediseño 2026-09-09, ajustado el mismo día a petición del usuario: una sola fila
   arriba (marca a la izquierda; sugerencias + copyright/legal + enlace a certivali.es agrupados a
   la derecha) y el aviso de privacidad debajo ocupando todo el ancho disponible -- en desktop cabe
   en una línea, en móvil pasa a dos por el `flex-wrap` de la fila superior dejándole más ancho. */
.pie-pagina {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 16px;
	font-size: 12px;
	color: var(--color-texto-suave);
	background: var(--color-panel);
	border-top: 1px solid var(--color-borde);
}

.pie-pagina__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.pie-pagina__marca {
	display: flex;
	align-items: center;
	gap: 6px;
}

.pie-pagina__marca img {
	height: 18px;
	width: 18px;
	object-fit: cover;
	border-radius: 50%;
	flex: 0 0 auto;
}

.pie-pagina__acciones {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.pie-pagina__legal {
	font-size: 11px;
}

.pie-pagina__enlace,
.pie-pagina__legal a {
	color: var(--color-texto-suave);
	text-decoration: none;
}

.pie-pagina__enlace:hover,
.pie-pagina__legal a:hover {
	color: var(--color-acento);
	text-decoration: underline;
}

/* Dentro del pie de página el fondo es claro, no el verde de la cabecera -- .sugerencias-enlace
   necesita su propia paleta aquí (la de la cabecera, más abajo, sigue siendo texto claro). */
.pie-pagina .sugerencias-enlace {
	color: var(--color-acento);
}

.pie-pagina .sugerencias-enlace:hover {
	color: var(--color-acento-hover);
}

/* Componente compartido: enlace "📊 Estadísticas" (cabecera) -- solo lo rellena shared/js/sesion.js
   cuando el ID de sesión activo está en la lista de administradores; para cualquier otro visitante
   este contenedor se queda vacío y no ocupa espacio visible. */
.estadisticas-enlace {
	background: none;
	border: none;
	padding: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	text-decoration: none;
	cursor: pointer;
}

@media (max-width: 600px) {
	.app-header {
		padding: 10px 12px;
		gap: 7px;
	}

	.app-header__fila-marca {
		gap: 9px;
	}

	.app-header__logo {
		height: 32px;
		width: 32px;
	}

	.app-header h1 {
		font-size: 17px;
	}

	.app-header__subtitulo {
		font-size: 11px;
		white-space: normal;
		line-height: 1.25;
	}

	.app-header__fila-nav {
		gap: 7px 10px;
	}

	.cabecera-secundaria {
		margin-left: 0;
		width: 100%;
		gap: 4px 8px;
	}

	.sesion-badge__id,
	.sesion-badge__cambiar,
	.modo-ayuda-toggle,
	.estadisticas-enlace {
		font-size: 11px;
	}
}

.estadisticas-enlace:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* Componente compartido: enlace "¿Sugerencias?" (cabecera, arriba a la derecha) + modal de
   contacto. El overlay usa el atributo "hidden" para mostrarse/ocultarse — como también fija su
   propio "display", necesita su regla [hidden] con más especificidad (si no, ganaría el
   display:flex de la clase y el modal se quedaría visible aunque tuviera el atributo). */
.sugerencias-enlace {
	background: none;
	border: none;
	padding: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
}

.sugerencias-enlace:hover {
	color: #ffffff;
}

/* Componente compartido: modal de identificación (shared/js/identificacion.js) -- reutiliza
   .sugerencias-overlay/.sugerencias-modal y sus botones; aquí solo lo propio. */
.identificacion-modal__botones {
	flex-wrap: wrap;
}

.identificacion-modal__campo {
	display: block;
	width: 100%;
	margin: 0 0 6px;
	padding: 8px 10px;
	font: inherit;
	font-size: 16px;
	letter-spacing: 2px;
	text-transform: uppercase;
	border: 1px solid var(--color-borde);
	border-radius: 4px;
	box-sizing: border-box;
}

.identificacion-modal__id {
	margin: 0 0 10px;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 3px;
	text-align: center;
	color: var(--color-acento);
}

/* Componente compartido: toggle "Modo ayuda" (cabecera) + puntos de ayuda (.ayuda-punto) que
   cualquier app puede colocar junto a sus elementos clave. El texto de cada globo vive siempre en
   el HTML (oculto con "hidden", nunca insertado por JS) -- esta clase en <body> solo decide si el
   icono "?" se muestra, no si el texto existe, para que un rastreador lo vea en ambos casos. Mismo
   criterio visual que .estadisticas-enlace (texto translúcido sobre el verde de cabecera). */
.modo-ayuda-toggle {
	background: none;
	border: none;
	padding: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	cursor: pointer;
}

.modo-ayuda-toggle:hover {
	color: #ffffff;
}

.modo-ayuda-toggle--activo {
	color: #ffffff;
	text-decoration: underline;
}

/* El "?" del toggle de cabecera usa el mismo rojo que los .ayuda-punto__boton de la página
   (pedido explícito del usuario: "que salga igual para fácil correlación") -- así se ve de un
   vistazo que este botón es el que activa/desactiva esos mismos puntos. */
.modo-ayuda-toggle__signo {
	color: var(--color-ayuda, #c0575c);
	font-weight: 800;
	margin-right: 2px;
}

.ayuda-punto {
	position: relative;
	display: none;
	margin-left: -6px;
	top: 4px;
}

.modo-ayuda-activo .ayuda-punto {
	display: inline-flex;
}

/* Pedido explícito del usuario (dos rondas de ajuste tras verlo primero poco visible y luego
   "demasiado" con el contorno): sin fondo/círculo NI contorno, signo "?" en rojo, un punto más
   pequeño que el primer intento, y desplazado hacia la esquina inferior derecha del elemento al
   que sirve (margin-left negativo + top positivo de arriba) en vez de flotar separado a su lado. */
.ayuda-punto__boton {
	width: auto;
	height: auto;
	border-radius: 0;
	border: none;
	background: none;
	color: var(--color-ayuda, #c0575c);
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
	padding: 0;
	cursor: pointer;
}

.ayuda-punto__boton:hover {
	color: #d18488;
}

.ayuda-punto__globo {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	width: 240px;
	font-size: 12px;
	line-height: 1.5;
	font-weight: 400;
	color: var(--color-texto);
	background: var(--color-panel);
	border: 1px solid var(--color-borde);
	border-radius: 6px;
	padding: 8px 10px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.ayuda-punto__globo[hidden] {
	display: none;
}

.sugerencias-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	padding: 16px;
}

.sugerencias-overlay[hidden] {
	display: none;
}

.sugerencias-modal {
	background: var(--color-panel);
	border-radius: 8px;
	padding: 20px;
	max-width: 420px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.sugerencias-modal h2 {
	margin: 0 0 8px;
	font-size: 17px;
	color: var(--color-texto);
}

.sugerencias-modal__intro {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--color-texto-suave);
	line-height: 1.4;
}

#sugerencias-form label {
	display: block;
	font-size: 13px;
	color: var(--color-texto);
	margin-bottom: 10px;
}

#sugerencias-form input,
#sugerencias-form select,
#sugerencias-form textarea {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 7px 9px;
	font: inherit;
	font-size: 13px;
	border: 1px solid var(--color-borde);
	border-radius: 4px;
	box-sizing: border-box;
}

#sugerencias-form textarea {
	resize: vertical;
}

/* Honeypot antispam: oculto a la vista pero presente en el DOM/tab order mínimamente (algunos
   bots ignoran directamente los campos "display:none" o "type=hidden"). */
.sugerencias-form__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sugerencias-form__mensajes {
	min-height: 16px;
	font-size: 12px;
	margin: 4px 0 10px;
}

/* #b91c1c: mismo rojo de error que ya usa cada utilidad (p. ej. .mensajes--error en
   CreaGML/src/css/estilos.css) -- no está tokenizado todavía en ningún :root, así que se reutiliza
   el valor literal ya establecido en vez de inventar uno distinto solo para este componente. */
.sugerencias-form__mensajes--error { color: #b91c1c; }
.sugerencias-form__mensajes--ok { color: var(--color-acento); }
.sugerencias-form__mensajes--info { color: var(--color-texto-suave); }

.sugerencias-form__botones {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.sugerencias-boton-primario {
	background: var(--color-acento);
	color: #ffffff;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 13px;
	cursor: pointer;
}

.sugerencias-boton-primario:hover {
	background: var(--color-acento-hover);
}

.sugerencias-boton-primario:disabled {
	opacity: 0.6;
	cursor: default;
}

.sugerencias-boton-volver {
	background: none;
	border: 1px solid var(--color-borde);
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 13px;
	cursor: pointer;
	color: var(--color-texto);
}

.sugerencias-boton-volver:hover {
	background: var(--color-fondo);
}