login-web

name	login-web
description	Crear pantalla de login para portales internos de GGSoluciones. Estándar visual y funcional con modo claro/oscuro, diseño institucional + operativo, errores controlados y usuarios de prueba. Usar cuando el usuario diga "login", "pantalla de acceso", "autenticación", "ingreso".

Login Web - Estándar GGSoluciones

Este skill define el estándar visual y funcional para pantallas de login en portales internos de GGSoluciones. Todos los portales deben seguir este formato para mantener consistencia.

Cuándo usar este skill

• Usuario dice: "login", "pantalla de acceso", "crear autenticación"
• Necesitás una pantalla de login para un portal interno
• El portal es nuevo o no tiene login estandarizado

Principios obligatorios

1. Contraste primero

• Ningún texto puede quedar gris claro sobre fondo blanco ni negro sobre azul oscuro
• Validar títulos, labels, placeholders, botones, badges y mensajes de error en ambos modos

2. Login de dos zonas

• Zona institucional / hero: Logo, nombre del portal, descripción
• Zona operativa / formulario: Campos, usuarios de prueba, botón
• Desktop: Layout en dos columnas
• Mobile: Apilar hero arriba y formulario abajo

3. Identidad GGSoluciones visible

• Logo arriba o dentro del hero
• Texto del portal debajo: PORTAL COMERCIAL, INTRANET, PORTAL BENEFICIOS, etc.
• Usar rojo GGSoluciones (#d30027) como color primario de acción

4. Formulario simple

• Campo clave/contraseña claro
• Botón principal visible y ancho completo
• Usuarios/perfiles de prueba como cards seleccionables si aplica
• Mostrar clave DEV solo si es ambiente DEV

5. Errores controlados

NO mostrar: stack traces, Failed to fetch, tokens, headers, errores técnicos

SÍ mostrar:

• "No se pudo iniciar sesión. Verificá la clave e intentá nuevamente."
• "La sesión venció. Volvé a ingresar."
• "El servicio no está disponible. Avisá a soporte."

Layout base (HTML)

<section class="login-page" data-theme="dark">
  <div class="login-shell">
    <aside class="login-hero">
      <img class="login-logo" src="/assets/logo-ggsoluciones.svg" alt="GGSoluciones" />
      <span class="login-kicker">PORTAL COMERCIAL</span>
      <h1>Gestión de ventas y clientes en un solo lugar</h1>
      <p>Acceso interno conectado al API Gateway y base DEV.</p>

      <div class="login-status-pills">
        <span>API Gateway</span>
        <span>BD DEV</span>
        <span>Roles</span>
      </div>
    </aside>

    <main class="login-card">
      Ingresá al sistema
      Seleccioná tu perfil e ingresá la clave asignada.

      Clave
      

      
        
          AG
          
            Alejandro Gallardo
            Vendedor · TV Music
          
        
      

      🔐 DEV · Usar credenciales de prueba definidas por el proyecto.

      Ingresar
    
  

CSS con modo claro y oscuro

:root {
  --ec-red: #d30027;
  --ec-red-dark: #a8001f;
  --ec-bg: #f8fafc;
  --ec-surface: #ffffff;
  --ec-text: #0f172a;
  --ec-muted: #64748b;
  --ec-border: #dbe3ef;
  --ec-shadow: 0 24px 70px rgba(15, 23, 42, .18);
}

[data-theme="dark"] {
  --ec-bg: #0f172a;
  --ec-surface: #111827;
  --ec-text: #f8fafc;
  --ec-muted: #a8b3c7;
  --ec-border: #2f3b52;
  --ec-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background:
    radial-gradient(circle at 20% , (, , , .), transparent ),
    (, (--ec-bg), );
  : (--ec-text);
}

 {
  : (, );
  : grid;
  : (, fr) (, );
  : (, , );
  : center;
}

  {
  : ;
  : (, , );
  : .;
  : -.;
  : (--ec-text);
}

 {
  : (--ec-surface);
  :  solid (--ec-border);
  : ;
  : ;
  : (--ec-shadow);
}

  {
  : ;
  : ;
  :  ;
  :  solid (--ec-border);
  : ;
  : (in srgb, (--ec-surface) , (--ec-bg));
  : (--ec-text);
  : none;
}

  {
  : (--ec-red);
  :     (, , , .);
}

 {
  : ;
  : ;
  : ;
  : ;
  : (--ec-red);
  : white;
  : ;
  : pointer;
  :    (, , , .);
}

 {
  : (--ec-red-dark);
}

 (: ) {
   {
    : fr;
    : ;
  }
}

Regla para portales con sidebar

Si el portal reutiliza un shell con sidebar fija (como Portal Comercial), el login NO debe renderizar el sidebar ni reservar su columna.

CSS:

/* Login: sin sidebar por defecto */
.sidebar { display: none; }
body { display: block; }

/* App autenticada: recién ahí aparece el shell con sidebar */
body.logged-in {
  display: grid;
  grid-template-columns: 260px 1fr;
}

body.logged-in .sidebar { display: flex; }

JavaScript (al login exitoso):

document.body.classList.add('logged-in');

JavaScript (al cerrar sesión):

document.body.classList.remove('logged-in');

⚠️ Validación: En pantalla de login no puede quedar una columna vacía a la izquierda ni un borde/espacio reservado para el sidebar.

Usuarios de prueba (cards seleccionables)

<div class="login-users">
  <button class="login-user-card selected" type="button">
    <span class="avatar">AG</span>
    <span>
      <strong>Alejandro Gallardo</strong>
      <small>Vendedor · TV Music</small>
    </span>
  </button>
  <button class="login-user-card" type="button">
    <span class="avatar">PM</span>
    <span>
      <strong>Pedro Martínez</strong>
      <small>Gerente · Ventas</small>
    </span>
  </button>
</div>

.login-user-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--ec-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--ec-surface) 90%, var(--ec-bg));
  cursor: pointer;
  text-align: left;
}

.login-user-card:hover,
.login-user-card.selected {
  border-color: var(--ec-red);
  box-shadow: 0 10px 24px rgba(211, 0, 39, .12);
}

.avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ec-red);
  color: white;
  font-weight: 900;
}

Notas de ambiente DEV

Solo mostrar en ambientes DEV, nunca en PROD:

<p class="login-dev-note">🔐 DEV · Usar credenciales de prueba definidas por el proyecto.</p>

.login-dev-note {
  margin: 18px 0;
  color: var(--ec-muted);
  text-align: center;
  font-size: 13px;
}

Flujo de autenticación (recomendado)

1. Usuario ingresa clave
2. Click en "Ingresar" o Enter
3. Loading en botón
4. POST a /api/auth/login
5. Si éxito: guardar token, redirigir a dashboard, agregar body.logged-in
6. Si error: mostrar mensaje controlado, no técnica

Checklist de entrega

• Login se ve correcto en desktop
• Login se ve correcto en mobile
• Modo claro legible
• Modo oscuro legible
• Logo visible y proporcionado
• Botón principal claro (rojo GGSoluciones)
• Errores funcionales, no técnicos
• Campos con foco visible (border rojo)
• Cards de usuarios de prueba accesibles
• Sin textos quemados de otro portal
• Si el portal tiene sidebar, no aparece ni reserva espacio en el login
• Después de login exitoso, document.body.classList.add('logged-in') activa el shell con sidebar
• En ambiente DEV, mostrar clave general