/* ============================================================================
   pos-v4273.css · POS Polish · CAPA 3 / 3 · prioridad BAJA
   
   Mejoras 16-25 del feedback original:
   16. Reducir scrolls internos
   17. Más vendidos · accesos rápidos efectivos (refinamiento)
   18. Buscador y escáner compactos
   19. Botón "PESO" más claro
   20. Modal peso · refinamiento final
   21. Vista compacta para ventas grandes
   22. "Ver completo" debe ser ayuda no necesidad
   23. Header superior más compacto (top-group del MainLayout)
   24. Barra resumen venta · más valor (medio de pago en la línea)
   25. POS con lógica de "operación de mostrador"
   
   Filosofía: pulido fino. NO toca lógica, solo CSS + 1 cambio HTML mínimo
   en la barra superior para mostrar el medio de pago en la misma línea.
   ============================================================================ */

/* ============================================================================
   PATCH 01 · Header SUPERIOR (MainLayout) más compacto
   ============================================================================ */

/* Reducir altura del header global · de ~50px a ~36px */
.top-bar,
.app-header,
header.app-top {
    min-height: 36px !important;
    padding: 4px 12px !important;
}

.top-group {
    gap: 4px !important;
    padding: 0 6px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.top-group:last-of-type {
    border-right: none !important;
}

.top-group .pill {
    padding: 1px 6px !important;
    font-size: 9px !important;
    letter-spacing: 0.06em !important;
    font-weight: 800 !important;
}
.top-group .pill-muted {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #94a3b8 !important;
}

.top-group .top-val {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #e6e9ef !important;
}
.top-group .top-val-nombre {
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

/* Botones del header (theme, escanear, novedades) más chicos */
.theme-toggle,
.btn-escanear-top,
.btn-novedades {
    padding: 4px 10px !important;
    font-size: 11px !important;
    height: 28px !important;
    border-radius: 6px !important;
}


/* ============================================================================
   PATCH 02 · Barra resumen de venta (pos-head-uni) · más valor
   ============================================================================ */

/* La barra superior del POS muestra venta+items+total+medio en una línea */
.pos-cuadrado .pos-head-uni {
    min-height: 42px !important;
    padding: 6px 14px !important;
    border-radius: 10px !important;
    margin-bottom: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    gap: 14px !important;
    align-items: center !important;
}

/* Izquierda · venta # + items */
.pos-cuadrado .pos-head-uni .phu-izq {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.pos-cuadrado .pos-head-uni .phu-vid {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    padding: 3px 8px !important;
    background: rgba(245, 166, 35, 0.12) !important;
    color: #fde68a !important;
    border-radius: 4px !important;
}
.pos-cuadrado .pos-head-uni .phu-items {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    letter-spacing: 0.04em !important;
}

/* Centro · total + pills */
.pos-cuadrado .pos-head-uni .phu-centro {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    overflow: hidden !important;
}
.pos-cuadrado .pos-head-uni .phu-total-wrap {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
}
.pos-cuadrado .pos-head-uni .phu-total-lbl {
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    color: #94a3b8 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}
.pos-cuadrado .pos-head-uni .phu-total {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #4ade80 !important;
    font-variant-numeric: tabular-nums !important;
    text-shadow: 0 0 12px rgba(74, 222, 128, 0.25) !important;
}
.pos-cuadrado .pos-head-uni .phu-empty {
    font-size: 12px !important;
    color: #6a7283 !important;
    font-style: italic !important;
}

/* Pills de descuento/recargo/redondeo · compactas */
.pos-cuadrado .pos-head-uni .phu-pills {
    display: inline-flex !important;
    gap: 4px !important;
}
.pos-cuadrado .pos-head-uni .phu-pill {
    font-size: 9px !important;
    padding: 1px 6px !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
}
.pos-cuadrado .pos-head-uni .phu-pill-desc {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #4ade80 !important;
}
.pos-cuadrado .pos-head-uni .phu-pill-rec {
    background: rgba(251, 146, 60, 0.18) !important;
    color: #fdba74 !important;
}
.pos-cuadrado .pos-head-uni .phu-pill-red {
    background: rgba(148, 163, 184, 0.18) !important;
    color: #cbd5e1 !important;
}

/* Medio de pago en barra superior (NUEVO · agregado por patch HTML) */
.pos-cuadrado .pos-head-uni .phu-medio {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 10px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    background: rgba(56, 189, 248, 0.15) !important;
    color: #7dd3fc !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

/* Derecha · turno + hora */
.pos-cuadrado .pos-head-uni .phu-der {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.pos-cuadrado .pos-head-uni .phu-turno {
    font-size: 10px !important;
    padding: 2px 8px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #cbd5e1 !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
}
.pos-cuadrado .pos-head-uni .phu-hora {
    font-size: 12px !important;
    color: #94a3b8 !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 700 !important;
}



/* Wrapper del medio de pago · entre centro y der */
.pos-cuadrado .pos-head-uni .phu-medio-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 6px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.pos-cuadrado .pos-head-uni .phu-medio-ico {
    font-size: 13px !important;
}
.pos-cuadrado .pos-head-uni .phu-medio-lbl {
    /* hereda de .phu-medio definido arriba */
}

/* ============================================================================
   PATCH 03 · Buscador y escáner · más compactos
   ============================================================================ */

/* Inputs del bloque escanear · padding reducido */
.pos-cuadrado .zona-busqueda input.pos-search-input,
.pos-cuadrado .zona-busqueda input.pos-codigo-input,
.pos-cuadrado .zona-busqueda input[type="search"],
.pos-cuadrado .zona-busqueda input[type="text"] {
    padding: 8px 12px !important;
    font-size: 13px !important;
    height: 38px !important;
    border-radius: 8px !important;
}

/* Selector de categorías */
.pos-cuadrado .zona-busqueda select {
    padding: 7px 10px !important;
    font-size: 12px !important;
    height: 36px !important;
    border-radius: 8px !important;
}

/* Botón PANTALLA · más compacto */
.pos-cuadrado .zona-busqueda .btn-pantalla,
.pos-cuadrado .zona-busqueda button[class*="btn-camera"],
.pos-cuadrado .zona-busqueda button[class*="pantalla"] {
    padding: 7px 12px !important;
    font-size: 11px !important;
    height: 36px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
}

/* Cantidad + Peso · una franja compacta */
.pos-cuadrado .zona-busqueda .cant-peso-row {
    margin-top: 6px !important;
}

/* Botón PESO · más visible y claro */
.pos-cuadrado .zona-busqueda .btn-peso,
.pos-cuadrado .zona-busqueda button[onclick*="peso" i],
.pos-cuadrado .zona-busqueda button[class*="peso"] {
    background: linear-gradient(180deg, rgba(245, 166, 35, 0.15), rgba(245, 166, 35, 0.06)) !important;
    border: 1.5px solid rgba(245, 166, 35, 0.4) !important;
    color: #fde68a !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    transition: all 140ms !important;
}
.pos-cuadrado .zona-busqueda .btn-peso:hover,
.pos-cuadrado .zona-busqueda button[class*="peso"]:hover {
    background: linear-gradient(180deg, rgba(245, 166, 35, 0.22), rgba(245, 166, 35, 0.10)) !important;
    border-color: rgba(245, 166, 35, 0.6) !important;
    transform: translateY(-1px) !important;
}


/* ============================================================================
   PATCH 04 · Reducir bordes pesados en general · pulido visual
   ============================================================================ */

/* Cada panel principal del POS · borde sutil unificado */
.pos-cuadrado .pos-grid-cuadrado > .pos-col {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: linear-gradient(180deg, rgba(20, 23, 31, 0.4), rgba(15, 18, 24, 0.6)) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Sub-blocks dentro de paneles · transparentes */
.pos-cuadrado .sub-block {
    background: transparent !important;
    border: none !important;
}

/* Botones secundarios con borde sutil */
.pos-cuadrado button.btn-ghost,
.pos-cuadrado button.btn-xs.btn-ghost {
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}


/* ============================================================================
   PATCH 05 · Reducir scrolls innecesarios · zonas críticas siempre visibles
   ============================================================================ */

/* La columna del medio (carrito + cobro) · scroll solo en carrito */
@media (min-height: 720px) {
    .pos-cuadrado .pos-grid-cuadrado .zona-carrito {
        max-height: 220px !important;
        overflow-y: auto !important;
    }
    .pos-cuadrado .pos-grid-cuadrado .zona-cobro {
        overflow: visible !important;
    }
}

/* Scrollbar estilizada en el carrito */
.pos-cuadrado .zona-carrito::-webkit-scrollbar { width: 6px; }
.pos-cuadrado .zona-carrito::-webkit-scrollbar-thumb {
    background: rgba(34, 197, 94, 0.3);
    border-radius: 3px;
}


/* ============================================================================
   PATCH 06 · Botón "Ver completo" · ayuda no necesidad
   ============================================================================ */

.pos-cuadrado .zona-carrito .btn-ver-completo,
.pos-cuadrado .zona-carrito button[onclick*="VerCompleto"],
.pos-cuadrado .zona-carrito button[class*="ver-completo"] {
    padding: 4px 10px !important;
    font-size: 10px !important;
    background: transparent !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    color: #4ade80 !important;
    border-radius: 4px !important;
}


/* ============================================================================
   PATCH 07 · Pills compactas finales · "x1 hoy" sin protagonismo
   ============================================================================ */

/* La pill amarilla "x1 hoy" en MÁS VENDIDOS · mucho más sutil */
.pos-cuadrado .zona-busqueda .pos-section .pos-row .pos-row-meta .chip-amarilla,
.pos-cuadrado .zona-busqueda .pos-section .pos-row .pos-row-meta .chip-x-hoy {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #6a7283 !important;
    font-size: 8px !important;
    padding: 0 4px !important;
    border-radius: 2px !important;
    letter-spacing: 0.02em !important;
}


/* ============================================================================
   PATCH 08 · Detalles finales · cohesión total
   ============================================================================ */

/* Transiciones suaves en TODOS los hoverables */
.pos-cuadrado button:not(.no-transition),
.pos-cuadrado .pos-row,
.pos-cuadrado .cart-card,
.pos-cuadrado .mp-card {
    transition: transform 140ms, background 140ms, border-color 140ms, color 140ms !important;
}

/* Focus rings unificados · naranja Manolito */
.pos-cuadrado input:focus,
.pos-cuadrado select:focus,
.pos-cuadrado textarea:focus {
    outline: none !important;
    border-color: rgba(245, 166, 35, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.12) !important;
}

/* Selección de texto · verde Manolito */
.pos-cuadrado ::selection {
    background: rgba(34, 197, 94, 0.35);
    color: #fff;
}