/* Hotfix last-minute: indicadores de enlace en "Motivos más frecuentes"
   Objetivos:
   - Que la flecha sea visible SIEMPRE (móvil no tiene hover).
   - Que en modo Auto cambie a naranja cuando el sistema esté en oscuro.
   - Mantener feedback en hover/focus (PC/teclado) sin depender de ellos.
*/

/* Asegura que el indicador no dependa del hover */
.motivesGrid a::after{
  opacity: .78 !important;
  transform: none !important;
  transition: opacity 140ms ease, transform 140ms ease;
}

/* Si el indicador está implementado como elemento interno (por si acaso) */
.motivesGrid a .motiveArrow,
.motivesGrid a .motivesArrow,
.motivesGrid a .arrow{
  opacity: .78;
  transition: opacity 140ms ease, transform 140ms ease;
}

/* En escritorio: al pasar el ratón, un poquito más presente */
.motivesGrid a:hover::after{
  opacity: .95 !important;
  transform: translateX(2px) !important;
}
.motivesGrid a:hover .motiveArrow,
.motivesGrid a:hover .motivesArrow,
.motivesGrid a:hover .arrow{
  opacity: .95;
  transform: translateX(2px);
}

/* Accesibilidad: teclado */
.motivesGrid a:focus-visible::after{
  opacity: .95 !important;
  transform: translateX(2px) !important;
}

/* En dispositivos táctiles (sin hover), súbelo un pelín para que se vea claro */
@media (hover: none){
  .motivesGrid a::after{ opacity: .88 !important; }
  .motivesGrid a .motiveArrow,
  .motivesGrid a .motivesArrow,
  .motivesGrid a .arrow{ opacity: .88; }
}

/* Colores por tema
   Nota: usamos color del indicador, sin tocar el hover de fondo que ya tenías.
*/
html[data-theme="light"] .motivesGrid a::after,
html[data-theme="light"] .motivesGrid a .motiveArrow,
html[data-theme="light"] .motivesGrid a .motivesArrow,
html[data-theme="light"] .motivesGrid a .arrow{
  color: var(--accent);
}

html[data-theme="dark"] .motivesGrid a::after,
html[data-theme="dark"] .motivesGrid a .motiveArrow,
html[data-theme="dark"] .motivesGrid a .motivesArrow,
html[data-theme="dark"] .motivesGrid a .arrow{
  color: var(--accent-warm);
}

/* Auto: azul por defecto, naranja si el sistema está en oscuro */
html[data-theme="auto"] .motivesGrid a::after,
html[data-theme="auto"] .motivesGrid a .motiveArrow,
html[data-theme="auto"] .motivesGrid a .motivesArrow,
html[data-theme="auto"] .motivesGrid a .arrow{
  color: var(--accent);
}

@media (prefers-color-scheme: dark){
  html[data-theme="auto"] .motivesGrid a::after,
  html[data-theme="auto"] .motivesGrid a .motiveArrow,
  html[data-theme="auto"] .motivesGrid a .motivesArrow,
  html[data-theme="auto"] .motivesGrid a .arrow{
    color: var(--accent-warm);
  }
}