*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Inter', sans-serif; display: flex; height: 100vh; overflow: hidden; background: #080C14; }

    /* ══════════════ LEFT PANEL ══════════════ */
    .left {
      flex: 1; position: relative; overflow: hidden;
      display: flex; flex-direction: column; justify-content: space-between;
      padding: 36px 44px;
      background: #080C14;
    }
    /* Canvas de partículas de fondo */
    #lbf-canvas { position:absolute; inset:0; z-index:0; }
    /* Gradiente rojo sobre canvas */
    .left-glow {
      position:absolute; inset:0; z-index:1; pointer-events:none;
      background:
        radial-gradient(ellipse 70% 55% at 30% 45%, rgba(229,57,53,.18) 0%, transparent 65%),
        radial-gradient(ellipse 40% 40% at 80% 80%, rgba(183,28,28,.22) 0%, transparent 55%);
    }
    /* Línea roja decorativa lateral */
    .left::after {
      content:''; position:absolute; left:0; top:20%; bottom:20%;
      width:3px; background:linear-gradient(to bottom, transparent, #E53935, transparent);
      z-index:2; border-radius:2px;
    }
    .left-top, .left-center, .left-bottom { position:relative; z-index:3; }
    .left-top { display:flex; justify-content:space-between; align-items:center; }

    /* Logo LBF */
    .lbf-logo-wrap { display:flex; align-items:center; gap:12px; }
    .lbf-icon {
      width:42px; height:42px; border-radius:10px; flex-shrink:0;
      background:linear-gradient(135deg,#C62828,#E53935);
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 0 20px rgba(229,57,53,.4);
    }
    .lbf-icon i { font-size:18px; color:#fff; }
    .lbf-name { font-size:15px; font-weight:800; color:#fff; line-height:1.1; letter-spacing:-.3px; }
    .lbf-name span { font-size:11px; font-weight:500; color:rgba(255,255,255,.45); display:block; margin-top:1px; letter-spacing:.02em; }
    .live-badge {
      display:flex; align-items:center; gap:5px;
      background:rgba(229,57,53,.15); border:1px solid rgba(229,57,53,.3);
      border-radius:20px; padding:5px 12px; font-size:11px; font-weight:700; color:#FF6B6B;
    }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }
    .live-dot { width:6px; height:6px; border-radius:50%; background:#E53935; animation:pulse 2s infinite; }

    /* Hero texto */
    .left-center { flex:1; display:flex; flex-direction:column; justify-content:center; padding:32px 0; }
    .eyebrow { font-size:10px; font-weight:700; letter-spacing:.16em; color:rgba(255,255,255,.35); text-transform:uppercase; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
    .eyebrow::before { content:''; display:block; width:24px; height:1px; background:rgba(229,57,53,.7); }
    .hero-title { font-size:40px; font-weight:900; line-height:1.08; color:#fff; margin-bottom:8px; letter-spacing:-.5px; }
    .hero-title .brand-red { color:#E53935; }
    .hero-sub { font-size:14px; color:rgba(255,255,255,.4); margin-bottom:36px; line-height:1.5; }

    /* Métricas flotantes */
    .metrics-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:28px; }
    .metric-card {
      background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
      border-radius:14px; padding:14px 16px; backdrop-filter:blur(8px);
      transition:transform .3s, border-color .3s;
    }
    .metric-card:hover { transform:translateY(-2px); border-color:rgba(229,57,53,.3); }
    .metric-card .mc-icon { font-size:13px; margin-bottom:8px; }
    .metric-card .mc-val { font-size:24px; font-weight:800; color:#fff; letter-spacing:-.5px; line-height:1; }
    .metric-card .mc-lbl { font-size:10px; color:rgba(255,255,255,.4); margin-top:3px; font-weight:500; text-transform:uppercase; letter-spacing:.04em; }
    .metric-card .mc-trend { display:flex; align-items:center; gap:3px; font-size:10px; font-weight:700; margin-top:6px; }
    .trend-up { color:#4ADE80; }
    .trend-neutral { color:rgba(255,255,255,.3); }

    /* Barra de progreso animada */
    .progress-row { margin-bottom:8px; }
    .progress-label { display:flex; justify-content:space-between; font-size:10px; color:rgba(255,255,255,.4); margin-bottom:4px; font-weight:600; }
    .progress-track { height:4px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; }
    .progress-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,#C62828,#E53935,#FF6B6B); transform-origin:left; animation:growBar 1.4s ease forwards; }
    @keyframes growBar { from{transform:scaleX(0)} to{transform:scaleX(1)} }

    .left-bottom { display:flex; justify-content:space-between; align-items:flex-end; }
    .dev-tag { font-size:10px; color:rgba(255,255,255,.25); display:flex; align-items:center; gap:5px; }
    .dev-tag i { font-size:9px; }
    .enc-tag { display:flex; align-items:center; gap:5px; color:rgba(255,255,255,.2); font-size:10px; }

    /* ══════════════ RIGHT PANEL ══════════════ */
    @keyframes slideInRight { from{opacity:0;transform:translateX(32px)} to{opacity:1;transform:translateX(0)} }
    .right {
      width: 500px; flex-shrink: 0;
      background: #fff; display: flex; flex-direction: column;
      animation: slideInRight .5s ease;
    }
    .right-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 20px 36px; border-bottom: 1px solid #F3F4F6;
    }
    .brand-logo { display: flex; align-items: center; gap: 10px; }
    .logo-icon { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; flex-shrink: 0; }
    .brand-text .name { font-size: 13px; font-weight: 700; color: #111; line-height: 1; }
    .brand-text .sub  { font-size: 11px; color: #aaa; margin-top: 1px; }
    .right-version { font-size: 11px; color: #D1D5DB; font-weight: 600; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 6px; padding: 3px 8px; }

    .right-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 36px 48px; }
    .access-label { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: #9CA3AF; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
    .access-dot { width: 6px; height: 6px; border-radius: 50%; background: #E53935; animation: pulse 2s infinite; }
    h1 { font-size: 30px; font-weight: 900; color: #111827; margin-bottom: 6px; letter-spacing: -.4px; }
    .h1-sub { font-size: 13px; color: #9CA3AF; margin-bottom: 28px; }
    .h1-sub strong { color: #E53935; font-weight: 700; }

    /* Inputs */
    .form-group { margin-bottom: 16px; }
    .form-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
    label { font-size: 12px; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: .04em; }
    .forgot-link { font-size: 12px; color: #E53935; text-decoration: none; font-weight: 600; }
    .forgot-link:hover { text-decoration: underline; }
    .input-wrap {
      display: flex; align-items: center;
      background: #F9FAFB; border: 1.5px solid #E5E7EB; border-radius: 12px;
      transition: border-color .2s, background .2s, box-shadow .2s;
    }
    .input-wrap:focus-within {
      border-color: #E53935; background: #fff;
      box-shadow: 0 0 0 3px rgba(229,57,53,.08);
    }
    .input-icon { padding: 0 13px; color: #9CA3AF; display: flex; align-items: center; font-size: 14px; }
    .input-wrap input {
      flex: 1; border: none; outline: none; background: transparent;
      font-size: 14px; color: #111827; padding: 13px 0; font-family: 'Inter', sans-serif;
    }
    .input-wrap input::placeholder { color: #C4C9D4; }
    .eye-btn { padding: 0 13px; background: none; border: none; cursor: pointer; color: #9CA3AF; display: flex; align-items: center; font-size: 14px; transition: color .2s; }
    .eye-btn:hover { color: #374151; }

    /* Remember */
    .checkbox-row { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; }
    .custom-check {
      width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid #D1D5DB;
      background: #F9FAFB; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: background .15s, border-color .15s;
    }
    .checkbox-row input[type="checkbox"] { display:none; }
    .checkbox-row input[type="checkbox"]:checked + .custom-check { background: #E53935; border-color: #E53935; }
    .checkbox-row input[type="checkbox"]:checked + .custom-check::after { content:''; display:block; width:9px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translateY(-1px); }
    .checkbox-row span { font-size: 13px; color: #374151; font-weight: 500; cursor: pointer; }

    /* Alerts */
    .alert-error   { background: #FFF0F0; border: 1px solid #FCA5A5; color: #991B1B; border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
    .alert-lockout { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
    .attempts-bar  { height: 3px; border-radius: 2px; background: #F3F4F6; margin-bottom: 16px; overflow: hidden; }
    .attempts-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg,#EF4444,#DC2626); transition: width .3s; }

    /* Botón */
    .btn-submit {
      width: 100%; padding: 14px; border: none; border-radius: 12px; cursor: pointer;
      font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 9px;
      font-family: 'Inter', sans-serif; letter-spacing: .02em;
      background: linear-gradient(135deg, #B91C1C 0%, #E53935 50%, #EF4444 100%);
      color: #fff; position: relative; overflow: hidden;
      box-shadow: 0 4px 20px rgba(229,57,53,.35);
      transition: opacity .2s, transform .1s, box-shadow .2s;
    }
    .btn-submit::before {
      content:''; position:absolute; inset:0;
      background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
      opacity:0; transition:opacity .2s;
    }
    .btn-submit:hover { opacity:.93; transform:translateY(-1px); box-shadow:0 6px 24px rgba(229,57,53,.45); }
    .btn-submit:hover::before { opacity:1; }
    .btn-submit:active { transform:translateY(0); }

    /* Footer */
    .right-footer { display: flex; justify-content: space-between; align-items: center; padding: 14px 36px; border-top: 1px solid #F3F4F6; }
    .ssl-tag { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #9CA3AF; }
    .footer-links { display: flex; gap: 12px; font-size: 11px; color: #C4C9D4; }
    .footer-links a { color: #9CA3AF; text-decoration: none; }
    .footer-links a:hover { color: #374151; }

    /* ── MOBILE ── */
    @media (max-width: 767px) {
      body { flex-direction: column; overflow: auto; height: auto; min-height: 100vh; }
      .left { display: none; }
      .right { width: 100%; min-height: 100vh; flex: 1; }
      .right-body { padding: 32px 24px; justify-content: flex-start; padding-top: 40px; }
      .right-footer { flex-direction: column; gap: 8px; text-align: center; padding: 14px 24px; }
    }

    /* ── Modal olvidé contraseña ── */
    .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000; align-items:center; justify-content:center; }
    .modal-overlay.open { display:flex; }
    .modal-box { background:#fff; border-radius:16px; padding:32px; width:100%; max-width:400px; box-shadow:0 20px 60px rgba(0,0,0,.3); animation:slideUp .2s ease; }
    @keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
    .modal-box h3 { font-size:18px; font-weight:700; color:#111; margin:0 0 6px; }
    .modal-box p  { font-size:13px; color:#6b7280; margin:0 0 20px; }
    .modal-input  { width:100%; padding:11px 14px; border:1.5px solid #e0e0e0; border-radius:10px; font-size:14px; font-family:inherit; outline:none; transition:border-color .2s; }
    .modal-input:focus { border-color:#DC2626; }
    .modal-btn    { width:100%; padding:12px; background:linear-gradient(135deg,#b91c1c,#DC2626); color:#fff; border:none; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; margin-top:12px; }
    .modal-btn:hover { opacity:.88; }
    .modal-cancel { display:block; text-align:center; margin-top:12px; font-size:13px; color:#6b7280; cursor:pointer; background:none; border:none; font-family:inherit; width:100%; }
    .modal-cancel:hover { color:#111; }
    .modal-ok  { background:#f0fdf4; border:1px solid #86efac; color:#15803d; border-radius:10px; padding:12px 14px; font-size:13px; margin-top:4px; }
    .modal-icon { width:48px; height:48px; background:#FEE2E2; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }