/* * ══════════════════════════════════════════════════════════════════════════════ * PATRÓN TARAHUMARA — Sistema Visual Oficial de Raramuri.blzr * Versión 1.0 · Mayo 2026 * ────────────────────────────────────────────────────────────────────────────── * Este archivo es la ÚNICA fuente de verdad para colores, tipografía, espaciado * y efectos del proyecto. Ningún componente debe hardcodear un color directamente. * * Uso: var(--tara-) * Tema: se activa con [data-theme="dark"] en el elemento * JS: window.tarahumara.theme.apply(mode) / .toggle() / .get() * * Para agregar pantallas nuevas → leer docs/ui/PATRON_TARAHUMARA.md * ══════════════════════════════════════════════════════════════════════════════ */ /* ── MODO CLARO (default) ──────────────────────────────────────────────────── */ :root, [data-theme="light"] { /* Paleta Primaria — Rojo Tarahumara */ --tara-primary: #EC0000; --tara-primary-dark: #CC0000; /* Boston Red (Santander) */ --tara-primary-deeper: #990000; --tara-primary-subtle: rgba(236, 0, 0, 0.08); /* Fondos */ --tara-bg: #FBF1EA; /* Lisbon — crema suave */ --tara-surface: #FFFFFF; --tara-surface-raised: #F7F3EF; --tara-surface-overlay: rgba(255,255,255,0.95); /* Texto */ --tara-text: #1A1A1A; --tara-text-muted: #6B7280; --tara-text-inverse: #FFFFFF; /* Bordes */ --tara-border: #E6E1DC; --tara-border-subtle: #F0EBE6; /* Encabezado de app */ --tara-header-bg: #CC0000; --tara-header-text: #FFFFFF; /* Tabla / DataGrid */ --tara-th-bg: #F7F3EF; --tara-th-text: #374151; --tara-row-odd: #FFFFFF; --tara-row-even: #FDF8F5; --tara-row-hover: rgba(236, 0, 0, 0.04); --tara-row-selected: rgba(236, 0, 0, 0.10); /* Estados */ --tara-success: #16A34A; --tara-warning: #D97706; --tara-danger: #DC2626; --tara-info: #2563EB; /* Efectos */ --tara-shadow-sm: 0 1px 4px rgba(17,24,39,0.06); --tara-shadow: 0 4px 16px rgba(17,24,39,0.08); --tara-shadow-lg: 0 8px 32px rgba(17,24,39,0.12); --tara-radius-sm: 8px; --tara-radius: 14px; --tara-radius-lg: 20px; /* Transición del tema */ --tara-transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, fill 0.25s ease; } /* ── MODO OSCURO ───────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* Paleta primaria — más vivida en dark para mejor contraste */ --tara-primary-subtle: rgba(236, 0, 0, 0.18); /* Fondos — graphite azulado, no negro puro */ --tara-bg: #111318; --tara-surface: #181B21; --tara-surface-raised: #1F232B; --tara-surface-overlay: rgba(24,27,33,0.97); /* Texto — cool-white con jerarquía clara */ --tara-text: #F4F6F8; --tara-text-muted: #B8C0CC; --tara-text-inverse: #111318; /* Bordes — suficientemente visibles en fondos oscuros */ --tara-border: #343A46; --tara-border-subtle: #2A2F3A; /* Encabezado — el rojo se mantiene igual en dark */ /* Tabla / DataGrid — superficies distintas pero cercanas */ --tara-th-bg: #20242C; --tara-th-text: #D4D8E0; --tara-row-odd: #181B21; --tara-row-even: #1C2027; --tara-row-hover: rgba(236, 0, 0, 0.12); --tara-row-selected: rgba(236, 0, 0, 0.18); /* Efectos — sombras más profundas */ --tara-shadow-sm: 0 1px 4px rgba(0,0,0,0.40); --tara-shadow: 0 4px 16px rgba(0,0,0,0.50); --tara-shadow-lg: 0 8px 32px rgba(0,0,0,0.65); } /* ── APLICACIÓN GLOBAL DE TRANSICIÓN ──────────────────────────────────────── */ *, *::before, *::after { transition: var(--tara-transition); } /* Excluir transición en elementos que la tienen propia (evitar doble animación) */ .mud-icon-button, .mud-button, input, select, textarea { transition: none; } /* ── CLASES UTILITARIAS ────────────────────────────────────────────────────── */ /* Fondo principal */ .tara-bg { background-color: var(--tara-bg) !important; } .tara-surface { background-color: var(--tara-surface) !important; } /* Texto */ .tara-text { color: var(--tara-text) !important; } .tara-text-muted { color: var(--tara-text-muted) !important; } .tara-text-red { color: var(--tara-primary) !important; } /* Badge de estado activo/inactivo */ .tara-badge-activo { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; background-color: rgba(22, 163, 74, 0.12); color: #16A34A; } .tara-badge-inactivo { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; background-color: rgba(107, 114, 128, 0.12); color: var(--tara-text-muted); } /* Toggle de tema — botón flotante discreto */ .tara-theme-toggle { background: transparent; border: 1px solid rgba(255,255,255,0.35); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content:center; cursor: pointer; color: var(--tara-header-text); opacity: 0.80; transition: opacity 0.15s ease, border-color 0.15s ease !important; } .tara-theme-toggle:hover { opacity: 1; border-color: rgba(255,255,255,0.70); } /* Toggle en login (sobre fondo crema/oscuro) */ .tara-theme-toggle--login { border-color: var(--tara-border); color: var(--tara-text-muted); position: absolute; top: 16px; right: 16px; z-index: 50; /* sobre el hero que tiene isolation:isolate */ } /* ── Logo tema: mostrar/ocultar por tema sin flash (CSS actúa desde el anti-flash script) */ .tara-logo--light { display: block; } .tara-logo--dark { display: none; } [data-theme="dark"] .tara-logo--light { display: none; } [data-theme="dark"] .tara-logo--dark { display: block; } .tara-theme-toggle--login:hover { color: var(--tara-text); border-color: var(--tara-border); } /* ══════════════════════════════════════════════════════════════════════════ BOTÓN EXCEL — Patrón Tarahumara Grid v2 (estándar global) Semántica: exportar NO es una acción destructiva ni de búsqueda primaria. → Verde Excel (#1D6F42), nunca rojo Tarahumara. → Buscar usa Color.Error (rojo). Guardar/Editar usa Color.Primary. → Excel usa .tara-excel-btn (verde). Uso en Razor: Excel® El selector aplica !important para sobreescribir el verde por defecto de MudBlazor (Color.Success) con el verde exacto de la marca Excel. Funciona en archivos .razor.css con CSS isolation porque tarahumara-theme.css es una hoja global (no aislada). ══════════════════════════════════════════════════════════════════════════ */ .tara-excel-btn { /* Verde Excel (#1D6F42) — modo claro */ background-color: #1D6F42 !important; color: #FFFFFF !important; border-color: #1D6F42 !important; letter-spacing: .02em; font-weight: 600; } .tara-excel-btn:hover:not(:disabled) { background-color: #155732 !important; border-color: #155732 !important; } .tara-excel-btn:disabled { background-color: #1D6F42 !important; opacity: .52; } [data-theme="dark"] .tara-excel-btn { /* Verde Excel ligeramente más claro en dark — legible sobre fondos oscuros */ background-color: #1e8a4a !important; border-color: #1e8a4a !important; } [data-theme="dark"] .tara-excel-btn:hover:not(:disabled) { background-color: #238451 !important; border-color: #238451 !important; } [data-theme="dark"] .tara-excel-btn:disabled { background-color: #1e8a4a !important; opacity: .45; }