/* ================================================================= * Mantenia · Sistema de diseño * ----------------------------------------------------------------- * Única fuente de verdad para colores, tipografía, spacing, radius, * shadows, breakpoints y transiciones. Todos los componentes y * páginas leen de aquí. * * Para cambiar la marca: * - Paleta: editar --color-primary y derivados * - Modo oscuro: se aplica con [data-theme="dark"] en * * Convenciones: * - Spacing en escala 4-pt (0.25rem = 4px) * - Radius en 5 niveles (sm/md/lg/xl/full) * - Tipografía solo Inter (auto-hospedada para offline) * - Sin !important nunca * ================================================================= */ /* ----------------------------------------------------------------- * TOKENS — modo claro (default) * ----------------------------------------------------------------- */ :root { /* ---- Tipografía ---- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.25rem; /* 20px */ --fs-2xl: 1.5rem; /* 24px */ --fs-3xl: 1.875rem; /* 30px */ --fs-4xl: 2.25rem; /* 36px */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --lh-tight: 1.2; --lh-normal: 1.5; --lh-relaxed:1.7; /* ---- Spacing (escala 4-pt) ---- */ --sp-0: 0; --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-8: 2rem; /* 32 */ --sp-10: 2.5rem; /* 40 */ --sp-12: 3rem; /* 48 */ --sp-16: 4rem; /* 64 */ /* ---- Radius ---- */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; /* ---- Sombras ---- */ --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06); --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.06); --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.06); --shadow-xl: 0 20px 25px -5px rgb(15 23 42 / 0.10), 0 8px 10px -6px rgb(15 23 42 / 0.08); /* ---- Z-index ---- */ --z-base: 0; --z-sticky: 10; --z-overlay: 50; --z-modal: 100; --z-toast: 200; --z-tooltip: 300; /* ---- Transiciones ---- */ --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --t-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* ---- Color: paleta primaria MANTIX (Dark Core) ---- Brand kit MANTIX 2026: Dark Core #060B28 como primary base. Genera contraste fuerte con texto blanco para botones y headers. El acento brillante es Cian Mantix (--color-accent-*). */ --color-primary-50: #eef0f8; --color-primary-100: #d8dae4; --color-primary-200: #b1b5c9; --color-primary-300: #8a90ae; --color-primary-400: #636b93; --color-primary-500: #3c4678; --color-primary-600: #2d3760; --color-primary-700: #1f2848; --color-primary-800: #11193a; --color-primary-900: #060B28; /* Dark Core puro */ /* ---- Color: acento MANTIX (Cian) ---- Cian Mantix #00EDFF — sello del brand. Para links, focus rings, barras de progreso, highlights, badges. NO usar como background de botones primarios con texto blanco (contraste insuficiente); sí funciona con texto Dark Core encima. */ --color-accent-50: #e6fdff; --color-accent-100: #ccfbff; --color-accent-200: #99f7ff; --color-accent-300: #66f3ff; --color-accent-400: #33efff; --color-accent-500: #00EDFF; /* Cian Mantix puro */ --color-accent-600: #00bdcc; --color-accent-700: #008e99; --color-accent-800: #005e66; --color-accent-900: #002f33; /* ---- Color: paleta gris (neutral) ---- */ --color-gray-50: #f8fafc; --color-gray-100: #f1f5f9; --color-gray-200: #e2e8f0; --color-gray-300: #cbd5e1; --color-gray-400: #94a3b8; --color-gray-500: #64748b; --color-gray-600: #475569; --color-gray-700: #334155; --color-gray-800: #1e293b; --color-gray-900: #0f172a; /* ---- Color: estados ---- */ --color-success-50: #ecfdf5; --color-success-500: #10b981; --color-success-600: #059669; --color-success-700: #047857; --color-warning-50: #fffbeb; --color-warning-500: #f59e0b; --color-warning-600: #d97706; --color-warning-700: #b45309; --color-danger-50: #fef2f2; --color-danger-500: #ef4444; --color-danger-600: #dc2626; --color-danger-700: #b91c1c; --color-info-50: #eff6ff; --color-info-500: #3b82f6; --color-info-600: #2563eb; --color-info-700: #1d4ed8; /* ---- Tokens semánticos (light) ---- */ --color-bg: #f8fafc; /* fondo de la app */ --color-bg-elevated: #ffffff; /* paneles, modales */ --color-surface: #ffffff; /* cards */ --color-surface-soft: #f8fafc; /* secciones secundarias */ --color-border: #e2e8f0; --color-border-strong:#cbd5e1; --color-text: #0f172a; --color-text-muted: #64748b; --color-text-subtle: #94a3b8; --color-text-on-primary: #ffffff; /* En light: primary = Dark Core (botones oscuros con texto blanco). */ --color-primary: var(--color-primary-900); --color-primary-hover: var(--color-primary-800); --color-primary-soft: var(--color-primary-50); /* Accent = sello cian Mantix. Mismo en light y dark. */ --color-accent: var(--color-accent-500); --color-accent-hover: var(--color-accent-600); --color-accent-soft: var(--color-accent-50); --color-success: var(--color-success-600); --color-warning: var(--color-warning-600); --color-danger: var(--color-danger-600); --color-info: var(--color-info-600); /* ---- Focus ring (accesibilidad) — usa cian del brand ---- */ --focus-ring: 0 0 0 3px rgb(0 237 255 / 0.35); /* ---- Layout ---- */ --container-max: 1280px; --sidebar-width: 260px; --header-height: 64px; --bottom-nav-height: 64px; } /* ----------------------------------------------------------------- * TOKENS — modo oscuro * Se activa con [data-theme="dark"] o automáticamente con * prefers-color-scheme cuando el usuario no ha elegido manual. * ----------------------------------------------------------------- */ [data-theme="dark"] { /* Dark mode MANTIX — Dark Core como background, cian como acento */ --color-bg: #060B28; /* Dark Core puro */ --color-bg-elevated: #11193a; --color-surface: #11193a; --color-surface-soft: #060B28; --color-border: #1f2848; --color-border-strong:#2d3760; --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-text-subtle: #64748b; --color-text-on-primary: #060B28; /* texto oscuro sobre cian */ /* En dark: primary = Cian Mantix brillante (texto oscuro encima). */ --color-primary: var(--color-accent-500); --color-primary-hover: var(--color-accent-400); --color-primary-soft: rgb(0 237 255 / 0.15); --color-accent: var(--color-accent-500); --color-accent-hover: var(--color-accent-400); --color-accent-soft: rgb(0 237 255 / 0.15); --color-success: var(--color-success-500); --color-warning: var(--color-warning-500); --color-danger: var(--color-danger-500); --color-info: var(--color-info-500); --focus-ring: 0 0 0 3px rgb(0 237 255 / 0.45); /* Sombras más sutiles en oscuro */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.30); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.35), 0 1px 2px -1px rgb(0 0 0 / 0.25); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.25); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.40), 0 4px 6px -4px rgb(0 0 0 / 0.25); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.45), 0 8px 10px -6px rgb(0 0 0 / 0.30); } /* Auto-dark si el sistema lo prefiere y el usuario no eligió manual */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #060B28; --color-bg-elevated: #11193a; --color-surface: #11193a; --color-surface-soft: #060B28; --color-border: #1f2848; --color-border-strong:#2d3760; --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-text-subtle: #64748b; --color-text-on-primary: #060B28; --color-primary: var(--color-accent-500); --color-primary-hover: var(--color-accent-400); --color-primary-soft: rgb(0 237 255 / 0.15); --color-accent: var(--color-accent-500); --color-accent-hover: var(--color-accent-400); --color-accent-soft: rgb(0 237 255 / 0.15); --color-success: var(--color-success-500); --color-warning: var(--color-warning-500); --color-danger: var(--color-danger-500); --color-info: var(--color-info-500); --focus-ring: 0 0 0 3px rgb(0 237 255 / 0.45); } } /* ----------------------------------------------------------------- * RESET y base * ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; padding: 0; font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--t-normal), color var(--t-normal); } img, svg, video { display: block; max-width: 100%; height: auto; } button { font: inherit; cursor: pointer; } a { color: var(--color-primary); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--color-primary-hover); text-decoration: underline; } /* Focus visible solo cuando se navega con teclado */ :focus { outline: none; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-md); } /* Tipografía base */ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-3) 0; line-height: var(--lh-tight); font-weight: var(--fw-semibold); color: var(--color-text); letter-spacing: -0.015em; } h1 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } h5 { font-size: var(--fs-base); } h6 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } p { margin: 0 0 var(--sp-3) 0; } small { font-size: var(--fs-sm); color: var(--color-text-muted); } code, kbd, pre { font-family: var(--font-mono); font-size: 0.9em; } /* Selection */ ::selection { background-color: var(--color-primary-soft); color: var(--color-primary); } /* Scrollbar minimalista (webkit) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--color-surface-soft); } ::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); border: 2px solid var(--color-surface-soft); } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); } /* ----------------------------------------------------------------- * HELPERS de layout (mínimos, no Tailwind completo) * ----------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--sp-4); } @media (min-width: 768px) { .container { padding-inline: var(--sp-6); } } .stack > * + * { margin-top: var(--sp-4); } .stack-sm > * + * { margin-top: var(--sp-2); } .stack-lg > * + * { margin-top: var(--sp-6); } .row { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; } .row-sm { display: flex; gap: var(--sp-2); align-items: center; } .grid { display: grid; gap: var(--sp-4); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .flex-1 { flex: 1; } .center { display: flex; align-items: center; justify-content: center; } .between { display: flex; align-items: center; justify-content: space-between; } .text-center { text-align: center; } .text-right { text-align: right; } .text-muted { color: var(--color-text-muted); } .text-subtle { color: var(--color-text-subtle); } .text-sm { font-size: var(--fs-sm); } .text-lg { font-size: var(--fs-lg); } .text-xl { font-size: var(--fs-xl); } .text-2xl { font-size: var(--fs-2xl); } .text-3xl { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; } .font-medium { font-weight: var(--fw-medium); } .font-semibold { font-weight: var(--fw-semibold); } .font-bold { font-weight: var(--fw-bold); } .hidden { display: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Mobile-only / Desktop-only */ @media (min-width: 768px) { .mobile-only { display: none !important; } } @media (max-width: 767px) { .desktop-only { display: none !important; } } /* ----------------------------------------------------------------- * ACCESIBILIDAD: respetar prefers-reduced-motion * ----------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ================================================================= * SweetAlert2 — paleta SIGEM + dark mode coherente * Swal.fire crea elementos en con clases swal2-*. Los estilos * default son blanco fijo, así que aquí los mapeamos a tokens SIGEM * para que respeten light/dark en TODA la app. * ================================================================= */ /* Backdrop */ .swal2-container.swal2-backdrop-show { background-color: rgba(15, 23, 42, 0.6) !important; backdrop-filter: blur(2px); } /* Popup (modal box) */ .swal2-popup { background-color: var(--color-bg-elevated) !important; color: var(--color-text) !important; border: 1px solid var(--color-border); border-radius: var(--radius-2xl) !important; box-shadow: var(--shadow-xl) !important; } .swal2-title { color: var(--color-text) !important; font-family: var(--font-sans); font-weight: var(--fw-semibold); } .swal2-html-container, .swal2-content { color: var(--color-text) !important; font-family: var(--font-sans); } /* Inputs dentro del modal */ .swal2-input, .swal2-textarea, .swal2-select, .swal2-file { background-color: var(--color-bg-elevated) !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; box-shadow: none !important; font-family: inherit; } .swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus { border-color: var(--color-primary) !important; box-shadow: var(--focus-ring) !important; outline: none !important; } .swal2-textarea { min-height: 80px; } .swal2-validation-message { background-color: var(--color-danger-50) !important; color: var(--color-danger-700) !important; border-radius: var(--radius-md); } [data-theme="dark"] .swal2-validation-message { background-color: var(--color-bg) !important; color: var(--color-danger) !important; } /* Botones: paleta SIGEM */ .swal2-styled.swal2-confirm { background-color: var(--color-primary) !important; color: #fff !important; border-radius: var(--radius-md) !important; font-weight: var(--fw-semibold); box-shadow: none !important; } .swal2-styled.swal2-confirm:focus { box-shadow: var(--focus-ring) !important; } .swal2-styled.swal2-cancel { background-color: var(--color-surface-soft) !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; font-weight: var(--fw-semibold); box-shadow: none !important; } .swal2-styled.swal2-cancel:hover { background-color: var(--color-border) !important; } .swal2-styled.swal2-deny { background-color: var(--color-danger) !important; color: #fff !important; border-radius: var(--radius-md) !important; font-weight: var(--fw-semibold); box-shadow: none !important; } /* Close button (×) */ .swal2-close { color: var(--color-text-muted) !important; } .swal2-close:hover { color: var(--color-text) !important; } /* Footer */ .swal2-footer { color: var(--color-text-muted) !important; border-top-color: var(--color-border) !important; } /* Toast / progress bar */ .swal2-timer-progress-bar { background-color: var(--color-primary) !important; }