/* ==========================================================
   aurora.css - Fondo "aurora" con los colores de la empresa

   Lo usan el banner de la página del candidato, la banda de los
   tests, las pantallas entre etapas y la vista previa del panel.

   Marcado:
     <div class="aurora-fondo">
       <div class="aurora" aria-hidden="true"><i></i><i></i><i></i></div>
       <canvas data-red aria-hidden="true"></canvas>   (js/ui/aurora.js)
       ...contenido...
     </div>

   Cada empresa elige el fondo en Configuración; llega como
   data-fondo en <html> (o en la vista previa del panel):
     aurora-red (por defecto) · aurora · red · quieto
   El texto va en --color-texto-banner: blanco, u oscuro si el
   color principal de la empresa es muy claro (js/ui/marca.js).
   ========================================================== */

.aurora-fondo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--color-primario);
    color: var(--color-texto-banner, #fff);
}

.aurora {
    position: absolute;
    inset: -20%;
    z-index: -2;
    filter: blur(46px);
    pointer-events: none;
}

.aurora i {
    position: absolute;
    border-radius: 50%;
    opacity: .85;
    animation: aurora-flota 14s ease-in-out infinite alternate;
}

.aurora i:nth-child(1) {
    width: 55%;
    height: 70%;
    left: 50%;
    top: 5%;
    background: var(--color-acento);
}

.aurora i:nth-child(2) {
    width: 45%;
    height: 60%;
    left: 5%;
    top: 40%;
    background: color-mix(in srgb, var(--color-primario) 60%, #6ec5ff);
    animation-duration: 18s;
}

.aurora i:nth-child(3) {
    width: 35%;
    height: 50%;
    left: 70%;
    top: 50%;
    background: color-mix(in srgb, var(--color-acento) 50%, #ffb347);
    opacity: .6;
    animation-duration: 11s;
}

@keyframes aurora-flota {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-8%, 6%) scale(1.12); }
    100% { transform: translate(6%, -5%) scale(.95); }
}

/* Red de puntos (la dibuja js/ui/aurora.js con el color del texto) */
.aurora-fondo > canvas[data-red] {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    color: var(--color-texto-banner, #fff);
}

/* Aurora sin movimiento: banda de los tests y fondo "quieto" */
.aurora-quieta i,
[data-fondo="quieto"] .aurora i {
    animation: none;
}

/* Fondo "red": degradado fijo en vez de manchas */
[data-fondo="red"] .aurora-fondo {
    background: linear-gradient(130deg, var(--color-primario) 0%,
        color-mix(in srgb, var(--color-primario) 65%, var(--color-acento)) 60%, var(--color-acento) 120%);
}

[data-fondo="red"] .aurora {
    display: none;
}

/* Fondos sin red de puntos */
[data-fondo="aurora"] .aurora-fondo > canvas[data-red],
[data-fondo="quieto"] .aurora-fondo > canvas[data-red] {
    display: none;
}

/* Chip de vidrio sobre el fondo */
.chip-vidrio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--color-texto-banner, #fff) 30%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-texto-banner, #fff) 15%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--color-texto-banner, #fff);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
}

.chip-vidrio svg {
    flex: none;
}

/* Logo de la empresa en una pastilla blanca (siempre visible sobre el fondo) */
.logo-pastilla {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 9px 16px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .35);
}

/* Sin empresa (link no válido): no se muestra la pastilla vacía */
.logo-pastilla:has(> img:not([src])):has(> .logo-pastilla-texto.oculto) {
    display: none;
}

.logo-pastilla img {
    display: block;
    width: auto;
    max-width: 220px;
    height: 34px;
    object-fit: contain;
}

.logo-pastilla-texto {
    color: color-mix(in srgb, var(--color-primario) 75%, black);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
}

@media (prefers-reduced-motion: reduce) {
    .aurora i {
        animation: none;
    }
}