/* =========================================================
   SISTEMA SOLAR · ESTILOS GENERALES
   ========================================================= */

* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;

    padding: 0;

    width: 100%;

    min-height: 100%;

}


body {

    background: #F1F5F9;

    font-family:
        Inter,
        "Segoe UI",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    color: #172033;

}



/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */

#solar-dash-root {

    width: 100%;

    max-width: 1920px;

    margin: 0 auto;

    position: relative;

}



/* =========================================================
   SVG PRINCIPAL
   ========================================================= */

#solar-svg {

    width: 100%;

    height: auto;

    display: block;

}



/* =========================================================
   ANIMACIÓN DE FLUJOS
   ========================================================= */

.flow {

    fill: none;

    stroke-width: 5;

    stroke-linecap: round;

    stroke-dasharray: 2 16;

    opacity: 0;

    transition:
        opacity 0.6s ease;

}



/* =========================================================
   FLUJO ACTIVO
   ========================================================= */

.flow.active {

    opacity: 0.95;

}



/* =========================================================
   COLORES DE LOS FLUJOS
   ========================================================= */

.flow-pv {

    stroke: #F5A623;

}


.flow-ac {

    stroke: #E5E9F0;

}


.flow-batt {

    stroke: #10B981;

}


.flow-grid {

    stroke: #2563EB;

}


.flow-load {

    stroke: #DC3D3D;

}



/* =========================================================
   ANIMACIÓN HACIA ADELANTE
   ========================================================= */

@keyframes flowForward {

    to {

        stroke-dashoffset: -180;

    }

}



/* =========================================================
   ANIMACIÓN HACIA ATRÁS
   ========================================================= */

@keyframes flowReverse {

    to {

        stroke-dashoffset: 180;

    }

}



/* =========================================================
   DIRECCIÓN NORMAL
   ========================================================= */

.flow.dir-fwd {

    animation-name: flowForward;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

}



/* =========================================================
   DIRECCIÓN INVERSA
   ========================================================= */

.flow.dir-rev {

    animation-name: flowReverse;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

}



/* =========================================================
   TABLETS
   ========================================================= */

@media (max-width: 900px) {

    #solar-svg {

        width: 100%;

        height: auto;

    }

}



/* =========================================================
   CELULARES
   ========================================================= */

@media (max-width: 600px) {

    #solar-svg {

        width: 100%;

        height: auto;

    }

}



/* =========================================================
   CELULARES PEQUEÑOS
   ========================================================= */

@media (max-width: 380px) {

    #solar-svg {

        width: 100%;

        height: auto;

    }

}