body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99,102,184,.18) 0%, transparent 65%),
                  linear-gradient(160deg, var(--navy) 0%, var(--navy2) 60%, var(--navy3) 100%);
    }
    [data-theme="light"] body {
      background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99,102,184,.13) 0%, transparent 65%),
                  linear-gradient(160deg, #EEEEF8 0%, #E4E5F4 60%, #D8DAF0 100%);
    }

    /* HERO */
    .auth-layout {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      position: relative;
      overflow: hidden;
    }
    .ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(99,102,184,.06);
      pointer-events: none;
    }

    /* AUTH BOX */
    .auth-box {
      width: 100%;
      max-width: 860px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      border: var(--border);
      border-radius: var(--r-xl);
      overflow: hidden;
      background: rgba(10,22,40,.7);
      backdrop-filter: blur(20px);
      box-shadow: 0 32px 80px rgba(0,0,0,.5);
    }

    /* LEFT PANEL */
    .auth-left {
      background: linear-gradient(145deg, var(--blue-900) 0%, var(--navy2) 100%);
      padding: 48px 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
    }
    .auth-left::before {
      content: '';
      position: absolute;
      width: 280px; height: 280px;
      border-radius: 50%;
      border: 1px solid rgba(99,102,184,.12);
      top: -80px; right: -80px;
    }
    .auth-left::after {
      content: '';
      position: absolute;
      width: 160px; height: 160px;
      border-radius: 50%;
      border: 1px solid rgba(99,102,184,.08);
      bottom: 40px; left: -40px;
    }
    .auth-logo {
      font-family: var(--font-display);
      font-size: 18px; font-weight: 700;
      color: var(--blue-200);
      letter-spacing: -.5px;
      position: relative; z-index: 1;
    }
    .auth-logo span { color: var(--blue-400); }
    .auth-tagline {
      position: relative; z-index: 1;
    }
    .auth-tagline h1 {
      font-family: var(--font-display);
      font-size: 26px; font-weight: 700;
      color: var(--blue-50);
      line-height: 1.2;
      margin-bottom: 12px;
    }
    .auth-tagline h1 em { color: var(--blue-400); font-style: normal; }
    .auth-tagline p { font-size: 13px; color: var(--blue-200); line-height: 1.65; }
    .auth-features {
      position: relative; z-index: 1;
      display: flex; flex-direction: column; gap: 12px;
    }
    .feature-item {
      display: flex; align-items: center; gap: 10px;
      font-size: 12px; color: var(--blue-200);
    }
    .feature-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--blue-400);
      flex-shrink: 0;
    }

    /* RIGHT PANEL */
    .auth-right {
      padding: 48px 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .auth-right h2 {
      font-family: var(--font-display);
      font-size: 20px; font-weight: 700;
      color: var(--blue-50);
      margin-bottom: 4px;
    }
    .auth-right .sub {
      font-size: 13px; color: var(--blue-200);
      margin-bottom: 28px;
    }

    /* TABS */
    .tabs {
      display: flex; gap: 0;
      background: rgba(255,255,255,.04);
      border: var(--border);
      border-radius: var(--r-md);
      overflow: hidden;
      margin-bottom: 28px;
    }
    .tab-btn {
      flex: 1; padding: 10px 12px;
      background: transparent; border: none;
      font-family: var(--font-body);
      font-size: 13px; font-weight: 500;
      color: var(--blue-200);
      cursor: pointer; transition: all .2s;
    }
    .tab-btn.active {
      background: var(--blue-600);
      color: var(--blue-50);
    }

    /* FORM PANEL */
    .tab-panel { display: none; }
    .tab-panel.active { display: block; animation: slideDown .2s ease; }

    /* ROLE SELECTOR */
    .role-selector {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 8px; margin-bottom: 16px;
    }
    .role-card {
      padding: 12px 14px;
      border: var(--border);
      border-radius: var(--r-md);
      cursor: pointer;
      background: transparent;
      transition: all .2s;
      text-align: left;
    }
    .role-card:hover { background: var(--glass-h); border-color: rgba(99,102,184,.4); }
    .role-card.selected { background: rgba(57,60,128,.2); border-color: var(--blue-400); }
    .role-card .role-icon { font-size: 22px; margin-bottom: 6px; display: block; }
    .role-card .role-name {
      font-size: 13px; font-weight: 500; color: var(--blue-50); display: block;
    }
    .role-card .role-desc { font-size: 11px; color: var(--blue-200); }

    /* GLOBAL ERROR */
    .alert {
      padding: 10px 14px;
      border-radius: var(--r-sm);
      font-size: 13px;
      margin-bottom: 14px;
      display: none;
    }
    .alert.error { background: var(--red-bg); border: 1px solid var(--red-bd); color: var(--red); display: block; }
    .alert.success { background: var(--green-bg); border: 1px solid var(--green-bd); color: var(--green); display: block; }

    /* RESPONSIVE */
    @media (max-width: 700px) {
      .auth-layout { padding: 0; align-items: stretch; }
      .auth-box {
        grid-template-columns: 1fr;
        border-radius: 0;
        border-left: none; border-right: none;
        min-height: 100vh;
        box-shadow: none;
      }
      .auth-left { display: none; }
      .auth-right { padding: 40px 24px 32px; justify-content: flex-start; }
      .auth-right h2 { font-size: 22px; }
      .role-selector { grid-template-columns: 1fr 1fr; gap: 6px; }
      .role-card { padding: 10px 8px; }
      .role-card .role-icon { font-size: 18px; }
      .role-card .role-name { font-size: 12px; }
      .role-card .role-desc { font-size: 10px; }
      .form-row { grid-template-columns: 1fr; }
      .mobile-logo-wrap { display: block !important; }
      .ring { display: none; }
      .tabs { margin-bottom: 20px; }
      .auth-right .sub { font-size: 12px; margin-bottom: 20px; }
      .auth-tagline h1 { font-size: 22px; }
    }
    @media (max-width: 400px) {
      .auth-right { padding: 28px 14px 20px; }
      .auth-right h2 { font-size: 20px; }
      .role-selector { grid-template-columns: 1fr; }
    }
    /* Mobile: solo ícono en el toggle */
    @media (max-width: 640px) {
      .theme-label { display: none; }
      .theme-toggle { padding: 6px 8px; width: 36px; height: 36px; justify-content: center; border-radius: 50%; }
    }