/* =========================================================
   POS y Nueva venta (ronda 5)
   ========================================================= */

/* POS: la tarjeta principal usa el alto disponible y el carrito crece con
   scroll interno (antes, en 1920px, quedaban ~600px vacíos abajo). */
@media (min-width: 901px) {
    .pos-main-card {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 150px);
        min-height: 520px;
    }
    .pos-main-card #pos-search-results {
        flex: 0 1 auto;
        max-height: 28vh !important;
    }
    .pos-main-card .pos-cart-list {
        flex: 1 1 auto;
        min-height: 160px;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 4px;
    }
}

.pos-cart-line.is-sin-stock {
    border-color: var(--danger, #d64545) !important;
    background: #fff7f7;
}
.pos-stock-aviso:empty { display: none; }

/* Nueva venta: combobox de cliente */
.client-input-wrap input#client-search {
    padding-right: 36px;
}
.client-clear-btn {
    position: absolute;
    right: 6px;
    top: 21px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.client-clear-btn:hover,
.client-clear-btn:focus-visible {
    background: #eef1f3;
    color: #1a2028;
}
.client-clear-btn[hidden] { display: none; }
#client-results .client-option { cursor: pointer; }
#client-results .client-option.is-active {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    background: #f0f8ff;
}

/* Modal "Agregar producto": stock disponible del producto elegido */
.sale-stock-info {
    font-size: 12px;
    margin: -4px 0 10px;
    min-height: 16px;
}
.sale-stock-info:empty { display: none; }

@media (prefers-color-scheme: dark) {
    .pos-cart-line.is-sin-stock { background: transparent; }
}

/* Si la columna del cliente es angosta, la lista no corta los nombres. */
#client-results { min-width: min(360px, 88vw); }