.mapa-container{
    position:relative;
    width:100%;
    max-width:1000px;
    margin:auto;
}

.mapa-svg{
    width:100%;
    height:auto;
}

.mapa-svg *{
    pointer-events: all;
}

/* Estado base */
.estado{
    cursor:pointer;
    transition:fill 0.3s ease;
}

/* Contenedor de luces */
.luces-container{
    opacity:0;              /* ocultas por defecto */
    pointer-events:none;    /* no bloquean el hover */
    transition:opacity 0.3s ease;
}

/* Hover genérico para cualquier estado */
[data-luces]:hover .estado{
    fill:#ff7427;
}

[data-luces]:hover .luces-container{
    opacity:1;
}

/* Info flotante (si la usas para la imagen) */
.info-estado{
    position:absolute;
	display:none;
	pointer-events: none; /* evita parpadeo */
}

.preview-img{
    width:295px;
    display:block;
    pointer-events:none;
}






.ttitulos{
    font-family: Barlow;
    font-size:17px;
    color:#03325a !important;
    font-weight:600;
}

.vvalores{
    font-family: Barlow;
    font-size:17px;
    color:#ff7427 !important;
    font-weight:400;
}







.padre_tono{
	position: absolute;
	width: 300px;
	float: left;
	padding: 20px;
	margin-top: -300px;
	font-family: Barlow;
	font-size: 20px;
	margin-left: 218px;
}
.hhijo_1{
	width: 100%;
	margin-bottom: 15px;
	height: 23px;
}
.hhijo_2{
	width: 7%;
	height: 23px;
	float: left;
	border-radius: 5px;
	margin-right: 10px;
}
.hhijo_3{
	width: 80%;
	height: 23px;
	float: left;
}
.ffondiux01{
	background: #d4ecf7;
}
.ffondiux02{
	background: #aadcf3;
}
.ffondiux03{
	background: #52bce9;
}
.ffondiux04{
	background: #0672b9;
}
.ffondiux05{
	background: #124074;
}
.ffondiux06{
	background: #22254e;
}




















/* RESPONSIVO */
@media screen and (max-width:600px){

/*.padre_tono{
	position: relative;
	width: 100%;
	padding: 10px;
	font-family: Barlow;
	font-size: 20px;
	
}*/

.padre_tono{
	position: absolute;
	bottom: 50px;
	left: 10%;
	transform: translateX(-50%);
	width: 100%;
	padding: 10px;
	font-family: Barlow;
	font-size: 20px;
	text-align: left;
}	
.hhijo_1{
	width: 45%;
	margin-bottom: 15px;
	height: 23px;
	float: left;
}
.hhijo_2{
	width: 10%;
	height: 23px;
	float: left;
	border-radius: 5px;
	margin-right: 10px;
}
.hhijo_3{
	width: 80%;
	height: 23px;
	float: left;
}
}




.logo-container{
    pointer-events:none;
}

.logo-container path{
    fill: #ffffff !important;
}




#panel_cifras_y_visor{
	
position:absolute;
right:40px;
top:20px;
width:250px;
height:350px;
background:#ffffff;
border-radius:20px;
align-items:center;
justify-content:center;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
padding: 15px;
	
	
opacity: 0;
transition: opacity 0.3s ease;	
}


#visor-estado{
left:0px;
bottom:10px;
width:250px;
height:250px;


display:flex;
align-items:center;
justify-content:center;

}


#visor-svg{
width:80%;
height:80%;
}

#visor-svg path{
transform:scale(2);
transform-origin:center;
}


/* 📱 móviles */
@media (max-width: 600px){
	
	#panel_cifras_y_visor {
        position: relative;
        width: 77%;
        height: auto;
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        padding: 20px;

        margin-left: auto;
        margin-right: -6px;
        display: block; /* importante */
		
		
		opacity: 0;	
	    transition: opacity 0.3s ease;
		
		
    }
	
	
	
	
    #visor-estado{
		position:relative;
		width:150px;
		height:150px;
		border-radius:20px;
		align-items:center;
		justify-content:center;
		float: right;
		bottom: 117px;
		}
}