*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Inter', Arial, sans-serif;
      background: #0f172a;
      color: #e2e8f0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* ── FONDO ANIMADO ── */
    .fondo-auth {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      position: relative;
      overflow: hidden;
    }
    .fondo-auth::before {
      content: '';
      position: absolute;
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(14,165,233,0.15) 0%, transparent 70%);
      top: -100px; left: -100px;
      animation: pulso 6s ease-in-out infinite alternate;
    }
    .fondo-auth::after {
      content: '';
      position: absolute;
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
      bottom: -80px; right: -80px;
      animation: pulso 8s ease-in-out infinite alternate-reverse;
    }
    @keyframes pulso {
      from { transform: scale(1);   opacity: 0.6; }
      to   { transform: scale(1.2); opacity: 1;   }
    }

    /* ── TARJETA AUTH ── */
    .tarjeta-auth {
      position: relative;
      z-index: 1;
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 20px;
      padding: 44px 48px;
      width: 100%;
      max-width: 460px;
      box-shadow: 0 30px 80px rgba(0,0,0,0.5);
      animation: entradaTarjeta 0.4s ease;
    }
    @keyframes entradaTarjeta {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── LOGO ── */
    .auth-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 32px;
    }
    .auth-logo-icono {
      width: 36px; height: 36px;
      background: linear-gradient(135deg, #0ea5e9, #0284c7);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem;
    }
    .auth-logo span {
      font-size: 1.4rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.5px;
    }

    /* ── PESTAÑAS ── */
    .pestanas {
      display: flex;
      background: #0f172a;
      border-radius: 10px;
      padding: 4px;
      margin-bottom: 32px;
    }
    .pestana {
      flex: 1;
      padding: 10px;
      text-align: center;
      border: none;
      background: transparent;
      color: #64748b;
      font-size: 0.92rem;
      font-weight: 600;
      cursor: pointer;
      border-radius: 7px;
      transition: 0.25s;
      font-family: 'Inter', Arial, sans-serif;
    }
    .pestana.activa {
      background: #0ea5e9;
      color: #fff;
      box-shadow: 0 4px 12px rgba(14,165,233,0.35);
    }

    /* ── FORMULARIO ── */
    .formulario { display: none; }
    .formulario.visible { display: block; animation: fadeIn 0.25s ease; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    .form-titulo {
      font-size: 1.4rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 6px;
    }
    .form-subtitulo {
      font-size: 0.85rem;
      color: #64748b;
      margin-bottom: 26px;
    }

    .campo {
      margin-bottom: 18px;
    }
    .campo label {
      display: block;
      font-size: 0.82rem;
      font-weight: 500;
      color: #94a3b8;
      margin-bottom: 7px;
    }
    .campo input {
      width: 100%;
      background: #0f172a;
      border: 1px solid #334155;
      border-radius: 10px;
      color: #e2e8f0;
      padding: 12px 16px;
      font-size: 0.93rem;
      font-family: 'Inter', Arial, sans-serif;
      transition: 0.2s;
    }
    .campo input:focus {
      outline: none;
      border-color: #0ea5e9;
      box-shadow: 0 0 0 3px rgba(14,165,233,0.2);
    }
    .campo input::placeholder { color: #475569; }

    .fila-doble {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    /* ── BOTÓN SUBMIT ── */
    .boton-auth {
      width: 100%;
      padding: 13px;
      background: linear-gradient(135deg, #0ea5e9, #0284c7);
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      font-family: 'Inter', Arial, sans-serif;
      transition: 0.25s;
      margin-top: 6px;
      box-shadow: 0 6px 20px rgba(14,165,233,0.3);
    }
    .boton-auth:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(14,165,233,0.45);
    }
    .boton-auth:active { transform: translateY(0); }

    /* ── MENSAJES ── */
    .mensaje {
      display: none;
      padding: 12px 16px;
      border-radius: 8px;
      font-size: 0.85rem;
      font-weight: 500;
      margin-bottom: 18px;
      animation: fadeIn 0.2s ease;
    }
    .mensaje.error   { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.4); color: #f87171; display: block; }
    .mensaje.exito   { background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.4); color: #4ade80;  display: block; }

    /* ── SEPARADOR ── */
    .cambio-modo {
      text-align: center;
      margin-top: 20px;
      font-size: 0.83rem;
      color: #64748b;
    }
    .cambio-modo button {
      background: none;
      border: none;
      color: #0ea5e9;
      font-weight: 600;
      cursor: pointer;
      font-family: 'Inter', Arial, sans-serif;
      font-size: 0.83rem;
      padding: 0;
    }
    .cambio-modo button:hover { text-decoration: underline; }