/* ------------------------------------------------------------------
   Mapa de sectores - reemplazo en HTML + CSS + SVG del antiguo mapa.swf
   Escenario original: 516 x 522 px, fondo #ffffff
   ------------------------------------------------------------------ */

.mapa-sectores{
	margin:0;
	max-width:516px;
	background:#fff;
}

.mapa-sectores__svg{
	display:block;
	width:100%;
	height:auto;
	font-family:Georgia,"Times New Roman",Times,serif;
	-webkit-tap-highlight-color:transparent;
}

/* --- Panel de referencias --- */
.panel__fondo{fill:#fff;}
.panel__cinta{fill:#2f822f;}
.panel__cola{fill:#004100;}
.panel__icono{fill:#fff;}

.panel__titulo{
	fill:#fff;
	font-size:16px;
}

.panel__ayuda{
	fill:#4b4b4b;
	font-size:14px;
}

/* --- Zonas interactivas --- */
.sector{
	cursor:pointer;
	outline:none;
}

.sector>path{
	fill:#fff;
	fill-opacity:0;
	transition:fill-opacity .18s ease-out,transform .18s ease-out;
}

.sector:hover>path,
.sector:focus-visible>path{
	fill-opacity:.5;
	transform:translate(var(--dx,0),var(--dy,0));
}

.sector--sin-pdf{cursor:default;}

/* --- Rótulo que aparece dentro del panel --- */
.rotulo{
	fill:#990000;
	font-size:34px;
	text-anchor:middle;
	pointer-events:none;
	opacity:0;
	transition:opacity .18s ease-out;
}

.rotulo--largo{font-size:26px;}

#s-sector-a:hover ~ #r-sector-a,
#s-sector-a:focus-visible ~ #r-sector-a,
#s-sector-b:hover ~ #r-sector-b,
#s-sector-b:focus-visible ~ #r-sector-b,
#s-sector-cw:hover ~ #r-sector-cw,
#s-sector-cw:focus-visible ~ #r-sector-cw,
#s-sector-ce:hover ~ #r-sector-ce,
#s-sector-ce:focus-visible ~ #r-sector-ce,
#s-sector-d:hover ~ #r-sector-d,
#s-sector-d:focus-visible ~ #r-sector-d,
#s-sector-e:hover ~ #r-sector-e,
#s-sector-e:focus-visible ~ #r-sector-e,
#s-sector-fe:hover ~ #r-sector-fe,
#s-sector-fe:focus-visible ~ #r-sector-fe,
#s-sector-fw:hover ~ #r-sector-fw,
#s-sector-fw:focus-visible ~ #r-sector-fw,
#s-sector-g:hover ~ #r-sector-g,
#s-sector-g:focus-visible ~ #r-sector-g,
#s-sector-h:hover ~ #r-sector-h,
#s-sector-h:focus-visible ~ #r-sector-h,
#s-sector-i:hover ~ #r-sector-i,
#s-sector-i:focus-visible ~ #r-sector-i,
#s-sector-n:hover ~ #r-sector-n,
#s-sector-n:focus-visible ~ #r-sector-n,
#s-capilla:hover ~ #r-capilla,
#s-capilla:focus-visible ~ #r-capilla,
#s-administracion:hover ~ #r-administracion,
#s-administracion:focus-visible ~ #r-administracion{opacity:1;}

/* --- Accesibilidad / foco por teclado --- */
.sector:focus-visible>path{
	stroke:#990000;
	stroke-width:1.5;
	stroke-opacity:.9;
}

@media (prefers-reduced-motion:reduce){
	.sector>path,.rotulo{transition:none;}
}