html, body {
    margin: 0;
    padding: 0;
    font-size: 1rem; /* Equivale al tamaño de fuente base */
}

.dashboard2 {
    background: linear-gradient(rgba(0, 8, 34, 0.97), rgba(24, 38, 99, 0.8));
    display: flex;
    background-size: cover; /* Para cubrir todo el contenedor */
    background-position: center; /* Centrar la imagen */
    min-height: 100vh; /* Altura mínima del contenedor */
    background-attachment: fixed; /* Mantener la imagen fija al hacer scroll */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* Podrías eliminar height si ya tienes min-height */
    color: rgba(255, 255, 255, 0.9);
    position: relative; /* Para el escalado */
}


.top{
    display:flex;
    align-items: center;
    justify-content: flex-start;
    gap: 420px;
    padding: 0 20px 0 10px;
    height: 50px;
    color: rgba(255, 255, 255, 0.9);

}

.dash1{
    display:flex;
}

.Lugar{
    background: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    width: 1400px;
    height: 25px;
    display:flex;
    justify-content: flex-start;
    gap: 0px;
    padding: 10px ;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    border-radius: 5px 5px 0px 0px;
    border-top: 2px solid rgba(178, 199, 255, 0.445);
    border-left: 2px solid rgba(178, 199, 255, 0.445);
    border-right: 2px solid rgba(178, 199, 255, 0.445);
    display:flex;
    flex-wrap: wrap;

}

.sec1a{
    background-color: rgba(0, 0, 0, 0.3);
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 85px;
    width: 1138px;
    height: 300px;
    border-bottom: 2px solid rgba(178, 199, 255, 0.445);
    border-left: 2px solid rgba(178, 199, 255, 0.445);
    padding: 5px 0 0 0;
    ax-width: 100%;
}

.sec1b{
    background-color: rgba(0, 0, 0, 0.3);
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 45px;
    width: 1138px;
    height: 300px;
    border-bottom: 2px solid rgba(178, 199, 255, 0.445);
    border-left: 2px solid rgba(178, 199, 255, 0.445);
    padding: 5px 0 0 0;
    ax-width: 100%;
}

.Fecha{
    font-size:20.5px;
    padding-top: 6px;
    padding-left: 215px;
}
.hora{
    padding-top: 7px;
    font-size: 19.8px;
    padding-left: 45px;
}


.Hora{
    line-height: 2.8;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    padding: 5px 30px 0 16px;
    font-size: 16px;
}
.time{
    font-size: 16.5px;
}

.city-time{
    display: flex;
    justify-content: space-between;
}

.variables{
    display: flex;
    width: 262px;
    height: 110px;
    padding: 20px 10px 10px 15px;
}

.nombre{
    font-size: 20px;
    padding-left: 10px;
    font-weight: 600;
}


.tvalor{
    width: 200px;
    height: 70px;
    margin: 0;
    font-size: 60px;
    padding-left: 10px ;
}
.tminmax{
    width:230px;
    display:flex;
    padding: 3px 0 0 10px;
    gap: 34px;
}

.vvalor{
    width: 120px;
    height: 50px;
    margin-top: 0;
    font-size: 27px;
    padding: 2px 0 0 14px ;
}

.valor{
    width: 120px;
    height: 50px;
    margin-top: 0;
    font-size: 30px;
    padding: 9px 0 0 12px ;
}

.valorp{
    width: 120px;
    height: 50px;
    margin-top: 0;
    font-size: 27px;
    padding: 9px 0 0 12px ;
}


.minmax{

    width: 100px;
    height: 50px;
    padding: 5px 0 0 8px;
    font-size: 15px;
    line-height: 1.3;
}


.valores{
    display: flex;
}

.sec2{
    background-color: rgba(0, 0, 0, 0.3);
    width: 280px;
    height: 300px;
    border-left: 2px solid rgba(178, 199, 255, 0.445);
    border-bottom: 2px solid rgba(178, 199, 255, 0.445); /* Borde inferior */
    border-right: 2px solid rgba(178, 199, 255, 0.445);   /* Borde izquierdo */
    padding: 5px 0 0 0;
}

.variables2{
    display: flex;
    width: 277px;
    height: 80px;
    padding: 12px 0 0 10px;
}

.variables3{
    display: flex;
    width: 300px;
    height: 85px;
    padding-left: 10px;
    margin-top: 40px;
}

.Foto, .Rdt, .viento{
    font-size: 20px;
    padding-left: 5px;
    margin: 8px;
}


#my-graph-3{
    width: 250px;
    height: 300px;
}

.g-0{
    display:flex;
}

@media (max-width: 5000px) {
    .dashboard2 {
        transform: scale(calc(100vw / 5000)); /* Escala en base al ancho de la ventana */
        transform-origin: top left; /* Mantiene el origen de transformación en la esquina superior izquierda */
    }
}