/*
 * Enterprise Moto — interactive-region-map.css
 * Bloque "Mapa interactivo de regiones" (#43 / #51). Dimensionado responsive +
 * modelo de visibilidad del motor de navegación (SVG único, DOM-driven).
 * El color por región y los tokens editoriales son #47/#48; aquí NO hay tematización.
 */
.ent-region-map {
	max-width: 900px;
	margin-inline: auto;
	position: relative; /* ancla el control «volver» (#44/#51) */
}

.ent-region-map > svg {
	display: block;
	width: 100%;
	height: auto;
	/* Combinador de HIJO DIRECTO (> svg) a propósito: solo el <svg> del mapa, NO el
	   <svg> del icono del botón «volver» (que cuelga del <button>, no de este div).
	   Con el descendiente «.ent-region-map svg» esta regla también estiraba el icono
	   (width:100%) y le pintaba el fondo del lienzo (crema) por detrás de la flecha. */
	/* El fondo lo lleva el <svg>, no el <rect width="100%" height="100%"> del
	   activo: los % del rect se resuelven contra el viewBox, así que al hacer
	   zoom (viewBox recortado) el rect queda fuera del área visible y el fondo se
	   descuadra. El background del elemento es independiente del viewBox y cubre
	   siempre el área renderizada. Mismo color que el rect del maestro (#51). */
	background-color: var(--ent-region-canvas, var(--white));
}

/* ── Colores configurables (nivel 2, #54) ──
   El autor re-tiñe el mapa por custom properties (modo «Personalizar»). Cada
   propiedad cae al valor horneado del activo como fallback, así que en modo «Los
   del propio mapa» (sin overrides) el render es idéntico al activo. Modelo =
   defaults + override por nivel (map-style.json): la regla base pone los defaults
   y cada tier sobrescribe lo suyo (tier0 hereda fill/opacidad de la base).

   Notas de cascada (deliberadas):
   · El grupo se selecciona por [id="tierN"] (NO #tierN) para no introducir
     especificidad de id: así el resalte de hover y el atenuado de vecino
     (.ent-dimmed), que son por clase, siguen ganando. Estas reglas van ANTES del
     bloque de interacción de abajo para que, a igualdad de especificidad, la
     opacidad de .ent-dimmed gane sobre la de nivel.
   · La regla base se limita a «.ent-region-map > svg path» para no alcanzar el
     <path> del icono del botón «volver» (cuelga del botón, no del <svg> del mapa).
   · El fondo (canvas) NO se toca aquí: es invariante (§13.19). Las clases
     is-color-theme / palette-* son marcadores de estado que emite render.php; el
     re-tinte lo gobiernan las custom properties, no esas clases. */
.ent-region-map > svg path {
	fill: var(--ent-land-fill, #1a1a1a);
	stroke: var(--ent-base-stroke, #0e0e0e);
	stroke-width: var(--ent-base-sw, 0.5);
	opacity: var(--ent-base-opacity, 1);
}
.ent-region-map [id="tier0"] path {
	stroke: var(--ent-t0-stroke, #f2c118);
	stroke-width: var(--ent-t0-sw, 0.8);
	opacity: var(--ent-t0-opacity, 1);
}
.ent-region-map [id="tier1"] path {
	fill: var(--ent-region-fill, #2a2a2a);
	stroke: var(--ent-region-stroke, #3a3a3a);
	stroke-width: var(--ent-t1-sw, 0.5);
	opacity: var(--ent-t1-opacity, 1);
}
.ent-region-map [id="tier2"] path {
	fill: var(--ent-province-fill, #5a5a5a);
	stroke: var(--ent-province-stroke, #2a2a2a);
	stroke-width: var(--ent-t2-sw, 0.3);
	opacity: var(--ent-t2-opacity, 1);
}

/* ── Fallback sin-JS (#51 · sub-fase render + motor) ──
   El maestro georreferenciado trae tres capas (tier0 países / tier1 regiones /
   tier2 provincias). Sin motor (contenedor sin .is-ready) se muestra solo la capa
   de países ocultando las interiores, igual que el render estático. Con el motor
   activo (.is-ready) la visibilidad la gobiernan las clases por-path de más abajo. */
.ent-region-map:not(.is-ready) svg #tier1,
.ent-region-map:not(.is-ready) svg #tier2 {
	display: none;
}

/* ── Modelo de visibilidad del motor (#51 · clases por-path) ──
   ent-active: visible e interactivo · ent-dimmed: visible, atenuado y CLICABLE
   (vecino: salto directo, §7) · ent-hidden: oculto. */
.ent-region-map path.ent-hidden {
	display: none;
}

/* Vecino atenuado: visible pero apagado. Ahora es interactivo (§7): recibe eventos
   (sin pointer-events:none) para poder hacerle hover (globo) y clic (salto directo
   a esa unidad). La afordancia de cursor la aporta .ent-navigable cuando tiene
   hijos; el resalte de hover está más abajo. */
.ent-region-map path.ent-dimmed {
	opacity: 0.25;
}

/* ── Interacción de navegación (#44/#51/§7 · afordancia) ──
   Estilo mínimo y neutro: cursor sobre lo navegable (activo o atenuado con hijos)
   y resalte al pasar por encima de cualquier área visible. Un vecino atenuado
   además sube a opacidad plena al pasar por encima, para que se lea como clicable
   sobre el fondo oscuro. La tematización final por región (tokens editoriales) es
   #47/#48, no aquí. */
.ent-region-map path.ent-navigable {
	cursor: pointer;
}

/* Acento al pasar el ratón (#54): configurable por --ent-hover-accent. Por defecto
   #c9a010 (dorado oscuro), NO el dorado #f2c118 anterior; se aplica también en modo
   «Los del propio mapa» (el fallback cubre ese caso, render.php no emite override).
   En «Personalizar» lo emite render.php desde el atributo «Resalte al pasar el ratón». */
.ent-region-map path.ent-active:hover,
.ent-region-map path.ent-dimmed:hover {
	fill: var(--ent-hover-accent, #c9a010);
	fill-opacity: 0.85;
}

.ent-region-map path.ent-dimmed:hover {
	opacity: 1;
}

/* Globo con el nombre del área (#51 · bilingüe). Se añade a <body>, por eso el
   selector no está anidado. El CSS solo se encola donde hay bloque, así que la
   clase no se filtra a otras páginas. Línea principal = nombre en español; línea
   secundaria (cursiva, menor y atenuada) = nombre nativo, oculta si coinciden. */
.ent-region-map__balloon {
	position: fixed;
	z-index: 1000;
	pointer-events: none;
	padding: 4px 9px;
	background: #1a1a1a;
	color: #f5f5f5;
	font-size: 13px;
	line-height: 1.3;
	white-space: nowrap;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.ent-region-map__balloon-name {
	display: block;
}

.ent-region-map__balloon-native {
	display: block;
	font-style: italic;
	font-size: 11px;
	opacity: 0.7;
}

/* ── Control «volver» (#44/#51/#54) ──
   Botón con icono inline (sin texto), arriba-izquierda. Oculto por defecto; visible
   solo cuando el motor marca el contenedor como drilleado (.is-drilled).
   Estructura común aquí; los COLORES los dan dos presets sólidos según el tipo de
   lienzo declarado por el autor (#54). El color del lienzo lo fija el nivel 1 y no
   se re-hornea aquí (invariante §13.19); el autor solo declara si es claro u oscuro
   y el botón se adapta para CONTRASTAR con él. Por eso .back-light (para lienzo
   claro — por defecto) es pastilla OSCURA con icono claro (resalta sobre el crema),
   y .back-dark (para lienzo oscuro) es pastilla CLARA con flecha negra.
   El motor pinta el icono con stroke="currentColor", así que basta fijar `color`.
   Se abandona la pastilla translúcida anterior (rgba), casi ilegible sobre crema. */
.ent-region-map__back {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 5;
	display: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	line-height: 0;
	border-radius: 50%;
	cursor: pointer;
}

.ent-region-map.is-drilled .ent-region-map__back {
	display: flex;
}

/* Preset «sobre lienzo claro» (para lienzo claro): pastilla OSCURA, contrasta con
   el crema; icono claro. Por defecto. */
.ent-region-map.back-light .ent-region-map__back {
	color: #f5f5f5;
	background: #1a1a1a;
	border: 1px solid #f2c118;
}
.ent-region-map.back-light .ent-region-map__back:hover {
	background: #0e0e0e;
	border-color: #c9a010;
}

/* Preset «sobre lienzo oscuro» (para lienzo oscuro): pastilla CLARA, contrasta con
   el lienzo oscuro; icono oscuro (flecha negra). */
.ent-region-map.back-dark .ent-region-map__back {
	color: #1a1a1a;
	background: #f5f5f2;
	border: 1px solid #c9a010;
}
.ent-region-map.back-dark .ent-region-map__back:hover {
	background: #ffffff;
	border-color: #f2c118;
}