/* =================================================
   RESET BÁSICO
   ================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =================================================
   FONDO GENERAL
   ================================================= */
#body_carga {
    height: 100vh;
    background: radial-gradient(
        ellipse at bottom,
        #0d1d31 0%,
        #0c0d13 100%
    );
    overflow: hidden;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* =================================================
   OVERLAY DE CARGA
   ================================================= */
.loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 30, 0.9);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* =================================================
   CONTENEDOR CENTRAL
   ================================================= */
.loader-box {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}

/* =================================================
   TEXTO DE CARGA (SUAVE)
   ================================================= */
.carga_texto {
    font-size: 15px;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.75);
    animation: fade 1.6s ease-in-out infinite;
}

/* Animación sutil del texto */
@keyframes fade {
    0%, 100% { opacity: .4; }
    50% { opacity: .9; }
}

/* =================================================
   LOADER PRINCIPAL
   ================================================= */
.loader {
    width: 88px;
    aspect-ratio: 1.154;
    background: conic-gradient(
        from 120deg at 50% 64%,
        transparent,
        #2ea8ff 1deg 120deg,
        transparent 121deg
    );
    animation: spin 1.4s infinite cubic-bezier(0.3,1,0,1);
}

/* Partes del loader */
.loader::before,
.loader::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    transform-origin: 50% 66%;
    animation: bounce 1.4s infinite;
}

.loader::after {
    --s: -1;
}

/* Animaciones del loader */
@keyframes spin {
    0%, 30% { transform: rotate(0); }
    70% { transform: rotate(120deg); }
    100% { transform: rotate(360deg); }
}

@keyframes bounce {
    0% {
        transform: rotate(calc(var(--s,1)*120deg)) translate(0);
    }
    30%, 70% {
        transform: rotate(calc(var(--s,1)*120deg)) translate(calc(var(--s,1)*-5px), 10px);
    }
    100% {
        transform: rotate(calc(var(--s,1)*120deg)) translate(0);
    }
}

/* =================================================
   FONDO DE ESTRELLAS
   ================================================= */
.stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* =================================================
   ESTRELLAS DIAGONALES
   Dirección: ↘↙
   Ángulo visual: 225°
   ================================================= */
.star {
    position: absolute;
    width: 1.5px;
    height: 70px;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,.8),
        rgba(120,180,255,.5),
        transparent
    );

    border-radius: 2px;
    opacity: .35;

    transform: rotate(225deg);
    animation: star-fall 14s linear infinite;
}

/* Posiciones iniciales (fuera de pantalla) */
.star:nth-child(1) { top: -10%; left: 120%; animation-delay: 0s; }
.star:nth-child(2) { top: -30%; left: 110%; animation-delay: 3s; }
.star:nth-child(3) { top: -60%; left: 130%; animation-delay: 6s; }
.star:nth-child(4) { top: -20%; left: 140%; animation-delay: 1.5s; }
.star:nth-child(5) { top: -50%; left: 115%; animation-delay: 4.5s; }
.star:nth-child(6) { top: -75%; left: 125%; animation-delay: 2.5s; }

/* Animación diagonal */
@keyframes star-fall {
    from {
        transform: translate(0, 0) rotate(225deg);
        opacity: .4;
    }
    to {
        transform: translate(-160vw, 160vh) rotate(225deg);
        opacity: 0;
    }
}