/* ============================================================================
   V14.0 :: tanda-v140-componentes
   CSS de UpdateFab, CalculadorVueltoFlotante, BolsasInput
   + Fix responsive descompaginar al achicar
   + Compactar home (menos margen)
   ============================================================================ */

/* ════════════════════ UpdateFab (botón actualizar persistente) ════════════════════ */
.ufab {
    position: fixed;
    bottom: 18px;
    left: 18px;
    z-index: 9990;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    border: 2px solid rgba(59,130,246,0.6);
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    box-shadow:
        0 8px 22px rgba(37,99,235,0.40),
        0 0 0 0 rgba(37,99,235,0.50);
    transition: all 0.18s ease;
}
.ufab:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(37,99,235,0.55), 0 0 0 4px rgba(37,99,235,0.30);
}
.ufab-icon { font-size: 17px; }
.ufab-text { display: flex; flex-direction: column; line-height: 1.1; align-items: flex-start; }
.ufab-text b { font-size: 12px; letter-spacing: 0.4px; }
.ufab-sub { font-size: 9px; color: rgba(255,255,255,0.75); font-weight: 500; }

/* MODO "novedad detectada" - rojo intenso, pulse molesto sin tapar operación */
.ufab-nueva {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    border-color: rgba(239,68,68,0.7);
    animation: ufab-attention 1.4s ease-in-out infinite;
}
@keyframes ufab-attention {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 22px rgba(239,68,68,0.50), 0 0 0 0 rgba(239,68,68,0.60);
    }
    50% {
        transform: scale(1.06);
        box-shadow: 0 14px 36px rgba(239,68,68,0.70), 0 0 0 10px rgba(239,68,68,0);
    }
}
@media (max-width: 600px) {
    .ufab { bottom: 76px; left: 12px; padding: 10px 14px; font-size: 11px; }
    .ufab-text b { font-size: 11px; }
    .ufab-sub { display: none; }
}

/* ════════════════════ CalculadorVueltoFlotante (draggable) ════════════════════ */
.cvf {
    position: fixed;
    z-index: 9985;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: linear-gradient(180deg, rgba(15,23,42,0.97), rgba(11,17,32,1));
    border: 1.5px solid rgba(34,197,94,0.45);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
    overflow: hidden;
    user-select: none;
    display: none;
}
.cvf-visible { display: block; animation: cvf-in 0.20s ease-out; }
@keyframes cvf-in {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cvf-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(90deg, rgba(34,197,94,0.18) 0%, rgba(22,163,74,0.10) 100%);
    border-bottom: 1px solid rgba(34,197,94,0.30);
    cursor: move;
}
.cvf-grip { color: #64748b; font-size: 14px; cursor: move; }
.cvf-title { flex: 1; font-size: 13px; font-weight: 700; color: #86efac; }
.cvf-close {
    background: rgba(220,38,38,0.20);
    border: 1px solid rgba(220,38,38,0.40);
    color: #fca5a5;
    width: 26px; height: 26px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}
.cvf-close:hover { background: rgba(220,38,38,0.40); color: white; }

.cvf-body { padding: 14px; }

.cvf-total-row, .cvf-paga-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
}
.cvf-lbl { font-size: 11px; color: #94a3b8; }
.cvf-total-val { font-size: 17px; font-weight: 800; color: #4ade80; }
.cvf-input {
    width: 130px;
    padding: 8px 12px;
    background: rgba(15,23,42,0.85);
    border: 1.5px solid rgba(34,197,94,0.40);
    color: white;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    text-align: right;
    outline: none;
}
.cvf-input:focus { border-color: rgba(34,197,94,0.8); box-shadow: 0 0 0 3px rgba(34,197,94,0.20); }

.cvf-sugs { margin: 12px 0; }
.cvf-sugs-lbl { font-size: 10px; color: #c7d2fe; margin-bottom: 6px; letter-spacing: 0.3px; text-transform: uppercase; }
.cvf-sugs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cvf-sug {
    padding: 8px 6px;
    background: rgba(99,102,241,0.12);
    border: 1px solid rgba(99,102,241,0.35);
    color: #c7d2fe;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.12s;
}
.cvf-sug:hover { background: rgba(99,102,241,0.30); transform: translateY(-1px); }
.cvf-sug.active {
    background: rgba(99,102,241,0.50);
    border-color: rgba(165,180,252,0.80);
    color: white;
    box-shadow: 0 0 0 2px rgba(99,102,241,0.30);
}

.cvf-vuelto-display {
    margin-top: 10px;
    padding: 14px;
    background: rgba(15,23,42,0.70);
    border: 1.5px solid rgba(99,102,241,0.30);
    border-radius: 10px;
    text-align: center;
    transition: all 0.2s;
}
.cvf-vuelto-display.exacto   { border-color: rgba(34,197,94,0.50);  background: rgba(34,197,94,0.08); }
.cvf-vuelto-display.ok       { border-color: rgba(34,197,94,0.50);  background: rgba(34,197,94,0.08); }
.cvf-vuelto-display.negativo { border-color: rgba(239,68,68,0.50);  background: rgba(239,68,68,0.08); }
.cvf-v-lbl { font-size: 11px; color: #94a3b8; margin-bottom: 4px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.cvf-v-monto { font-size: 26px; font-weight: 900; color: #86efac; }
.cvf-vuelto-display.negativo .cvf-v-monto { color: #fca5a5; }
.cvf-vuelto-display.exacto .cvf-v-monto { color: #fbbf24; }

@media (max-width: 600px) {
    .cvf { width: calc(100vw - 24px); }
}

/* ════════════════════ BolsasInput (casilla obligatoria) ════════════════════ */
.bolsas-input-wrap {
    margin: 10px 0;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(99,102,241,0.06), transparent);
    border: 1.5px solid rgba(99,102,241,0.30);
    border-radius: 10px;
}
.bi-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.bi-icon { font-size: 18px; }
.bi-title { flex: 1; font-size: 13px; color: #c7d2fe; font-weight: 600; }
.bi-required {
    background: rgba(239,68,68,0.15);
    color: #fca5a5;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.3px;
    border: 1px solid rgba(239,68,68,0.40);
    animation: bi-pulse 1.6s ease-in-out infinite;
}
@keyframes bi-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.bi-ok {
    background: rgba(34,197,94,0.20);
    color: #86efac;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    border: 1px solid rgba(34,197,94,0.40);
}

.bi-row { display: flex; align-items: center; gap: 10px; }
.bi-cant-wrap {
    display: flex;
    align-items: center;
    background: rgba(15,23,42,0.7);
    border-radius: 8px;
    overflow: hidden;
    border: 1.5px solid rgba(99,102,241,0.40);
}
.bi-btn-min {
    background: rgba(99,102,241,0.20);
    color: #c7d2fe;
    border: none;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 800;
    transition: background 0.12s;
}
.bi-btn-min:hover:not(:disabled) { background: rgba(99,102,241,0.45); color: white; }
.bi-btn-min:disabled { opacity: 0.40; cursor: not-allowed; }
.bi-input {
    width: 60px;
    padding: 8px;
    background: transparent;
    border: none;
    color: white;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    outline: none;
}
.bi-suffix { font-size: 12px; color: #94a3b8; }

.bi-no-entregue {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(245,158,11,0.10);
    border: 1px solid rgba(245,158,11,0.35);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    color: #fde68a;
    font-size: 12px;
    font-weight: 600;
}
.bi-no-entregue input[type="checkbox"] {
    width: 16px; height: 16px; cursor: pointer; accent-color: #f59e0b;
}
.bi-warn {
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(239,68,68,0.10);
    border-left: 3px solid rgba(239,68,68,0.50);
    color: #fca5a5;
    font-size: 11px;
    border-radius: 4px;
}
.bi-tip {
    margin-top: 6px;
    font-size: 10px;
    color: #86efac;
    font-style: italic;
}

/* ════════════════════ FIX RESPONSIVE: descompaginar al achicar ════════════════════ */
/* El bug "se mueven items y hay que reiniciar página" es causado por:
   - Layout grid que no se recalcula bien al cambiar viewport
   - position fixed/sticky elements sin window.resize handler
   Forzamos reflow CSS-only con CSS containment y min-width sensatos */

html, body {
    min-width: 320px; /* nunca menos que esto, evita rotura grave */
    overflow-x: hidden; /* prevenir scroll horizontal indeseado */
}

/* Containment CSS para que el navegador recalcule layout subtree-only */
.zona-carrito, .zona-cobro, .pos-col, .centro-col {
    contain: layout style;
}

/* Grid del POS: si la pantalla baja de 900px, columna única */
.pos-grid, .pos-cols-3 {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.4fr) minmax(280px, 1fr);
    gap: 14px;
    max-width: 100vw;
}
@media (max-width: 1100px) {
    .pos-grid, .pos-cols-3 {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════ COMPACTAR HOME (menos margen) ════════════════════ */
@media (min-width: 1024px) {
    body .menu-page-wrap,
    body .home-page-wrap,
    body .menu-content,
    body main.app-main {
        padding: 16px 22px !important;
        max-width: 1640px;
        margin: 0 auto;
    }
    body .menu-grid,
    body .menu-modules-grid {
        gap: 10px !important;
    }
    body .menu-card,
    body .module-card {
        padding: 14px 16px !important;
    }
}

/* ════════════════════ BOTÓN PÉRDIDA FLOTANTE en POS ════════════════════ */
.pos-perdida-fab {
    position: fixed;
    bottom: 90px;
    right: 18px;
    z-index: 9980;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: 2px solid rgba(245,158,11,0.6);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(245,158,11,0.45);
    transition: all 0.18s;
}
.pos-perdida-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(245,158,11,0.60);
}
.pos-perdida-fab.activa {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    border-color: rgba(239,68,68,0.7);
    animation: pos-perdida-pulse 1.4s ease-in-out infinite;
}
@keyframes pos-perdida-pulse {
    0%, 100% { box-shadow: 0 8px 22px rgba(239,68,68,0.50); }
    50%      { box-shadow: 0 14px 32px rgba(239,68,68,0.75); }
}

/* Botón flotante para abrir calculadora vuelto */
.pos-vuelto-fab {
    position: fixed;
    bottom: 90px;
    right: 175px;
    z-index: 9980;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: white;
    border: 2px solid rgba(34,197,94,0.6);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(34,197,94,0.40);
    transition: all 0.18s;
}
.pos-vuelto-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(34,197,94,0.55);
}

@media (max-width: 600px) {
    .pos-perdida-fab { right: 12px; bottom: 80px; padding: 10px 12px; font-size: 11px; }
    .pos-vuelto-fab { right: 12px; bottom: 140px; padding: 10px 12px; font-size: 11px; }
}