/*
 * Estilos para Simple Tooltip Plugin
 * Versión 1.4 - Corrección de flecha
 */

/* El contenedor principal que dispara el tooltip */
.stp-tooltip-trigger {
  position: relative; 
  cursor: help; 
  border-bottom: 1px dotted #333; /* Fallback */
  text-decoration: none; 
}

/* El contenido del tooltip (la caja gris) */
.stp-tooltip-content {
  visibility: hidden;
  opacity: 0;
  background-color: #4a4a4a; /* Fallback */
  color: #ffffff; /* Fallback */
  text-align: center;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
  position: absolute;
  z-index: 100;
  bottom: 135%; 
  left: 50%;
  transform: translateX(-50%); 
  width: max-content;
  min-width: 150px; 
  max-width: 300px; 
  box-sizing: border-box; 
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Flecha/Cola del tooltip (por defecto, arriba) */
.stp-tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%; 
  
  /* --- LÓGICA DE FLECHA MEJORADA --- */
  /* Usa la variable --stp-arrow-left si JS la provee, sino, usa 50% */
  left: var(--stp-arrow-left, 50%); 

  margin-left: -5px; /* Centra la flecha de 10px */
  border-width: 5px;
  border-style: solid;
  border-color: #4a4a4a transparent transparent transparent; /* Fallback */
}

/* --- CLASES CONTROLADAS POR JAVASCRIPT --- */

/* Clase que añade JS para mostrar el tooltip */
.stp-tooltip-visible {
  visibility: visible;
  opacity: 1;
}

/* Clase que añade JS si el tooltip debe mostrarse abajo */
.stp-tooltip-content.stp-show-bottom {
  bottom: auto; 
  top: 135%; 
}

/* Flecha invertida (apuntando hacia arriba) */
.stp-tooltip-content.stp-show-bottom::after {
  top: auto; 
  bottom: 100%; 
  /* La posición 'left' se hereda de la regla ::after de arriba */
  border-color: transparent transparent #4a4a4a transparent; /* Fallback */
}