/* ============================================================
   pos.css - Punto de Venta (POS)
   Layout de caja registradora: búsqueda + carrito + pago
   Colores: brand-primary #084734, brand-accent #93C11F
   ============================================================ */

.pos-root { padding: 0; display: flex; flex-direction: column; height: calc(100vh - 140px); min-height: 500px; }

/* Header compact – verde marca */
.pos-header {
  background: linear-gradient(135deg, #042e22, #084734 50%, #0d6b4f);
  color: #fff; border-radius: 12px; padding: .8rem 1.2rem;
  display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; flex-shrink: 0;
}
.pos-header__icon { font-size: 1.5rem; }
.pos-header__title { font-size: 1.1rem; font-weight: 700; }
.pos-header__sub { font-size: .75rem; opacity: .9; color: #CEF431; }
.pos-header__cliente {
  margin-left: auto; display: flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.15); padding: .4rem .8rem; border-radius: 8px;
  font-size: .8rem; cursor: pointer; border: 1px solid rgba(255,255,255,.25);
  transition: background .15s;
}
.pos-header__cliente:hover { background: rgba(255,255,255,.25); }

/* Main layout */
.pos-body { display: grid; grid-template-columns: 1fr 380px; gap: .75rem; flex: 1; min-height: 0; }

/* Left: search + results */
.pos-left { display: flex; flex-direction: column; min-height: 0; }

.pos-search-bar {
  display: flex; gap: .5rem; margin-bottom: .75rem; flex-shrink: 0;
}
.pos-search-input {
  flex: 1; padding: .65rem 1rem .65rem 2.5rem; border: 2px solid var(--brand-primary);
  border-radius: 8px; font-size: 1rem; outline: none;
  background: var(--brand-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%236b7280' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") no-repeat 10px center;
  background-size: 16px;
}
.pos-search-input:focus { border-color: #065f46; box-shadow: 0 0 0 3px rgba(8,71,52,.15); }

.pos-products-grid {
  flex: 1; overflow-y: auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .5rem; align-content: start;
}

.pos-product-card {
  background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 8px;
  padding: .75rem; cursor: pointer; transition: all .15s;
  display: flex; flex-direction: column; gap: .25rem;
}
.pos-product-card:hover { border-color: var(--brand-primary); box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
.pos-product-card__name { font-size: .82rem; font-weight: 600; color: var(--brand-text); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pos-product-card__ref { font-size: .7rem; color: var(--brand-text-muted); }
.pos-product-card__bottom { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.pos-product-card__price { font-size: .95rem; font-weight: 800; color: var(--brand-primary); }
.pos-product-card__stock { font-size: .68rem; color: var(--brand-text-muted); }

.pos-empty { text-align: center; padding: 3rem 1rem; color: var(--brand-text-muted); }
.pos-empty i { font-size: 2.5rem; margin-bottom: .5rem; display: block; opacity: .4; }
.pos-empty p { font-size: .85rem; }

/* Right: cart + totals + payment */
.pos-right {
  display: flex; flex-direction: column; background: var(--brand-surface);
  border: 1px solid var(--brand-border); border-radius: 12px;
  min-height: 0;
}

.pos-cart-title {
  padding: .75rem 1rem; border-bottom: 1px solid var(--brand-border);
  font-size: .9rem; font-weight: 700; display: flex; align-items: center; gap: .5rem;
  flex-shrink: 0;
}
.pos-cart-badge {
  background: var(--brand-primary); color: #fff; font-size: .7rem;
  padding: .1rem .45rem; border-radius: 10px; font-weight: 700;
}

.pos-cart-items { flex: 1; overflow-y: auto; padding: .5rem; }

.pos-cart-item {
  display: flex; align-items: center; gap: .5rem; padding: .5rem;
  border-bottom: 1px solid var(--brand-border-light, #f3f4f6);
}
.pos-cart-item__info { flex: 1; min-width: 0; }
.pos-cart-item__name { font-size: .78rem; font-weight: 600; color: var(--brand-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-cart-item__price { font-size: .7rem; color: var(--brand-text-muted); }
.pos-cart-item__qty {
  display: flex; align-items: center; gap: .25rem;
}
.pos-cart-qty-btn {
  width: 24px; height: 24px; border: 1px solid var(--brand-border); border-radius: 4px;
  background: var(--brand-surface); cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: .75rem; color: var(--brand-text);
  transition: all .15s;
}
.pos-cart-qty-btn:hover { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.pos-cart-qty-val { width: 28px; text-align: center; font-size: .82rem; font-weight: 700; }
.pos-cart-item__total { font-size: .82rem; font-weight: 700; color: var(--brand-text); min-width: 70px; text-align: right; }
.pos-cart-item__del {
  width: 22px; height: 22px; border: none; background: transparent;
  color: #dc2626; cursor: pointer; font-size: .75rem; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.pos-cart-item__del:hover { background: #fee2e2; }

.pos-cart-empty { text-align: center; padding: 2rem 1rem; color: var(--brand-text-muted); font-size: .82rem; }

/* Totals */
.pos-totals {
  padding: .75rem 1rem; border-top: 1px solid var(--brand-border);
  flex-shrink: 0; font-size: .82rem;
}
.pos-totals-row { display: flex; justify-content: space-between; padding: .2rem 0; }
.pos-totals-row--total { font-size: 1.15rem; font-weight: 800; color: var(--brand-primary); padding-top: .4rem; border-top: 2px solid var(--brand-border); margin-top: .3rem; }

/* Forma pago */
.pos-payment { padding: .75rem 1rem; border-top: 1px solid var(--brand-border); flex-shrink: 0; }
.pos-payment-methods {
  display: flex; gap: .35rem; margin-bottom: .5rem;
}
.pos-pay-btn {
  flex: 1; padding: .45rem; border: 1px solid var(--brand-border); border-radius: 8px;
  background: var(--brand-surface); cursor: pointer; text-align: center;
  font-size: .72rem; display: flex; flex-direction: column; align-items: center;
  gap: .15rem; transition: all .15s; color: var(--brand-text);
}
.pos-pay-btn:hover, .pos-pay-btn--active { border-color: var(--brand-primary); color: var(--brand-primary); background: rgba(8,71,52,.06); }
.pos-pay-btn--active { font-weight: 700; box-shadow: 0 0 0 2px rgba(8,71,52,.15); }
.pos-pay-btn i { font-size: 1rem; }

.pos-recibido-wrap { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.pos-recibido-lbl { font-size: .78rem; color: var(--brand-text-muted); white-space: nowrap; }
.pos-recibido-input {
  flex: 1; padding: .4rem .6rem; border: 1px solid var(--brand-border);
  border-radius: 8px; text-align: right; font-size: .9rem; font-weight: 700;
}
.pos-cambio { font-size: .82rem; color: #16a34a; font-weight: 700; text-align: right; }

.pos-action-bar { padding: .75rem 1rem; border-top: 1px solid var(--brand-border); flex-shrink: 0; }
.pos-btn-cobrar {
  width: 100%; padding: .75rem; border: none; border-radius: 8px;
  background: var(--brand-primary); color: #fff; font-size: 1rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem;
  transition: all .15s;
}
.pos-btn-cobrar:hover { opacity: .9; transform: translateY(-1px); }
.pos-btn-cobrar:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.pos-btn-limpiar {
  width: 100%; margin-top: .4rem; padding: .4rem; border: 1px solid var(--brand-border);
  border-radius: 8px; background: var(--brand-surface); color: var(--brand-text-muted);
  font-size: .75rem; cursor: pointer; transition: all .15s;
}
.pos-btn-limpiar:hover { border-color: #dc2626; color: #dc2626; }

/* Ticket modal */
.pos-ticket-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.pos-ticket-modal {
  background: #fff; border-radius: 12px; padding: 2rem;
  min-width: 340px; max-width: 420px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.pos-ticket-icon { font-size: 3rem; color: #22c55e; margin-bottom: .5rem; }
.pos-ticket-num { font-size: 1.5rem; font-weight: 800; color: var(--brand-text); margin-bottom: .25rem; }
.pos-ticket-total { font-size: 1.1rem; color: var(--brand-text-muted); margin-bottom: 1rem; }
.pos-ticket-cambio { font-size: 1.2rem; font-weight: 700; color: #16a34a; margin-bottom: 1rem; }
.pos-ticket-btns { display: flex; gap: .5rem; justify-content: center; }
.pos-ticket-btn {
  padding: .5rem 1.5rem; border-radius: 8px; cursor: pointer;
  font-size: .85rem; font-weight: 600; transition: all .15s;
}
.pos-ticket-btn--primary { background: var(--brand-primary); color: #fff; border: none; }
.pos-ticket-btn--secondary { background: transparent; color: var(--brand-text); border: 1px solid var(--brand-border); }
.pos-ticket-btn:hover { opacity: .85; }

/* Cliente search modal */
.pos-cli-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 999; display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; }
.pos-cli-modal { background: #fff; border-radius: 12px; padding: 1.5rem; min-width: 400px; max-width: 500px; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.pos-cli-modal__title { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; }
.pos-cli-input { width: 100%; padding: .5rem .75rem; border: 1px solid var(--brand-border); border-radius: 8px; margin-bottom: .5rem; font-size: .85rem; }
.pos-cli-list { max-height: 250px; overflow-y: auto; }
.pos-cli-item { padding: .5rem; border-bottom: 1px solid var(--brand-border-light, #f3f4f6); cursor: pointer; border-radius: 8px; }
.pos-cli-item:hover { background: rgba(8,71,52,.06); }
.pos-cli-item__name { font-size: .82rem; font-weight: 600; }
.pos-cli-item__id { font-size: .72rem; color: var(--brand-text-muted); }

/* Responsive */
@media (max-width: 900px) {
  .pos-body { grid-template-columns: 1fr; }
  .pos-right { max-height: 50vh; }
  .pos-root { height: auto; min-height: auto; }
}
@media (max-width: 600px) {
  .pos-products-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pos-header { flex-wrap: wrap; }
  .pos-header__cliente { margin-left: 0; width: 100%; justify-content: center; }
}