/* ==========================================================================
DESIGN TOKENS — Fase 0 (fundamentos)
--------------------------------------------------------------------------
Este archivo NO define colores de marca: esos siguen siendo dinamicos por
conjunto via la hoja /colors-css (variables --portal-color-*, generadas
en CssController). Aqui viven escalas reutilizables (espaciado, radios,
sombras, tipografia, transiciones) mas una capa de armonizacion visual
para que los componentes Bootstrap "crudos" (sin clases .premium-*) ya
se vean consistentes con el resto de la interfaz, sin tener que tocar
el HTML de cada vista todavia.
Orden de carga esperado en : tokens.css -> premium.css -> colors-css
Asi, cualquier regla mas especifica de premium.css o colors-css sigue
ganando sobre esta capa base.
========================================================================== */
:root {
/* Espaciado (escala base 4px, alineada a los valores ya usados en el proyecto) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
/* Radios */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-pill: 999px;
/* Sombras (mismo espiritu que las ya usadas: negro translucido, distintas profundidades) */
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
--shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
--shadow-md: 0 6px 16px rgba(15, 23, 42, 0.10);
--shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.14);
/* Transiciones */
--transition-fast: 150ms ease;
--transition-base: 220ms ease;
/* Tipografia */
--font-size-xs: 0.75rem;
--font-size-sm: 0.8125rem;
--font-size-base: 0.9375rem;
--font-size-md: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.375rem;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Neutrales: ya eran los grises predominantes en premium.css, aqui quedan nombrados */
--neutral-50: #f8fafc;
--neutral-100: #f1f5f9;
--neutral-200: #e2e8f0;
--neutral-300: #cbd5e1;
--neutral-500: #64748b;
--neutral-600: #475569;
--neutral-700: #334155;
--neutral-900: #0f172a;
/* Anillo de foco accesible: reutiliza el color dinamico del conjunto
(definido en /colors-css) cuando esta disponible, con respaldo azul */
--focus-ring: 0 0 0 3px var(--portal-color-banner-focus, rgba(37, 99, 235, 0.25));
}
/* --------------------------------------------------------------------------
Armonizacion de componentes Bootstrap "crudos"
-------------------------------------------------------------------------- */
.btn {
border-radius: var(--radius-md);
font-weight: var(--font-weight-semibold);
transition: transform var(--transition-fast), box-shadow var(--transition-fast),
background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn:hover {
transform: translateY(-1px);
}
.btn:active {
transform: translateY(0) scale(0.98);
}
.card {
border-radius: var(--radius-lg);
border: 1px solid var(--neutral-200);
box-shadow: var(--shadow-sm);
}
.form-control,
.form-select {
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.badge {
font-weight: var(--font-weight-semibold);
letter-spacing: 0.2px;
}
.modal-content {
border-radius: var(--radius-lg);
border: none;
box-shadow: var(--shadow-lg);
}
.alert {
border-radius: var(--radius-md);
border: 1px solid transparent;
}
/* --------------------------------------------------------------------------
Foco de teclado visible y consistente (WCAG 2.4.7 / 2.4.11).
Antes solo .premium-input tenia un box-shadow de foco; esto lo extiende
a cualquier control interactivo sin cambiar el color de marca.
-------------------------------------------------------------------------- */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.sidebar-menu-link:focus-visible,
.sidebar-submenu-link:focus-visible,
.sidebar-action-btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.form-control:focus,
.form-select:focus {
box-shadow: var(--focus-ring);
}
/* Area minima tactil/click (WCAG 2.5.8) para botones de solo icono */
.btn-premium-circle,
.sidebar-toggle-btn,
.sidebar-mobile-toggle {
min-width: 40px;
min-height: 40px;
}
@media (prefers-reduced-motion: reduce) {
* {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* --------------------------------------------------------------------------
SweetAlert2 (toasts y confirmaciones): la libreria se usaba con su
apariencia por defecto, sin relacion visual con el resto de la interfaz.
Se re-viste con la misma escala de radios/sombras/tipografia.
-------------------------------------------------------------------------- */
.swal2-popup {
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-lg) !important;
font-family: inherit !important;
}
.swal2-popup.swal2-toast {
border-radius: var(--radius-md) !important;
box-shadow: var(--shadow-md) !important;
padding: var(--space-3) var(--space-4) !important;
}
.swal2-title {
font-size: var(--font-size-lg) !important;
font-weight: var(--font-weight-bold) !important;
}
.swal2-html-container {
font-size: var(--font-size-base) !important;
}
.swal2-actions .swal2-confirm,
.swal2-actions .swal2-cancel,
.swal2-actions .swal2-deny {
border-radius: var(--radius-md) !important;
font-weight: var(--font-weight-semibold) !important;
padding: 0.55rem 1.4rem !important;
box-shadow: none !important;
}
.swal2-confirm:focus-visible,
.swal2-cancel:focus-visible,
.swal2-deny:focus-visible {
outline: none !important;
box-shadow: var(--focus-ring) !important;
}
/* --------------------------------------------------------------------------
Empty state reutilizable. Hoy cada vista repite variaciones de
"Sin registros...
"; este componente
queda listo para adoptarse vista por vista (Fase 3) sin romper las que
siguen usando el alert simple mientras tanto.
Uso:
-------------------------------------------------------------------------- */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-2);
padding: var(--space-10) var(--space-4);
color: var(--neutral-500);
}
.empty-state i,
.empty-state .bi {
font-size: 2.25rem;
color: var(--neutral-300);
margin-bottom: var(--space-2);
}
.empty-state h6 {
color: var(--neutral-700);
font-weight: var(--font-weight-bold);
margin: 0;
}
.empty-state p {
max-width: 32rem;
margin: 0;
font-size: var(--font-size-sm);
}