431 lines
12 KiB
CSS
431 lines
12 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* =============================================================================
|
|
CSS VARIABLES - Design Tokens para Runtime Theming
|
|
============================================================================= */
|
|
|
|
@layer base {
|
|
:root {
|
|
/* =========================================================================
|
|
RGB VALUES FOR TAILWIND ALPHA SUPPORT
|
|
Format: R G B (space-separated for rgb(var(--color) / alpha) syntax)
|
|
========================================================================= */
|
|
|
|
/* Primary Palette - ISEM Blue (RGB values) */
|
|
--color-primary-50: 230 243 255;
|
|
--color-primary-100: 204 231 255;
|
|
--color-primary-200: 153 207 255;
|
|
--color-primary-300: 102 183 255;
|
|
--color-primary-400: 51 159 255;
|
|
--color-primary-500: 0 97 168;
|
|
--color-primary-600: 0 77 134;
|
|
--color-primary-700: 0 58 101;
|
|
--color-primary-800: 0 38 67;
|
|
--color-primary-900: 0 19 34;
|
|
|
|
/* Secondary Palette - ISEM Green (RGB values) */
|
|
--color-secondary-50: 230 255 245;
|
|
--color-secondary-100: 204 255 235;
|
|
--color-secondary-200: 153 255 214;
|
|
--color-secondary-300: 102 255 194;
|
|
--color-secondary-400: 51 255 173;
|
|
--color-secondary-500: 0 168 104;
|
|
--color-secondary-600: 0 134 83;
|
|
--color-secondary-700: 0 101 63;
|
|
--color-secondary-800: 0 67 42;
|
|
--color-secondary-900: 0 34 21;
|
|
|
|
/* Success Palette (RGB values) */
|
|
--color-success-50: 209 231 221;
|
|
--color-success-100: 209 231 221;
|
|
--color-success-500: 25 135 84;
|
|
--color-success-600: 21 115 71;
|
|
--color-success-700: 15 81 50;
|
|
|
|
/* Warning Palette (RGB values) */
|
|
--color-warning-50: 255 243 205;
|
|
--color-warning-100: 255 243 205;
|
|
--color-warning-500: 255 193 7;
|
|
--color-warning-600: 224 168 0;
|
|
--color-warning-700: 102 77 3;
|
|
|
|
/* Danger Palette (RGB values) */
|
|
--color-danger-50: 248 215 218;
|
|
--color-danger-100: 248 215 218;
|
|
--color-danger-500: 220 53 69;
|
|
--color-danger-600: 187 45 59;
|
|
--color-danger-700: 132 32 41;
|
|
|
|
/* Info Palette (RGB values) */
|
|
--color-info-50: 207 244 252;
|
|
--color-info-100: 207 244 252;
|
|
--color-info-500: 13 202 240;
|
|
--color-info-600: 10 162 192;
|
|
--color-info-700: 5 81 96;
|
|
|
|
/* Background Colors (RGB values) - Light Theme */
|
|
--color-background: 255 255 255;
|
|
--color-background-subtle: 248 249 251;
|
|
--color-background-muted: 241 243 245;
|
|
--color-background-emphasis: 233 236 239;
|
|
|
|
/* Foreground Colors (RGB values) - Light Theme */
|
|
--color-foreground: 33 37 41;
|
|
--color-foreground-muted: 108 117 125;
|
|
--color-foreground-subtle: 173 181 189;
|
|
|
|
/* Border Colors (RGB values) - Light Theme */
|
|
--color-border: 222 226 230;
|
|
--color-border-subtle: 233 236 239;
|
|
--color-border-emphasis: 206 212 218;
|
|
|
|
/* Surface Colors (RGB values) - Light Theme */
|
|
--color-surface: 249 250 251;
|
|
--color-surface-hover: 243 244 246;
|
|
--color-surface-card: 255 255 255;
|
|
--color-surface-popover: 255 255 255;
|
|
--color-surface-modal: 255 255 255;
|
|
--color-surface-dropdown: 255 255 255;
|
|
|
|
/* =========================================================================
|
|
LEGACY HEX VALUES (Backward Compatibility)
|
|
Keep these for direct CSS usage and gradual migration
|
|
========================================================================= */
|
|
|
|
/* Colores de Marca ISEM (HEX) */
|
|
--color-brand-primary: #0061A8;
|
|
--color-brand-secondary: #00A868;
|
|
|
|
/* Colores Semanticos (HEX) */
|
|
--color-success-hex: #198754;
|
|
--color-success-light-hex: #D1E7DD;
|
|
--color-success-dark-hex: #0F5132;
|
|
--color-warning-hex: #FFC107;
|
|
--color-warning-light-hex: #FFF3CD;
|
|
--color-warning-dark-hex: #664D03;
|
|
--color-danger-hex: #DC3545;
|
|
--color-danger-light-hex: #F8D7DA;
|
|
--color-danger-dark-hex: #842029;
|
|
--color-info-hex: #0DCAF0;
|
|
--color-info-light-hex: #CFF4FC;
|
|
--color-info-dark-hex: #055160;
|
|
|
|
/* Semantic Aliases (HEX for legacy components) */
|
|
--color-success: #198754;
|
|
--color-success-light: #D1E7DD;
|
|
--color-success-dark: #0F5132;
|
|
--color-warning: #FFC107;
|
|
--color-warning-light: #FFF3CD;
|
|
--color-warning-dark: #664D03;
|
|
--color-danger: #DC3545;
|
|
--color-danger-light: #F8D7DA;
|
|
--color-danger-dark: #842029;
|
|
--color-info: #0DCAF0;
|
|
--color-info-light: #CFF4FC;
|
|
--color-info-dark: #055160;
|
|
|
|
/* Primary/Secondary HEX aliases */
|
|
--color-primary-hex: var(--color-brand-primary);
|
|
--color-secondary-hex: var(--color-brand-secondary);
|
|
|
|
/* Sombras Tema Claro */
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
|
|
/* Tipografia */
|
|
--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;
|
|
|
|
/* Animaciones */
|
|
--duration-fast: 150ms;
|
|
--duration-normal: 200ms;
|
|
--duration-slow: 300ms;
|
|
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
/* Bordes */
|
|
--radius-sm: 0.125rem;
|
|
--radius-default: 0.25rem;
|
|
--radius-md: 0.375rem;
|
|
--radius-lg: 0.5rem;
|
|
--radius-xl: 0.75rem;
|
|
--radius-full: 9999px;
|
|
}
|
|
|
|
/* Tema Oscuro */
|
|
.dark {
|
|
/* Background Colors (RGB values) - Dark Theme */
|
|
--color-background: 27 30 35;
|
|
--color-background-subtle: 33 37 41;
|
|
--color-background-muted: 45 49 57;
|
|
--color-background-emphasis: 52 58 64;
|
|
|
|
/* Foreground Colors (RGB values) - Dark Theme */
|
|
--color-foreground: 236 236 236;
|
|
--color-foreground-muted: 160 160 160;
|
|
--color-foreground-subtle: 108 117 125;
|
|
|
|
/* Border Colors (RGB values) - Dark Theme */
|
|
--color-border: 73 80 87;
|
|
--color-border-subtle: 52 58 64;
|
|
--color-border-emphasis: 108 117 125;
|
|
|
|
/* Surface Colors (RGB values) - Dark Theme */
|
|
--color-surface: 31 41 55;
|
|
--color-surface-hover: 55 65 81;
|
|
--color-surface-card: 45 49 57;
|
|
--color-surface-popover: 52 58 64;
|
|
--color-surface-modal: 45 49 57;
|
|
--color-surface-dropdown: 52 58 64;
|
|
|
|
/* Sombras Tema Oscuro */
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
|
|
--shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
|
|
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
|
|
}
|
|
|
|
html {
|
|
@apply antialiased;
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
body {
|
|
background-color: rgb(var(--color-background));
|
|
color: rgb(var(--color-foreground));
|
|
}
|
|
|
|
* {
|
|
border-color: rgb(var(--color-border));
|
|
}
|
|
}
|
|
|
|
/* =============================================================================
|
|
COMPONENTES BASE
|
|
============================================================================= */
|
|
|
|
@layer components {
|
|
/* Botones */
|
|
.btn {
|
|
@apply inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
|
|
transition-duration: var(--duration-fast);
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply bg-primary-500 text-white hover:bg-primary-600 focus-visible:ring-primary-500;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-secondary-500 text-white hover:bg-secondary-600 focus-visible:ring-secondary-500;
|
|
}
|
|
|
|
.btn-outline {
|
|
@apply border border-border-emphasis bg-transparent hover:bg-background-muted focus-visible:ring-primary-500;
|
|
color: rgb(var(--color-foreground));
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply bg-transparent hover:bg-background-muted focus-visible:ring-primary-500;
|
|
color: rgb(var(--color-foreground));
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply bg-danger-500 text-white hover:bg-danger-600 focus-visible:ring-danger-500;
|
|
}
|
|
|
|
.btn-sm {
|
|
@apply h-8 px-3 text-sm;
|
|
}
|
|
|
|
.btn-md {
|
|
@apply h-10 px-4;
|
|
}
|
|
|
|
.btn-lg {
|
|
@apply h-12 px-6 text-lg;
|
|
}
|
|
|
|
/* Inputs */
|
|
.input {
|
|
@apply block w-full rounded-md border px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50;
|
|
background-color: rgb(var(--color-background));
|
|
border-color: rgb(var(--color-border));
|
|
color: rgb(var(--color-foreground));
|
|
transition-duration: var(--duration-fast);
|
|
}
|
|
|
|
.input::placeholder {
|
|
color: rgb(var(--color-foreground-subtle));
|
|
}
|
|
|
|
.input:focus {
|
|
border-color: rgb(var(--color-primary-500));
|
|
--tw-ring-color: rgb(var(--color-primary-500));
|
|
}
|
|
|
|
.input-error {
|
|
@apply border-danger-500 focus:border-danger-500 focus:ring-danger-500;
|
|
}
|
|
|
|
/* Labels */
|
|
.label {
|
|
@apply block text-sm font-medium;
|
|
color: rgb(var(--color-foreground));
|
|
}
|
|
|
|
/* Cards */
|
|
.card {
|
|
@apply rounded-lg border;
|
|
background-color: rgb(var(--color-surface-card));
|
|
border-color: rgb(var(--color-border));
|
|
box-shadow: var(--shadow-default);
|
|
}
|
|
|
|
/* Links */
|
|
.link {
|
|
@apply hover:underline;
|
|
color: rgb(var(--color-primary-500));
|
|
transition-duration: var(--duration-fast);
|
|
}
|
|
|
|
.link:hover {
|
|
color: rgb(var(--color-primary-600));
|
|
}
|
|
|
|
/* Badges */
|
|
.badge {
|
|
@apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium;
|
|
}
|
|
|
|
.badge-primary {
|
|
@apply bg-primary-100 text-primary-700;
|
|
}
|
|
|
|
.badge-secondary {
|
|
@apply bg-secondary-100 text-secondary-700;
|
|
}
|
|
|
|
.badge-success {
|
|
background-color: var(--color-success-light);
|
|
color: var(--color-success-dark);
|
|
}
|
|
|
|
.badge-warning {
|
|
background-color: var(--color-warning-light);
|
|
color: var(--color-warning-dark);
|
|
}
|
|
|
|
.badge-danger {
|
|
background-color: var(--color-danger-light);
|
|
color: var(--color-danger-dark);
|
|
}
|
|
|
|
.badge-info {
|
|
background-color: var(--color-info-light);
|
|
color: var(--color-info-dark);
|
|
}
|
|
|
|
/* Alerts */
|
|
.alert {
|
|
@apply rounded-lg border p-4;
|
|
}
|
|
|
|
.alert-success {
|
|
background-color: var(--color-success-light);
|
|
border-color: var(--color-success);
|
|
color: var(--color-success-dark);
|
|
}
|
|
|
|
.alert-warning {
|
|
background-color: var(--color-warning-light);
|
|
border-color: var(--color-warning);
|
|
color: var(--color-warning-dark);
|
|
}
|
|
|
|
.alert-danger {
|
|
background-color: var(--color-danger-light);
|
|
border-color: var(--color-danger);
|
|
color: var(--color-danger-dark);
|
|
}
|
|
|
|
.alert-info {
|
|
background-color: var(--color-info-light);
|
|
border-color: var(--color-info);
|
|
color: var(--color-info-dark);
|
|
}
|
|
}
|
|
|
|
/* =============================================================================
|
|
UTILIDADES
|
|
============================================================================= */
|
|
|
|
@layer utilities {
|
|
/* Scrollbar personalizado */
|
|
.scrollbar-thin {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgb(var(--color-border)) transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background-color: rgb(var(--color-border));
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Focus visible mejorado */
|
|
.focus-ring {
|
|
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
|
|
--tw-ring-color: rgb(var(--color-primary-500));
|
|
}
|
|
|
|
/* Texto truncado */
|
|
.truncate-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.truncate-3 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Transiciones suaves */
|
|
.transition-theme {
|
|
transition-property: background-color, border-color, color, fill, stroke;
|
|
transition-duration: var(--duration-normal);
|
|
transition-timing-function: var(--easing-default);
|
|
}
|
|
}
|
|
|
|
/* =============================================================================
|
|
MULTI-TENANT THEMING (Placeholder para override por tenant)
|
|
============================================================================= */
|
|
|
|
/*
|
|
* Los tenants pueden sobreescribir estas variables via JS:
|
|
* document.documentElement.style.setProperty('--color-brand-primary', '#FF0000');
|
|
*
|
|
* O cargar un CSS adicional con:
|
|
* [data-tenant="empresa-abc"] {
|
|
* --color-brand-primary: #123456;
|
|
* --color-brand-secondary: #654321;
|
|
* }
|
|
*/
|