/**
 * css/tooltip.css — EL tooltip de la plataforma (Lote UX · Tooltips)
 * =====================================================================
 * Archivo AUTOCONTENIDO a propósito: define sus propios tokens y no
 * depende de components.css ni de admin.css. Eso permite que los cinco
 * shells (index, admin, login, registro, restablecer) lo linkeen con una
 * sola línea y compartan EXACTAMENTE el mismo tooltip — que era el punto
 * del lote: uno solo, en toda la plataforma.
 *
 * Decisión de color: el globo es OSCURO en los dos temas. En modo claro
 * un tooltip claro sobre tarjeta clara necesita bordes duros para
 * separarse; el contraste invertido lo despega solo y es la convención
 * de las apps de esta categoría. Los tokens quedan expuestos igual, por
 * si algún día se decide lo contrario.
 * =====================================================================
 */

:root{
  --tip-bg:    #262F45;
  --tip-fg:    #EDF1FB;
  --tip-line:  rgba(148,163,205,.20);
  --tip-sombra: 0 14px 32px -12px rgba(0,0,0,.65), 0 3px 8px -3px rgba(0,0,0,.4);
}
:root[data-theme="light"]{
  --tip-bg:    #1B2133;
  --tip-fg:    #F3F5FC;
  --tip-line:  rgba(255,255,255,.10);
  --tip-sombra: 0 14px 30px -12px rgba(20,25,45,.35), 0 3px 8px -4px rgba(20,25,45,.25);
}

.ins-tip{
  position:fixed; top:0; left:0; z-index:9999;
  max-width:min(280px, calc(100vw - 24px));
  padding:8px 11px;
  border-radius:11px;
  background:var(--tip-bg);
  color:var(--tip-fg);
  border:1px solid var(--tip-line);
  box-shadow:var(--tip-sombra);

  font-family:var(--font-b, 'DM Sans', sans-serif);
  font-size:.775rem;
  font-weight:500;
  line-height:1.42;
  letter-spacing:.004em;
  text-align:left;
  white-space:normal;
  overflow-wrap:anywhere;

  /* El globo no participa del hit-testing: nunca se interpone entre el
     puntero y el botón que lo disparó (era el bug clásico de los
     tooltips caseros — el globo aparece bajo el mouse y se autocierra). */
  pointer-events:none;

  opacity:0;
  transform:translateY(3px) scale(.965);
  will-change:transform, opacity;

  /* SALIDA (esta regla es la que gobierna cuando se quita .visible).
     Rápida a propósito: un globo que se demora en irse queda tapando
     justo lo que la persona quería clickear. Sigue siendo una
     transición con curva, no un corte seco — lo que baja es el tiempo,
     no la suavidad. */
  transition:opacity .09s ease-in, transform .11s cubic-bezier(.4,0,1,1);
}
/* ENTRADA: se mantiene el ritmo pausado de siempre. La asimetría es
   deliberada — aparecer despacio es prudente, desaparecer despacio es
   un estorbo. */
.ins-tip.visible{
  opacity:1; transform:translateY(0) scale(1);
  transition:opacity .16s ease, transform .2s cubic-bezier(.32,.72,.32,1);
}

/* Flecha: cuadrado rotado que hereda fondo y borde del globo. Se le
   apagan los dos lados que quedan "adentro" para que no se vea la línea
   cruzando el cuerpo del tooltip. */
.ins-tip-arrow{
  position:absolute; width:9px; height:9px;
  background:var(--tip-bg);
  border:1px solid var(--tip-line);
  transform:rotate(45deg);
  border-radius:2px;
}
.ins-tip[data-pos="top"]    .ins-tip-arrow{ bottom:-5px; margin-left:-4.5px; border-top:none;    border-left:none;  }
.ins-tip[data-pos="bottom"] .ins-tip-arrow{ top:-5px;    margin-left:-4.5px; border-bottom:none; border-right:none; }
.ins-tip[data-pos="left"]   .ins-tip-arrow{ right:-5px;  margin-top:-4.5px;  border-bottom:none; border-left:none;  }
.ins-tip[data-pos="right"]  .ins-tip-arrow{ left:-5px;   margin-top:-4.5px;  border-top:none;    border-right:none; }

/* Móvil: el globo se dispara con un toque y se lee de más lejos.
   Tipografía un punto más grande y algo más de aire. */
@media (max-width: 720px){
  .ins-tip{
    font-size:.82rem;
    padding:9px 12px;
    max-width:min(300px, calc(100vw - 28px));
  }
}

/* Accesibilidad: sin animación para quien la pidió apagada. */
@media (prefers-reduced-motion: reduce){
  .ins-tip{ transition:opacity .01ms linear; transform:none; }
  .ins-tip.visible{ transform:none; }
}