/* AUTOR MRNICE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --g1:  #00ff00;
    --g2:  #003f00;
    --g3:  #00cc00;
    --g4:  #001a00;
    --t1:  #00ffff;
    --t2:  #008080;
    --pk:  #e91e8c;
    --pk2: #ff4db8;
    --bg:  #010d01;
    --font-head: 'Orbitron', monospace;
    --font-mono: 'Share Tech Mono', monospace;
    --font-body: 'Rajdhani', sans-serif;
    --r: 6px;
    --glow-g:  0 0 16px #00ff0044;
    --glow-c:  0 0 16px #00ffff33;
    --glow-pk: 0 0 16px #e91e8c55;
}

.login-body {
    min-height: 100vh;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    position: relative;
    overflow: hidden;
}

.login-bg-grid {
    position: fixed;
    inset: 0;
    background-image:
            repeating-linear-gradient(0deg,   transparent, transparent 39px, #00200066 39px, #00200066 40px),
            repeating-linear-gradient(90deg,  transparent, transparent 39px, #00200033 39px, #00200033 40px);
    pointer-events: none;
    z-index: 0;
}

.login-bg-glow {
    position: fixed;
    inset: 0;
    background:
            radial-gradient(ellipse at 20% 20%, #003f0033 0%, transparent 55%),
            radial-gradient(ellipse at 80% 80%, #e91e8c11 0%, transparent 55%),
            radial-gradient(ellipse at 50% 50%, #00808018 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.login-body::after {
    content: '';
    position: fixed;
    top: -100%; left: 0; right: 0;
    height: 40px;
    background: linear-gradient(transparent, rgba(0,255,0,.012), transparent);
    animation: scan 7s linear infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes scan { to { top: 120%; } }

.login-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* ── Branding ── */
.login-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 4px;
}
.login-brand-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #001a00, #003300);
    border: 1px solid var(--g1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--g1);
    box-shadow: var(--glow-g), inset 0 0 16px rgba(0,255,0,.08);
    animation: iconPulse 3s ease-in-out infinite;
}
@keyframes iconPulse {
    0%,100% { box-shadow: var(--glow-g), inset 0 0 16px rgba(0,255,0,.08); }
    50%      { box-shadow: 0 0 28px #00ff0066, inset 0 0 20px rgba(0,255,0,.15); }
}
.login-brand-name {
    font-family: var(--font-head);
    font-size: 26px;
    font-weight: 900;
    color: var(--g1);
    letter-spacing: 3px;
    text-shadow: 0 0 20px #00ff0066;
}
.login-brand-sub {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--t2);
    letter-spacing: 2.5px;
    margin-top: 3px;
    line-height: 1.4;
}

/* ── CARD — fondo semitransparente para ver el circuito de fondo ── */
.login-card {
    width: 100%;
    /* === CAMBIO CLAVE: rgba con 0.55 de opacidad + blur para profundidad === */
    background: rgba(2, 14, 2, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--t2);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--glow-c), 0 32px 80px rgba(0,0,0,.85);
    position: relative;
}
.login-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
    transparent, var(--g1) 20%, var(--t1) 50%, var(--pk) 75%, transparent);
    background-size: 200%;
    animation: borderFlow 4s linear infinite;
}
@keyframes borderFlow { to { background-position: 200% 0; } }

.login-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 24px 14px;
    border-bottom: 1px solid #002200;
    font-family: var(--font-head);
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--t1);
    text-shadow: 0 0 10px var(--t1);
}
.lch-icon {
    font-size: 16px;
    animation: iconPulse 2s ease-in-out infinite;
}

.login-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 24px 0;
    padding: 10px 14px;
    background: #1a0010;
    border: 1px solid var(--pk);
    border-radius: var(--r);
    color: var(--pk2);
    font-family: var(--font-mono);
    font-size: 12px;
    box-shadow: var(--glow-pk);
}
.login-alert i { font-size: 14px; flex-shrink: 0; }

form {
    padding: 22px 24px 8px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lf-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lf-group label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2.5px;
    color: var(--t2);
    display: flex;
    align-items: center;
    gap: 5px;
}
.lf-group label i { font-size: 11px; }

.lf-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.lf-prefix {
    position: absolute;
    left: 13px;
    color: var(--g2);
    font-size: 15px;
    pointer-events: none;
    transition: color .2s;
    z-index: 1;
}
.lf-input-wrap:focus-within .lf-prefix {
    color: var(--g3);
}
.lf-input-wrap input {
    width: 100%;
    height: 46px;
    padding: 0 44px 0 40px;
    background: rgba(0, 15, 0, 0.80);
    color: var(--g1);
    border: 1px solid #004400;
    border-radius: var(--r);
    font-family: var(--font-mono);
    font-size: 14px;
    outline: none;
    transition: all .25s;
    letter-spacing: 1px;
}
.lf-input-wrap input:focus {
    border-color: var(--g1);
    background: rgba(0, 24, 0, 0.90);
    box-shadow: 0 0 0 3px rgba(0,255,0,.08), inset 0 0 12px rgba(0,255,0,.04);
}
.lf-input-wrap input::placeholder {
    color: #004400;
    letter-spacing: 0;
}

.lf-eye {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: #004400;
    cursor: pointer;
    font-size: 16px;
    padding: 6px;
    transition: color .2s;
    display: flex;
    align-items: center;
}
.lf-eye:hover { color: var(--t1); }

/* Submit */
.login-btn {
    width: 100%;
    height: 50px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #004400 0%, #006600 100%);
    color: var(--g1);
    border: 1px solid var(--g1);
    border-radius: var(--r);
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all .25s;
    box-shadow: var(--glow-g);
    text-shadow: 0 0 10px rgba(0,255,0,.6);
}
.login-btn i { font-size: 18px; }
.login-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    animation: btnScan 2.5s ease-in-out infinite;
}
@keyframes btnScan { 0%,100%{left:-100%} 50%{left:200%} }
.login-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #006600, #009900);
    box-shadow: 0 0 28px #00ff0077;
    transform: translateY(-2px);
}
.login-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}

.login-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 14px 24px 16px;
    border-top: 1px solid #001a00;
    font-family: var(--font-mono);
    font-size: 10px;
    color: #00ffea;
    letter-spacing: 1px;
}

.login-card-footer i { font-size: 12px; color: var(--t2); }

.login-version {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #003300;
    letter-spacing: 2px;
    text-align: center;
}
.login-version i { font-size: 10px; }

.spin {
    display: inline-block;
    animation: spinAnim .7s linear infinite;
}
@keyframes spinAnim { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
    .login-wrap { padding: 16px; }
    .login-brand-name { font-size: 20px; }
    .login-brand-icon { width: 46px; height: 46px; font-size: 22px; }
}

.login-alert {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    margin: 0 auto;
    background: #1a0000;
    border: 1px solid #ff0000;
    border-radius: var(--r);
    color: #ff4444;
    font-family: var(--font-mono);
    font-size: 12px;
    box-shadow: 0 0 8px #ff000044, 0 0 20px #ff000022;
    max-width: fit-content;
    width: 100%;
}
.login-alert i {
    font-size: 16px;
    flex-shrink: 0;
    color: #ff4444;
}

/* USER DROPDOWN */
.user-dropdown { position: relative; }
.user-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: var(--r);
    cursor: pointer;
    transition: all .2s;
    font-family: var(--font-mono);
    font-size: 12px;
    color: #fff;
}
.user-dropdown-btn:hover,
.user-dropdown-btn.active {
    background: rgba(0,0,0,.5);
    border-color: #fff;
    box-shadow: 0 0 10px rgba(255,255,255,.2);
}
.ud-username {
    font-family: var(--font-head);
    font-size: 11px;
    letter-spacing: 1px;
    color: #fff;
}
.ud-rol {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--pk2);
    letter-spacing: 1px;
    padding: 1px 6px;
    background: rgba(233,30,140,.15);
    border: 1px solid var(--pk3);
    border-radius: 3px;
}
.ud-arrow {
    font-size: 10px;
    color: rgba(255,255,255,.5);
    transition: transform .2s;
}
.user-dropdown-btn.active .ud-arrow { transform: rotate(180deg); }
.ud-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: #020e02;
    border: 1px solid #005555;
    border-radius: var(--r2);
    box-shadow: 0 0 20px #00808033, 0 16px 40px rgba(0,0,0,.9);
    z-index: 2000;
    overflow: hidden;
    animation: dropIn .2s ease;
}
.ud-menu.open { display: block; }
@keyframes dropIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ud-menu-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid #003300;
    background: #010d01;
}
.ud-menu-name {
    font-family: var(--font-head);
    font-size: 13px;
    color: var(--g1);
    letter-spacing: 1px;
}
.ud-menu-rol {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--pk2);
    letter-spacing: 2px;
    margin-top: 2px;
}
.ud-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--g1);
    text-decoration: none;
    transition: background .15s;
    border-bottom: 1px solid #001800;
}
.ud-item:last-child { border-bottom: none; }
.ud-item:hover { background: #003300; color: var(--t1); }
.ud-item i { font-size: 14px; width: 16px; }
.ud-item--danger { color: var(--pk2); }
.ud-item--danger:hover { background: #1a0010; color: #fff; }
.ud-divider { height: 1px; background: #003300; margin: 2px 0; }

/* CUENTA PAGE */
.cuenta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
    max-width: 860px;
}
.cuenta-card {
    background: var(--bg-card);
    border-radius: var(--r2);
    overflow: hidden;
    border: 1px solid #003300;
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.cc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    font-family: var(--font-head);
    font-size: 10px;
    letter-spacing: 2px;
    border-bottom: 1px solid #002200;
}
.cch-green { background: linear-gradient(135deg,#001a00,#003300); color: var(--g1); }
.cch-cyan  { background: linear-gradient(135deg,#001a22,#003344); color: var(--t1); }
.cc-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cc-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 12px;
    border-bottom: 1px solid #001800;
}
.cc-field:last-child { border-bottom: none; padding-bottom: 0; }
.cc-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--t2);
}
.cc-val { font-family: var(--font-mono); font-size: 14px; color: var(--g1); }
.cc-val--big  { font-size: 18px; font-weight: 700; }
.cc-val--huge { font-size: 28px; font-weight: 700; letter-spacing: 2px; }
.cc-sin-plan {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    text-align: center;
}
.cc-progress-wrap { display: flex; flex-direction: column; gap: 6px; }
.cc-progress-bar {
    height: 6px;
    background: #003300;
    border-radius: 3px;
    overflow: hidden;
}
.cc-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .5s ease;
    box-shadow: 0 0 8px currentColor;
}
.cc-progress-label {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
}
.cuenta-actions {
    max-width: 860px;
    display: flex;
    gap: 10px;
}
@media (max-width: 600px) { .cuenta-grid { grid-template-columns: 1fr; } }

/* PLANES CLIENTE */
.planes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.plan-card {
    background: #020e02;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #003300;
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
    position: relative;
}
.plan-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.pc-tiempo::before  { background: linear-gradient(90deg, transparent, var(--t1), transparent); }
.pc-creditos::before { background: linear-gradient(90deg, transparent, var(--g1), transparent); }
.pc-padron::before  { background: linear-gradient(90deg, transparent, var(--pk2), transparent); }
.pc-tiempo  { border-color: var(--t2); }
.pc-creditos { border-color: #004400; }
.pc-padron  { border-color: var(--pk3); }
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.pc-tiempo:hover  { box-shadow: 0 8px 30px #00ffff22; }
.pc-creditos:hover { box-shadow: 0 8px 30px #00ff0022; }
.pc-padron:hover  { box-shadow: 0 8px 30px #ff4db822; }
.pc-header {
    padding: 20px 18px 16px;
    border-bottom: 1px solid #002200;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pc-tipo-badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 2px;
    background: rgba(0,255,255,.1);
    color: var(--t1);
    border: 1px solid var(--t2);
}
.pc-creditos .pc-tipo-badge {
    background: rgba(0,255,0,.1);
    color: var(--g1);
    border-color: #004400;
}
.pc-nombre { font-family: var(--font-head); font-size: 13px; letter-spacing: 1px; color: var(--g1); }
.pc-precio {
    font-family: var(--font-head);
    font-size: 28px;
    font-weight: 900;
    color: var(--g1);
    text-shadow: 0 0 16px #00ff0055;
    line-height: 1;
}
.pc-moneda { font-size: 12px; color: var(--txt-muted); font-weight: 400; margin-left: 4px; }
.pc-body {
    padding: 14px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pc-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--t2);
}
.pc-feature i { color: var(--g1); font-size: 14px; width: 16px; }
.pc-footer {
    padding: 14px 18px;
    border-top: 1px solid #002200;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    border-radius: var(--r);
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all .2s;
}
.pc-btn-telegram {
    background: linear-gradient(135deg, #0a3d6b, #0088cc);
    color: #fff;
    border: 1px solid #0088cc;
}
.pc-btn-telegram:hover { box-shadow: 0 0 16px #0088cc66; transform: translateY(-1px); }
.pc-btn-signal {
    background: linear-gradient(135deg, #1a0020, #3d0050);
    color: #cc99ff;
    border: 1px solid #7700cc;
    font-size: 9px;
}
.pc-btn-signal:hover { box-shadow: 0 0 16px #7700cc44; transform: translateY(-1px); }
.planes-nofondos-wrap {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: #020e02;
    border: 1px solid #003300;
    border-radius: var(--r2);
    text-align: center;
}
.planes-nofondos-wrap img { max-width: 200px; border-radius: 8px; }
.planes-nofondos-msg {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--txt-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
.planes-nofondos-msg i { color: var(--t1); }
.planes-contact-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 600px) { .planes-grid { grid-template-columns: 1fr; } }

.login-success-msg {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: #001a00;
    border: 1px solid var(--g1);
    border-radius: var(--r);
    color: var(--g1);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1px;
    box-shadow: 0 0 8px #00ff0033, 0 0 20px #00ff0011;
    animation: fadeInDown .4s ease;
    width: 100%;
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════════
   LOGIN — CIRCUIT BACKGROUND
   Agrega esto a tu login.css existente
   ═══════════════════════════════════════════════════════════════ */

/* 1. Body base para el fondo negro y centrado */
.login-body {
    background: #000;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

/* 2. SVG del circuito: fijo, cubre toda la pantalla, z-index 0 */
.login-circuit-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.88;
    pointer-events: none;
}

/* 3. El contenedor principal sube por encima del SVG */
.login-wrap {
    position: relative;
    z-index: 10;
}

/* 4. La card con vidrio esmerilado sobre el circuito */
.login-card {
    background: rgba(0, 8, 0, 0.72) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-color: rgba(0, 200, 50, 0.22) !important;
}

/*    ANIMACIONES DEL CIRCUITO */

@keyframes lcb-fp  { 0% { stroke-dashoffset: 36 } 100% { stroke-dashoffset: 0 } }
@keyframes lcb-fp2 { 0% { stroke-dashoffset: 22 } 100% { stroke-dashoffset: 0 } }
@keyframes lcb-fp3 { 0% { stroke-dashoffset: 48 } 100% { stroke-dashoffset: 0 } }
@keyframes lcb-fb  { 0% { stroke-dashoffset: 28 } 100% { stroke-dashoffset: 0 } }
@keyframes lcb-fb2 { 0% { stroke-dashoffset: 18 } 100% { stroke-dashoffset: 0 } }
@keyframes lcb-fd  { 0% { stroke-dashoffset: 40 } 100% { stroke-dashoffset: 0 } }
@keyframes lcb-fd2 { 0% { stroke-dashoffset: 14 } 100% { stroke-dashoffset: 0 } }
@keyframes lcb-fg  { 0% { stroke-dashoffset: 36 } 100% { stroke-dashoffset: 0 } }
@keyframes lcb-fg2 { 0% { stroke-dashoffset: 24 } 100% { stroke-dashoffset: 0 } }
@keyframes lcb-pulP  { 0%, 100% { opacity: .20 } 50% { opacity: .05 } }
@keyframes lcb-pulB  { 0%, 100% { opacity: .17 } 50% { opacity: .04 } }
@keyframes lcb-pulD  { 0%, 100% { opacity: .24 } 50% { opacity: .07 } }
@keyframes lcb-pulse { 0%, 100% { opacity:  1  } 50% { opacity: .30 } }
@keyframes lcb-blink { 0%, 49% { opacity: 1 } 50%, 99% { opacity: 0 } }

/* ROSA CLARO */
.lcb-p  { stroke: #ff69b4; fill: none; stroke-linecap: square }
.lcb-pa { stroke-width: 1.8; opacity: .20 }
.lcb-pb { stroke-width: 1.2; opacity: .14 }
.lcb-pc { stroke-width:  .7; opacity: .10 }

.lcb-pfa { stroke: #ff69b4; fill: none; stroke-linecap: square; stroke-dasharray: 9 5; animation: lcb-fp  1.2s linear infinite; opacity: .20 }
.lcb-pfb { stroke: #ff69b4; fill: none; stroke-linecap: square; stroke-dasharray: 6 6; animation: lcb-fp2 1.8s linear infinite; opacity: .15 }
.lcb-pfc { stroke: #ff69b4; fill: none; stroke-linecap: square; stroke-dasharray: 3 8; animation: lcb-fp3 2.5s linear infinite; opacity: .10 }

.lcb-pn  { fill: #ff69b4; opacity: .22 }
.lcb-pnr { fill: none; stroke: #ff69b4; stroke-width: .9; opacity: .20 }
.lcb-pc2 { fill: #1a0010; stroke: #ff69b4; stroke-width: .7; opacity: .22 }

.lcb-bp1 { animation: lcb-pulP 3.1s         ease-in-out infinite }
.lcb-bp2 { animation: lcb-pulP 2.5s  .6s    ease-in-out infinite }
.lcb-bp3 { animation: lcb-pulP 3.9s  1.2s   ease-in-out infinite }
.lcb-bp4 { animation: lcb-pulP 2.8s   .3s   ease-in-out infinite }
.lcb-bp5 { animation: lcb-pulP 4.2s   .8s   ease-in-out infinite }
.lcb-bp6 { animation: lcb-pulP 2.2s  1.5s   ease-in-out infinite }

/*  AZUL  */
.lcb-bx  { stroke: #4da6ff; fill: none; stroke-linecap: square }
.lcb-bxa { stroke-width: 1.8; opacity: .17 }
.lcb-bxb { stroke-width: 1.2; opacity: .12 }
.lcb-bxc { stroke-width:  .7; opacity: .09 }

.lcb-bfa { stroke: #4da6ff; fill: none; stroke-linecap: square; stroke-dasharray:  8 5; animation: lcb-fb  1.6s linear infinite; opacity: .17 }
.lcb-bfb { stroke: #4da6ff; fill: none; stroke-linecap: square; stroke-dasharray:  5 7; animation: lcb-fb2 2.1s linear infinite; opacity: .12 }
.lcb-bfc { stroke: #4da6ff; fill: none; stroke-linecap: square; stroke-dasharray: 11 4; animation: lcb-fp  1.0s linear infinite; opacity: .09 }

.lcb-bn  { fill: #4da6ff; opacity: .19 }
.lcb-bnr { fill: none; stroke: #4da6ff; stroke-width: .9; opacity: .17 }
.lcb-bc2 { fill: #00081a; stroke: #4da6ff; stroke-width: .7; opacity: .18 }

.lcb-bb1 { animation: lcb-pulB 2.8s         ease-in-out infinite }
.lcb-bb2 { animation: lcb-pulB 3.4s   .5s   ease-in-out infinite }
.lcb-bb3 { animation: lcb-pulB 2.3s  1.0s   ease-in-out infinite }
.lcb-bb4 { animation: lcb-pulB 3.7s   .2s   ease-in-out infinite }
.lcb-bb5 { animation: lcb-pulB 4.1s   .7s   ease-in-out infinite }
.lcb-bb6 { animation: lcb-pulB 2.6s  1.3s   ease-in-out infinite }

/* ROSA OSCURO */
.lcb-d  { stroke: #c0006a; fill: none; stroke-linecap: square }
.lcb-da { stroke-width: 1.8; opacity: .25 }
.lcb-db { stroke-width: 1.2; opacity: .17 }
.lcb-dc { stroke-width:  .7; opacity: .12 }

.lcb-dfa { stroke: #c0006a; fill: none; stroke-linecap: square; stroke-dasharray: 7 5; animation: lcb-fd  1.9s linear infinite; opacity: .23 }
.lcb-dfb { stroke: #c0006a; fill: none; stroke-linecap: square; stroke-dasharray: 4 8; animation: lcb-fd2 2.4s linear infinite; opacity: .17 }
.lcb-dfc { stroke: #c0006a; fill: none; stroke-linecap: square; stroke-dasharray:10 4; animation: lcb-fb  1.4s linear infinite; opacity: .13 }

.lcb-dn  { fill: #c0006a; opacity: .26 }
.lcb-dnr { fill: none; stroke: #c0006a; stroke-width: .9; opacity: .24 }
.lcb-dc2 { fill: #150008; stroke: #c0006a; stroke-width: .7; opacity: .27 }

.lcb-bd1 { animation: lcb-pulD 3.0s   .3s   ease-in-out infinite }
.lcb-bd2 { animation: lcb-pulD 2.5s   .9s   ease-in-out infinite }
.lcb-bd3 { animation: lcb-pulD 3.6s   .1s   ease-in-out infinite }
.lcb-bd4 { animation: lcb-pulD 2.1s  1.4s   ease-in-out infinite }
.lcb-bd5 { animation: lcb-pulD 4.0s   .6s   ease-in-out infinite }
.lcb-bd6 { animation: lcb-pulD 2.8s  1.1s   ease-in-out infinite }

/* VERDE (primer plano)*/
.lcb-tr  { stroke: #00ff41; stroke-width: 2;   fill: none; stroke-linecap: square }
.lcb-tr2 { stroke: #00c832; stroke-width: 1.3; fill: none; stroke-linecap: square }
.lcb-tr3 { stroke: #007a20; stroke-width: 1;   fill: none; stroke-linecap: square }

.lcb-nd  { fill: #00ff41 }
.lcb-nr  { fill: none; stroke: #00ff41; stroke-width: 1.3 }
.lcb-nr2 { fill: none; stroke: #00ff41; stroke-width:  .8; opacity: .5 }
.lcb-ch2 { fill: #001a05; stroke: #00c832; stroke-width: 1 }

.lcb-fl  { stroke: #00ff41; stroke-width: 2;   fill: none; stroke-linecap: square; stroke-dasharray: 7 4; animation: lcb-fg  1.0s linear infinite }
.lcb-fl2 { stroke: #00c832; stroke-width: 1.3; fill: none; stroke-linecap: square; stroke-dasharray: 5 5; animation: lcb-fg2 1.5s linear infinite }
.lcb-fl3 { stroke: #007a20; stroke-width: 1;   fill: none; stroke-linecap: square; stroke-dasharray: 3 6; animation: lcb-fg2 2.0s linear infinite }

.lcb-g1 { animation: lcb-pulse 2.2s         ease-in-out infinite }
.lcb-g2 { animation: lcb-pulse 1.8s   .4s   ease-in-out infinite }
.lcb-g3 { animation: lcb-pulse 2.6s   .8s   ease-in-out infinite }

.lcb-cursor { animation: lcb-blink .9s step-end infinite }

/* Imagen del logo */
.login-brand-icon {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}
.login-brand-img {
    width: 65px;
    height: 72px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 8px #00ff4160);
}

/* Card más transparente — se ve el circuito detrás */
.login-card {
    background: rgba(0, 8, 0, 0.38) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(0, 255, 65, 0.20) !important;
}