/* =========================
   LOADING OVERLAY — TELA DE GERAÇÃO DO PRESENTE
========================= */

.loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #050d1a;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 32px;
}

.loading-overlay.loading-ativo {
    display: flex;
}

/* =========================
   LOGO + TÍTULO
========================= */
.loading-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.loading-titulo {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
}

.loading-subtitulo {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.2px;
}

/* =========================
   ORBE ANIMADO CENTRAL
========================= */
.loading-orbe {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Anel externo girando */
.loading-orbe::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(0, 217, 255, 0.9);
    border-right-color: rgba(0, 217, 255, 0.3);
    animation: orbe-girar 1.2s linear infinite;
}

/* Anel interno girando ao contrário */
.loading-orbe::after {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-bottom-color: rgba(180, 100, 255, 0.8);
    border-left-color: rgba(180, 100, 255, 0.2);
    animation: orbe-girar 1.8s linear infinite reverse;
}

/* Núcleo pulsante */
.loading-orbe-nucleo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%,
        rgba(0, 217, 255, 0.35),
        rgba(100, 60, 200, 0.25));
    box-shadow:
        0 0 20px rgba(0, 217, 255, 0.3),
        0 0 40px rgba(0, 217, 255, 0.1);
    animation: orbe-pulsar 2s ease-in-out infinite;
}

@keyframes orbe-girar {
    to { transform: rotate(360deg); }
}

@keyframes orbe-pulsar {
    0%, 100% { transform: scale(1);   opacity: 0.8; }
    50%       { transform: scale(1.1); opacity: 1;   }
}

/* =========================
   LISTA DE ETAPAS
========================= */
.loading-etapas {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 360px;
}

.loading-etapa {
    display: flex;
    align-items: center;
    gap: 14px;
    opacity: 0.25;
    transition: opacity 0.4s ease;
}

.loading-etapa.ativa {
    opacity: 1;
}

.loading-etapa.concluida {
    opacity: 0.55;
}

/* Ícone de status */
.loading-etapa-icone {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: all 0.4s ease;

    /* Estado padrão: aguardando */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.3);
}

.loading-etapa.ativa .loading-etapa-icone {
    background: rgba(0, 217, 255, 0.12);
    border-color: rgba(0, 217, 255, 0.5);
    color: rgba(0, 217, 255, 0.9);
    box-shadow: 0 0 12px rgba(0, 217, 255, 0.2);
    animation: icone-pulsar 1s ease-in-out infinite;
}

.loading-etapa.concluida .loading-etapa-icone {
    background: rgba(0, 217, 255, 0.08);
    border-color: rgba(0, 217, 255, 0.25);
    color: rgba(0, 217, 255, 0.7);
    animation: none;
}

@keyframes icone-pulsar {
    0%, 100% { box-shadow: 0 0 12px rgba(0, 217, 255, 0.2); }
    50%       { box-shadow: 0 0 20px rgba(0, 217, 255, 0.4); }
}

/* Texto da etapa */
.loading-etapa-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.loading-etapa-label {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    transition: color 0.4s ease;
}

.loading-etapa.concluida .loading-etapa-label {
    color: rgba(255, 255, 255, 0.45);
}

.loading-etapa-status {
    font-size: 12px;
    color: rgba(0, 217, 255, 0.7);
    height: 16px;
    transition: opacity 0.3s ease;
}

.loading-etapa:not(.ativa) .loading-etapa-status {
    opacity: 0;
}

/* Linha de progresso entre etapas */
.loading-etapa:not(:last-child)::after {
    content: none;
}

/* =========================
   BARRA DE PROGRESSO GERAL
========================= */
.loading-barra-wrap {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loading-barra-track {
    width: 100%;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.loading-barra-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #00d9ff, #799bfa);
    width: 0%;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.4);
}

.loading-barra-pct {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    text-align: right;
}

/* =========================
   PARTÍCULAS DE FUNDO (CSS puro)
========================= */
.loading-particulas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
}

.loading-particula {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: particula-flutuar linear infinite;
}

.loading-particula:nth-child(1)  { width:4px;  height:4px;  background:rgba(0,217,255,0.4); left:10%; animation-duration:7s;  animation-delay:0s;   }
.loading-particula:nth-child(2)  { width:3px;  height:3px;  background:rgba(168,85,247,0.4); left:25%; animation-duration:9s;  animation-delay:1s;   }
.loading-particula:nth-child(3)  { width:5px;  height:5px;  background:rgba(0,217,255,0.3); left:40%; animation-duration:6s;  animation-delay:2s;   }
.loading-particula:nth-child(4)  { width:3px;  height:3px;  background:rgba(168,85,247,0.3); left:60%; animation-duration:8s;  animation-delay:0.5s; }
.loading-particula:nth-child(5)  { width:4px;  height:4px;  background:rgba(0,217,255,0.4); left:75%; animation-duration:7s;  animation-delay:3s;   }
.loading-particula:nth-child(6)  { width:3px;  height:3px;  background:rgba(255,255,255,0.2); left:88%; animation-duration:10s; animation-delay:1.5s; }

@keyframes particula-flutuar {
    0%   { transform: translateY(100vh) scale(0); opacity: 0;   }
    10%  { opacity: 1; }
    90%  { opacity: 0.6; }
    100% { transform: translateY(-10vh) scale(1.2); opacity: 0; }
}