/* * Ajustes de accesibilidad, contraste y movimiento (ver AUDITORIA-UI.md, 2026-10-26). * * Se carga después de bundle.min.css, que no se regenera: sus fuentes (style.less) no se compilan * desde 2020 y bundle.min.js fue editado a mano. Los selectores repiten los de style.css para * ganar por orden de carga, sin aumentar la especificidad. * * Los naranjas de marca (#ed5000, #e16a02, #fd7a07, #ffaa2b) no alcanzan 4,5:1 como color de texto * ni con texto blanco encima. Se reemplazan por un único naranja oscuro de la misma familia. */ :root { --seu-naranja-texto: #b93e00; /* 5,6:1 sobre blanco · 5,2:1 sobre #f7f7f7 · 4,8:1 sobre el rosa de las tablas */ --seu-naranja-texto-hover: #9a3412; /* 7,3:1 */ --seu-texto-sobre-amarillo: #2a1600; /* 9,1:1 sobre #ffaa2b */ --seu-foco: #1f1f1f; --seu-foco-halo: #ffffff; } /* --------------------------------------------------------------------------------------------- * Foco visible (WCAG 2.4.7). style.css anula el outline en 20 reglas :focus; acá se recupera solo * para el teclado (:focus-visible), con contorno oscuro y halo blanco: se ve sobre blanco, sobre * el naranja del header y sobre fotos. * ------------------------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible { outline: 3px solid var(--seu-foco) !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px var(--seu-foco-halo) !important; } /* --------------------------------------------------------------------------------------------- * Contraste de texto (WCAG 1.4.3) * ------------------------------------------------------------------------------------------- */ a { color: var(--seu-naranja-texto); } a:hover, a:focus { color: var(--seu-naranja-texto-hover); } /* Links dentro del texto del slider: van sobre fotos con una capa negra al 60 %; con una foto clara detrás, el fondo efectivo llega a #666 y ningún naranja alcanza 4,5:1. Blanco (como el resto del texto) y subrayado para distinguirlos. */ .content-slider .caption a:not([class*="btn-"]) { color: #fff; text-decoration: underline; text-underline-offset: 0.15em; } .breadcrumb a, .title-curso-destacado h1, .box-datos-cursos .c-naranja, .navbar .dropdown-menu .dropdown-item, .cursos-box .curso-ifo .curso-titulo, .cursos-box .curso-ifo .curso-titulo a, .cursos-box.cursos-category .curso-ifo .curso-duracion, .cursos-box.cursos-category .curso-ifo .curso-modalidad, .cursos-box.cursos-category .curso-ifo .curso-subtitulo, .cursos-box.cursos-category .curso-ifo .curso-precio, .cursos-box.cursos-single .curso-ifo .curso-titulo a, .cursos-box.cursos-single .curso-ifo .curso-duracion, .cursos-box.cursos-single .curso-ifo .curso-modalidad, .cursos-box.cursos-single .curso-ifo .curso-subtitulo, .cursos-box.cursos-single .curso-ifo .curso-precio, .tabla-oferta-cursos-content table.dataTable tbody tr td a.link-nivel, .tabla-todos-los-cursos-content table.dataTable tbody tr td a.link-nivel, .tabla-oferta-cursos-content table.table-bordered.dataTable tfoot tr th, .tabla-todos-los-cursos-content table.table-bordered.dataTable tfoot tr th, .tabla-oferta-cursos-content .table > thead:first-child > tr:first-child > th, .tabla-todos-los-cursos-content .table > thead:first-child > tr:first-child > th, .tabla-oferta-cursos-content .table > thead:first-child > tr:first-child > td, .tabla-todos-los-cursos-content .table > thead:first-child > tr:first-child > td { color: var(--seu-naranja-texto); } .breadcrumb a:hover, .tabla-oferta-cursos-content table.dataTable tbody tr td a.link-nivel:hover, .tabla-todos-los-cursos-content table.dataTable tbody tr td a.link-nivel:hover { color: var(--seu-naranja-texto-hover); } /* Header: el degradé original (#d84b03 → #e16a02) deja el menú blanco en 3,35:1. Mismo recorrido de tonos (más rojo a la izquierda, más naranja a la derecha), ≥4,79:1 con texto blanco en todo el ancho. */ header, #topnav { background: #c43f00; background: linear-gradient(to right, #c43f00, #c24e00); } /* Menú secundario del header (Preguntas frecuentes | Institucional | Sedes): blanco al 84 % no alcanza */ .menu-secundario ul li a { color: #fff; } /* Fondos naranjas con texto blanco */ .slider-general .btn-izquierda, .load-more, .btn-reset-filtros, div.dt-buttons .btn-print, .navbar-collapse, .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover, .form-pos-fixed .form-header, .form-pos-fixed .form-content-f-cb .submit-button { background-color: var(--seu-naranja-texto); border-color: var(--seu-naranja-texto); } .btn-reset-filtros:hover, .btn-reset-filtros:focus, div.dt-buttons .btn-print:hover, div.dt-buttons .btn-print:focus, div.dt-buttons .btn-print:active { background-color: var(--seu-naranja-texto-hover); border-color: var(--seu-naranja-texto-hover); } /* Último elemento del breadcrumb: el gris #777 de Bootstrap queda en 4,48:1 */ .breadcrumb > .active { color: #666; } /* Los botones amarillos (slider: "instagram", etc.; ficha de curso: "Días y horarios disponibles") conservan su color, con texto oscuro */ .box-datos-cursos .btn-oferta-curso, .box-datos-cursos .btn-oferta-curso:hover, .box-datos-cursos .btn-oferta-curso:focus, .slider-general .btn-derecha, .slider-general .btn-derecha:hover, .slider-general .btn-derecha.icon-graduados-white, .slider-general .btn-derecha.icon-programa-proyecto-white { color: var(--seu-texto-sobre-amarillo); } /* --------------------------------------------------------------------------------------------- * Botón flotante "Consultas" y cierre del panel: ahora son