/* ==========================================================================
   ContaIA Core — Punto de Venta (POS) Styles
   Línea de diseño unificada con ContaIA Core / Ecosistema
   ========================================================================== */

.pos-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background-color: var(--surface-bg, #f4f7fb);
  color: var(--text-color, #1e293b);
  font-family: var(--font-sans);
}

/* Header POS */
.pos-header {
  height: 60px;
  background: var(--surface-1, #ffffff);
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  z-index: 20;
}

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

.pos-brand-mark {
  width: 38px;
  height: 38px;
  background: url('../imagenes/logo/app_icon_128.png') no-repeat center center / cover;
  color: transparent !important;
  font-weight: 800;
  font-size: 0 !important;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
  flex: none;
  overflow: hidden;
}

.pos-brand-info h1 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.pos-brand-info small {
  font-size: var(--text-xs);
  color: var(--text-muted, #64748b);
}

.pos-session-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-2, #f1f5f9);
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid var(--border-color, #e2e8f0);
}

.pos-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10b981;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

/* POS Layout Principal */
.pos-main {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Panel Izquierdo: Catálogo de Productos */
.pos-product-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1rem 1.25rem;
  gap: 0.75rem;
  overflow: hidden;
}

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

.pos-search-bar i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand-500, #2563eb);
  font-size: var(--text-lg);
  pointer-events: none;
}

.pos-search-input {
  height: 42px;
  padding-left: 2.6rem;
  border-radius: var(--radius, 8px);
  font-size: var(--text-base);
  border: 1px solid var(--border-color, #cbd5e1);
  background: var(--surface-1, #ffffff);
  box-shadow: none;
  transition: all 0.15s ease;
}

.pos-search-input:focus {
  border-color: var(--brand-500, #2563eb);
  box-shadow: 0 0 0 3px var(--ring, rgba(37, 99, 235, 0.2));
}

/* Categorías Tabs */
.pos-categories-nav {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
}

.pos-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: 20px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: var(--surface-1, #ffffff);
  color: var(--text-color, #334155);
  font-size: var(--text-base);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pos-cat-btn:hover {
  background: var(--surface-2, #f8fafc);
  border-color: var(--brand-400, #60a5fa);
  color: var(--brand-600, #1d4ed8);
}

.pos-cat-btn.active {
  background: var(--brand-500, #2563eb);
  border-color: var(--brand-500, #2563eb);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

/* Grilla de Productos */
.pos-products-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap: 0.35rem;
  padding-right: 0.25rem;
}

.pos-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-1, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 7px;
  padding: 0.35rem 0.45rem;
  text-align: left;
  cursor: pointer;
  user-select: none;
  min-height: 80px;
  max-height: 98px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.pos-product-card:hover {
  transform: translateY(-1px);
  border-color: var(--brand-400, #93c5fd);
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.08);
}

.pos-product-card:active {
  transform: scale(0.97);
}

.pos-product-card.out-of-stock {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--surface-2, #f8fafc);
}

.pos-card-icon-wrap {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--surface-2, #eff6ff);
  color: var(--brand-600, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  margin-bottom: 0.2rem;
}

.pos-card-badge-cart {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  background: var(--brand-500, #2563eb);
  color: #ffffff;
  font-size: var(--text-2xs);
  font-weight: 700;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}

.pos-product-name {
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 0.15rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 1.65rem;
  color: var(--text-color, #1e293b);
}

.pos-product-price {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-color, #0f172a);
  font-family: var(--font-mono, monospace);
  line-height: 1.1;
  margin-top: auto;
}

.pos-product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.15rem;
  font-size: var(--text-2xs);
  line-height: 1;
  color: var(--text-muted, #64748b);
}

.pos-badge-promo {
  background: #fef3c7;
  color: #b45309;
  padding: 0.05rem 0.25rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: var(--text-2xs);
}

/* Panel Derecho: Ticket de Venta / Carrito */
.pos-cart-panel {
  width: 420px;
  background: var(--surface-1, #ffffff);
  border-left: 1px solid var(--border-color, #e2e8f0);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 10;
}

.pos-cart-header {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  background: var(--surface-2, #f8fafc);
}

.pos-cart-selectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.pos-cart-selectors label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  margin-bottom: 0.2rem;
  display: block;
}

.pos-cart-customer-section label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}

.pos-customer-name-display {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary, #0f172a);
}

.pos-cart-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem 0.35rem 1rem;
}

.pos-cart-title {
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pos-cart-items-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.pos-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted, #94a3b8);
  text-align: center;
  padding: 2rem;
}

.pos-cart-empty i {
  font-size: var(--text-4xl);
  margin-bottom: 1rem;
  color: var(--brand-300, #93c5fd);
}

/* Renglón del Carrito */
.pos-cart-item {
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: all 0.15s ease;
}

.pos-cart-item:hover {
  border-color: var(--brand-300, #93c5fd);
  background: #ffffff;
}

.pos-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.pos-item-title {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.25;
}

.pos-item-tax {
  font-size: var(--text-xs);
  color: var(--text-muted, #64748b);
  font-family: var(--font-mono, monospace);
}

.pos-item-net {
  font-size: var(--text-base);
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  text-align: right;
}

.pos-item-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

.pos-qty-group {
  display: flex;
  align-items: center;
  background: var(--surface-1, #ffffff);
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 8px;
  overflow: hidden;
}

.pos-qty-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-color, #334155);
}

.pos-qty-btn:hover {
  background: var(--surface-2, #f1f5f9);
  color: var(--brand-600, #2563eb);
}

.pos-qty-val {
  min-width: 34px;
  text-align: center;
  font-weight: 700;
  font-size: var(--text-base);
  font-family: var(--font-mono, monospace);
}

.pos-discount-box {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-xs);
  color: var(--text-muted, #64748b);
}

.pos-discount-input {
  width: 50px;
  height: 28px;
  text-align: center;
  font-size: var(--text-sm);
  padding: 0 0.25rem;
  border-radius: 6px;
  border: 1px solid var(--border-color, #cbd5e1);
}

/* Pie del Carrito: Totales y Cobro */
.pos-cart-footer {
  border-top: 1px solid var(--border-color, #e2e8f0);
  padding: 1rem 1.25rem;
  background: var(--surface-1, #ffffff);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.pos-totals-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: var(--text-base);
  color: var(--text-muted, #64748b);
}

.pos-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pos-totals-row span:last-child {
  font-family: var(--font-mono, monospace);
  font-weight: 600;
}

.pos-total-pay-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-color, #cbd5e1);
}

.pos-total-pay-label {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-color, #0f172a);
}

.pos-total-pay-val {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--brand-600, #2563eb);
  font-family: var(--font-mono, monospace);
}

.pos-pay-actions-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
}

.btn-hold-ticket {
  height: 44px;
  padding: 0 1.15rem;
  font-weight: 600;
  border-radius: var(--radius, 8px);
}

.btn-pay-ticket {
  height: 44px;
  font-size: var(--text-md);
  font-weight: 700;
  border-radius: var(--radius, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

/* Modal de Cobro */
.pos-method-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}

.pos-method-btn {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0 1rem;
  border: 1px solid var(--border-color, #e2e8f0);
  background: var(--surface-2, #f8fafc);
  border-radius: var(--radius, 8px);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pos-method-btn:hover {
  background: var(--surface-1, #ffffff);
  border-color: var(--brand-400, #60a5fa);
  color: var(--brand-600, #2563eb);
}

.pos-method-btn.active {
  background: rgba(37, 99, 235, 0.08);
  border-color: var(--brand-500, #2563eb);
  color: var(--brand-600, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

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

.pos-quick-cash-btn {
  padding: 0.35rem 0.75rem;
  background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  cursor: pointer;
}

.pos-quick-cash-btn:hover {
  background: var(--brand-500, #2563eb);
  color: #ffffff;
  border-color: var(--brand-500, #2563eb);
}

/* Tirilla Térmica POS (58 mm y 80 mm) */
.pos-receipt-paper {
  background: #ffffff;
  color: #000000;
  padding: 12px 10px;
  font-family: 'Courier New', Courier, 'Lucida Console', Monaco, monospace;
  font-size: 11.5px;
  line-height: 1.35;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  border: 1px solid #e5e7eb;
  transition: max-width 0.2s ease, font-size 0.2s ease;
}

.modal-dialog.modal-receipt-dialog {
  max-width: 440px;
}

.pos-receipt-paper.receipt-80mm {
  width: 100%;
  max-width: 310px; /* ~79mm a 96dpi */
  font-size: 11.5px;
}

.pos-receipt-paper.receipt-58mm {
  width: 100%;
  max-width: 220px; /* ~57mm a 96dpi */
  font-size: 10px;
  padding: 8px 6px;
}

.pos-receipt-paper .pos-receipt-divider {
  border-top: 1px dashed #000000;
  margin: 6px 0;
}

.pos-receipt-paper .pos-receipt-double-divider {
  border-top: 2px solid #000000;
  margin: 6px 0;
}

.pos-receipt-paper .receipt-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0;
}

.pos-receipt-paper .receipt-table th,
.pos-receipt-paper .receipt-table td {
  padding: 2px 0;
  vertical-align: top;
}

.pos-receipt-paper .receipt-reprint-banner {
  border: 1px solid #000000;
  padding: 3px;
  font-weight: bold;
  text-align: center;
  margin: 6px 0;
  letter-spacing: 1px;
}

.receipt-format-switcher {
  display: inline-flex;
  background: var(--surface-2, #f1f5f9);
  padding: 3px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid var(--border-color, #cbd5e1);
}

.receipt-format-switcher button {
  border: none;
  background: transparent;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  transition: all 0.15s;
}

.receipt-format-switcher button.active {
  background: #ffffff;
  color: var(--brand-700, #1d4ed8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* REGLAS ESTRICTAS DE IMPRESIÓN (@media print) */
@media print {
  @page {
    margin: 0;
    size: auto;
  }

  /* Ocultar la aplicación general, barras, modales de fondo y controles */
  #posAppRoot,
  .modal-backdrop,
  .toast-stack,
  .no-print,
  .receipt-format-switcher,
  .modal-header,
  .modal-footer,
  .btn,
  #lookupModal,
  nav,
  header {
    display: none !important;
    visibility: hidden !important;
  }

  /* Resetear dimensiones de html y body sin límites de overflow */
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #000000 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.modal-open {
    overflow: visible !important;
    padding-right: 0 !important;
  }

  /* El contenedor de modales pasa a flujo normal */
  #posModalContainer {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  #modalReceipt {
    display: block !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  #modalReceipt .modal-dialog {
    display: block !important;
    position: static !important;
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    transform: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  #modalReceipt .modal-content {
    display: block !important;
    position: static !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    height: auto !important;
    overflow: visible !important;
  }

  #modalReceipt .modal-body {
    display: block !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* La tirilla térmica en flujo normal centrada y sin cortes */
  #thermalReceipt {
    display: block !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    padding: 4px 2px !important;
    margin: 0 auto !important;
    page-break-inside: avoid;
    break-inside: avoid;
    visibility: visible !important;
  }

  #thermalReceipt * {
    visibility: visible !important;
    color: #000000 !important;
  }

  #thermalReceipt.receipt-80mm {
    width: 78mm !important;
    max-width: 78mm !important;
    font-size: 11px !important;
  }

  #thermalReceipt.receipt-58mm {
    width: 56mm !important;
    max-width: 56mm !important;
    font-size: 9.5px !important;
  }
}

/* Pantalla de Apertura de Turno */
.pos-open-session-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--surface-bg, #f1f5f9);
}

.pos-open-card {
  width: 100%;
  max-width: 820px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  background: var(--surface-1, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
  .pos-main {
    flex-direction: column;
  }
  .pos-cart-panel {
    width: 100%;
    height: 45vh;
  }
  .pos-open-card {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ContaIA POS — Soporte Dark Mode Completo
   ========================================================================== */
[data-theme="dark"],
[data-bs-theme="dark"] {
  --surface-bg: #0b1220;
  --surface-1: #111a2b;
  --surface-2: #0e1626;
  --surface-elevated: #16223a;
  --border-color: #223049;
  --text-color: #f1f5f9;
  --text-muted: #93a3ba;
}

[data-theme="dark"] .pos-app {
  background-color: var(--surface-bg) !important;
  color: var(--text-color) !important;
}

[data-theme="dark"] .pos-header {
  background: var(--surface-1) !important;
  border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .pos-session-pill {
  background: var(--surface-2) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

[data-theme="dark"] .pos-cart-panel,
[data-theme="dark"] .pos-catalog-panel,
[data-theme="dark"] .pos-card,
[data-theme="dark"] .pos-open-card {
  background-color: var(--surface-1) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

[data-theme="dark"] .pos-prod-card {
  background-color: var(--surface-1) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

[data-theme="dark"] .pos-prod-card:hover {
  border-color: var(--brand-500, #2f6bff) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .pos-cart-item {
  border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .pos-cart-item:hover {
  background-color: var(--surface-2) !important;
}

[data-theme="dark"] .pos-totals-box {
  background-color: var(--surface-2) !important;
  border-top-color: var(--border-color) !important;
}

[data-theme="dark"] .pos-num-btn {
  background-color: var(--surface-2) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

[data-theme="dark"] .pos-num-btn:hover {
  background-color: var(--surface-elevated) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .pos-cat-pill {
  background-color: var(--surface-2) !important;
  border-color: var(--border-color) !important;
  color: var(--text-muted) !important;
}

[data-theme="dark"] .pos-cat-pill:hover {
  background-color: var(--surface-elevated) !important;
  color: var(--text-color) !important;
}

[data-theme="dark"] .pos-cat-pill.active {
  background-color: var(--brand-500, #2f6bff) !important;
  color: #ffffff !important;
}