#opinion-vertical-en.opinion-anim {
  animation: opinion-bounce 0.32s cubic-bezier(.4,0,.2,1);
}
#opinion-vertical-en {
  position: fixed;
  left: 0;
  top: 40vh;
  width: 44px;
  height: 180px;
  background-color: #181c22;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 16px 16px 0;
  box-shadow: 2px 4px 18px 0 rgba(0,0,0,0.10);
  cursor: pointer;
  z-index: 2147483646;
  transition: width 0.25s cubic-bezier(.4,0,.2,1), background 0.18s;
  overflow: hidden;
}
#opinion-vertical-en span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: color 0.18s, font-size 0.18s;
}
#opinion-vertical-en:hover {
  width: 60px;
}
#opinion-vertical-en:hover span {
  color: #0ADFF0;
  font-size: 1.18rem;
}
[data-theme="dark"] #opinion-vertical-en {
  background-color: #181c22 !important;
  color: #fff !important;
}
[data-theme="dark"] #opinion-vertical-en:hover {
  background-color: #181c22 !important;
}
[data-theme="light"] #opinion-vertical-en {
  background-color: #fff !important;
  color: #181c22 !important;
}
[data-theme="light"] #opinion-vertical-en:hover {
  background-color: #fff !important;
}
#opinion-vertical-en:hover span {
  color: #0ADFF0;
  font-size: 1.18rem;
}
@media (max-width: 700px) {
  #opinion-vertical-en {
    top: unset;
    bottom: 10vh;
    height: 120px;
    width: 36px;
  }
  #opinion-vertical-en:hover {
    width: 48px;
  }
  #opinion-vertical-en span {
    font-size: 0.98rem;
  }
}
#opinion-vertical.opinion-anim {
  animation: opinion-bounce 0.32s cubic-bezier(.4,0,.2,1);
}
@keyframes opinion-bounce {
  0% { transform: scale(1) translateY(0); }
  30% { transform: scale(1.08, 0.96) translateY(-6px); }
  60% { transform: scale(0.98, 1.04) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}
/* Rectángulo vertical fijo para "Tu opinión" */
#opinion-vertical {
  position: fixed;
  left: 0;
  top: 40vh;
  width: 44px;
  height: 180px;
  /* El color de fondo y texto se definen por tema, pero se fuerza un color base sólido para evitar transparencia */
  background-color: #181c22;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 16px 16px 0;
  box-shadow: 2px 4px 18px 0 rgba(0,0,0,0.10);
  cursor: pointer;
  z-index: 2147483646;
  transition: width 0.25s cubic-bezier(.4,0,.2,1), background 0.18s;
  overflow: hidden;
}
#opinion-vertical span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: color 0.18s, font-size 0.18s;
}
#opinion-vertical:hover {
  width: 60px;
  /* El color de fondo en hover lo define el tema */
}
#opinion-vertical:hover span {
  color: #0ADFF0;
  font-size: 1.18rem;
}
/* Adaptación modo claro/oscuro */
[data-theme="dark"] #opinion-vertical {
  background-color: #181c22 !important;
  color: #fff !important;
}
[data-theme="dark"] #opinion-vertical:hover {
  background-color: #181c22 !important;
}
[data-theme="light"] #opinion-vertical {
  background-color: #fff !important;
  color: #181c22 !important;
}
[data-theme="light"] #opinion-vertical:hover {
  background-color: #fff !important;
}
#opinion-vertical:hover span {
  color: #0ADFF0;
  font-size: 1.18rem;
}
@media (max-width: 700px) {
  #opinion-vertical {
    top: unset;
    bottom: 10vh;
    height: 120px;
    width: 36px;
  }
  #opinion-vertical:hover {
    width: 48px;
  }
  #opinion-vertical span {
    font-size: 0.98rem;
  }
}