/* ══════════════════════════════════════════════════════════════════════════
   InnovaCode OS — 05-login.css
   Estilos exclusivos de la pantalla de login.
   Solo se carga en: plataforma/login/login_view.php
   Orden de carga: 5° (opcional — solo en login)

   Fusiona: otros_estilos.css + estilos.css (sección login)
   ══════════════════════════════════════════════════════════════════════════ */


/* ══ 1. ANIMACIONES DE ENTRADA ══════════════════════════════════════════ */

@keyframes moveLeftBracket {
    0%   { left: 50%; transform: translate(-50%, -64%); }
    100% { left: calc(50% - 30px); transform: translate(-53%, -64%); }
}

@keyframes moveRightBracket {
    0%   { left: 50%; transform: translate(-50%, -64%); }
    100% { left: calc(50% + 30px); transform: translate(-47%, -64%); }
}

@keyframes showImage {
    0%   { transform: scale(1);   opacity: 1; background-position: center center; }
    70%  { transform: scale(1.1); opacity: 1; background-position: center center; }
    100% { transform: scale(1);   opacity: 1; background-position: center center; }
}


/* ══ 2. PARTÍCULAS DE FONDO ═════════════════════════════════════════════ */

.particles-container { position: absolute; width: 100%; height: 100%; z-index: 0; }
.particle {
    position        : absolute;
    border-radius   : 50%;
    pointer-events  : none;
    background      : radial-gradient(circle, rgba(3, 233, 244, 0.6) 0%, rgba(3, 233, 244, 0) 70%);
    filter          : blur(3px);
}


/* ══ 3. WRAPPER Y CONTENEDOR PRINCIPAL ══════════════════════════════════ */

.login-wrapper {
    position        : relative;
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 100%;
    min-height      : 100vh;
    margin          : 0 auto;
}

.login-form        { width: 100% !important; }
.login-form-content { width: 100%; }

.login-container {
    position        : relative;
    z-index         : 1;
    width           : 90%;
    max-width       : 400px;
    padding         : 40px 25px;
    background      : rgba(255, 255, 255, 0.12);
    backdrop-filter : blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius   : 20px;
    border          : 1px solid rgba(255, 255, 255, 0.1);
    box-shadow      : 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    opacity         : 0;
    transform       : scale(0.8);
    transition      : all 0.5s ease 1.2s;
    margin          : 0 auto;
    box-sizing      : border-box;
}
.login-container.show { opacity: 1; transform: scale(1); }


/* ══ 4. LOGO INNOVA CODE ════════════════════════════════════════════════ */

.logo           { text-align: center; margin-bottom: 10px; }
.logo h1 {
    font-size   : 28px;
    font-weight : 700;
    background              : linear-gradient(45deg, #03e9f4, #0288d1);
    background-clip         : text;
    -webkit-background-clip : text;
    -webkit-text-fill-color : transparent;
    color                   : transparent;
    margin-bottom           : 5px;
}
.logo p { font-size: 14px; color: #bbb; margin-bottom: 25px; }

h2 {
    text-align    : center;
    margin-bottom : 30px;
    font-weight   : 600;
    letter-spacing: 1px;
    font-size     : 24px;
    color         : #fff;
}

/* Corchetes animados */
.brackets {
    position    : absolute;
    top         : 50%;
    left        : 50%;
    transform   : translate(-50%, -50%);
    display     : flex;
    align-items : center;
    gap         : 110px;
    z-index     : 2;
    pointer-events: none;
    white-space : nowrap;
}

.bracket-left,
.bracket-right {
    font-family     : "Courier New", Courier, "Lucida Console", Monaco, monospace !important;
    font-size       : 140px !important;
    color           : #fff !important;
    transition      : all 1.5s ease !important;
    text-shadow     : 0 0 30px rgba(3, 233, 244, 0.5) !important;
    line-height     : 1 !important;
    display         : block !important;
    height          : auto !important;
    width           : auto !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering  : optimizeLegibility;
}

.bracket-left  { transform: translateX(-500px); transition: transform 0.6s ease, opacity 1s ease 0.3s; opacity: 1; }
.bracket-right { transform: translateX(500px);  transition: transform 0.6s ease, opacity 1s ease 0.3s; opacity: 1; }

.brackets.separated .bracket-left  { transform: translateX(-10px); }
.brackets.separated .bracket-right { transform: translateX(10px); }

.brackets.fading      .bracket-left,
.brackets.fading      .bracket-right   { opacity: 0.7; }
.brackets.faded       .bracket-left,
.brackets.faded       .bracket-right   { opacity: 0.3; }
.brackets.very-faded  .bracket-left,
.brackets.very-faded  .bracket-right   { opacity: 0.1; }
.brackets.almost-gone .bracket-left,
.brackets.almost-gone .bracket-right   { opacity: 0.05; }
.brackets.gone        .bracket-left,
.brackets.gone        .bracket-right   { opacity: 0; }

/* Logo central */
.logo-container {
    position    : absolute;
    top         : 50%;
    left        : 50%;
    transform   : translate(-50%, -50%);
    display     : flex;
    flex-direction: column;
    align-items : center;
    width       : fit-content;
    z-index     : 3;
    transition  : opacity 1s ease 0.3s;
    opacity     : 1;
}

.innova-line-wrapper {
    display          : flex;
    flex-direction   : column;
    align-items      : center;
    transform        : scaleX(0.5) scaleY(0.8);
    transform-origin : center;
    white-space      : nowrap;
    border-bottom    : 2px solid white;
    padding-bottom   : 5px;
}

.innova {
    font-family    : 'Arial', sans-serif;
    font-size      : 50px;
    color          : #DAA520;
    font-weight    : 500;
    letter-spacing : 10px;
    line-height    : 1;
}

.code {
    font-family    : 'Courier New', Courier, monospace;
    font-size      : 38px;
    color          : white;
    font-weight    : normal;
    letter-spacing : 3px;
    line-height    : 1;
    white-space    : nowrap;
}

.innova-line-wrapper .innova,
.logo-container .code {
    font-family           : "Courier New", Courier, "Lucida Console", Monaco, monospace !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.brackets.fading      .logo-container { opacity: 0.7; }
.brackets.faded       .logo-container { opacity: 0.3; }
.brackets.very-faded  .logo-container { opacity: 0.1; }
.brackets.almost-gone .logo-container { opacity: 0.05; }
.brackets.gone        .logo-container { opacity: 0; }


/* ══ 5. LOADER DE PANTALLA ══════════════════════════════════════════════ */

.loading {
    background : url('../images/gif/loader.gif') center center no-repeat;
    background-position: center center;
    transform  : scale(0);
    animation  : showImage 0.8s ease-out 0.6s forwards;
}


/* ══ 6. INPUTS DEL FORMULARIO ═══════════════════════════════════════════ */

.input-group { position: relative; margin-bottom: 30px; }

.login-container .input-group input[type="text"],
.login-container .input-group input[type="text"]:focus,
.login-container .input-group input[type="text"]:placeholder-shown,
.login-container .input-group input[type="text"]:valid,
.login-container .input-group input[type="text"]:invalid,
.login-container .input-group input[type="password"],
.login-container .input-group input[type="password"]:focus,
.login-container .input-group input[type="password"]:placeholder-shown,
.login-container .input-group input[type="password"]:valid,
.login-container .input-group input[type="password"]:invalid {
    all              : unset !important;
    box-sizing       : border-box !important;
    display          : block !important;
    width            : 100% !important;
    padding          : 5px 0 !important;
    font-size        : 16px !important;
    color            : white !important;
    border           : none !important;
    border-bottom    : 1px solid rgba(255, 255, 255, 0.3) !important;
    outline          : none !important;
    background       : transparent !important;
    background-color : transparent !important;
    transition       : all 0.3s !important;
}

.login-container .input-group select,
.login-container .input-group select:focus,
.login-container .input-group select:valid,
.login-container .input-group select:invalid {
    display          : block !important;
    width            : 100% !important;
    padding          : 5px 0 !important;
    font-size        : 16px !important;
    color            : white !important;
    border           : none !important;
    border-bottom    : 1px solid rgba(255, 255, 255, 0.3) !important;
    background       : transparent !important;
    background-color : transparent !important;
    transition       : all 0.3s !important;
}
.login-container .input-group select option { color: black; }

/* Labels flotantes */
.login-container .input-group label {
    position       : absolute !important;
    top            : 5px !important;
    left           : 0 !important;
    padding        : 0 !important;
    font-size      : 16px !important;
    color          : rgba(255, 255, 255, 0.6) !important;
    pointer-events : none !important;
    transition     : 0.3s !important;
}

.login-container .input-group input:focus ~ label,
.login-container .input-group input:valid ~ label,
.login-container .input-group select:focus ~ label,
.login-container .input-group select:valid ~ label {
    top         : -18px !important;
    font-size   : 13px !important;
    color       : #03e9f4 !important;
    font-weight : 600 !important;
}


/* ══ 7. BOTÓN Y LINKS ═══════════════════════════════════════════════════ */

.button-login {
    background    : linear-gradient(45deg, #03e9f4, #0288d1);
    border        : none;
    outline       : none;
    color         : white;
    padding       : 14px 20px;
    cursor        : pointer;
    border-radius : 8px;
    font-size     : 16px;
    font-weight   : 600;
    width         : 100%;
    transition    : 0.4s;
    margin-top    : 15px;
    box-shadow    : 0 5px 15px rgba(3, 233, 244, 0.4);
    letter-spacing: 0.5px;
    box-sizing    : border-box;
}
.button-login:hover { box-shadow: 0 8px 20px rgba(3, 233, 244, 0.6); }

.links { display: flex; justify-content: center; margin-top: 25px; }
.links a {
    color         : #bbb;
    text-decoration: none;
    font-size     : 14px;
    transition    : 0.3s;
    padding       : 8px 16px;
    border-radius : 20px;
}
.links a:hover { color: #03e9f4; background: rgba(3, 233, 244, 0.1); }

.footer { text-align: center; margin-top: 30px; font-size: 12px; color: rgba(255, 255, 255, 0.5); }