/* Panel de accesibilidad (30 ago 2026) -- un solo archivo servido para el
   panel admin y el panel de tutor por igual (express.static monta
   src/public/ entero bajo /assets, ver src/index.js). Vive fuera de
   admin/ y tutor/ a propósito: es la misma pieza en las dos pantallas.

   El truco de alto contraste: la mayoría del CSS de este proyecto usa
   var(--verde)/var(--gris)/var(--borde)/etc. en estilos inline dentro de
   las plantillas (auditoría UX), en vez de colores sueltos. Redefiniendo
   esas variables sobre <html>, todo lo que ya las usa cambia solo -- sin
   tener que tocar cada plantilla una por una. Los pocos colores que SÍ
   están sueltos (body, tablas, inputs) se refuerzan explícitos abajo. */

.a11y-boton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #1f6b3a;
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.a11y-boton:hover { opacity: 0.92; }
.a11y-boton:focus-visible { outline: 3px solid #163f26; outline-offset: 2px; }
.a11y-boton svg { width: 24px; height: 24px; }

.a11y-panel {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 9999;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(16, 24, 40, 0.18);
  padding: 16px 16px 14px;
  width: 280px;
  max-width: calc(100vw - 40px);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #111827;
  /* Despliegue animado (18 sep 2026): estado de reposo = un poco más abajo y
     encogido, transparente. accesibilidad.js agrega/quita
     .a11y-panel--visible un frame después de abrir/cerrar -- el frame de
     diferencia es lo que hace que el navegador anime la transición en vez de
     saltar directo al estado final. transform-origin abajo-derecha porque
     de ahí "nace" el panel (el botón que lo abre vive en esa esquina). */
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transform-origin: bottom right;
  transition: opacity 160ms ease, transform 160ms ease;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel.a11y-panel--visible { opacity: 1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .a11y-panel { transition: none; }
}
.a11y-panel h2 { font-size: 14px; margin: 0 0 4px; }
.a11y-panel p.a11y-intro { font-size: 12px; color: #6b7280; margin: 0 0 12px; }

.a11y-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
}
.a11y-fila span { flex: 1; }
.a11y-fila .a11y-grupo-botones { display: flex; gap: 4px; }
.a11y-fila button {
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #111827;
  border-radius: 6px;
  padding: 5px 9px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.a11y-fila button:hover { background: #f0f0f1; }
.a11y-fila button:focus-visible { outline: 2px solid #1f6b3a; outline-offset: 1px; }
.a11y-fila button[aria-pressed="true"] { background: #1f6b3a; color: #fff; border-color: #1f6b3a; }

.a11y-reset {
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #f9fafb;
  color: #111827;
  cursor: pointer;
  font-size: 13px;
}
.a11y-reset:hover { background: #f0f0f1; }
.a11y-reset:focus-visible { outline: 2px solid #1f6b3a; outline-offset: 1px; }

/* ---------- Tamaño de texto ---------- */
html[data-a11y-texto="grande"] { font-size: 115%; }
html[data-a11y-texto="mas-grande"] { font-size: 130%; }

/* ---------- Alto contraste ---------- */
html.a11y-alto-contraste {
  --verde: #8CFFB0;
  --verde-oscuro: #8CFFB0;
  --verde-claro: #103319;
  --gris: #F2F2F2;
  --gris-claro: #F2F2F2;
  --borde: #FFFFFF;
  --rojo: #FF8A8A;
  --fondo: #000000;
}
html.a11y-alto-contraste body,
html.a11y-alto-contraste .shell,
html.a11y-alto-contraste .sidebar,
html.a11y-alto-contraste .main-area,
html.a11y-alto-contraste .caja,
html.a11y-alto-contraste .detalle-box,
html.a11y-alto-contraste table {
  background: #000 !important;
  color: #fff !important;
}
html.a11y-alto-contraste a { color: #8CFFB0 !important; }
html.a11y-alto-contraste .sidebar a.activo { background: #103319 !important; }
html.a11y-alto-contraste input,
html.a11y-alto-contraste select,
html.a11y-alto-contraste textarea,
html.a11y-alto-contraste button {
  background: #0a0a0a !important;
  color: #fff !important;
  border-color: #fff !important;
}
html.a11y-alto-contraste button.primario { background: #8CFFB0 !important; color: #000 !important; }
html.a11y-alto-contraste table, html.a11y-alto-contraste th, html.a11y-alto-contraste td {
  border-color: #fff !important;
}
html.a11y-alto-contraste .badge { border: 1px solid #fff !important; background: #000 !important; color: #fff !important; }
html.a11y-alto-contraste ::placeholder { color: #d1d5db !important; opacity: 1; }

/* El propio botón/panel de accesibilidad se había quedado FUERA de este
   bloque (18 sep 2026, hallado en revisión): activar "Alto contraste"
   oscurecía toda la pantalla de atrás, pero el panel que ofrece esa opción
   seguía blanco sobre negro -- literalmente el peor contraste posible
   quedaba puesto en el propio widget de accesibilidad. */
html.a11y-alto-contraste .a11y-boton { background: #8CFFB0 !important; color: #000 !important; }
html.a11y-alto-contraste .a11y-panel { background: #000 !important; color: #fff !important; border-color: #fff !important; }
html.a11y-alto-contraste .a11y-panel p.a11y-intro { color: #F2F2F2 !important; }
html.a11y-alto-contraste .a11y-fila button,
html.a11y-alto-contraste .a11y-reset {
  background: #0a0a0a !important;
  color: #fff !important;
  border-color: #fff !important;
}
html.a11y-alto-contraste .a11y-fila button[aria-pressed="true"] {
  background: #8CFFB0 !important;
  color: #000 !important;
  border-color: #8CFFB0 !important;
}

/* Las pantallas de autenticación (login/clave/totp, admin y tutor) son HTML
   independiente con su propio <style> de colores sueltos (no usan las
   variables de arriba) -- se refuerzan a mano las clases que se repiten en
   esas plantillas. */
html.a11y-alto-contraste .caja { background: #000 !important; border-color: #fff !important; }
html.a11y-alto-contraste .marca span.texto,
html.a11y-alto-contraste h1,
html.a11y-alto-contraste label,
html.a11y-alto-contraste p.ayuda {
  color: #fff !important;
}
html.a11y-alto-contraste .error { background: #330000 !important; color: #ff8a8a !important; border-color: #ff8a8a !important; }
html.a11y-alto-contraste .exito { background: #00330d !important; color: #8cffb0 !important; border-color: #8cffb0 !important; }
html.a11y-alto-contraste .volver { color: #8cffb0 !important; }

/* ---------- Subrayar enlaces ---------- */
html.a11y-subrayar-enlaces a { text-decoration: underline !important; text-underline-offset: 2px; }

/* ---------- Reducir movimiento ---------- */
html.a11y-reducir-movimiento *,
html.a11y-reducir-movimiento *::before,
html.a11y-reducir-movimiento *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* ---------- Fuente de lectura fácil ---------- */
html.a11y-fuente-legible,
html.a11y-fuente-legible * {
  font-family: Verdana, Arial, sans-serif !important;
  letter-spacing: 0.02em !important;
  line-height: 1.65 !important;
  word-spacing: 0.05em !important;
}