/**
 * CONALEP Accesible - Hoja de estilos principal
 * Identidad institucional: Verde CONALEP (#007E67)
 * Cumplimiento de accesibilidad: WCAG 2.2 AA
 * Aislamiento total de estilos contra temas de WordPress
 */

@font-face {
  font-family: 'OpenDyslexic';
  src: url('../fonts/OpenDyslexic-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('../fonts/OpenDyslexic-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  --conalep-green-primary: #007E67;
  --conalep-green-dark: #005C4B;
  --conalep-green-deeper: #00483A;
  --conalep-green-light: #E6F3F0;
  --conalep-green-subtle: rgba(0, 126, 103, 0.08);
  --conalep-white: #FFFFFF;
  --conalep-gray-50: #FBFBFB;
  --conalep-gray-100: #F5F5F5;
  --conalep-gray-200: #E6E6E6;
  --conalep-gray-300: #D0D0D0;
  --conalep-gray-700: #555555;
  --conalep-gray-900: #333333;
  --conalep-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --conalep-shadow-md: -2px 4px 16px rgba(0, 0, 0, 0.15);
  --conalep-shadow-lg: -6px 0 28px rgba(0, 0, 0, 0.18);
  --conalep-font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   1. AISLAMIENTO TOTAL Y CONTENEDOR RAÍZ
   ========================================================================== */

#conalep-accesible-root {
  font-family: var(--conalep-font-family) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--conalep-gray-900) !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 999990 !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-transform: none !important;
}

#conalep-accesible-root *,
#conalep-accesible-root *::before,
#conalep-accesible-root *::after {
  box-sizing: border-box !important;
  font-family: inherit !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
}

/* Reset protector contra temas de WordPress que sobreescriben botones */
#conalep-accesible-root button {
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  font-family: var(--conalep-font-family) !important;
  outline: none;
}

/* ==========================================================================
   2. BOTÓN FLOTANTE DE ACCESIBILIDAD
   ========================================================================== */

.conalep-a11y-trigger {
  position: fixed !important;
  top: 50% !important;
  right: -8px !important;
  transform: translateY(-50%) !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  border-right: none !important;
  border-radius: 16px 0 0 16px !important;
  background-color: var(--conalep-green-primary) !important;
  color: var(--conalep-white) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--conalep-shadow-md) !important;
  z-index: 999991 !important;
  transition: right 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important;
  touch-action: manipulation !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.conalep-a11y-trigger:hover,
.conalep-a11y-trigger:focus-visible {
  right: 0 !important;
  background-color: var(--conalep-green-dark) !important;
  box-shadow: -4px 6px 20px rgba(0, 0, 0, 0.25) !important;
  outline: 3px solid var(--conalep-green-deeper) !important;
  outline-offset: 2px !important;
}

.conalep-a11y-trigger:active {
  background-color: var(--conalep-green-deeper) !important;
}

.conalep-a11y-trigger svg {
  width: 30px !important;
  height: 30px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  pointer-events: none !important;
  transition: transform 180ms ease !important;
}

.conalep-a11y-trigger:hover svg {
  transform: scale(1.08) !important;
}

/* Configuración de posición inferior en escritorio (opción admin) */
.conalep-a11y-pos-bottom .conalep-a11y-trigger {
  top: auto !important;
  bottom: 24px !important;
  transform: none !important;
}

/* ==========================================================================
   3. RESPONSIVE (< 768px): MÓVILES Y DISPOSITIVOS SEGUROS
   ========================================================================== */

@media (max-width: 767.98px) {
  .conalep-a11y-trigger,
  .conalep-a11y-pos-bottom .conalep-a11y-trigger {
    top: auto !important;
    transform: none !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    right: calc(-6px + env(safe-area-inset-right, 0px)) !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px 0 0 14px !important;
  }

  .conalep-a11y-trigger:hover,
  .conalep-a11y-trigger:focus-visible {
    right: calc(0px + env(safe-area-inset-right, 0px)) !important;
  }
}

/* ==========================================================================
   4. PANEL LATERAL DE OPCIONES
   ========================================================================== */

.conalep-a11y-panel {
  position: fixed !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) translateX(calc(100% + 30px)) !important;
  width: min(390px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 24px) !important;
  background-color: var(--conalep-white) !important;
  border: 1px solid var(--conalep-gray-200) !important;
  border-radius: 18px 0 0 18px !important;
  box-shadow: var(--conalep-shadow-lg) !important;
  z-index: 999995 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  visibility: hidden !important;
  transition: transform 230ms cubic-bezier(0.16, 1, 0.3, 1), visibility 230ms !important;
}

.conalep-a11y-panel.conalep-a11y-panel-open {
  transform: translateY(-50%) translateX(0) !important;
  visibility: visible !important;
}

@media (max-width: 767.98px) {
  .conalep-a11y-panel {
    top: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    right: calc(10px + env(safe-area-inset-right, 0px)) !important;
    width: min(340px, 84vw) !important; /* Estándar de accesibilidad móvil: deja ~16vw visible detrás y texto legible */
    max-height: min(560px, 74vh) !important;
    border-radius: 18px !important;
    box-shadow: -4px 8px 32px rgba(0, 0, 0, 0.35) !important;
    transform: translateX(calc(100% + 25px)) !important;
  }

  .conalep-a11y-panel.conalep-a11y-panel-open {
    transform: translateX(0) !important;
  }

  .conalep-a11y-header {
    padding: 14px 16px 12px 16px !important;
  }

  .conalep-a11y-title {
    font-size: 16px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
  }

  .conalep-a11y-subtitle {
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
  }

  .conalep-a11y-close-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .conalep-a11y-close-btn svg {
    width: 18px !important;
    height: 18px !important;
  }

  .conalep-a11y-body {
    padding: 11px 12px !important;
    gap: 8px !important;
  }

  .conalep-a11y-reset-btn {
    min-height: 38px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  .conalep-a11y-reset-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  .conalep-a11y-option-item {
    padding: 10px 11px !important;
    border-radius: 12px !important;
  }

  .conalep-a11y-icon-box {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 9px !important;
  }

  .conalep-a11y-icon-box svg {
    width: 20px !important;
    height: 20px !important;
  }

  .conalep-a11y-option-title {
    font-size: 14px !important;
  }

  .conalep-a11y-option-status {
    font-size: 12px !important;
  }

  .conalep-a11y-badge-active {
    font-size: 11px !important;
    padding: 2px 7px !important;
  }

  .conalep-a11y-step-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 14px !important;
  }

  .conalep-a11y-step-value {
    font-size: 13px !important;
  }

  .conalep-a11y-levels-row {
    gap: 5px !important;
  }

  .conalep-a11y-level-btn {
    min-height: 34px !important;
    font-size: 12px !important;
    padding: 4px 4px !important;
  }

  .conalep-a11y-speech-btn {
    min-height: 34px !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
  }

  .conalep-a11y-footer {
    padding: 9px 12px !important;
    font-size: 11px !important;
  }
}

/* ==========================================================================
   5. ENCABEZADO DEL PANEL
   ========================================================================== */

.conalep-a11y-header {
  padding: 16px 20px 14px 20px !important;
  background-color: var(--conalep-white) !important;
  border-bottom: 1px solid var(--conalep-gray-200) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.conalep-a11y-header-titles {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.conalep-a11y-title {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--conalep-gray-900) !important;
  line-height: 22px !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
}

.conalep-a11y-subtitle {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: var(--conalep-green-primary) !important;
  line-height: 14px !important;
}

.conalep-a11y-close-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border: 1px solid var(--conalep-gray-200) !important;
  border-radius: 10px !important;
  background-color: var(--conalep-gray-100) !important;
  color: var(--conalep-gray-900) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease !important;
}

.conalep-a11y-close-btn:hover {
  background-color: var(--conalep-gray-200) !important;
  color: #000000 !important;
  border-color: var(--conalep-gray-300) !important;
}

.conalep-a11y-close-btn:focus-visible {
  outline: 2px solid var(--conalep-green-primary) !important;
  outline-offset: 2px !important;
}

.conalep-a11y-close-btn svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
}

/* ==========================================================================
   6. CONTENIDO SCROLLEABLE Y BOTONES DE OPCIONES
   ========================================================================== */

.conalep-a11y-body {
  padding: 14px 16px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex-grow: 1 !important;
}

.conalep-a11y-body::-webkit-scrollbar {
  width: 6px !important;
}
.conalep-a11y-body::-webkit-scrollbar-track {
  background: var(--conalep-gray-100) !important;
}
.conalep-a11y-body::-webkit-scrollbar-thumb {
  background: var(--conalep-gray-300) !important;
  border-radius: 4px !important;
}
.conalep-a11y-body::-webkit-scrollbar-thumb:hover {
  background: var(--conalep-green-primary) !important;
}

/* Botón RESTABLECER */
.conalep-a11y-reset-btn {
  width: 100% !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background-color: var(--conalep-gray-100) !important;
  color: var(--conalep-green-deeper) !important;
  border: 1.5px solid var(--conalep-gray-200) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  transition: all 160ms ease !important;
  margin-bottom: 4px !important;
}

.conalep-a11y-reset-btn:hover {
  background-color: var(--conalep-green-light) !important;
  border-color: var(--conalep-green-primary) !important;
  color: var(--conalep-green-dark) !important;
}

.conalep-a11y-reset-btn:focus-visible {
  outline: 2px solid var(--conalep-green-primary) !important;
  outline-offset: 2px !important;
}

.conalep-a11y-reset-btn svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
}

/* Tarjeta de herramienta */
.conalep-a11y-option-item {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  background-color: var(--conalep-white) !important;
  border: 1.5px solid var(--conalep-gray-200) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease !important;
}

.conalep-a11y-option-item:hover {
  border-color: var(--conalep-green-primary) !important;
  background-color: var(--conalep-gray-50) !important;
}

.conalep-a11y-option-toggle {
  width: 100% !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-align: left !important;
  cursor: pointer !important;
  color: inherit !important;
}

.conalep-a11y-option-toggle:focus-visible {
  outline: 2px solid var(--conalep-green-primary) !important;
  outline-offset: 4px !important;
  border-radius: 8px !important;
}

/* Icono verde característico */
.conalep-a11y-icon-box {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  background-color: var(--conalep-green-primary) !important;
  color: var(--conalep-white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background-color 160ms ease, transform 160ms ease !important;
}

.conalep-a11y-icon-box svg {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
}

.conalep-a11y-option-info {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  min-width: 0 !important;
}

.conalep-a11y-option-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--conalep-gray-900) !important;
  line-height: 1.3 !important;
}

.conalep-a11y-option-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--conalep-gray-700) !important;
  margin-top: 2px !important;
}

/* Indicador de activo aislado para evitar colisiones con temas */
.conalep-a11y-badge-active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  background-color: var(--conalep-green-light) !important;
  color: var(--conalep-green-dark) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

/* Estado activo institucional - Prefijo específico conalep-a11y-active */
.conalep-a11y-option-item.conalep-a11y-active {
  border-color: var(--conalep-green-primary) !important;
  background-color: var(--conalep-green-subtle) !important;
}

.conalep-a11y-option-item.conalep-a11y-active .conalep-a11y-icon-box {
  background-color: var(--conalep-green-deeper) !important;
}

.conalep-a11y-option-item.conalep-a11y-active .conalep-a11y-option-title {
  color: var(--conalep-green-deeper) !important;
}

/* Deshabilitado */
.conalep-a11y-option-item.conalep-a11y-disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

.conalep-a11y-option-item.conalep-a11y-disabled .conalep-a11y-option-toggle {
  cursor: not-allowed !important;
}

.conalep-a11y-disabled-note {
  font-size: 12px !important;
  color: #c53030 !important;
  margin-top: 4px !important;
}

/* ==========================================================================
   7. CONTROLES POR NIVELES Y COMPUESTOS (Texto, Espaciados, Voz)
   ========================================================================== */

/* Grupo de botones por nivel (Espaciado vertical y horizontal) */
.conalep-a11y-levels-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: 6px !important;
}

.conalep-a11y-level-btn {
  flex: 1 !important;
  min-height: 38px !important;
  padding: 6px 4px !important;
  border: 1.5px solid var(--conalep-gray-200) !important;
  background-color: var(--conalep-white) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--conalep-gray-900) !important;
  cursor: pointer !important;
  transition: all 140ms ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.conalep-a11y-level-btn:hover {
  background-color: var(--conalep-gray-100) !important;
  border-color: var(--conalep-green-primary) !important;
  color: var(--conalep-green-dark) !important;
}

.conalep-a11y-level-btn:focus-visible {
  outline: 2px solid var(--conalep-green-primary) !important;
  outline-offset: 2px !important;
}

.conalep-a11y-level-btn[aria-pressed="true"] {
  background-color: var(--conalep-green-primary) !important;
  color: var(--conalep-white) !important;
  border-color: var(--conalep-green-primary) !important;
  font-weight: 700 !important;
}

/* Controles de Tamaño de Texto (A- y A+) */
.conalep-a11y-step-controls {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 6px !important;
}

.conalep-a11y-step-btn {
  flex: 1 !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 1.5px solid var(--conalep-gray-200) !important;
  background-color: var(--conalep-white) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--conalep-gray-900) !important;
  cursor: pointer !important;
  transition: all 140ms ease !important;
}

.conalep-a11y-step-btn:hover:not(:disabled) {
  background-color: var(--conalep-green-light) !important;
  border-color: var(--conalep-green-primary) !important;
  color: var(--conalep-green-dark) !important;
}

.conalep-a11y-step-btn:focus-visible {
  outline: 2px solid var(--conalep-green-primary) !important;
  outline-offset: 2px !important;
}

.conalep-a11y-step-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

.conalep-a11y-step-value {
  min-width: 80px !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--conalep-green-primary) !important;
  background-color: var(--conalep-green-light) !important;
  border: 1px solid rgba(0, 126, 103, 0.2) !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
}

/* Controles de Lectura en Voz Alta */
.conalep-a11y-speech-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

.conalep-a11y-speech-btn {
  flex: 1 !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 1.5px solid var(--conalep-gray-200) !important;
  background-color: var(--conalep-white) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--conalep-gray-900) !important;
  cursor: pointer !important;
  transition: all 140ms ease !important;
  padding: 6px 10px !important;
}

.conalep-a11y-speech-btn:hover {
  background-color: var(--conalep-green-light) !important;
  border-color: var(--conalep-green-primary) !important;
  color: var(--conalep-green-dark) !important;
}

.conalep-a11y-speech-btn:focus-visible {
  outline: 2px solid var(--conalep-green-primary) !important;
  outline-offset: 2px !important;
}

.conalep-a11y-speech-btn.conalep-a11y-active {
  background-color: var(--conalep-green-primary) !important;
  color: var(--conalep-white) !important;
  border-color: var(--conalep-green-primary) !important;
}

.conalep-a11y-speech-btn.conalep-a11y-danger {
  color: #c53030 !important;
  border-color: #feb2b2 !important;
  background-color: #fff5f5 !important;
}
.conalep-a11y-speech-btn.conalep-a11y-danger:hover {
  background-color: #fed7d7 !important;
  border-color: #e53e3e !important;
  color: #9b2c2c !important;
}

/* Pie del panel */
.conalep-a11y-footer {
  padding: 10px 16px !important;
  background-color: var(--conalep-gray-100) !important;
  border-top: 1px solid var(--conalep-gray-200) !important;
  text-align: center !important;
  font-size: 11px !important;
  color: var(--conalep-gray-700) !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   8. PREFERS-REDUCED-MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .conalep-a11y-trigger,
  .conalep-a11y-panel,
  .conalep-a11y-reset-btn,
  .conalep-a11y-option-item,
  .conalep-a11y-level-btn,
  .conalep-a11y-step-btn,
  .conalep-a11y-speech-btn {
    transition: none !important;
  }
}

/* ==========================================================================
   9. EFECTOS GLOBALES EN EL SITIO (MODOS DE ACCESIBILIDAD)
   Inmunizando completamente el panel #conalep-accesible-root
   ========================================================================== */

/* 1. Escala de grises (aplicada al contenido, protegiendo el panel) */
html.conalep-a11y-grayscale body > :not(#conalep-accesible-root):not(.conalep-a11y-reading-layer) {
  filter: grayscale(100%) !important;
}

/* 2. Contraste Alto (Fondo negro, texto amarillo/blanco de alto contraste) */
html.conalep-a11y-high-contrast {
  background-color: #000000 !important;
}

html.conalep-a11y-high-contrast body {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

html.conalep-a11y-high-contrast body *:not(#conalep-accesible-root):not(#conalep-accesible-root *):not(.conalep-a11y-reading-layer) {
  background-color: #000000 !important;
  color: #FFFF00 !important;
  border-color: #FFFFFF !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html.conalep-a11y-high-contrast a:not(#conalep-accesible-root a) {
  color: #00FFFF !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
}

html.conalep-a11y-high-contrast button:not(#conalep-accesible-root button),
html.conalep-a11y-high-contrast input:not(#conalep-accesible-root input),
html.conalep-a11y-high-contrast select:not(#conalep-accesible-root select),
html.conalep-a11y-high-contrast textarea:not(#conalep-accesible-root textarea) {
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  background-color: #121212 !important;
}

/* 3. Contraste Invertido */
html.conalep-a11y-invert-contrast body > :not(#conalep-accesible-root):not(.conalep-a11y-reading-layer) {
  filter: invert(100%) hue-rotate(180deg) !important;
}

html.conalep-a11y-invert-contrast img,
html.conalep-a11y-invert-contrast video,
html.conalep-a11y-invert-contrast picture {
  filter: invert(100%) hue-rotate(180deg) !important;
}

/* 4. Filtros para Daltonismo (Deuteranopía, Protanopía, Tritanopía) */
html.conalep-a11y-daltonism-deuteranopia body > :not(#conalep-accesible-root):not(.conalep-a11y-reading-layer) {
  filter: url(#conalep-filter-deuteranopia) !important;
}

html.conalep-a11y-daltonism-protanopia body > :not(#conalep-accesible-root):not(.conalep-a11y-reading-layer) {
  filter: url(#conalep-filter-protanopia) !important;
}

html.conalep-a11y-daltonism-tritanopia body > :not(#conalep-accesible-root):not(.conalep-a11y-reading-layer) {
  filter: url(#conalep-filter-tritanopia) !important;
}

/* 5. Tipografía Legible / Dislexia */
html.conalep-a11y-readable-font body *:not(#conalep-accesible-root):not(#conalep-accesible-root *):not(i):not(svg):not(path) {
  font-family: 'OpenDyslexic', 'Comic Sans MS', 'Trebuchet MS', Verdana, Arial, sans-serif !important;
}

/* 5. Espaciado Vertical (line-height progresivo solo en contenido, nunca en el panel) */
html.conalep-a11y-spacing-v-1 body p:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-1 body li:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-1 body h1:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-1 body h2:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-1 body h3:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-1 body h4:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-1 body h5:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-1 body h6:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-1 body blockquote:not(#conalep-accesible-root *) {
  line-height: 1.6 !important;
}

html.conalep-a11y-spacing-v-2 body p:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-2 body li:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-2 body h1:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-2 body h2:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-2 body h3:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-2 body h4:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-2 body h5:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-2 body h6:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-2 body blockquote:not(#conalep-accesible-root *) {
  line-height: 1.9 !important;
}

html.conalep-a11y-spacing-v-3 body p:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-3 body li:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-3 body h1:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-3 body h2:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-3 body h3:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-3 body h4:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-3 body h5:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-3 body h6:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-v-3 body blockquote:not(#conalep-accesible-root *) {
  line-height: 2.2 !important;
}

/* 6. Espaciado Horizontal (letter-spacing progresivo solo en contenido, nunca en el panel) */
html.conalep-a11y-spacing-h-1 body p:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-h-1 body li:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-h-1 body h1:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-h-1 body h2:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-h-1 body h3:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-h-1 body a:not(#conalep-accesible-root a) {
  letter-spacing: 0.08em !important;
  word-spacing: 0.12em !important;
}

html.conalep-a11y-spacing-h-2 body p:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-h-2 body li:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-h-2 body h1:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-h-2 body h2:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-h-2 body h3:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-h-2 body a:not(#conalep-accesible-root a) {
  letter-spacing: 0.14em !important;
  word-spacing: 0.20em !important;
}

html.conalep-a11y-spacing-h-3 body p:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-h-3 body li:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-h-3 body h1:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-h-3 body h2:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-h-3 body h3:not(#conalep-accesible-root *),
html.conalep-a11y-spacing-h-3 body a:not(#conalep-accesible-root a) {
  letter-spacing: 0.20em !important;
  word-spacing: 0.28em !important;
}

/* 7. Resaltar Enlaces */
html.conalep-a11y-links a:not(#conalep-accesible-root a) {
  text-decoration: underline 2.5px !important;
  text-underline-offset: 3px !important;
  background-color: var(--conalep-green-subtle) !important;
  color: var(--conalep-green-deeper) !important;
  font-weight: 700 !important;
  outline: 1px solid rgba(0, 126, 103, 0.4) !important;
  outline-offset: 1px !important;
  border-radius: 2px !important;
  padding: 1px 3px !important;
}

/* 8. Cursor Grande */
html.conalep-a11y-large-cursor,
html.conalep-a11y-large-cursor body,
html.conalep-a11y-large-cursor *:not(a):not(button):not(input):not(select):not(textarea):not([role="button"]) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M4 4 L4 30 L11 23 L18 33 L22 31 L15 21 L24 21 Z' fill='%23000000' stroke='%23FFFFFF' stroke-width='2.5' stroke-linejoin='round'/%3E%3Ccircle cx='4' cy='4' r='2.5' fill='%23007E67'/%3E%3C/svg%3E") 4 4, default !important;
}

html.conalep-a11y-large-cursor a,
html.conalep-a11y-large-cursor button,
html.conalep-a11y-large-cursor input,
html.conalep-a11y-large-cursor select,
html.conalep-a11y-large-cursor textarea,
html.conalep-a11y-large-cursor [role="button"],
html.conalep-a11y-large-cursor .conalep-a11y-trigger,
html.conalep-a11y-large-cursor .conalep-a11y-close-btn,
html.conalep-a11y-large-cursor .conalep-a11y-reset-btn,
html.conalep-a11y-large-cursor .conalep-a11y-option-toggle,
html.conalep-a11y-large-cursor .conalep-a11y-level-btn,
html.conalep-a11y-large-cursor .conalep-a11y-step-btn {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M12 2 C10.9 2 10 2.9 10 4 L10 16 C9.3 15.3 8.3 14.8 7.2 15 C5.8 15.3 5 16.7 5.4 18.1 L8 25 C10.2 29.5 14.5 32 19.5 32 C26.4 32 32 26.4 32 19.5 C32 18.1 32 16.8 31.8 15.5 C31.2 12.3 28.5 10 25.2 10 C24.5 10 23.8 10.1 23.2 10.4 C22.5 8.9 21 8 19.2 8 C18.7 8 18.2 8.1 17.7 8.3 C17.2 7 15.8 6 14.2 6 C13.7 6 13.2 6.1 12.8 6.3 L12.8 4 C12.8 2.9 11.9 2 10.8 2 Z' fill='%23000000' stroke='%23FFFFFF' stroke-width='2.5' stroke-linejoin='round'/%3E%3Ccircle cx='11' cy='4' r='2' fill='%23007E67'/%3E%3C/svg%3E") 11 4, pointer !important;
}

/* ==========================================================================
   10. MÁSCARA Y GUÍA DE LECTURA (pointer-events: none)
   ========================================================================== */

.conalep-a11y-reading-layer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  pointer-events: none !important;
  z-index: 999999 !important;
  transition: opacity 150ms ease !important;
}

.conalep-a11y-mask-top {
  top: 0 !important;
  background-color: rgba(0, 0, 0, 0.65) !important;
}

.conalep-a11y-mask-bottom {
  bottom: 0 !important;
  background-color: rgba(0, 0, 0, 0.65) !important;
}

.conalep-a11y-reading-guide {
  height: 5px !important;
  background-color: var(--conalep-green-primary) !important;
  box-shadow: 0 0 12px rgba(0, 126, 103, 0.9), 0 2px 6px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(-50%) !important;
}