/* styles/tooltip-custom.css */

/* Estilo base para o elemento que terah o tooltip */
.tooltip-container {
    position: relative;
    display: inline-block; /* ou block, conforme necessario */
    cursor: help; /* Muda o cursor para indicar que ha uma dica */
}

/* Caixa do tooltip customizado */
.tooltip-container .tooltip-text {
    visibility: hidden;
    /* Cor de fundo personalizada - voce pode mudar essa cor */
    background-color: #3b82f6; /* Cor azul do Tailwind blue-500 */
    color: #fff; /* Cor do texto */
    text-align: center;
    border-radius: 6px;
    padding: 8px 12px;
    position: absolute;
    z-index: 100;
    /* Posicionamento inicial (você pode ajustar) */
    bottom: 125%; /* Posiciona acima do elemento */
    left: 50%;
    transform: translateX(-50%);
    /* Efeito de fade */
    opacity: 0;
    transition: opacity 0.3s;
    /* Evita que o tooltip force a barra de rolagem */
    white-space: nowrap;
    font-size: 14px; /* Ajuste o tamanho da fonte se necessario */
    /* Adiciona uma sombra leve */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Flecha do tooltip (opcional) */
.tooltip-container .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%; /* Na parte inferior do tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    /* Cor da flecha combinando com o fundo do tooltip */
    border-color: #3b82f6 transparent transparent transparent;
}

/* Mostra o tooltip ao passar o mouse */
.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* --- Posicionamentos Alternativos (opcional) --- */
/* Se quiser o tooltip a direita do elemento */
.tooltip-container.tooltip-right .tooltip-text {
    top: 50%;
    left: 125%; /* A direita */
    bottom: auto;
    right: auto;
    transform: translateY(-50%);
}

.tooltip-container.tooltip-right .tooltip-text::after {
    top: 50%;
    left: -10px; /* Na borda esquerda */
    margin-left: 0;
    margin-top: -5px;
    border-color: transparent #3b82f6 transparent transparent;
}

/* Se quiser o tooltip abaixo do elemento */
.tooltip-container.tooltip-bottom .tooltip-text {
    top: 125%; /* Abaixo */
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-container.tooltip-bottom .tooltip-text::after {
    top: -10px; /* Na borda superior */
    left: 50%;
    margin-left: -5px;
    border-color: transparent transparent #3b82f6 transparent;
}

/* Se quiser o tooltip a esquerda do elemento */
.tooltip-container.tooltip-left .tooltip-text {
    top: 50%;
    right: 125%; /* A esquerda */
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
}

.tooltip-container.tooltip-left .tooltip-text::after {
    top: 50%;
    right: -10px; /* Na borda direita */
    left: auto;
    margin-top: -5px;
    border-color: transparent transparent transparent #3b82f6;
}
/* --- Fim dos posicionamentos alternativos --- */