/* -------------------------------------
// Textos
------------------------------------- */

/* Solar */
.top-block__solar-txt{
    position: absolute;
    font-size: 1.750rem;
    z-index: 3;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    color:rgb(214,11,81);
    background: rgba(255,255,255,.8);
    border-radius:0.250rem;
    left: 5.3%;
    padding: 0.063rem 0.625rem;
    width: 6%;
}
.top-block__solar-txt span{
    font-size: 1.125rem;
    color:rgb(87,87,86);
    display: inline-block;
    padding-left: 0.313rem;
}
.top-block__solar-txt em{
    vertical-align: super;
    font-size: 0.750rem;
    font-style: normal;
}
.top-block__solar-txt-r{
    top: 34.5%;
}
.top-block__solar-txt-r0{
    top: 40.5%;
}
.top-block__solar-txt-temp{
    top: 46.5%;
}
.top-block__solar-txt-temp2{
    top: 52.5%;
}
.top-block__solar-txt-eest{
    top: 58.5%;
}
.top-block__txt_solar-txt{
    position: absolute;
    font-size: 1.8rem;
    z-index: 3;
    text-align: right;
    font-weight: bold;
    white-space: nowrap;
    color:white;
    left: 0%;
    padding: 0.063rem 0.625rem;
    width: 3.9%;
}
.top-block__txt_solar-txt-r{
    top: 34.1%;
}
.top-block__txt_solar-txt-r0{
    top: 40.1%;
}
.top-block__txt_solar-txt-temp{
    top: 46.1%;
}
.top-block__txt_solar-txt-temp2{
    top: 52.1%;
}
.top-block__txt_solar-txt-eest{
    top: 58.1%;
}
/* generacion */
.top-block__creation-txt{
    position: absolute;
    font-size: 2.875rem;
    z-index: 3;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    color:rgb(214,11,81);
    padding: 0.063rem 0.625rem;
    background: rgba(255,255,255,.8);
    border-radius:0.250rem;
    left: 34.5%;
    min-width: 6.5%;
}
.top-block__creation-txt span{
    font-size: 1.500rem;
    color:rgb(87,87,86);
    display: inline-block;
    width: 2.438rem;
}
/* Consumo de todas las placas puesto en uno nada mas el otro valor comentado */
.top-block__txt-solar-panel-2{
    top: 52.5%;
    left: 36.5%;
}

.top-block__txt-solar-panel-3{
    top: 74%;
    left: 58.5%;
}
/* Consumo total de las palcas mas la red */
.top-block__txt-solar-panel-4{
    top: 75%;
    left: 50%;   
}
.top-block__txt-solar-panel-5{
    top: 75%;
}
.top-block__txt-powerwall{
    top: 61.5%;
}
/* Valor kW de la red (datosRedPotencia) — debajo del icono de la torre de red */
.top-block__txt-external-power{
    top: 28%;
}
.top-block__txt-external-power.top-block__creation-txt{
    left: 24%;
}
.cargadores-wrapper {
    position: relative;
    top: 72%;
    left: 18%;
    width: 48%;
    height: 21.5%;
    display: flex;
    gap: 0;
    align-items: stretch;
}
.cargadores {
    flex: 1;
    border: 1px solid grey;
    border-right: none;
    border-radius: 1rem 0 0 1rem;
    background-color: rgba(100, 100, 100, 0.2);
    position: relative;
    overflow: hidden;
}
.fabricaContainer {
    flex: 0 0 22%;
    border: 1px solid grey;
    border-radius: 0 1rem 1rem 0;
    background-color: rgba(100, 100, 100, 0.2);
    position: relative;
    overflow: hidden;
}
.cargador {
    position: relative;
    background: url(../../../img/inicio/cargador.png) no-repeat;
    background-size: 100%;
    width: 7%;
    height: 65%;
    left: 13%;
}
.cargador.uno {
    left: 76.5%;
    top: 30%;
}
.cargador.dos {
    left: 45%;
    top: -35%
}
.cargador.tres {
    left: 13%;
    top: -100%;
}
/* ---- Slot fabrica — en .fabricaContainer, separado de .cargadores ---- */
.fabricaSlot {
    position: absolute;
    left: 5%;
    top: 15%;
    width: 90%;
    height: 70%;
    background: url(../../../img/inicio/sectors/eringenieria.svg) 56.5% 5% / 650% auto no-repeat;
}
/* Valor kW — encima del icono fabrica */
.fabricaSlot__valor {
    position: absolute;
    top: 3%;
    left: 0;
    width: 40%;
    font-size: 1rem;
    min-width: 2.5%;
    text-align: center;
    margin-left: 25%;
}
.fabricaSlot__valor span {
    font-size: 1rem;
}
/* Nombre ER INGENIERIA — debajo del icono */
.fabricaSlot__nombre {
    position: absolute;
    bottom: 3%;
    left: 0;
    width: 100%;
    font-size: 0.6rem;
    font-weight: bold;
    color: white;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
}
.cargador span {
    position: absolute;
    width: 99%;
    height: 100%;
    text-align: center;
    padding-top: 90%;
    padding-left: 20%;
    font-weight: bold;
}
.top-block__txt-cargador-power{
    left: 51.5%;
    font-size: 1rem;
    width: 9%;
    min-width: 2.5%;
    text-align: center;
    top: 3%;
}
.top-block__txt-cargador-power span{
    font-size: 1rem;
}
.top-block__txt-cargador-power.a1 {
    left: 67.5%;
}
.top-block__txt-cargador-power.b1 {
    left: 83.5%;
}
.top-block__txt-cargador-power.a2 {
    left: 36%;
}
.top-block__txt-cargador-power.b2 {
    left: 52%;
}
.top-block__txt-cargador-power.a3 {
    left: 4%;
}
.top-block__txt-cargador-power.b3 {
    left: 20%;
}
.top-block__txt-cargador-status{
    left: 51.8%;
    font-size: 1rem;
    width: 2%;
    min-width: 2%;
    text-align: center;
    height: 28px;
    background: url(../../../img/inicio/estadoCargaRojo.png) no-repeat;
    background-size: 100%;
    top: 30%;
}

.top-block__txt-cargador-status.a1 {
    left: 68.5%
}
.top-block__txt-cargador-status.b1 {
    left: 88.5%;
}
.top-block__txt-cargador-status.a2 {
    left: 37%
}
.top-block__txt-cargador-status.b2 {
    left: 57%;
}
.top-block__txt-cargador-status.a3 {
    left: 5%;
}
.top-block__txt-cargador-status.b3 {
    left: 25%;
}
.top-block__txt-cargador-status[v_state_out1 = "1"],
.top-block__txt-cargador-status[v_state_out2 = "1"] {
   background: url(../../../img/inicio/estadoCargaVerde.png) no-repeat;
   background-size: 100%;
}
.top-block__txt-cargador-status[v_state_out1 = "5"],
.top-block__txt-cargador-status[v_state_out2 = "5"] {
   background: url(../../../img/inicio/estadoCargaAzul.png) no-repeat;
   background-size: 100%;
}
.top-block__txt-cargador-status[v_state_out1 = "7"],
.top-block__txt-cargador-status[v_state_out2 = "7"],
.top-block__txt-cargador-status[v_state_out1 = "8"],
.top-block__txt-cargador-status[v_state_out2 = "8"],
.top-block__txt-cargador-status[v_state_out1 = "9"],
.top-block__txt-cargador-status[v_state_out2 = "9"] {
   background: url(../../../img/inicio/estadoCargaAmarillo.png) no-repeat;
   background-size: 100%;
}
.top-block__txt-cargador-status[v_state_out1 = "8"],
.top-block__txt-cargador-status[v_state_out2 = "8"],
.top-block__txt-cargador-status[v_state_out1 = "9"],
.top-block__txt-cargador-status[v_state_out2 = "9"] {
    animation: blinker 1s linear infinite;
}
@keyframes blinker {
    25% {
        opacity: 0.5;
    }
    50% {
        opacity: 0;
    }
    75% {
        opacity: 0.5;
    }
}
.top-block__txt-cargador-status[v_state_out1 = "11"],
.top-block__txt-cargador-status[v_state_out2 = "11"] {
   background: url(../../../img/inicio/estadoCargaRojo.png) no-repeat;
   background-size: 100%;
}
.top-block__txt-cargador-status[v_state_out1 = "12"],
.top-block__txt-cargador-status[v_state_out2 = "12"] {
   background: url(../../../img/inicio/estadoCargaGris.png) no-repeat;
   background-size: 100%;
}
.iconoInversor {
    background: url(../../../img/inicio/inversor.png) no-repeat;
    position: absolute;
    width: 2.4rem;
    height: 2.4rem;
    left: 24.7%;
    z-index: 5;
    background-size: 100%;
    transform: scaleX(-1);
}
/* Iconos inversores — zona segunda placa solar (parking), lado izquierdo.
   inv1=N1-2, inv2=N3-P, inv3=COR, inv4=BOG, inv5=BOM.
   Cada 6% de separacion entre inversores. */
.iconoInversor.inv1 {
    top: 49.1%;
}
.iconoInversor.inv2 {
    top: 55%;
}
.iconoInversor.inv3 {
    top: 61.2%;
}
.iconoInversor.inv4 {
    top: 67.2%;
}
.iconoInversor.inv5 {
    top: 73.2%;
}
.top-block__txt-solar-inversor{
    position: absolute;
    font-size: 1.750rem;
    z-index: 3;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    color:rgb(214,11,81);
    background-color: rgba(255,255,255,.8);
    border-radius:0.250rem;
    left: 26%;
    padding: 0.063rem 0.625rem;
    width: auto;
}
/* Valores kW de cada inversor — alineados con sus iconos (mismo top +0.3%) */
.top-block__txt-solar-inversor.inv1{
    top: 49.5%;
}
.top-block__txt-solar-inversor.inv2{
    top: 55.5%;
}
.top-block__txt-solar-inversor.inv3{
    top: 61.5%;
}
.top-block__txt-solar-inversor.inv4{
    top: 67.5%;
}
.top-block__txt-solar-inversor.inv5{
    top: 73.5%;
}
/* Valor % bateria */
.top-block__txt-solar-inversor.batp{
    top: 50.5%;
    left: 53%;
}
/* Valor V bateria */
.top-block__txt-solar-inversor.batv{
    top: 58%;
    left: 53%;
}
.top-block__txt-solar-inversor.outhbs{
    top: 56%;
    left: 50%;
}
/* Valor KW bateria */
.top-block__txt-solar-inversor.batw{
    top: 22%;
    left: 55%;
    font-size: 2.8rem;
}
/*.top-block__txt-solar-inversor.batw[valoranalogica^="0"]{
    visibility: hidden;
}*/

/* Valor Consumo HBS KW */
.top-block__txt-solar-inversor.hbsConsumo{
    top: 37.5%;
    left: 45%;
    font-size: 1.2rem;
    width: auto;
    display: inline-block;
}
.top-block__txt-solar-inversor.hbsConsumo span{
    font-size: 0.8rem;
}

.top-block__txt-solar-inversor-string {
    position: absolute;
    font-size: 1.050rem;
    z-index: 3;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    color:rgb(214,11,81);
    background: rgba(255,255,255,.8);
    border-radius:0.250rem;
    left: 26%;
    padding: 0.063rem 0.625rem;
    width: 6%;
}
.top-block__txt-solar-inversor-string span{
    font-size: 1.050rem;
}
.top-block__txt-solar-inversor-string.inv8s1 {
    top: 70.5%;
}
.top-block__txt-solar-inversor-string.inv8s2 {
    top: 74%;
}
.top-block__txt-solar-inversor-string.inv8s3 {
    top: 77.5%;
}
.top-block__txt-solar-inversor-string.inv8s4 {
    top: 81%;
}
.top-block__txt-solar-inversor-string.inv8s5 {
    top: 84.5%;
}
.top-block__txt-solar-inversor-string.inv8s6 {
    top: 88%;
}
.top-block__txt-solar-inversor-string.inv8s7 {
    top: 91.5%;
}
.top-block__txt-solar-inversor-string.inv8s8 {
    top: 95%;
}
.top-block__txt-solar-inversor-string.inv8s9 {
    top: 98.5%;
}
.top-block__txt-solar-inversor-string.inv8s10 {
    top: 102%;
}
.top-block__txt-solar-inversor-string.inv8s11 {
    top: 105.5%;
}
.top-block__txt-solar-inversor-string.inv8s12 {
    top: 109%;
}
.top-block__txt-solar-limitacion{
    position: absolute;
    font-size: 1.2rem;
    z-index: 3;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    color:rgb(214,11,81);
    background: rgba(255,255,255,.8);
    border-radius:0.250rem;
    left: 22%;
    padding: 0.063rem 0.625rem;
    min-width: inherit;
    width: 2.7%;
    line-height: 2.15rem;
}
.top-block__txt-solar-limitacion.inv4 {
    top: 25.5%;
}
.top-block__txt-solar-limitacion.inv5 {
    top: 31.5%;
}
.top-block__txt-solar-limitacion.inv6 {
    top: 37.5%;
}
.top-block__txt-solar-limitacion.inv7 {
    top: 43.5%;
}
.top-block__txt-solar-limitacion.inv1 {
    top: 51%;
}
.top-block__txt-solar-limitacion.inv2 {
    top: 57%;
}
.top-block__txt-solar-limitacion.inv3 {
    top: 63%;
}
.top-block__txt-solar-limitacion.inv8 {
    top: 88.5%;
}
.top-block__creation-txt.top-block__txt-solar-limitacion span {
    font-size: 1.2rem;
}
.top-block__txt_solar-limit {
    position: absolute;
    font-size: 1rem;
    z-index: 3;
    text-align: right;
    font-weight: bold;
    white-space: nowrap;
    color: #4e5a5f;
    left: 21%;
    padding: 0.063rem 0.625rem;
    width: 3.5%;
    line-height: 2.15rem;
    top: 21.5%;
}
.top-block__txt_solar-inversor-txt{
    position: absolute;
    font-size: 1.5rem;
    z-index: 3;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    color: black;
    left: 15%;
    padding: 0.063rem 0.625rem;
    width: 3.9%;
    line-height: 2.15rem;
    border: 1px solid black;
    border-radius: 20px;
    width: 8%;
    background-color: greenyellow;
}
.top-block__txt_solar-inversor-txt[estado="1"]{
    background-color: yellow;
}
.top-block__txt_solar-inversor-txt[estado="2"]{
    background-color: orange;
}
.top-block__txt_solar-inversor-txt[estado="3"]{
    background-color: red;
}
/* Etiquetas de nombre/estado de cada inversor — mismo top que sus iconos */
.top-block__txt_solar-inversor-txt.inv1{
    top: 49.5%;
}
.top-block__txt_solar-inversor-txt.inv2{
    top: 55.5%;
}
.top-block__txt_solar-inversor-txt.inv3{
    top: 61.5%;
}
.top-block__txt_solar-inversor-txt.inv4{
    top: 67.5%;
}
.top-block__txt_solar-inversor-txt.inv5{
    top: 73.5%;
}

/* consumos */
.top-block__txt-power-consumption{
    left: 72%;
    top: 78.5%;
}

.top-block__consumption-txt{
    left: 64.45%;
    display: table;
    height: 8%;
    text-align: center;
    position: absolute;
    z-index: 3;
    width: 17.19%;
}
.top-block__consumption-txt-desc,
.top-block__consumption-txt-des{
    display: table-cell;
    vertical-align: middle;
    height: 15%;
    line-height: 1.1em;
}

/* descripcion */
.top-block__consumption-txt-desc{
    width: 70%;
    color:#333;
    font-size:1.250rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 0.625rem;
}

/* desglose */
.top-block__consumption-txt-des{
    width: 30%;
    color:#fff;
    font-size: 2.125rem;
    font-weight: bold;
}
.top-block__txt-power-consumption1{
    top:14%;
}
.top-block__txt-power-consumption2{
    top: 24.8%;
}
.top-block__txt-power-consumption3{
    top: 35.5%;
}
.top-block__txt-power-consumption4{
    top: 46.4%;
}
.top-block__txt-power-consumption5{
    top: 57%;
}
.top-block__txt-power-consumption6{
    top: 67.7%;
}
.top-block__txt-power-consumption7{
    top: 78.4%;
}
.top-block__txt-power-consumption8{
    top: 89.1%;
}

/* fecha */
.date-info{
    color:#fff;
    font-size: 1.875rem;
    position: absolute;
    text-align: center;
    top: 3.6%;
    right: 1.9%;
    width: 12.9%;
    line-height: 3.1rem;
    z-index: 3;
    border-radius: 20px;
    background-color: #4793ad;
}
.info-box{
    z-index: 3;
    position: absolute;
    top: 45%;
    left: 84.4%;
    width: 14.6%;
    height: 51%;
    text-align: center;
    padding-top:.7%;
    background-color: #e6f8fc;
    border-radius: 10px;
    overflow: hidden;
}
.info-box__total{
    font-size: 3.6rem;
    font-weight: bold;
    color:rgb(214,11,81);
    margin-bottom: 1%;
}
.info-box__total span{
    font-size: 2rem;
    color:#333;
    margin-left: 0.5rem;
    display: inline-block;
}
.info-box__placa{
    font-size: 2.3rem;
    font-weight: bold;
    color:rgb(214,11,81);
    margin-bottom: 1%;
    text-align: right;
    padding-right: 15%;
    height: 15%;
}
.info-box__placa span{
    font-size: 1.6rem;
    color:#333;
    margin-left: 0.4em;
    display: inline-block;
}
.info-box__red{
    font-size: 2.3rem;
    font-weight: bold;
    color:rgb(214,11,81);
    margin-bottom: 1%;
    text-align: right;
    padding-right: 15%;
    height: 15%;
}
.info-box__red span{
    font-size: 1.6rem;
    color:#333;
    margin-left: 0.4em;
    display: inline-block;
}
.info-box__tn{
    font-size: 2.3rem;
    font-weight: bold;
    color:rgb(214,11,81);
    margin-bottom: 1%;
    text-align: right;
    padding-right: 10%;
    height: 15%;
}
.info-box__tn span{
    font-size: 1.6rem;
    color:#333;
    margin-left: 0.4em;
    display: inline-block;
}
.info-box__trees{
    font-size: 2.3rem;
    font-weight: bold;
    color:rgb(214,11,81);
    margin-bottom: 0;
    text-align: right;
    padding-right: 15%;
    height: 15%;
}

/* ---- Par hoy/año en la misma línea ---- */
.info-box__par {
    display: flex;
    align-items: center;
    height: 15%;
}

/* Fila del total (sin icono) */
.info-box__par--total {
    height: 20%;
}

/* Iconos dentro del par: sacarlos del flujo absoluto */
.info-box__par .info-box_logo_placa,
.info-box__par .info-box_logo_bat,
.info-box__par .info-box_logo_red,
.info-box__par .info-box_logo_tn,
.info-box__par .info-box_logo_arboles {
    position: relative;
    width: 22%;
    height: 80%;
    margin: 0;
    margin-left: 4%;
    flex-shrink: 0;
    background-size: contain !important;
}

/* Torre de red: respeta su recorte original del SVG */
.info-box__par .info-box_logo_red {
    width: 27%;
    height: 80%;
    margin-left: -1%;
    align-self: center;
    background-size: 980% !important;
    background-position-x: 25% !important;
    background-position-y: 58% !important;
}

/* Fábrica y árboles */
.info-box__par .info-box_logo_tn,
.info-box__par .info-box_logo_arboles {
    width: 22%;
    height: 80%;
}

/* Valores dentro del par */
.info-box__par .info-box__total,
.info-box__par .info-box__placa,
.info-box__par .info-box__red,
.info-box__par .info-box__tn,
.info-box__par .info-box__trees {
    flex: 1;
    height: 100%;
    margin-bottom: 0;
    padding: 0 !important;
    font-size: 1.6rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-box__par .info-box__total {
    font-size: 2rem !important;
}

.info-box__par .info-box__total span,
.info-box__par .info-box__placa span,
.info-box__par .info-box__red span,
.info-box__par .info-box__tn span,
.info-box__par .info-box__trees span {
    font-size: 1rem !important;
    width: auto !important;
    margin-left: 0.2em;
}

/* Cabecera DIARIO / ANUAL */
.info-box__header {
    display: flex;
    justify-content: flex-end;
    gap: 0;
}
.info-box__header-label {
    flex: 1;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgb(160, 160, 160);
    text-transform: uppercase;
}

/* Valor anual en gris con separador */
.info-box__anual {
    color: rgb(130, 130, 130) !important;
    border-left: 1px solid rgba(0,0,0,0.1);
}

.info-box__par--total .info-box__anual {
    border-left: none;
}

.info-box__anual span {
    color: #aaa !important;
}

/* seccion inferior */
.bottom-block__txt{
    position: absolute;
    font-size: 1.750rem;
    right: 2.1%;
    z-index: 3;
    text-align: right;
    font-weight: bold;
    white-space: nowrap;
    color:rgb(214,11,81);
    width: 5.5%;
}
.bottom-block__txt span{
    font-size: 1.125rem;
    color:rgb(87,87,86);
    display: inline-block;
    width: 40%;
}
.bottom-block__txt-consumo{
    bottom:84.6%;
}
.bottom-block__txt-fv{
    bottom:64.6%;
}
.bottom-block__txt-grupo{
    bottom:45.2%;
}
.bottom-block__txt-c-bateria{
    bottom:26%;
}
.bottom-block__txt-des-bat{
    bottom:6.5%;
}
.curves-numbers{
    position: absolute;
    right: 94.5%;
    top: 7%;
    height: 86%;
    text-align: right;
    font-size: 1.063rem;
    font-weight: bold;
    z-index: 1;
}
.curves-numbers div{
    height: 11.5%;
}
.tituloSeccion {
    position: absolute;
    display: table-cell;
    line-height: 3.1rem;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 20px;
    font-weight: bold;
    color:#fff;
    font-size: 1.875rem;
    background-color: #4793ad;
    top: 3.5%;
}

.tituloSolar {
    left: 4.3%;
}
.tituloGeneracion {
    left: 35%;
    top: 16.5%;
}
.tituloConsumo {
    left: 70.8%;
}

/* Icono fabrica ER estilo del icono */
.fabricaPrincipal{
    top: 80%;
    left: 7%;
}
/* Icono fabrica ER FIN */
.fabricaForrajes{
    top: 46%;
    left: 1.5%;
    scale: 0.75rem;
    background-size: 75% !important;
}

/* Nombre E.R.INGENIERIA estilo del nombre*/
.nombreFabrica{
    position: absolute;
    font-size: 1.5rem;
    /* z-index: 3; */
    /* text-align: center; */
    font-weight: bold;
    /* white-space: nowrap; */
    /* color: rgb(214,11,81); */
    padding: 0.063rem 0.625rem;
    background: rgba(255,255,255,.8);
    border-radius: 0.25rem;
    min-width: 6.5%;
}
/* Nombre HBS estilo del nombre*/
.nombreFabrica.hbs{
    left: 46.5%;
    top: 22%;
    min-width: 3%;
    z-index: 10;
}
.nombreFabrica.principal{
    left: 57%;
    top: 86%;
}
/* Nombre E.R.INGENIERIA FIN*/

/* ═══════════════════════════════════════════════
   BASE FLECHAS
   ═══════════════════════════════════════════════ */
.flecha {
    position: absolute;
    z-index: 3;
    text-align: center;
    white-space: nowrap;
    padding: 0.063rem 0.625rem;
    font-size: 1.5rem;
    color: #919191;
}

/* ═══════════════════════════════════════════════
   FLECHA TEJADO
   ═══════════════════════════════════════════════ */
.flechaTejado {
    left: 43%;
    top: 37%;
    border-top: 0.75rem solid #919191;
    border-right: 0.75rem solid #919191;
    width: 7.3%;
    height: 14%;
}
.flechaTejado .simbolo {
    position: absolute;
    bottom: -4%;
    right: -1.7rem;
    border-style: solid;
    border-width: 1.5rem;
    border-bottom-width: 0px;
    border-color: #919191 transparent transparent transparent;
}
.flecha.flechaTejado[infofv_status_tejado="2"] {
    border-color: greenyellow;
    color: greenyellow;
}
.flecha.flechaTejado[infofv_status_tejado="2"] .simbolo {
    border-color: greenyellow transparent transparent transparent;
}

/* ═══════════════════════════════════════════════
   GRUPO FLECHAS (parking/red junction)
   ═══════════════════════════════════════════════ */
.grupoFlechas {
    position: absolute;
    width: 15%;
    height: 21%;
    top: 72%;
    left: 42.7%;
}
.grupoFlechas .flecha {
    display: inline-block;
    position: initial;
    float: left;
    padding: 0px;
    margin: 0px;
    width: 40%;
}
.grupoFlechas .flecha.izq { width: 55%; }
.grupoFlechas .flecha.der { width: 40%; }

/* flechaParkingSub */
.grupoFlechas .flecha.flechaParkingSub {
    height: 30%;
    border-right: 0.75rem solid #919191;
    float: left;
    visibility: hidden;
}
.grupoFlechas .flecha.flechaParkingSub .simbolo {
    float: right;
    margin-top: -7%;
    margin-right: -14%;
    border-style: solid;
    border-width: 1.5rem;
    border-top-width: 0px;
    border-color: transparent transparent #919191 transparent;
}
.grupoFlechas .flecha.flechaParkingSub[infofv_status_parking_red_sub="1"] {
    visibility: visible;
    border-color: greenyellow;
}
.grupoFlechas .flecha.flechaParkingSub[infofv_status_parking_red_sub="1"] .simbolo {
    border-color: transparent transparent greenyellow transparent;
    margin-right: -12%;
}
.grupoFlechas .flecha.flechaParkingSub[infofv_status_parking_red_sub="2"] {
    visibility: visible;
    border-image: linear-gradient(to top, greenyellow, orange) 1;
}
.grupoFlechas .flecha.flechaParkingSub[infofv_status_parking_red_sub="2"] .simbolo {
    border-color: transparent transparent orange transparent;
}

/* flechaRedSub */
.grupoFlechas .flecha.flechaRedSub {
    height: 30%;
    border-left: 0.75rem solid #919191;
    float: left;
    width: 40%;
    visibility: hidden;
}
.grupoFlechas .flecha.flechaRedSub .simbolo {
    float: left;
    margin-top: -8%;
    margin-left: -15%;
    border-style: solid;
    border-width: 1.5rem;
    border-top-width: 0px;
    border-color: transparent transparent red transparent;
    visibility: hidden;
}
.grupoFlechas .flecha.flechaRedSub[infofv_status_consumo_red_sub="1"] {
    visibility: visible;
    border-color: red;
}
.grupoFlechas .flecha.flechaRedSub[infofv_status_consumo_red_sub="1"] .simbolo { visibility: visible; }
.grupoFlechas .flecha.flechaRedSub[infofv_status_consumo_red_sub="2"] {
    visibility: visible;
    border-image: linear-gradient(to top, red, orange) 1;
}

/* flechaParking */
.grupoFlechas .flecha.flechaParking {
    float: left;
    width: 57.2%;
    border-bottom: 0.75rem solid greenyellow;
    visibility: hidden;
}
.grupoFlechas .flecha.flechaParking[infofv_status_parking_red="1"] { visibility: visible; }

/* flechaRed */
.grupoFlechas .flecha.flechaRed {
    float: left;
    width: 42%;
    border-top: 0.75rem solid red;
    visibility: hidden;
}
.grupoFlechas .flecha.flechaRed .simbolo {
    float: right;
    position: absolute;
    margin-top: -6.3%;
    margin-left: 40%;
    border-style: solid;
    border-width: 1.5rem;
    border-right-width: 0px;
    border-color: transparent transparent transparent greenyellow;
    visibility: hidden;
}
.grupoFlechas .flecha.flechaRed[infofv_status_consumo_red="1"] { visibility: visible; }
.grupoFlechas .flecha.flechaRed[infofv_status_consumo_red="2"] {
    border-top: 0.75rem solid greenyellow;
    visibility: visible;
}
.grupoFlechas .flecha.flechaRed[infofv_status_consumo_red="2"] .simbolo { visibility: visible; }

/* flechaParkingCargadores */
.grupoFlechas .flecha.flechaParkingCargadores {
    width: 57.2%;
    border-top: 0.75rem solid greenyellow;
    padding: 0px;
    visibility: hidden;
}
.grupoFlechas .flecha.flechaParkingCargadores[infofv_status_parking_cargadores="1"] { visibility: visible; }

/* flechaRedCargadores */
.grupoFlechas .flecha.flechaRedCargadores {
    border-top: 0.75rem solid red;
    width: 42%;
    padding: 0px;
    visibility: hidden;
}
.grupoFlechas .flecha.flechaRedCargadores[infofv_status_red_cargadores="1"] { visibility: visible; }

/* flechaParkingBaj */
.grupoFlechas .flecha.flechaParkingBaj {
    height: 25%;
    border-right: 0.75rem solid #919191;
    float: left;
    visibility: hidden;
}
.grupoFlechas .flecha.flechaParkingBaj .simbolo {
    float: right;
    margin-top: 21%;
    margin-right: -14%;
    border-style: solid;
    border-width: 1.5rem;
    border-bottom-width: 0px;
    border-color: #919191 transparent transparent transparent;
}
.grupoFlechas .flecha.flechaParkingBaj[infofv_status_parking_cargadores_baj="1"] {
    visibility: visible;
    border-color: greenyellow;
}
.grupoFlechas .flecha.flechaParkingBaj[infofv_status_parking_cargadores_baj="1"] .simbolo {
    border-color: greenyellow transparent transparent transparent;
    margin-right: -12%;
}
.grupoFlechas .flecha.flechaParkingBaj[infofv_status_parking_cargadores_baj="2"] {
    visibility: visible;
    border-image: linear-gradient(to bottom, greenyellow, orange) 1;
}
.grupoFlechas .flecha.flechaParkingBaj[infofv_status_parking_cargadores_baj="2"] .simbolo {
    border-color: orange transparent transparent transparent;
}

/* flechaRedBaj */
.grupoFlechas .flecha.flechaRedBaj {
    height: 25%;
    border-left: 0.75rem solid #919191;
    float: left;
    visibility: hidden;
}
.grupoFlechas .flecha.flechaRedBaj .simbolo {
    float: left;
    margin-top: 28%;
    margin-left: -15%;
    border-style: solid;
    border-width: 1.5rem;
    border-bottom-width: 0px;
    border-color: red transparent transparent transparent;
    visibility: hidden;
}
.grupoFlechas .flecha.flechaRedBaj[infofv_status_consumo_cargadores_baj="1"] {
    visibility: visible;
    border-color: red;
}
.grupoFlechas .flecha.flechaRedBaj[infofv_status_consumo_cargadores_baj="1"] .simbolo { visibility: visible; }
.grupoFlechas .flecha.flechaRedBaj[infofv_status_consumo_cargadores_baj="2"] {
    visibility: visible;
    border-image: linear-gradient(to bottom, red, orange) 1;
}

/* ═══════════════════════════════════════════════
   FLECHA HBS ↔ BAT (forma de L)
   ═══════════════════════════════════════════════ */
.flechaHBSBAT {
    left: 56.25%;
    top: 32%;
    width: 6%;
    height: 10%;
    border-right: 0.75rem solid #1179a0;
    float: left;
    visibility: hidden;
}
.flechaHBSBAT::before {
    content: '';
    position: absolute;
    top: 0;
    left: -45%;
    right: 0;
    border-top: 0.75rem solid #1179a0;
}
.flechaHBSBAT:not([hbsv_batery_p^="0"]) { visibility: visible; }

/* Símbolos */
.flechaHBSBAT .simbolo {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1.5rem;
    display: none;
}
.flechaHBSBAT .simbolo.carga {
    bottom: 72.5%;
    left: -54%;
    border-left-width: 0px;
    border-color: transparent #1179a0 transparent transparent;
}
.flechaHBSBAT .simbolo.descarga {
    top: -1.15rem;
    left: -54%;
    border-left-width: 0px;
    border-color: transparent #1179a0 transparent transparent;
}
.flechaHBSBAT .simbolo.punta-abajo {
    right: -1.80rem;
    bottom: -1.5rem;
    border-bottom-width: 0px;
    border-color: #1179a0 transparent transparent transparent;
}

/* Estado: descargando (charging=false) */
.flecha.flechaHBSBAT[hbsv_bat_charging="false"]:not([hbsv_batery_p^="0"]) .simbolo.descarga[hbsv_batery_p]:not([hbsv_batery_p^="0"]) {
    display: block;
}
.flecha.flechaHBSBAT[hbsv_bat_charging="false"]:not([hbsv_batery_p^="0"])::after {
    content: '';
    position: absolute;
    right: -0.75rem;
    bottom: -1.5rem;
    height: 1.5rem;
    border-right: 0.75rem solid #1179a0;
}

/* Estado: cargando (charging=true) */
.flecha.flechaHBSBAT[hbsv_bat_charging="true"]:not([hbsv_batery_p^="0"]) .simbolo.punta-abajo {
    display: block;
}
.flecha.flechaHBSBAT[hbsv_bat_charging="true"]:not([hbsv_batery_p^="0"])::before {
    left: calc(-45% - 1.5rem);
}

/* ═══════════════════════════════════════════════
   FLECHA RED → HBS (horizontal)
   ═══════════════════════════════════════════════ */
.flechaRedHBS {
    position: absolute;
    right: 55%;
    top: 32%;
    width: 11%;
    border-top: 0.75rem solid red;
    visibility: visible; /* TEMPORAL estado 2 */
}
.flechaRedHBS .simbolo {
    position: absolute;
    border-style: solid;
    border-width: 1.5rem;
    border-right-width: 0px;
    border-left-width: 1rem;
    border-color: transparent transparent transparent red;
    right: -5%;
    left: auto;
    top: -1.8rem;
    visibility: visible; /* TEMPORAL estado 2 */
}
.flechaRedHBS[infofv_status_red_cargadores="-"] {
    visibility: visible;
    border-color: greenyellow;
}
.flechaRedHBS[infofv_status_red_cargadores="-"] .simbolo {
    visibility: visible;
    border-right-width: 1rem;
    border-left-width: 0px;
    border-color: transparent greenyellow transparent transparent;
    left: -5%;
    right: auto;
}
.flechaRedHBS[infofv_status_red_cargadores="2"] {
    visibility: visible;
    border-color: red;
}
.flechaRedHBS[infofv_status_red_cargadores="2"] .simbolo {
    visibility: visible;
    border-right-width: 0px;
    border-left-width: 1rem;
    border-color: transparent transparent transparent red;
    right: -5%;
    left: auto;
}

/* ═══════════════════════════════════════════════
   FLECHA HBS ↓ JUNCTION (vertical)
   ═══════════════════════════════════════════════ */
.flechaHBSBaj {
    position: absolute;
    left: 48.25%;
    top: 38%;
    height: 44%;
    border-left: 0.75rem solid greenyellow;
    visibility: visible;
    padding: 0;
}
/* Símbolo punta arriba — por defecto oculto */
.flechaHBSBaj .simbolo {
    position: absolute;
    border-style: solid;
    border-width: 1.5rem;
    border-top-width: 0px;
    border-color: transparent transparent greenyellow transparent;
    top: -1.5rem;
    left: -1.875rem;
    display: none;
}
/* Símbolo punta abajo — por defecto oculto */
.flechaHBSBaj::after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 1.5rem;
    border-bottom-width: 0px;
    border-color: greenyellow transparent transparent transparent;
    bottom: -1.5rem;
    left: -1.875rem;
    display: none;
}
/* Caso status=1: mitad superior + punta arriba */
.flechaHBSBaj[infofv_status_parking_cargadores="1"] {
    top: 45%;
    height: 20%;
}
.flechaHBSBaj[infofv_status_parking_cargadores="1"] .simbolo { display: block; }
/* Caso = 0: mitad inferior, símbolo arriba oculto */
.flechaHBSBaj[hbsv_out_kw="0"],
.flechaHBSBaj[infofv_status_parking_cargadores="0"] {
    top: 63%;
    height: 22%;
}
.flechaHBSBaj[hbsv_out_kw="0"] .simbolo,
.flechaHBSBaj[infofv_status_parking_cargadores="0"] .simbolo {
    display: none;
}
.flechaHBSBaj[hbsv_out_kw="0"]::after,
.flechaHBSBaj[infofv_status_parking_cargadores="0"]::after {
    display: block;
}
/* Caso < 0: línea completa + punta arriba + punta abajo */
.flechaHBSBaj[hbsv_out_kw^="-"] {
    top: 45%;
    height: 40%;
}
.flechaHBSBaj[hbsv_out_kw^="-"] .simbolo,
.flechaHBSBaj[hbsv_out_kw^="-"]::after { display: block; }
/* Caso > 0: línea extendida, símbolo oculto */
.flechaHBSBaj[hbsv_out_kw]:not([hbsv_out_kw="0"]):not([hbsv_out_kw^="-"]) {
    top: calc(45% - 1.5rem);
    height: calc(40% + 1.5rem);
}
.flechaHBSBaj[hbsv_out_kw]:not([hbsv_out_kw="0"]):not([hbsv_out_kw^="-"]) .simbolo { display: none; }
.flechaHBSBaj[hbsv_out_kw]:not([hbsv_out_kw="0"]):not([hbsv_out_kw^="-"])::after { display: block; }

/* ═══════════════════════════════════════════════
   FLECHA PLACAS → HBS (horizontal)
   ═══════════════════════════════════════════════ */
.flechaPlacasHBS {
    position: absolute;
    left: 34.25%;
    top: 63%;
    width: 13%;
    border-top: 0.75rem solid greenyellow;
    visibility: visible; /* TEMPORAL */
}
.flechaPlacasHBS .simbolo {
    position: absolute;
    border-style: solid;
    border-width: 1.5rem;
    border-right-width: 0px;
    border-color: transparent transparent transparent greenyellow;
    right: -1.5%;
    top: -1.8rem;
    visibility: visible; /* TEMPORAL */
}
.flechaPlacasHBS[infofv_status_parking_cargadores="1"] {
    visibility: visible;
    border-color: greenyellow;
}
.flechaPlacasHBS[infofv_status_parking_cargadores="1"] .simbolo {
    visibility: visible;
    border-color: transparent transparent transparent greenyellow;
}

.battery_icon {
    position: relative;
    background: url(../../../img/inicio/battery.png) no-repeat;
    background-size: 100%;
    width: 4%;
    height: 11%;
    top: 36%;
    left: 25%;
        
}
.battery_icon[v_rem_batery_cap^="8"] ,
.battery_icon[v_rem_batery_cap^="9"] ,
.battery_icon[v_rem_batery_cap^="100"] {
    background: url(../../../img/inicio/batteryVerde.png) no-repeat;
    background-size: 100%;
}
.battery_icon[v_rem_batery_cap^="4"] ,
.battery_icon[v_rem_batery_cap^="5"] ,
.battery_icon[v_rem_batery_cap^="6"] ,
.battery_icon[v_rem_batery_cap^="7"] {
    background: url(../../../img/inicio/batteryNaranja.png) no-repeat;
    background-size: 100%;
}

.flechaHBSER {
    left: 54%;
    top: 58%;
    width: 2%;
    height: 19%;
    border-top: 0.75rem solid greenyellow;
    float: left;
}

.flechaHBSER .simbolo {
    position: absolute;
    border-style: solid;
    border-width: 1.5rem;
    bottom: 90.5%;
    right: -15%;
    margin-left: 14%;
    border-right-width: 0px;
    border-color: transparent transparent  transparent greenyellow;
}

/* Icono HBS imagen*/
.imagenhbs {
    position: relative;
    background: url(../../../img/inicio/hbs.png) no-repeat;
    background-size: 100%;
    width: 3%;
    height: 17%;
    top: 25%;
    left: 47%;
}

.leyendaConsumo {
    width: 10%;
    height: 10%;
    top: 18%;
    left: 71%;
    position: absolute;
}
.leyendaConsumo .leyendaFV {
    position: relative;
    width: 45%;
    float: left;
    height: 100%;
    border-bottom: 0.5rem solid greenyellow;
}
.leyendaConsumo .leyendaRed {
    position: relative;
    width: 45%;
    float: right;
    height: 100%;
    border-bottom: 0.5rem solid red;
}