/* ==========================================================================
   Estilização Global e Reset - Versão Segura (Sem interferir na Impressão)
   ========================================================================== */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    background-color: #0c0c0c; 
}

.main-container {
    background-image: url('/cenarios/background/telafundo.jpg') !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: 100%;
    min-height: 100vh;
    display: block;
}

/* Fundo com Gradientes "Aurora" Sutis */
.studio-aurora {
    position: fixed;
    width: 50vw;
    height: 50vw;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
    animation: floating-aurora 20s infinite alternate ease-in-out;
}

/* Cores e posições das auroras */
.aurora-red { top: -15%; left: -15%; background: rgba(239, 56, 41, 0.12); }
.aurora-blue { bottom: -15%; right: -15%; background: rgba(66, 133, 244, 0.10); animation-delay: -5s; }

@keyframes floating-aurora {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    100% { transform: translate(15%, 20%) scale(1.1) rotate(30deg); }
}

/* ==========================================================================
   Componentes: Painéis de Vidro e Botões
   ========================================================================= */

/* Painel com Efeito de Vidro Fosco */
.glass-panel {
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border-radius: 24px;
}

/* Botão de Ação Principal (Vermelho Claro) */
.btn-claro {
    background: linear-gradient(145deg, #ff4b3a, #d63021) !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.2), 
                5px 5px 15px rgba(0,0,0,0.5),
                0 0 25px rgba(239, 56, 41, 0.5) !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-claro:hover {
    transform: translateY(-2px);
    box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.2), 
                7px 7px 20px rgba(0,0,0,0.4),
                0 0 35px rgba(239, 56, 41, 0.7) !important;
}

/* Cards de seleção de cenário */
.card-cenario {
    cursor: pointer;
    border-radius: 16px;
    padding: 20px;
    border-width: 1px;
    transition: all 0.3s ease;
}

.card-cenario.unselected {
    border-color: rgba(255, 255, 255, 0.05);
    background-color: rgba(255, 255, 255, 0.02);
}
.card-cenario.unselected:hover {
    border-color: rgba(255, 255, 255, 0.2);
}
.card-cenario.selected {
    border-color: #EF3829;
    background-color: rgba(239, 56, 41, 0.05);
    box-shadow: 0 0 20px rgba(239, 56, 41, 0.3);
}

/* Overlay do contador regressivo */
.countdown-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 50;
}

/* Indicadores de passo no cabeçalho */
.step-dot-refined {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}
.step-dot-refined.active {
    background: #EF3829;
    box-shadow: 0 0 10px #EF3829;
    transform: scale(1.2);
}

/* ==========================================================================
   Spinner de Carregamento Personalizado
   ========================================================================== */
.conic-spinner {
    position: relative;
    width: 112px; /* w-28 */
    height: 112px; /* h-28 */
    border-radius: 50%;
    /* Gradiente cônico com as cores da marca e uma parada transparente para o efeito de "arco" */
    background: conic-gradient(
        from 0deg,
        #EF3829,      /* Vermelho Claro */
        #4285F4,      /* Azul Google */
        #FFFFFF,      /* Branco */
        transparent 70%
    );
    animation: spin 1.5s linear infinite;
}

/* Círculo interno para criar o efeito de "anel" vazado */
.conic-spinner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%; /* Deixa uma borda de 7.5% para o anel */
    height: 85%;
    background-color: #18181b; /* Cor de fundo do painel para "vazar" e criar o anel */
    border-radius: 50%;
}