.circuit-system {
    position: absolute;
    width: min(760px, 52vw);
    height: min(760px, 52vw);
    left: 5vw;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: .82;
}

.circuit-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.circuit-center-text {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
    text-align: center;
    color: rgba(127, 160, 231, 0.92);
    letter-spacing: .4px;
    text-shadow: 0 0 18px rgba(91, 178, 255, .35);
}

/* CAJA CENTRAL DEL LOADER */
.circuit-center-text {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 24px 32px;
    min-width: 250px;
    border-radius: 24px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}



/* PUNTOS DE CARGA */
.loading-dots {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11px;
}

.loading-dots span {
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #35a8ff;
    box-shadow:
        0 0 10px rgba(53, 168, 255, .9),
        0 0 22px rgba(53, 168, 255, .45);
    opacity: .25;
    transform: scale(.75);
    animation: dotLoading 1.25s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
    background: #4eea58;
    box-shadow:
        0 0 10px rgba(78, 234, 88, .9),
        0 0 22px rgba(78, 234, 88, .45);
    animation-delay: .18s;
}

.loading-dots span:nth-child(3) {
    background: #ffd84d;
    box-shadow:
        0 0 10px rgba(255, 216, 77, .95),
        0 0 22px rgba(255, 216, 77, .45);
    animation-delay: .36s;
}

/* ANIMACIONES */
@keyframes textScan {
    0% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 4px rgba(53, 168, 255, .25));
    }

    50% {
        filter:
            drop-shadow(0 0 10px rgba(53, 168, 255, .65)) drop-shadow(0 0 18px rgba(78, 234, 88, .30));
    }

    100% {
        background-position: 100% 50%;
        filter: drop-shadow(0 0 6px rgba(255, 216, 77, .45));
    }
}

@keyframes dotLoading {

    0%,
    80%,
    100% {
        opacity: .25;
        transform: scale(.75);
    }

    40% {
        opacity: 1;
        transform: scale(1.35);
    }
}

.loading-text {
    display: block;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;

    background: linear-gradient(90deg,
            rgba(245, 0, 0, 0.89),
            #50f3bd,
            #35a8ff,
            #4eea58,
            #ffd84d,
            #f10000,
            rgba(255, 255, 255, .55));

    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    animation: textScan 3s ease-in-out infinite alternate;
}

.circuit-base path {
    fill: none;
    stroke: rgba(130, 195, 255, .13);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.circuit-base path:nth-child(3n) {
    stroke: rgba(67, 169, 54, .13);
}

.circuit-base path:nth-child(4n) {
    stroke: rgba(255, 216, 77, .13);
}

.circuit-base path:nth-child(5n) {
    stroke: rgba(216, 85, 73, .12);
}

.circuit-draw path {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 620;
    stroke-dashoffset: 620;
    filter: url(#circuitGlow);
    animation: drawCircuit 7.2s ease-in-out infinite;
}

/* colores no uniformes */
.circuit-draw path:nth-child(1),
.circuit-draw path:nth-child(7),
.circuit-draw path:nth-child(12),
.circuit-draw path:nth-child(18) {
    stroke: #35a8ff;
}

.circuit-draw path:nth-child(2),
.circuit-draw path:nth-child(9),
.circuit-draw path:nth-child(15),
.circuit-draw path:nth-child(21) {
    stroke: #4eea58;
}

.circuit-draw path:nth-child(3),
.circuit-draw path:nth-child(10),
.circuit-draw path:nth-child(14),
.circuit-draw path:nth-child(19) {
    stroke: #ffd84d;
}

.circuit-draw path:nth-child(4),
.circuit-draw path:nth-child(8),
.circuit-draw path:nth-child(13),
.circuit-draw path:nth-child(17) {
    stroke: #ff5b4a;
}

.circuit-draw path:nth-child(5),
.circuit-draw path:nth-child(6),
.circuit-draw path:nth-child(11),
.circuit-draw path:nth-child(16),
.circuit-draw path:nth-child(20) {
    stroke: #6bc6ff;
}

.circuit-draw path:nth-child(2) {
    animation-delay: .15s;
}

.circuit-draw path:nth-child(3) {
    animation-delay: .32s;
}

.circuit-draw path:nth-child(4) {
    animation-delay: .52s;
}

.circuit-draw path:nth-child(5) {
    animation-delay: .74s;
}

.circuit-draw path:nth-child(6) {
    animation-delay: .9s;
}

.circuit-draw path:nth-child(7) {
    animation-delay: 1.05s;
}

.circuit-draw path:nth-child(8) {
    animation-delay: 1.25s;
}

.circuit-draw path:nth-child(9) {
    animation-delay: 1.42s;
}

.circuit-draw path:nth-child(10) {
    animation-delay: 1.6s;
}

.circuit-draw path:nth-child(11) {
    animation-delay: 1.78s;
}

.circuit-draw path:nth-child(12) {
    animation-delay: 1.95s;
}

.circuit-draw path:nth-child(13) {
    animation-delay: 2.12s;
}

.circuit-draw path:nth-child(14) {
    animation-delay: 2.28s;
}

.circuit-draw path:nth-child(15) {
    animation-delay: 2.44s;
}

.circuit-draw path:nth-child(16) {
    animation-delay: 2.6s;
}

.circuit-draw path:nth-child(17) {
    animation-delay: 2.76s;
}

.circuit-draw path:nth-child(18) {
    animation-delay: 2.92s;
}

.circuit-draw path:nth-child(19) {
    animation-delay: 3.08s;
}

.circuit-draw path:nth-child(20) {
    animation-delay: 3.24s;
}

.circuit-draw path:nth-child(21) {
    animation-delay: 3.4s;
}

.circuit-dots circle {
    fill: #35a8ff;
    stroke: rgba(255, 255, 255, .75);
    stroke-width: 2;
    filter: url(#circuitGlow);
    opacity: .25;
    transform-origin: center;
    animation: dotSpark 7.2s ease-in-out infinite;
}

.circuit-dots circle:nth-child(2n) {
    fill: #4eea58;
}

.circuit-dots circle:nth-child(3n) {
    fill: #ffd84d;
}

.circuit-dots circle:nth-child(5n) {
    fill: #ff5b4a;
}

.circuit-dots circle:nth-child(1) {
    animation-delay: .15s;
}

.circuit-dots circle:nth-child(2) {
    animation-delay: .45s;
}

.circuit-dots circle:nth-child(3) {
    animation-delay: .75s;
}

.circuit-dots circle:nth-child(4) {
    animation-delay: 1.05s;
}

.circuit-dots circle:nth-child(5) {
    animation-delay: 1.35s;
}

.circuit-dots circle:nth-child(6) {
    animation-delay: 1.65s;
}

.circuit-dots circle:nth-child(7) {
    animation-delay: 1.95s;
}

.circuit-dots circle:nth-child(8) {
    animation-delay: 2.25s;
}

.circuit-dots circle:nth-child(9) {
    animation-delay: 2.55s;
}

.circuit-dots circle:nth-child(10) {
    animation-delay: 2.85s;
}

.circuit-dots circle:nth-child(11) {
    animation-delay: 3.15s;
}

.circuit-dots circle:nth-child(12) {
    animation-delay: 3.45s;
}

.circuit-dots circle:nth-child(13) {
    animation-delay: 3.75s;
}

.circuit-dots circle:nth-child(14) {
    animation-delay: 4.05s;
}

.circuit-dots circle:nth-child(15) {
    animation-delay: 4.35s;
}

.circuit-dots circle:nth-child(16) {
    animation-delay: 4.65s;
}

@keyframes drawCircuit {
    0% {
        stroke-dashoffset: 620;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    55% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    78% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -620;
        opacity: 0;
    }
}

@keyframes dotSpark {

    0%,
    18% {
        opacity: .22;
        r: 6;
    }

    36% {
        opacity: 1;
        r: 10;
    }

    44% {
        opacity: .65;
        r: 7;
    }

    72% {
        opacity: .95;
    }

    100% {
        opacity: .22;
        r: 6;
    }
}

.circuit-particles {
    position: absolute;
    inset: -35px;
    z-index: 1;
    pointer-events: none;
}

.circuit-particles .p {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgb(0, 136, 255);
    box-shadow:
        0 0 8px rgba(91, 178, 255, .9),
        0 0 18px rgba(91, 178, 255, .35);
    animation: particleFloat 6s ease-in-out infinite;
}

.circuit-particles .p:nth-child(2n) {
    background: rgba(67, 169, 54, .9);
    box-shadow:
        0 0 8px rgba(67, 169, 54, .9),
        0 0 18px rgba(67, 169, 54, .35);
}

.circuit-particles .p:nth-child(3n) {
    background: rgba(255, 216, 77, .95);
    box-shadow:
        0 0 8px rgba(255, 216, 77, .95),
        0 0 18px rgba(255, 216, 77, .35);
}

.circuit-particles .p:nth-child(5n) {
    background: rgb(247, 59, 38);
    box-shadow:
        0 0 8px rgb(255, 39, 15),
        0 0 18px rgba(255, 91, 74, .35);
}

.circuit-particles .p1 {
    left: 50%;
    top: 0%;
    animation-delay: 0s;
}

.circuit-particles .p2 {
    right: 11%;
    top: 16%;
    animation-delay: .7s;
}

.circuit-particles .p3 {
    right: 0%;
    top: 51%;
    animation-delay: 1.4s;
}

.circuit-particles .p4 {
    right: 17%;
    bottom: 9%;
    animation-delay: 2.1s;
}

.circuit-particles .p5 {
    left: 45%;
    bottom: 0%;
    animation-delay: 2.8s;
}

.circuit-particles .p6 {
    left: 8%;
    bottom: 20%;
    animation-delay: 3.5s;
}

.circuit-particles .p7 {
    left: 0%;
    top: 46%;
    animation-delay: 4.2s;
}

.circuit-particles .p8 {
    left: 15%;
    top: 12%;
    animation-delay: 4.9s;
}

@keyframes particleFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(.8);
        opacity: .25;
    }

    45% {
        transform: translate3d(10px, -16px, 0) scale(1.25);
        opacity: .95;
    }

    70% {
        opacity: .55;
    }
}

.loader-gestor-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(6, 26, 51, .88);
    display: none;
    align-items: center;
    justify-content: center;
}

.loader-gestor-overlay.is-active {
    display: flex;
}

.loader-gestor-overlay .circuit-system {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;

    margin: 0 auto;

    width: min(620px, 88vw);
    height: min(620px, 88vw);

    display: flex;
    align-items: center;
    justify-content: center;
}