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

    :root {
      --bg:          #0a0e17;
      --card:        #111827;
      --surface:     #1a2235;
      --border:      #243044;
      --accent:      #38bdf8;
      --accent-glow: rgba(56,189,248,.30);
      --accent-dim:  rgba(56,189,248,.08);
      --text:        #f0f4f8;
      --text-2:      #8fa3bc;
      --text-3:      #4a5e72;
      --danger:      #f87171;
      --ok:          #4ade80;
      --r:           10px;
    }

    html, body {
      height: 100%;
      background: var(--bg);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
      font-size: 15px;
    }

    /* Fondo con gradientes radiales */
    body::before {
      content: '';
      position: fixed; inset: 0;
      background:
        radial-gradient(ellipse 900px 600px at 10% 20%, rgba(56,189,248,.07) 0%, transparent 60%),
        radial-gradient(ellipse 700px 500px at 90% 80%, rgba(99,102,241,.07) 0%, transparent 60%);
      pointer-events: none;
    }

    /* Grid principal */
    .login-wrap {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 1fr 460px 1fr;
      grid-template-rows: 1fr auto 1fr;
      align-items: center;
    }

    .login-card {
      grid-column: 2;
      grid-row: 2;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 48px 44px;
      box-shadow:
        0 0 0 1px rgba(56,189,248,.06),
        0 32px 64px rgba(0,0,0,.50),
        0 0 80px rgba(56,189,248,.04);
    }

    /* Logo / Marca */
    .brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      margin-bottom: 40px;
    }

    .brand-icon {
      width: 64px; height: 64px;
      background: var(--accent-dim);
      border: 1px solid rgba(56,189,248,.20);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 28px var(--accent-glow);
    }

    .brand-icon svg {
      width: 34px; height: 34px;
      fill: var(--accent);
    }

    .brand-name {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -.3px;
      color: var(--text);
    }

    .brand-name span {
      color: var(--accent);
    }

    .brand-sub {
      font-size: 13px;
      color: var(--text-2);
      letter-spacing: .3px;
      text-transform: uppercase;
    }

    /* Título sección */
    .section-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 6px;
    }

    .section-sub {
      font-size: 13px;
      color: var(--text-2);
      margin-bottom: 28px;
    }

    /* Separador */
    .divider {
      height: 1px;
      background: var(--border);
      margin: 0 -4px 28px;
    }

    /* Inputs */
    .field {
      margin-bottom: 18px;
    }

    .field label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .6px;
      text-transform: uppercase;
      color: var(--text-2);
      margin-bottom: 7px;
    }

    .field-inner {
      position: relative;
    }

    .field-inner .icon {
      position: absolute;
      left: 13px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-3);
      pointer-events: none;
      display: flex;
    }

    .field-inner .icon svg {
      width: 17px; height: 17px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .field input {
      width: 100%;
      padding: 11px 14px 11px 40px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      color: var(--text);
      font-size: 15px;
      transition: border-color .15s, box-shadow .15s;
      outline: none;
    }

    .field input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }

    .field input::placeholder { color: var(--text-3); }

    /* Errores */
    .error-list {
      background: rgba(248,113,113,.08);
      border: 1px solid rgba(248,113,113,.25);
      border-radius: var(--r);
      padding: 10px 14px;
      margin-bottom: 20px;
      list-style: none;
    }

    .error-list li {
      font-size: 13px;
      color: var(--danger);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .error-list li::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--danger);
      flex-shrink: 0;
    }

    /* Botón */
    .btn-login {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 12px;
      margin-top: 8px;
      background: var(--accent);
      color: #0a0e17;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: .2px;
      border: none;
      border-radius: var(--r);
      cursor: pointer;
      transition: opacity .15s, box-shadow .15s, transform .1s;
      box-shadow: 0 0 24px var(--accent-glow);
    }

    .btn-login:hover {
      opacity: .92;
      box-shadow: 0 0 36px var(--accent-glow);
    }

    .btn-login:active { transform: scale(.98); }

    .btn-login svg {
      width: 18px; height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Footer */
    .login-footer {
      grid-column: 2;
      grid-row: 3;
      padding-top: 20px;
      text-align: center;
      font-size: 12px;
      color: var(--text-3);
    }

    /* Responsive */
    @media (max-width: 520px) {
      .login-wrap { grid-template-columns: 16px 1fr 16px; }
      .login-card  { padding: 36px 24px; }
    }
    @keyframes spin { to { transform: rotate(360deg); } }