/* ======================================
   SUPERCLICK
   Alarma de pedido nuevo (empleado/gerente)
====================================== */

/* Abajo, no arriba: en el celular la parte de arriba de la pantalla
   choca con la barra de estado del sistema y es incómoda de alcanzar
   con el pulgar — abajo queda lejos de esa zona y es más fácil de
   silenciar rápido. */
.banner-alarma-pedidos {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9500;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--color-error);
    color: #ffffff;

    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);

    cursor: pointer;
    animation: alarma-pedidos-pulso 1.1s ease-in-out infinite;
}

.banner-alarma-pedidos:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -4px;
}

@keyframes alarma-pedidos-pulso {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.25); }
    50% { box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0); }
}

.banner-alarma-campana {
    font-size: 1.1rem;
    animation: alarma-pedidos-campanazo 0.5s ease-in-out infinite;
    transform-origin: top center;
}

@keyframes alarma-pedidos-campanazo {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-14deg); }
    75% { transform: rotate(14deg); }
}

.banner-alarma-texto {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 700;
}

.banner-alarma-mute {
    flex-shrink: 0;

    /* 44px: tamaño mínimo recomendado para que un dedo lo acierte
       sin apuntar con precisión — el anterior (30px) era el motivo
       real de que costara silenciarla. */
    width: 44px;
    height: 44px;

    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-size: 1.15rem;
    cursor: pointer;
}

.banner-alarma-mute:hover {
    background: rgba(255, 255, 255, 0.32);
}

.banner-alarma-mute:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .banner-alarma-pedidos,
    .banner-alarma-campana {
        animation: none;
    }
}

/* Tarjeta del pedido en el panel de empleado mientras suena la
   alarma — ver empleado.js, crearTarjetaPedido(). */
.pedido-empleado.pedido-sonando-alarma {
    border-color: var(--color-error) !important;
    animation: alarma-pedidos-borde 1.1s ease-in-out infinite;
}

@keyframes alarma-pedidos-borde {
    0%, 100% { box-shadow: 0 0 0 0 rgba(214, 48, 49, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(214, 48, 49, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .pedido-empleado.pedido-sonando-alarma {
        animation: none;
    }
}