/*
 * KummaraDS — kds-menu (#2034)
 * ============================================================
 * El menú desplegable de la librería, sin Bootstrap: la cuenta de la tienda, el ⋯ de acciones, «Más opciones».
 *
 *   NAVEGAR (enlaces; se recorre con Tab):
 *   <div class="kds-menu kds-menu--derecha" data-kds-menu>
 *     <button type="button" aria-expanded="false" aria-controls="m-cuenta">Mi cuenta</button>
 *     <div class="kds-menu__panel" id="m-cuenta" hidden>
 *       <a class="kds-menu__item" href="/perfil" aria-current="page">Mi perfil</a>
 *       <hr class="kds-menu__sep">
 *       <a class="kds-menu__item kds-menu__item--peligro" href="/logout">Cerrar sesión</a>
 *     </div>
 *   </div>
 *
 *   ACCIONES (role="menu": se recorre con las flechas, Inicio, Fin y la primera letra):
 *   <div class="kds-menu" data-kds-menu>
 *     <button type="button" class="kds-boton kds-boton--icono" aria-label="Más acciones" aria-expanded="false"
 *             aria-controls="m-acciones"><i class="fas fa-ellipsis-h" aria-hidden="true"></i></button>
 *     <div class="kds-menu__panel" id="m-acciones" role="menu" hidden>
 *       <button type="button" class="kds-menu__item" role="menuitem">Duplicar</button>
 *       <button type="button" class="kds-menu__item kds-menu__item--peligro" role="menuitem">Borrar</button>
 *     </div>
 *   </div>
 *
 *   --derecha            el panel se alinea al borde derecho del disparador (se da vuelta solo si no entra)
 *   .kds-menu__item      un enlace o un botón; aria-current="page" (navegar) o aria-checked="true" (elegir): en
 *                        negrita y con tilde; --peligro sólo para lo que borra o anula; disabled o aria-disabled
 *   .kds-menu__sep       la línea que separa · .kds-menu__rotulo el nombre de un grupo · .kds-menu__vacio sin opciones
 *   .kds-menu__panel--flotante   el panel vive suelto en la página (position fixed) y se ubica junto a su disparador:
 *                        para un ⋯ adentro de una tabla con desplazamiento, que lo recortaría (#2038). Se cierra al
 *                        desplazar. Antes de abrir, el menú avisa con el evento kds-menu:abrir (para llenarlo).
 * Abre con clic, Enter o Espacio; Escape o un clic afuera lo cierran y el foco vuelve al disparador; uno abierto por vez.
 * ============================================================
 */

.kds-menu {
    position: relative;
    display: inline-block;
}

.kds-menu__panel {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    z-index: var(--kds-capa-menu, 1060);
    min-width: 10rem;
    max-width: min(22rem, calc(100vw - 1.5rem));
    padding: .5rem 0;
    border: 1px solid var(--kds-borde, #eee);
    border-radius: var(--kds-menu-radio, calc(var(--kds-radio-superficie, .375rem) * 1.33));
    background: var(--kds-superficie-flotante, #fff);
    box-shadow: var(--kds-sombra-flotante, 0 .5rem 1.5625rem rgba(0, 0, 0, .1));
    color: var(--kds-texto, #212529);
    font-size: var(--kds-fs-3, 1rem);
    text-align: left;
}

.kds-menu__panel[hidden] { display: none; }

.kds-menu__panel--flotante {
    position: fixed;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: var(--kds-capa-menu-flotante, 1400);
}

.kds-menu--derecha > .kds-menu__panel,
.kds-menu__panel.is-derecha {
    left: auto;
    right: 0;
}

.kds-menu__panel.is-arriba {
    top: auto;
    bottom: calc(100% + .25rem);
}

.kds-menu__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 2.25rem;
    margin: 0;
    padding: .375rem 1rem;
    border: 0;
    background: none;
    color: var(--kds-texto, #212529);
    font: inherit;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.kds-menu__item:hover,
.kds-menu__item.is-activo {
    background: var(--kds-superficie-2, #f8f9fa);
    color: var(--kds-texto, #212529);
}

.kds-menu__item:focus { outline: none; }

.kds-menu__item:focus-visible {
    box-shadow: inset 0 0 0 var(--kds-foco-ancho, 2px) var(--kds-foco, #2EB8A8);
}

.kds-menu__item > i {
    width: 1rem;
    color: var(--kds-texto-2, #606060);
    text-align: center;
}

.kds-menu__item[aria-current="page"],
.kds-menu__item[aria-checked="true"] {
    font-weight: var(--kds-peso-ui, 600);
    padding-right: 2.5rem;
}

.kds-menu__item[aria-current="page"]::after,
.kds-menu__item[aria-checked="true"]::after {
    content: "";
    position: absolute;
    right: 1rem;
    width: 1rem;
    height: 1rem;
    background: var(--kds-acento-texto, #17786c);
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3.5 8.5 3 3 6-6.5'/%3e%3c/svg%3e") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3.5 8.5 3 3 6-6.5'/%3e%3c/svg%3e") center / contain no-repeat;
}

.kds-menu__item--peligro,
.kds-menu__item--peligro:hover,
.kds-menu__item--peligro > i {
    color: var(--kds-peligro-texto, #b8294a);
}

.kds-menu__item:disabled,
.kds-menu__item[aria-disabled="true"] {
    color: var(--kds-texto-3, #6b6b6b);
    cursor: not-allowed;
    background: none;
}

.kds-menu__sep {
    height: 0;
    margin: .5rem 0;
    border: 0;
    border-top: 1px solid var(--kds-borde, #eee);
    opacity: 1;
}

.kds-menu__rotulo {
    margin: 0;
    padding: .375rem 1rem .25rem;
    color: var(--kds-texto-2, #606060);
    font-size: var(--kds-fs-1, .75rem);
    font-weight: var(--kds-peso-ui, 600);
}

.kds-menu__vacio {
    margin: 0;
    padding: .375rem 1rem;
    color: var(--kds-texto-2, #606060);
}

@media (pointer: coarse) {
    .kds-menu__item { min-height: 2.75rem; }
}