/* *
 * APESTORE - Estilos del Punto de Venta */

/* Cajero info en topbar */

.pos-caja-info {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-texto-secundario);
  background: var(--color-fondo);
  padding: 0.5rem 0.85rem;
  border-radius: var(--radio-md);
  border: 1px solid var(--color-borde);
}

.pos-caja-info strong {
  color: var(--color-texto);
}

/* Layout general del POS */

.pos-layout {
  display: flex;
  gap: var(--espaciado-lg);
  padding: var(--espaciado-lg) var(--espaciado-xl);
  align-items: flex-start;
}

.pos-productos {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-md);
}

.pos-checkout {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-md);
  position: sticky;
  top: 90px;
}

/* ===== Barra de escaneo / búsqueda ===== */

.pos-scan-bar {
  position: relative;
}

.pos-scan-input {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-blanco);
  border: 2px solid var(--color-primario);
  border-radius: var(--radio-lg);
  padding: 0.35rem 1rem;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.12);
}

.pos-scan-hint {
  margin-left: auto;
  color: var(--color-texto-secundario);
  font-size: 0.72rem;
  white-space: nowrap;
}

.pos-resultados {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.45rem);
  left: 0;
  right: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-lg);
}

.pos-resultado-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--color-borde);
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.pos-resultado-item:last-child { border-bottom: 0; }
.pos-resultado-item:hover { background: #f5f7ff; }
.pos-resultado-info, .pos-resultado-precio { display: flex; flex-direction: column; gap: 0.2rem; }
.pos-resultado-info strong { color: var(--color-texto); font-size: 0.88rem; }
.pos-resultado-info span, .pos-resultado-stock { color: var(--color-texto-secundario); font-size: 0.74rem; }
.pos-resultado-precio { align-items: flex-end; color: var(--color-primario); }
.pos-resultado-vacio { padding: 1rem; color: var(--color-texto-secundario); text-align: center; font-size: 0.85rem; }

.pos-client-search { margin-bottom: 0.75rem; }
.pos-cliente-opcion { width: 100%; background: #fff; text-align: left; }
.pos-cliente-opcion > span { display: flex; flex-direction: column; gap: 0.2rem; }

.pos-scan-input i {
  color: var(--color-primario);
  font-size: 1.35rem;
}

.pos-scan-input input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.85rem 0;
  font-size: 1.05rem;
  font-family: inherit;
  background: transparent;
  color: var(--color-texto);
}

.pos-scan-hint {
  font-size: 0.72rem;
  color: var(--color-texto-secundario);
  background: var(--color-fondo);
  padding: 0.25rem 0.55rem;
  border-radius: var(--radio-sm);
  white-space: nowrap;
}

/* Resultados de búsqueda (dropdown) */

.pos-resultados {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-lg);
  max-height: 340px;
  overflow-y: auto;
  z-index: 60;
}

.pos-resultado-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--color-fondo);
  transition: background var(--transicion-rapida);
}

.pos-resultado-item:last-child {
  border-bottom: none;
}

.pos-resultado-item:hover, .pos-resultado-item.activo {
  background: rgba(79, 70, 229, 0.07);
}

.pos-resultado-item.sin-stock {
  opacity: 0.55;
  cursor: not-allowed;
}

.pos-resultado-info {
  min-width: 0;
}

.pos-resultado-info strong {
  display: block;
  font-size: 0.92rem;
  color: var(--color-texto);
}

.pos-resultado-info span {
  font-size: 0.78rem;
  color: var(--color-texto-secundario);
}

.pos-resultado-precio {
  text-align: right;
  white-space: nowrap;
}

.pos-resultado-precio b {
  color: var(--color-primario);
  font-size: 0.95rem;
}

.pos-resultado-precio .promo-tag {
  display: inline-block;
  font-size: 0.68rem;
  background: var(--color-acento);
  color: #fff;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  margin-left: 0.3rem;
}

.pos-resultado-stock {
  font-size: 0.72rem;
  color: var(--color-texto-secundario);
}

.pos-resultado-vacio {
  padding: 1rem;
  text-align: center;
  color: var(--color-texto-secundario);
  font-size: 0.85rem;
}

/* ===== Carrito ===== */

.pos-cart-card {
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 320px;
}

.pos-cart-head, .pos-cart-row {
  display: grid;
  grid-template-columns: 1fr 90px 116px 80px 100px 40px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
}

.pos-cart-head {
  background: var(--color-gris-claro);
  border-bottom: 1px solid var(--color-borde);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-texto-secundario);
}

.col-precio, .col-cant, .col-importe, .col-accion {
  text-align: center;
}

.pos-cart-head .col-importe {
  text-align: right;
}

.pos-cart-body {
  flex: 1;
  overflow-y: auto;
  max-height: 46vh;
}

.pos-cart-row {
  border-bottom: 1px solid var(--color-fondo);
}

.pos-cart-row:hover {
  background: var(--color-gris-claro);
}

.cart-prod-nombre {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-texto);
}

.cart-prod-cod {
  font-size: 0.74rem;
  color: var(--color-texto-secundario);
}

.cart-precio {
  text-align: center;
  font-size: 0.9rem;
}

.cart-precio .precio-original {
  display: block;
  font-size: 0.72rem;
  color: var(--color-texto-secundario);
  text-decoration: line-through;
}

.cart-precio .promo {
  color: var(--color-acento);
  font-weight: 700;
}

.cart-cant {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.cart-cant button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-borde);
  background: var(--color-blanco);
  border-radius: var(--radio-sm);
  cursor: pointer;
  color: var(--color-primario);
  font-size: 0.8rem;
  transition: all var(--transicion-rapida);
}

.cart-cant button:hover {
  background: var(--color-primario);
  color: #fff;
}

.cart-cant input {
  width: 44px;
  text-align: center;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  padding: 0.3rem 0;
  font-family: inherit;
  font-size: 0.9rem;
}

.cart-desc input {
  width: 100%;
  text-align: center;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  padding: 0.35rem 0.2rem;
  font-family: inherit;
  font-size: 0.85rem;
}

.cart-importe {
  text-align: right;
  font-weight: 700;
  color: var(--color-texto);
  font-size: 0.92rem;
}

.cart-quitar {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-peligro);
  font-size: 0.95rem;
  width: 32px;
  height: 32px;
  border-radius: var(--radio-sm);
  transition: background var(--transicion-rapida);
}

.cart-quitar:hover {
  background: rgba(239, 68, 68, 0.1);
}

.pos-cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--color-texto-secundario);
}

.pos-cart-empty i {
  font-size: 2.75rem;
  color: var(--color-gris-medio);
}

.pos-cart-empty p {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-texto);
}

.pos-cart-empty span {
  font-size: 0.82rem;
}

.pos-cart-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--color-borde);
  background: var(--color-gris-claro);
  font-size: 0.82rem;
  color: var(--color-texto-secundario);
}

.btn-link-danger {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-peligro);
  font-weight: 600;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.btn-link-danger:hover {
  text-decoration: underline;
}

/* ===== Paneles de checkout ===== */

.pos-panel {
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  padding: var(--espaciado-md) var(--espaciado-lg);
}

.pos-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-texto-secundario);
  margin-bottom: 0.75rem;
}

.pos-panel-title i {
  color: var(--color-primario);
  margin-right: 0.3rem;
}

.pos-mini-btn {
  border: 1px solid var(--color-primario);
  background: transparent;
  color: var(--color-primario);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radio-sm);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: all var(--transicion-rapida);
}

.pos-mini-btn:hover {
  background: var(--color-primario);
  color: #fff;
}

.pos-cliente {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pos-cliente-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primario), var(--color-primario-claro));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.pos-cliente-info {
  min-width: 0;
}

.pos-cliente-info strong {
  display: block;
  font-size: 0.92rem;
  color: var(--color-texto);
}

.pos-cliente-info span {
  font-size: 0.78rem;
  color: var(--color-texto-secundario);
}

.pos-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pos-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-texto);
}

.pos-select, .pos-input-money input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio-md);
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--color-fondo);
}

.pos-select:focus, .pos-input-money input:focus {
  outline: none;
  border-color: var(--color-primario);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.pos-input-money {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio-md);
  background: var(--color-fondo);
  overflow: hidden;
}

.pos-input-money:focus-within {
  border-color: var(--color-primario);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(79, 70, 229,0.1);
}

.pos-input-money span {
  padding: 0 0.6rem;
  color: var(--color-texto-secundario);
  font-weight: 700;
  font-size: 0.95rem;
  border-right: 1px solid var(--color-borde);
}

.pos-input-money input {
  border: none;
  background: transparent;
  box-shadow: none;
}

.pos-input-money input:focus {
  box-shadow: none;
}

.pos-quick-cash {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0;
}

.pos-quick-cash button {
  flex: 1;
  min-width: 60px;
  border: 1px solid var(--color-borde);
  background: var(--color-fondo);
  border-radius: var(--radio-sm);
  padding: 0.45rem 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-texto);
  transition: all var(--transicion-rapida);
}

.pos-quick-cash button:hover {
  border-color: var(--color-primario);
  color: var(--color-primario);
}

.pos-vuelto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  margin-top: 0.4rem;
  background: rgba(34, 139, 87, 0.08);
  border-radius: var(--radio-md);
}

.pos-vuelto span {
  font-size: 0.85rem;
  color: var(--color-texto-secundario);
  font-weight: 600;
}

.pos-vuelto strong {
  font-size: 1.15rem;
  color: var(--color-acento-oscuro);
}

/* Totales */

.pos-totales {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pos-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--color-texto-secundario);
}

.pos-total-row span:last-child {
  color: var(--color-texto);
  font-weight: 600;
}

.text-descuento {
  color: var(--color-peligro) !important;
}

.pos-total-grand {
  margin-top: 0.35rem;
  padding-top: 0.7rem;
  border-top: 2px dashed var(--color-borde);
}

.pos-total-grand span {
  font-size: 1.05rem;
  color: var(--color-texto) !important;
  font-weight: 700 !important;
}

.pos-total-grand span:last-child {
  font-size: 1.6rem;
  color: var(--color-primario) !important;
  font-family: var(--fuente-titulo);
}

/* Botón cobrar */

.pos-btn-cobrar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.1rem;
  border: none;
  border-radius: var(--radio-lg);
  cursor: pointer;
  background: linear-gradient(135deg, var(--color-acento-oscuro), var(--color-acento));
  color: #fff;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(34, 139, 87, 0.35);
  transition: all var(--transicion-normal);
}

.pos-btn-cobrar:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(34, 139, 87, 0.45);
}

.pos-btn-cobrar:disabled {
  background: var(--color-gris-medio);
  box-shadow: none;
  cursor: not-allowed;
}

.pos-btn-cobrar-total {
  margin-left: auto;
  font-size: 1.15rem;
}

/* ===== Modal cliente ===== */

.pos-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.pos-modal-overlay.open {
  display: flex;
}

.pos-modal {
  background: #fff;
  border-radius: var(--radio-xl);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--sombra-xl);
  overflow: hidden;
  animation: slideInUp 0.3s ease;
}

#modalVentaRegistrada .pos-confirmacion {
  max-width: 720px;
  padding: 2.5rem;
  text-align: center;
}

#modalVentaRegistrada .pos-confirmacion-icon {
  width: 90px;
  height: 90px;
  margin: 0 auto 1.5rem;
  border: 7px solid rgba(34, 197, 94, .18);
  border-radius: 50%;
  color: #86d56c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
}

#modalVentaRegistrada .pos-confirmacion h2 {
  margin: 0 0 1.7rem;
  color: #4b4b4b;
  font-size: 2.3rem;
}

#modalVentaRegistrada .pos-confirmacion-datos {
  display: grid;
  gap: .65rem;
  max-width: 610px;
  margin: 0 auto 2rem;
  text-align: left;
  color: #555;
  font-size: 1.05rem;
}

#modalVentaRegistrada .pos-confirmacion-actions {
  display: flex;
  justify-content: center;
  gap: .8rem;
}

#modalVentaRegistrada .pos-confirmacion-actions button {
  border: 0;
  border-radius: 5px;
  padding: .85rem 1.35rem;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

#modalVentaRegistrada .pos-btn-comprobante { background: #5146e5; }
#modalVentaRegistrada .pos-btn-nueva-venta { background: #059669; }

@media (max-width: 600px) {
  #modalVentaRegistrada .pos-confirmacion { padding: 1.5rem; }
  #modalVentaRegistrada .pos-confirmacion h2 { font-size: 1.8rem; }
  #modalVentaRegistrada .pos-confirmacion-actions { flex-direction: column; }
}

.pos-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-borde);
}

.pos-modal-head h3 {
  font-family: var(--fuente-titulo);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pos-modal-head h3 i {
  color: var(--color-primario);
}

.pos-modal-close {
  border: none;
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--color-texto-secundario);
}

.pos-modal-close:hover {
  color: var(--color-peligro);
}

.pos-modal-body {
  padding: 1.25rem;
}

.pos-cliente-lista {
  margin-top: 1rem;
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.pos-cliente-opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  cursor: pointer;
  transition: all var(--transicion-rapida);
}

.pos-cliente-opcion:hover {
  border-color: var(--color-primario);
  background: rgba(79, 70, 229,0.05);
}

.pos-cliente-opcion .nombre {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-texto);
}

.pos-cliente-opcion .doc {
  font-size: 0.76rem;
  color: var(--color-texto-secundario);
}

.badge-membresia {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  text-transform: capitalize;
}

.badge-membresia.plata {
  background: #e2e8f0;
  color: #475569;
}

.badge-membresia.oro {
  background: #fef3c7;
  color: #b45309;
}

.badge-membresia.platino {
  background: #ede9fe;
  color: #6d28d9;
}

.badge-membresia.ninguno {
  background: var(--color-fondo);
  color: var(--color-texto-secundario);
}

/* Responsive */

@media (max-width: 1100px) {
  .pos-layout {
    flex-direction: column;
  }
}

@media (max-width: 1100px) {
  .pos-checkout {
    flex-basis: auto;
    width: 100%;
    position: static;
  }
}