/* Estilos de la pantalla de login (auth/login.blade.php):
   tarjeta de cristal, fondo con orbs, inputs y animación del logo. */

body {
    font-family: 'Inter', sans-serif !important;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    color: #ffffff !important;
}

.login-page-bg {
    background: linear-gradient(to bottom right, #020617, #0F172A, #1E293B);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Animations */
@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Dynamic Background Movement */
@keyframes moveOrb1 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(-100px, 50px) scale(1.1);
    }

    50% {
        transform: translate(-50px, 150px) scale(1);
    }

    75% {
        transform: translate(50px, 100px) scale(0.9);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes moveOrb2 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(100px, -50px) scale(1.2);
    }

    66% {
        transform: translate(50px, -150px) scale(0.9);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

/* Glass Card */
.glass-card {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px -5px rgba(0, 0, 0, 0.5),
        0 0 20px -10px rgba(231, 55, 117, 0.05);
    padding: 3rem 2rem;
    width: 100%;
    max-width: 450px;
    animation: slideUp 0.8s ease-out;
}

/* Typography */
.text-white-custom {
    color: white !important;
}

.text-muted-custom {
    color: rgba(255, 255, 255, 0.9) !important;
}

.text-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    display: block;
    font-weight: 500;
}

/* QR Code sizing fix */
.qr-wrapper svg {
    width: 160px !important;
    height: 160px !important;
    max-width: 160px !important;
    max-height: 160px !important;
    display: block;
}

/* Inputs */
.custom-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    /* Force white text */
    border-radius: 12px !important;
    padding: 12px 16px 12px 45px !important;
    /* Padding left for icon */
    width: 100%;
    transition: all 0.3s ease;
    caret-color: #E73775;
}

.custom-input:focus {
    border-color: #E73775 !important;
    box-shadow: 0 0 0 2px rgba(231, 55, 117, 0.2) !important;
    outline: none;
    color: #ffffff !important;
}

.custom-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Override potential User Agent or Framework styles */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #1E293B inset !important;
    -webkit-text-fill-color: white !important;
}

.input-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.8);
    z-index: 2;
    pointer-events: none;
}

/* Password toggle */
.password-toggle {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    z-index: 3;
    transition: color 0.3s ease;
    padding: 5px;
    /* Increase click area */
}

.password-toggle:hover {
    color: #fff;
}

/* Buttons */
.btn-login {
    background: linear-gradient(to right, #E73775, #FF5294);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    padding: 14px;
    width: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(231, 55, 117, 0.4);
}

.btn-login:active {
    transform: translateY(0);
}

/* Orbs/Particles */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
}

.orb-1 {
    width: 300px;
    height: 300px;
    background: rgba(231, 55, 117, 0.15);
    /* Pinkish */
    top: 10%;
    right: 10%;
    animation: moveOrb1 15s ease-in-out infinite;
    will-change: transform;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: rgba(14, 165, 233, 0.1);
    /* Blueish */
    bottom: 10%;
    left: 5%;
    animation: moveOrb2 18s ease-in-out infinite alternate;
    will-change: transform;
}

.z-1 {
    z-index: 1;
    position: relative;
}

/* ── Animación del logo (encendido PTV+DATA + escritura de "Vision") ── */
#ptv-logo-anim { position: relative; }

/* PTV + DATA se "encienden" como una bombilla: parpadeo y brillo final */
@keyframes lg-ignite {
    0%   { opacity:0;  filter:brightness(.35) drop-shadow(0 0 0 rgba(150,235,230,0)); }
    9%   { opacity:.5; }
    15%  { opacity:.12; }
    24%  { opacity:.9; filter:brightness(1.45) drop-shadow(0 0 16px rgba(150,235,230,.6)); }
    32%  { opacity:.4; }
    40%  { opacity:1;  filter:brightness(1.2) drop-shadow(0 0 22px rgba(120,225,220,.55)); }
    70%  {            filter:brightness(1.03) drop-shadow(0 0 8px rgba(120,225,220,.22)); }
    100% { opacity:1;  filter:brightness(1) drop-shadow(0 0 0 rgba(0,0,0,0)); }
}
/* "Vision" se dibuja trazo a trazo (la pluma frena al rodear la "o") */
@keyframes lg-vdraw {
    0%   { stroke-dashoffset:100; }
    58%  { stroke-dashoffset:28; }
    80%  { stroke-dashoffset:17; }
    100% { stroke-dashoffset:0; }
}
/* punta de pluma luminosa siguiendo el mismo trazo */
@keyframes lg-pendraw {
    0%   { offset-distance:0%;   opacity:0; }
    8%   { opacity:1; }
    58%  { offset-distance:72%; }
    80%  { offset-distance:83%; }
    100% { offset-distance:100%; opacity:1; }
}
@keyframes lg-penfade {
    0%   { opacity:1; }
    38%  { opacity:1; }
    100% { opacity:0; }
}
/* línea de progreso que barre de izquierda a derecha bajo el logo */
@keyframes lg-sweep {
    0%   { transform:scaleX(0); opacity:0; }
    12%  { opacity:1; }
    100% { transform:scaleX(1); opacity:1; }
}
/* Tiempos de la animación del logo, centralizados aquí (un solo sitio que tocar) */
/* PTV y DATA encienden DESPUÉS de la entrada de la tarjeta (slideUp 0.8s),
   si no, el fundido de la tarjeta se come el parpadeo. */
.lg-ptv     { animation: lg-ignite .6s cubic-bezier(.2,.7,.3,1) .9s both; }
.lg-data    { animation: lg-ignite .6s cubic-bezier(.2,.7,.3,1) 1.1s both; }
.lg-vstroke { animation: lg-vdraw 1.9s linear 1.5s both; }
.lg-pen     { animation: lg-pendraw 1.9s linear 1.5s both, lg-penfade .55s ease 3.4s forwards; }

.lg-underline {
    margin: 6px auto 0;
    width: clamp(200px, 64%, 260px);
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(38,156,152,0), #269c98 18%, #4fc7c2 82%, rgba(79,199,194,0));
    transform-origin: left center;
    opacity: 0;
    animation: lg-sweep 1.2s cubic-bezier(.45,.05,.25,1) 1.5s forwards;
}
/* Línea fija (sin barrido): en pasos 2FA y con prefers-reduced-motion */
.lg-still { animation: none; opacity: 1; transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    .lg-underline { animation: none; opacity: 1; transform: scaleX(1); }
}