:root{
  --jp-red: #8E0A17;        /* rojo marca con contraste AA en blanco */
  --jp-red-dark: #6B0711;   /* más oscuro para estado activo/hover */
  --jp-text: #111111;       /* texto principal (alto contraste) */
  --jp-border: #E6E6E6;
  --jp-bg: #FFFFFF;
}

/* Contenedor general */
.toggle.toggle-primary .toggle-title{
  color: var(--jp-text);
  background: var(--jp-bg);
  border: 1px solid var(--jp-border);
  border-left: 6px solid var(--jp-red);
  border-radius: 8px;
  padding: 1rem 3rem 1rem 1rem; /* espacio para el ícono del plugin a la derecha */
  margin: 0 0 12px 0;
  line-height: 1.25;
  font-weight: 800;           /* “premium” y más legible */
}

/* Hover / focus: mantener contraste AA en blanco */
.toggle.toggle-primary .toggle-title:hover,
.toggle.toggle-primary .toggle-title:focus{
  border-left-color: var(--jp-red-dark);
  box-shadow: 0 0 0 3px rgba(110, 10, 22, 0.15); /* foco visible */
  outline: none;
}

/* Estado activo: fondo oscuro y texto blanco con contraste > 7:1 */
.toggle.toggle-primary.active .toggle-title{
  background: var(--jp-red-dark);
  color: #FFFFFF;
  border-color: var(--jp-red-dark);
}

/* Contenido: texto legible */
.toggle .toggle-content{
  color: #2B2B2B;
  font-size: 1rem;
}

/* Si tu plugin coloca un ícono/chevron dentro del h3, garantizamos contraste */
.toggle .toggle-title i, 
.toggle .toggle-title .icon{
  color: var(--jp-red);
}
.toggle.active .toggle-title i,
.toggle.active .toggle-title .icon{
  color: #FFFFFF;
}

/* Asegurar foco accesible al contenedor clickable (algunos plugins usan <a> dentro del h3) */
.toggle .toggle-title:focus-visible{
  outline: 3px solid rgba(110, 10, 22, 0.35);
  outline-offset: 2px;
}