| 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:
.sidebar { display: none; }
body { display: block; }
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)
- Usuario ingresa clave
- Click en "Ingresar" o Enter
- Loading en botón
- POST a
/api/auth/login
- Si éxito: guardar token, redirigir a dashboard, agregar
body.logged-in
- Si error: mostrar mensaje controlado, no técnica
Checklist de entrega
