/* ---------- NUEVO DISEÑO (solo CSS cambiado) ---------- */
    :root{
      --azul:#0B3A82;
      --azul-2:#0E4AA8;
      --bg-dark:#0b1220;
      --panel:#0f1724;
      --accent:#1E90FF;
      --glass: rgba(255,255,255,0.04);
      --muted:#98a0ae;
      --white: #f8fafc;
      --radius:20px;
      --shadow: 0 14px 50px rgba(2,6,23,0.6);
      --ring: 0 0 0 6px rgba(11,58,130,0.06);
    }

    /* base reset */
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%;width:100%}
    body{
      font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background:
        radial-gradient(800px 400px at 10% 20%, rgba(11,58,130,0.18), transparent 18%),
        radial-gradient(700px 400px at 95% 80%, rgba(14,74,168,0.12), transparent 18%),
        linear-gradient(180deg, var(--bg-dark), #071022 80%);
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--white);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      overflow:auto;
      padding:32px;
    }

    /* center frame */
    .wrap {
      width:min(1000px, 96%);
      max-width:1000px;
      display:grid;
      grid-template-columns: 420px 1fr;
      gap:22px;
      align-items:stretch;
    }

    /* LEFT PANEL (strong visual break) */
    .panel-left{
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
      border-radius:var(--radius);
      padding:28px;
      position:relative;
      overflow:hidden;
      box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,0.03);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height:460px;
    }

    .accent-strip{
      position:absolute;
      left:0; top:0; bottom:0;
      width:8px;
      background: linear-gradient(180deg, var(--azul), var(--azul-2));
      border-top-left-radius:var(--radius);
      border-bottom-left-radius:var(--radius);
    }

    .brand{
      display:flex;
      gap:12px;
      align-items:center;
      z-index:2;
    }
    .brand .logo{
      width:56px;height:56px;border-radius:12px;
      background:linear-gradient(180deg,#fff,#e9f0ff);
      display:grid;place-items:center;color:var(--azul);font-weight:900;font-size:20px;
      box-shadow:0 10px 30px rgba(11,58,130,0.12);
    }
    .brand h3{font-size:20px;letter-spacing:0.2px}

    .hero-title{margin-top:22px;font-size:26px;font-weight:800;line-height:1.03;color:var(--white)}
    .hero-desc{margin-top:8px;color:var(--muted);font-weight:500;line-height:1.5}

    .left-illustration{
      margin-top:24px;
      width:100%;
      height:180px;
      border-radius:12px;
      background:
        radial-gradient(200px 100px at 20% 20%, rgba(255,255,255,0.04), transparent 10%),
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      display:flex;align-items:center;justify-content:center;
      color:rgba(255,255,255,0.07);font-weight:800;font-size:64px;
      user-select:none;
    }

    .left-foot{
      margin-top:18px;color:var(--muted);font-size:0.95rem;
      display:flex;gap:10px;align-items:center;justify-content:space-between;
    }

    /* RIGHT PANEL (form) */
    .panel-right{
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border-radius:var(--radius);
      padding:34px;
      box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,0.03);
      min-height:460px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      position:relative;
    }

    .form-head{
      display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;
    }
    .form-head h2{font-size:22px;margin:0;font-weight:800}
    .form-head .sub{color:var(--muted);font-size:0.95rem}

    /* form fields (new look) */
    .field{margin-bottom:14px}
    label.lbl{display:block;font-weight:700;margin-bottom:8px;font-size:0.90rem;color:rgba(255,255,255,0.88)}
    .inp-wrap{
      display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border:1px solid rgba(255,255,255,0.05);
      transition:box-shadow .15s ease, border-color .15s ease, transform .08s ease;
    }
    .inp-wrap:focus-within{box-shadow:var(--ring);border-color:rgba(30,144,255,0.28);transform:translateY(-1px)}
    .icon{width:18px;height:18px;opacity:0.9;display:inline-block;flex-shrink:0}
    .inp{
      border:0;background:transparent;color:var(--white);font-size:15px;padding:10px 6px;width:100%;
      outline:none;
    }

    .eye-btn{border:0;background:transparent;cursor:pointer;width:44px;height:44px;border-radius:10px;display:grid;place-items:center}
    .eye-btn:hover{background:rgba(255,255,255,0.02)}

    .caps{display:none;margin-top:8px;font-size:.88rem;color:#ff7b7b;font-weight:700}

    .actions{display:flex;justify-content:space-between;align-items:center;margin:8px 0 16px;gap:8px}
    .remember{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.95rem}
    .remember input{width:16px;height:16px;border-radius:4px}

    .btn{
      display:inline-block;width:100%;padding:14px;border-radius:12px;border:0;
      background:linear-gradient(90deg,var(--azul),var(--azul-2));
      color:white;font-weight:800;font-size:15px;cursor:pointer;transition:transform .12s ease,box-shadow .12s;
      box-shadow: 0 10px 30px rgba(10,40,100,0.28);
    }
    .btn:hover{transform:translateY(-3px)}
    .btn[aria-busy="true"]{opacity:.8;pointer-events:none}

    .alert{border-radius:10px;padding:12px 14px;margin-bottom:12px;font-weight:700;font-size:.95rem}
    .alert-err{background:rgba(255,120,120,0.06);color:#ff8b8b;border:1px solid rgba(255,120,120,0.08)}
    .alert-ok{background:rgba(80,255,150,0.04);color:#8ef0b3;border:1px solid rgba(80,255,150,0.06)}

    /* small screens: stack */
    @media (max-width:880px){
      .wrap{grid-template-columns:1fr; gap:14px}
      .panel-left{display:none}
      .panel-right{min-height:420px}
    }