/* =========================================
   GLITCH CONTROL - Alertas Gamer
   ========================================= */
:root {
    --glitch-red: #ff0055;
    --glitch-cyan: #00ffff;
    --glitch-yellow: #ffd700;
    --glitch-bg: rgba(10, 10, 15, 0.95);
}

.glitch-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--glitch-bg);
    backdrop-filter: blur(8px);
    z-index: 10000; /* Encima de todo */
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.2s ease-out;
}

.glitch-box {
    background: #111;
    border: 2px solid #333;
    width: 90%;
    max-width: 400px;
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    position: relative;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
    overflow: hidden;
}

/* Variantes de Borde Brillante */
.glitch-mode-error { border-color: var(--glitch-red); box-shadow: 0 0 20px rgba(255,0,85,0.4); }
.glitch-mode-lock { border-color: var(--glitch-yellow); box-shadow: 0 0 20px rgba(255,215,0,0.4); }
.glitch-mode-beta { border-color: var(--glitch-cyan); box-shadow: 0 0 20px rgba(0,255,255,0.4); }

/* Animación de entrada */
.glitch-enter { animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* Icono Gigante */
.glitch-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    display: inline-block;
}
.glitch-mode-error .glitch-icon { color: var(--glitch-red); animation: shake 0.5s; }
.glitch-mode-lock .glitch-icon { color: var(--glitch-yellow); }
.glitch-mode-beta .glitch-icon { color: var(--glitch-cyan); }

/* Textos */
.glitch-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.glitch-msg {
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

/* Botones Gamer */
.glitch-actions { display: flex; gap: 10px; justify-content: center; }

.btn-glitch {
    background: transparent;
    border: 1px solid #555;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-glitch:hover { background: #333; }

.btn-glitch.primary {
    background: #fff;
    color: #000;
    border: none;
}
.glitch-mode-error .btn-glitch.primary { background: var(--glitch-red); color: white; }
.glitch-mode-lock .btn-glitch.primary { background: var(--glitch-yellow); color: black; }
.glitch-mode-beta .btn-glitch.primary { background: var(--glitch-cyan); color: black; }

/* Animaciones */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }