/* ========================================================================== BISAE ยท Temas visuales reutilizables Se activan con data-theme="nombre" en . Nota de arquitectura: - bisae.variables.css declara los tokens generales. - organization.css aplica colores institucionales SOLO en data-theme="default". - Este archivo define temas completos para que todos los selectores generen un cambio visual perceptible. ========================================================================== */ [data-theme="default"] { --bg-main: #f8fafc; --bg-card: #ffffff; --bg-muted: #f1f5f9; --bg-elevated: rgba(255, 255, 255, .84); --bg-hero: radial-gradient(circle at 12% 8%, rgba(21, 54, 224, .12), transparent 28%), radial-gradient(circle at 88% 6%, rgba(239, 35, 60, .10), transparent 22%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --text-inverse: #ffffff; --border-default: #e2e8f0; --border-strong: #cbd5e1; --border-soft: rgba(226, 232, 240, .78); } [data-theme="dark"] { --bg-main: #070b14; --bg-card: #101827; --bg-muted: #0b1220; --bg-elevated: rgba(16, 24, 39, .88); --bg-hero: radial-gradient(circle at 12% 8%, rgba(148, 163, 184, .14), transparent 28%), radial-gradient(circle at 88% 6%, rgba(248, 113, 113, .12), transparent 22%), linear-gradient(180deg, #070b14 0%, #111827 100%); --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-inverse: #07111f; --color-primary: #e2e8f0; --color-primary-hover: #cbd5e1; --color-secondary: #94a3b8; --color-secondary-hover: #e2e8f0; --color-accent: #f43f5e; --color-accent-hover: #fb7185; --color-accent-muted: rgba(244, 63, 94, .16); --border-default: #1e293b; --border-strong: #334155; --border-soft: rgba(51, 65, 85, .76); --focus-ring-color: rgba(244, 63, 94, .42); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .18); --shadow-md: 0 14px 36px rgba(0, 0, 0, .26); --shadow-lg: 0 32px 80px rgba(0, 0, 0, .34); --shadow-brand: 0 28px 80px rgba(0, 0, 0, .30); } [data-theme="noche-azul"] { --bg-main: #061525; --bg-card: #102033; --bg-muted: #0b1a2b; --bg-elevated: rgba(16, 32, 51, .88); --bg-hero: radial-gradient(circle at 12% 8%, rgba(56, 189, 248, .18), transparent 28%), radial-gradient(circle at 88% 6%, rgba(99, 102, 241, .18), transparent 22%), linear-gradient(180deg, #061525 0%, #0f172a 100%); --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-inverse: #07111f; --color-primary: #38bdf8; --color-primary-hover: #7dd3fc; --color-secondary: #818cf8; --color-secondary-hover: #a5b4fc; --color-accent: #f43f5e; --color-accent-hover: #fb7185; --color-accent-muted: rgba(244, 63, 94, .16); --border-default: #1e293b; --border-strong: #334155; --border-soft: rgba(51, 65, 85, .76); --focus-ring-color: rgba(56, 189, 248, .42); } [data-theme="lila"] { --bg-main: #fbf7ff; --bg-card: #ffffff; --bg-muted: #f3e8ff; --bg-elevated: rgba(255, 255, 255, .86); --bg-hero: radial-gradient(circle at 12% 8%, rgba(124, 58, 237, .17), transparent 28%), radial-gradient(circle at 88% 6%, rgba(236, 72, 153, .15), transparent 22%), linear-gradient(180deg, #fff 0%, #fbf7ff 100%); --text-primary: #241334; --text-secondary: #4c1d95; --text-muted: #6b4a7d; --text-inverse: #ffffff; --color-primary: #7c3aed; --color-primary-hover: #6d28d9; --color-secondary: #4c1d95; --color-secondary-hover: #3b0764; --color-accent: #ec4899; --color-accent-hover: #db2777; --color-accent-muted: #fce7f3; --border-default: #e9d5ff; --border-strong: #d8b4fe; --border-soft: rgba(216, 180, 254, .70); --focus-ring-color: rgba(124, 58, 237, .38); --shadow-brand: 0 28px 80px rgba(124, 58, 237, .18); } [data-theme="morado"] { --bg-main: #f7f4ff; --bg-card: #ffffff; --bg-muted: #ede9fe; --bg-elevated: rgba(255, 255, 255, .86); --bg-hero: radial-gradient(circle at 12% 8%, rgba(109, 40, 217, .18), transparent 28%), radial-gradient(circle at 88% 6%, rgba(245, 158, 11, .16), transparent 22%), linear-gradient(180deg, #ffffff 0%, #f7f4ff 100%); --text-primary: #211140; --text-secondary: #312e81; --text-muted: #5b4f83; --text-inverse: #ffffff; --color-primary: #6d28d9; --color-primary-hover: #581c87; --color-secondary: #312e81; --color-secondary-hover: #1e1b4b; --color-accent: #f59e0b; --color-accent-hover: #d97706; --color-accent-muted: #fef3c7; --border-default: #ddd6fe; --border-strong: #c4b5fd; --border-soft: rgba(196, 181, 253, .72); --focus-ring-color: rgba(109, 40, 217, .38); --shadow-brand: 0 28px 80px rgba(109, 40, 217, .18); } [data-theme="oceano"] { --bg-main: #f0fbff; --bg-card: #ffffff; --bg-muted: #e0f7fa; --bg-elevated: rgba(255, 255, 255, .86); --bg-hero: radial-gradient(circle at 12% 8%, rgba(3, 105, 161, .16), transparent 28%), radial-gradient(circle at 88% 6%, rgba(34, 211, 238, .20), transparent 22%), linear-gradient(180deg, #ffffff 0%, #f0fbff 100%); --text-primary: #082f49; --text-secondary: #155e75; --text-muted: #3d6f7a; --text-inverse: #ffffff; --color-primary: #0369a1; --color-primary-hover: #075985; --color-secondary: #0f766e; --color-secondary-hover: #115e59; --color-accent: #22d3ee; --color-accent-hover: #06b6d4; --color-accent-muted: #cffafe; --border-default: #bae6fd; --border-strong: #7dd3fc; --border-soft: rgba(125, 211, 252, .64); --focus-ring-color: rgba(3, 105, 161, .38); --shadow-brand: 0 28px 80px rgba(3, 105, 161, .16); } [data-theme="bosque"] { --bg-main: #f3fbf4; --bg-card: #ffffff; --bg-muted: #dcfce7; --bg-elevated: rgba(255, 255, 255, .86); --bg-hero: radial-gradient(circle at 12% 8%, rgba(22, 101, 52, .16), transparent 28%), radial-gradient(circle at 88% 6%, rgba(132, 204, 22, .18), transparent 22%), linear-gradient(180deg, #ffffff 0%, #f3fbf4 100%); --text-primary: #102617; --text-secondary: #166534; --text-muted: #4d6b52; --text-inverse: #ffffff; --color-primary: #166534; --color-primary-hover: #14532d; --color-secondary: #365314; --color-secondary-hover: #1f2f0b; --color-accent: #84cc16; --color-accent-hover: #65a30d; --color-accent-muted: #ecfccb; --border-default: #bbf7d0; --border-strong: #86efac; --border-soft: rgba(134, 239, 172, .60); --focus-ring-color: rgba(22, 101, 52, .36); --shadow-brand: 0 28px 80px rgba(22, 101, 52, .16); } [data-theme="sol"] { --bg-main: #fffaf0; --bg-card: #ffffff; --bg-muted: #fef3c7; --bg-elevated: rgba(255, 255, 255, .86); --bg-hero: radial-gradient(circle at 12% 8%, rgba(180, 83, 9, .17), transparent 28%), radial-gradient(circle at 88% 6%, rgba(250, 204, 21, .24), transparent 22%), linear-gradient(180deg, #ffffff 0%, #fffaf0 100%); --text-primary: #3b2407; --text-secondary: #7c2d12; --text-muted: #775a35; --text-inverse: #ffffff; --color-primary: #b45309; --color-primary-hover: #92400e; --color-secondary: #7c2d12; --color-secondary-hover: #431407; --color-accent: #facc15; --color-accent-hover: #eab308; --color-accent-muted: #fef9c3; --border-default: #fde68a; --border-strong: #fcd34d; --border-soft: rgba(252, 211, 77, .60); --focus-ring-color: rgba(180, 83, 9, .34); --shadow-brand: 0 28px 80px rgba(180, 83, 9, .16); } [data-theme="rosa"] { --bg-main: #fff5f8; --bg-card: #ffffff; --bg-muted: #fce7f3; --bg-elevated: rgba(255, 255, 255, .86); --bg-hero: radial-gradient(circle at 12% 8%, rgba(190, 24, 93, .16), transparent 28%), radial-gradient(circle at 88% 6%, rgba(251, 113, 133, .19), transparent 22%), linear-gradient(180deg, #ffffff 0%, #fff5f8 100%); --text-primary: #3d1024; --text-secondary: #831843; --text-muted: #79445e; --text-inverse: #ffffff; --color-primary: #be185d; --color-primary-hover: #9d174d; --color-secondary: #831843; --color-secondary-hover: #500724; --color-accent: #fb7185; --color-accent-hover: #f43f5e; --color-accent-muted: #ffe4e6; --border-default: #fbcfe8; --border-strong: #f9a8d4; --border-soft: rgba(249, 168, 212, .62); --focus-ring-color: rgba(190, 24, 93, .34); --shadow-brand: 0 28px 80px rgba(190, 24, 93, .16); } [data-theme="fuego"] { --bg-main: #fff5f2; --bg-card: #ffffff; --bg-muted: #ffedd5; --bg-elevated: rgba(255, 255, 255, .86); --bg-hero: radial-gradient(circle at 12% 8%, rgba(185, 28, 28, .16), transparent 28%), radial-gradient(circle at 88% 6%, rgba(249, 115, 22, .20), transparent 22%), linear-gradient(180deg, #ffffff 0%, #fff5f2 100%); --text-primary: #3f1111; --text-secondary: #7f1d1d; --text-muted: #7a4742; --text-inverse: #ffffff; --color-primary: #b91c1c; --color-primary-hover: #991b1b; --color-secondary: #7f1d1d; --color-secondary-hover: #450a0a; --color-accent: #f97316; --color-accent-hover: #ea580c; --color-accent-muted: #ffedd5; --border-default: #fecaca; --border-strong: #fca5a5; --border-soft: rgba(252, 165, 165, .62); --focus-ring-color: rgba(185, 28, 28, .34); --shadow-brand: 0 28px 80px rgba(185, 28, 28, .16); } [data-theme="hielo"] { --bg-main: #f0fdff; --bg-card: #ffffff; --bg-muted: #ecfeff; --bg-elevated: rgba(255, 255, 255, .86); --bg-hero: radial-gradient(circle at 12% 8%, rgba(8, 145, 178, .15), transparent 28%), radial-gradient(circle at 88% 6%, rgba(103, 232, 249, .22), transparent 22%), linear-gradient(180deg, #ffffff 0%, #f0fdff 100%); --text-primary: #083344; --text-secondary: #155e75; --text-muted: #3f7180; --text-inverse: #ffffff; --color-primary: #0891b2; --color-primary-hover: #0e7490; --color-secondary: #155e75; --color-secondary-hover: #164e63; --color-accent: #67e8f9; --color-accent-hover: #22d3ee; --color-accent-muted: #ecfeff; --border-default: #a5f3fc; --border-strong: #67e8f9; --border-soft: rgba(103, 232, 249, .62); --focus-ring-color: rgba(8, 145, 178, .34); --shadow-brand: 0 28px 80px rgba(8, 145, 178, .15); } [data-theme="grafito"] { --bg-main: #f4f4f5; --bg-card: #ffffff; --bg-muted: #e4e4e7; --bg-elevated: rgba(255, 255, 255, .86); --bg-hero: radial-gradient(circle at 12% 8%, rgba(39, 39, 42, .14), transparent 28%), radial-gradient(circle at 88% 6%, rgba(14, 165, 233, .15), transparent 22%), linear-gradient(180deg, #ffffff 0%, #f4f4f5 100%); --text-primary: #18181b; --text-secondary: #3f3f46; --text-muted: #71717a; --text-inverse: #ffffff; --color-primary: #27272a; --color-primary-hover: #18181b; --color-secondary: #52525b; --color-secondary-hover: #27272a; --color-accent: #0ea5e9; --color-accent-hover: #0284c7; --color-accent-muted: #e0f2fe; --border-default: #d4d4d8; --border-strong: #a1a1aa; --border-soft: rgba(161, 161, 170, .62); --focus-ring-color: rgba(39, 39, 42, .34); --shadow-brand: 0 28px 80px rgba(39, 39, 42, .15); } [data-theme="menta"] { --bg-main: #f0fdfa; --bg-card: #ffffff; --bg-muted: #ccfbf1; --bg-elevated: rgba(255, 255, 255, .86); --bg-hero: radial-gradient(circle at 12% 8%, rgba(4, 120, 87, .16), transparent 28%), radial-gradient(circle at 88% 6%, rgba(45, 212, 191, .20), transparent 22%), linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%); --text-primary: #052e26; --text-secondary: #0f766e; --text-muted: #47726a; --text-inverse: #ffffff; --color-primary: #047857; --color-primary-hover: #065f46; --color-secondary: #0f766e; --color-secondary-hover: #115e59; --color-accent: #2dd4bf; --color-accent-hover: #14b8a6; --color-accent-muted: #ccfbf1; --border-default: #99f6e4; --border-strong: #5eead4; --border-soft: rgba(94, 234, 212, .62); --focus-ring-color: rgba(4, 120, 87, .34); --shadow-brand: 0 28px 80px rgba(4, 120, 87, .15); } [data-theme="sinapsys"] { --bg-main: #f6f8ff; --bg-card: #ffffff; --bg-muted: #eaf0ff; --bg-elevated: rgba(255, 255, 255, .88); --bg-hero: radial-gradient(circle at 12% 8%, rgba(37, 71, 255, .18), transparent 28%), radial-gradient(circle at 88% 6%, rgba(0, 212, 255, .20), transparent 22%), linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%); --text-primary: #101828; --text-secondary: #1d2939; --text-muted: #667085; --text-inverse: #ffffff; --color-primary: #2547ff; --color-primary-hover: #182bb2; --color-secondary: #101828; --color-secondary-hover: #000000; --color-accent: #00d4ff; --color-accent-hover: #00a6c9; --color-accent-muted: #e0f8ff; --border-default: #d6e4ff; --border-strong: #a9c5ff; --border-soft: rgba(169, 197, 255, .62); --focus-ring-color: rgba(37, 71, 255, .38); --shadow-brand: 0 28px 80px rgba(37, 71, 255, .16); }