/**
 * ============================================================================
 * XOEY - Tooltips CSS Puros
 * ============================================================================
 * 
 * Tooltips personalizados sin JavaScript usando solo CSS.
 * Ventajas:
 * - No conflictúa con data-bs-toggle de Bootstrap
 * - Más rápido y ligero que tooltips JS
 * - Totalmente personalizable
 * 
 * @version 1.0.0
 * @author Xoey Team
 */

/* ============================================================================
   Base del Tooltip
============================================================================ */
[data-xoey-tooltip] {
    position: relative;
    cursor: pointer;
}

[data-xoey-tooltip]:hover::after {
    content: attr(data-xoey-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 1050; /* Sobre modals de Bootstrap (1040) */
    padding: 6px 12px;
    margin-bottom: 8px;
    border-radius: 6px;
    background-color: var(--xoey-tooltip-bg, #000);
    color: var(--xoey-tooltip-color, #fff);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    visibility: visible;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Flecha del tooltip */
[data-xoey-tooltip]:hover::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 2px;
    border: 6px solid transparent;
    border-top-color: var(--xoey-tooltip-bg, #000);
    z-index: 1050;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
}

/* Animación de aparición */
[data-xoey-tooltip]:hover::after,
[data-xoey-tooltip]:hover::before {
    opacity: 0.95;
}

/* ============================================================================
   Variantes de Posición
============================================================================ */

/* Tooltip abajo */
[data-xoey-tooltip][data-xoey-placement="bottom"]:hover::after {
    bottom: auto;
    top: 100%;
    margin-top: 8px;
    margin-bottom: 0;
}

[data-xoey-tooltip][data-xoey-placement="bottom"]:hover::before {
    bottom: auto;
    top: 100%;
    margin-top: 2px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-bottom-color: var(--xoey-tooltip-bg, #000);
}

/* Tooltip izquierda */
[data-xoey-tooltip][data-xoey-placement="left"]:hover::after {
    bottom: auto;
    left: auto;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 8px;
    margin-bottom: 0;
}

[data-xoey-tooltip][data-xoey-placement="left"]:hover::before {
    bottom: auto;
    left: auto;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 2px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-left-color: var(--xoey-tooltip-bg, #000);
}

/* Tooltip derecha */
[data-xoey-tooltip][data-xoey-placement="right"]:hover::after {
    bottom: auto;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
    margin-bottom: 0;
}

[data-xoey-tooltip][data-xoey-placement="right"]:hover::before {
    bottom: auto;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 2px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-right-color: var(--xoey-tooltip-bg, #000);
}

/* ============================================================================
   Variantes de Color (Bootstrap 5 compatible)
============================================================================ */

/* Primary */
[data-xoey-tooltip][data-xoey-color="primary"] {
    --xoey-tooltip-bg: #aa5e85;
}

/* Secondary */
[data-xoey-tooltip][data-xoey-color="secondary"] {
    --xoey-tooltip-bg: #8592a3;
}

/* Success */
[data-xoey-tooltip][data-xoey-color="success"] {
    --xoey-tooltip-bg: #71dd37;
}

/* Danger */
[data-xoey-tooltip][data-xoey-color="danger"] {
    --xoey-tooltip-bg: #ff3e1d;
}

/* Warning */
[data-xoey-tooltip][data-xoey-color="warning"] {
    --xoey-tooltip-bg: #ffab00;
}

/* Info */
[data-xoey-tooltip][data-xoey-color="info"] {
    --xoey-tooltip-bg: #03c3ec;
}

/* Light */
[data-xoey-tooltip][data-xoey-color="light"] {
    --xoey-tooltip-bg: #fcfdfd;
    --xoey-tooltip-color: #566a7f;
}

/* Dark */
[data-xoey-tooltip][data-xoey-color="dark"] {
    --xoey-tooltip-bg: #233446;
}

/* ============================================================================
   Responsive: Deshabilitar en móviles (opcional)
============================================================================ */
@media (max-width: 767.98px) {
    /* En móviles, los tooltips en hover no funcionan bien */
    /* Puedes descomentar esto si prefieres deshabilitarlos */
    /*
    [data-xoey-tooltip]:hover::after,
    [data-xoey-tooltip]:hover::before {
        display: none;
    }
    */
}

/* ============================================================================
   Accesibilidad
============================================================================ */
[data-xoey-tooltip]:focus::after,
[data-xoey-tooltip]:focus::before {
    opacity: 0.95;
}

/* Animación más suave para usuarios que prefieren movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    [data-xoey-tooltip]:hover::after,
    [data-xoey-tooltip]:hover::before,
    [data-xoey-tooltip]:focus::after,
    [data-xoey-tooltip]:focus::before {
        transition: none;
    }
}