/* Tooltip propio — estilos del componente static/js/tooltip.js.
 *
 * Va aparte de formulario.css para que cualquier pagina pueda usarlo con dos
 * lineas (este CSS y el JS) sin heredar el resto del formulario. Por eso cada
 * var() trae su valor de reserva: si la pagina no define la paleta, la burbuja
 * igual se ve bien.
 */

.tooltip-propio {
  position: absolute;
  z-index: 60;
  max-width: 280px;
  padding: 8px 11px;
  border-radius: var(--radio-chico, 8px);
  background: var(--azul-profundo, #16294f);
  color: #fff;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 8px 20px rgba(16, 32, 51, .22);
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .14s ease-out, transform .14s ease-out;
}

.tooltip-propio.visible {
  opacity: 1;
  transform: none;
}

.tooltip-propio[hidden] {
  display: none;
}

.tooltip-flecha {
  position: absolute;
  top: 100%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  background: var(--azul-profundo, #16294f);
  transform: translateY(-50%) rotate(45deg);
}

/* Cuando no hay lugar arriba, la burbuja se da vuelta y la flecha con ella. */
.tooltip-propio.tooltip-abajo {
  transform: translateY(-3px);
}

.tooltip-propio.tooltip-abajo.visible {
  transform: none;
}

.tooltip-propio.tooltip-abajo .tooltip-flecha {
  top: 0;
}

/* Texto que solo leen los lectores de pantalla: reemplaza al title que se
   quitó, para no perder la ayuda en accesibilidad. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .tooltip-propio {
    transition: none;
    transform: none;
  }

  .tooltip-propio.tooltip-abajo {
    transform: none;
  }
}