:root {
	--color-fondo: #f4f5f7;
	--color-panel: #ffffff;
	--color-borde: #d7dbe0;
	--color-texto: #1f2733;
	--color-texto-suave: #5c6672;
	--color-acento: #1d4ed8;
	--color-acento-hover: #1741ac;
}

* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
	margin: 0;
}

body {
	font-family: "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--color-texto);
	background: var(--color-fondo);
	display: flex;
	flex-direction: column;
}

/* --- Cabecera: estructura común centralizada en shared/css/shell.css (.app-header y compañía) -- */

/* --- Botones genéricos --------------------------------------------------------------------- */

.boton-primario,
.boton-secundario {
	font-size: 13px;
	padding: 9px 14px;
	border-radius: 5px;
	border: none;
	cursor: pointer;
}

.boton-primario {
	background: var(--color-acento);
	color: #ffffff;
}

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

.boton-secundario {
	background: #ffffff;
	border: 1px solid var(--color-acento);
	color: var(--color-acento);
}

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

.boton-secundario:disabled {
	border-color: var(--color-borde);
	color: var(--color-texto-suave);
	cursor: not-allowed;
}

/* --- Layout principal: mapa 2/3, ficha 1/3 -------------------------------------------------- */

.app-layout-dc {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: 2fr 6px 1fr;
	min-height: 0;
	background: var(--color-borde);
}

.panel-mapa-dc {
	background: var(--color-panel);
	position: relative;
}

/* Divisor arrastrable entre mapa y ficha -- pedido explícito del usuario ("hazlo móvil, que se
   pueda deslizar"). Solo una barra angosta de color de borde con una zona de agarre más ancha
   (el propio ::after) para no exigir precisión de un píxel al hacer clic. Por defecto (sin nada
   guardado en localStorage) la proporción sigue siendo la de siempre, 2fr/1fr -- ver formulario.js. */
.divisor-paneles {
	position: relative;
	background: var(--color-borde);
	cursor: col-resize;
}

.divisor-paneles::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -4px;
	right: -4px;
}

.divisor-paneles:hover,
.divisor-paneles:focus-visible {
	background: var(--color-acento);
	outline: none;
}

#mapa {
	position: absolute;
	inset: 0;
}

/* Pedido explícito del usuario: los controles de la esquina superior derecha (selector de capas
   de Leaflet, "Ocultas 🏠", medidor) deben verse como un mismo grupo ordenado pero SIN tapar más
   mapa del necesario -- en vez de forzar el mismo ancho en los tres (que estiraba de más los dos
   controles cortos), cada uno se ajusta a su propio contenido y basta con el mismo estilo de caja
   (fondo/sombra/radio) y el apilado natural de Leaflet, ya alineado por el lado derecho, para que
   se lean como un solo panel. */
.leaflet-control-layers-expanded {
	padding: 8px 10px;
}

/* Checkbox "Ocultas 🏠" del visor -- mismo aspecto de caja blanca con sombra que el selector de
   capas de Leaflet (topright, justo debajo), para que se vea como parte del mismo grupo de
   controles aunque sea un control propio en vez de una opción más de ese selector. Ancho mínimo
   (el del propio texto corto), no fijo -- pedido explícito: "no quiero tapar tanto el mapa". */
.control-ocultar-construcciones {
	display: inline-block;
	background: #ffffff;
	border-radius: 4px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
	padding: 6px 10px;
	margin-top: 8px;
	margin-left: auto;
	font-size: 12px;
}

.control-ocultar-construcciones label {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	white-space: nowrap;
}

/* Medidor lineal/de superficie -- mismo cuadro blanco que "Ocultar construcciones" (comparte su
   clase base), justo debajo. Icono + desplegable en una fila, el desplegable ocupando el resto
   del ancho disponible (en vez de su ancho nativo, más estrecho y descuadrado con el resto). */
.control-medicion__botones {
	display: flex;
	align-items: center;
	gap: 6px;
}

.control-medicion__icono {
	font-size: 14px;
	line-height: 1;
}

.control-medicion__botones button {
	flex: 1 1 0;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	border: 1px solid var(--color-borde);
	border-radius: 4px;
	background: #ffffff;
	color: var(--color-texto);
	padding: 5px 0;
	cursor: pointer;
}

.control-medicion__botones button:hover {
	border-color: #1e3a8a;
}

.control-medicion__botones button.activo {
	background: #1e3a8a;
	border-color: #1e3a8a;
	color: #ffffff;
}

.etiqueta-medicion {
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #1e3a8a;
	white-space: nowrap;
}

.etiqueta-medicion:empty {
	display: none;
}

.panel-ficha-dc {
	background: var(--color-panel);
	overflow-y: auto;
	padding: 16px;
}

@media (max-width: 900px) {
	.app-layout-dc {
		grid-template-columns: 1fr !important;
		grid-template-rows: minmax(320px, 55vh) 1fr;
	}

	/* En móvil los paneles se apilan en filas -- arrastrar un divisor horizontal no aporta nada
	   aquí, así que se oculta y el layout vuelve a las dos filas de siempre. */
	.divisor-paneles {
		display: none;
	}
}

/* --- Buscador flotante sobre el mapa -------------------------------------------------------- */

.buscador-flotante {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	max-width: 600px;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.97);
	border: 1px solid var(--color-borde);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	padding: 10px;
}

/* Pedido explícito del usuario: el placeholder por sí solo ("Escribe o pega tu dirección...")
   no dejaba claro que también vale una RC/coordenadas/polígono-parcela, ni que conviene incluir
   población o C.P. -- una frase corta encima, siempre visible (a diferencia del popover "?", que
   exige un clic). */
.buscador-flotante__pista {
	margin: 0 0 6px;
	font-size: 11px;
	color: var(--color-texto-suave);
}

.buscador-flotante__fila-principal {
	display: flex;
	gap: 8px;
}

.campo-busqueda-envoltorio {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.campo-busqueda {
	width: 100%;
	font: inherit;
	font-size: 14px;
	padding: 9px 34px 9px 10px;
	border: 1px solid var(--color-borde);
	border-radius: 5px;
	box-sizing: border-box;
}

.boton-ayuda-busqueda {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--color-borde);
	background: var(--color-fondo);
	color: var(--color-texto-suave);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 0;
	cursor: pointer;
}

.boton-ayuda-busqueda:hover {
	background: var(--color-acento);
	color: #ffffff;
	border-color: var(--color-acento);
}

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

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

.popover-ayuda-busqueda ul {
	margin: 6px 0;
	padding-left: 18px;
}

.popover-ayuda-busqueda li {
	margin-bottom: 3px;
}

#boton-limpiar {
	flex: 0 0 auto;
	padding: 9px 12px;
}

.buscador-flotante__opcionales {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.campo-fijable {
	position: relative;
	flex: 1 1 50%;
	display: flex;
	align-items: center;
	gap: 4px;
}

.campo-fijable--cp {
	flex: 0 0 64px;
}

.campo-fijable input {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;
	font-size: 12px;
	padding: 6px 8px;
	border: 1px solid var(--color-borde);
	border-radius: 4px;
}

.campo-fijable input:disabled {
	background: #eef2f7;
	color: var(--color-texto-suave);
}

.boton-fijar {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	padding: 0;
	font-size: 12px;
	border: 1px solid var(--color-borde);
	border-radius: 4px;
	background: #ffffff;
	cursor: pointer;
	opacity: 0.55;
}

.boton-fijar:hover {
	opacity: 0.85;
}

.boton-fijar.activo {
	opacity: 1;
	border-color: var(--color-acento);
	background: #eef4ff;
}

.sugerencias-desplegable {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 1100;
	max-height: 220px;
	overflow-y: auto;
	background: #ffffff;
	border: 1px solid var(--color-borde);
	border-radius: 5px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

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

.sugerencias-desplegable__fila {
	display: block;
	width: 100%;
	text-align: left;
	padding: 7px 9px;
	font-size: 12px;
	border: none;
	background: none;
	cursor: pointer;
}

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

.sugerencias-desplegable__provincia {
	color: var(--color-texto-suave);
	font-size: 11px;
}

.pestanas-manual {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 8px;
}

.pestana-manual {
	font-size: 11px;
	padding: 4px 9px;
	border-radius: 12px;
	border: 1px solid var(--color-borde);
	background: #ffffff;
	color: var(--color-texto-suave);
	cursor: pointer;
}

.pestana-manual:hover {
	background: var(--color-fondo);
}

.pestana-manual.activa {
	border-color: var(--color-acento);
	color: var(--color-acento);
	background: #eef4ff;
	font-weight: 600;
}

/* --- Control GPS ----------------------------------------------------------------------------- */

.control-gps {
	position: absolute;
	bottom: 14px;
	left: 12px;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.control-gps__boton {
	font-size: 12px;
	padding: 7px 12px;
	border-radius: 16px;
	border: 1px solid var(--color-borde);
	background: #ffffff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.control-gps__boton:hover {
	background: var(--color-fondo);
}

.control-gps__aviso {
	font-size: 11px;
	color: #92400e;
	background: #fef3c7;
	padding: 5px 9px;
	border-radius: 5px;
	max-width: 260px;
}

.control-gps__aviso[hidden] {
	display: none;
}

/* Punto de ayuda flotante sobre el mapa (clic para cargar parcela) -- abajo a la derecha porque
   el buscador flotante ocupa todo el ancho arriba y control-gps ya ocupa abajo a la izquierda. */
.mapa-ayuda-punto {
	position: absolute;
	bottom: 14px;
	right: 12px;
	z-index: 1000;
}

.mapa-ayuda-punto .ayuda-punto {
	margin-left: 0;
}

/* Marcador de posición GPS: punto azul con halo animado, sin plugin externo. */
.marcador-gps {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #2563eb;
	border: 2px solid #ffffff;
	box-shadow: 0 0 0 rgba(37, 99, 235, 0.5);
	position: relative;
}

.marcador-gps::after {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	background: rgba(37, 99, 235, 0.35);
	animation: pulso-gps 1.8s ease-out infinite;
}

@keyframes pulso-gps {
	0% { transform: scale(0.5); opacity: 0.8; }
	100% { transform: scale(1.8); opacity: 0; }
}

/* --- Panel de ficha (1/3 derecho) -------------------------------------------------------- */

.estado-vacio {
	font-size: 13px;
	color: var(--color-texto-suave);
	line-height: 1.5;
	padding: 20px 4px;
}

.estado-vacio[hidden] {
	display: none;
}

.lista-candidatos[hidden] {
	display: none;
}

.lista-candidatos__ayuda {
	margin: 0 0 10px;
}

.lista-candidatos__ayuda-titulo {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-acento);
	margin: 0 0 2px;
	word-break: break-word;
}

/* Conteo total de propiedades -- pedido explícito del usuario: "muy básico, sin colores ni
   estridencias" (a diferencia del título, que sí lleva el color de acento). */
.lista-candidatos__ayuda-conteo {
	font-size: 12px;
	color: var(--color-texto-suave);
	margin: 0 0 6px;
}

.lista-candidatos__ayuda-conteo:empty {
	display: none;
}

.lista-candidatos__ayuda-subtitulo {
	font-size: 12px;
	color: var(--color-texto-suave);
	margin: 0;
}

.lista-candidatos__anclas {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 10px;
}

.lista-candidatos__anclas[hidden] {
	display: none;
}

.anclas__pista {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	flex: 1;
}

.anclas__pista::-webkit-scrollbar {
	display: none;
}

.anclas__chip {
	flex: none;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: 12px;
	border: 1px solid var(--color-borde);
	background: var(--color-panel);
	color: var(--color-acento);
	cursor: pointer;
	white-space: nowrap;
}

.anclas__chip:hover {
	background: var(--color-acento);
	color: #ffffff;
	border-color: var(--color-acento);
}

.anclas__chip--volver {
	color: var(--color-texto-suave);
	background: var(--color-fondo);
}

.anclas__flecha {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--color-borde);
	background: var(--color-panel);
	color: var(--color-texto-suave);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 0;
}

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

.grupo-planta {
	margin-bottom: 10px;
}

.grupo-planta__titulo {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #ffffff;
	border-radius: 4px;
	padding: 6px 8px;
	cursor: pointer;
	list-style: none;
}

.grupo-planta__titulo:hover {
	filter: brightness(0.92);
}

/* Un color por nivel de agrupación (bloque/escalera/planta) -- pedido explícito del usuario para
   distinguirlos de un vistazo cuando aparecen anidados unos dentro de otros. */
.grupo-planta--numero > .grupo-planta__titulo {
	background: #9a3412;
}

.grupo-planta--bloque > .grupo-planta__titulo {
	background: #7c3aed;
}

.grupo-planta--escalera > .grupo-planta__titulo {
	background: var(--color-acento);
}

.grupo-planta--planta > .grupo-planta__titulo {
	background: #0f766e;
}

/* Dentro de "planta", sótano y planta baja llevan su propio matiz -- pedido explícito del
   usuario para localizarlas todavía más rápido dentro del propio nivel verde. */
.grupo-planta--planta-sotano > .grupo-planta__titulo {
	background: #0c4a6e;
}

.grupo-planta--planta-baja > .grupo-planta__titulo {
	background: #b45309;
}

.grupo-planta__titulo::-webkit-details-marker {
	display: none;
}

.grupo-planta__titulo::before {
	content: "▾ ";
}

.grupo-planta:not([open]) .grupo-planta__titulo::before {
	content: "▸ ";
}

.grupo-planta__filas {
	display: flex;
	flex-direction: column;
	margin-top: 4px;
}

.fila-candidato {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	text-align: left;
	padding: 9px 10px;
	margin-bottom: 6px;
	border: 1px solid var(--color-borde);
	border-radius: 5px;
	background: #ffffff;
	cursor: pointer;
	font: inherit;
}

.fila-candidato:hover {
	border-color: var(--color-acento);
	background: #eef4ff;
}

.fila-candidato__ref {
	font-size: 12px;
	font-weight: 600;
	color: var(--color-acento);
}

.fila-candidato__detalle {
	font-size: 11px;
	color: var(--color-texto-suave);
	margin-top: 2px;
}

.fila-candidato__badge {
	flex: none;
	font-size: 10px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 10px;
	white-space: nowrap;
}

.fila-candidato__badge[hidden] {
	display: none;
}

/* "sótano" (planta negativa): aviso orientativo, no un dato real de uso -- ver formulario.js,
   badgeDePlanta(). Color propio, distinto de los tokens de marca -- es un aviso, no un acento. */
.fila-candidato__badge--sotano {
	background: #fdecd2;
	color: #8a5a00;
}

.ficha-inmueble[hidden] {
	display: none;
}

.ficha-inmueble__volver {
	display: block;
	font-size: 11px;
	padding: 5px 10px;
	margin: 0 0 10px;
}

.ficha-inmueble__titulo {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-acento);
	margin: 0 0 2px;
	word-break: break-word;
}

.ficha-inmueble__subtitulo {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--color-texto-suave);
	margin: 0 0 12px;
}

.ficha-inmueble__rc {
	font-size: 15px;
	color: var(--color-texto);
	letter-spacing: 0.02em;
}

.ficha-inmueble__boton-copiar {
	flex: 0 0 auto;
	background: none;
	border: 1px solid var(--color-borde);
	border-radius: 4px;
	font-size: 12px;
	line-height: 1;
	padding: 3px 5px;
	cursor: pointer;
}

.ficha-inmueble__boton-copiar:hover {
	background: var(--color-fondo);
	border-color: var(--color-acento);
}

/* Aviso de "esta parcela también tiene otra referencia" (rústica + urbana con construcción) --
   pedido explícito del usuario, para no tener que "hacer clic a ciegas" entre dos candidatas
   parecidas de un mismo popup sin saber cuál es cuál. Dos líneas cortas (etiqueta / referencia +
   botón) en vez de una sola larga, sin caja de fondo -- alineado a la izquierda igual que el
   resto de texto de la ficha, no destacado como si fuera un aviso aparte. */
.ficha-inmueble__ref-hermana {
	margin: 0 0 12px;
}

.ficha-inmueble__ref-hermana-etiqueta {
	margin: 0 0 4px;
	font-size: 12px;
	color: var(--color-texto-suave);
}

.ficha-inmueble__ref-hermana-fila {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	color: var(--color-texto);
}

.ficha-inmueble__boton-ver-hermana {
	flex: 0 0 auto;
	background: none;
	border: 1px solid var(--color-acento);
	color: var(--color-acento);
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	cursor: pointer;
}

.ficha-inmueble__boton-ver-hermana:hover {
	background: var(--color-acento);
	color: #ffffff;
}

/* Cuerpo de la ficha: una columna en pantalla (el panel de 1/3 de ancho es demasiado estrecho
   para dos), dos columnas -- datos / mapa -- al imprimir (petición explícita del usuario), donde
   sí hay ancho de página completo de sobra. */
.ficha-inmueble__cuerpo {
	display: block;
}

.ficha-inmueble__columna-datos,
.ficha-inmueble__columna-mapa {
	min-width: 0;
}

/* Solo se muestra al imprimir/descargar la ficha (pedido explícito del usuario): en pantalla el
   mapa interactivo de la izquierda ya encuadra y resalta la misma parcela, así que aquí sería
   una miniatura redundante -- ver el bloque @media print más abajo, que la reactiva. */
.ficha-inmueble__captura {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 0 0 14px;
	padding: 10px;
	background: var(--color-fondo);
	border-radius: 6px;
}

.ficha-inmueble__captura-lienzo {
	position: relative;
	max-width: 100%;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid var(--color-borde);
}

.ficha-inmueble__captura-lienzo img {
	display: block;
	width: 100%;
	height: 100%;
}

.ficha-inmueble__captura-resalte {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.ficha-inmueble__captura-resalte path {
	fill: var(--color-acento);
	fill-opacity: 0.28;
	stroke: var(--color-acento);
	stroke-width: 2.5;
	stroke-linejoin: round;
}

.ficha-inmueble__croquis-nota {
	font-size: 10px;
	color: var(--color-texto-suave);
	font-style: italic;
}

.ficha-inmueble__streetview {
	margin-top: 10px;
}

.ficha-inmueble__streetview-fila {
	display: flex;
	align-items: flex-start;
	gap: 4px;
}

.streetview-contenedor {
	position: relative;
	margin-top: 8px;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--color-borde);
}

.streetview-contenedor[hidden] {
	display: none;
}

.streetview-contenedor iframe {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border: 0;
}

/* Botón "✕" para cerrar el panel de Street View -- pedido explícito del usuario. Al cerrarlo,
   formulario.js también vuelve a mostrar el botón "Ver Street View" (solo se muestra cuando el
   panel NO está abierto). */
.streetview-contenedor__cerrar {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 10;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.55);
	color: #ffffff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.streetview-contenedor__cerrar:hover {
	background: rgba(0, 0, 0, 0.75);
}

.ficha-inmueble__aviso-legal {
	margin: 16px 0 0;
	padding-top: 10px;
	border-top: 1px dashed var(--color-borde);
	font-size: 10px;
	line-height: 1.4;
	color: var(--color-texto-suave);
}

.ficha-inmueble__seccion {
	margin-bottom: 14px;
}

.ficha-inmueble__seccion-titulo {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-texto-suave);
	margin: 0 0 6px;
}

/* "Construcciones asociadas" es un <details>/<summary> (plegable al abrir Street View, ver
   cargarStreetView en formulario.js) -- mismo icono ▸/▾ ya usado en los grupos plegables del
   listado de candidatos (.grupo-planta__titulo), sin marcador nativo duplicado. */
summary.ficha-inmueble__seccion-titulo {
	cursor: pointer;
	list-style: none;
}

summary.ficha-inmueble__seccion-titulo::-webkit-details-marker {
	display: none;
}

summary.ficha-inmueble__seccion-titulo::before {
	content: "▸ ";
}

details[open] > summary.ficha-inmueble__seccion-titulo::before {
	content: "▾ ";
}

.ficha-inmueble__campos {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 10px;
	font-size: 12px;
}

.ficha-inmueble__campos dt {
	color: var(--color-texto-suave);
}

.ficha-inmueble__campos dd {
	margin: 0;
	font-weight: 600;
}

/* Dato añadido por la propia app entre paréntesis junto a un valor real de Catastro (antigüedad,
   reparto vivienda/otros usos, índice de ocupación...) -- pedido explícito del usuario: en texto
   normal, sin negrita, para que no compita visualmente con el dato de Catastro. */
.ficha-inmueble__valor-secundario {
	font-weight: 400;
	color: var(--color-texto-suave);
}

/* Punto de ayuda al FINAL de un valor largo (p. ej. "Superficie útil vivienda") -- el globo se
   abre hacia la IZQUIERDA en vez del valor por defecto (derecha, pensado para un "?" pegado a la
   izquierda del todo) -- bug real: aquí el "?" cae cerca del borde derecho de la ficha, y el
   globo se salía y se cortaba contra ese borde. */
.ficha-inmueble__ayuda-al-final .ayuda-punto__globo {
	left: auto;
	right: 0;
}

/* Botón "Ver lista completa" junto a "Régimen: Propiedad horizontal" -- pedido explícito del
   usuario, para llegar al listado de todas las unidades del edificio también desde una unidad a
   la que se llegó directamente (sin pasar antes por ese listado, que es cuando aparece el botón
   "← Volver a la lista" de más arriba). Estilo de enlace, no de botón con borde, para no competir
   visualmente con el valor del propio campo. */
.ficha-inmueble__boton-ver-lista {
	background: none;
	border: none;
	padding: 0;
	margin-left: 4px;
	font-size: 11px;
	font-weight: 600;
	color: var(--color-acento);
	text-decoration: underline;
	cursor: pointer;
}

.ficha-inmueble__boton-ver-lista:hover {
	color: var(--color-acento-hover);
}

.ficha-inmueble__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ficha-inmueble__lista li {
	font-size: 12px;
	padding: 5px 8px;
	background: var(--color-fondo);
	border-radius: 4px;
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.ficha-inmueble__construccion-ubicacion {
	color: var(--color-texto-suave);
	font-size: 11px;
}

.ficha-inmueble__foto {
	max-width: 100%;
	border-radius: 6px;
	border: 1px solid var(--color-borde);
	margin-top: 4px;
}

.ficha-inmueble__acciones {
	display: flex;
	gap: 8px;
	margin-top: 16px;
	flex-wrap: wrap;
}

/* Botones de acción de la ficha (descargar/abrir/ver...): antes cada uno tenía un ancho distinto
   según lo largo de su texto (pedido explícito del usuario: "botones más cuadrados... que todos
   tengan el mismo tamaño") -- tamaño fijo e igual para todos, con el texto más pequeño y
   centrado en varias líneas si hace falta para caber. Se aplica también a "Ver Street View"
   (fuera de .ficha-inmueble__acciones, en su propio contenedor) para que combine visualmente con
   el resto aunque esté en otra fila. */
.boton-ficha {
	width: 96px;
	height: 74px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 6px;
	font-size: 11px;
	line-height: 1.25;
	text-align: center;
	white-space: normal;
	text-decoration: none;
}

/* Bug real: "display: flex" de arriba tiene la misma especificidad que la regla nativa del
   navegador para el atributo "hidden" ([hidden] { display: none }) -- al empatar, gana la hoja de
   estilos del autor (esta) sobre la del navegador sin importar el orden, así que
   boton.hidden = true dejaba de ocultar de verdad el botón "Ver Street View" tras pulsarlo.
   Redeclarado explícitamente aquí para que "hidden" siga funcionando en cualquier .boton-ficha. */
.boton-ficha[hidden] {
	display: none;
}

/* --- Popup de desambiguación (varias coincidencias, elige una) --------------------------- */

.modal-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;
}

/* Sin esto, el display:flex de arriba empataría en especificidad con [hidden] y ganaría por ir
   después en el CSS (mismo bug ya encontrado en CreaGML/shared -- ver comentario en shell.css). */
.modal-overlay[hidden] {
	display: none;
}

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

.modal-candidatos h2 {
	margin: 0 0 12px;
	font-size: 15px;
	color: var(--color-texto);
}

/* --- Mensajes globales (toasts) ------------------------------------------------------------- */

.mensajes {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
}

.mensajes:empty {
	display: none;
}

.mensaje {
	font-size: 12px;
	padding: 8px 14px;
	border-radius: 5px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.mensaje--error {
	background: #fee2e2;
	color: #991b1b;
}

.mensaje--aviso {
	background: #fef3c7;
	color: #92400e;
}

.mensaje--ok {
	background: #dcfce7;
	color: #166534;
}

@media print {
	@page {
		margin: 16mm 14mm;
	}

	.app-header, #buscador-flotante, .control-gps, .panel-mapa-dc, .mensajes,
	.lista-candidatos, .estado-vacio, #pie-pagina, .ficha-inmueble__acciones, .ficha-inmueble__streetview,
	.ficha-inmueble__volver, .ficha-inmueble__boton-copiar, .sesion-aviso-nuevo, .sugerencias-overlay {
		display: none !important;
	}
	.app-layout-dc {
		display: block;
	}
	.panel-ficha-dc {
		overflow: visible;
		padding: 0;
	}

	/* Con página completa de sobra (a diferencia del panel de 1/3 en pantalla), la ficha impresa
	   pasa a dos columnas -- datos a la izquierda, cartografía a la derecha -- reparto pensado
	   tras ver el documento oficial de Catastro con esa misma disposición. A propósito NO se copia
	   su estética (nada de amarillo/naranja institucional ni cabeceras con logo): cada columna es
	   un panel con borde propio y una barra de título en el color de acento de ESTA app (azul), lo
	   bastante distinto para que a simple vista quede claro que no es el documento oficial, aunque
	   la posición/tamaño relativo de cada bloque de información sea parecido (2026-09-11, pedido
	   explícito del usuario tras comparar ambos documentos lado a lado).
	   El texto de las barras de título es puramente decorativo (::before), no HTML real -- no hace
	   falta tocar el marcado para añadirlo ni mantenerlo sincronizado con nada. */
	.ficha-inmueble__titulo {
		font-size: 18px;
		padding-bottom: 8px;
		border-bottom: 2px solid var(--color-acento);
	}

	.ficha-inmueble__subtitulo {
		margin-bottom: 18px;
	}

	/* Flotantes, NO grid/flex: Chrome no sabe partir un contenedor grid/flex entre páginas al
	   imprimir -- lo trata como un bloque atómico, así que si no cabe entero en lo que queda de la
	   página empuja TODO el bloque a la siguiente (dejando la página actual casi en blanco) y, si
	   aun así no cabe entero en una sola página, lo puede llegar a recortar en vez de fluir -- bug
	   real que el usuario vio como "la ficha sale en 3 páginas, la primera casi vacía". Un layout
	   con flotantes sí se pagina con normalidad (misma técnica de toda la vida para maquetación de
	   impresión), así que el contenido fluye de forma continua sin saltos de página artificiales. */
	.ficha-inmueble__cuerpo {
		display: block;
	}

	.ficha-inmueble__cuerpo::after {
		content: "";
		display: table;
		clear: both;
	}

	/* Sin "overflow: hidden" aquí a propósito (bug real visto por el usuario tras cambiar a
	   flotantes: "el mapa y el footer saltan a la página 2" con media página en blanco antes) --
	   overflow distinto de "visible" convierte la caja en "monolítica" para la paginación de
	   Chrome (igual que grid/flex antes), así que si esa columna en concreto no cabe entera en lo
	   que queda de la página entera se difiere a la siguiente, aunque la otra columna sí quepa y
	   se quede -- exactamente el hueco en blanco que se vio. El redondeado de esquinas se consigue
	   ahora solo con el borde (que border-radius recorta igual sin overflow:hidden) + redondeando
	   las esquinas superiores de la propia barra de título de abajo, en vez de recortar todo el
	   contenido de la columna. */
	.ficha-inmueble__columna-datos,
	.ficha-inmueble__columna-mapa {
		float: left;
		width: 48%;
		border: 1px solid var(--color-borde);
		border-radius: 6px;
	}

	.ficha-inmueble__columna-mapa {
		float: right;
	}

	.ficha-inmueble__columna-datos::before,
	.ficha-inmueble__columna-mapa::before {
		display: block;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: #ffffff;
		background: var(--color-acento);
		padding: 7px 12px;
		margin-bottom: 12px;
		border-radius: 5px 5px 0 0;
	}

	.ficha-inmueble__columna-datos::before { content: "Datos del inmueble"; }
	.ficha-inmueble__columna-mapa::before { content: "Cartografía"; }

	.ficha-inmueble__columna-datos {
		padding: 0 14px 14px;
	}

	/* Sin "break-inside: avoid" aquí a propósito -- bug real visto por el usuario: igual que pasaba
	   con "overflow: hidden" en las columnas (ver más arriba), "break-inside: avoid" también
	   convierte la caja en monolítica para Chrome -- si la imagen no cabía entera en lo que
	   quedaba de la página, el bloque entero (imagen + pie de foto) se difería a la página
	   siguiente, y como el aviso legal viene justo después del par de columnas flotantes, tampoco
	   podía aparecer hasta que las dos "cerraran" -- así que también saltaba con el mapa. */
	.ficha-inmueble__captura {
		display: flex;
		margin: 0;
		padding: 0;
		background: none;
		align-items: stretch;
	}

	/* Tampoco "overflow: hidden" aquí (mismo motivo) -- el redondeado de esquinas se consigue
	   aplicando el border-radius directamente a la imagen y al SVG del resalte, que si son
	   elementos "reemplazados" (imagen) o con su propio viewBox (SVG) recortan su propio contenido
	   igual sin necesitar que el contenedor padre sea monolítico. */
	.ficha-inmueble__captura-lienzo {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 420 / 480;
		overflow: visible;
	}

	.ficha-inmueble__captura-lienzo img,
	.ficha-inmueble__captura-resalte {
		border-radius: 4px;
	}

	/* Aviso legal reforzado como una nota con borde propio (pedido explícito: que el disclaimer de
	   fuente/uso quede claro en el documento impreso, sin que el rediseño de arriba lo deje menos
	   visible que antes). */
	.ficha-inmueble__aviso-legal {
		margin-top: 18px;
		padding: 8px 12px;
		border: 1px dashed var(--color-borde);
		border-radius: 4px;
		background: var(--color-fondo);
	}

	.ficha-inmueble__croquis-nota {
		text-align: center;
		margin-top: 6px;
	}

	/* Sin "break-inside: avoid" aquí tampoco, mismo motivo que en las columnas/captura de más
	   arriba -- bug real visto por el usuario con una ficha con muchas construcciones asociadas
	   (7 filas): la sección entera se volvía monolítica y, si no cabía en lo que quedaba de
	   página dentro de su columna flotante, se difería -- arrastrando el aviso legal de después
	   (que solo puede empezar una vez "cierran" las dos columnas) a la página 2 aunque hubiera
	   sitio de sobra. Dejar que una lista larga de construcciones se parta en un salto de línea
	   natural, si hiciera falta, es preferible a la página en blanco que causaba lo anterior. */
	.ficha-inmueble__seccion {
		margin-bottom: 16px;
	}
}