/** * Accesibilidad del campus. * * --------------------------------------------------------------------------- * POR QUÉ HAY QUE SOBREESCRIBIR A TUTOR * --------------------------------------------------------------------------- * Buena parte de lo que no cumplía no es del tema: viene de la paleta por * defecto de Tutor LMS. Su verde `#26A269` sobre blanco da **3,25:1** y lo lleva * el botón «Comprar ahora», que es el control más importante del campus. Su gris * `#757C8E` da 3,7–4,2:1 y lo llevan «Lista de deseos», «Compartir» y la línea * de autoría. * * No se tocan archivos del plugin: se sobreescribe desde aquí con sus propias * variables CSS cuando las hay, para que Tutor pueda seguir actualizándose. * * --------------------------------------------------------------------------- * QUIÉN LEE ESTO * --------------------------------------------------------------------------- * El público del campus es gente con cansancio crónico y niebla mental. Un texto * pequeño y flojo no es aquí un incumplimiento formal: es texto que no existe. * Ver [[accesibilidad-angelesmolinamentor]], donde se hizo lo mismo en la app. */ /* --------------------------------------------------------------------------- 1. COLOR --------------------------------------------------------------------------- Verde: #26A269 (3,25:1) → #186B45 (6,51:1). Mismo tono, legible. Gris: #757C8E (4,17:1) → #575D6B (6,60:1). --------------------------------------------------------------------------- */ :root { --tutor-color-primary: #186b45; --tutor-color-primary-rgb: 24, 107, 69; --tutor-color-primary-hover: #125336; --tutor-color-muted: #575d6b; --tutor-color-secondary: #575d6b; --tutor-body-color: #1f2937; } /* Tutor escribe el gris a mano en `tutor.min.css` y `tutor-front.min.css`, sin pasar por su variable. Estos son los selectores exactos que lo hacen, sacados de sus propias hojas y no de memoria. */ .tutor-color-muted, .tutor-btn-ghost, .tutor-iconic-btn, .tutor-course-author span, .tutor-course-details-top, .tutor-course-details-top a, .tutor-meta, .tutor-meta *, .list-item-price del, .tutor-plain-code .tutor-color-muted { color: #575d6b !important; } /* El verde, allí donde tampoco usa la variable. */ .tutor-color-primary { color: #186b45 !important; } .tutor-btn-primary, a.tutor-btn-primary { background-color: #186b45 !important; border-color: #186b45 !important; color: #ffffff !important; } .tutor-btn-primary:hover, a.tutor-btn-primary:hover { background-color: #125336 !important; border-color: #125336 !important; color: #ffffff !important; } /* OJO: aquí NO se toca el color del texto de `.tutor-btn-outline-primary`. El primer intento le puso `color: #186b45 !important` y dejó el botón «Comprar ahora» INVISIBLE: texto verde sobre fondo verde, 1,00:1. La razón es que `course-single.css` ya pinta ese botón sólido —en este sitio dice lo mismo que el de compra, así que tiene que verse igual— con el fondo en `var(--tutor-color-primary)` y el texto en blanco. Al cambiar la variable arriba, ese botón ya quedó corregido solo: blanco sobre #186B45 son 6,51:1. Lo único que hacía falta era no estorbar. */ /* --------------------------------------------------------------------------- 2. ANILLO DE FOCO --------------------------------------------------------------------------- Había 12 reglas en el CSS del campus haciendo `outline: none`. Hoy el anillo del navegador aún sobrevive por casualidad, pero es un campo de minas: un cambio de plantilla puede dejar a alguien navegando a ciegas. Este es propio y funciona sobre los dos fondos: trazo verde con halo claro, así siempre hay un borde claro contra fondo oscuro y uno oscuro contra fondo claro. Con `:focus-visible`, así que sólo aparece con el teclado. --------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid #186b45 !important; outline-offset: 2px !important; border-radius: 3px; box-shadow: 0 0 0 4px rgba(254, 252, 247, 0.95) !important; } /* --------------------------------------------------------------------------- 3. ÁREAS TÁCTILES --------------------------------------------------------------------------- Los enlaces del menú medían 19–21 px de alto y los botones de las tarjetas 38 px. Se usa `min-height` y no más relleno: el área que responde al dedo crece sin mover el texto ni recolocar nada. TODAS LAS REGLAS SON ADITIVAS, A PROPÓSITO. El primer intento traía una excepción del tipo «los enlaces dentro de una lista no cuentan, porque un enlace en mitad de una frase está exento». Pero los elementos del menú TAMBIÉN son `
  • `, así que esa excepción anulaba el arreglo justo donde más falta hacía. Se detectó midiendo en producción: la hoja cargaba, y las áreas seguían en 20. La lección: aquí no se escriben exenciones. Se nombra lo que hay que agrandar y nada más. Un enlace dentro de un párrafo se queda como está sin necesidad de decirlo, porque ninguna regla lo toca. --------------------------------------------------------------------------- */ /* Navegación principal y de cuenta. `.site-branding` y `header .ml-auto` no existen en este tema —se escribieron de memoria y no acertaron—; los que valen son los de abajo, sacados del HTML que sirve el sitio. */ header nav a, .menu-item > a, .ssn-account-login, header a.text-xl, /* «Acceso alumnos» es un