/* ----------------------------------------------------------
   BASE CYBERPUNK
---------------------------------------------------------- */

html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
    overflow-x: hidden;
}

    body.cyber-body {
        background: url('/images/fondoNeonPunk.jpg') no-repeat center center fixed;
        background-size: cover;
        color: #fff;
        font-family: 'Inter', sans-serif;
    }

/* Oscurece un poco el fondo */
.bg-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 30, 0.55);
    backdrop-filter: blur(3px);
    z-index: -3;
}

/* Quitar el fondo fantasma que causaba pantalla larga */
.bg-visual {
    display: none !important;
}

/* Scanlines */
.scanlines {
    pointer-events: none;
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 2px );
    mix-blend-mode: overlay;
    z-index: -2;
}

/* Partículas (canvas) */
#particlesCanvas {
    position: fixed;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    z-index: -4;
}

/* ----------------------------------------------------------
   TEXTO GLOBAL
---------------------------------------------------------- */
body, h1, h2, h3, h4, h5, h6, p, span, label, .form-label,
.nav-link, td, th {
    color: #ffffff !important;
}

.text-muted, .form-text {
    color: #bfbfff !important;
}

/* ----------------------------------------------------------
   NAVBAR NEON
---------------------------------------------------------- */

.navbar-neon {
    background: rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(8px);
    border-bottom: 2px solid #ff00ff;
    box-shadow: 0 0 18px #ff00ff;
}

    .navbar-neon .nav-link {
        color: white !important;
        font-weight: 600;
        text-shadow: 0 0 8px #ff00ff;
    }

        .navbar-neon .nav-link:hover {
            color: #00eaff !important;
            text-shadow: 0 0 15px #00eaff;
        }

/* ----------------------------------------------------------
   INPUTS Y SELECTS
---------------------------------------------------------- */

input, select, textarea {
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid #7b2ff7 !important;
    color: #fff !important;
    border-radius: 6px;
}

    input::placeholder,
    textarea::placeholder {
        color: #bbbbff !important;
    }

/* Select2 */
.select2-container .select2-selection--single {
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid #7b2ff7 !important;
    color: white !important;
}

.select2-container .select2-selection__rendered {
    color: white !important;
}

.select2-container--open {
    z-index: 999999 !important;
}

.select2-dropdown {
    background: rgba(0,0,0,0.85) !important;
    border: 1px solid #7b2ff7 !important;
    color: white !important;
}

/* ----------------------------------------------------------
   LOGIN INPUTS CON TEXTO NEGRO
---------------------------------------------------------- */

.login-input {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #7b2ff7 !important;
    color: #000 !important;
}

    .login-input::placeholder {
        color: #333 !important;
    }

/* ----------------------------------------------------------
   CARDS
---------------------------------------------------------- */

.card {
    background: rgba(0, 0, 30, 0.60) !important;
    border: 1px solid #ff00ff;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 15px #7b2ff7;
    border-radius: 10px;
}

    .card * {
        color: #ffffff !important;
    }

    /* Hover neon */
    .card:hover, .table:hover {
        box-shadow: 0 0 24px #7b2ff7;
        transition: 0.25s ease-in-out;
    }

/* ----------------------------------------------------------
   TABLAS
---------------------------------------------------------- */

.table {
    color: white !important;
}

    .table thead {
        background: rgba(123, 47, 247, 0.4);
    }

    .table tbody tr:hover {
        background: rgba(0, 238, 255, 0.25);
    }

/* ----------------------------------------------------------
   FOOTER
---------------------------------------------------------- */

.app-footer {
    background: rgba(20,20,40,0.8);
    color: white;
    border-top: 2px solid #ff00ff;
    box-shadow: 0 0 12px #ff00ff;
    backdrop-filter: blur(4px);
}
/* ==========================================================
   FIX #1 – Tablas con fondo blanco (Últimas Asistencias)
   ========================================================== */

.table {
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid #7b2ff7 !important;
    color: #ffffff !important;
}

    .table td,
    .table th {
        color: #ffffff !important;
        background: transparent !important;
    }

    /* Encabezado de tablas */
    .table thead th {
        background: rgba(123, 47, 247, 0.35) !important;
        color: #ffffff !important;
    }


/* ==========================================================
   FIX #2 – Input de contraseña en Login (quitar texto blanco)
   ========================================================== */

.login-input[type="password"] {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #000 !important; /* letra negra */
    border: 1px solid #7b2ff7 !important;
}

    .login-input[type="password"]::placeholder {
        color: #444 !important;
    }


/* ==========================================================
   FIX #3 – SweetAlert2 (popups invisibles)
   ========================================================== */

.swal2-popup {
    background: rgba(0,0,0,0.85) !important;
    color: #ffffff !important;
    border: 1px solid #7b2ff7 !important;
    box-shadow: 0 0 20px #7b2ff7;
}

.swal2-title, .swal2-html-container {
    color: #ffffff !important;
}

.swal2-confirm {
    background: linear-gradient(90deg,#7b2ff7,#0d6efd) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 0 10px #7b2ff7;
}


/* ==========================================================
   FIX ADICIONAL – Asegurar contraste en tarjetas internas
   ========================================================== */

.card {
    background: rgba(0,0,0,0.55) !important;
}

    .card * {
        color: #ffffff !important;
    }
/* ==========================================================
   FIX – Input del usuario en Login (texto negro visible)
   ========================================================== */

.login-input[type="text"],
.login-input:not([type]),
.login-input[name="Usuario"] {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #000 !important; /* letras negras */
    border: 1px solid #7b2ff7 !important;
}

    .login-input[type="text"]::placeholder,
    .login-input[name="Usuario"]::placeholder {
        color: #444 !important;
    }
/* LOGIN – Card con efecto neon */
.login-card {
    background: rgba(0,0,0,0.55) !important;
    border: 2px solid #7b2ff7 !important;
    box-shadow: 0 0 22px #7b2ff7;
    border-radius: 18px;
    animation: loginPulse 2.5s infinite alternate;
}

@keyframes loginPulse {
    from {
        box-shadow: 0 0 14px #7b2ff7;
    }

    to {
        box-shadow: 0 0 30px #00eaff;
    }
}
/* Barras de luz atravesando la pantalla del login */
.login-lights::before, .login-lights::after {
    content: "";
    position: absolute;
    top: 0;
    width: 140%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00eaff, transparent);
    animation: swipe 3s linear infinite;
}

.login-lights::after {
    animation-delay: 1.5s;
}

@keyframes swipe {
    from {
        left: -140%;
    }

    to {
        left: 100%;
    }
}
.btn-login {
    background: linear-gradient(90deg,#7b2ff7,#0d6efd);
    border: none;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 12px #7b2ff7;
    transition: 0.3s ease;
    animation: glowButton 2s infinite alternate;
}

    .btn-login:hover {
        transform: translateY(-4px);
        box-shadow: 0 0 22px #00eaff, 0 0 30px #7b2ff7;
    }

@keyframes glowButton {
    from {
        box-shadow: 0 0 10px #7b2ff7;
    }

    to {
        box-shadow: 0 0 20px #00eaff;
    }
}
/* ----------------------------------------------------------
   ANIMACIÓN DE ENTRADA PARA LOGIN
---------------------------------------------------------- */
.login-animate {
    opacity: 0;
    transform: translateY(40px);
    animation: loginFadeIn 1.2s ease forwards;
}

@keyframes loginFadeIn {
    0% {
        opacity: 0;
        transform: translateY(40px);
        filter: drop-shadow(0 0 0px #7b2ff7);
    }

    60% {
        opacity: 1;
        transform: translateY(0);
        filter: drop-shadow(0 0 10px #7b2ff7);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: drop-shadow(0 0 18px #00eaff);
    }
}
/* ----------------------------------------------------------
   ANIMACIÓN GENERAL PARA EMPL / REP / ASIST
---------------------------------------------------------- */

.page-animate {
    animation: fadeSlideIn 0.9s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ----------------------------------------------------------
   TABLAS CYBERPUNK 
---------------------------------------------------------- */

.cyber-table {
    border: 1px solid #7b2ff7;
    box-shadow: 0 0 12px #7b2ff7;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
}

    .cyber-table tbody tr:hover {
        background: rgba(0, 238, 255, 0.18);
        transition: .25s;
    }
/* ----------------------------------------------------------
   CARDS CYBERPUNK
---------------------------------------------------------- */
.cyber-card {
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid #7b2ff7;
    box-shadow: 0 0 15px #7b2ff7;
    backdrop-filter: blur(6px);
    border-radius: 14px;
    animation: fadeSlideIn 0.9s ease forwards;
}
/* ----------------------------------------------------------
   BOTÓN PULSE CYBERPUNK
---------------------------------------------------------- */

.btn-neon {
    position: relative;
    overflow: hidden;
}

    .btn-neon::after {
        content: "";
        position: absolute;
        top: 0;
        left: -150%;
        width: 150%;
        height: 100%;
        background: linear-gradient( 120deg, rgba(255, 0, 255, 0.3), rgba(0, 225, 255, 0.3), transparent );
        transform: skewX(-25deg);
        animation: neonSweep 3s infinite;
    }

@keyframes neonSweep {
    0% {
        left: -150%;
    }

    50% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}