:root {
    --ink: #223547;
    --muted: #6B7F92;
    --line: #E6EEF5;
    --brand: #25AAE1;
}

/* Contenedor */
.sd-menu {
    position: relative;
    display: inline-block;
}

/* Botón de tres puntos */
.kebab {
    width: 36px;
    height: 36px;
    padding: 0;   
    background: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,.06);
}

    .kebab .material-symbols-rounded {
        font-size: 20px;
        line-height: 1;
        color: #2F5B7A;
        font-variation-settings: 'FILL' 0,'wght' 600,'GRAD' 0,'opsz' 24;
    }

    .kebab:hover {
        filter: brightness(.98);
    }

/* Popover */
.popover {
    position: absolute;
    top: calc(100% + 10px);
    min-width: 220px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(0,0,0,.12);
    opacity: 0;
    transform: translateY(-4px) scale(.98);
    transition: opacity .12s ease, transform .12s ease;
    pointer-events: none;
    z-index: 50;
}

    .popover.open {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

/* Ítems del menú */
.menu-item {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--ink);
}

    .menu-item .material-symbols-rounded {
        font-size: 22px;
        line-height: 1;
        color: #1B3F57;
        font-variation-settings: 'FILL' 0,'wght' 600,'GRAD' 0,'opsz' 24;
    }

    .menu-item .label {
        font-size: 15px;
    }

    .menu-item:hover {
        background: #F2F6FB;
    }

    .menu-item:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

    .menu-item.danger .material-symbols-rounded {
        color: #B42318;
    }

    .menu-item.danger {
        color: #7A1410;
    }