/* ==========================================================================
   LeadSync — El tooltip que explica por qué no se puede (item B62)

   Sustituye al `title` del navegador, que es lento, no se puede vestir y —lo que de verdad
   importa— NO EXISTE EN MÓVIL.
   ========================================================================== */

/* La envoltura no debe cambiar NADA de cómo se coloca el botón: hereda el display en línea y
   no añade ni un píxel. Si esto empujara algo, el arreglo se notaría en cada formulario. */
.tt-env {
  display: inline-flex;
  pointer-events: auto;
}

/* ESTA REGLA ES LA QUE HACE QUE TODO LO DEMÁS FUNCIONE, y sin ella el componente no se
   entera de nada. Medido en el navegador: con el botón apagado, `elementFromPoint` sobre él
   devuelve el BOTÓN, y el navegador NO despacha eventos de puntero sobre un control
   deshabilitado. Como `pointerenter` además no burbujea, la envoltura no se enteraba nunca:
   el tooltip existía, estaba cableado, y al pasar el ratón no pasaba nada.

   Quitándole el puntero al hijo apagado, el blanco pasa a ser la envoltura. No se pierde
   nada: un control deshabilitado no tiene ninguna interacción propia que defender. */
.tt-env > :disabled {
  pointer-events: none;
}

.tt {
  position: fixed;
  z-index: 1000; /* por encima de modales; es lo último que se pinta */
  max-width: 280px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: 0 4px 16px var(--shadow);
  /* NO RECIBE EL PUNTERO: si lo hiciera, aparecer debajo del cursor dispararía el
     `pointerleave` del ancla y el tooltip parpadearía sin parar. */
  pointer-events: none;
  /* Varios motivos llegan separados por saltos de linea: se respetan, y ademas cada uno
     puede partirse si es largo. Seguidos en un parrafo se leen como una sola frase. */
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* LA NOTA: el dato que NO se lee, se consulta —hoy, el código de error de un mensaje que no
   salió—. Va debajo, más pequeña y atenuada, y es decisión suya del 22-09: *"lo importante es
   que en front sea legible, el código es referencial"*. Es también lo que recomienda la guía
   de mensajes de error de NN/g — el código se minimiza, nunca encabeza.

   `display: block` porque es un <small> y en línea se pegaría al final de la frase, que es
   justo lo que no puede pasar: se leería como parte del motivo. */
.tt-nota {
  display: block;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid color-mix(in srgb, var(--tooltip-text) 20%, transparent);
  font-size: 11px;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

/* Aparece con un fundido corto: insinúa de dónde sale sin hacer esperar. */
.tt-abierto {
  animation: tt-entra 120ms ease-out;
}

@keyframes tt-entra {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .tt-abierto { animation: none; }
}

/* ⓘ JUNTO A UN TÍTULO: pulsarlo (o dejar el ratón encima) explica qué significa, con el
   tooltip del proyecto (`data-tt`). Es un elemento que SOLO explica, así que su clic abre el
   tooltip y no hace nada más (tooltip.js). Va en línea con el texto y en su tono atenuado. */
.info-tt {
  display: inline-flex;
  align-items: center;
  vertical-align: -2px;
  margin-left: 4px;
  padding: 1px;
  border-radius: 50%;
  color: var(--text-dim);
  cursor: help;
  transition: color var(--dur-hover, .12s) ease, background-color var(--dur-hover, .12s) ease;
}
.info-tt:hover,
.info-tt:focus-visible { color: var(--text); background: var(--bg-hover); outline: none; }
.info-tt .ic { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) {
  .info-tt { transition: none; }
}