/** * Temas de Accesibilidad - Ilumina360 * 8 temas que se activan via data-tema en * Se aplican sobre las variables CSS existentes del portal */ /* ==================== TEMA: Estándar ==================== */ /* No necesita override — usa los CSS nativos del portal */ [data-tema="estandar"] { /* Marcador explícito, hereda todo del portal */ } /* ==================== TEMA: Alto Contraste ==================== */ [data-tema="alto-contraste"] { --bg-primary: #000000; --bg-secondary: #0A0A0A; --bg-tertiary: #1A1A1A; --bg-hover: #222222; --text-primary: #FFFFFF; --text-secondary: #E0E0E0; --text-muted: #BBBBBB; --text-inverse: #000000; --border-light: #FFFFFF; --border-medium: #CCCCCC; --border-dark: #FFFFFF; --primary: #FFD700; --primary-light: #332B00; --primary-dark: #FFEA00; --primary-hover: #FFE033; --shadow-sm: 0 1px 2px 0 rgba(255, 255, 255, 0.1); --shadow-md: 0 2px 4px 0 rgba(255, 255, 255, 0.08); --shadow-lg: 0 4px 8px 0 rgba(255, 255, 255, 0.06); /* Landing/style.css overrides */ --dark: #FFFFFF; --light: #000000; --secondary: #00FFFF; --accent: #FFD700; } [data-tema="alto-contraste"] body { background: #000000 !important; color: #FFFFFF !important; } [data-tema="alto-contraste"] a { color: #FFD700; } [data-tema="alto-contraste"] a:hover { color: #FFEA00; } [data-tema="alto-contraste"] button, [data-tema="alto-contraste"] .btn { border: 2px solid #FFFFFF !important; } [data-tema="alto-contraste"] input, [data-tema="alto-contraste"] select, [data-tema="alto-contraste"] textarea { background: #1A1A1A !important; color: #FFFFFF !important; border: 2px solid #FFFFFF !important; } [data-tema="alto-contraste"] :focus { outline: 3px solid #FFD700 !important; outline-offset: 2px; } /* ==================== TEMA: Deuteranopia (rojo-verde) ==================== */ [data-tema="deuteranopia"] { --primary: #0077BB; --primary-light: #D4EAFF; --primary-dark: #005599; --primary-hover: #004488; --status-nuevo: #0077BB; --status-nuevo-bg: #D4EAFF; --status-contactado: #CC6677; --status-contactado-bg: #FFE4E8; --status-interesado: #44AA99; --status-interesado-bg: #D4F5F0; --status-cita-agendada: #DDCC77; --status-cita-agendada-bg: #FFF8E1; --status-visita-realizada: #117733; --status-visita-realizada-bg: #D4EDDA; --status-en-validacion: #332288; --status-en-validacion-bg: #E0DAFB; --status-pago-validado: #88CCEE; --status-pago-validado-bg: #D4F1FF; --status-inscrito: #44AA99; --status-inscrito-bg: #D4F5F0; --status-no-interesado: #882255; --status-no-interesado-bg: #F5D4E4; --status-perdido: #999999; --status-perdido-bg: #F0F0F0; } /* ==================== TEMA: Protanopia (rojo) ==================== */ [data-tema="protanopia"] { --primary: #0077BB; --primary-light: #D4EAFF; --primary-dark: #005599; --primary-hover: #004488; --status-nuevo: #0077BB; --status-nuevo-bg: #D4EAFF; --status-contactado: #AA7744; --status-contactado-bg: #FFF0DB; --status-interesado: #44AA99; --status-interesado-bg: #D4F5F0; --status-cita-agendada: #DDCC77; --status-cita-agendada-bg: #FFF8E1; --status-visita-realizada: #228833; --status-visita-realizada-bg: #D4EDDA; --status-en-validacion: #4477AA; --status-en-validacion-bg: #D4E4FF; --status-pago-validado: #66CCEE; --status-pago-validado-bg: #D4F1FF; --status-inscrito: #44AA99; --status-inscrito-bg: #D4F5F0; --status-no-interesado: #AA3377; --status-no-interesado-bg: #F5D4E4; --status-perdido: #BBBBBB; --status-perdido-bg: #F0F0F0; } /* ==================== TEMA: Tritanopia (azul-amarillo) ==================== */ [data-tema="tritanopia"] { --primary: #CC4455; --primary-light: #FFE4E8; --primary-dark: #AA2233; --primary-hover: #992233; --status-nuevo: #CC4455; --status-nuevo-bg: #FFE4E8; --status-contactado: #44AA99; --status-contactado-bg: #D4F5F0; --status-interesado: #CC6677; --status-interesado-bg: #FFE8EC; --status-cita-agendada: #EE7733; --status-cita-agendada-bg: #FFE8D4; --status-visita-realizada: #009988; --status-visita-realizada-bg: #D4F5F0; --status-en-validacion: #EE3377; --status-en-validacion-bg: #FFD4E8; --status-pago-validado: #009988; --status-pago-validado-bg: #D4F5F0; --status-inscrito: #117755; --status-inscrito-bg: #D4EDDA; --status-no-interesado: #AA3355; --status-no-interesado-bg: #FFD4DF; --status-perdido: #888888; --status-perdido-bg: #F0F0F0; } /* ==================== TEMA: Texto Grande ==================== */ [data-tema="texto-grande"] { font-size: 18px !important; } [data-tema="texto-grande"] h1 { font-size: 2.4rem !important; } [data-tema="texto-grande"] h2 { font-size: 2rem !important; } [data-tema="texto-grande"] h3 { font-size: 1.6rem !important; } [data-tema="texto-grande"] h4 { font-size: 1.3rem !important; } [data-tema="texto-grande"] p, [data-tema="texto-grande"] span, [data-tema="texto-grande"] td, [data-tema="texto-grande"] th, [data-tema="texto-grande"] li, [data-tema="texto-grande"] label, [data-tema="texto-grande"] input, [data-tema="texto-grande"] select, [data-tema="texto-grande"] textarea, [data-tema="texto-grande"] button { font-size: 1.1rem !important; } [data-tema="texto-grande"] .stat-value, [data-tema="texto-grande"] .kpi-value { font-size: 2rem !important; } /* ==================== TEMA: Movimiento Reducido ==================== */ [data-tema="movimiento-reducido"] *, [data-tema="movimiento-reducido"] *::before, [data-tema="movimiento-reducido"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* ==================== TEMA: Oscuro ==================== */ [data-tema="oscuro"] { --bg-primary: #111827; --bg-secondary: #1F2937; --bg-tertiary: #374151; --bg-hover: #4B5563; --text-primary: #F9FAFB; --text-secondary: #D1D5DB; --text-muted: #9CA3AF; --text-inverse: #111827; --border-light: #374151; --border-medium: #4B5563; --border-dark: #6B7280; --primary: #60A5FA; --primary-light: #1E3A5F; --primary-dark: #93C5FD; --primary-hover: #3B82F6; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); /* Landing/style.css */ --dark: #F9FAFB; --light: #111827; --secondary: #60A5FA; --accent: #34D399; } [data-tema="oscuro"] body { background: #111827 !important; color: #F9FAFB !important; } [data-tema="oscuro"] .card, [data-tema="oscuro"] .modal-content, [data-tema="oscuro"] .dropdown-menu { background: #1F2937 !important; border-color: #374151 !important; } [data-tema="oscuro"] input, [data-tema="oscuro"] select, [data-tema="oscuro"] textarea { background: #374151 !important; color: #F9FAFB !important; border-color: #4B5563 !important; } [data-tema="oscuro"] table th { background: #1F2937 !important; color: #D1D5DB !important; } [data-tema="oscuro"] table td { border-color: #374151 !important; } [data-tema="oscuro"] .sidebar, [data-tema="oscuro"] .nav-sidebar { background: #0F172A !important; } /* ==================== Tamaño de fuente por clase ==================== */ .font-small { font-size: 13px !important; } .font-normal { font-size: 15px !important; } .font-large { font-size: 18px !important; } .font-xl { font-size: 21px !important; } /* ==================== Clase reduce-motion ==================== */ .reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* ==================== Pictogramas ==================== */ .show-pictograms [data-picto]::before { content: attr(data-picto) " "; font-size: 1.2em; vertical-align: middle; } /* ==================== Lector de pantalla ==================== */ .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; } .sr-active .sr-desc { position: static; width: auto; height: auto; margin: 0; clip: auto; white-space: normal; display: block; font-size: 0.85em; color: var(--text-secondary, #6B7280); padding: 4px 0; } /* ==================== Focus visible global ==================== */ :focus-visible { outline: 3px solid var(--primary, #2563EB); outline-offset: 2px; }