/* IEPC Accessibility Suite v2.0 — Tooltips
 * CSS-driven tooltips via data-tooltip attribute
 */
/* [data-tooltip] { position: relative; } */
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(calc(-50% + var(--tt-shift-x, 0px)));
    background: #1e293b;
    color: #fff;
    padding: .4rem .65rem;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    width: max-content;
    max-width: 240px;
    text-align: center;
    z-index: 1000001;
    pointer-events: none;
    animation: a11yTipInShift .15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    text-transform: none;
    letter-spacing: normal;
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1e293b;
    z-index: 100001;
    pointer-events: none;
    animation: a11yTipInArrow .15s ease;
}
.fab-item[data-tooltip]:hover,
.fab-item[data-tooltip]:focus-visible {
  z-index: 10; /* supera el z-index: 1 de los hermanos */
}

@keyframes a11yTipInShift {
    from { opacity: 0; transform: translateX(calc(-50% + var(--tt-shift-x, 0px))) translateY(4px); }
    to { opacity: 1; transform: translateX(calc(-50% + var(--tt-shift-x, 0px))) translateY(0); }
}
@keyframes a11yTipInShiftSide {
    from { opacity: 0; transform: translateX(var(--tt-shift-x, 0px)) translateY(4px); }
    to { opacity: 1; transform: translateX(var(--tt-shift-x, 0px)) translateY(0); }
}
@keyframes a11yTipInArrow {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Bottom placement for first items in a group */
.a11y-btn-group [data-tooltip]:first-child:hover::after,
.a11y-btn-group [data-tooltip]:first-child:focus-visible::after {
    bottom: auto;
    top: calc(100% + 8px);
}
.a11y-btn-group [data-tooltip]:first-child:hover::before,
.a11y-btn-group [data-tooltip]:first-child:focus-visible::before {
    bottom: auto;
    top: calc(100% + 2px);
    border-top-color: transparent;
    border-bottom-color: #1e293b;
}

/* Bottom placement: set by JS via data-tt-placement when tooltip would overflow the top edge */
[data-tooltip][data-tt-placement="bottom"]:hover::after,
[data-tooltip][data-tt-placement="bottom"]:focus-visible::after {
    bottom: auto;
    top: calc(100% + 8px);
}
[data-tooltip][data-tt-placement="bottom"]:hover::before,
[data-tooltip][data-tt-placement="bottom"]:focus-visible::before {
    bottom: auto;
    top: calc(100% + 2px);
    border-top-color: transparent;
    border-bottom-color: #1e293b;
}

/* Top-right: tooltip's right edge aligned with button's right edge (button near right of viewport) */
[data-tooltip][data-tt-placement="top-right"]:hover::after,
[data-tooltip][data-tt-placement="top-right"]:focus-visible::after {
    left: auto;
    right: 0;
    transform: translateX(var(--tt-shift-x, 0px));
    animation-name: a11yTipInShiftSide;
}

/* Top-left: tooltip's left edge aligned with button's left edge (button near left of viewport) */
[data-tooltip][data-tt-placement="top-left"]:hover::after,
[data-tooltip][data-tt-placement="top-left"]:focus-visible::after {
    right: auto;
    left: 0;
    transform: translateX(var(--tt-shift-x, 0px));
    animation-name: a11yTipInShiftSide;
}

/* Right side for help icons */
.a11y-help[data-tooltip]:hover::after,
.a11y-help[data-tooltip]:focus-visible::after {
    bottom: auto;
    top: 50%;
    left: calc(100% + 10px);
    transform: translateY(-50%);
}
.a11y-help[data-tooltip]:hover::before,
.a11y-help[data-tooltip]:focus-visible::before {
    bottom: auto;
    top: 50%;
    left: calc(100% + 4px);
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #1e293b;
    border-top-color: transparent;
}

/* High contrast tooltip */
body.a11y-contrast-high [data-tooltip]:hover::after,
body.a11y-contrast-high [data-tooltip]:focus-visible::after {
    background: #ffd84d !important; color: #000 !important; border: 2px solid #fff !important;
}
body.a11y-contrast-high [data-tooltip]:hover::before,
body.a11y-contrast-high [data-tooltip]:focus-visible::before { border-top-color: #ffd84d !important; }
body.a11y-contrast-high .a11y-btn-group [data-tooltip]:first-child:hover::before,
body.a11y-contrast-high .a11y-btn-group [data-tooltip]:first-child:focus-visible::before { border-bottom-color: #ffd84d !important; }
body.a11y-contrast-high .a11y-help[data-tooltip]:hover::before,
body.a11y-contrast-high .a11y-help[data-tooltip]:focus-visible::before { border-right-color: #ffd84d !important; }

body.a11y-motion-reduced [data-tooltip]:hover::after,
body.a11y-motion-reduced [data-tooltip]:focus-visible::after,
body.a11y-motion-reduced [data-tooltip]:hover::before,
body.a11y-motion-reduced [data-tooltip]:focus-visible::before {
    animation: none !important;
}