/* accesibilidad.css — barra flotante + estados de accesibilidad. Se activan con atributos en : data-a11y-fs, data-a11y-contraste, data-a11y-fuente, data-a11y-movimiento, data-a11y-modo (los pone js/accesibilidad.js). */ /* Fuente OpenDyslexic vendorizada localmente (no depende de un CDN externo) */ @font-face { font-family: 'OpenDyslexic'; src: url('vendor/fonts/OpenDyslexic-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('vendor/fonts/OpenDyslexic-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* Tamaño de letra (escala todo el sitio, que usa unidades rem/em de Bootstrap) */ html[data-a11y-fs="1"] { font-size: 87.5%; } html[data-a11y-fs="2"] { font-size: 100%; } html[data-a11y-fs="3"] { font-size: 112.5%; } html[data-a11y-fs="4"] { font-size: 125%; } /* Fuente para dislexia */ html[data-a11y-fuente="dislexia"] body, html[data-a11y-fuente="dislexia"] .libro-cuerpo, html[data-a11y-fuente="dislexia"] .libro-titulo { font-family: 'OpenDyslexic', Arial, sans-serif !important; } /* Alto contraste */ html[data-a11y-contraste="alto"] { --bs-body-bg: #000000; --bs-body-color: #ffffff; --bs-secondary-color: #ffffff; --bs-border-color: #ffffff; --bs-primary: #ffe066; --bs-link-color: #ffe066; --bs-link-hover-color: #fff3bf; } html[data-a11y-contraste="alto"] .card, html[data-a11y-contraste="alto"] .cogep-sidebar, html[data-a11y-contraste="alto"] .offcanvas { background: #000 !important; border: 1px solid #fff !important; } html[data-a11y-contraste="alto"] .btn-primary { --bs-btn-bg: #ffe066; --bs-btn-color: #000; --bs-btn-border-color: #ffe066; } html[data-a11y-contraste="alto"] a { text-decoration: underline; } /* Reducir animaciones */ html[data-a11y-movimiento="reducido"] *, html[data-a11y-movimiento="reducido"] *::before, html[data-a11y-movimiento="reducido"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ---- Barra flotante ---- */ #a11y-boton { position: fixed; right: 18px; bottom: 18px; z-index: 1080; width: 52px; height: 52px; border-radius: 50%; border: none; background: #0d6efd !important; color: #ffffff !important; font-size: 22px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); cursor: pointer; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; } #a11y-boton:hover { transform: scale(1.15) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6) !important; } #a11y-boton:active { transform: scale(0.9) !important; } #a11y-boton:focus-visible, #a11y-panel button:focus-visible { outline: 3px solid #ffe066; outline-offset: 2px; } #a11y-panel { position: fixed; right: 18px; bottom: 78px; z-index: 1080; width: 240px; background: #171B23; border: 1px solid rgba(232, 184, 90, 0.3); border-radius: 12px; padding: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); color: #F3F4F6; font-family: 'Inter', Arial, sans-serif; font-size: 14px; } .a11y-fila { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .a11y-botones { display: flex; gap: 6px; } .a11y-botones button, .a11y-toggle { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: #F3F4F6; border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 13px; } .a11y-toggle { display: block; width: 100%; text-align: left; margin-bottom: 8px; } .a11y-toggle:last-child { margin-bottom: 0; } .a11y-toggle[aria-pressed="true"] { background: var(--bs-primary, #E8B85A); color: #0F1117; border-color: var(--bs-primary, #E8B85A); font-weight: 600; } @media (max-width: 480px) { #a11y-panel { right: 10px; left: 10px; width: auto; } #a11y-boton { right: 12px; bottom: 12px; } } /* ---- MODO CLARO ---- */ html[data-a11y-modo="claro"] { --bs-body-bg: #FAFAFB !important; --bs-body-color: #111318 !important; --bs-body-color-rgb: 17, 19, 24 !important; --bs-emphasis-color: #111318 !important; --bs-secondary-color: #6B7280 !important; --bs-border-color: rgba(15, 17, 23, 0.12) !important; --bs-border-color-translucent: rgba(15, 17, 23, 0.12) !important; /* variables propias del tema (tarjetas, hover, sidebar) también deben aclararse; si no, se quedan con sus tonos oscuros de fábrica */ --cogep-panel: #ffffff !important; --cogep-sidebar-bg: #F5F6F8 !important; --cogep-hover: #EEF0F3 !important; --texto-prin: #111318 !important; --texto-sec: #6B7280 !important; /* mismos alias que usan css/juego.css y css/simulador.css (tablero del juego "Orden Procesal"), para que también se aclaren en este modo */ --fondo-base: #FAFAFB !important; --fondo-panel: #ffffff !important; --borde-glass: rgba(15, 17, 23, 0.08) !important; --dorado: #C9932E !important; --dorado-2: #A9762A !important; } html[data-a11y-modo="claro"] body { background-color: #FAFAFB !important; color: #111318 !important; } html[data-a11y-modo="claro"] .bg-dark, html[data-a11y-modo="claro"] .bg-black { background-color: #ffffff !important; } html[data-a11y-modo="claro"] .text-white, html[data-a11y-modo="claro"] .text-white-50 { color: #111318 !important; } html[data-a11y-modo="claro"] .text-secondary { color: #6B7280 !important; } html[data-a11y-modo="claro"] .border-secondary, html[data-a11y-modo="claro"] .border-light, html[data-a11y-modo="claro"] .border-warning { border-color: #E5E7EB !important; } html[data-a11y-modo="claro"] .card, html[data-a11y-modo="claro"] .modal-content { background-color: #ffffff !important; border: 1px solid #E5E7EB !important; box-shadow: 0 8px 30px rgba(15, 17, 23, 0.06) !important; } html[data-a11y-modo="claro"] .modal-header { border-bottom: 1px solid #E5E7EB !important; } html[data-a11y-modo="claro"] .btn-close-white { filter: invert(1) grayscale(100%) brightness(30%) !important; } html[data-a11y-modo="claro"] .list-group-item { background-color: transparent !important; color: #111318 !important; border-color: #EEF0F3 !important; } html[data-a11y-modo="claro"] .sidebar { background-color: #F5F6F8 !important; border-right: 1px solid #E5E7EB !important; } html[data-a11y-modo="claro"] .cogep-nav-link { color: #4B5563 !important; } html[data-a11y-modo="claro"] .cogep-nav-link:hover, html[data-a11y-modo="claro"] .cogep-nav-link.active { background-color: #EEF0F3 !important; color: #111318 !important; } html[data-a11y-modo="claro"] .modal-title, html[data-a11y-modo="claro"] h1, html[data-a11y-modo="claro"] h2, html[data-a11y-modo="claro"] h3, html[data-a11y-modo="claro"] h4, html[data-a11y-modo="claro"] h5 { color: #111318 !important; } /* ---- Mejoras UI: Efectos Hover (Cards y Accordion) ---- */ .card { transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease !important; } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important; } .accordion-item { transition: transform 0.3s ease, box-shadow 0.3s ease; } .accordion-item:hover { transform: translateX(4px); box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.2) !important; } /* Hover adaptado al modo claro para que la sombra no sea negra fuerte */ html[data-a11y-modo="claro"] .card:hover { box-shadow: 0 12px 35px rgba(15, 17, 23, 0.12) !important; } html[data-a11y-modo="claro"] .accordion-item:hover { box-shadow: -4px 4px 15px rgba(15, 17, 23, 0.08) !important; } /* Cambiar el color del acordeón activo (pregunta abierta) en diseño claro */ html[data-a11y-modo="claro"] .accordion-button:not(.collapsed) { background-color: #EEF0F3 !important; color: #111318 !important; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.06); } html[data-a11y-modo="claro"] .accordion-button:focus { box-shadow: 0 0 0 0.25rem rgba(232, 184, 90, 0.25) !important; border-color: #C9932E !important; } /* ---- Ajustes adicionales para test.php y modulo.php ---- */ /* Visibilidad de la selección de test en modo claro */ html[data-a11y-modo="claro"] .list-group-item.active, html[data-a11y-modo="claro"] .list-group-item-success { background-color: #EEF0F3 !important; color: #111318 !important; border-color: #C9932E !important; font-weight: bold; } html[data-a11y-modo="claro"] .list-group-item-danger { background-color: #f8d7da !important; color: #842029 !important; border-color: #f5c2c7 !important; } /* Módulo de lectura (libro) en modo claro */ html[data-a11y-modo="claro"] #lector-root { background: #FAFAFB !important; } html[data-a11y-modo="claro"] #topbar { background: #F5F6F8 !important; border-bottom: 1px solid #E5E7EB !important; } html[data-a11y-modo="claro"] #topbar a, html[data-a11y-modo="claro"] #topbar button { color: #4B5563 !important; background: #ffffff !important; border-color: #E5E7EB !important; } html[data-a11y-modo="claro"] #btn-progreso { color: #4B5563 !important; } html[data-a11y-modo="claro"] #progreso-texto { color: #6B7280 !important; } html[data-a11y-modo="claro"] #progreso-track { background: #E5E7EB !important; } html[data-a11y-modo="claro"] #bottombar button { background: #ffffff !important; color: #4B5563 !important; border-color: #E5E7EB !important; } /* Módulo de lectura (libro) en alto contraste */ html[data-a11y-contraste="alto"] #lector-root { background: #000000 !important; } html[data-a11y-contraste="alto"] #topbar { background: #000000 !important; border-bottom: 2px solid #ffff00 !important; } html[data-a11y-contraste="alto"] #topbar a, html[data-a11y-contraste="alto"] #topbar button { color: #ffff00 !important; background: #000000 !important; border-color: #ffff00 !important; } html[data-a11y-contraste="alto"] #bottombar button { background: #000000 !important; color: #ffff00 !important; border-color: #ffff00 !important; } html[data-a11y-contraste="alto"] .libro-pagina { background: #000 !important; color: #ff0 !important; box-shadow: 0 0 0 4px #ff0 inset !important; } html[data-a11y-contraste="alto"] .libro-pagina h1, html[data-a11y-contraste="alto"] .libro-pagina h2, html[data-a11y-contraste="alto"] .libro-pagina h3, html[data-a11y-contraste="alto"] .libro-pagina h4, html[data-a11y-contraste="alto"] .libro-pagina p { color: #ff0 !important; } /* ---- ARREGLOS PANEL ADMIN Y PROFESOR (MODO CLARO) ---- */ /* 1. Asegurar que las tablas sean visibles (texto oscuro) */ html[data-a11y-modo="claro"] .table { --bs-table-color: #111318 !important; color: #111318 !important; } /* 2. Barra lateral (Sidebar) clara para contrastar con el texto oscuro */ html[data-a11y-modo="claro"] .cogep-sidebar { background: #F5F6F8 !important; border-right: 1px solid #E5E7EB !important; } html[data-a11y-modo="claro"] .cogep-sidebar .nav-link { color: #4B5563 !important; } html[data-a11y-modo="claro"] .cogep-sidebar .nav-link:hover, html[data-a11y-modo="claro"] .cogep-sidebar .nav-link.active { background: #EEF0F3 !important; color: #111318 !important; } html[data-a11y-modo="claro"] .cogep-sidebar .border-bottom { border-bottom-color: #E5E7EB !important; } /* Asegurar que al pasar el mouse sobre la tabla (hover) el texto no se vuelva blanco */ html[data-a11y-modo="claro"] .table { --bs-table-hover-color: #111318 !important; --bs-table-striped-color: #111318 !important; --bs-table-active-color: #111318 !important; } html[data-a11y-modo="claro"] .table-hover > tbody > tr:hover > * { color: #111318 !important; } /* Batalla Legal (Kahoot): las etiquetas de jugadores en el lobby usan texto blanco sobre un fondo traslucido; si el body se aclara con el modo claro, quedan blanco sobre blanco (invisibles). Se oscurecen para que se sigan viendo. */ html[data-a11y-modo="claro"] .lobby-jugador { background-color: rgba(15, 17, 23, 0.06) !important; color: #111318 !important; border-color: rgba(15, 17, 23, 0.14) !important; } html[data-a11y-modo="claro"] .avatar-fallback { background: rgba(15, 17, 23, 0.1) !important; color: #111318 !important; } /* Orden Procesal (juego.css): la barra superior tiene un fondo oscuro fijo (no usa variables); en modo claro se aclara para que el texto siga siendo legible sobre ella. */ html[data-a11y-modo="claro"] .jg-top { background: rgba(255, 255, 255, 0.85) !important; } /* Formularios en modo claro */ html[data-a11y-modo="claro"] .form-control, html[data-a11y-modo="claro"] .form-select { background-color: #fff !important; color: #111318 !important; border-color: #E5E7EB !important; } html[data-a11y-modo="claro"] .form-control:focus, html[data-a11y-modo="claro"] .form-select:focus { background-color: #fff !important; color: #111318 !important; border-color: var(--bs-primary) !important; box-shadow: 0 0 0 0.25rem rgba(232, 184, 90, 0.25) !important; } html[data-a11y-modo="claro"] .form-control::placeholder, html[data-a11y-modo="claro"] .form-select::placeholder { color: #9CA3AF !important; } html[data-a11y-modo="claro"] .form-label { color: #4B5563 !important; } /* ---- Simulador de Audiencias en modo claro ---- */ html[data-a11y-modo="claro"] .sim-root, html[data-a11y-modo="claro"] .tribunal-wrap { background: #FAFAFB !important; } html[data-a11y-modo="claro"] .sim-top { background: #ffffff !important; border-bottom-color: #E5E7EB !important; } html[data-a11y-modo="claro"] .sim-top a, html[data-a11y-modo="claro"] .sim-top-titulo { color: #111318 !important; } html[data-a11y-modo="claro"] .tribunal-bg { background: linear-gradient(180deg, #FAFAFB 0%, #E5E7EB 100%) !important; } html[data-a11y-modo="claro"] .tribunal-suelo { background: linear-gradient(180deg, transparent, #D1D5DB 100%) !important; } html[data-a11y-modo="claro"] .estrado { background: linear-gradient(180deg, #ffffff, #F5F6F8) !important; border-top-color: var(--bs-primary) !important; } html[data-a11y-modo="claro"] .bocadillo { background: #ffffff !important; color: #111318 !important; box-shadow: 0 4px 18px rgba(15, 17, 23, 0.1) !important; } html[data-a11y-modo="claro"] .bocadillo::after { border-top-color: #ffffff !important; } html[data-a11y-modo="claro"] .narrativa { background: #ffffff !important; border-color: #E5E7EB !important; } html[data-a11y-modo="claro"] .narr-texto { color: #111318 !important; } html[data-a11y-modo="claro"] .op-btn { background: #ffffff !important; border-color: #E5E7EB !important; color: #4B5563 !important; } html[data-a11y-modo="claro"] .op-btn:hover:not(:disabled) { background: #F5F6F8 !important; color: #111318 !important; border-color: var(--bs-primary) !important; } html[data-a11y-modo="claro"] .op-letra { background: #EEF0F3 !important; color: #111318 !important; } html[data-a11y-modo="claro"] .xp-track { background: #E5E7EB !important; } html[data-a11y-modo="claro"] .pantalla-final { background: #ffffff !important; border-color: #E5E7EB !important; } html[data-a11y-modo="claro"] .pf-titulo { color: #111318 !important; } html[data-a11y-modo="claro"] .pf-desc { color: #4B5563 !important; }