/* Panel base */
.outlier-warning-card {
    position: absolute;
    background-color: #d1e7dd; /* Verde clarito RENACCAPE */
    border: 1px solid #badbcc; /* Borde verde claro */
    border-radius: 0.5rem;
    padding: 1rem;
    z-index: 10;
    max-width: 100%;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

    /* Flecha base (punta) */
    .outlier-warning-card::before,
    .outlier-warning-card::after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
    }

    /* Bottom (flecha arriba del panel) */
    .outlier-warning-card.placement-bottom-right::before,
    .outlier-warning-card.placement-bottom-left::before,
    .outlier-warning-card.placement-bottom::before {
        top: -10px;
        left: var(--pointer-left);
        transform: translateX(-50%);
        border-width: 0 10px 10px 10px;
        border-color: transparent transparent #d1e7dd transparent;
    }

    .outlier-warning-card.placement-bottom-right::after,
    .outlier-warning-card.placement-bottom-left::after,
    .outlier-warning-card.placement-bottom::after {
        top: -11px;
        left: var(--pointer-left);
        transform: translateX(-50%);
        border-width: 0 10px 10px 10px;
        border-color: transparent transparent #badbcc transparent;
        z-index: -1;
    }

    /* Top (flecha debajo del panel) */
    .outlier-warning-card.placement-top-right::before,
    .outlier-warning-card.placement-top-left::before,
    .outlier-warning-card.placement-top::before {
        bottom: -10px;
        left: var(--pointer-left);
        transform: translateX(-50%);
        border-width: 10px 10px 0 10px;
        border-color: #d1e7dd transparent transparent transparent;
    }

    .outlier-warning-card.placement-top-right::after,
    .outlier-warning-card.placement-top-left::after,
    .outlier-warning-card.placement-top::after {
        bottom: -11px;
        left: var(--pointer-left);
        transform: translateX(-50%);
        border-width: 10px 10px 0 10px;
        border-color: #badbcc transparent transparent transparent;
        z-index: -1;
    }

    /* Left (flecha a la derecha del panel) */
    .outlier-warning-card.placement-left::before {
        top: var(--pointer-top);
        right: -10px;
        transform: translateY(-50%);
        border-width: 10px 10px 10px 0;
        border-color: transparent #d1e7dd transparent transparent;
    }

    .outlier-warning-card.placement-left::after {
        top: var(--pointer-top);
        right: -11px;
        transform: translateY(-50%);
        border-width: 10px 10px 10px 0;
        border-color: transparent #badbcc transparent transparent;
        z-index: -1;
    }

    /* Right (flecha a la izquierda del panel) */
    .outlier-warning-card.placement-right::before {
        top: var(--pointer-top);
        left: -10px;
        transform: translateY(-50%);
        border-width: 10px 0 10px 10px;
        border-color: transparent transparent transparent #d1e7dd;
    }

    .outlier-warning-card.placement-right::after {
        top: var(--pointer-top);
        left: -11px;
        transform: translateY(-50%);
        border-width: 10px 0 10px 10px;
        border-color: transparent transparent transparent #badbcc;
        z-index: -1;
    }

/* Posicionamiento del panel con respecto al campo */
.placement-bottom-right,
.placement-bottom-left,
.placement-bottom {
    top: 100%;
    margin-top: 0.25rem;
    left: 0;
}

.placement-top-right,
.placement-top-left,
.placement-top {
    bottom: 100%;
    margin-bottom: 0.25rem;
    left: 0;
}

.placement-left {
    right: 100%;
    margin-right: 0.25rem;
    top: 0;
}

.placement-right {
    left: 100%;
    margin-left: 0.25rem;
    top: 0;
}