/* ================================
PuntoLocal · Primitivas de UI (shared/primitives.css)
Fase 2 de armonía de diseño — Task 5. La auditoría encontró `.btn` REDEFINIDO
con CSS distinto en landing.css, registrar.css, cuenta.css y styles.css (el
mismo botón se veía distinto según la página). Este archivo es la ÚNICA
definición canónica de `.btn` (+ variantes) para la plataforma central
(landing, precios, funcion, rubro, registrar, cuenta, directorio SPA).
── Task 6: también se carga en el panel admin ──────────────────────────
Desde la Task 6 (fase 2) este archivo se carga TAMBIÉN en el panel admin
(`views/admin/dashboard.ejs`, ANTES de `admin-editor.css`). admin-editor.css
ya declara el orden `@layer base, shell, components, sections, overrides;`
y admin/components.css + admin/notifications.css ya usaban `@layer
components` — este archivo usa esa MISMA capa (ver bloque `@layer
components` más abajo), así que su prioridad queda intermedia (por encima
de base/shell, por debajo de sections/overrides) sin importar qué
se declare primero en el . `.btn`/`.btn--sm`/`.btn--sell`/`.badge`
(base) del panel se eliminaron de admin-editor.css a favor de esta
primitiva. Las variantes del panel que colisionan de NOMBRE pero con look
distinto (`.btn--primary` verde vs. el `--primary` naranjo de acá,
`.btn--secondary`, `.btn--ghost`) NO se tocaron — se conservan en
`admin-editor.css` dentro de un `@layer overrides` nuevo (capa más alta,
gana siempre) para no romper el look ya validado del panel. Ver el header
de esa sección en admin-editor.css para el detalle variante por variante.
Cargar SIEMPRE antes del CSS propio de cada vista (que ya no debe redefinir
`.btn`; solo puede agregar overrides propios con su propia clase, nunca
redeclarando `.btn`/`.btn--*`).
── Decisión canónica de `.btn` (base) ──────────────────────────────────
Se tomó tal cual la definición de landing.css (la cara pública de venta):
padding var(--space-3) var(--space-5), radius-md, border 1.5px transparente,
fs-base/fw-semibold, transiciones de bg/border/color/transform/shadow.
registrar.css y cuenta.css tenían un padding más chico (0.6rem 1.1rem) y sin
borde; styles.css (directorio) ya coincidía con landing en padding/radius.
→ Efecto visible: los botones de /registrar-negocio y /cuenta crecen unos
px (padding acorde a landing/directorio) y ganan el borde transparente
de 1.5px (invisible salvo en variantes con borde propio, p. ej. --ghost).
── Decisión canónica de variantes ──────────────────────────────────────
--sell Naranjo CTA comercial (venta/plan/cobro). YA era idéntico en las
4 hojas — sin cambios visuales.
--primary Naranjo (mismo tono que --sell, sin el glow/lift). Coincide con
registrar.css/cuenta.css. styles.css (directorio) tenía
`--primary` en VERDE (bg: var(--color-trust)) — un choque real
de nombre con significado distinto según la página. Se resolvió
así: `--primary` pasa a ser naranjo en TODAS partes, y se creó
`--trust` (ver abajo) para las acciones verdes que antes usaban
`--primary` en el directorio. Las 2 CTAs "Registra tu negocio"
del directorio (antes verdes) migraron a `--sell` (coherente con
landing/registrar, que siempre usan naranjo para esa CTA
exacta) — es el cambio más visible de esta migración.
--trust NUEVO. Verde de marca (`--color-trust`) para "Guardar, Ingresar,
Publicar, Confirmar" (mismo criterio que ya documenta
tokens.css). Reemplaza los usos de `--primary` verde del
directorio que SÍ son de este tipo (Ingresar/Crear cuenta,
Buscar, Enviar código, Entrar, Elegir ubicación, Enviar
solicitud) — se preserva el verde que ya tenían.
--secondary Se conserva tal cual styles.css (bg surface-muted + borde
soft): activo y usado en el directorio, visualmente distinto de
--ghost (relleno vs. transparente). No estaba en registrar ni
cuenta.
--ghost Canónico = landing.css (bg surface blanco, texto text-strong,
borde border-default; hover: borde+texto verde trust). En
registrar.css/cuenta.css `--ghost` era naranjo transparente
(bg transparent, color primary, hover bg primary-soft) — CAMBIA
a la versión neutra de landing. Es el otro cambio visible
grande: los botones "← Atrás/Cambiar rubro" (registrar) y "Ver
local/Quitar/Volver/Cerrar sesión" (cuenta) dejan de verse
naranjos y pasan a gris/blanco con hover verde.
--light Solo landing (CTA final sobre fondo naranjo). Sin cambios.
--sm Canónico con tokens de espaciado (var(--space-2) var(--space-3))
en vez de los rem fijos de cuenta.css (0.35rem 0.7rem) — los
botones --sm de /cuenta crecen ~3px de alto.
--lg Solo landing/funcion/rubro. Sin cambios.
--block Ancho completo (antes solo en styles.css). registrar.css hacía
esto seteando `width:100%` DENTRO de `--sell`/`--primary`
directamente; se sacó de la primitiva (una variante de color no
debería imponer layout) — no hay regresión porque los únicos
botones de registrar que dependían de ese 100% ya viven dentro
de flex-columns con `align-items: stretch` (se estiran solo) o
dentro de `.reg-nav` (que ya fuerza `width:auto` explícito).
`.btn:disabled` no existía en landing (sus CTAs son siempre ); se tomó
opacity .6 + cursor not-allowed (mezcla de registrar/cuenta con el
not-allowed más correcto de styles.css).
`.btn:active` con scale(.98) solo existía en styles.css (aplicaba a TODOS
los botones del directorio); se hizo universal — efecto de "apretado"
apenas perceptible al hacer click, ahora también en landing/registrar/
cuenta (antes esas 3 no tenían ningún feedback de :active salvo --sell).
Área táctil ≥44px de alto en móvil (≤640px) en TODOS los botones — pedido
explícito del brief de accesibilidad. Excepción documentada: el nav
compacto de landing (`.nav__actions .btn`, ver landing.css) ya fue afinado
a mano para que "Ingresar"+"Registrarme" entren en 360px — se preserva su
alto exacto con un override local que cancela el min-height acá.
── .badge / .card / .modal-shell / .toast-shell ────────────────────────
Definidos según el spec de la Fase 2, pero NO se retrofitearon sobre
componentes bespoke ya existentes (`.cuenta__badge`, `.macro-badge`,
`.plan-card__badge`, `.launch-offer__badge`, `.rubro-card`/`.feat`/
`.ba__card`/`.plan`/`.ts__card`, `.modal`/`.modal-overlay`/`.modal-content`
de styles.css). Esos ya funcionan y no había ninguna redefinición
CONFLICTIVA de la misma clase entre archivos (a diferencia de `.btn`) —
forzar la migración habría sido un rediseño visual no pedido, no una
unificación. Quedan disponibles acá para components NUEVOS.
================================ */
/* Orden GLOBAL de capas. Este archivo es el primer con @layer en todas
las vistas (se carga antes que feature-matrix.css y admin-editor.css), así
que esta declaración fija el orden para toda la página. `reset` va PRIMERO:
los resets universales (`* { margin:0; padding:0 }`) de landing/registrar/
cuenta/styles viven en `@layer reset` para que NO le ganen al padding de
estas primitivas — una regla SIN capa siempre vence a las capas, y eso dejó
los .btn sin padding en toda la cara pública (fix post-review Fase 2). */
@layer reset, base, shell, components, sections, overrides;
@layer components {
/* ─── Botón (.btn) ───────────────────────────────────────────────────── */
.btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
font-family: inherit;
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
border-radius: var(--radius-md);
border: 1.5px solid transparent;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: background var(--duration-fast) var(--easing-out),
border-color var(--duration-fast) var(--easing-out),
color var(--duration-fast) var(--easing-out),
transform var(--duration-fast) var(--easing-out),
box-shadow var(--duration-fast) var(--easing-out);
}
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: scale(0.98); }
/* Naranjo CTA comercial (venta/plan/cobro) — con glow + lift al interactuar. */
.btn--sell {
background: var(--color-primary);
color: var(--text-on-primary);
box-shadow: 0 6px 16px rgba(232, 96, 44, 0.28);
}
.btn--sell:hover:not(:disabled) { background: var(--color-primary-hover); transform: translateY(-1px); }
.btn--sell:active:not(:disabled) { background: var(--color-primary-active); transform: translateY(1px); box-shadow: none; }
/* Naranjo "plano" (mismo tono que --sell, sin el glow) — acción destacada sin ser la CTA hero. */
.btn--primary {
background: var(--color-primary);
color: var(--text-on-primary);
}
.btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn--primary:active:not(:disabled) { background: var(--color-primary-active); }
/* Verde de marca — Guardar / Ingresar / Publicar / Confirmar (ver tokens.css). */
.btn--trust {
background: var(--color-trust);
color: var(--text-on-primary);
}
.btn--trust:hover:not(:disabled) { background: var(--color-trust-hover); }
.btn--trust:active:not(:disabled) { background: var(--color-trust-active); }
/* Secundario relleno (bg muted + borde soft) — del directorio (styles.css). */
.btn--secondary {
background: var(--bg-surface-muted);
color: var(--text-strong);
border-color: var(--border-soft);
}
.btn--secondary:hover:not(:disabled) { background: var(--color-primary-soft); }
/* Secundario transparente (outline neutro) — canónico de landing.css. */
.btn--ghost {
background: var(--bg-surface);
color: var(--text-strong);
border-color: var(--border-default);
}
.btn--ghost:hover:not(:disabled) { border-color: var(--color-trust); color: var(--color-trust); }
/* Sobre fondo naranjo (cta-final del landing). */
.btn--light {
background: #fff;
color: var(--color-primary);
box-shadow: var(--shadow-md);
}
.btn--light:hover:not(:disabled) { transform: translateY(-1px); }
/* Rojo de acción destructiva (rechazar/disputar/eliminar). NUEVO — Task 2 del
plan "Marketplace UX de cierre": confirm-popup.js (shared) lo usa para el
botón de confirmar con tone:'danger' en superficies que no tengan ya su
propia variante --danger (el panel admin SÍ tiene una en admin-editor.css
@layer overrides, que gana por capa; esta es para /cuenta y el resto de la
cara pública, que no tenían ninguna). Mismo criterio de color que ya usa
toast-shell--danger (var(--color-danger)). */
.btn--danger {
background: var(--color-danger);
color: var(--text-on-primary);
}
.btn--danger:hover:not(:disabled) { background: #dc2626; }
.btn--danger:active:not(:disabled) { background: #b91c1c; }
.btn--sm { padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--fs-lg); border-radius: var(--radius-lg); }
.btn--block { width: 100%; }
/* Área táctil mínima 44px de alto en móvil (a11y). */
@media (max-width: 640px) {
.btn { min-height: 44px; }
}
/* ─── Badge (.badge) — tonos ok/warn/info/off ───────────────────────────
Nuevo, disponible para components futuros (ver nota del header). */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px var(--space-3);
border-radius: var(--radius-full);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
white-space: nowrap;
}
.badge--ok { background: var(--color-trust-soft); color: var(--color-trust-strong); }
.badge--warn { background: var(--color-warning-soft); color: var(--color-warning-strong); }
.badge--info { background: var(--blue-soft); color: var(--blue); }
.badge--off { background: var(--bg-surface-muted); color: var(--text-muted); }
/* ─── Card (.card) — superficie blanca genérica ─────────────────────────
Nuevo, disponible para components futuros (ver nota del header). */
.card {
background: var(--bg-surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--space-6);
}
/* ─── Modal shell (.modal-shell) — esqueleto visual, sin comportamiento ─
El JS de cada superficie sigue siendo el suyo (abrir/cerrar, foco, etc.).
Nuevo, disponible para components futuros (ver nota del header). */
.modal-shell {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
}
.modal-shell[hidden] { display: none; }
/* Sin backdrop-filter blur (fix latencia 2026-07-14): desenfocar toda la pantalla
al abrir causaba el lag de los popups; el velo más oscuro (tokens) compensa. */
@keyframes modal-shell-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-shell-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.modal-shell__backdrop, .modal-shell__panel { animation: none !important; }
}
.modal-shell__backdrop {
position: absolute;
inset: 0;
background: var(--bg-overlay);
animation: modal-shell-in var(--duration-fast, 150ms) var(--easing-out, ease-out);
}
.modal-shell__panel {
animation: modal-shell-pop var(--duration-fast, 150ms) var(--easing-out, ease-out);
position: relative;
background: var(--bg-surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
width: 100%;
max-width: 480px;
max-height: 90vh;
overflow-y: auto;
padding: var(--space-8);
}
/* ─── Subcomponentes de contenido del modal-shell ────────────────────────
NUEVOS — Task 2 del plan "Marketplace UX de cierre": confirm-popup.js
(shared/confirm-popup.js) es el primer consumidor real de `.modal-shell`
(hasta acá solo era esqueleto sin consumidor). title/message/actions cubren
el layout genérico de un diálogo de confirmación/aviso; una superficie con
necesidades distintas puede seguir armando su propio contenido dentro de
`.modal-shell__panel` sin usar estas 3 clases. */
.modal-shell__title {
margin: 0 0 var(--space-3);
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--text-strong);
}
.modal-shell__message {
margin: 0;
color: var(--text-muted);
line-height: var(--lh-normal);
}
.modal-shell__actions {
display: flex;
justify-content: flex-end;
gap: var(--space-3);
margin-top: var(--space-6);
flex-wrap: wrap;
}
/* ─── Toast shell (.toast-shell) — posición + superficie + tonos ────────
Nuevo, disponible para components futuros (ver nota del header). */
.toast-shell {
position: fixed;
left: 50%;
bottom: var(--space-6);
transform: translateX(-50%);
z-index: 10500;
display: flex;
align-items: center;
gap: var(--space-2);
background: var(--text-strong);
color: #fff;
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
}
.toast-shell--ok { background: var(--color-trust); }
.toast-shell--warn { background: var(--color-warning); color: var(--text-strong); }
.toast-shell--danger { background: var(--color-danger); }
.toast-shell--info { background: var(--blue); }
} /* @layer components */