/* ============================================================
   TOOLTIPS
   Tema de Tippy.js compartido por todo el site. Sustituye al globo
   nativo del navegador, que tarda casi un segundo en salir, se pinta
   con la tipografia del sistema y no admite estilos.
   Los tokens son los mismos que usa la home.
   ============================================================ */

.tippy-box[data-theme~='casos'] {
    background: rgba(13, 13, 17, 0.95);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    color: #ecedf0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .45);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: .01em;
}

.tippy-box[data-theme~='casos'] .tippy-content {
    padding: 7px 10px;
    /* Hay tooltips de varias lineas (los canales que se fusionan en el
       panel de fuentes): el salto de linea del title tiene que verse. */
    white-space: pre-line;
}

/* Sin flecha: con la separacion de 8px se lee igual y ahorra tener que
   recortar el borde del globo en cada una de las doce posiciones. */

/* Animacion propia, para no cargar el CSS de animaciones del paquete.
   El desplazamiento va en sentido contrario al elemento, de modo que el
   globo parece salir de el. */
.tippy-box[data-animation='casos'][data-state='hidden'] {
    opacity: 0;
}

.tippy-box[data-animation='casos'][data-state='hidden'][data-placement^='top'] {
    transform: translateY(5px);
}

.tippy-box[data-animation='casos'][data-state='hidden'][data-placement^='bottom'] {
    transform: translateY(-5px);
}

.tippy-box[data-animation='casos'][data-state='hidden'][data-placement^='left'] {
    transform: translateX(5px);
}

.tippy-box[data-animation='casos'][data-state='hidden'][data-placement^='right'] {
    transform: translateX(-5px);
}

/* Quien no quiera animaciones no las tiene. */
@media (prefers-reduced-motion: reduce) {
    .tippy-box[data-animation='casos'][data-state='hidden'] {
        transform: none;
    }
}