/**
 * HiperMe — tooltip global.
 *
 * API nueva:
 *   .cc-tip > .cc-tip__trigger + .cc-tip__bubble
 *
 * Compatibilidad:
 *   .metrics-dist-tooltip mantiene su markup durante la migración.
 *   [data-tooltip] adopta la misma burbuja sin ocupar ::before, reservado
 *   por muchos iconos legacy y por .cc-row-action.
 */

:root {
    --brand-tooltip-bg: var(--brand-forest, #174f44);
    --brand-tooltip-color: var(--brand-white, #ffffff);
    --brand-tooltip-radius: 8px;
    --brand-tooltip-shadow:
        0 8px 20px rgba(23, 79, 68, 0.22),
        0 2px 6px rgba(0, 0, 0, 0.08);
}

.cc-tip,
.metrics-dist-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.cc-tip__trigger,
.metrics-dist-tooltip__trigger {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-tooltip-bg);
    color: var(--brand-tooltip-color);
    box-shadow: 0 1px 3px rgba(23, 79, 68, 0.3);
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    cursor: help;
}

.cc-tip__trigger:hover,
.cc-tip__trigger:focus,
.metrics-dist-tooltip__trigger:hover,
.metrics-dist-tooltip__trigger:focus {
    background: var(--brand-deep-green, #033939);
    outline: none;
}

.cc-tip__trigger:focus-visible,
.metrics-dist-tooltip__trigger:focus-visible {
    outline: 2px solid var(--brand-mint-50, rgba(135, 212, 158, 0.5));
    outline-offset: 2px;
}

.cc-tip__bubble,
.metrics-dist-tooltip__bubble {
    --cc-tip-bg: var(--brand-tooltip-bg);
    position: absolute;
    z-index: 30;
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(100% + 8px);
    width: max-content;
    min-width: 0;
    max-width: min(300px, calc(100vw - 24px));
    padding: 8px 11px;
    border: 0;
    border-radius: var(--brand-tooltip-radius);
    box-sizing: border-box;
    transform: translateX(-50%);
    background: var(--cc-tip-bg);
    color: var(--brand-tooltip-color);
    box-shadow: var(--brand-tooltip-shadow);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.cc-tip__bubble::after,
.metrics-dist-tooltip__bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid var(--cc-tip-bg);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06));
}

.cc-tip:hover .cc-tip__bubble,
.cc-tip:focus-within .cc-tip__bubble,
.metrics-dist-tooltip:hover .metrics-dist-tooltip__bubble,
.metrics-dist-tooltip:focus-within .metrics-dist-tooltip__bubble {
    opacity: 1;
    visibility: visible;
}

.cc-tip__bubble--multiline,
.cc-tip__bubble--compact,
.metrics-dist-tooltip__bubble--multiline,
.metrics-dist-tooltip__bubble--compact {
    max-width: min(340px, calc(100vw - 24px));
    white-space: normal;
}

.cc-tip__list,
.metrics-dist-tooltip__list {
    margin: 5px 0 0;
    padding-left: 1.1em;
    list-style: disc outside;
}

.cc-tip__list li,
.metrics-dist-tooltip__list li {
    display: list-item;
    margin: 0.25em 0;
    list-style: disc outside;
    font: inherit;
    line-height: inherit;
    white-space: normal;
}

.cc-tip__list li::marker,
.metrics-dist-tooltip__list li::marker {
    color: rgba(255, 255, 255, 0.75);
}

.cc-tip__bubble > span,
.metrics-dist-tooltip__bubble > span {
    white-space: normal;
}

.cc-tip--bottom .cc-tip__bubble,
.metrics-dist-tooltip--placement-bottom .metrics-dist-tooltip__bubble {
    top: calc(100% + 8px);
    bottom: auto;
    transform: translateX(-50%);
}

.cc-tip--bottom .cc-tip__bubble::after,
.metrics-dist-tooltip--placement-bottom .metrics-dist-tooltip__bubble::after {
    top: -5px;
    bottom: auto;
    border-top: 0;
    border-bottom: 5px solid var(--cc-tip-bg);
}

.cc-tip--right .cc-tip__bubble,
.metrics-dist-tooltip--placement-right .metrics-dist-tooltip__bubble {
    left: calc(100% + 8px);
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

.cc-tip--right .cc-tip__bubble::after,
.metrics-dist-tooltip--placement-right .metrics-dist-tooltip__bubble::after {
    left: -5px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    border-left: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid var(--cc-tip-bg);
}

/* Columnas al borde derecho de tablas: abrir hacia adentro. */
.cc-tip--left .cc-tip__bubble,
.metrics-dist-tooltip--placement-left .metrics-dist-tooltip__bubble {
    left: auto;
    right: calc(100% + 8px);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

.cc-tip--left .cc-tip__bubble::after,
.metrics-dist-tooltip--placement-left .metrics-dist-tooltip__bubble::after {
    left: auto;
    right: -5px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    border-right: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid var(--cc-tip-bg);
}

.cc-tip--inverted .cc-tip__trigger,
.metrics-dist-tooltip--trigger-inverted .metrics-dist-tooltip__trigger {
    background: var(--brand-white, #ffffff);
    color: var(--brand-deep-green, #033939);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.cc-tip--inverted .cc-tip__trigger:hover,
.cc-tip--inverted .cc-tip__trigger:focus,
.metrics-dist-tooltip--trigger-inverted .metrics-dist-tooltip__trigger:hover,
.metrics-dist-tooltip--trigger-inverted .metrics-dist-tooltip__trigger:focus {
    background: rgba(135, 212, 158, 0.16);
    color: var(--brand-forest, #174f44);
}

/*
 * Compatibilidad para labels cortos existentes.
 * No se usa ::before como flecha: acciones de tabla e iconos legacy lo usan
 * para dibujar su propio pictograma.
 */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after,
.iconos[data-tooltip]::after,
body [data-tooltip]:not(.iconos)::after,
.tabla [data-tooltip]:not(.iconos)::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 30;
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(100% + 8px);
    width: max-content;
    min-width: 0;
    max-width: min(300px, calc(100vw - 24px));
    padding: 6px 10px;
    border-radius: var(--brand-tooltip-radius);
    box-sizing: border-box;
    transform: translateX(-50%);
    background: var(--brand-tooltip-bg);
    color: var(--brand-tooltip-color);
    box-shadow: var(--brand-tooltip-shadow);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus::after,
[data-tooltip]:focus-within::after,
.iconos[data-tooltip]:hover::after,
.iconos[data-tooltip]:focus::after,
body [data-tooltip]:not(.iconos):hover::after,
body [data-tooltip]:not(.iconos):focus::after,
body [data-tooltip]:not(.iconos):focus-within::after,
.tabla [data-tooltip]:not(.iconos):hover::after,
.tabla [data-tooltip]:not(.iconos):focus::after,
.tabla [data-tooltip]:not(.iconos):focus-within::after {
    opacity: 1 !important;
    visibility: visible !important;
}

[data-tooltip-right]::after,
[data-tooltip-right]:not(.iconos)::after,
.tabla a[data-tooltip-right]::after,
#header .idioma.notification-bell ul a[data-tooltip-right]::after {
    left: auto;
    right: calc(100% + 8px);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

[data-tooltip-bottom]::after,
[data-tooltip-bottom]:not(.iconos)::after,
body [data-tooltip-bottom]:not(.iconos)::after {
    top: calc(100% + 8px);
    bottom: auto;
    transform: translateX(-50%);
}

.iconos[data-tooltip-left]::after {
    left: auto;
    right: calc(100% + 8px);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

.tabla a[data-tooltip-right]::before,
#header .idioma.notification-bell ul a[data-tooltip-right]::before {
    background: var(--brand-tooltip-bg);
}

.cc-tooltip-copied-state[data-tooltip]::after,
.iconos.cc-tooltip-copied-state[data-tooltip]::after {
    bottom: calc(100% + 8px) !important;
    background: var(--brand-tooltip-bg) !important;
    color: var(--brand-tooltip-color) !important;
    box-shadow: var(--brand-tooltip-shadow);
    opacity: 1 !important;
    visibility: visible !important;
}

.iconos[data-tooltip-left].cc-tooltip-copied-state::after {
    left: auto !important;
    right: calc(100% + 8px) !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
}

@media (prefers-reduced-motion: reduce) {
    .cc-tip__bubble,
    .metrics-dist-tooltip__bubble,
    [data-tooltip]::after {
        transition: none;
    }
}