/* tanda-w5-rec-3col :: 3 columnas verticales en modal recomendaciones */
.recpc-secs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.recpc-secs-grid > .recpc-section{margin:0}
@media (max-width:920px){
    .recpc-secs-grid{grid-template-columns:1fr;gap:10px}
}

/* Modal mas ancho cuando esta en 3 columnas (en desktop) */
@media (min-width:921px){
    .modal.modal-recpc{max-width:1200px !important;width:96vw !important}
}

/* Items dentro de cada columna mas compactos */
.recpc-secs-grid .recpc-item{padding:10px 12px}
.recpc-secs-grid .recpc-item-nombre{font-size:13px}
.recpc-secs-grid .recpc-item-arg{font-size:11px;padding:3px 7px;margin-bottom:4px}
.recpc-secs-grid .recpc-item-prob{font-size:11px}
.recpc-secs-grid .recpc-item-precio{font-size:13px;font-weight:700}
.recpc-secs-grid .recpc-sec-head{padding:10px 12px}
.recpc-secs-grid .recpc-sec-tit{font-size:13px}


/* ============================================================================
   tanda-a-bugs-popstate-modal :: Modal simple "¿Salir del POS?"
   Aparece cuando el usuario aprieta atrás del browser y el carrito está vacío.
   Diseño minimalista, no invasivo, fácil de cerrar.
   ============================================================================ */
.mpos-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10080;
    backdrop-filter: blur(2px);
}
.mpos-modal {
    position: fixed; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10081;
    width: min(440px, 92vw);
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    padding: 20px;
    animation: mposIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mposIn {
    from { opacity: 0; transform: translate(-50%, -46%) scale(0.95); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.mpos-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.mpos-emoji { font-size: 38px; line-height: 1; }
.mpos-titles { flex: 1; }
.mpos-tit { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.mpos-sub { font-size: 13px; color: #9aa5b4; margin-top: 2px; }
.mpos-body { font-size: 14px; line-height: 1.55; color: #cbd5e1; margin-bottom: 18px; }
.mpos-body p { margin: 0; }
.mpos-acts { display: flex; gap: 10px; justify-content: flex-end; }
.mpos-acts .btn { padding: 10px 18px; font-size: 14px; min-height: 44px; }
@media (max-width: 480px) {
    .mpos-modal { padding: 16px; }
    .mpos-acts { flex-direction: column-reverse; }
    .mpos-acts .btn { width: 100%; }
}