/* =====================================================================
   EMBLEMA "MALLA NEUTRA" — VARIANTE 1 (febrero, elegido por José)
   Trasplante LITERAL del bloque original de febrero
   (hidden_files/logo_original/malla_neutra_feb/emblema.css +
   quantum_mesh.js). La animación NO se tocó: mismos anillos, mismos
   tiempos (spin 4s / reverse 6s / spin-tilt 5s / pulse-grow 3s /
   pulse-core 2s), mismos colores.

   Adaptaciones SOLO de integración (contenedor), marcadas [INTEGRACIÓN]:
   - El canvas pasa de position:absolute a position:fixed para cubrir
     la ventana aunque la pantalla tenga scroll (mismo efecto visual
     a pantalla completa que en el original; z-index 0 y sin eventos).
   - .centro recibe position:relative + z-index:1 para que la caja de
     acceso quede SOBRE la malla (en el original era .main-container
     con z-index 10; aquí se reutiliza la clase del build nuevo).
   - Variantes de tamaño .ql-120 / .ql-90: escalan el contenedor y el
     texto CTC en la misma proporción; la animación es idéntica.
   - NO se incluyen las reglas body/html del original (fondo y margen
     ya los pone base.html del build; duplicarlas rompería el panel).
   ===================================================================== */

/* [INTEGRACIÓN] Canvas de la malla a pantalla completa, detrás de todo */
#quantumMesh { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* [INTEGRACIÓN] El contenido de las pantallas de códigos va sobre la malla */
.centro { position: relative; z-index: 1; }

/* ===== CSS DEL EMBLEMA (literal de la plantilla de febrero) ===== */
/* Contenedor principal para centrar */
.quantum-logo-container {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Animación de "temblor" / pulso global */
    animation: pulse-grow 3s ease-in-out infinite;
}

/* Anillos del átomo orbitando */
.atom-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: #00f2fe; /* Azul cian eléctrico */
    border-bottom-color: #4facfe; /* Azul más profundo */
    box-shadow: 0 0 20px #00f2fe, inset 0 0 20px #4facfe;
    pointer-events: none;
}

/* Diferentes velocidades y ángulos para cada anillo */
.ring-1 { animation: spin 4s linear infinite; }
.ring-2 { animation: spin 6s linear infinite reverse; width: 80%; height: 80%; border-top-color: #FFD700; border-bottom-color: transparent; box-shadow: 0 0 15px #FFD700; } /* Anillo dorado interno */
.ring-3 { animation: spin-tilt 5s linear infinite; width: 110%; height: 110%; border: 2px dotted #00f2fe; box-shadow: none; opacity: 0.7; }

/* Núcleo central brillante */
.atom-core-glow {
    position: absolute;
    width: 50%;
    height: 50%;
    background: radial-gradient(circle, #FFD700 0%, rgba(0, 242, 254, 0.8) 60%, transparent 100%);
    border-radius: 50%;
    filter: blur(10px);
    opacity: 0.6;
    animation: pulse-core 2s ease-in-out infinite alternate;
}

/* Texto CTC de Oro Imperial */
.ctc-golden-text {
    position: absolute;
    z-index: 20;
    color: #FFD700;
    font-family: 'Orbitron', sans-serif; /* Asegúrate de tener esta fuente o una similar cargada */
    font-size: 42px;
    font-weight: 900;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 1), 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(0, 242, 254, 0.5);
    pointer-events: none;
}

/* DEFINICIÓN DE ANIMACIONES */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes spin-tilt {
    0% { transform: rotateX(60deg) rotateY(0deg) rotateZ(0deg); }
    100% { transform: rotateX(60deg) rotateY(360deg) rotateZ(360deg); }
}
@keyframes pulse-grow { /* El efecto de "ponerse grande y pequeño" */
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
@keyframes pulse-core {
    0% { opacity: 0.5; transform: scale(0.8); }
    100% { opacity: 0.9; transform: scale(1.2); }
}

/* ===== [INTEGRACIÓN] Variantes de tamaño (misma animación) ===== */
/* Tamaño menor: pantalla 2FA al entrar (login_2fa) */
.quantum-logo-container.ql-120 { width: 120px; height: 120px; margin-bottom: 18px; }
.quantum-logo-container.ql-120 .ctc-golden-text { font-size: 28px; letter-spacing: 2px; }
/* Tamaño chico: tarjeta de envío con código 2FA en la billetera */
.quantum-logo-container.ql-90 { width: 90px; height: 90px; margin-bottom: 10px; }
.quantum-logo-container.ql-90 .ctc-golden-text { font-size: 21px; letter-spacing: 1px; }

/* ===== [INTEGRACIÓN] Responsive (orden de José, 2026-10-25) =====
   El emblema ESCALA con la pantalla: jamás se corta ni empuja el
   formulario fuera de la vista. Los anillos son % del contenedor,
   así que basta reducir el contenedor y el texto en proporción;
   la animación (pulse-grow 1.15 incluido) sigue completa.
   La malla: quantum_mesh.js (byte-idéntico) YA trae su propio
   manejo de resize — escucha 'resize' y redimensiona el canvas a
   innerWidth/innerHeight — y el canvas es position:fixed al 100%,
   así que cubre cualquier pantalla sin crear scroll horizontal.
   Verificado por render en 360/390/430/768/1280 px de ancho. */
.quantum-logo-container { max-width: 100%; }
@media (max-width: 480px) {
    .quantum-logo-container { width: 150px; height: 150px; margin-bottom: 22px; }
    .quantum-logo-container .ctc-golden-text { font-size: 35px; }
    .quantum-logo-container.ql-120 { width: 108px; height: 108px; margin-bottom: 14px; }
    .quantum-logo-container.ql-120 .ctc-golden-text { font-size: 25px; letter-spacing: 2px; }
    .quantum-logo-container.ql-90 { width: 82px; height: 82px; }
    .quantum-logo-container.ql-90 .ctc-golden-text { font-size: 19px; }
}
@media (max-width: 360px) {
    .quantum-logo-container { width: 128px; height: 128px; margin-bottom: 18px; }
    .quantum-logo-container .ctc-golden-text { font-size: 30px; letter-spacing: 2px; }
    .quantum-logo-container.ql-120 { width: 96px; height: 96px; margin-bottom: 12px; }
    .quantum-logo-container.ql-120 .ctc-golden-text { font-size: 22px; }
    .quantum-logo-container.ql-90 { width: 74px; height: 74px; }
    .quantum-logo-container.ql-90 .ctc-golden-text { font-size: 17px; }
}