.ec {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw; /* Ocupa todo el ancho de la vista */
    height: 100vh; /* Ocupa todo el alto de la vista */
}

.ec .lista_container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Ocupa el 100% del contenedor .ec */
    height: 600px; /* Ocupa el 100% de la altura de .ec */
    max-height: 600px;
}

.ec .centrar-elementos {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95vw; /* 95% del ancho de la ventana */
    height: 90vh; /* 90% del alto de la ventana */
    margin: 0 auto; /* Centrar el contenedor en la pantalla, ajuste si es necesario */
    position: relative; /* Para posicionamiento relativo de elementos internos */
    max-width: 1200px; /* Ajuste máximo según necesidades */
    max-height: 550px; /* Ajuste máximo según necesidades */
}


.ec .frente_container {
    position: relative;
    width: 100%;
    height: 0;
    max-height: fit-content;
    padding-top: 75%; /* Mantiene la relación de aspecto de la imagen */
    /*background-image: url('../img/planos/ec/PanelEnergiaConfiable_REV06_final.png');*/
    background-image: url('../img/planos/ec/PanelEnergiaConfiable_REV06_final.png');
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
}

.actualiza {
    margin-top:10px;
    font-family: sans-serif;
    font-size: 10px;
    font-weight:300;
    display: block;
}

.pantalla-tensiones {
    font-family: sans-serif;
    position: absolute;
    display: block;
    top: 5.7%;
    left: 32.9%;
    color: black;
    font-size: 15px;
    font-weight:bolder;
    width: 16.8%;
    height: 11.6%;
    text-align: left;
    padding: 10px 7px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

.pantalla-corrientes {
    font-family: sans-serif;
    position: absolute;
    display: block;
    top: 5.7%;
    left: 61.2%;
    color: black;
    font-size: 15px;
    font-weight:bolder;
    width: 16.8%;
    height: 11.6%;
    text-align: left;
    padding: 10px 7px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

.falla{
    background-color: #fb060699;
    color: white !important;
}

.normal{
    background-color: #52ce52b5;
}

/* Ajustes para escalado proporcional */
@media (min-width: 1300px) {
    .ec .layout_result {
        transform: scale(1.1);
    }
}

@media (min-width: 1600px) {
    .ec .layout_result {
        transform: scale(1.35);
    }
}

@media (max-width: 1280px) {
    .ec .layout_result {
        transform: scale(0.9);
    }
    .ec .led, .ec .led_ojo_buey {
        transform: scale(0.9);
    }
}

@media (max-width: 600px) {
    .ec .layout_result {
        transform: scale(0.7);
        height: 450px
    }
    .ec .led, .ec .led_ojo_buey {
        transform: scale(0.7);
    }
}

/* LEDs y botones */
.ec .led, .ec {
    position: absolute;
    transform-origin: top left; /* Ajusta según sea necesario */
}

/* Ejemplo de LED */
.led {
    top: 10%;
    left: 15%;
    width: var(--led-width); /* Define las variables en :root si es necesario */
    height: var(--led-height);
    border-radius: 50%;
    border: 2px;
    border-style: solid;
    border-color: black;
    background-color: black;
}


.led_ojo_buey {
    position: absolute;
    width: 50px; /* Ajusta según el tamaño deseado */
    height: 50px; /* Asegúrate de que width y height sean iguales para una forma circular */
    border-radius: 50%; /* Esto hace que el LED sea circular */
    background-color: red; /* O el color inicial que desees para el LED */
}

.V_valor{
    position: absolute;
    border: 2px;
    border-style: solid;
    border-color: black;
    border-radius: 8px;

    font-family: sans-serif;
    font-size: 15px;
    font-weight: bold;
    text-align:center;
    padding: 3px;
}

.ec .led.verde,
.ec .led_ojo_buey.verde{
    background-color: greenyellow;
}

.ec .led.rojo,
.ec .led_ojo_buey.rojo{
    background-color: red;
}
.ec .led.apagado,
.ec .led_ojo_buey.apagado
{
    background-color: black;
}


#Vr_valor {
    top: 24.5%;
    left: 19.5%;
}
#Vs_valor {
    top: 42%;
    left: 19.5%;
}
#Vt_valor {
    top: 59.5%;
    left: 19.5%;
}

#ledOjo1 {
    top: 14.5%;
    left: 20.5%;
}

#ledOjo2 {
    top: 32.1%;
    left: 20.5%;
}

#ledOjo3 {
    top: 49.7%;
    left: 20.5%; /* Ajustar según sea necesario */
}

/* Posicionar los LEDs comunes justo debajo de los "ojo de buey" */
#led1 {
    top: 37.7%;
    left: 30.9%; /* Ajustar según sea necesario */
}

#led_redAnormal {
    top: 43.3%;
    left: 30.9%; /* Centro exacto menos la mitad del LED */
}

#led3 {
    top: 46.1%;
    left: 36.1%; /* Ajustar según sea necesario */
}

#led4 {
    top: 37.7%;
    left: 42.9%; /* Ajustar según sea necesario */
}

#led_averia {
    top: 36.8%;
    left: 52.3%; /* Ajustar según sea necesario */
}

#led_altaTensionRectificacion {
    top: 44%;
    left: 52.3%; /* Ajustar según sea necesario */
}

#led_proteccionActuada {
    top: 39.2%;
    left: 62.6%; /* Ajustar según sea necesario */
}

#led_sobreConsumo {
    top: 28.5%;
    left: 57.45%; /* Ajustar según sea necesario */
}

#led_bajaTensionConsumo {
    top: 28.5%;
    left: 65.17%; /* Ajustar según sea necesario */
}

#led_altaTensionConsumo{
    top: 28.5%;
    left: 69.3%; /* Ajustar según sea necesario */
}

#led11 {
    top: 45%;
    left: 69.3%; /* Ajustar según sea necesario */
}

#led12 {
    top: 45%;
    left: 75.3%; /* Ajustar según sea necesario */
}

#led13 {
    top: 50.7%;
    left: 69.3%; /* Ajustar según sea necesario */
}

#led_manual {
    top: 50.7%;
    left: 75.3%; /* Ajustar según sea necesario */
}

#led_poloPositivoTierra {
    top: 51.5%;
    left: 61.9%; /* Ajustar según sea necesario */
}

#led_poloNegativoTierra {
    top: 54.9%;
    left: 62%; /* Ajustar según sea necesario */
}

#led_bateriaBaja {
    top: 47.9%;
    left: 77.7%; /* Ajustar según sea necesario */
}