/* ============================================================================
   pos-v427.css · Polish UX/UI POS · V4.27.1
   
   Todos los overrides van acá para no tocar foundation-v2.css y poder revertir
   con facilidad. Cada bloque está marcado con el patch que lo crea.
   
   Filosofía: POS = herramienta de velocidad operativa, NO panel administrativo.
   Total siempre visible. Confirmar siempre visible. Mínimo scroll. Mínima carga visual.
   ============================================================================ */

/* ============================================================================
   PATCH 01 · Layout más denso · aprovecha 100% zoom
   ============================================================================ */

/* Header superior compacto: era ~60px, ahora ~36px */
.pos-cuadrado .pos-head-uni {
    min-height: 36px !important;
    padding: 6px 14px !important;
    margin-bottom: 8px !important;
}
.pos-cuadrado .pos-head-uni .pos-head-title {
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
}

/* Banner "SIGUIENTE PASO" mucho más fino · solo se muestra cuando hay items */
.pos-cuadrado .paso-guia {
    min-height: 28px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    margin-bottom: 6px !important;
}
.pos-cuadrado .paso-guia .sp-titulo {
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
}

/* Grid principal: columnas más balanceadas, menos margen */
.pos-cuadrado .pos-grid-cuadrado {
    gap: 10px !important;
    padding: 0 10px !important;
}

/* Columnas POS: izquierda más compacta, central más ancha, derecha también compacta */
@media (min-width: 1280px) {
    .pos-cuadrado .pos-grid-cuadrado {
        grid-template-columns: 290px minmax(0, 1fr) 290px !important;
    }
}
@media (min-width: 1600px) {
    .pos-cuadrado .pos-grid-cuadrado {
        grid-template-columns: 320px minmax(0, 1fr) 310px !important;
    }
}

/* Cada panel (card): bordes y sombras más sutiles, padding más compacto */
.pos-cuadrado .pos-grid-cuadrado > .pos-col {
    padding: 12px 14px !important;
    border-radius: 12px !important;
}

/* Reducir jerarquía visual de los headers internos · era 16px+sombra */
.pos-cuadrado .pos-col-h,
.pos-cuadrado .pos-section-h,
.pos-cuadrado .col-h {
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
}


/* ============================================================================
   PATCH 02 · Medios de pago COMPACTOS · era 90×80, ahora 60×56
   ============================================================================ */

.pos-cuadrado .mp-cards-grid,
.pos-cuadrado .mp-cards-grid-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 4px 0 !important;
}

.pos-cuadrado .mp-card {
    min-height: 60px !important;
    max-height: 60px !important;
    padding: 6px 4px !important;
    border-radius: 8px !important;
    border-width: 1.5px !important;
    box-shadow: none !important;
    transition: transform 140ms, border-color 140ms !important;
}
.pos-cuadrado .mp-card:hover { transform: translateY(-1px); }
.pos-cuadrado .mp-card .mp-card-ico {
    font-size: 18px !important;
    margin-bottom: 1px !important;
    line-height: 1 !important;
}
.pos-cuadrado .mp-card .mp-card-lbl {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    line-height: 1.1 !important;
}
.pos-cuadrado .mp-card .mp-card-badge {
    font-size: 9px !important;
    padding: 1px 5px !important;
    margin-top: 2px !important;
}
.pos-cuadrado .mp-card .mp-badge-none {
    /* el guión "—" cuando no hay badge ocupa espacio innecesario */
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* MIXTO sigue distintivo (violeta) pero del mismo tamaño */
.pos-cuadrado .mp-card-mixto {
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.04)) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}
.pos-cuadrado .mp-card-mixto.mp-card-on {
    border-color: rgba(139, 92, 246, 0.7) !important;
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.22), rgba(139, 92, 246, 0.08)) !important;
}

/* Label "FORMA DE PAGO *" más chico */
.pos-cuadrado .mp-label-pri {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 6px !important;
}


/* ============================================================================
   PATCH 03 · Total sticky en bloque de cobro · siempre visible
   ============================================================================ */

.pos-cobro-sticky-totales {
    position: sticky;
    bottom: 0;
    z-index: 50;
    background: linear-gradient(180deg, rgba(20, 23, 31, 0.96), rgba(15, 18, 24, 0.98));
    border-top: 1px solid rgba(34, 197, 94, 0.25);
    padding: 10px 12px;
    margin: 8px -10px -10px;
    border-radius: 0 0 12px 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}
.pos-cst-row {
    display: flex; align-items: baseline; justify-content: space-between;
    font-size: 12px;
    color: #a8aebc;
    line-height: 1.3;
}
.pos-cst-row + .pos-cst-row { margin-top: 2px; }
.pos-cst-row.pos-cst-desc { color: #4ade80; }
.pos-cst-row.pos-cst-rec  { color: #fb923c; }
.pos-cst-row .pos-cst-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.pos-cst-total {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed rgba(34, 197, 94, 0.2);
}
.pos-cst-total-lbl {
    font-size: 12px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}
.pos-cst-total-val {
    font-size: 26px;
    font-weight: 900;
    color: #4ade80;
    text-shadow: 0 0 18px rgba(74, 222, 128, 0.35);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.pos-cst-empty {
    display: flex; align-items: center; justify-content: center;
    color: #6a7283;
    font-size: 12px;
    padding: 10px 0;
    font-style: italic;
}


/* ============================================================================
   PATCH 04 · Carrito COMPACTO · de 110px → 56px por ítem
   ============================================================================ */

.pos-cuadrado .cart-card,
.pos-cuadrado .cart-card,
.pos-cuadrado .cart-card {
    min-height: 52px !important;
    max-height: 56px !important;
    padding: 6px 10px !important;
    display: grid !important;
    grid-template-columns: 110px minmax(0, 1fr) auto auto auto !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 8px !important;
    border-width: 1px !important;
    box-shadow: none !important;
}

/* Cantidad: stepper compacto */
.pos-cuadrado .cart-card .cart-cant,
.pos-cuadrado .cart-card .cart-cant,
.pos-cuadrado .cart-card .cart-cant {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    height: 32px !important;
}
.pos-cuadrado .cart-card .cart-cant-btn,
.pos-cuadrado .cart-card .cart-cant-btn,
.pos-cuadrado .cart-card .cart-cant-btn,
.pos-cuadrado .cart-card .cart-cant-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    padding: 0 !important;
    border-radius: 6px !important;
}
.pos-cuadrado .cart-card input.cart-cant-val.cart-cant-val,
.pos-cuadrado .cart-card .cart-cant-val,
.pos-cuadrado .cart-card input.cart-cant-val,
.pos-cuadrado .cart-card input.cart-cant-val {
    width: 36px !important;
    height: 28px !important;
    font-size: 13px !important;
    text-align: center !important;
    padding: 0 4px !important;
}

/* Nombre del producto: 1 línea con ellipsis */
.pos-cuadrado .cart-card .cart-nombre b,
.pos-cuadrado .cart-card .cart-nombre b,
.pos-cuadrado .cart-card .cart-nombre b,
.pos-cuadrado .cart-card .cart-nombre b {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #e6e9ef !important;
}

/* Código + categoría: línea pequeña gris */
.pos-cuadrado .cart-card .cart-meta,
.pos-cuadrado .cart-card .cart-meta,
.pos-cuadrado .cart-card .cart-meta,
.pos-cuadrado .cart-card .cart-meta {
    font-size: 10px !important;
    color: #6a7283 !important;
    letter-spacing: 0.02em !important;
    margin-top: 1px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* El recuadro vacío gris (placeholder de imagen?) - lo ocultamos */
.pos-cuadrado .cart-card .no-such,
.pos-cuadrado .cart-card .no-such {
    display: none !important;
}

/* Precio total: jerarquía clara, alineado derecha */
.pos-cuadrado .cart-card .cart-total,
.pos-cuadrado .cart-card .cart-total,
.pos-cuadrado .cart-card .cart-total {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #4ade80 !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1.1 !important;
}

/* Botón eliminar más chico */
.pos-cuadrado .cart-card .cart-x,
.pos-cuadrado .cart-card .cart-x,
.pos-cuadrado .cart-card .cart-x,
.pos-cuadrado .cart-card .cart-x {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    color: #fca5a5 !important;
}
.pos-cuadrado .cart-card .cart-x:hover,
.pos-cuadrado .cart-card .cart-x:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fff !important;
}

/* Carrito vacío más compacto */
.pos-cuadrado .carrito-empty,
.pos-cuadrado .vn-carrito-empty,
.pos-cuadrado .pos-carrito-empty {
    min-height: 80px !important;
    padding: 16px !important;
    font-size: 13px !important;
    color: #6a7283 !important;
}


/* ============================================================================
   PATCH 05 · Banner SIGUIENTE PASO · de 60px a 28px
   ============================================================================ */

.pos-cuadrado .paso-guia,
.pos-cuadrado .paso-guia,
.pos-cuadrado .paso-guia {
    min-height: 28px !important;
    padding: 5px 14px !important;
    margin: 4px 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    border-width: 1px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.pos-cuadrado .paso-guia .pa-icon,
.pos-cuadrado .paso-guia .sp-icon {
    font-size: 14px !important;
}
.pos-cuadrado .paso-guia .pa-titulo,
.pos-cuadrado .paso-guia .sp-titulo {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    font-weight: 800 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}
.pos-cuadrado .paso-guia .pa-msg,
.pos-cuadrado .paso-guia .sp-msg {
    font-size: 12px !important;
    color: #cbd5e1 !important;
}


/* ============================================================================
   PATCH 06 · Botones jerarquía · CONFIRMAR 75%, CANCELAR 25%
   ============================================================================ */

/* Footer fijo inferior · re-balanceamos las anchuras */
.pos-cuadrado .pos-footer-actions,
.pos-cuadrado .vn-footer-acciones,
.pos-cuadrado .vn-confirm-bar {
    display: grid !important;
    grid-template-columns: 1fr 3fr !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    align-items: stretch !important;
}

/* CANCELAR: más sobrio · rojo apagado · texto chico */
.pos-cuadrado .pos-footer-actions .btn-cancelar,
.pos-cuadrado .vn-footer-acciones .btn-cancelar,
.pos-cuadrado .vn-confirm-bar .btn-cancel {
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.65), rgba(99, 22, 22, 0.85)) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
}
.pos-cuadrado .pos-footer-actions .btn-cancelar:hover,
.pos-cuadrado .vn-footer-acciones .btn-cancelar:hover {
    background: linear-gradient(180deg, rgba(153, 27, 27, 0.85), rgba(127, 29, 29, 0.95)) !important;
    color: #fff !important;
}

/* CONFIRMAR: protagonista · gradient verde fuerte · texto grande */
.pos-cuadrado .pos-footer-actions .btn-confirmar,
.pos-cuadrado .vn-footer-acciones .btn-confirmar,
.pos-cuadrado .vn-confirm-bar .btn-confirm {
    background: linear-gradient(180deg, #22c55e, #15803d) !important;
    color: #fff !important;
    border: 0 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.pos-cuadrado .pos-footer-actions .btn-confirmar:hover {
    filter: brightness(1.08) !important;
}


/* ============================================================================
   PATCH 07 · Hint dinámico modal peso · más profesional
   ============================================================================ */

/* El modal de peso ya está OK estructuralmente, solo retocamos el hint
   y la jerarquía. El hint ya no es estático (se calcula en C# patch 07). */
.modal-peso-box .peso-hint {
    background: rgba(245, 166, 35, 0.08) !important;
    border-left: 3px solid rgba(245, 166, 35, 0.55) !important;
    padding: 8px 12px !important;
    border-radius: 0 6px 6px 0 !important;
    margin-top: 8px !important;
    font-size: 12px !important;
    color: #fde68a !important;
    line-height: 1.4 !important;
    font-variant-numeric: tabular-nums;
}

/* Total a cobrar más prominente · color verde gradient */
.modal-peso-box .peso-total {
    margin-top: 14px !important;
    padding: 14px 16px !important;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.04)) !important;
    border: 1px solid rgba(34, 197, 94, 0.25) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
}
.modal-peso-box .peso-total-lbl {
    font-size: 12px !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
}
.modal-peso-box .peso-total-val {
    font-size: 26px !important;
    font-weight: 900 !important;
    color: #4ade80 !important;
    text-shadow: 0 0 16px rgba(74, 222, 128, 0.3) !important;
    font-variant-numeric: tabular-nums !important;
}

/* Chips de gramos: más tap-friendly */
.modal-peso-box .peso-chips {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 6px !important;
    margin-top: 12px !important;
}
.modal-peso-box .peso-chip {
    padding: 10px 6px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #cbd5e1 !important;
    cursor: pointer !important;
    transition: all 140ms !important;
}
.modal-peso-box .peso-chip:hover,
.modal-peso-box .peso-chip:focus {
    background: rgba(245, 166, 35, 0.12) !important;
    border-color: rgba(245, 166, 35, 0.4) !important;
    color: #fde68a !important;
    transform: translateY(-1px) !important;
}

/* Botones del modal peso · jerarquía clara */
.modal-peso-box .peso-actions {
    display: grid !important;
    grid-template-columns: 1fr 2fr !important;
    gap: 10px !important;
    margin-top: 16px !important;
}
.modal-peso-box .peso-actions .btn-ghost {
    font-size: 13px !important;
    font-weight: 700 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
}
.modal-peso-box .peso-actions .btn-primary {
    font-size: 15px !important;
    font-weight: 900 !important;
    background: linear-gradient(180deg, #22c55e, #15803d) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3) !important;
    letter-spacing: 0.04em !important;
}


/* ============================================================================
   PATCH 08 · Plan Manolito BADGE · de bloque a una línea
   (BONUS: lo agrego porque es gratis con CSS y resuelve un reclamo claro)
   ============================================================================ */

.pos-cuadrado .plan-manolito-block,
.pos-cuadrado .pm-bloque-aviso {
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.pos-cuadrado .plan-manolito-block .pm-titulo,
.pos-cuadrado .pm-bloque-aviso .pm-titulo {
    font-size: 11px !important;
}


/* ============================================================================
   PATCH 09 · Reducir bordes/sombras pesadas en general
   ============================================================================ */

.pos-cuadrado .pos-grid-cuadrado .col-card,
.pos-cuadrado .pos-grid-cuadrado .pos-col {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    border-width: 1px !important;
}

/* Header de cada columna con underline más sutil */
.pos-cuadrado .col-h::after,
.pos-cuadrado .pos-col-h::after {
    opacity: 0.5 !important;
    height: 1px !important;
}


/* ============================================================================
   PATCH 10 · Más vendidos como accesos rápidos · más compactos
   ============================================================================ */

.pos-cuadrado .pos-section .pos-row {
    padding: 6px 8px !important;
    min-height: 36px !important;
    border-radius: 6px !important;
    margin-bottom: 2px !important;
}
.pos-cuadrado .pos-section .pos-row .pos-row-name {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}
.pos-cuadrado .pos-section .pos-row .pos-row-meta {
    font-size: 10px !important;
    margin-top: 1px !important;
}
.pos-cuadrado .pos-section .pos-row .pos-row-price {
    font-size: 13px !important;
    font-weight: 800 !important;
}


/* ============================================================================
   PATCH 11 · Responsive · al 100% zoom no debe scrollear
   ============================================================================ */

/* Asegurar que el shell del POS use solo el alto disponible · sin scroll page */
@media (min-height: 720px) {
    .pos-cuadrado .pos-shell.pos-cuadrado {
        max-height: calc(100dvh - 8px) !important;
        overflow: hidden !important;
    }
    .pos-cuadrado .pos-grid-cuadrado {
        max-height: calc(100dvh - 130px) !important;
        overflow: hidden !important;
    }
    .pos-cuadrado .pos-grid-cuadrado .pos-col {
        max-height: 100% !important;
        overflow-y: auto !important;
        scrollbar-width: thin !important;
    }
}

/* Fix para scrollbar más sutil en webkit */
.pos-cuadrado .pos-col::-webkit-scrollbar { width: 6px; }
.pos-cuadrado .pos-col::-webkit-scrollbar-track { background: transparent; }
.pos-cuadrado .pos-col::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
.pos-cuadrado .pos-col::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }