/*
 * Visual do tooltip da grade do Meu ENEM.
 * Acompanha o tooltip do Mantine para a tela não ter dois estilos de balão.
 */
.me-tip {
    position: fixed;
    z-index: 9999;
    max-width: 280px;
    padding: 4px 8px;
    border-radius: var(--mantine-radius-sm, 4px);
    font-size: 12px;
    line-height: 1.45;
    font-family: var(--mantine-font-family, inherit);
    white-space: nowrap;

    /* `light-dark()` é o que o resto do projeto usa — segue o esquema que o
       Mantine já resolveu, sem duplicar media query nem adivinhar atributo. */
    background: light-dark(var(--mantine-color-dark-6), var(--mantine-color-gray-2));
    color: light-dark(#fff, var(--mantine-color-black));
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);

    /* Não intercepta o mouse: senão o balão sob o cursor dispararia mouseout. */
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease;
}

.me-tip--visivel {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .me-tip { transition: none; }
}