/* ================================================================
   LOGIN CORPORATIVO — login.css v4
   Diseño limpio con clases propias .lf-* para evitar conflictos
   con Semantic UI y aplication.css
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════
   1. BASE
══════════════════════════════════════════════════ */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
}

/* ══════════════════════════════════════════════════
   2. FONDO
══════════════════════════════════════════════════ */
#wallpaper,
#wallpaper.wallpaper-login,
.wallpaper-login {
    position:            fixed !important;
    inset:               0 !important;
    width:               100% !important;
    height:              100% !important;
    display:             flex !important;
    align-items:         center !important;
    justify-content:     center !important;
    background-position: center !important;
    background-repeat:   no-repeat !important;
    background-size:     cover !important;
    z-index:             1 !important;
    overflow:            visible !important;
}

/* ══════════════════════════════════════════════════
   3. PARTÍCULAS
══════════════════════════════════════════════════ */
.particles-container {
    position:       fixed;
    inset:          0;
    pointer-events: none;
    z-index:        2;
    overflow:       hidden;
}

/* ══════════════════════════════════════════════════
   4. BRACKETS / ANIMACIÓN LOGO
══════════════════════════════════════════════════ */
.brackets {
    position:        absolute;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%);
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0;
    z-index:         20;
    pointer-events:  none;
    transition:      gap .65s cubic-bezier(.4,0,.2,1),
                     opacity .45s ease,
                     transform .65s ease;
}

.bracket-left,
.bracket-right {
    font-size:   120px !important;
    font-weight: 200;
    line-height: 1;
    color:       rgba(255,255,255,.88);
    font-family: 'Inter', system-ui, sans-serif;
    text-shadow: 0 4px 24px rgba(0,0,0,.22);
    transition:  all .65s cubic-bezier(.4,0,.2,1);
    user-select: none;
    flex-shrink: 0;
}

.logo-container {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    overflow:       hidden;
    max-width:      0;
    opacity:        0;
    transition:     max-width .55s ease .1s,
                    opacity   .55s ease .1s;
}

.innova {
    font-size:      30px !important;
    font-weight:    300;
    color:          #be7544;
    letter-spacing: 4px;
    font-family:    'Inter', system-ui, sans-serif;
    text-shadow:    0 2px 16px rgba(0,0,0,.35);
    white-space:    nowrap;
    line-height:    1.1;
}

.code {
    font-size:      30px !important;
    font-weight:    300;
    color:          rgba(255,255,255,.78);
    letter-spacing: 8px;
    font-family:    'Inter', system-ui, sans-serif;
    text-shadow:    0 2px 12px rgba(0,0,0,.25);
    white-space:    nowrap;
    margin-top:     -2px;
}

/* Estados animación */
.brackets.separated {
    gap: 90px;
}
.brackets.separated .logo-container {
    max-width: 280px;
    opacity:   1;
}
.brackets.fading      { opacity: .80; }
.brackets.faded       { opacity: .55; }
.brackets.very-faded  { opacity: .25; }
.brackets.almost-gone { opacity: .08; }
.brackets.gone {
    opacity:   0;
    transform: translate(-50%,-50%) scale(.88);
}

/* ══════════════════════════════════════════════════
   5. TARJETA — .login-container
══════════════════════════════════════════════════ */
.login-container {
    position:        relative;
    z-index:         10;
    width:           420px;
    max-width:       calc(100vw - 28px);
    background:      rgba(255,255,255,.97);
    border-radius:   16px;
    box-shadow:
        0 24px 64px rgba(15,40,110,.26),
        0  4px 20px rgba(15,40,110,.14),
        inset 0 1px 0 #fff;
    overflow:        visible !important;   /* NO recortar los dropdowns */
    backdrop-filter: blur(14px);

    /* Empieza oculta */
    opacity:         0;
    transform:       translateY(22px) scale(.97);
    pointer-events:  none;
    transition:      opacity .48s cubic-bezier(.22,.68,0,1.18),
                     transform .48s cubic-bezier(.22,.68,0,1.18);
}

/* Franja superior */
/*.login-container::before {
    content:       '';
    display:       block;
    height:        5px;
    background:    linear-gradient(90deg, #1254C0 0%, #1A73E8 50%, #42A5F5 100%);
    border-radius: 16px 16px 0 0;
}*/

/* Mostrar tras animación */
.login-container.show {
    opacity:        1;
    transform:      translateY(0) scale(1);
    pointer-events: all;
}

/* ══════════════════════════════════════════════════
   6. INTERIOR — .login-form
══════════════════════════════════════════════════ */
.login-form {
    padding:  0 28px 24px;
    overflow: visible !important;
}

/* ── Logo imagen ── */
.lf-logo {
    text-align: center;
    padding:    22px 0 0;
}
.lf-logo-img {
    width:               240px;
    height:              60px;
    display:             inline-block;
    background-position: center;
    background-repeat:   no-repeat;
    background-size:     contain;
}

/* ── Bienvenida ── */
.lf-welcome {
    text-align: center;
    padding:    12px 0 16px;
}
.lf-welcome h2 {
    font-size:      20px;
    font-weight:    700;
    color:          #1a2e50;
    margin:         0 0 4px;
    line-height:    1.2;
    font-family:    'Inter', system-ui, sans-serif;
    letter-spacing: -.02em;
}
.lf-welcome p {
    font-size:   12px !important;
    color:       #5d7a9a;
    margin-top:      15px;
    line-height: 1.4;
    font-family: 'Inter', system-ui, sans-serif;
}

/* ══════════════════════════════════════════════════
   7. CAMPOS — .lf-field / .lf-label / .lf-input
══════════════════════════════════════════════════ */
.lf-field {
    display:       flex;
    align-items:   stretch;
    margin-bottom: 10px;
    width:         100%;
    position:      relative;
    overflow:      visible !important;
}

/* Label azul */
.lf-label {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             5px;
    flex-shrink:     0;
    width:           106px;
    min-width:       106px;
    height:          38px;
    background:      #1A73E8;
    color:           #fff;
    font-size:       11px !important;
    font-weight:     500;
    font-family:     'Inter', system-ui, sans-serif;
    letter-spacing:  .02em;
    border-radius:   8px 0 0 8px;
    padding:         0 8px;
    user-select:     none;
}
.lf-label i.icon {
    font-size: 13px !important;
    margin:    0 !important;
}

/* Input */
.lf-input {
    flex:          1;
    min-width:     0;
    height:        38px;
    border:        1px solid #c8d8ee;
    border-left:   none;
    border-radius: 0 8px 8px 0;
    background:    #fff;
    color:         #1a2e50;
    font-size:     13px !important;
    font-family:   'Inter', system-ui, sans-serif;
    font-weight:   500;
    padding:       0 12px;
    outline:       none;
    transition:    border-color .15s, box-shadow .15s;
    box-sizing:    border-box;
}
.lf-input:focus {
    border-color: #1A73E8;
    box-shadow:   0 0 0 3px rgba(26,115,232,.16);
    z-index:      2;
}
.lf-input::placeholder {
    color:       #b0c4d8;
    font-weight: 400;
}

/* ══════════════════════════════════════════════════
   8. SELECT — .lf-select (Empresa / Sucursal)
══════════════════════════════════════════════════ */
.lf-select,
.lf-field select,
.lf-field .ui.dropdown {
    flex:          1 !important;
    min-width:     0 !important;
    height:        38px !important;
    border:        1px solid #c8d8ee !important;
    border-left:   none !important;
    border-radius: 0 8px 8px 0 !important;
    background:    #fff !important;
    color:         #1a2e50 !important;
    font-size:     12px !important;
    font-family:   'Inter', system-ui, sans-serif !important;
    padding:       0 10px !important;
    box-sizing:    border-box !important;
    outline:       none !important;
    cursor:        pointer !important;
}

/* Menú desplegable — FUERA del contenedor */
.lf-field .ui.dropdown > .menu,
.lf-field .ui.fluid.dropdown > .menu,
#cnt_cmb_company .menu,
#cnt_cmb_filial  .menu {
    position:      absolute !important;
    top:           100% !important;
    left:          0 !important;
    right:         0 !important;
    z-index:       99999 !important;
    background:    #fff !important;
    border:        1px solid #c8d8ee !important;
    border-top:    2px solid #1A73E8 !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow:    0 8px 28px rgba(15,40,110,.18) !important;
    max-height:    200px !important;
    overflow-y:    auto !important;
}

.lf-field .ui.dropdown .menu .item {
    font-size:   12px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    padding:     9px 12px !important;
    color:       #1a2e50 !important;
    transition:  background .1s !important;
}
.lf-field .ui.dropdown .menu .item:hover,
.lf-field .ui.dropdown .menu .item.selected {
    background: #E8F0FE !important;
    color:      #1254C0 !important;
}

/* ══════════════════════════════════════════════════
   9. BOTÓN — .lf-btn
══════════════════════════════════════════════════ */
.lf-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    width:           100%;
    height:          44px;
    margin-top:      12px;
    padding:         0;
    background:      linear-gradient(135deg, #1A73E8 0%, #1254C0 100%);
    color:           #fff;
    border:          none;
    border-radius:   8px;
    font-size:       14px !important;
    font-weight:     600;
    font-family:     'Inter', system-ui, sans-serif;
    letter-spacing:  .03em;
    cursor:          pointer;
    box-shadow:      0 4px 16px rgba(26,115,232,.40);
    transition:      all .16s ease;
    line-height:     1;
}
.lf-btn i.icon {
    font-size: 16px !important;
    margin:    0 !important;
}
.lf-btn:hover {
    background:  linear-gradient(135deg, #1565C0 0%, #0d47a1 100%);
    box-shadow:  0 6px 22px rgba(26,115,232,.52);
    transform:   translateY(-1px);
}
.lf-btn:active {
    transform:  scale(.98) translateY(0);
    box-shadow: 0 2px 8px rgba(26,115,232,.30);
}
.lf-btn:disabled {
    opacity:        .65;
    cursor:         default;
    pointer-events: none;
    transform:      none;
}

/* ══════════════════════════════════════════════════
   10. PIE — .lf-footer
══════════════════════════════════════════════════ */
.lf-footer {
    text-align:     center;
    margin-top:     16px;
    padding-top:    14px;
    border-top:     1px solid rgba(190,215,240,.60);
    font-size:      10px !important;
    color:          #9ab5cc;
    font-family:    'Inter', system-ui, sans-serif;
    letter-spacing: .03em;
}

/* ══════════════════════════════════════════════════
   11. COMPATIBILIDAD con .user-login antiguo
      (por si alguna ventana sigue usando esas clases)
══════════════════════════════════════════════════ */
.user-login,
#user_login {
    width:        420px !important;
    max-width:    calc(100vw - 28px) !important;
    background:   rgba(255,255,255,.97) !important;
    border:       none !important;
    border-radius:16px !important;
    box-shadow:
        0 24px 64px rgba(15,40,110,.26),
        0  4px 20px rgba(15,40,110,.14) !important;
    padding:      0 !important;
    overflow:     visible !important;
    position:     relative !important;
    z-index:      10 !important;
    font-family:  'Inter', system-ui, sans-serif !important;
}
.user-login::before, #user_login::before {
    content:       '' !important;
    display:       block !important;
    height:        5px !important;
    background:    linear-gradient(90deg,#1254C0 0%,#1A73E8 50%,#42A5F5 100%) !important;
    border-radius: 16px 16px 0 0 !important;
}

/* ══════════════════════════════════════════════════
   12. RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 460px) {
    .login-container, .user-login, #user_login {
        width:         calc(100vw - 20px) !important;
        border-radius: 12px !important;
    }
    .login-form { padding: 0 16px 20px !important; }
    .lf-logo    { padding-top: 18px; }
    .lf-label   { width: 90px !important; min-width: 90px !important; font-size: 10px !important; }
    .bracket-left, .bracket-right { font-size: 80px !important; }
    .innova { font-size: 32px !important; letter-spacing: 5px !important; }
    .code   { font-size: 24px !important; }
}

#cnt_cmb_company div.lf-select div.text,
#cnt_cmb_filial div.lf-select div.text   {
    margin-top: 13px;
}



/* ========= FONDO DEGRADADO ANIMADO + ORBES ========= */
.gradient-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, 
        #0a0a1a 0%, 
        #0d1b3e 25%, 
        #1a2a5e 50%, 
        #0f2b4a 75%, 
        #040914 100%);
    background-size: 200% 200%;
    animation: gradientFlow 12s ease infinite;
}

@keyframes gradientFlow {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

.orb-1, .orb-2, .orb-3 {
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
    animation: floatOrb 18s infinite ease-in-out;
}
.orb-1 {
    width: 500px;
    height: 500px;
    background: #1E90FF;
    top: -150px;
    left: -150px;
}
.orb-2 {
    width: 600px;
    height: 600px;
    background: #7B2FBE;
    bottom: -200px;
    right: -200px;
    animation-delay: -6s;
    animation-duration: 22s;
}
.orb-3 {
    width: 450px;
    height: 450px;
    background: #00C9FF;
    top: 40%;
    left: 30%;
    animation-delay: -10s;
    animation-duration: 15s;
    opacity: 0.2;
}

@keyframes floatOrb {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(40px, -30px); }
    66% { transform: translate(-30px, 20px); }
}

/* Fondo degradado animado + orbes */
.gradient-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, #0a0a1a 0%, #0d1b3e 25%, #1a2a5e 50%, #0f2b4a 75%, #040914 100%);
    background-size: 200% 200%;
    animation: gradientFlow 12s ease infinite;
}

@keyframes gradientFlow {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

.orb-1, .orb-2, .orb-3 {
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
    animation: floatOrb 18s infinite ease-in-out;
}
.orb-1 {
    width: 500px;
    height: 500px;
    background: #1E90FF;
    top: -150px;
    left: -150px;
}
.orb-2 {
    width: 600px;
    height: 600px;
    background: #7B2FBE;
    bottom: -200px;
    right: -200px;
    animation-delay: -6s;
    animation-duration: 22s;
}
.orb-3 {
    width: 450px;
    height: 450px;
    background: #00C9FF;
    top: 40%;
    left: 30%;
    animation-delay: -10s;
    animation-duration: 15s;
    opacity: 0.2;
}

@keyframes floatOrb {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(40px, -30px); }
    66% { transform: translate(-30px, 20px); }
}

.particles-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.lf-welcome h2 {
    padding-top: 25px;
}