/* renderer/styles/hotkeys-badges.css
 *
 * Badge de TECLA RÁPIDA sobre los botones de acción del pedido/venta
 * (.pedido-summary-actions): un mini "keycap" en la esquina superior derecha de
 * cada botón con la tecla configurada.
 *   Paso 1: visual.
 *   Paso 2: al hacer click en el keycap se abre el popover de configuración
 *           (.jamm-hk-pop) para reasignar o quitar la tecla.
 * La tecla todavía NO dispara el botón (paso posterior).
 *
 * Dueño único del badge y del popover: renderer/lib/hotkeys-badges.js
 * (window.JammHotkeys). Colores por token (tokens.css): --hk-badge-bg / --hk-badge-fg.
 */

/* Ancla para el badge absoluto. Va acá (no en responsive.css) para aplicar en
   cualquier viewport; la regla base del botón no setea position. */
.nuevo-pedido-modal .pedido-summary-actions .btn {
    position: relative;
}

/* Las tarjetas de cobro comparten el mismo keycap editable que los botones de Adición. */
.nuevo-pedido-modal .ci-payment-grid .btn-payment,
#modal-cobro .payment-grid .btn-payment {
    position: relative;
}
.nuevo-pedido-modal .ci-print-buttons .btn-comprobante,
#modal-cobro .comprobante-grid .btn-comprobante {
    position: relative;
}
.nuevo-pedido-modal .ci-print-buttons .btn-comprobante .jamm-hk-badge:not(.is-empty):not(:hover) {
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
}
#modal-cobro .comprobante-grid .btn-comprobante .jamm-hk-badge:not(.is-empty):not(:hover) {
    background: transparent;
    color: var(--ink-500);
}
/* En las formas de cobro, la tecla asignada se presenta igual que en los canales de venta:
   texto gris sin fondo. El hover conserva la indicación de que se puede editar. */
.nuevo-pedido-modal .ci-payment-grid .btn-payment .jamm-hk-badge:not(.is-empty):not(:hover),
#modal-cobro .payment-grid .btn-payment .jamm-hk-badge:not(.is-empty):not(:hover) {
    background: transparent;
    color: var(--ink-500);
}

/* Ancla para el keycap en las solapas de canal de mesas2 (mostrador/delivery). */
#view-mesas2 .m2-view-name {
    position: relative;
}
/* En las solapas de canal el keycap va DISCRETO: texto gris y sin píldora, para no competir con
   el nombre del canal. En hover recupera el acento info (afordancia de "clic para cambiar"). */
#view-mesas2 .m2-view-name .jamm-hk-badge:not(.is-empty):not(:hover) {
    background: transparent;
    color: var(--m2-muted);
}

/* Vista general: keycap FIJO "Esc" (no configurable, sólo informa que Escape vuelve ahí). Mismo
   look discreto pero sin afordancia de click (no abre popover ni se tiñe al hover). */
#view-mesas2 .m2-view-btn {
    position: relative;
}
#view-mesas2 .m2-view-btn .jamm-hk-badge.is-fixed {
    background: transparent;
    color: var(--m2-muted);
    cursor: default;
    pointer-events: none;
}

/* Keycap: claro sobre botón de color → resalta en oscuro y claro, se lee como
   una tecla. Queda al ras de la esquina redondeada del botón (radio 8). */
.jamm-hk-badge {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    padding: 0 3px;
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 0.54rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--hk-badge-fg);
    background: var(--hk-badge-bg);
    border-top-right-radius: 8px;   /* al ras de la esquina del botón */
    border-bottom-left-radius: 7px; /* doblez interior tipo etiqueta */
    box-shadow: none;
    text-shadow: none;
    cursor: pointer;                /* Paso 2: click para configurar la tecla. */
    user-select: none;
    z-index: 2;
    transition: background 0.12s ease, color 0.12s ease;
}
/* Afordancia de "clickeable para cambiar": el keycap se tiñe con el acento info. */
.jamm-hk-badge:hover {
    background: var(--acc-info);
    color: #fff;
}

/* Slot vacío: botón sin tecla asignada. Se ve discreto (contorno punteado, tenue)
   para no competir con los keycaps reales; al hover invita a asignar. */
.jamm-hk-badge.is-empty {
    background: transparent;
    color: var(--ink-500);
    border: 1px dashed color-mix(in srgb, var(--ink-500) 55%, transparent);
    opacity: 0.5;
}
.jamm-hk-badge.is-empty:hover {
    background: var(--acc-info);
    color: #fff;
    border-color: transparent;
    opacity: 1;
}

/* Popover de configuración: se ancla por JS (position:fixed) cerca del keycap.
   Va en <body> para no quedar recortado por el overflow:hidden del botón. */
.jamm-hk-pop {
    position: fixed;
    z-index: 3000;                  /* por encima del modal del pedido (z-index 2000) */
    min-width: 184px;
    max-width: 240px;
    background: var(--surface-panel);
    color: var(--ink-900);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: var(--elev-1);
    font-size: 0.82rem;
}
.jamm-hk-pop-title {
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: 4px;
}
.jamm-hk-pop-hint {
    font-size: 0.76rem;
    color: var(--ink-700);
}
.jamm-hk-pop-msg {
    font-size: 0.74rem;
    color: var(--acc-warn);
    min-height: 15px;
    margin-top: 4px;
}
.jamm-hk-pop-row {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 10px;
}
.jamm-hk-pop-btn {
    font-size: 0.78rem;
    padding: 5px 12px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: var(--surface-chip);
    color: var(--ink-900);
    cursor: pointer;
    box-shadow: none;
    text-shadow: none;
}
.jamm-hk-pop-btn:hover {
    background: var(--surface-chip-hover);
}
.jamm-hk-pop-clear {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}