/* Estilos para el mapa de polarizado interactivo con silueta de vehículo */
#polarizado-map-container {
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    /*max-width: 400px;  Ancho ajustado para la nueva imagen */
    margin: 20px auto;
	height: auto;
}



#polarizado-map {
    position: relative;
    width: 100%;
    height: 100px;
    padding-bottom: 56.25%; /* Proporción 16:9 para la imagen horizontal */
    background: url('/wp-content/uploads/2025/10/Diagrama-Auto-lineal-03-09.png') no-repeat center center;
    /* background-size: contain; */
}

.window-area {
    position: absolute;
    /* background-color: rgba(0, 115, 255, 0.4);
    border: 1px solid rgba(0, 115, 255, 0.7); */
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    border-radius: 2px;
}

.window-area:hover {
    background-color: rgba(0, 115, 255, 0.6);
}

.window-area.selected {
    background-color: rgba(0, 255, 28, 0.6);
    border-color: rgba(0, 255, 28, 1);
}

#instalacion-u-shape {
    position: absolute;
    top: 44%;
    left: 40.5%;
    width: 11%;
    height: 30%;
    border: 30px solid transparent;
    border-top: none;
    border-radius: 0 0 30px 30px;
    z-index: 10;
    pointer-events: none; /* Para que no interfiera con los clics en otras áreas */
    display: none; /* Oculto por defecto */
}

#instalacion-u-shape.selected {
    display: block; /* Visible cuando se selecciona */
    border-color: rgba(0, 255, 28, 0.6);
}

/* Posicionamiento preciso sobre la imagen de la silueta */
#frontal { top: 35%; left: 42.5%; width: 14.5%; height: 12%; clip-path: polygon(0% 5%, 100% 5%, 90% 100%, 10% 100%);}
#trasero { top: 72%; left: 43%; width: 13%; height: 10%; clip-path: polygon(10% 20%, 95% 20%, 100% 90%, 4% 90%);}
#sunroof { top: 48.4%; left: 46.3%; width: 7%; height: 6%; }

#vidrio-puerta-delantero-izquierdo { top: 42%; left: 41%; width: 3%; height: 12%; }
#vidrio-puerta-delantero-derecho { top: 42%; right: 41%; width: 3%; height: 12%; }

#vidrio-puerta-trasero-izquierdo { top: 54.8%; left: 41%; width: 3%; height: 11%; }
#vidrio-puerta-trasero-derecho { top: 54.8%; right: 41%; width: 3%; height: 11%; }

#aleta-trasero-izquierdo { top: 66.5%; left: 41%; width: 3%; height: 10% }
#aleta-trasero-derecho { top: 66.5%; right: 41%; width: 3%; height: 10%; }

/* #aleta-delantero-izquierdo { top: 38%; left: 3.5%; width: 6%; height: 13%; }
#aleta-delantero-derecho { top: 38%; right: 3.5%; width: 6%; height: 13%; } */


/* Los laterales no parecen estar en la nueva imagen, los omitiré por ahora. */
/* Si necesitas añadirlos, necesitaría ajustar la imagen o el posicionamiento. */
/*
#lateral-trasero-izquierdo { ... }
#lateral-trasero-derecho { ... }
*/


@media screen and (max-width: 500px) {
    #polarizado-map-container {
		padding: 15px;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		/*max-width: 400px;  Ancho ajustado para la nueva imagen */
		margin: 20px auto;
		/* height: 500px; */
		height: auto;
	}
	#polarizado-map {
		position: relative;
		width: 100%;
		height: 250px;
		padding-bottom: 56.25%; /* Proporción 16:9 para la imagen horizontal */
		background: url('/wp-content/uploads/2025/10/Diagrama-Auto-lineal-03-09.png') no-repeat center center;
		/* background-size: contain; */
	}
	#instalacion-u-shape {
		position: absolute;
		top: 42%;
		left: 25%;
		width: 30%;
		height: 40%;
		border: 30px solid transparent;
		border-top: none;
		border-radius: 0 0 30px 30px;
		z-index: 10;
		pointer-events: none; /* Para que no interfiera con los clics en otras áreas */
		display: none; /* Oculto por defecto */
	}
	/* Posicionamiento preciso sobre la imagen de la silueta */
	#frontal { top: 31%; left: 28.5%; width: 41.5%; height: 15%; clip-path: polygon(0% 5%, 100% 5%, 90% 100%, 10% 100%);}
	#trasero { top: 79%; left: 31%; width: 35%; height: 12%; clip-path: polygon(10% 20%, 95% 20%, 100% 90%, 4% 90%);}
	#sunroof { top: 48.4%; left: 39.3%; width: 20%; height: 7%; }

	#vidrio-puerta-delantero-izquierdo { top: 43%; left: 24%; width: 9%; height: 13%; }
	#vidrio-puerta-delantero-derecho { top: 43%; right: 26%; width: 9%; height: 13%; }

	#vidrio-puerta-trasero-izquierdo { top: 56.8%; left: 24%; width: 9%; height: 13%; }
	#vidrio-puerta-trasero-derecho { top: 56.8%; right: 26%; width: 9%; height: 13%; }

	#aleta-trasero-izquierdo { top: 70.5%; left: 24%; width: 9%; height: 12% }
	#aleta-trasero-derecho { top: 70.5%; right: 26%; width: 9%; height: 12%; }
}

@media screen and (min-width: 501px) and (max-width: 600px) {
    #polarizado-map-container {
		padding: 15px;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		/*max-width: 400px;  Ancho ajustado para la nueva imagen */
		margin: 20px auto;
		/* height: 600px; */
		height: auto;
	}
	#polarizado-map {
		position: relative;
		width: 100%;
		height: 200px;
		padding-bottom: 56.25%; /* Proporción 16:9 para la imagen horizontal */
		background: url('/wp-content/uploads/2025/10/Diagrama-Auto-lineal-03-09.png') no-repeat center center;
		/* background-size: contain; */
	}
		#instalacion-u-shape {
		position: absolute;
		top: 43%;
		left: 31%;
		width: 22%;
		height: 40%;
		border: 30px solid transparent;
		border-top: none;
		border-radius: 0 0 30px 30px;
		z-index: 10;
		pointer-events: none; /* Para que no interfiera con los clics en otras áreas */
		display: none; /* Oculto por defecto */
	}
	/* Posicionamiento preciso sobre la imagen de la silueta */
	#frontal { top: 34%; left: 38.5%; width: 22.5%; height: 13%; clip-path: polygon(0% 5%, 100% 5%, 90% 100%, 10% 100%);}
	#trasero { top: 74%; left: 39%; width: 20.5%; height: 12%; clip-path: polygon(10% 20%, 95% 20%, 100% 90%, 4% 90%);}
	#sunroof { top: 48.4%; left: 44.3%; width: 11%; height: 6%; }

	#vidrio-puerta-delantero-izquierdo { top: 43%; left: 36%; width: 5%; height: 12%; }
	#vidrio-puerta-delantero-derecho { top: 43%; right: 36.5%; width: 5%; height: 12%; }

	#vidrio-puerta-trasero-izquierdo { top: 55.8%; left: 36%; width: 5%; height: 11%; }
	#vidrio-puerta-trasero-derecho { top: 55.8%; right: 36.5%; width: 5%; height: 11%; }

	#aleta-trasero-izquierdo { top: 67.5%; left: 36%; width: 5%; height: 10% }
	#aleta-trasero-derecho { top: 67.5%; right: 36.5%; width: 5%; height: 10%; }
}

@media screen and (min-width: 601px) and (max-width: 730px) {
    #polarizado-map-container {
		padding: 15px;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		/*max-width: 400px;  Ancho ajustado para la nueva imagen */
		margin: 20px auto;
		/* height: 600px; */
		height: auto;
	}
	#polarizado-map {
		position: relative;
		width: 100%;
		height: 200px;
		padding-bottom: 56.25%; /* Proporción 16:9 para la imagen horizontal */
		background: url('/wp-content/uploads/2025/10/Diagrama-Auto-lineal-03-09.png') no-repeat center center;
		/* background-size: contain; */
	}
		#instalacion-u-shape {
		position: absolute;
		top: 43%;
		left: 35%;
		width: 17%;
		height: 34%;
		border: 30px solid transparent;
		border-top: none;
		border-radius: 0 0 30px 30px;
		z-index: 10;
		pointer-events: none; /* Para que no interfiera con los clics en otras áreas */
		display: none; /* Oculto por defecto */
	}
	/* Posicionamiento preciso sobre la imagen de la silueta */
	#frontal { top: 34%; left: 38.5%; width: 22.5%; height: 13%; clip-path: polygon(0% 5%, 100% 5%, 90% 100%, 10% 100%);}
	#trasero { top: 74%; left: 39%; width: 20.5%; height: 12%; clip-path: polygon(10% 20%, 95% 20%, 100% 90%, 4% 90%);}
	#sunroof { top: 48.4%; left: 44.3%; width: 11%; height: 6%; }

	#vidrio-puerta-delantero-izquierdo { top: 43%; left: 36%; width: 5%; height: 12%; }
	#vidrio-puerta-delantero-derecho { top: 43%; right: 36.5%; width: 5%; height: 12%; }

	#vidrio-puerta-trasero-izquierdo { top: 55.8%; left: 36%; width: 5%; height: 11%; }
	#vidrio-puerta-trasero-derecho { top: 55.8%; right: 36.5%; width: 5%; height: 11%; }

	#aleta-trasero-izquierdo { top: 67.5%; left: 36%; width: 5%; height: 10% }
	#aleta-trasero-derecho { top: 67.5%; right: 36.5%; width: 5%; height: 10%; }
}

@media screen and (min-width: 731px) and (max-width: 900px) {
    #polarizado-map-container {
		padding: 15px;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		/*max-width: 400px;  Ancho ajustado para la nueva imagen */
		margin: 20px auto;
		/* height: 700px; */
		height: auto;
	}
	#polarizado-map {
		position: relative;
		width: 100%;
		height: 200px;
		padding-bottom: 56.25%; /* Proporción 16:9 para la imagen horizontal */
		background: url('/wp-content/uploads/2025/10/Diagrama-Auto-lineal-03-09.png') no-repeat center center;
		/* background-size: contain; */
	}
		#instalacion-u-shape {
		position: absolute;
		top: 44%;
		left: 38.5%;
		width: 14%;
		height: 30%;
		border: 30px solid transparent;
		border-top: none;
		border-radius: 0 0 30px 30px;
		z-index: 10;
		pointer-events: none; /* Para que no interfiera con los clics en otras áreas */
		display: none; /* Oculto por defecto */
	}
	/* Posicionamiento preciso sobre la imagen de la silueta */
	#frontal { top: 34%; left: 38.5%; width: 22.5%; height: 13%; clip-path: polygon(0% 5%, 100% 5%, 90% 100%, 10% 100%);}
	#trasero { top: 74%; left: 39%; width: 20.5%; height: 12%; clip-path: polygon(10% 20%, 95% 20%, 100% 90%, 4% 90%);}
	#sunroof { top: 48.4%; left: 44.3%; width: 11%; height: 6%; }

	#vidrio-puerta-delantero-izquierdo { top: 43%; left: 36%; width: 5%; height: 12%; }
	#vidrio-puerta-delantero-derecho { top: 43%; right: 36.5%; width: 5%; height: 12%; }

	#vidrio-puerta-trasero-izquierdo { top: 55.8%; left: 36%; width: 5%; height: 11%; }
	#vidrio-puerta-trasero-derecho { top: 55.8%; right: 36.5%; width: 5%; height: 11%; }

	#aleta-trasero-izquierdo { top: 67.5%; left: 36%; width: 5%; height: 10% }
	#aleta-trasero-derecho { top: 67.5%; right: 36.5%; width: 5%; height: 10%; }
}