@charset "utf-8";

:root {
  /* Único punto de edición de color */
  --color-pestana: #0099FF; 
  --color-texto: #FFFFFF;
}

#feedback { 
  position: fixed; 
  left: 0; 
  top: 0; 
  bottom: 0; 
  width: 60px; 
  z-index: 9999;
  display: flex;
  align-items: center; 
  justify-content: flex-start;
  pointer-events: none;
}

/* Se elimina el bloque #feedback::before que creaba la barra vertical */

#feedback a { 
  pointer-events: auto; 
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-pestana);
  
  height: 135px; 
  width: 48px; 
  /* Ahora nace directamente desde el borde izquierdo (0px) */
  margin-left: 0; 
  
  /* Mantenemos la curva exterior derecha */
  border-radius: 0 18px 18px 0;
  
  /* Tipografía Helvetica optimizada */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
  font-size: 16px; 
  font-weight: 700;
  color: var(--color-texto);
  text-decoration: none;
  text-transform: uppercase;
  
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 2px;
  
  /* Sincronización de GPU para evitar parpadeos */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  
  transition: width 0.2s ease-out;
}

/* --- LAS RAÍCES (PRESERVADAS CON MÁSCARAS SVG) --- */

#feedback a::before,
#feedback a::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: var(--color-pestana);
  pointer-events: none;
}

/* Raíz Superior: Une la pestaña con el borde superior del navegador */
#feedback a::before {
  bottom: 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0 20 L0 0 Q 0 20 20 20 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0 20 L0 0 Q 0 20 20 20 Z' fill='black'/%3E%3C/svg%3E");
}

/* Raíz Inferior: Une la pestaña con el borde inferior del navegador */
#feedback a::after {
  top: 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0 0 L0 20 Q 0 0 20 0 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0 0 L0 20 Q 0 0 20 0 Z' fill='black'/%3E%3C/svg%3E");
}

/* Rollover dinámico */
#feedback a:hover { 
  width: 58px; 
}