/* @vertical GLOBAL — QR de Mercado Pago EN SEGUNDO PLANO (renderer/lib/mp-qr-pendientes.js y flows/cobro.js).
   Pedido / mesa con un QR esperando el pago: TITILA en el color de Mercado Pago. Con el pago ya acreditado
   queda fijo en verde (falta entrar y cerrarlo). Solo tokens: se ve bien en claro y en oscuro. */

/* Late el BRILLO de la tarjeta/mesa (no se mueve nada: solo cambia el color, por eso sigue titilando
   aunque el sistema pida menos movimiento). */
@keyframes mpqr-titila {
    0%, 100% {
        box-shadow: 0 0 0 2px var(--acc-info), 0 0 22px 4px color-mix(in srgb, var(--acc-info) 60%, transparent);
    }
    50% {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc-info) 20%, transparent), 0 0 0 0 transparent;
    }
}
/* Filas de tabla (no dibujan box-shadow): late el fondo de sus celdas. */
@keyframes mpqr-fondo {
    0%, 100% { background-color: color-mix(in srgb, var(--acc-info) 22%, transparent); }
    50% { background-color: transparent; }
}
@keyframes mpqr-pulso {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.is-mpqr-esperando {
    animation: mpqr-titila 1s ease-in-out infinite;
}
/* Vista general en lista: la marca va en la FILA pero lo que se ve es la celda → late el fondo. (Sus
   tarjetas de petshop son las del Mostrador y usan las reglas de arriba.) */
tr.is-mpqr-esperando { animation: none; }
tr.is-mpqr-esperando > td { animation: mpqr-fondo 1s ease-in-out infinite; }
.is-mpqr-acreditado {
    box-shadow: 0 0 0 2px var(--acc-ok), 0 0 14px 2px color-mix(in srgb, var(--acc-ok) 45%, transparent);
}
tr.is-mpqr-acreditado { box-shadow: none; }
tr.is-mpqr-acreditado > td { background-color: var(--acc-ok-soft); }

/* Etiqueta en las tarjetas y filas de pedidos: en el color de Mercado Pago y titilando. */
.mpqr-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 4px 0;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--acc-info);
    background: color-mix(in srgb, var(--acc-info) 38%, transparent);
    color: var(--ink-900);
    font-size: 0.74rem;
    font-weight: 800;
    white-space: nowrap;
    animation: mpqr-pulso 1s ease-in-out infinite;
}
.mpqr-pill.is-ok {
    border-color: color-mix(in srgb, var(--acc-ok) 55%, transparent);
    background: var(--acc-ok-soft);
    color: var(--acc-ok);
    animation: none;
}

/* Fila de Mercado Pago en el detalle del cobro mientras el QR espera: se puede volver a ver el QR. */
.ci-mpqr-ver {
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--acc-info) 55%, transparent);
    background: var(--acc-info-soft);
    color: var(--acc-info);
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    animation: mpqr-pulso 1.1s ease-in-out infinite;
}
.ci-mpqr-ver:hover { background: color-mix(in srgb, var(--acc-info) 22%, transparent); }

/* Botón "Salir" del cartel del QR: cierra el pedido y el QR sigue esperando el pago. */
.mpqr-btn-salir {
    padding: 9px 20px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--acc-info) 50%, transparent);
    background: var(--acc-info-soft);
    color: var(--acc-info);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
}
.mpqr-btn-salir:hover { background: color-mix(in srgb, var(--acc-info) 22%, transparent); }