/* Contenedor lateral (siempre centrado verticalmente) */
#social-sidebar {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;            /* menos espacio entre botones */
  padding: 8px 6px;
  z-index: 1500;
  /* ancho fijo para evitar reflows visuales */
  width: 56px;
  box-sizing: border-box;
}

/* Wrapper de los 4 íconos (permanece en el flujo) */
#social-sidebar .icons-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  /* conservar el espacio aunque estén "ocultos" */
  transition: opacity .22s ease;
}

/* Iconos sociales: círculos más pequeños */
#social-sidebar a.social-icon {
  width: 36px;               /* círculo más pequeño */
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  transition: transform .22s ease, box-shadow .22s ease, opacity .18s ease;
  /* ligero espacio desde el borde por defecto */
  transform: translateX(0);
  margin-left: 4px;          /* pequeño offset inicial desde el borde */
  box-shadow: none;
}

/* Hover: se aleja un poco del borde, sin provocar reflow */
#social-sidebar a.social-icon:hover {
  transform: translateX(10px) scale(1.08);
  box-shadow: 0 6px 12px rgba(0,0,0,0.18);
}

/* Cuando estén "ocultos" los iconos, los dejamos invisibles pero ocupando espacio */
#social-sidebar.icons-collapsed .icons-wrapper a.social-icon {
  opacity: 0;
  pointer-events: none;
  transform: translateX(0); /* aseguramos que no se muevan */
  box-shadow: none;
}

/* Colores oficiales */
#social-sidebar a.instagram { 
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
#social-sidebar a.linkedin  { background: #0077b5; }
#social-sidebar a.youtube   { background: #ff0000; }
#social-sidebar a.tiktok    { background: #000; }

/* Toggle (siempre visible) — más pequeño que los iconos */
#social-sidebar button.toggle {
  width: 30px;            /* más pequeño que los iconos */
  height: 30px;
  border-radius: 50%;
  background: #000;       /* negro */
  color: #fff;            /* flecha blanca */
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: transform .18s ease, background .12s ease;
  margin-left: 4px;       /* mismo offset que iconos */
}

/* Pequeño hover del toggle */
#social-sidebar button.toggle:hover {
  transform: translateX(6px) scale(1.02);
}

/* Evitar que el toggle cambie su posición cuando los iconos se ocultan */
#social-sidebar .icons-wrapper,
#social-sidebar button.toggle {
  /* se mantienen en el flujo. Al ocultar los iconos usamos opacity, por eso no hay reflow */
}

/* Responsive: reducimos tamaños si el área es muy pequeña */
@media (max-width:420px) {
  #social-sidebar a.social-icon { width: 34px; height: 34px; font-size:15px; }
  #social-sidebar button.toggle { width: 28px; height: 28px; font-size:12px; }
}