/**
 * ============================================================================
 * AIDA — Tooltips CSS (sin dependencia de JS)
 * ============================================================================
 *
 * Tooltips personalizados sin JavaScript usando solo CSS.
 * Ventajas:
 * - No entra en conflicto con data-bs-toggle de Bootstrap en el mismo elemento
 * - Ligero y predecible en listados DataTables
 *
 * Uso: `TooltipHelper::generate()` en PHP → data-aida-tooltip, data-aida-placement, data-aida-color
 *
 * @version 1.0.0
 */

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

[data-aida-tooltip]:hover::after {
    content: attr(data-aida-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 1050;
    padding: 6px 12px;
    margin-bottom: 8px;
    border-radius: 6px;
    background-color: var(--aida-tooltip-bg, #000);
    color: var(--aida-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);
}

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

[data-aida-tooltip]:hover::after,
[data-aida-tooltip]:hover::before {
    opacity: 0.95;
}

/* ============================================================================
   Variantes de posición
============================================================================ */
[data-aida-tooltip][data-aida-placement="bottom"]:hover::after {
    bottom: auto;
    top: 100%;
    margin-top: 8px;
    margin-bottom: 0;
}

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

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

[data-aida-tooltip][data-aida-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(--aida-tooltip-bg, #000);
}

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

[data-aida-tooltip][data-aida-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(--aida-tooltip-bg, #000);
}

/* ============================================================================
   Variantes de color (Bootstrap 5 / tema)
============================================================================ */
[data-aida-tooltip][data-aida-color="primary"] {
    --aida-tooltip-bg: #aa5e85;
}

[data-aida-tooltip][data-aida-color="secondary"] {
    --aida-tooltip-bg: #8592a3;
}

[data-aida-tooltip][data-aida-color="success"] {
    --aida-tooltip-bg: #71dd37;
}

[data-aida-tooltip][data-aida-color="danger"] {
    --aida-tooltip-bg: #ff3e1d;
}

[data-aida-tooltip][data-aida-color="warning"] {
    --aida-tooltip-bg: #ffab00;
}

[data-aida-tooltip][data-aida-color="info"] {
    --aida-tooltip-bg: #03c3ec;
}

[data-aida-tooltip][data-aida-color="light"] {
    --aida-tooltip-bg: #fcfdfd;
    --aida-tooltip-color: #566a7f;
}

[data-aida-tooltip][data-aida-color="dark"] {
    --aida-tooltip-bg: #233446;
}

@media (max-width: 767.98px) {
    /*
    [data-aida-tooltip]:hover::after,
    [data-aida-tooltip]:hover::before {
        display: none;
    }
    */
}

[data-aida-tooltip]:focus::after,
[data-aida-tooltip]:focus::before {
    opacity: 0.95;
}

@media (prefers-reduced-motion: reduce) {
    [data-aida-tooltip]:hover::after,
    [data-aida-tooltip]:hover::before,
    [data-aida-tooltip]:focus::after,
    [data-aida-tooltip]:focus::before {
        transition: none;
    }
}