/* ============================================
   SISTEMA DE VENTAS - IMPRENTA SALOME
   Tema: Rojo con Negro - Elegante y Moderno
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Colores principales */
  --primary-red: #DC2626;
  --primary-red-dark: #B91C1C;
  --primary-red-light: #EF4444;
  --accent-red: #F87171;
  
  /* Negros y grises */
  --black: #0A0A0A;
  --black-soft: #171717;
  --gray-900: #1F1F1F;
  --gray-800: #262626;
  --gray-700: #3F3F46;
  --gray-600: #52525B;
  --gray-500: #71717A;
  --gray-400: #A1A1AA;
  --gray-300: #D4D4D8;
  --gray-200: #E4E4E7;
  --gray-100: #F4F4F5;
  --white: #FAFAFA;
  
  /* Estados */
  --success: #22C55E;
  --success-dark: #16A34A;
  --warning: #F59E0B;
  --warning-dark: #D97706;
  --error: #EF4444;
  --info: #3B82F6;
  
  /* Gradientes */
  --gradient-primary: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
  --gradient-dark: linear-gradient(180deg, var(--black) 0%, var(--gray-900) 100%);
  --gradient-card: linear-gradient(145deg, var(--gray-800) 0%, var(--gray-900) 100%);
  
  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  --shadow-red: 0 4px 14px rgba(220, 38, 38, 0.4);
  --shadow-glow: 0 0 20px rgba(220, 38, 38, 0.3);
  
  /* Bordes */
  --border-color: var(--gray-700);
  --border-radius: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  
  /* Transiciones */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Zoom */
  --zoom-level: 1;
}

/* Reset y base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: calc(16px * var(--zoom-level));
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--gradient-dark);
  color: var(--gray-100);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   PANTALLA DE LOGIN
   ============================================ */

.login-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: 
    radial-gradient(ellipse at top, rgba(220, 38, 38, 0.15) 0%, transparent 50%),
    var(--gradient-dark);
}

.login-logo {
  margin-bottom: 2rem;
  text-align: center;
  animation: fadeInDown 0.6s ease;
}

.login-logo h1 {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
}

.login-logo h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-red);
  letter-spacing: 4px;
}

.login-card {
  background: var(--gradient-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-xl);
  padding: 3rem;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-xl);
  animation: fadeInUp 0.6s ease 0.2s both;
}

.pin-display {
  background: var(--black);
  border: 2px solid var(--gray-700);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.5rem;
  letter-spacing: 1rem;
  color: var(--primary-red);
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-normal);
}

.pin-display.error {
  border-color: var(--error);
  animation: shake 0.5s ease;
}

.pin-display.success {
  border-color: var(--success);
  color: var(--success);
}

.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.pin-key {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: var(--border-radius);
  padding: 1.25rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-key:hover {
  background: var(--gray-700);
  border-color: var(--primary-red);
  transform: translateY(-2px);
}

.pin-key:active {
  transform: translateY(0);
  background: var(--primary-red);
}

.pin-key.delete {
  background: var(--gray-900);
  color: var(--gray-400);
}

.pin-key.delete:hover {
  background: var(--error);
  color: var(--white);
  border-color: var(--error);
}

.pin-key.enter {
  background: var(--gradient-primary);
  border-color: var(--primary-red);
  color: var(--white);
}

.pin-key.enter:hover {
  box-shadow: var(--shadow-red);
}

/* ============================================
   LAYOUT PRINCIPAL
   ============================================ */

.app-container {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: 280px;
  background: var(--black);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (max-width: 992px) {
  .sidebar {
    transform: translateX(-100%);
    box-shadow: none;
  }
  
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.5);
  }
}

.sidebar-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  text-align: center;
}

.sidebar-header h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.25rem;
}

.sidebar-header h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-red);
  letter-spacing: 2px;
}

.sidebar-nav {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
}

.nav-section {
  margin-bottom: 1.5rem;
}

.nav-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--border-radius);
  color: var(--gray-300);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-fast);
  margin-bottom: 0.25rem;
}

.nav-item:hover {
  background: var(--gray-800);
  color: var(--white);
}

.nav-item.active {
  background: var(--gradient-primary);
  color: var(--white);
  box-shadow: var(--shadow-red);
}

.nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nav-item span {
  font-weight: 500;
}

.sidebar-footer {
  padding: 1rem;
  border-top: 1px solid var(--border-color);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--gray-900);
  border-radius: var(--border-radius);
  margin-bottom: 0.75rem;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--white);
}

.user-details {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-weight: 600;
  color: var(--white);
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 0.75rem;
  color: var(--gray-400);
  text-transform: capitalize;
}

.logout-btn {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: 8px;
  color: var(--gray-400);
  font-weight: 500;
  font-size: 0.8rem;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.logout-btn svg {
  width: 16px;
  height: 16px;
}

.logout-btn:hover {
  background: var(--error);
  border-color: var(--error);
  color: var(--white);
}

/* Main Content */
.main-content {
  flex: 1;
  margin-left: 280px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */
.main-header {
  background: var(--black);
  border-bottom: 1px solid var(--border-color);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-date {
  color: var(--gray-400);
  font-size: 0.875rem;
}

/* Content Area */
.content-area {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

/* ============================================
   COMPONENTES COMUNES
   ============================================ */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: var(--gradient-primary);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  box-shadow: var(--shadow-red);
  transform: translateY(-2px);
}

.btn-secondary {
  background: var(--gray-700);
  color: var(--white);
}

.btn-secondary:hover {
  background: var(--gray-600);
}

.btn-success {
  background: var(--success);
  color: var(--white);
}

.btn-success:hover {
  background: var(--success-dark);
}

.btn-warning {
  background: var(--warning);
  color: var(--black);
}

.btn-warning:hover {
  background: var(--warning-dark);
}

.btn-danger {
  background: var(--error);
  color: var(--white);
}

.btn-danger:hover {
  background: #DC2626;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--gray-600);
  color: var(--gray-300);
}

.btn-outline:hover {
  border-color: var(--primary-red);
  color: var(--primary-red);
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1rem;
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}

/* SVG en botones */
.btn svg {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.btn-sm svg {
  width: 14px;
  height: 14px;
}

.btn-lg svg {
  width: 20px;
  height: 20px;
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
}

/* Cards */
.card {
  background: var(--gradient-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.card-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-title svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.card-body {
  padding: 1.5rem;
}

.card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.2);
}

/* Forms */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-300);
  margin-bottom: 0.5rem;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--gray-900);
  border: 2px solid var(--gray-700);
  border-radius: var(--border-radius);
  color: var(--white);
  font-family: inherit;
  font-size: 0.875rem;
  transition: var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary-red);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

.form-input::placeholder {
  color: var(--gray-500);
}

.form-select {
  cursor: pointer;
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Tables */
.table-container {
  overflow-x: auto;
  border-radius: var(--border-radius);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.table th {
  background: var(--gray-900);
  font-weight: 600;
  color: var(--gray-300);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table td {
  color: var(--gray-200);
  font-size: 0.875rem;
}

.table tbody tr {
  transition: var(--transition-fast);
}

.table tbody tr:hover {
  background: rgba(220, 38, 38, 0.1);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-success {
  background: rgba(34, 197, 94, 0.2);
  color: var(--success);
}

.badge-warning {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning);
}

.badge-danger {
  background: rgba(239, 68, 68, 0.2);
  color: var(--error);
}

.badge-info {
  background: rgba(59, 130, 246, 0.2);
  color: var(--info);
}

/* Stats Cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--gradient-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gradient-primary);
}

.stat-label {
  font-size: 0.8rem;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
}

.stat-value.currency::before {
  content: 'S/ ';
  font-size: 1.25rem;
  color: var(--gray-400);
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-normal);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--gray-900);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-xl);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.9);
  transition: var(--transition-normal);
}

.modal-overlay.active .modal {
  transform: scale(1);
}

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

.modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-800);
  border: none;
  border-radius: 50%;
  color: var(--gray-400);
  cursor: pointer;
  transition: var(--transition-fast);
}

.modal-close:hover {
  background: var(--error);
  color: var(--white);
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.productos-header-actions,
.producto-categoria-label,
.categoria-inline-create {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.productos-header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.producto-categoria-label {
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.producto-categoria-label .form-label {
  margin-bottom: 0;
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0;
  color: var(--primary-red);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-link:hover {
  color: var(--primary-red-light);
}

.categoria-inline-create {
  align-items: stretch;
  margin-top: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--black-soft);
}

.categoria-inline-create[hidden] {
  display: none;
}

.categoria-inline-create .form-input {
  min-width: 0;
}

.categoria-inline-create .btn {
  flex: 0 0 auto;
}

.form-field-error {
  margin: 0.4rem 0 0;
  color: var(--error);
  font-size: 0.8rem;
}

.categoria-modal-help {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
}

.producto-volume-prices {
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--black-soft);
}

.producto-tax-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.producto-tax-options .form-label {
  margin: 0;
}

.producto-tax-options label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--gray-300);
  cursor: pointer;
}

.producto-tax-options input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary-red);
}

.product-tax-note {
  margin: 0.65rem 0 0;
  color: var(--warning);
  font-size: 0.8rem;
  font-weight: 700;
}

body[data-theme="light"] .categoria-inline-create {
  background: #fafafa;
  border-color: #d4d4d8;
}

body[data-theme="light"] .producto-volume-prices {
  background: #fafafa;
  border-color: #d4d4d8;
}

body[data-theme="light"] .producto-tax-options {
  border-color: #d4d4d8;
}

body[data-theme="light"] .producto-tax-options label {
  color: #3f3f46;
}

@media (max-width: 620px) {
  .productos-header-actions {
    width: 100%;
  }

  .productos-header-actions .btn {
    flex: 1 1 145px;
  }

  .categoria-inline-create {
    flex-direction: column;
  }
}

/* Search Box */
.search-box {
  position: relative;
  max-width: 400px;
}

.search-box input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  background: var(--gray-900);
  border: 2px solid var(--gray-700);
  border-radius: var(--border-radius);
  color: var(--white);
  font-size: 0.875rem;
  transition: var(--transition-fast);
}

.search-box input:focus {
  border-color: var(--primary-red);
  outline: none;
}

.search-box svg {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--gray-500);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--gray-500);
}

.empty-state svg {
  width: 80px;
  height: 80px;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-400);
  margin-bottom: 0.5rem;
}

/* Alerts */
.alert {
  padding: 1rem 1.25rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.alert-success {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid var(--success);
  color: var(--success);
}

.alert-warning {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid var(--warning);
  color: var(--warning);
}

.alert-danger {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid var(--error);
  color: var(--error);
}

/* ============================================
   POS / REGISTRO DE VENTA
   ============================================ */

.pos-layout,
.pos-container {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1rem;
  height: calc(100vh - 140px);
}

.pos-products {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.pos-search {
  flex-shrink: 0;
  margin-bottom: 0.5rem;
}

.categories-bar {
  flex-shrink: 0;
}

.pos-products-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.5rem;
  display: block; /* Fallback por defecto */
}

/* Cuando NO hay categorías (productos sueltos) - navegadores con :has() */
@supports selector(:has(*)) {
  .pos-products-grid:not(:has(.category-section)) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
  }
  
  .pos-products-grid:has(.category-section) {
    display: block;
  }
}

/* Fallback para navegadores sin :has() - usa clase JS */
.pos-products-grid.grid-mode {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.pos-products-header {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.product-card {
  background: var(--gradient-card);
  border: 2px solid var(--gray-700);
  border-radius: var(--border-radius);
  padding: 0.5rem;
  cursor: pointer;
  transition: var(--transition-fast);
  height: 100px;
  max-height: 100px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.product-card:hover {
  border-color: var(--primary-red);
  transform: translateY(-2px);
}

.product-card.low-stock {
  border-color: var(--warning);
}

.product-card.no-stock {
  opacity: 0.5;
  border-color: var(--danger);
}

.product-card.stock-ilimitado {
  border-color: #3B82F6;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, var(--gray-800) 100%);
}

.product-card.stock-ilimitado .product-stock {
  color: #3B82F6;
}

.stock-inf {
  color: #3B82F6;
  font-weight: 700;
  font-size: 0.7rem;
}

.product-name {
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.15rem;
  font-size: 0.75rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-info {
  font-size: 0.65rem;
  color: var(--gray-400);
  margin-bottom: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-price {
  font-weight: 700;
  color: var(--primary-red);
  font-size: 0.8rem;
  white-space: nowrap;
}

.product-price .price-unit {
  font-size: 0.6rem;
  font-weight: 400;
  color: var(--gray-500);
}

.product-stock {
  font-size: 0.6rem;
  color: var(--gray-500);
  white-space: nowrap;
}

/* Cart */
.pos-cart {
  background: var(--black);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

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

.cart-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cart-header h3 svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.cart-header #btn-clear-cart {
  flex: 0 0 auto;
  margin-left: 0.75rem;
  white-space: nowrap;
}

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

.cart-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--gray-900);
  border-radius: var(--border-radius);
  margin-bottom: 0.5rem;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  font-weight: 500;
  color: var(--white);
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-price {
  font-size: 0.75rem;
  color: var(--gray-400);
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qty-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-700);
  border: none;
  border-radius: 6px;
  color: var(--white);
  cursor: pointer;
  transition: var(--transition-fast);
}

.qty-btn:hover {
  background: var(--primary-red);
}

.cart-item-qty span {
  width: 30px;
  text-align: center;
  font-weight: 600;
  color: var(--white);
}

.cart-item-subtotal {
  font-weight: 600;
  color: var(--primary-red);
  min-width: 60px;
  text-align: right;
}

.cart-item-remove {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
  transition: var(--transition-fast);
}

.cart-item-remove:hover {
  color: var(--error);
}

.cart-empty {
  text-align: center;
  padding: 2rem;
  color: var(--gray-500);
}

.cart-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--border-color);
  background: var(--gray-900);
}

.cart-totals {
  margin-bottom: 1rem;
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  color: var(--gray-400);
}

.cart-total-row.total {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
  margin-top: 0.5rem;
}

.cart-total-row.total span:last-child {
  color: var(--primary-red);
}

.payment-methods {
  padding: 0 1rem;
  margin-bottom: 0.75rem;
}

.payment-title {
  font-size: 0.8rem;
  color: var(--gray-400);
  margin-bottom: 0.5rem;
}

.payment-buttons {
  display: flex;
  gap: 0.5rem;
}

.payment-btn {
  padding: 0.75rem;
  background: var(--gray-800);
  border: 2px solid var(--gray-700);
  border-radius: var(--border-radius);
  color: var(--gray-300);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}

.payment-btn:hover,
.payment-btn.active {
  border-color: var(--primary-red);
  color: var(--white);
}

.payment-btn.active {
  background: var(--primary-red);
}

.cart-actions {
  display: flex;
  gap: 0.5rem;
}

.cart-actions .btn {
  flex: 1;
}

/* ============================================
   LISTA VIRTUAL (ESTIBADOR)
   ============================================ */

.lista-virtual {
  background: var(--gradient-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.lista-header {
  background: var(--primary-red);
  padding: 1.5rem;
  text-align: center;
}

.lista-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.25rem;
}

.lista-header p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
}

.lista-item {
  display: grid;
  grid-template-columns: 80px 80px 1fr 150px;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

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

.lista-cantidad {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
}

.lista-material {
  font-size: 0.875rem;
  color: var(--gray-400);
}

.lista-producto {
  font-weight: 600;
  color: var(--white);
}

.lista-medida {
  font-size: 0.8rem;
  color: var(--gray-500);
}

.lista-estado {
  display: flex;
  gap: 0.5rem;
}

.estado-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition-fast);
}

.estado-btn.aceptar {
  background: var(--success);
  color: var(--white);
}

.estado-btn.parcial {
  background: var(--warning);
  color: var(--black);
}

.estado-btn.rechazar {
  background: var(--error);
  color: var(--white);
}

.estado-btn:hover {
  transform: scale(1.1);
}

.estado-btn.selected {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

.lista-item.aceptado {
  background: rgba(34, 197, 94, 0.1);
}

.lista-item.parcial {
  background: rgba(245, 158, 11, 0.1);
}

.lista-item.rechazado {
  background: rgba(239, 68, 68, 0.1);
}

.lista-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  color: var(--info);
  cursor: pointer;
  transition: var(--transition-fast);
}

.lista-add-btn:hover {
  background: rgba(59, 130, 246, 0.1);
}

/* ============================================
   TICKET DE VENTA
   ============================================ */

.ticket-preview {
  background: var(--white);
  color: var(--black);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  max-width: 300px;
  margin: 0 auto;
}

.ticket-header {
  text-align: center;
  border-bottom: 2px dashed var(--gray-400);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.ticket-header h2 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.ticket-header h3 {
  font-size: 14px;
  color: var(--gray-600);
}

.ticket-info {
  margin-bottom: 1rem;
}

.ticket-info p {
  margin-bottom: 0.25rem;
}

.ticket-items {
  border-top: 1px dashed var(--gray-400);
  border-bottom: 1px dashed var(--gray-400);
  padding: 0.75rem 0;
  margin-bottom: 0.75rem;
}

.ticket-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.ticket-item-name {
  flex: 1;
}

.ticket-totals {
  text-align: right;
}

.ticket-totals p {
  margin-bottom: 0.25rem;
}

.ticket-totals .total {
  font-size: 14px;
  font-weight: 700;
  border-top: 1px solid var(--gray-400);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

.ticket-footer {
  text-align: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px dashed var(--gray-400);
}

/* ============================================
   CONFIGURACIÓN
   ============================================ */

.settings-section {
  margin-bottom: 2rem;
}

.settings-section h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-300);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.zoom-control {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.zoom-slider {
  flex: 1;
  -webkit-appearance: none;
  background: var(--gray-700);
  height: 8px;
  border-radius: 4px;
  outline: none;
}

.zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--primary-red);
  border-radius: 50%;
  cursor: pointer;
}

.zoom-value {
  font-weight: 600;
  color: var(--white);
  min-width: 50px;
  text-align: center;
}

.theme-options {
  display: flex;
  gap: 1rem;
}

.theme-option {
  flex: 1;
  padding: 1rem;
  background: var(--gray-800);
  border: 2px solid var(--gray-700);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: center;
}

.theme-option:hover,
.theme-option.active {
  border-color: var(--primary-red);
}

.theme-option.active {
  background: rgba(220, 38, 38, 0.1);
}

.theme-preview {
  width: 60px;
  height: 40px;
  margin: 0 auto 0.5rem;
  border-radius: 6px;
  display: flex;
  overflow: hidden;
}

.theme-preview.dark {
  background: var(--black);
  border: 1px solid var(--gray-700);
}

.theme-preview.dark .preview-accent {
  width: 50%;
  background: var(--primary-red);
}

.theme-preview.light {
  background: var(--white);
  border: 1px solid var(--gray-300);
}

.theme-preview.light .preview-accent {
  width: 50%;
  background: var(--primary-red);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1200px) {
  .pos-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  
  .pos-container {
    display: block;
  }
  
  .pos-products {
    width: 100%;
  }
  
  .pos-cart {
    position: fixed;
    bottom: 0;
    left: 280px;
    right: 0;
    max-height: 70vh;
    border-radius: 20px 20px 0 0;
    z-index: 90;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
  }
}

@media (max-width: 992px) {
  .sidebar {
    transform: translateX(-100%);
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
  
  .main-content {
    margin-left: 0;
  }
  
  .pos-cart {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    border-radius: 20px 20px 0 0;
    z-index: 90;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
  }
  
  .pos-container {
    display: block;
    padding-bottom: 80px;
  }
  
  .pos-products {
    width: 100%;
    padding-bottom: 100px;
  }
  
  #menu-toggle {
    display: flex !important;
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .content-area {
    padding: 1rem;
  }
  
  .lista-item {
    grid-template-columns: 60px 1fr;
    gap: 0.5rem;
  }
  
  .lista-material,
  .lista-estado {
    grid-column: span 2;
  }
}

@media (max-width: 480px) {
  .login-card {
    padding: 1.5rem;
  }
  
  .pin-display {
    font-size: 2rem;
    letter-spacing: 0.5rem;
  }
  
  .pin-key {
    padding: 1rem;
    font-size: 1.25rem;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   ANIMACIONES
   ============================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--gray-700);
  border-top-color: var(--primary-red);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* ============================================
   UTILIDADES
   ============================================ */

.hidden { display: none !important; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--error); }
.text-muted { color: var(--gray-500); }
.font-mono { font-family: 'JetBrains Mono', monospace; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mt-2 { margin-top: 1rem; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.grid { display: grid; }
.w-full { width: 100%; }

/* ============================================
   ESTILOS ADICIONALES - CORRECIONES
   ============================================ */

/* Botones de icono */
.btn-icon {
  padding: 0.5rem;
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon svg {
  width: 18px;
  height: 18px;
}

.btn-sm.btn-icon {
  padding: 0.35rem;
  min-width: 32px;
  height: 32px;
}

.btn-sm.btn-icon svg {
  width: 16px;
  height: 16px;
}

/* Botón outline danger */
.btn-outline-danger {
  background: transparent;
  border: 2px solid var(--primary-red);
  color: var(--primary-red);
}

.btn-outline-danger:hover {
  background: var(--primary-red);
  color: white;
}

/* Actions cell */
.actions-cell {
  display: flex;
  gap: 0.5rem;
}

/* Form rows */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

/* Modal form */
.modal-form .form-group {
  margin-bottom: 1rem;
}

.ticket-print-form {
  max-width: 34rem;
}

.modal.ticket-print-modal {
  max-width: 680px;
}

.ticket-print-modal .modal-header {
  padding: 1.75rem 2rem;
}

.ticket-print-modal .modal-title {
  font-size: 1.5rem;
}

.ticket-print-modal .modal-body {
  padding: 2rem;
}

.ticket-print-modal .ticket-print-form {
  max-width: none;
}

.ticket-print-modal .ticket-print-intro {
  font-size: 1rem;
  margin-bottom: 1.75rem;
}

.ticket-print-modal .form-group {
  margin-bottom: 1.5rem;
}

.ticket-print-modal .form-label {
  font-size: 1rem;
  font-weight: 600;
}

.ticket-print-modal .form-input,
.ticket-print-modal .form-select {
  min-height: 56px;
  padding: 0.9rem 1rem;
  font-size: 1.05rem;
}

.ticket-print-modal .client-name-input {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ticket-print-modal .modal-footer {
  padding: 1.25rem 2rem 1.75rem;
}

.ticket-print-modal .modal-footer .btn {
  min-height: 48px;
  padding-inline: 1.75rem;
  font-size: 0.95rem;
}

@media (max-width: 600px) {
  .modal.ticket-print-modal {
    width: calc(100% - 1rem);
    margin: 0.5rem;
  }

  .ticket-print-modal .modal-header,
  .ticket-print-modal .modal-body {
    padding: 1.25rem;
  }

  .ticket-print-modal .modal-footer {
    padding: 1rem 1.25rem 1.25rem;
  }

  .ticket-print-modal .modal-footer .btn {
    flex: 1;
    padding-inline: 0.75rem;
  }
}

.ticket-print-intro {
  margin: 0 0 1.25rem;
  color: var(--gray-300);
  font-size: 0.9rem;
  line-height: 1.55;
}

.ticket-print-form .form-input.is-invalid {
  border-color: var(--error);
}

.ticket-print-error {
  margin: 0;
  color: #fca5a5;
  font-size: 0.82rem;
  font-weight: 600;
}

.ticket-print-error[hidden] { display: none; }

.ticket-print-saved-data {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.ticket-print-saved-data > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 1rem;
  padding: 0.9rem 1rem;
}

.ticket-print-saved-data > div + div {
  border-top: 1px solid var(--border-color);
}

.ticket-print-saved-data dt {
  color: var(--gray-400);
  font-size: 0.85rem;
  font-weight: 600;
}

.ticket-print-saved-data dd {
  margin: 0;
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

body[data-theme="light"] .ticket-print-intro { color: #52525b; }
body[data-theme="light"] .ticket-print-error { color: #b91c1c; }
body[data-theme="light"] .ticket-print-saved-data dd { color: #18181b; }

/* Producto check en modal */
.producto-check {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--gray-900);
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.producto-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-red);
}

.producto-check label {
  flex: 1;
  cursor: pointer;
}

/* Pedido card */
.pedido-card {
  background: var(--gray-900);
  border: 1px solid var(--gray-700);
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  overflow: hidden;
}

.pedido-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--gray-800);
  border-bottom: 1px solid var(--gray-700);
}

.pedido-items {
  padding: 0.5rem;
}

.pedido-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem;
  border-radius: 8px;
  margin-bottom: 0.25rem;
}

.pedido-item:hover {
  background: var(--gray-800);
}

.pedido-item .item-qty {
  font-size: 1.1rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--primary-red);
}

.pedido-item .item-name {
  font-weight: 500;
}

.pedido-item .item-status {
  font-size: 0.85rem;
}

.status-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: bold;
  margin-right: 4px;
}

.status-icon.ok { background: var(--success); color: white; }
.status-icon.partial { background: var(--warning); color: white; }
.status-icon.bad { background: var(--danger); color: white; }
.status-icon.pending { background: var(--gray-600); color: white; }

.pedido-item.aceptado { background: rgba(34, 197, 94, 0.1); }
.pedido-item.parcial { background: rgba(245, 158, 11, 0.1); }
.pedido-item.rechazado { background: rgba(239, 68, 68, 0.1); }

/* Botones de estado en lista virtual */
.estado-btns {
  display: flex;
  gap: 0.5rem;
}

.estado-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.estado-btn svg {
  width: 18px;
  height: 18px;
}

.estado-btn.accept {
  background: rgba(34, 197, 94, 0.2);
  color: var(--success);
}
.estado-btn.accept:hover {
  background: var(--success);
  color: white;
}

.estado-btn.partial {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning);
}
.estado-btn.partial:hover {
  background: var(--warning);
  color: white;
}

.estado-btn.reject {
  background: rgba(239, 68, 68, 0.2);
  color: var(--error);
}
.estado-btn.reject:hover {
  background: var(--error);
  color: white;
}

/* Item procesado */
.item-processed {
  opacity: 0.7;
}

/* Info box en configuración */
.info-box {
  background: var(--gray-900);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--gray-700);
}

.info-box p {
  margin-bottom: 0.5rem;
}

.info-box p:last-child {
  margin-bottom: 0;
}

/* Theme options */
.theme-options {
  display: flex;
  gap: 1rem;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--gray-900);
  border: 2px solid var(--gray-700);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.theme-option:hover {
  border-color: var(--gray-500);
}

.theme-option.active {
  border-color: var(--primary-red);
  background: rgba(220, 38, 38, 0.1);
}

.theme-preview {
  width: 60px;
  height: 40px;
  border-radius: 8px;
}

/* Zoom control */
.zoom-control {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.zoom-slider {
  flex: 1;
  max-width: 200px;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--gray-700);
  border-radius: 4px;
  outline: none;
}

.zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--primary-red);
  border-radius: 50%;
  cursor: pointer;
}

.zoom-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--primary-red);
  min-width: 50px;
}

/* Settings section */
.settings-section {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--gray-700);
}

.settings-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.settings-section h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Alert styles */
.alert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
}

.alert svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.alert-info {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: var(--info);
}

.alert-warning {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--warning);
}

.alert-success {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: var(--success);
}

/* Button block */
.btn-block {
  display: block;
  width: 100%;
}

/* Margin utilities */
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mt-2 { margin-top: 1rem; }

/* Flex utilities */
.flex { display: flex; }
.gap-2 { gap: 1rem; }
.items-center { align-items: center; }

/* Text utilities */
.text-success { color: var(--success) !important; }
.text-danger { color: var(--error) !important; }
.text-warning { color: var(--warning) !important; }

/* Ticket preview styles */
.ticket-preview {
  background: white;
  color: #333;
  padding: 1.5rem;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  max-width: 320px;
  margin: 0 auto;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.ticket-preview .ticket-header {
  text-align: center;
  margin-bottom: 0.5rem;
}

.ticket-preview .ticket-header h2 {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
  color: #000;
  font-weight: bold;
}

.ticket-preview .ticket-header p {
  font-size: 0.75rem;
  color: #666;
  margin: 2px 0;
}

.ticket-preview .ticket-header .empresa {
  font-size: 0.7rem;
  font-weight: bold;
  color: #333;
}

.ticket-preview .ticket-header .direccion {
  font-size: 0.65rem;
  color: #555;
}

.ticket-preview .ticket-header .ruc {
  font-size: 0.75rem;
  font-weight: bold;
  color: #333;
}

.ticket-preview .ticket-header .tipo-doc {
  font-size: 0.9rem;
  font-weight: bold;
  color: #000;
  margin: 8px 0;
  padding: 4px 0;
  border-top: 1px dashed #999;
  border-bottom: 1px dashed #999;
}

.ticket-divider {
  text-align: center;
  color: #999;
  margin: 0.5rem 0;
  font-size: 0.8rem;
}

.ticket-info p {
  font-size: 0.8rem;
  margin: 0.25rem 0;
}

.ticket-items-header {
  font-weight: bold;
  font-size: 0.85rem;
  margin: 0.5rem 0;
}

.ticket-items {
  margin: 0.75rem 0;
}

.ticket-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  margin: 0.35rem 0;
}

.ticket-item-detail {
  margin: 0.75rem 0;
  padding: 0.5rem 0;
  border-bottom: 1px dotted #ddd;
}

.ticket-item-detail .item-name {
  font-weight: bold;
  font-size: 0.85rem;
}

.ticket-item-detail .item-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #666;
  margin-top: 2px;
}

.ticket-item-detail .item-price {
  text-align: right;
  font-weight: bold;
  font-size: 0.9rem;
}

.ticket-item.total {
  font-weight: bold;
  font-size: 1rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #333;
}

.ticket-footer {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: #333;
  font-style: italic;
}

.ticket-system-info {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.ticket-system-info h4 {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: var(--gray-300);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive fixes */
@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .theme-options {
    flex-direction: column;
  }
  
  .zoom-control {
    flex-wrap: wrap;
  }
  
  .estado-btns {
    flex-wrap: wrap;
  }
  
  .pedido-item {
    grid-template-columns: 50px 1fr;
  }
  
  .pedido-item .item-status {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
  }
}

/* ============================================
   CORRECCIÓN CARRITO VACÍO
   ============================================ */

.cart-empty {
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--gray-500);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

.cart-empty svg {
  width: 48px;
  height: 48px;
  opacity: 0.4;
  margin-bottom: 0.5rem;
}

.cart-empty p {
  font-size: 0.875rem;
  margin: 0;
}

/* ============================================
   TEMA CLARO - SIDEBAR Y TODO
   ============================================ */

body[data-theme="light"] {
  background: linear-gradient(180deg, #F4F4F5 0%, #E4E4E7 100%);
  color: #18181B;
}

body[data-theme="light"] .sidebar {
  background: #FFFFFF;
  border-right-color: #D4D4D8;
}

body[data-theme="light"] .sidebar-header {
  border-bottom-color: #D4D4D8;
}

body[data-theme="light"] .sidebar-header h1 {
  color: #18181B;
}

body[data-theme="light"] .nav-section-title {
  color: #71717A;
}

body[data-theme="light"] .nav-item {
  color: #3F3F46;
}

body[data-theme="light"] .nav-item:hover {
  background: #F4F4F5;
  color: #18181B;
}

body[data-theme="light"] .nav-item.active {
  background: var(--gradient-primary);
  color: white;
}

body[data-theme="light"] .sidebar-footer {
  border-top-color: #D4D4D8;
}

body[data-theme="light"] .user-info {
  background: #F4F4F5;
}

body[data-theme="light"] .user-name {
  color: #18181B;
}

body[data-theme="light"] .user-role {
  color: #71717A;
}

body[data-theme="light"] .logout-btn {
  background: #F4F4F5;
  border-color: #D4D4D8;
  color: #52525B;
}

/* ============================================
   ROTULACIÓN
   ============================================ */

.rotulacion-page {
  --rot-panel: var(--gray-900);
  --rot-panel-raised: var(--gray-800);
  --rot-border: var(--gray-700);
  --rot-text: var(--gray-100);
  --rot-muted: var(--gray-400);
  --rot-paper: #ffffff;
  --rot-ink: #14171c;
  --rot-tape: #ffd400;
  --rot-line: #c2c8ce;
  --rot-ok: #42d982;
  --rot-danger: #ff8279;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0.25rem 0 2rem;
}

.rot-panel-header,
.rot-preview-header,
.rot-action-row,
.rot-format-bar,
.rot-preview-action,
.rot-queue-actions {
  display: flex;
  align-items: center;
}

.rot-queue-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(255, 212, 0, 0.65);
  color: var(--rot-tape);
  background: rgba(255, 212, 0, 0.08);
  border-radius: 999px;
}

.rotulacion-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.94fr);
  align-items: start;
  gap: 1rem;
}

.rotulacion-form-column,
.rotulacion-preview-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.rot-panel {
  overflow: hidden;
  background: var(--rot-panel);
  border: 1px solid var(--rot-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
}

.rot-panel-header {
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--rot-border);
}

.rot-panel-label {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--rot-tape);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rot-panel-header h3 {
  color: var(--rot-text);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.rot-panel-icon {
  color: var(--rot-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.rot-panel-body {
  padding: 1.05rem;
}

.rot-textarea-label,
.rot-field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.38rem;
  color: var(--rot-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rot-field label b {
  color: var(--rot-danger);
  font-size: 0.62rem;
  font-weight: 600;
}

.rot-field label em,
.rot-field label span {
  color: var(--gray-500);
  font-style: normal;
  font-size: 0.65rem;
  letter-spacing: 0;
  text-transform: none;
}

.rot-panel textarea,
.rot-panel input {
  width: 100%;
  color: var(--rot-text);
  font: inherit;
  background: var(--rot-panel-raised);
  border: 1px solid var(--rot-border);
  border-radius: 8px;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.rot-panel textarea:focus,
.rot-panel input:focus {
  border-color: var(--primary-red-light);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

.rot-panel textarea {
  min-height: 126px;
  padding: 0.75rem;
  resize: vertical;
  color: var(--rot-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  line-height: 1.55;
  border-style: dashed;
}

.rot-panel textarea::placeholder,
.rot-panel input::placeholder {
  color: var(--gray-500);
  opacity: 1;
}

.rot-action-row {
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.rot-action-row .btn {
  min-height: 40px;
}

.rot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 24px;
  margin-top: 0.7rem;
}

.rot-chip {
  padding: 0.22rem 0.5rem;
  color: var(--rot-ok);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(66, 217, 130, 0.55);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.67rem;
}

.rot-chip.is-muted {
  color: var(--gray-400);
  background: rgba(161, 161, 170, 0.08);
  border-color: var(--gray-700);
}

.rot-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.rot-field {
  min-width: 0;
}

.rot-field-full {
  grid-column: 1 / -1;
}

.rot-field input {
  min-height: 42px;
  padding: 0.65rem 0.7rem;
  font-size: 1rem;
}

.rot-field input#rot-dni,
.rot-field input#rot-telefono {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
}

.rot-field input.is-invalid {
  border-color: var(--error);
  background: rgba(239, 68, 68, 0.08);
}

.rot-hint {
  margin: 0.45rem 0 0;
  padding: 0.5rem 0.65rem;
  color: #fbd36a;
  font-size: 0.74rem;
  line-height: 1.45;
  background: rgba(245, 158, 11, 0.1);
  border-left: 2px solid var(--warning);
}

.rot-switch {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.1rem;
  color: var(--rot-text);
  cursor: pointer;
  font-size: 0.83rem;
}

.rot-switch input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--primary-red);
}

.rot-switch small {
  color: var(--rot-muted);
  font-size: 0.72rem;
}

.rot-home-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.9rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--rot-border);
  border-radius: 10px;
}

.rot-home-fields[hidden],
.rot-roll-tip[hidden],
.rot-queue-actions[hidden],
.rot-zoom[hidden] {
  display: none;
}

.rot-form-message {
  min-height: 1.3em;
  margin: 0.8rem 0 0;
  color: var(--rot-muted);
  font-size: 0.78rem;
}

.rot-form-message.is-error {
  color: var(--rot-danger);
}

.rot-form-actions {
  padding-top: 0.9rem;
  margin-top: 0.2rem;
  border-top: 1px solid var(--rot-border);
}

.rot-preview-panel {
  background: var(--rot-panel-raised);
}

.rot-preview-header {
  gap: 0.8rem;
}

.rot-zoom-button {
  flex: 0 0 auto;
}

.rot-format-bar {
  align-items: stretch;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 1.05rem;
  background: rgba(0, 0, 0, 0.16);
  border-bottom: 1px solid var(--rot-border);
}

.rot-format-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  border: 1px solid var(--gray-600);
  border-radius: 7px;
  overflow: hidden;
}

.rot-format-picker button {
  min-width: 0;
  min-height: 34px;
  padding: 0.35rem 0.45rem;
  color: var(--rot-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.67rem;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--gray-600);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.rot-format-picker button:last-child {
  border-right: 0;
}

.rot-format-picker button:hover,
.rot-format-picker button[aria-pressed="true"] {
  color: var(--rot-ink);
  background: var(--rot-tape);
}

.rot-format-tag {
  color: var(--rot-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.67rem;
  white-space: normal;
}

.rot-preview-stage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 360px;
  padding: 1rem;
  overflow: hidden;
  background: #4c4f55;
}

.rot-scaler {
  position: relative;
  transform-origin: top left;
}

.rot-format-hint,
.rot-roll-tip {
  margin: 0;
  padding: 0.65rem 1.05rem;
  color: var(--rot-muted);
  font-size: 0.72rem;
  line-height: 1.4;
  border-top: 1px solid var(--rot-border);
}

.rot-roll-tip {
  color: #fbd36a;
  background: rgba(245, 158, 11, 0.08);
}

.rot-preview-action {
  justify-content: flex-end;
  padding: 0.85rem 1.05rem 1rem;
  border-top: 1px solid var(--rot-border);
}

.rot-print-button {
  min-height: 43px;
}

.rot-queue {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rot-queue-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.65rem 1.05rem;
  border-bottom: 1px solid var(--rot-border);
}

.rot-queue-number {
  flex: 0 0 auto;
  padding: 0.18rem 0.4rem;
  color: #fff;
  background: var(--primary-red);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
}

.rot-queue-copy {
  flex: 1;
  min-width: 0;
}

.rot-queue-copy strong,
.rot-queue-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rot-queue-copy strong {
  color: var(--rot-text);
  font-size: 0.8rem;
  font-weight: 600;
}

.rot-queue-copy small {
  margin-top: 0.15rem;
  color: var(--rot-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
}

.rot-queue-item .btn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0.35rem 0.55rem;
  font-size: 0.68rem;
}

.rot-queue-empty {
  padding: 1.7rem 1.05rem;
  color: var(--rot-muted);
  text-align: center;
}

.rot-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0.6rem;
  color: var(--gray-500);
  border: 1px dashed var(--gray-600);
  border-radius: 10px;
}

.rot-empty-icon svg {
  width: 20px;
  height: 20px;
}

.rot-queue-empty p,
.rot-queue-empty small {
  display: block;
  margin: 0;
}

.rot-queue-empty p {
  color: var(--rot-text);
  font-size: 0.82rem;
}

.rot-queue-empty small {
  max-width: 34ch;
  margin: 0.35rem auto 0;
  font-size: 0.73rem;
}

.rot-queue-actions {
  justify-content: flex-end;
  padding: 0.75rem 1.05rem;
}

/* Formato físico de los rótulos */
.rot-sheet,
.rot-strip,
.rot-roll-page,
.rot-join {
  box-sizing: border-box;
}

.rot-sheet {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #000;
  font-family: 'Poppins', Arial, sans-serif;
  background: var(--rot-paper);
}

.rot-sheet.rot-a4 { width: 210mm; height: 297mm; padding: 10mm; }
.rot-sheet.rot-a5 { width: 148mm; height: 210mm; padding: 7mm; }

.rot-frame {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  border: 4px solid #000;
}

.rot-block {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 3mm 4mm 4mm;
  border-bottom: 3px solid #000;
}

.rot-block:last-of-type { border-bottom: 0; }
.rot-destination { flex: 1.1; }
.rot-agency { flex: 0.55; }
.rot-recipient { flex: 1.85; }
.rot-extra { flex: 0.6; }

.rot-label {
  align-self: flex-start;
  padding: 0.8mm 2.5mm;
  margin-bottom: 2mm;
  color: #fff;
  background: #000;
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.9mm;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.rot-sheet.rot-a5 .rot-label { font-size: 2.5mm; letter-spacing: 0.18em; }

.rot-row,
.rot-srow {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 4mm;
}

.rot-row > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.rot-row > div.rot-tel { flex: 0.55; }

.rot-agency .rot-label { margin-bottom: 1.4mm; }

.rot-location-meta {
  display: flex;
  flex: 0 0 auto;
  gap: 5mm;
  padding-top: 2mm;
  margin-top: 2mm;
  border-top: 1.2px solid #000;
}

.rot-location-meta > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.rot-location-meta .rot-fit {
  flex: 0 0 11mm;
  min-height: 11mm;
}

.rot-location-meta .rot-label {
  margin-bottom: 1mm;
}

.rot-foot {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 4mm;
  padding: 2.2mm 4mm;
  color: #fff;
  background: #000;
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.9mm;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rot-sheet.rot-a5 .rot-foot { font-size: 2.4mm; }
.rot-guide { padding: 1mm 4mm; border: 1px solid #fff; letter-spacing: 0.2em; }

.rot-fit {
  display: flex;
  flex: 1;
  align-items: center;
  min-height: 0;
  overflow: hidden;
}

.rot-fit > div {
  width: 100%;
  color: #000;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  line-height: 0.92;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.rot-fit.rot-mono > div {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1;
}

.rot-fit.rot-plain > div {
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 600;
  line-height: 1.1;
  text-transform: none;
  letter-spacing: 0;
}

.rot-fit.rot-small-line { flex: 0.45; margin-top: 1.5mm; }
.rot-fit.rot-dni-box { flex: 0.9; margin-top: 2mm; }

.rot-join {
  display: flex;
  flex-direction: column;
  gap: 2mm;
}

.rot-strip {
  display: flex;
  height: 80mm;
  padding: 3mm;
  overflow: hidden;
  color: #000;
  font-family: 'Poppins', Arial, sans-serif;
  background: #fff;
}

.rot-strip.rot-r25 { width: 250mm; }
.rot-strip.rot-r18 { width: 180mm; }

.rot-sframe {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 2.5mm 4mm 2mm;
  border: 2.5px solid #000;
}

.rot-srow { gap: 5mm; }

.rot-scol {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.rot-scol + .rot-scol { padding-left: 5mm; border-left: 2.5px solid #000; }

.rot-recipient-strip { flex: 2.1; }

.rot-recipient-name { flex: 1.3; }

.rot-contact-strip {
  flex: 0.8;
  justify-content: center;
}

.rot-contact-strip .rot-fit {
  flex: 1;
  min-height: 0;
}

.rot-contact-strip .rot-fit.rot-contact-value {
  margin-top: 0;
}

.rot-contact-value > div {
  overflow-wrap: normal;
  white-space: nowrap;
}

.rot-address-meta {
  display: flex;
  flex: 0 0 16mm;
  flex-direction: column;
  min-height: 0;
  padding-top: 1.5mm;
  margin-top: 1.5mm;
  border-top: 1.2px solid #000;
}

.rot-address-meta .rot-label { margin-bottom: 0.8mm; }
.rot-address-meta .rot-fit { flex: 1; }

.rot-label.rot-line-label {
  padding: 0.6mm 2mm;
  margin-bottom: 1.5mm;
  color: #000;
  background: #fff;
  border: 1.2px solid #000;
  font-size: 2.7mm;
}

.rot-label.rot-label-spaced { margin-top: 1.5mm; }

.rot-sfoot {
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  gap: 4mm;
  padding-top: 1.2mm;
  margin-top: 1.8mm;
  border-top: 1.2px solid #000;
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.7mm;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rot-sfoot span:last-child { overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

.rot-cut {
  padding-top: 0.6mm;
  color: #5a6169;
  border-top: 1px dashed #5a6169;
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.6mm;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

.rot-roll-page {
  position: relative;
  width: 80mm;
  overflow: hidden;
  color: #000;
  background: #fff;
}

.rot-roll-page.rot-r25 { height: 250mm; }
.rot-roll-page.rot-r18 { height: 180mm; }

.rot-roll-page > .rot-strip {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(80mm) rotate(90deg);
  transform-origin: 0 0;
}

#rot-measure {
  position: absolute;
  top: 0;
  left: -30000px;
  visibility: hidden;
  pointer-events: none;
}

#rot-print-root { display: none; }

.rot-zoom {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: rgba(10, 10, 10, 0.96);
}

.rot-zoom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  color: #fff;
  border-bottom: 1px solid var(--gray-700);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rot-zoom-stage {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 1rem;
  overflow: auto;
}

.rot-zoom-scaler { position: relative; transform-origin: top left; }
.rot-zoom-scaler > * { position: absolute; top: 0; left: 0; }

@media print {
  html,
  body {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.rotulacion-print {
    background: #fff !important;
  }

  /* Mantener la cadena de padres, pero quitar su altura y flujo de pantalla. */
  body.rotulacion-print > * {
    display: none !important;
  }

  body.rotulacion-print #app,
  body.rotulacion-print #app .app-container,
  body.rotulacion-print #app .main-content,
  body.rotulacion-print #app .content-area,
  body.rotulacion-print #app .rotulacion-page,
  body.rotulacion-print #rot-print-root {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.rotulacion-print #app .main-content {
    margin-left: 0 !important;
  }

  body.rotulacion-print #app .sidebar,
  body.rotulacion-print #app .main-header,
  body.rotulacion-print #app .sidebar-overlay,
  body.rotulacion-print .rotulacion-page > *:not(#rot-print-root) {
    display: none !important;
  }

  body.rotulacion-print #rot-print-root {
    position: static !important;
    width: fit-content;
    box-sizing: border-box;
  }

  body.rotulacion-print #rot-print-root > * {
    display: block !important;
    break-inside: avoid-page;
    page-break-inside: avoid;
    page-break-after: always;
    break-after: page;
  }

  body.rotulacion-print #rot-print-root > * + * {
    page-break-before: always;
    break-before: page;
  }

  body.rotulacion-print #rot-print-root.rot-print-r25 > .rot-roll-page {
    width: 80mm !important;
    height: 250mm !important;
  }

  body.rotulacion-print #rot-print-root.rot-print-r18 > .rot-roll-page {
    width: 80mm !important;
    height: 180mm !important;
  }

  body.rotulacion-print #rot-print-root > *:last-child {
    page-break-after: auto;
    break-after: auto;
  }
}

@media (max-width: 1180px) {
  .rotulacion-layout { grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr); }
}

@media (max-width: 900px) {
  .rotulacion-layout { grid-template-columns: 1fr; }
  .rotulacion-preview-column { order: -1; }
  .rot-preview-stage { min-height: 300px; }
}

@media (max-width: 600px) {
  .rotulacion-page { padding-bottom: 1rem; }
  .rotulacion-layout { gap: 0.75rem; }
  .rotulacion-form-column,
  .rotulacion-preview-column { gap: 0.75rem; }
  .rot-panel-body { padding: 0.85rem; }
  .rot-form-grid,
  .rot-home-fields { grid-template-columns: 1fr; gap: 0.75rem; }
  .rot-field-full { grid-column: auto; }
  .rot-home-fields .rot-field-full { grid-column: auto; }
  .rot-format-picker button { flex: 1; padding-inline: 0.35rem; }
  .rot-preview-stage { min-height: 250px; padding: 0.65rem; }
  .rot-preview-action { padding-inline: 0.85rem; }
  .rot-print-button { width: 100%; justify-content: center; }
  .rot-queue-item { flex-wrap: wrap; }
  .rot-queue-copy { min-width: calc(100% - 50px); }
  .rot-queue-item .btn { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .rot-panel textarea,
  .rot-panel input,
  .rot-format-picker button { transition: none; }
}

body[data-theme="light"] .rotulacion-page {
  --rot-panel: #ffffff;
  --rot-panel-raised: #f4f4f5;
  --rot-border: #d4d4d8;
  --rot-text: #18181b;
  --rot-muted: #52525b;
}

body[data-theme="light"] .rot-panel textarea,
body[data-theme="light"] .rot-panel input { color: var(--rot-text); }

body[data-theme="light"] .rot-preview-stage { background: #d4d4d8; }
body[data-theme="light"] .rot-format-bar { background: #fafafa; }

body[data-theme="light"] .main-content {
  background: #F4F4F5;
}

body[data-theme="light"] .main-header {
  background: #FFFFFF;
  border-bottom-color: #D4D4D8;
}

body[data-theme="light"] .header-title {
  color: #18181B;
}

body[data-theme="light"] .card {
  background: #FFFFFF;
  border-color: #D4D4D8;
}

body[data-theme="light"] .card-header {
  background: #FAFAFA;
  border-bottom-color: #D4D4D8;
}

body[data-theme="light"] .card-title {
  color: #18181B;
}

body[data-theme="light"] .table th {
  background: #F4F4F5;
  color: #3F3F46;
  border-color: #D4D4D8;
}

body[data-theme="light"] .table td {
  border-color: #E4E4E7;
  color: #18181B;
}

body[data-theme="light"] .table tr:hover {
  background: #FAFAFA;
}

body[data-theme="light"] .pos-cart {
  background: #FFFFFF;
  border-color: #D4D4D8;
}

body[data-theme="light"] .cart-header {
  border-bottom-color: #D4D4D8;
}

body[data-theme="light"] .cart-header h3 {
  color: #18181B;
}

body[data-theme="light"] .cart-item {
  background: #F4F4F5;
}

body[data-theme="light"] .cart-item-name {
  color: #18181B;
}

body[data-theme="light"] .cart-footer {
  background: #FAFAFA;
  border-top-color: #D4D4D8;
}

body[data-theme="light"] .cart-total-row {
  color: #52525B;
}

body[data-theme="light"] .cart-total-row.total {
  color: #18181B;
  border-top-color: #D4D4D8;
}

body[data-theme="light"] .product-card {
  background: #FFFFFF;
  border-color: #D4D4D8;
}

body[data-theme="light"] .product-card:hover {
  border-color: var(--primary-red);
}

body[data-theme="light"] .product-name {
  color: #18181B;
}

body[data-theme="light"] .product-info {
  color: #71717A;
}

body[data-theme="light"] .form-input,
body[data-theme="light"] .form-select,
body[data-theme="light"] .form-textarea {
  background: #FFFFFF;
  border-color: #D4D4D8;
  color: #18181B;
}

body[data-theme="light"] .search-box input {
  background: #FFFFFF;
  border-color: #D4D4D8;
  color: #18181B;
}

body[data-theme="light"] .stats-grid .stat-card {
  background: #FFFFFF;
  border-color: #D4D4D8;
}

body[data-theme="light"] .stat-label {
  color: #71717A;
}

body[data-theme="light"] .stat-value {
  color: #18181B;
}

body[data-theme="light"] .payment-btn {
  background: #FFFFFF;
  border-color: #D4D4D8;
  color: #3F3F46;
}

body[data-theme="light"] .payment-btn:hover {
  background: #F4F4F5;
}

body[data-theme="light"] .qty-btn {
  background: #E4E4E7;
  color: #18181B;
}

body[data-theme="light"] .settings-section {
  border-bottom-color: #D4D4D8;
}

body[data-theme="light"] .info-box {
  background: #F4F4F5;
  border-color: #D4D4D8;
}

body[data-theme="light"] .theme-option {
  background: #FFFFFF;
  border-color: #D4D4D8;
}

body[data-theme="light"] .modal {
  background: #FFFFFF;
  border-color: #D4D4D8;
}

body[data-theme="light"] .modal-header {
  border-bottom-color: #D4D4D8;
}

body[data-theme="light"] .modal-title {
  color: #18181B;
}

body[data-theme="light"] .modal-footer {
  border-top-color: #D4D4D8;
}

body[data-theme="light"] .pedido-card {
  background: #FFFFFF;
  border-color: #D4D4D8;
}

body[data-theme="light"] .pedido-header {
  background: #F4F4F5;
  border-bottom-color: #D4D4D8;
}

body[data-theme="light"] .producto-check {
  background: #F4F4F5;
}

body[data-theme="light"] .text-muted {
  color: #71717A !important;
}

/* ============================================
   RESPONSIVE - MÓVIL Y TABLET
   ============================================ */

/* Tablet landscape */
@media (max-width: 1200px) {
  .sidebar {
    width: 240px;
  }
  .main-content {
    margin-left: 240px;
  }
  .pos-layout {
    grid-template-columns: 1fr 320px;
  }
}

/* Tablet portrait */
@media (max-width: 1024px) {
  .sidebar {
    width: 220px;
  }
  .main-content {
    margin-left: 220px;
  }
  .pos-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .pos-cart {
    max-height: none;
  }
}

/* Mobile y tablet pequeña */
@media (max-width: 768px) {
  .sidebar {
    width: 280px;
    transform: translateX(-100%);
    box-shadow: none;
  }
  
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
  }
  
  .main-content {
    margin-left: 0;
  }
  
  .main-header {
    padding: 0.75rem 1rem;
  }
  
  #menu-toggle {
    display: flex !important;
  }
  
  .header-title {
    font-size: 1rem;
  }
  
  .content-area {
    padding: 1rem;
  }
  
  .pos-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .pos-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .product-card {
    padding: 0.75rem;
  }
  
  .product-name {
    font-size: 0.8rem;
  }
  
  .product-price {
    font-size: 0.9rem;
  }
  
  .pos-cart {
    max-height: none;
    min-height: auto;
  }
  
  .cart-items {
    max-height: 200px;
  }
  
  .cart-footer {
    padding: 1rem;
  }
  
  .payment-methods {
    gap: 0.5rem;
  }
  
  .payment-btn {
    padding: 0.75rem 0.5rem;
    font-size: 0.75rem;
  }
  
  .payment-btn svg {
    width: 20px;
    height: 20px;
  }
  
  .cart-actions {
    gap: 0.5rem;
  }
  
  .cart-actions .btn {
    padding: 0.75rem;
    font-size: 0.85rem;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .table-container {
    overflow-x: auto;
  }
  
  .table {
    min-width: 600px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .stat-card {
    padding: 1rem;
  }
  
  .modal {
    width: 95%;
    max-width: none;
    margin: 1rem;
    max-height: 90vh;
  }
  
  .modal-body {
    padding: 1rem;
    max-height: 60vh;
    overflow-y: auto;
  }
}

/* Mobile pequeño */
@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
  
  .pos-products-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  
  .product-card {
    padding: 0.6rem;
  }
  
  .product-name {
    font-size: 0.75rem;
  }
  
  .product-info {
    font-size: 0.65rem;
  }
  
  .product-price {
    font-size: 0.8rem;
  }
  
  .product-stock {
    font-size: 0.65rem;
  }
  
  .cart-item {
    padding: 0.5rem;
    gap: 0.5rem;
  }
  
  .cart-item-name {
    font-size: 0.75rem;
  }
  
  .qty-btn {
    width: 24px;
    height: 24px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .login-card {
    padding: 1.5rem;
  }
  
  .pin-keypad {
    gap: 0.5rem;
  }
  
  .pin-key {
    width: 60px;
    height: 60px;
    font-size: 1.25rem;
  }
}

/* Landscape móvil */
@media (max-height: 500px) and (orientation: landscape) {
  .login-screen {
    padding: 1rem;
    flex-direction: row;
    gap: 2rem;
  }
  
  .login-logo {
    margin-bottom: 0;
  }
  
  .login-logo h1 {
    font-size: 1.5rem;
  }
  
  .login-card {
    padding: 1rem;
  }
  
  .pin-keypad {
    gap: 0.4rem;
  }
  
  .pin-key {
    width: 50px;
    height: 50px;
    font-size: 1rem;
  }
  
}

/* Overlay para cerrar sidebar en móvil */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 99;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.sidebar.open + .sidebar-overlay,
.sidebar.open ~ .sidebar-overlay {
  display: block !important;
}

/* Botón de menú hamburguesa */
#menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: 8px;
  color: var(--white);
  cursor: pointer;
  transition: var(--transition-fast);
}

#menu-toggle:hover {
  background: var(--gray-700);
}

#menu-toggle svg {
  width: 24px;
  height: 24px;
}

/* Mostrar botón de menú en móviles */
@media (max-width: 992px) {
  #menu-toggle {
    display: flex !important;
  }
}

/* Asegurar que el botón de menú se oculte en escritorio */
@media (min-width: 993px) {
  #menu-toggle {
    display: none !important;
  }
  
  .sidebar-overlay {
    display: none !important;
  }
}

/* ============================================
   NUEVO DISEÑO POS - COMPACTO
   ============================================ */

.pos-layout-new {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1rem;
  height: calc(100vh - 120px);
}

.pos-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pos-products-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.pos-products-header .search-box {
  flex: 1;
}

.pos-sidebar {
  background: var(--gray-900);
  border: 1px solid var(--gray-700);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cart-mini-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--gray-800);
  border-bottom: 1px solid var(--gray-700);
  font-weight: 600;
  font-size: 0.9rem;
}

.cart-total-mini {
  color: var(--primary-red);
  font-family: 'JetBrains Mono', monospace;
}

.cart-items-compact {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  max-height: 300px;
}

.cart-empty-mini {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--gray-500);
  font-size: 0.85rem;
}

.cart-item-compact {
  background: var(--gray-800);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}

.cart-item-compact .item-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.cart-item-compact .item-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.cart-item-compact .item-price {
  font-size: 0.75rem;
  color: var(--gray-400);
}

.cart-item-compact .item-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qty-btn-sm {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: var(--gray-700);
  color: var(--white);
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qty-btn-sm:hover {
  background: var(--primary-red);
}

.cart-item-compact .item-qty {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.cart-item-compact .item-subtotal {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--primary-red);
  margin-left: auto;
}

.cart-item-compact .remove-btn {
  background: none;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0 0.25rem;
}

.cart-item-compact .remove-btn:hover {
  color: var(--error);
}

.cart-footer-compact {
  padding: 0.75rem;
  border-top: 1px solid var(--gray-700);
  background: var(--black);
}

.cart-summary {
  margin-bottom: 0.75rem;
}

.cart-summary .summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  color: var(--gray-400);
}

.cart-summary .summary-row.total {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  padding-top: 0.5rem;
  border-top: 1px solid var(--gray-700);
  margin-top: 0.5rem;
}

.cart-summary .summary-row.total span:last-child {
  color: var(--primary-red);
}

.cart-summary input {
  width: 60px;
  padding: 0.25rem;
  text-align: right;
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: 4px;
  color: var(--white);
  font-size: 0.8rem;
}

.payment-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.pay-btn {
  flex: 1;
  padding: 0.6rem;
  background: var(--gray-800);
  border: 2px solid var(--gray-700);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.25rem;
  transition: all 0.2s;
}

.pay-btn:hover {
  border-color: var(--gray-500);
}

.pay-btn.active {
  background: var(--primary-red);
  border-color: var(--primary-red);
}

.action-row {
  display: flex;
  gap: 0.5rem;
}

.action-row .btn {
  flex: 1;
}

/* Estado botones pequeños para lista virtual */
.estado-btn-sm {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  transition: all 0.2s;
}

.estado-btn-sm.accept {
  background: rgba(34, 197, 94, 0.2);
  color: var(--success);
}
.estado-btn-sm.accept:hover {
  background: var(--success);
  color: white;
}

.estado-btn-sm.partial {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning);
}
.estado-btn-sm.partial:hover {
  background: var(--warning);
  color: white;
}

.estado-btn-sm.reject {
  background: rgba(239, 68, 68, 0.2);
  color: var(--error);
}
.estado-btn-sm.reject:hover {
  background: var(--error);
  color: white;
}

.empty-state-simple {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--gray-400);
}

.empty-state-simple p:first-child {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Responsive POS nuevo */
@media (max-width: 900px) {
  .pos-layout-new {
    grid-template-columns: 1fr;
    height: auto;
  }
  
  .pos-sidebar {
    margin-top: 1rem;
  }
  
  .cart-items-compact {
    max-height: 200px;
  }
}

@media (max-width: 600px) {
  .pos-products-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .pos-products-header .btn {
    width: 100%;
  }
  
  .payment-row {
    flex-wrap: wrap;
  }
  
  .pay-btn {
    flex: 1 1 30%;
  }
}

/* Tema claro para nuevo POS */
body[data-theme="light"] .pos-sidebar {
  background: #FFFFFF;
  border-color: #D4D4D8;
}

body[data-theme="light"] .cart-mini-header {
  background: #F4F4F5;
  border-bottom-color: #D4D4D8;
}

body[data-theme="light"] .cart-item-compact {
  background: #F4F4F5;
}

body[data-theme="light"] .cart-item-compact .item-name {
  color: #18181B;
}

body[data-theme="light"] .cart-footer-compact {
  background: #FAFAFA;
  border-top-color: #D4D4D8;
}

body[data-theme="light"] .cart-summary .summary-row {
  color: #52525B;
}

body[data-theme="light"] .cart-summary .summary-row.total {
  color: #18181B;
  border-top-color: #D4D4D8;
}

body[data-theme="light"] .qty-btn-sm {
  background: #E4E4E7;
  color: #18181B;
}

body[data-theme="light"] .pay-btn {
  background: #FFFFFF;
  border-color: #D4D4D8;
}

body[data-theme="light"] .cart-summary input {
  background: #FFFFFF;
  border-color: #D4D4D8;
  color: #18181B;
}

/* ============================================
   BOTONES DE PAGO CON IMÁGENES
   ============================================ */

.payment-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.pay-btn-img {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--gray-800);
  border: 2px solid var(--gray-700);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.pay-btn-img img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
}

.pay-btn-img span {
  font-size: 0.7rem;
  color: var(--gray-400);
  font-weight: 500;
}

.pay-btn-img:hover {
  border-color: var(--gray-500);
  transform: translateY(-2px);
}

.pay-btn-img.active {
  border-color: var(--primary-red);
  background: rgba(220, 38, 38, 0.1);
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.3);
}

.pay-btn-img.active span {
  color: var(--primary-red);
}

/* Botones grandes de acción */
.action-row-big {
  display: flex;
  gap: 0.75rem;
}

.btn-big {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-big svg {
  width: 24px;
  height: 24px;
}

.btn-secondary-big {
  background: var(--gray-700);
  color: var(--white);
}

.btn-secondary-big:hover {
  background: var(--gray-600);
}

.btn-primary-big {
  background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
}

.btn-primary-big:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5);
}

.btn-primary-big:disabled {
  background: var(--gray-700);
  color: var(--gray-500);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Cart badge */
.cart-badge {
  background: var(--primary-red);
  color: white;
  min-width: 28px;
  height: 28px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}

/* Tema claro para botones */
body[data-theme="light"] .pay-btn-img {
  background: #FFFFFF;
  border-color: #D4D4D8;
}

body[data-theme="light"] .pay-btn-img span {
  color: #52525B;
}

body[data-theme="light"] .btn-secondary-big {
  background: #E4E4E7;
  color: #18181B;
}

body[data-theme="light"] .btn-primary-big:disabled {
  background: #D4D4D8;
  color: #71717A;
}

/* ============================================
   ESTILOS REPORTES CON SVG ICONS
   ============================================ */

.section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.section-title svg {
  width: 24px;
  height: 24px;
  color: var(--primary-red);
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
}

.stat-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-800);
  border-radius: 12px;
  color: var(--primary-red);
}

.stat-icon svg {
  width: 24px;
  height: 24px;
}

.stat-info {
  flex: 1;
}

/* Profit cards */
.profit-grid {
  grid-template-columns: repeat(3, 1fr);
}

.profit-card.cost {
  background: linear-gradient(135deg, #166534 0%, #15803d 100%);
  border: none;
}

.profit-card.cost .stat-icon {
  background: rgba(255,255,255,0.2);
  color: white;
}

.profit-card.cost .stat-label {
  color: #86efac;
}

.profit-card.cost .stat-value {
  color: white;
}

.profit-card.sales {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  border: none;
}

.profit-card.sales .stat-icon {
  background: rgba(255,255,255,0.2);
  color: white;
}

.profit-card.sales .stat-label {
  color: #93c5fd;
}

.profit-card.sales .stat-value {
  color: white;
}

.profit-card.profit {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  border: none;
}

.profit-card.profit .stat-icon {
  background: rgba(255,255,255,0.2);
  color: white;
}

.profit-card.profit .stat-label {
  color: #fca5a5;
}

.profit-card.profit .stat-value {
  color: white;
}

/* Resumen grid */
.resumen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.resumen-item {
  text-align: center;
  padding: 1.5rem;
  background: var(--gray-900);
  border-radius: 12px;
}

.resumen-icon {
  margin-bottom: 0.75rem;
}

.resumen-icon svg {
  width: 32px;
  height: 32px;
}

.resumen-label {
  color: var(--gray-400);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.resumen-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.resumen-sub {
  font-size: 0.75rem;
  color: var(--gray-500);
}

/* Responsive reportes */
@media (max-width: 768px) {
  .profit-grid {
    grid-template-columns: 1fr;
  }
  
  .resumen-value {
    font-size: 1.5rem;
  }
}

/* Tema claro para reportes */
body[data-theme="light"] .stat-icon {
  background: #F4F4F5;
}

body[data-theme="light"] .resumen-item {
  background: #F4F4F5;
}

body[data-theme="light"] .resumen-label {
  color: #52525B;
}

body[data-theme="light"] .resumen-sub {
  color: #71717A;
}

/* ============================================
   NUEVOS ESTILOS v2.0 - CATEGORÍAS Y PAGOS
   ============================================ */

/* Barra de categorías */
.categories-bar {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--gray-900);
  border-radius: 12px;
  margin-bottom: 1rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--gray-800);
}

.categories-bar::-webkit-scrollbar {
  height: 6px;
}

.categories-bar::-webkit-scrollbar-track {
  background: var(--gray-800);
  border-radius: 3px;
}

.categories-bar::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 3px;
}

.category-btn {
  padding: 0.5rem 1rem;
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: 8px;
  color: var(--gray-300);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.category-btn:hover {
  background: var(--gray-700);
  border-color: var(--gray-600);
}

.category-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-color: var(--primary-red);
  color: white;
}

/* Producto stock display */
.product-stock {
  font-size: 0.7rem;
  color: var(--gray-400);
  font-family: 'JetBrains Mono', monospace;
  margin: 0.25rem 0;
}

/* Modal de efectivo */
.efectivo-modal {
  text-align: center;
}

.efectivo-modal .total-display {
  background: linear-gradient(135deg, var(--gray-800), var(--gray-900));
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.efectivo-modal .total-display .label {
  display: block;
  color: var(--gray-400);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.efectivo-modal .total-display .amount {
  font-size: 2rem;
  font-weight: 700;
  color: var(--success);
  font-family: 'JetBrains Mono', monospace;
}

.efectivo-modal .monto-input {
  font-size: 1.5rem;
  text-align: center;
  padding: 1rem;
  font-family: 'JetBrains Mono', monospace;
}

.vuelto-display {
  background: var(--gray-900);
  padding: 1.25rem;
  border-radius: 12px;
  margin-top: 1.5rem;
  border: 2px solid var(--success);
}

.vuelto-display .label {
  display: block;
  color: var(--gray-400);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.vuelto-display .amount {
  font-size: 1.75rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--success);
}

/* Modal de selección de cuenta */
.cuenta-modal {
  text-align: center;
}

.cuenta-modal .total-display {
  background: linear-gradient(135deg, var(--gray-800), var(--gray-900));
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.cuenta-modal .total-display .label {
  display: block;
  color: var(--gray-400);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.cuenta-modal .total-display .amount {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  font-family: 'JetBrains Mono', monospace;
}

.cuenta-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}

.cuenta-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--gray-800);
  border: 2px solid var(--gray-700);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cuenta-btn:hover {
  background: var(--gray-700);
  border-color: var(--primary);
  transform: translateY(-2px);
}

.cuenta-btn .cuenta-icon {
  font-size: 2rem;
}

.cuenta-btn .cuenta-name {
  color: var(--gray-100);
  font-weight: 600;
  font-size: 1rem;
}

/* Modal agregar al carrito */
.add-cart-modal {
  text-align: center;
}

.add-cart-modal h4 {
  color: var(--gray-100);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.add-cart-modal .product-detail {
  color: var(--gray-400);
  font-size: 0.9rem;
  margin: 0.25rem 0;
}

.add-cart-modal .stock-info {
  color: var(--success);
  font-size: 0.9rem;
  padding: 0.5rem;
  background: var(--success)15;
  border-radius: 8px;
  margin-top: 0.5rem;
}

.add-cart-modal .pricing-tiers {
  margin: 1rem 0 0.75rem;
  border-top: 1px solid var(--gray-700);
  border-bottom: 1px solid var(--gray-700);
}

.add-cart-modal .pricing-tiers-title {
  margin: 0;
  padding: 0.7rem 0.25rem 0.35rem;
  color: var(--gray-300);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

.add-cart-modal .pricing-tiers > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 42px;
  padding: 0.55rem 0.25rem;
  color: var(--gray-400);
  text-align: left;
}

.add-cart-modal .pricing-tiers > div + div {
  border-top: 1px solid var(--gray-800);
}

.add-cart-modal .pricing-tiers strong {
  color: var(--gray-100);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  white-space: nowrap;
}

.add-cart-modal .pricing-tiers small {
  display: block;
  margin-top: 0.15rem;
  color: var(--gray-500);
  font-size: 0.75rem;
}

.add-cart-modal .subtotal-preview {
  background: var(--gray-800);
  padding: 1rem;
  border-radius: 8px;
  color: var(--primary);
  font-weight: 600;
}

.add-cart-modal .preview-tier {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--gray-400);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Carrito - botones de cantidad */
.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.qty-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-700);
  border: 1px solid var(--gray-600);
  border-radius: 6px;
  color: var(--gray-300);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qty-btn:hover {
  background: var(--gray-600);
}

.qty-btn.minus:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
}

.qty-btn.plus:hover {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

.qty-input {
  width: 50px;
  text-align: center;
  padding: 0.25rem;
  background: var(--gray-800);
  border: 1px solid var(--gray-600);
  border-radius: 6px;
  color: var(--gray-100);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
}

/* Total redondeado */
.summary-row.total-rounded {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--gray-600);
  font-size: 1.25rem;
  color: var(--success);
}

/* Caja / Sencillo */
.caja-container {
  max-width: 1000px;
  margin: 0 auto;
}

.caja-action {
  background: var(--gray-900);
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.caja-action h4 {
  color: var(--gray-100);
  margin-bottom: 0.5rem;
}

.caja-action p {
  color: var(--gray-400);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.caja-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.caja-movements {
  margin-top: 2rem;
}

.caja-movements h4 {
  color: var(--gray-100);
  margin-bottom: 1rem;
}

/* Stock tiempo real */
.stock-row-bajo td {
  background: rgba(239, 68, 68, 0.1);
}

.stock-row-medio td {
  background: rgba(245, 158, 11, 0.1);
}

/* Stat card colores */
.stat-card.success {
  border-color: var(--success);
  background: linear-gradient(135deg, var(--success)15, var(--success)05);
}

.stat-card.warning {
  border-color: var(--warning);
  background: linear-gradient(135deg, var(--warning)15, var(--warning)05);
}

/* Responsive */
@media (max-width: 768px) {
  .categories-bar {
    padding: 0.5rem;
  }
  
  .category-btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.7rem;
  }
  
  .cuenta-buttons {
    grid-template-columns: 1fr;
  }
  
  .cart-item-qty {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .efectivo-modal .total-display .amount {
    font-size: 1.5rem;
  }
}

/* ============================================
   CAJA - ADMIN PANEL
   ============================================ */

.usuarios-caja-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.usuario-caja-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: var(--border-radius);
}

.usuario-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: bold;
  color: white;
}

.usuario-info {
  flex: 1;
}

.usuario-nombre {
  font-weight: 600;
  color: var(--white);
}

.usuario-rol {
  font-size: 0.8rem;
  color: var(--gray-400);
}

/* Pos search bar fix */
.pos-search {
  margin-bottom: 0.75rem;
}

.pos-search .search-box {
  width: 100%;
}

/* Fix efectivo modal */
.efectivo-modal .total-display,
.cuenta-modal .total-display {
  background: var(--gray-800);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  text-align: center;
  margin-bottom: 1.5rem;
}

.efectivo-modal .total-display .label,
.cuenta-modal .total-display .label {
  display: block;
  font-size: 0.9rem;
  color: var(--gray-400);
  margin-bottom: 0.5rem;
}

.efectivo-modal .total-display .amount,
.cuenta-modal .total-display .amount {
  font-size: 2rem;
  font-weight: bold;
  color: var(--primary-red);
  font-family: 'JetBrains Mono', monospace;
}

.efectivo-modal .monto-input {
  font-size: 1.5rem;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
}

.efectivo-modal .vuelto-display {
  background: var(--gray-900);
  padding: 1rem;
  border-radius: var(--border-radius);
  text-align: center;
  margin-top: 1rem;
  border: 2px solid var(--success);
}

.efectivo-modal .vuelto-display .label {
  display: block;
  font-size: 0.85rem;
  color: var(--gray-400);
  margin-bottom: 0.25rem;
}

.efectivo-modal .vuelto-display .amount {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--success);
  font-family: 'JetBrains Mono', monospace;
}

/* Fix cuenta modal buttons */
.cuenta-modal .cuenta-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}

.cuenta-btn {
  padding: 1.5rem;
  background: var(--gray-800);
  border: 2px solid var(--gray-700);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.cuenta-btn:hover {
  border-color: var(--primary-red);
  transform: translateY(-2px);
}

.cuenta-btn .cuenta-nombre {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.25rem;
}

.cuenta-btn .cuenta-tipo {
  font-size: 0.8rem;
  color: var(--gray-400);
}

/* Selector progresivo de cuentas Yape/BCP */
.cuenta-modal-instruction {
  margin: 0 0 1rem;
  color: var(--gray-300);
  text-align: center;
}

.cuenta-account-flow {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cuenta-destino-btn {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-height: 5.25rem;
  padding: 0.85rem 1rem;
  color: var(--gray-100);
  background: var(--gray-800);
  border: 2px solid var(--gray-700);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.cuenta-account-flow--yape .cuenta-destino-btn:hover {
  border-color: #8b5cf6;
}

.cuenta-account-flow--bcp .cuenta-destino-btn:hover {
  border-color: #3b82f6;
}

.cuenta-destino-btn:hover {
  background: var(--gray-700);
  transform: translateY(-1px);
}

.cuenta-destino-btn:focus-visible,
.cuenta-switch-btn:focus-visible,
.cuenta-back-btn:focus-visible {
  outline: 3px solid var(--primary-red-light);
  outline-offset: 3px;
}

.cuenta-destino-logo {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  background: #ffffff;
  border-radius: 12px;
}

.cuenta-destino-logo img {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

.cuenta-destino-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.2rem;
}

.cuenta-destino-copy strong {
  color: inherit;
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.cuenta-destino-copy small {
  color: var(--gray-400);
  font-size: 0.8rem;
}

.cuenta-destino-action {
  color: var(--gray-300);
  font-size: 0.78rem;
  font-weight: 700;
}

.cuenta-switch-btn,
.cuenta-back-btn {
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  color: var(--gray-200);
  background: transparent;
  border: 1px solid var(--gray-700);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  transition: background 180ms ease, border-color 180ms ease;
}

.cuenta-switch-btn:hover,
.cuenta-back-btn:hover {
  background: var(--gray-800);
  border-color: var(--gray-500);
}

.cuenta-back-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
}

.cuenta-back-btn svg {
  width: 1rem;
  height: 1rem;
}

body[data-theme="light"] .cuenta-modal-instruction {
  color: #603022 !important;
}

body[data-theme="light"] .cuenta-destino-btn {
  color: #2b1009;
  background: var(--warm-surface);
  border-color: var(--warm-border);
}

body[data-theme="light"] .cuenta-destino-btn:hover,
body[data-theme="light"] .cuenta-switch-btn:hover,
body[data-theme="light"] .cuenta-back-btn:hover {
  background: var(--warm-surface-raised);
}

body[data-theme="light"] .cuenta-destino-copy small,
body[data-theme="light"] .cuenta-destino-action {
  color: #603022;
}

body[data-theme="light"] .cuenta-switch-btn,
body[data-theme="light"] .cuenta-back-btn {
  color: #4f2116;
  border-color: var(--warm-border);
}

@media (max-width: 420px) {
  .cuenta-destino-btn {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.75rem;
  }

  .cuenta-destino-logo {
    width: 3rem;
    height: 3rem;
  }

  .cuenta-destino-logo img {
    width: 2.35rem;
    height: 2.35rem;
  }

  .cuenta-destino-action {
    grid-column: 2;
  }
}

/* ============================================
   CAJA - TABS Y ADMIN PANEL
   ============================================ */

.caja-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--gray-800);
  padding-bottom: 0.5rem;
}

.caja-tab {
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: none;
  color: var(--gray-400);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.caja-tab:hover {
  color: var(--white);
  background: var(--gray-800);
}

.caja-tab.active {
  color: var(--white);
  background: var(--primary-red);
}

.caja-tab svg {
  width: 18px;
  height: 18px;
}

.caja-tab-content {
  display: none;
}

.caja-tab-content.active {
  display: block;
}

/* Admin Cajas Grid */
.admin-cajas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.admin-caja-card {
  background: var(--gray-800);
  border: 2px solid var(--gray-700);
  border-radius: var(--border-radius);
  padding: 1rem;
  transition: all 0.2s;
}

.admin-caja-card.abierta {
  border-color: var(--success);
}

.admin-caja-card.cerrada {
  border-color: var(--gray-600);
  opacity: 0.8;
}

.admin-caja-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.admin-caja-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  font-size: 1rem;
}

.admin-caja-info {
  flex: 1;
}

.admin-caja-nombre {
  font-weight: 600;
  color: var(--white);
}

.admin-caja-rol {
  font-size: 0.75rem;
  color: var(--gray-400);
}

.admin-caja-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}

.admin-caja-stats .label {
  color: var(--gray-400);
}

.admin-caja-stats .value {
  color: var(--white);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

.admin-caja-actions {
  display: flex;
  gap: 0.5rem;
}

/* Stat card con icono */
.stat-card .stat-icon {
  margin-bottom: 0.5rem;
  color: var(--gray-400);
}

.stat-card .stat-icon svg {
  width: 24px;
  height: 24px;
}

.stat-card.success .stat-icon {
  color: var(--success);
}

.stat-card.warning .stat-icon {
  color: var(--warning);
}

/* Alert boxes */
.alert {
  padding: 1rem;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.alert-warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--warning);
  color: var(--warning);
}

.alert-info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid #3B82F6;
  color: #93C5FD;
}

.alert svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Table small */
.table-sm td, .table-sm th {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}

/* Form row compact */
.form-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.form-row .form-input {
  flex: 1;
}

/* ============================================
   CARRITO MEJORADO
   ============================================ */

.cart-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--gray-500);
}

.cart-empty svg {
  width: 48px;
  height: 48px;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

.cart-empty p {
  margin: 0;
  font-size: 1rem;
}

.cart-empty-hint {
  font-size: 0.75rem;
  color: var(--gray-600);
}

.cart-item {
  padding: 0.75rem;
  border-bottom: 1px solid var(--gray-800);
}

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

.cart-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.cart-item-name {
  font-weight: 600;
  color: var(--white);
  font-size: 0.9rem;
}

.cart-item-body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cart-item-price {
  font-size: 0.75rem;
  color: var(--gray-400);
  min-width: 65px;
}

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}

.cart-item-controls .qty-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 0.75rem;
  border-radius: 4px;
  background: var(--gray-700);
  border: none;
  color: var(--white);
  cursor: pointer;
}

.cart-item-controls .qty-btn:hover {
  background: var(--primary-red);
}

.cart-item-controls .qty-input {
  width: 45px;
  height: 28px;
  text-align: center;
  border: 1px solid var(--gray-600);
  background: var(--gray-800);
  color: var(--white);
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}

.cart-item-subtotal {
  font-weight: 700;
  color: var(--primary-red);
  font-size: 0.9rem;
  min-width: 70px;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
}

.cart-item-remove {
  background: none;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.cart-item-remove:hover {
  color: var(--error);
  background: rgba(239, 68, 68, 0.1);
}

.cart-item-remove svg {
  width: 16px;
  height: 16px;
}

/* Cart Footer */
.cart-footer {
  border-top: 1px solid var(--gray-800);
  padding: 1rem;
  background: var(--gray-900);
}

.cart-summary {
  margin-bottom: 1rem;
}

.cart-summary .summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
  color: var(--gray-400);
  font-size: 0.9rem;
}

.cart-summary .summary-row.total {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  border-top: 1px solid var(--gray-700);
  padding-top: 0.5rem;
  margin-top: 0.25rem;
}

.cart-summary .summary-row.cobrar {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-red);
}

.cart-summary .summary-row.cobrar span:last-child {
  font-family: 'JetBrains Mono', monospace;
}

.cart-summary .summary-row.discount input {
  width: 70px;
  padding: 0.25rem 0.5rem;
  text-align: right;
  background: var(--gray-800);
  border: 1px solid var(--gray-600);
  border-radius: 4px;
  color: var(--white);
  font-size: 0.85rem;
}

/* Payment Section */
.payment-section {
  margin-bottom: 1rem;
}

.payment-title {
  font-size: 0.8rem;
  color: var(--gray-400);
  margin-bottom: 0.5rem;
}

.payment-buttons {
  display: flex;
  gap: 0.5rem;
}

.pay-btn-img {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--gray-800);
  border: 2px solid var(--gray-700);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.pay-btn-img img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
}

.pay-btn-img span {
  font-size: 0.7rem;
  color: var(--gray-400);
}

.pay-btn-img:hover {
  border-color: var(--gray-500);
}

.pay-btn-img.active {
  border-color: var(--primary-red);
  background: rgba(220, 38, 38, 0.1);
}

.pay-btn-img.active span {
  color: var(--primary-red);
}

/* Button Procesar */
.btn-procesar {
  width: 100%;
  padding: 0.85rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-procesar svg {
  width: 20px;
  height: 20px;
}

/* Price Unit */
.price-unit {
  font-size: 0.65rem;
  color: var(--gray-500);
  font-weight: normal;
}

/* ============================================
   PROGRAMACIÓN DE CAJAS
   ============================================ */

.programacion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.programacion-card {
  background: var(--gray-800);
  border: 2px solid var(--gray-700);
  border-radius: var(--border-radius);
  padding: 1rem;
  opacity: 0.7;
  transition: all 0.2s;
}

.programacion-card.activa {
  opacity: 1;
  border-color: var(--success);
}

.prog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.prog-usuario {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.prog-avatar {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  font-size: 0.9rem;
}

.prog-nombre {
  font-weight: 600;
  color: var(--white);
}

.prog-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.prog-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.prog-row label {
  font-size: 0.8rem;
  color: var(--gray-400);
  min-width: 80px;
}

.prog-time, .prog-monto {
  flex: 1;
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
}

.prog-dias {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.prog-dia {
  padding: 0.25rem 0.5rem;
  background: var(--gray-700);
  border-radius: 4px;
  font-size: 0.7rem;
  color: var(--gray-400);
  cursor: pointer;
  transition: all 0.2s;
}

.prog-dia input {
  display: none;
}

.prog-dia.activo,
.prog-dia:has(input:checked) {
  background: var(--primary-red);
  color: white;
}

/* Switch Toggle */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--gray-600);
  transition: 0.3s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--success);
}

input:checked + .slider:before {
  transform: translateX(20px);
}

/* ============================================
   CONTROL GLOBAL DE ICONOS SVG
   ============================================ */

/* Por defecto, SVG tienen un tamaño máximo */
svg {
  max-width: 100%;
  max-height: 100%;
}

/* Iconos en títulos de cards */
.card-title svg,
.card-header svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
}

/* Iconos en headers de carrito */
.cart-header svg {
  width: 18px !important;
  height: 18px !important;
}

/* Iconos en botones */
.btn svg {
  width: 16px !important;
  height: 16px !important;
}

.btn-sm svg {
  width: 14px !important;
  height: 14px !important;
}

.btn-lg svg {
  width: 20px !important;
  height: 20px !important;
}

/* Iconos en stat-cards */
.stat-icon svg {
  width: 24px !important;
  height: 24px !important;
}

/* Iconos en carrito vacío - pequeño */
.cart-empty svg {
  width: 40px !important;
  height: 40px !important;
}

/* Iconos en tabs de caja */
.caja-tab svg {
  width: 18px !important;
  height: 18px !important;
}

/* Iconos en admin-caja cards */
.admin-caja-card svg {
  width: 16px !important;
  height: 16px !important;
}

/* Iconos en badges */
.badge svg {
  width: 12px !important;
  height: 12px !important;
}

/* ============================================
   LOGIN - SELECCIÓN DE USUARIO
   ============================================ */

.login-select-user {
  max-width: 400px;
  width: 100%;
}

.login-select-user h3 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--white);
  font-size: 1.1rem;
}

.user-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 400px;
  overflow-y: auto;
}

.user-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--gray-800);
  border: 2px solid var(--gray-700);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.user-option:hover {
  border-color: var(--primary-red);
  background: var(--gray-700);
}

.user-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: bold;
  color: white;
}

.user-info {
  flex: 1;
}

.user-name {
  font-weight: 600;
  color: var(--white);
  font-size: 1rem;
}

.user-role {
  font-size: 0.8rem;
  color: var(--gray-400);
}

/* Login con usuario seleccionado */
.login-user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gray-700);
}

.login-avatar {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: bold;
  color: white;
}

.login-user-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
}

/* ============================================
   CARRITO - ESTILOS NUEVOS
   ============================================ */

.cart-empty-msg {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--gray-500);
  font-size: 0.9rem;
}

.cart-row {
  padding: 0.75rem;
  border-bottom: 1px solid var(--gray-800);
}

.cart-row:last-child {
  border-bottom: none;
}

.cart-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.cart-prod-name {
  font-weight: 600;
  color: var(--white);
  font-size: 0.85rem;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 0.5rem;
}

.cart-btn-remove {
  background: none;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-btn-remove:hover {
  color: var(--error);
  background: rgba(239, 68, 68, 0.1);
}

.cart-btn-remove svg {
  width: 14px !important;
  height: 14px !important;
}

.cart-row-bottom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cart-prod-price {
  font-size: 0.7rem;
  color: var(--gray-500);
  min-width: 55px;
}

.cart-qty-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.cart-qty-controls button {
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 0.7rem;
  border-radius: 4px;
  background: var(--gray-700);
  border: none;
  color: var(--white);
  cursor: pointer;
}

.cart-qty-controls button:hover {
  background: var(--primary-red);
}

.cart-qty-controls input {
  width: 40px;
  height: 26px;
  text-align: center;
  border: 1px solid var(--gray-600);
  background: var(--gray-800);
  color: var(--white);
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.cart-prod-subtotal {
  font-weight: 700;
  color: var(--primary-red);
  font-size: 0.85rem;
  min-width: 60px;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
}

/* Cart header más compacto */
.pos-cart .cart-header {
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--gray-800);
}

.pos-cart .cart-header h3 {
  font-size: 0.95rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pos-cart .cart-header h3 svg {
  width: 18px !important;
  height: 18px !important;
}

/* Cart items scroll */
.pos-cart .cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  max-height: calc(100vh - 450px);
}

/* ============================================
   LOGIN - ESTADO BLOQUEADO
   ============================================ */

.pin-display.blocked {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: var(--error) !important;
}

.blocked-msg {
  color: var(--error);
  font-size: 0.9rem;
  font-weight: 600;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pin-key:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   FIX - STAT VALUES SIN SEPARAR
   ============================================ */

.stat-value {
  white-space: nowrap;
}

/* ============================================
   LOGIN - ESCRIBIR USUARIO
   ============================================ */

.login-username {
  max-width: 360px;
  width: 100%;
}

.login-username h3 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--white);
  font-size: 1.1rem;
}

.login-input {
  font-size: 1.1rem !important;
  padding: 1rem !important;
  text-align: center;
}

.login-input.error {
  border-color: var(--error) !important;
  animation: shake 0.3s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.login-error-msg {
  text-align: center;
  color: var(--error);
  font-size: 0.85rem;
  margin-top: 1rem;
}

/* ============================================
   CAJA CERRADA NOTICE
   ============================================ */

.caja-cerrada-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  min-height: 400px;
  background: var(--gray-900);
  border-radius: 12px;
  margin: 2rem;
}

.caja-cerrada-icon {
  width: 80px;
  height: 80px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.caja-cerrada-icon svg {
  width: 40px;
  height: 40px;
  color: #EF4444 !important;
}

.caja-cerrada-notice h3 {
  font-size: 1.75rem;
  color: #FFFFFF !important;
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.caja-cerrada-notice p {
  color: #9CA3AF !important;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.caja-cerrada-notice .btn {
  margin-top: 1.5rem;
}

/* ============================================
   FORM ROWS PARA CONTRATOS
   ============================================ */

.form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.form-row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 768px) {
  .form-row-3,
  .form-row-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .form-row-3,
  .form-row-4 {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   PEDIDOS A TALLER - ESTILOS MEJORADOS
   ============================================ */

.pedido-auto-modal table {
  font-size: 0.85rem;
}

.pedido-auto-modal th,
.pedido-auto-modal td {
  padding: 0.5rem;
  vertical-align: middle;
}

.pedido-auto-modal input[type="number"] {
  width: 70px;
  text-align: center;
}

.pedido-auto-modal input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.productos-pedido-list {
  max-height: 400px;
  overflow-y: auto;
}

.header-actions {
  display: flex;
  gap: 0.5rem;
}

.pedido-obs {
  padding: 0.5rem;
  background: var(--gray-800);
  border-bottom: 1px solid var(--gray-700);
  color: var(--gray-400);
}

.pedido-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.item-exceso {
  font-size: 0.75rem;
  color: var(--warning);
  margin-left: 0.5rem;
}

/* Contratos layout */
.contratos-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.table-compact th,
.table-compact td {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}

/* Lista Virtual - tipo producto buttons */
.producto-tipo-btn {
  flex: 1;
}

.producto-tipo-btn.active {
  background: var(--primary-red);
  border-color: var(--primary-red);
  color: white;
}

/* ============================================
   PRODUCTOS AGRUPADOS POR CATEGORÍA
   ============================================ */

.category-section {
  margin-bottom: 1rem;
}

.category-section-title {
  background: linear-gradient(90deg, var(--primary-red), transparent);
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 6px 6px 0 0;
  margin-bottom: 0.5rem;
}

.category-products {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.category-products .product-card {
  width: 140px;
  flex-shrink: 0;
}

/* ============================================
   PEDIDOS - ESTILOS CONFIRMADO
   ============================================ */

.pedido-confirmado {
  opacity: 0.7;
  border-color: var(--success) !important;
}

.pedido-confirmado .pedido-header {
  background: rgba(34, 197, 94, 0.1);
}

.pedido-enviado {
  border-color: #3B82F6 !important;
  border-width: 2px;
}

.pedido-enviado .pedido-header {
  background: rgba(59, 130, 246, 0.15);
}

.pedido-enviado .badge-info {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ============================================
   POS RESPONSIVE - FIX PARA PANTALLAS PEQUEÑAS
   ============================================ */

/* Pantallas medianas (tablets landscape, laptops pequeños) */
@media (max-width: 1200px) {
  .pos-container {
    grid-template-columns: 1fr 320px;
  }
  
  .pos-cart {
    width: 320px;
  }
  
  .product-card {
    padding: 0.5rem;
  }
  
  .product-name {
    font-size: 0.75rem;
  }
  
  .product-price {
    font-size: 0.8rem;
  }
}

/* Tablets y laptops pequeños */
@media (max-width: 1024px) {
  .pos-container {
    grid-template-columns: 1fr 280px;
    gap: 0.75rem;
  }
  
  .pos-products-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
  }
  
  .category-section-title {
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem;
  }
  
  .category-products {
    gap: 0.5rem;
  }
  
  .category-products .product-card {
    width: 120px;
  }
  
  .cart-footer {
    padding: 0.75rem;
  }
  
  .summary-row {
    font-size: 0.85rem;
  }
  
  .pay-btn-img {
    padding: 0.5rem;
  }
  
  .pay-btn-img img {
    width: 28px;
    height: 28px;
  }
  
  .pay-btn-img span {
    font-size: 0.65rem;
  }
}

/* Tablets portrait */
@media (max-width: 900px) {
  .pos-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    height: calc(100vh - 120px);
  }
  
  .pos-products {
    min-height: 300px;
  }
  
  .pos-cart {
    width: 100%;
    max-height: 45vh;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  }
  
  .pos-products-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
  
  .category-products {
    gap: 0.5rem;
  }
  
  .category-products .product-card {
    width: 130px;
  }
  
  .cart-items {
    max-height: 120px;
    overflow-y: auto;
  }
  
  .cart-footer {
    padding: 0.5rem 0.75rem;
  }
  
  .cart-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 1rem;
  }
  
  .summary-row.total,
  .summary-row.cobrar {
    grid-column: span 2;
  }
  
  .payment-buttons {
    justify-content: center;
  }
  
  .btn-procesar {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
}

/* Móviles grandes */
@media (max-width: 768px) {
  .pos-container {
    height: calc(100vh - 110px);
    gap: 0.5rem;
  }
  
  .pos-search .search-box {
    padding: 0.5rem 0.75rem;
  }
  
  .pos-search .search-box input {
    font-size: 0.85rem;
  }
  
  .categories-bar {
    gap: 0.25rem;
    padding: 0.5rem 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .category-btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.7rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .pos-products-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.4rem;
    padding-right: 0.25rem;
  }
  
  .category-products {
    gap: 0.4rem;
  }
  
  .category-products .product-card {
    width: 110px;
  }
  
  .category-section-title {
    font-size: 0.7rem;
    padding: 0.35rem 0.6rem;
  }
  
  .product-card {
    padding: 0.4rem;
  }
  
  .product-name {
    font-size: 0.7rem;
    margin-bottom: 0.15rem;
  }
  
  .product-info {
    font-size: 0.6rem;
    margin-bottom: 0.15rem;
  }
  
  .product-stock {
    font-size: 0.55rem;
  }
  
  .product-price {
    font-size: 0.75rem;
  }
  
  .price-unit {
    font-size: 0.55rem;
  }
  
  .pos-cart {
    max-height: 40vh;
  }
  
  .cart-header {
    padding: 0.5rem 0.75rem;
  }
  
  .cart-header h3 {
    font-size: 0.9rem;
  }
  
  .cart-items {
    max-height: 80px;
  }
  
  .cart-row {
    padding: 0.4rem 0.5rem;
  }
  
  .cart-prod-name {
    font-size: 0.75rem;
  }
  
  .cart-qty-controls button {
    width: 22px;
    height: 22px;
    font-size: 0.7rem;
  }
  
  .cart-qty-controls input {
    width: 32px;
    font-size: 0.75rem;
  }
  
  .cart-prod-subtotal {
    font-size: 0.8rem;
  }
  
  .summary-row {
    font-size: 0.8rem;
    padding: 0.2rem 0;
  }
  
  .summary-row.total span:last-child,
  .summary-row.cobrar span:last-child {
    font-size: 1rem;
  }
  
  .payment-section {
    margin-top: 0.5rem;
  }
  
  .payment-title {
    font-size: 0.75rem;
    margin-bottom: 0.4rem;
  }
  
  .pay-btn-img {
    padding: 0.4rem;
    min-width: 60px;
  }
  
  .pay-btn-img img {
    width: 24px;
    height: 24px;
  }
  
  .pay-btn-img span {
    font-size: 0.6rem;
  }
  
  .btn-procesar {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .pos-container {
    height: calc(100vh - 100px);
  }
  
  .pos-products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
  }
  
  .category-products {
    gap: 0.3rem;
  }
  
  .category-products .product-card {
    width: calc(33.33% - 0.2rem);
    min-width: 90px;
  }
  
  .product-card {
    padding: 0.35rem;
  }
  
  .product-name {
    font-size: 0.65rem;
  }
  
  .product-info {
    display: none;
  }
  
  .product-price {
    font-size: 0.7rem;
  }
  
  .pos-cart {
    max-height: 38vh;
  }
  
  .cart-summary {
    grid-template-columns: 1fr 1fr;
    gap: 0.15rem 0.5rem;
  }
  
  .cart-items {
    max-height: 60px;
  }
  
  .payment-buttons {
    gap: 0.3rem;
  }
  
  .pay-btn-img {
    min-width: 50px;
    padding: 0.3rem;
  }
  
  .pay-btn-img img {
    width: 20px;
    height: 20px;
  }
  
  .pay-btn-img span {
    font-size: 0.55rem;
  }
  
  .btn-procesar {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  
  .btn-procesar svg {
    width: 14px;
    height: 14px;
  }
}

/* Ajuste para pantallas muy anchas */
@media (min-width: 1600px) {
  .pos-container {
    grid-template-columns: 1fr 420px;
  }
  
  .pos-products-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
  
  .category-products {
    gap: 0.75rem;
  }
  
  .category-products .product-card {
    width: 160px;
  }
}

/* Modo landscape en móviles */
@media (max-height: 500px) and (orientation: landscape) {
  .pos-container {
    grid-template-columns: 1fr 280px;
    grid-template-rows: 1fr;
    height: calc(100vh - 80px);
  }
  
  .pos-cart {
    max-height: none;
    height: 100%;
  }
  
  .cart-items {
    max-height: 100px;
  }
  
  .categories-bar {
    padding: 0.25rem 0;
  }
  
  .category-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
  }
}

/* Caja cerrada notice responsive */
@media (max-width: 768px) {
  .caja-cerrada-notice {
    padding: 2rem 1rem;
    min-height: 300px;
  }
  
  .caja-cerrada-icon {
    width: 60px;
    height: 60px;
  }
  
  .caja-cerrada-icon svg {
    width: 30px;
    height: 30px;
  }
  
  .caja-cerrada-notice h3 {
    font-size: 1.2rem;
  }
  
  .caja-cerrada-notice p {
    font-size: 0.85rem;
  }
}

/* ============================================
   PEDIDO MANUAL - MODAL MEJORADO
   ============================================ */

.pedido-manual-modal .search-box {
  margin-bottom: 0.75rem;
}

.pedido-categoria {
  margin-bottom: 1rem;
}

.pedido-cat-title {
  background: linear-gradient(90deg, var(--primary-red), transparent);
  padding: 0.4rem 0.75rem;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.pedido-productos-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
}

.pedido-producto-item {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: 6px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pedido-producto-item:hover {
  border-color: var(--primary-red);
}

.pedido-prod-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pedido-prod-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.pedido-prod-check label {
  font-size: 0.85rem;
  cursor: pointer;
  flex: 1;
  line-height: 1.2;
}

.pedido-prod-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pedido-stock {
  font-size: 0.7rem;
  color: var(--gray-400);
}

.pedido-qty {
  width: 70px !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.85rem !important;
  text-align: center;
}

.pedido-seleccionados {
  padding: 0.5rem;
  background: var(--gray-800);
  border-radius: 4px;
  font-size: 0.85rem;
}

.pedido-seleccionados span {
  color: var(--primary-red);
  font-weight: 600;
}

/* Responsive pedido manual */
@media (max-width: 600px) {
  .pedido-productos-list {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   TICKET SYSTEM INFO
   ============================================ */

.ticket-system-info {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--gray-800);
  border-radius: 8px;
  border: 1px solid var(--gray-700);
}

.ticket-system-info h4 {
  margin: 0 0 0.75rem 0;
  color: var(--white);
  font-size: 0.95rem;
}

.ticket-system-info p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--gray-300);
}

.ticket-preview {
  font-size: 13px;
}

.ticket-preview .ticket-header h2 {
  font-size: 18px;
}

.ticket-preview .ticket-item {
  font-size: 12px;
}

.ticket-preview .ticket-item.total {
  font-size: 15px;
}

/* ============================================
   FIX TEMA CLARO - CARRITO Y PEDIDOS
   ============================================ */

body[data-theme="light"] .summary-row {
  color: #18181B !important;
}

body[data-theme="light"] .summary-row span {
  color: #18181B !important;
}

body[data-theme="light"] .summary-row.total span,
body[data-theme="light"] .summary-row.cobrar span {
  color: #18181B !important;
}

body[data-theme="light"] .cart-summary {
  background: #F4F4F5;
}

body[data-theme="light"] .ticket-system-info {
  background: #F4F4F5;
  border-color: #D4D4D8;
}

body[data-theme="light"] .ticket-system-info h4,
body[data-theme="light"] .ticket-system-info p {
  color: #18181B;
}

/* Pedido manual tema claro */
body[data-theme="light"] .pedido-categoria {
  background: #F4F4F5;
}

body[data-theme="light"] .pedido-cat-title {
  color: #FFFFFF;
}

body[data-theme="light"] .pedido-producto-item {
  background: #FFFFFF;
  border-color: #D4D4D8;
}

body[data-theme="light"] .pedido-stock {
  color: #52525B !important;
}

body[data-theme="light"] .pedido-prod-check label {
  color: #18181B;
}

/* ============================================
   PRODUCTO ÚNICO - TAMAÑO FIJO
   ============================================ */

.category-products .product-card {
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* ============================================
   PEDIDO MANUAL - 4 COLUMNAS
   ============================================ */

.pedido-productos-list {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.5rem !important;
}

@media (max-width: 900px) {
  .pedido-productos-list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .pedido-productos-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================
   HISTORIAL TABS
   ============================================ */

.historial-tabs {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.historial-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  color: var(--gray-400);
  transition: var(--transition-fast);
}

.historial-tab:hover {
  border-color: var(--primary-red);
  color: var(--white);
}

.historial-tab.active {
  background: var(--primary-red);
  border-color: var(--primary-red);
  color: var(--white);
}

.historial-tab svg {
  width: 16px;
  height: 16px;
}

body[data-theme="light"] .historial-tab {
  color: #52525B;
}

body[data-theme="light"] .historial-tab:hover {
  color: #18181B;
}

body[data-theme="light"] .historial-tab.active {
  color: #FFFFFF;
}

/* Filtros header */
.filters-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.filter-checkbox input {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* Dropdown de métodos de pago */
.metodo-dropdown {
  position: relative;
  display: inline-block;
}

.metodo-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--gray-800);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  color: var(--white);
}

.metodo-dropdown-btn:hover {
  border-color: var(--primary-red);
}

.metodo-dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--gray-800);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  min-width: 160px;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.metodo-dropdown:hover .metodo-dropdown-content,
.metodo-dropdown.open .metodo-dropdown-content {
  display: block;
}

.metodo-dropdown-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.85rem;
}

.metodo-dropdown-item:hover {
  background: var(--gray-700);
}

.metodo-dropdown-item.active {
  background: var(--primary-red);
  color: white;
}

body[data-theme="light"] .metodo-dropdown-btn,
body[data-theme="light"] .metodo-dropdown-content {
  background: #FFFFFF;
  border-color: #D4D4D8;
  color: #18181B;
}

body[data-theme="light"] .metodo-dropdown-item:hover {
  background: #F4F4F5;
}

/* Alerta stock en pedido manual */
.pedido-producto-item.alerta-stock {
  border-color: var(--warning) !important;
  background: rgba(234, 179, 8, 0.1);
}

.pedido-producto-item .text-danger {
  color: var(--error) !important;
}

body[data-theme="light"] .pedido-producto-item.alerta-stock {
  background: rgba(234, 179, 8, 0.15);
}

/* ============================================
   MODAL PEDIDO MANUAL - MÁS ANCHO
   ============================================ */

.modal:has(.pedido-manual-modal) {
  max-width: 900px !important;
}

/* Fallback sin :has */
.modal-wide {
  max-width: 900px !important;
}

/* ============================================
   PRODUCTOS - TAMAÑO FIJO SIEMPRE
   ============================================ */

/* Grid mode también con tamaño fijo */
.pos-products-grid.grid-mode {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
}

.pos-products-grid.grid-mode .product-card {
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* Producto sin categoría (cuando está filtrado) */
.pos-products-grid > .product-card {
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* Asegurar que el grid sea flex cuando hay productos sueltos */
.pos-products-grid:not(:has(.category-section)) {
  display: flex !important;
  flex-wrap: wrap !important;
}

@media (max-width: 768px) {
  .modal:has(.pedido-manual-modal),
  .modal-wide {
    max-width: 95vw !important;
  }
  
  .pedido-productos-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================
   REPORTES - DROPDOWNS DE FILTRO
   ============================================ */

.stat-card-filtrable {
  position: relative;
}

.stat-icon-click {
  cursor: pointer;
  transition: transform 0.2s;
}

.stat-icon-click:hover {
  transform: scale(1.15);
}

.metodo-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #1F2937;
  border: 1px solid #374151;
  border-radius: 8px;
  min-width: 160px;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  margin-top: 0.5rem;
  overflow: hidden;
}

.metodo-dropdown-menu.show {
  display: block !important;
}

.metodo-dropdown-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s;
  color: #E5E7EB;
  border-bottom: 1px solid #374151;
}

.metodo-dropdown-item:last-child {
  border-bottom: none;
}

.metodo-dropdown-item:hover {
  background: #374151;
}

.metodo-dropdown-item.active {
  background: #DC2626;
  color: white;
}

.metodo-dropdown-item:first-child {
  border-radius: 0;
}

.metodo-dropdown-item:last-child {
  border-radius: 0;
}

body[data-theme="light"] .metodo-dropdown-menu {
  background: #FFFFFF;
  border-color: #D4D4D8;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

body[data-theme="light"] .metodo-dropdown-item {
  color: #18181B;
  border-bottom-color: #E5E7EB;
}

body[data-theme="light"] .metodo-dropdown-item:hover {
  background: #F4F4F5;
}

body[data-theme="light"] .metodo-dropdown-item.active {
  background: #DC2626;
  color: #FFFFFF;
}

.stat-label span {
  font-size: 0.7rem;
  color: var(--gray-400);
}

/* ============================================
   PRODUCTOS FLEX CONTAINER - TAMAÑO FIJO
   ============================================ */

.products-flex-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  align-content: flex-start;
}

.products-flex-container .product-card {
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* ============================================
   TEMA CLARO - FIXES COMPLETOS
   ============================================ */

/* Pedido manual - seleccionados */
body[data-theme="light"] .pedido-seleccionados {
  background: #E4E4E7;
  color: #18181B;
}

body[data-theme="light"] .pedido-seleccionados span {
  color: #DC2626;
}

/* Caja/Sencillo - modal agregar */
body[data-theme="light"] .modal-body input,
body[data-theme="light"] .modal-body select,
body[data-theme="light"] .modal-body textarea {
  background: #FFFFFF;
  border-color: #D4D4D8;
  color: #18181B;
}

body[data-theme="light"] .modal-body label {
  color: #18181B;
}

body[data-theme="light"] .modal-body {
  color: #18181B;
}

body[data-theme="light"] .form-label {
  color: #18181B !important;
}

/* Punto de venta - Descuento y Subtotal */
body[data-theme="light"] .summary-row {
  color: #18181B !important;
}

body[data-theme="light"] .summary-row span {
  color: #18181B !important;
}

body[data-theme="light"] .summary-row.discount span {
  color: #18181B !important;
}

body[data-theme="light"] .summary-row.discount input {
  background: #FFFFFF;
  border-color: #D4D4D8;
  color: #18181B;
}

body[data-theme="light"] .cart-summary {
  background: #F4F4F5;
  border-radius: 8px;
  padding: 0.75rem;
}

body[data-theme="light"] #cart-subtotal,
body[data-theme="light"] #cart-total {
  color: #18181B !important;
}

/* Reportes - Ganancias */
body[data-theme="light"] .stat-card {
  background: #FFFFFF;
  border-color: #D4D4D8;
}

body[data-theme="light"] .stat-label {
  color: #52525B !important;
}

body[data-theme="light"] .stat-value {
  color: #18181B !important;
}

body[data-theme="light"] .stat-icon {
  color: #52525B;
}

body[data-theme="light"] .profit-card .stat-label,
body[data-theme="light"] .profit-card .stat-value {
  color: #18181B !important;
}

body[data-theme="light"] .profit-card .stat-icon svg {
  stroke: #52525B;
}

body[data-theme="light"] .profit-card.cost .stat-icon svg {
  stroke: #EF4444;
}

body[data-theme="light"] .profit-card.sales .stat-icon svg {
  stroke: #3B82F6;
}

body[data-theme="light"] .profit-card.profit .stat-icon svg {
  stroke: #22C55E;
}

body[data-theme="light"] .section-title {
  color: #18181B;
}

body[data-theme="light"] .section-title svg {
  stroke: #52525B;
}

/* Resumen del día */
body[data-theme="light"] .resumen-item {
  background: #FFFFFF;
  border-color: #D4D4D8;
}

body[data-theme="light"] .resumen-label {
  color: #52525B !important;
}

body[data-theme="light"] .resumen-sub {
  color: #71717A !important;
}

/* Carrito vacío */
body[data-theme="light"] .cart-empty-msg {
  color: #71717A;
}

/* Payment section */
body[data-theme="light"] .payment-title {
  color: #18181B;
}

body[data-theme="light"] .pay-btn-img {
  background: #FFFFFF;
  border-color: #D4D4D8;
}

body[data-theme="light"] .pay-btn-img span {
  color: #18181B;
}

body[data-theme="light"] .pay-btn-img.active {
  border-color: var(--primary-red);
  background: rgba(220, 38, 38, 0.1);
}

/* ============================================
   FIX TEMA CLARO - COMPLETO
   ============================================ */

/* Carrito - Subtotal, Descuento, Total */
body[data-theme="light"] .cart-summary .summary-row,
body[data-theme="light"] .cart-summary .summary-row span,
body[data-theme="light"] .cart-summary .summary-row.discount span,
body[data-theme="light"] .cart-summary .summary-row.total span,
body[data-theme="light"] #cart-subtotal,
body[data-theme="light"] #cart-total {
  color: #18181B !important;
}

body[data-theme="light"] .cart-summary .summary-row.discount input {
  background: #FFFFFF;
  border-color: #D4D4D8;
  color: #18181B;
}

/* Pedido manual - Seleccionados */
body[data-theme="light"] .pedido-seleccionados,
body[data-theme="light"] .pedido-seleccionados strong,
body[data-theme="light"] #count-seleccionados {
  color: #18181B !important;
}

/* Reportes - Cards de ganancia */
body[data-theme="light"] .profit-card .stat-label,
body[data-theme="light"] .profit-card .stat-value,
body[data-theme="light"] .stat-card .stat-label,
body[data-theme="light"] .stat-card .stat-value {
  color: #18181B !important;
}

body[data-theme="light"] .stat-icon svg {
  stroke: currentColor !important;
}

body[data-theme="light"] .profit-card {
  background: #FFFFFF;
  border-color: #D4D4D8;
}

body[data-theme="light"] .profit-card.cost .stat-icon {
  color: #EF4444 !important;
}

body[data-theme="light"] .profit-card.sales .stat-icon {
  color: #22C55E !important;
}

body[data-theme="light"] .profit-card.profit .stat-icon {
  color: #3B82F6 !important;
}

/* Modal de Agregar Producto - Modo Claro */
body[data-theme="light"] .add-cart-modal h4 {
  color: #18181B !important;
  font-weight: 700 !important;
}

body[data-theme="light"] .add-cart-modal .product-detail {
  color: #52525B !important;
}

body[data-theme="light"] .add-cart-modal .stock-info {
  color: #16A34A !important;
}

body[data-theme="light"] .add-cart-modal .pricing-tiers {
  border-color: #E4D8D2;
}

body[data-theme="light"] .add-cart-modal .pricing-tiers > div {
  color: #765D54;
}

body[data-theme="light"] .add-cart-modal .pricing-tiers-title {
  color: #523C34;
}

body[data-theme="light"] .add-cart-modal .pricing-tiers > div + div {
  border-color: #EFE5E0;
}

body[data-theme="light"] .add-cart-modal .pricing-tiers strong {
  color: #24130E;
}

body[data-theme="light"] .add-cart-modal .pricing-tiers small {
  color: #765D54;
}

body[data-theme="light"] .subtotal-preview {
  color: #18181B !important;
  background: #F4F4F5 !important;
  padding: 1rem !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

body[data-theme="light"] .subtotal-preview span {
  color: #DC2626 !important;
  font-weight: 700 !important;
}

body[data-theme="light"] .subtotal-preview .preview-tier {
  color: #765D54 !important;
}

/* Carrito Items - Modo Claro */
body[data-theme="light"] .cart-item {
  background: #F4F4F5 !important;
  border: 1px solid #E4E4E7 !important;
}

body[data-theme="light"] .cart-item-name,
body[data-theme="light"] .cart-prod-name,
body[data-theme="light"] .item-name {
  color: #18181B !important;
  font-weight: 600 !important;
}

body[data-theme="light"] .cart-item-price,
body[data-theme="light"] .cart-prod-price {
  color: #52525B !important;
}

body[data-theme="light"] .cart-item-subtotal,
body[data-theme="light"] .cart-prod-subtotal {
  color: #DC2626 !important;
  font-weight: 600 !important;
}

body[data-theme="light"] .cart-item-qty span,
body[data-theme="light"] .qty-display {
  color: #18181B !important;
  background: #FFFFFF !important;
  border-color: #D4D4D8 !important;
}

body[data-theme="light"] .cart-item-qty button,
body[data-theme="light"] .qty-btn {
  background: #E4E4E7 !important;
  color: #18181B !important;
  border-color: #D4D4D8 !important;
}

body[data-theme="light"] .cart-empty,
body[data-theme="light"] .cart-empty-msg {
  color: #71717A !important;
}

/* Product cards - Nombre más visible */
body[data-theme="light"] .product-card .product-name {
  color: #18181B !important;
  font-weight: 700 !important;
}

/* Caja - Sencillo */
body[data-theme="light"] .sencillo-card,
body[data-theme="light"] .sencillo-form label,
body[data-theme="light"] .sencillo-form input,
body[data-theme="light"] .form-label {
  color: #18181B !important;
}

body[data-theme="light"] .form-input,
body[data-theme="light"] .form-select,
body[data-theme="light"] .form-textarea {
  background: #FFFFFF !important;
  border-color: #D4D4D8 !important;
  color: #18181B !important;
}

/* Resumen grid */
body[data-theme="light"] .resumen-item,
body[data-theme="light"] .resumen-label,
body[data-theme="light"] .resumen-value,
body[data-theme="light"] .resumen-sub {
  color: #18181B !important;
}

body[data-theme="light"] .resumen-icon svg {
  stroke: currentColor !important;
}

/* Section titles */
body[data-theme="light"] .section-title {
  color: #18181B !important;
}

body[data-theme="light"] .section-title svg {
  stroke: #18181B !important;
}

/* ============================================
   FILTRO SELECT PARA REPORTES
   ============================================ */

.filtro-metodo-select {
  margin-top: 0.5rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
  background: #374151;
  color: #E5E7EB;
  border: 1px solid #4B5563;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

.filtro-metodo-select:hover {
  border-color: #DC2626;
}

.filtro-metodo-select:focus {
  outline: none;
  border-color: #DC2626;
}

body[data-theme="light"] .filtro-metodo-select {
  background: #FFFFFF;
  color: #18181B;
  border-color: #D4D4D8;
}

body[data-theme="light"] .filtro-metodo-select:hover,
body[data-theme="light"] .filtro-metodo-select:focus {
  border-color: #DC2626;
}

/* ============================================
   DROPDOWN FILTRO REPORTES - NUEVO
   ============================================ */

.stat-card-filtrable {
  position: relative;
}

.stat-clickable {
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
}

.stat-clickable:hover {
  transform: scale(1.2);
  filter: brightness(1.3);
}

.stat-clickable:active {
  transform: scale(1.1);
}

.dropdown-filtro {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: #1F2937;
  border: 2px solid #DC2626;
  border-radius: 8px;
  min-width: 160px;
  z-index: 9999;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  overflow: hidden;
}

.dropdown-filtro.visible {
  display: block !important;
  animation: dropdownFadeIn 0.15s ease-out;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.dropdown-filtro-item {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 0.9rem;
  color: #E5E7EB;
  border-bottom: 1px solid #374151;
  transition: background 0.15s;
}

.dropdown-filtro-item:last-child {
  border-bottom: none;
}

.dropdown-filtro-item:hover {
  background: #374151;
}

.dropdown-filtro-item.active {
  background: #DC2626;
  color: white;
  font-weight: 600;
}

.stat-label small {
  font-size: 0.7rem;
  color: #9CA3AF;
  font-weight: normal;
}

/* Tema claro */
body[data-theme="light"] .dropdown-filtro {
  background: #FFFFFF;
  border-color: #DC2626;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

body[data-theme="light"] .dropdown-filtro-item {
  color: #1F2937;
  border-bottom-color: #E5E7EB;
}

body[data-theme="light"] .dropdown-filtro-item:hover {
  background: #F3F4F6;
}

body[data-theme="light"] .dropdown-filtro-item.active {
  background: #DC2626;
  color: white;
}

body[data-theme="light"] .stat-label small {
  color: #6B7280;
}

/* Fix para SVG dentro de iconos clickeables */
.stat-clickable svg {
  pointer-events: none;
}

/* ============================================
   REPORTES - FILTROS MEJORADOS
   ============================================ */

.reportes-filtros-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--gray-800);
  border-radius: 12px;
  border: 1px solid var(--gray-700);
}

.filtros-rapidos {
  display: flex;
  gap: 0.5rem;
}

.filtro-rapido {
  background: var(--gray-700);
  border: 1px solid var(--gray-600);
  color: var(--gray-300);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}

.filtro-rapido:hover {
  background: var(--gray-600);
  color: var(--white);
}

.filtro-rapido.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.filtros-fecha {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.filtro-fecha-grupo {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.filtro-fecha-grupo.hidden {
  display: none;
}

body[data-theme="light"] .reportes-filtros-container {
  background: #F9FAFB;
  border-color: #E5E7EB;
}

body[data-theme="light"] .filtro-rapido {
  background: #E5E7EB;
  border-color: #D1D5DB;
  color: #374151;
}

body[data-theme="light"] .filtro-rapido:hover {
  background: #D1D5DB;
  color: #111827;
}

/* Reportes por usuario */
.reports-page {
  display: grid;
  gap: 1.25rem;
  max-width: 1380px;
  margin: 0 auto;
}

.reports-controls-card {
  padding: 1.5rem;
}

.reports-controls-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.35rem;
}

.reports-controls-heading h2,
.reports-section-heading h3 {
  margin: 0;
  color: var(--white);
}

.reports-controls-heading h2 {
  font-size: 1.45rem;
  line-height: 1.2;
}

.reports-controls-heading p,
.reports-section-heading p {
  margin: 0.35rem 0 0;
  color: var(--gray-400);
  line-height: 1.45;
}

.reports-controls-heading p {
  max-width: 68ch;
  font-size: 0.88rem;
}

.reports-context {
  flex: 0 0 auto;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: var(--gray-800);
  color: var(--gray-300);
  font-size: 0.78rem;
  font-weight: 700;
}

.reports-controls-grid {
  display: grid;
  grid-template-columns: minmax(230px, 0.65fr) minmax(0, 1.8fr);
  align-items: end;
  gap: 1.25rem;
}

.reports-user-field,
.reports-date-range label {
  display: grid;
  gap: 0.45rem;
  color: var(--gray-300);
  font-size: 0.78rem;
  font-weight: 700;
}

.reports-user-field .form-input,
.reports-date-range .form-input {
  width: 100%;
  min-height: 46px;
}

.reports-period-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.reports-period-field legend {
  margin-bottom: 0.45rem;
  color: var(--gray-300);
  font-size: 0.78rem;
  font-weight: 700;
}

.reports-period-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.reports-period-button {
  min-height: 46px;
  padding: 0.65rem 1rem;
  border: 1px solid var(--gray-600);
  border-radius: 10px;
  background: var(--gray-800);
  color: var(--gray-300);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.reports-period-button:hover,
.reports-period-button:focus-visible {
  border-color: var(--primary-red-light);
  color: var(--white);
}

.reports-period-button.active {
  border-color: var(--primary-red);
  background: var(--primary-red);
  color: var(--white);
}

.reports-date-range {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
  align-items: end;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 12px;
  background: var(--gray-800);
}

.reports-date-range[hidden] {
  display: none;
}

.reports-date-range .btn {
  min-height: 46px;
}

.reports-loading,
.reports-empty {
  padding: 3rem 1.5rem;
  color: var(--gray-400);
  text-align: center;
}

.reports-empty h3 {
  margin-bottom: 0.5rem;
  color: var(--white);
}

.reports-sales-summary {
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(0, 2fr);
  gap: 1rem;
  padding: 1.35rem;
  border: 1px solid var(--gray-700);
  border-radius: 14px;
  background: var(--gray-900);
}

.reports-total-sold {
  display: grid;
  align-content: center;
  gap: 0.25rem;
}

.reports-total-sold span,
.reports-payment-summary span,
.reports-account-grid span {
  color: var(--gray-400);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reports-total-sold strong {
  color: var(--white);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.reports-total-sold small {
  color: var(--gray-400);
  font-size: 0.8rem;
}

.reports-payment-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.reports-payment-summary > div,
.reports-account-grid > div {
  display: grid;
  align-content: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 1rem;
  border-radius: 12px;
  background: var(--gray-800);
}

.reports-payment-summary strong,
.reports-account-grid strong {
  color: var(--white);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.reports-payment-note {
  max-width: 76ch;
  margin: 0.65rem 0 1.25rem;
  color: var(--gray-400);
  font-size: 0.78rem;
  line-height: 1.5;
}

.reports-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.reports-detail-card,
.reports-accounts-card {
  padding: 1.35rem;
}

.reports-accounts-card {
  margin-top: 1rem;
}

.reports-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.reports-section-heading > div:first-child {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--gray-800);
  color: var(--primary-red-light);
}

.reports-section-heading svg {
  width: 20px;
  height: 20px;
}

.reports-section-heading h3 {
  font-size: 1.05rem;
}

.reports-section-heading p {
  font-size: 0.78rem;
}

.reports-value-list {
  margin: 0;
}

.reports-value-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.78rem 0;
  border-bottom: 1px solid var(--gray-700);
}

.reports-value-list > div:last-child {
  border-bottom: 0;
}

.reports-value-list dt {
  color: var(--gray-300);
  font-size: 0.86rem;
}

.reports-value-list dd {
  margin: 0;
  color: var(--white);
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.reports-value-list .is-total {
  padding-block: 0.95rem;
}

.reports-value-list .is-total dt,
.reports-value-list .is-total dd {
  font-size: 1rem;
  font-weight: 800;
}

.reports-value-list .is-positive {
  color: var(--success);
}

.reports-value-list .is-negative {
  color: var(--error);
}

.reports-balance-trigger {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.reports-balance-trigger small {
  color: var(--primary-red-light);
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18rem;
}

.reports-balance-trigger:hover small {
  color: var(--white);
}

.reports-balance-trigger:focus-visible {
  border-radius: 5px;
  outline: 3px solid color-mix(in srgb, var(--primary-red) 35%, transparent);
  outline-offset: 4px;
}

.reports-card-note {
  margin: 0.85rem 0 0;
  color: var(--gray-400);
  font-size: 0.76rem;
  line-height: 1.5;
}

.reports-account-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.reports-account-grid strong {
  font-size: 1.05rem;
}

.reports-inline-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.25rem;
  border-radius: 12px;
  background: var(--gray-800);
  color: var(--gray-400);
  font-size: 0.86rem;
  text-align: center;
}

.modal.reports-expenses-modal {
  width: min(1120px, calc(100vw - 2rem));
  max-width: 1120px;
  max-height: min(90dvh, 860px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.reports-expenses-modal .modal-header {
  padding: 1.5rem 1.75rem;
}

.reports-expenses-modal .modal-title {
  font-size: 1.4rem;
  font-weight: 800;
}

.reports-expenses-modal .modal-body {
  min-height: 0;
  padding: 1.5rem 1.75rem;
  overflow-y: auto;
}

.reports-expenses-modal .modal-footer {
  padding: 1rem 1.75rem 1.5rem;
}

.reports-expenses-context {
  margin: 0 0 1rem;
  color: var(--gray-300);
  font-size: 0.86rem;
  font-weight: 700;
}

.reports-expenses-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.reports-expenses-summary > div {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: 1rem;
  border-radius: 12px;
  background: var(--gray-800);
}

.reports-expenses-summary span {
  color: var(--gray-400);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reports-expenses-summary strong {
  color: var(--white);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

.reports-expenses-explanation {
  margin: 0.8rem 0 1rem;
  color: var(--gray-400);
  font-size: 0.8rem;
  line-height: 1.5;
}

.reports-expenses-table-wrap {
  max-height: 440px;
}

.reports-expenses-table th,
.reports-expenses-table td {
  white-space: nowrap;
}

.reports-expenses-table td:nth-child(3) {
  min-width: 240px;
  white-space: normal;
}

.reports-expenses-table td:nth-last-child(-n + 2) {
  font-variant-numeric: tabular-nums;
}

body[data-theme="light"] .reports-controls-heading h2,
body[data-theme="light"] .reports-section-heading h3,
body[data-theme="light"] .reports-total-sold strong,
body[data-theme="light"] .reports-payment-summary strong,
body[data-theme="light"] .reports-account-grid strong,
body[data-theme="light"] .reports-value-list dd,
body[data-theme="light"] .reports-empty h3 {
  color: #2b1009;
}

body[data-theme="light"] .reports-controls-heading p,
body[data-theme="light"] .reports-section-heading p,
body[data-theme="light"] .reports-payment-note,
body[data-theme="light"] .reports-card-note,
body[data-theme="light"] .reports-total-sold span,
body[data-theme="light"] .reports-total-sold small,
body[data-theme="light"] .reports-payment-summary span,
body[data-theme="light"] .reports-account-grid span {
  color: #6f4a3d;
}

body[data-theme="light"] .reports-inline-empty {
  background: var(--warm-surface-raised);
  color: #6f4a3d;
}

body[data-theme="light"] .reports-balance-trigger:hover small {
  color: #2b1009;
}

body[data-theme="light"] .reports-expenses-context,
body[data-theme="light"] .reports-expenses-explanation,
body[data-theme="light"] .reports-expenses-summary span {
  color: #6f4a3d;
}

body[data-theme="light"] .reports-expenses-summary > div {
  background: var(--warm-surface-raised);
}

body[data-theme="light"] .reports-expenses-summary strong {
  color: #2b1009;
}

body[data-theme="light"] .reports-context,
body[data-theme="light"] .reports-period-button,
body[data-theme="light"] .reports-date-range,
body[data-theme="light"] .reports-payment-summary > div,
body[data-theme="light"] .reports-account-grid > div,
body[data-theme="light"] .reports-section-heading > div:first-child {
  background: var(--warm-surface-raised);
}

body[data-theme="light"] .reports-context,
body[data-theme="light"] .reports-user-field,
body[data-theme="light"] .reports-date-range label,
body[data-theme="light"] .reports-period-field legend,
body[data-theme="light"] .reports-period-button,
body[data-theme="light"] .reports-value-list dt {
  color: #5f4035;
}

body[data-theme="light"] .reports-period-button {
  border-color: #e3c8bc;
}

body[data-theme="light"] .reports-period-button:hover,
body[data-theme="light"] .reports-period-button:focus-visible {
  border-color: var(--primary-red);
  color: #2b1009;
}

body[data-theme="light"] .reports-period-button.active {
  border-color: var(--primary-red);
  background: var(--primary-red);
  color: #fff;
}

body[data-theme="light"] .reports-sales-summary {
  border-color: var(--warm-border);
  background: var(--warm-surface);
}

body[data-theme="light"] .reports-value-list > div {
  border-color: #ead4ca;
}

body[data-theme="light"] .reports-value-list .is-positive {
  color: #157a44;
}

body[data-theme="light"] .reports-value-list .is-negative {
  color: #b42318;
}

@media (max-width: 900px) {
  .reports-controls-grid,
  .reports-sales-summary,
  .reports-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .reports-controls-card,
  .reports-detail-card,
  .reports-accounts-card,
  .reports-sales-summary {
    padding: 1rem;
  }

  .reports-controls-heading {
    display: grid;
    gap: 0.85rem;
  }

  .reports-context {
    width: fit-content;
  }

  .reports-period-button {
    flex: 1 1 calc(50% - 0.5rem);
  }

  .reports-date-range,
  .reports-payment-summary,
  .reports-account-grid,
  .reports-expenses-summary {
    grid-template-columns: 1fr;
  }

  .reports-date-range .btn {
    width: 100%;
  }

  .reports-expenses-modal .modal-header,
  .reports-expenses-modal .modal-body {
    padding: 1.15rem;
  }

  .reports-expenses-modal .modal-footer {
    padding: 0.9rem 1.15rem 1.15rem;
  }
}

/* ============================================
   CONTRATOS - DISEÑO ESTILO POS
   ============================================ */

.contratos-pos-layout {
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 1.5rem;
  height: calc(100vh - 140px);
}

@media (max-width: 1200px) {
  .contratos-pos-layout {
    grid-template-columns: 1fr 450px;
  }
}

@media (max-width: 1024px) {
  .contratos-pos-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
}

.contratos-hoy-panel .card,
.contratos-form-panel .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.contratos-hoy-lista {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contrato-hoy-item {
  padding: 1rem;
  border-bottom: 1px solid var(--gray-700);
  transition: background 0.2s;
}

.contrato-hoy-item:hover {
  background: var(--gray-800);
}

.contrato-hoy-item:last-child {
  border-bottom: none;
}

.contrato-hoy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.contrato-numero {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--white);
}

.contrato-hora {
  font-size: 0.85rem;
  color: var(--gray-400);
  font-family: monospace;
}

.contrato-hoy-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.contrato-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.contrato-info-row .label {
  color: var(--gray-400);
}

.contrato-info-row .value {
  color: var(--white);
}

.contrato-hoy-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--gray-700);
}

.contrato-entrega {
  font-size: 0.8rem;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.contrato-entrega svg {
  width: 14px;
  height: 14px;
}

/* Badges para métodos de pago */
.badge-yape {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
  color: white;
}

.badge-bcp {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  color: white;
}

.badge-efectivo {
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
  color: white;
}

/* Form Panel (derecha) */
.contratos-form-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.contratos-form-footer {
  padding: 1rem;
  border-top: 1px solid var(--gray-700);
  background: var(--gray-800);
}

.contrato-registro-info {
  margin-bottom: 0.75rem;
  text-align: center;
}

.registro-fecha {
  font-size: 0.85rem;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.registro-fecha svg {
  width: 16px;
  height: 16px;
}

/* Payment Methods Grid para Contratos */
.payment-methods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

@media (max-width: 480px) {
  .payment-methods-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.payment-method-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 0.5rem;
  background: var(--gray-800);
  border: 2px solid var(--gray-600);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.payment-method-option input[type="radio"] {
  display: none;
}

.payment-method-option img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.payment-method-option span {
  font-size: 0.75rem;
  color: var(--gray-300);
}

.payment-method-option:hover {
  border-color: var(--gray-500);
  background: var(--gray-700);
}

.payment-method-option.selected {
  border-color: var(--primary);
  background: rgba(220, 38, 38, 0.1);
}

.payment-method-option.selected span {
  color: var(--white);
  font-weight: 600;
}

/* Form input grande */
.form-input-lg {
  font-size: 1.1rem;
  padding: 0.875rem 1rem;
  font-weight: 600;
}

.form-input-highlight {
  background: var(--gray-700);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--warning);
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Tema claro para contratos */
body[data-theme="light"] .contrato-hoy-item {
  border-bottom-color: #E5E7EB;
}

body[data-theme="light"] .contrato-hoy-item:hover {
  background: #F3F4F6;
}

body[data-theme="light"] .contrato-numero {
  color: #111827;
}

body[data-theme="light"] .contrato-hora {
  color: #6B7280;
}

body[data-theme="light"] .contrato-info-row .label {
  color: #6B7280;
}

body[data-theme="light"] .contrato-info-row .value {
  color: #111827;
}

body[data-theme="light"] .contrato-hoy-footer {
  border-top-color: #E5E7EB;
}

body[data-theme="light"] .contratos-form-footer {
  border-top-color: #E5E7EB;
  background: #F9FAFB;
}

body[data-theme="light"] .payment-method-option {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

body[data-theme="light"] .payment-method-option:hover {
  background: #F3F4F6;
  border-color: #9CA3AF;
}

body[data-theme="light"] .payment-method-option.selected {
  background: rgba(220, 38, 38, 0.1);
}

body[data-theme="light"] .payment-method-option span {
  color: #4B5563;
}

body[data-theme="light"] .form-input-highlight {
  background: #F3F4F6;
}

/* ============================================
   FIX DROPDOWN OVERFLOW
   ============================================ */

.stats-grid {
  overflow: visible !important;
}

.stat-card-filtrable {
  position: relative;
  overflow: visible !important;
}

.card-body:has(.stats-grid) {
  overflow: visible;
}

/* ============================================
   MÉTODO DE PAGO SIMPLIFICADO
   ============================================ */

.payment-methods-simple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.payment-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  background: var(--gray-800);
  border: 2px solid var(--gray-600);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--gray-300);
}

.payment-btn img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.payment-btn span {
  font-size: 0.85rem;
  font-weight: 500;
}

.payment-btn:hover {
  background: var(--gray-700);
  border-color: var(--gray-500);
}

.payment-btn.selected {
  border-color: var(--primary);
  background: rgba(220, 38, 38, 0.1);
  color: var(--white);
}

.payment-btn.selected span {
  font-weight: 600;
}

.metodo-cuenta-seleccionada {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--gray-800);
  border-radius: 8px;
}

.cuenta-badge {
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
}

.btn-cambiar-cuenta {
  background: none;
  border: none;
  color: var(--gray-400);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.25rem;
}

.btn-cambiar-cuenta:hover {
  color: var(--white);
  text-decoration: underline;
}

/* Modal de selección de cuenta */
.cuenta-selector {
  text-align: center;
}

.cuenta-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.cuenta-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  background: var(--gray-800);
  border: 2px solid var(--gray-600);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.cuenta-option:hover {
  background: var(--gray-700);
  border-color: var(--gray-500);
  transform: translateY(-2px);
}

.cuenta-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
}

.cuenta-nombre {
  font-size: 0.95rem;
  color: var(--white);
  font-weight: 500;
}

/* ============================================
   RESPONSIVE - TABLETS Y MÓVILES
   ============================================ */

/* Tablet horizontal (1024px - 768px) */
@media (max-width: 1024px) {
  .pos-container {
    grid-template-columns: 1fr;
    height: auto;
  }
  
  .pos-cart {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    max-height: 50vh;
    border-radius: 20px 20px 0 0;
    z-index: 100;
    transform: translateY(calc(100% - 60px));
    transition: transform 0.3s ease;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
  }
  
  .pos-cart.expanded {
    transform: translateY(0);
  }
  
  .cart-header {
    cursor: pointer;
    padding: 1rem;
  }
  
  .cart-header::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--gray-600);
    border-radius: 2px;
    margin: 0 auto 0.75rem;
  }
  
  .contratos-pos-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  
  .contratos-hoy-panel {
    max-height: 300px;
    overflow-y: auto;
  }
  
  .sidebar {
    width: 280px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet vertical y móviles grandes (768px - 480px) */
@media (max-width: 768px) {
  .sidebar {
    width: 85%;
    max-width: 300px;
    transform: translateX(-100%);
    box-shadow: 4px 0 20px rgba(0,0,0,0.5);
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
  
  .main-content {
    margin-left: 0;
  }
  
  /* Header móvil con botón de menú visible */
  .main-header {
    position: sticky;
    top: 0;
    z-index: 50;
  }
  
  #menu-toggle {
    display: flex !important;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
  }
  
  /* Overlay del sidebar */
  .sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99;
    backdrop-filter: blur(2px);
  }
  
  .sidebar.open + .sidebar-overlay,
  .sidebar.open ~ .sidebar-overlay {
    display: block !important;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .form-row-2,
  .form-row-3,
  .form-row-4 {
    grid-template-columns: 1fr;
  }
  
  .payment-methods-simple {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .cuenta-options {
    grid-template-columns: 1fr;
  }
  
  .pos-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .reportes-filtros-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filtros-rapidos {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .filtros-fecha {
    flex-direction: column;
  }
  
  .filtro-fecha-grupo {
    width: 100%;
  }
  
  .filtro-fecha-grupo .form-input {
    width: 100%;
  }
  
  .table-container {
    font-size: 0.85rem;
  }
  
  .table th,
  .table td {
    padding: 0.5rem;
  }
  
  .login-container {
    padding: 1rem;
  }
  
  .login-card {
    padding: 1.5rem;
  }
  
  .pin-display {
    font-size: 2rem;
  }
  
  .pin-pad {
    gap: 0.5rem;
  }
  
  .pin-key {
    font-size: 1.25rem;
    padding: 0.875rem;
  }
}

/* Móviles (480px y menos) */
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .stat-card {
    padding: 1rem;
  }
  
  .stat-value {
    font-size: 1.25rem;
  }
  
  .pos-products-grid {
    grid-template-columns: 1fr;
  }
  
  .payment-methods-simple {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  
  .payment-btn {
    padding: 0.75rem 0.5rem;
  }
  
  .payment-btn img {
    width: 28px;
    height: 28px;
  }
  
  .payment-btn span {
    font-size: 0.75rem;
  }
  
  .card {
    border-radius: 12px;
  }
  
  .card-header,
  .card-body,
  .card-footer {
    padding: 1rem;
  }
  
  .btn {
    padding: 0.625rem 1rem;
  }
  
  .modal {
    width: 95%;
    max-height: 90vh;
  }
  
  .main-header {
    padding: 0.75rem 1rem;
  }
  
  .header-title {
    font-size: 1rem;
  }
  
  .dropdown-filtro {
    min-width: 140px;
  }
  
  .section-title {
    font-size: 1rem;
  }
}

/* Tema claro para nuevos estilos */
body[data-theme="light"] .payment-btn {
  background: #F9FAFB;
  border-color: #D1D5DB;
  color: #374151;
}

body[data-theme="light"] .payment-btn:hover {
  background: #F3F4F6;
  border-color: #9CA3AF;
}

body[data-theme="light"] .payment-btn.selected {
  background: rgba(220, 38, 38, 0.1);
  color: #111827;
}

body[data-theme="light"] .metodo-cuenta-seleccionada {
  background: #F3F4F6;
}

body[data-theme="light"] .cuenta-option {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

body[data-theme="light"] .cuenta-option:hover {
  background: #F3F4F6;
}

body[data-theme="light"] .cuenta-nombre {
  color: #111827;
}

/* Modal de Cuenta Yape/BCP - Tema Claro */
body[data-theme="light"] .cuenta-modal {
  color: #111827;
}

body[data-theme="light"] .cuenta-modal .total-display {
  background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
  border: 1px solid #D1D5DB;
}

body[data-theme="light"] .cuenta-modal .total-display .label {
  color: #4B5563 !important;
}

body[data-theme="light"] .cuenta-modal .total-display .amount {
  color: #DC2626 !important;
}

body[data-theme="light"] .cuenta-modal p {
  color: #4B5563 !important;
}

body[data-theme="light"] .cuenta-btn {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

body[data-theme="light"] .cuenta-btn:hover {
  background: #F3F4F6;
  border-color: #DC2626;
}

body[data-theme="light"] .cuenta-btn .cuenta-nombre {
  color: #111827;
}

body[data-theme="light"] .cuenta-btn .cuenta-tipo {
  color: #6B7280;
}

body[data-theme="light"] .cuenta-options {
  color: #111827;
}

/* Modal de Efectivo - Tema Claro */
body[data-theme="light"] .efectivo-modal .total-display {
  background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
  border: 1px solid #D1D5DB;
}

body[data-theme="light"] .efectivo-modal .total-display .label {
  color: #4B5563 !important;
}

body[data-theme="light"] .efectivo-modal .total-display .amount {
  color: #DC2626 !important;
}

body[data-theme="light"] .efectivo-modal .form-label {
  color: #111827 !important;
}

body[data-theme="light"] .efectivo-modal .vuelto-display {
  background: #F3F4F6;
  border-color: #D1D5DB;
}

body[data-theme="light"] .efectivo-modal .vuelto-display .label {
  color: #4B5563;
}

body[data-theme="light"] .efectivo-modal .vuelto-display .amount {
  color: #16A34A;
}

/* Ocultar elementos en móviles */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Fix para el carrito en móviles */
@media (max-width: 1024px) {
  .pos-products {
    padding-bottom: 100px;
  }
  
  .pos-cart {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 65vh;
    border-radius: 20px 20px 0 0;
    z-index: 95;
    box-shadow: 0 -4px 25px rgba(0,0,0,0.5);
    background: #0A0A0A;
    transform: none !important;
  }
  
  .cart-header {
    background: linear-gradient(180deg, #1a1a1a 0%, #0A0A0A 100%);
    border-bottom: 1px solid #333;
    padding: 0.75rem 1rem;
  }
  
  .cart-header::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: #555;
    border-radius: 2px;
    margin: 0 auto 0.5rem;
  }
  
  .cart-items {
    max-height: 30vh;
    overflow-y: auto;
  }
  
  .cart-footer {
    padding: 0.75rem 1rem;
  }
}

/* Carrito completo en móviles con poca altura */
@media (max-width: 768px) and (max-height: 560px) {
  .pos-cart {
    top: 0.5rem !important;
    bottom: auto !important;
    height: calc(100dvh - 0.5rem);
    max-height: none !important;
    overflow-y: auto;
  }

  .cart-header {
    padding: 0.5rem 0.75rem;
  }

  .cart-items {
    flex: 0 0 5rem;
    height: 5rem;
    min-height: 5rem;
    max-height: 5rem;
  }

  .cart-empty-msg {
    padding: 0.8rem 0.5rem;
  }

  .cart-footer {
    padding: 0.75rem 0.8rem;
  }

  .cart-summary {
    margin-bottom: 0.75rem;
  }

  .cart-summary .summary-row {
    padding: 0.15rem 0;
    font-size: 0.78rem;
  }

  .cart-summary .summary-row.total {
    padding-top: 0.35rem;
    font-size: 0.9rem;
  }

  .payment-section {
    margin-bottom: 0.75rem;
  }

  .payment-title {
    margin-bottom: 0.7rem;
    font-size: 0.68rem;
  }

  .payment-buttons {
    gap: 0.3rem;
  }

  .pay-btn-img {
    min-width: 0;
    padding: 0.25rem;
    gap: 0.1rem;
  }

  .pay-btn-img img {
    width: 20px;
    height: 20px;
  }

  .pay-btn-img span {
    font-size: 0.55rem;
  }

  .btn-procesar {
    padding: 0.6rem;
    font-size: 0.8rem;
  }
}

/* Landscape mode (horizontal) - tablets y móviles */
@media (max-width: 992px) and (orientation: landscape) {
  .sidebar {
    width: 250px;
    transform: translateX(-100%);
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
  
  .pos-cart {
    max-height: 50vh;
  }
  
  .cart-items {
    max-height: 20vh;
  }
  
  #menu-toggle {
    display: flex !important;
  }
}

/* Stock Ilimitado - Tema Claro */
body[data-theme="light"] .product-card.stock-ilimitado {
  border-color: #3B82F6;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, #FFFFFF 100%);
}

body[data-theme="light"] .stock-inf {
  color: #2563EB;
}

/* Tema Claro - Modal de cuenta completo */
body[data-theme="light"] .cuenta-modal,
body[data-theme="light"] .cuenta-options,
body[data-theme="light"] .efectivo-modal {
  color: #111827 !important;
}

.login-screen {
  min-height: 100vh;
  padding: 0;
  background: #e9e7e2;
}

.login-layout {
  display: grid;
  grid-template-columns: minmax(320px, 42%) 1fr;
  width: 100%;
  min-height: 100vh;
}

.login-brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 5vw, 5rem);
  background: #181818;
  border-right: 10px solid var(--primary-red);
  color: #ffffff;
}

.login-brand-mark {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 2px solid var(--primary-red);
  color: var(--primary-red);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}

.login-brand-kicker,
.login-eyebrow {
  margin: 0 0 0.75rem;
  color: var(--primary-red);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.login-brand h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(3rem, 6vw, 6.5rem);
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 0.86;
  text-transform: uppercase;
}

.login-brand-description {
  max-width: 360px;
  margin-top: 2rem;
  color: #a3a3a3;
  font-size: 0.95rem;
}

.login-panel {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 6vw, 6rem);
}

.login-card,
.login-card.login-username {
  width: 100%;
  max-width: 430px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: fadeInUp 0.35s ease both;
}

.login-card h2 {
  margin: 0;
  color: #181818;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.login-helper {
  margin: 0.75rem 0 2rem;
  color: #66645f;
  font-size: 0.95rem;
}

.login-card .form-label {
  color: #282725;
  font-size: 0.8rem;
  font-weight: 700;
}

.login-input {
  padding: 1rem 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid #aaa69f !important;
  border-radius: 0 !important;
  color: #181818 !important;
  font-size: 1.05rem !important;
  text-align: left;
  box-shadow: none !important;
}

.login-input:focus {
  border-bottom-color: var(--primary-red) !important;
}

.login-input::placeholder {
  color: #8b8882;
}

.login-submit {
  min-height: 52px;
  border-radius: 2px;
  background: var(--primary-red);
  box-shadow: none;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

.login-submit:hover {
  background: var(--primary-red-dark);
  box-shadow: none;
}

.login-error-msg {
  min-height: 1.4rem;
  color: #b91c1c;
  text-align: left;
}

.login-user-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1rem 0;
  border-top: 1px solid #c9c5bd;
  border-bottom: 1px solid #c9c5bd;
}

.login-avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  background: #181818;
  border-radius: 2px;
  color: #ffffff;
  font-size: 1.3rem;
}

.login-user-name {
  color: #181818;
  font-size: 1rem;
  line-height: 1.2;
}

.login-change-user {
  margin-top: 0.25rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: #a51d1d;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.login-change-user:hover {
  text-decoration: underline;
}

.login-pin-card .pin-display {
  min-height: 66px;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: #dcd9d2;
  border: 1px solid #bbb7af;
  border-radius: 2px;
  color: var(--primary-red);
  font-size: 2rem;
}

.login-pin-card .pin-keypad {
  gap: 0.5rem;
}

.login-pin-card .pin-key {
  min-height: 58px;
  padding: 0.75rem;
  background: transparent;
  border: 1px solid #bbb7af;
  border-radius: 2px;
  color: #181818;
  font-size: 1.15rem;
}

.login-pin-card .pin-key svg {
  width: 24px !important;
  height: 24px !important;
}

.login-pin-card .pin-key:hover {
  background: #181818;
  border-color: #181818;
  color: #ffffff;
  transform: none;
}

.login-pin-card .pin-key.delete {
  background: #dcd9d2;
  color: #5f5c57;
}

.login-pin-card .pin-key.enter {
  background: var(--primary-red);
  border-color: var(--primary-red);
  color: #ffffff;
}

body[data-theme="light"] .login-screen,
body[data-theme="dark"] .login-screen {
  background: #e9e7e2;
}

@media (max-width: 760px) {
  .login-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100svh;
  }

  .login-brand {
    min-height: 140px;
    padding: 1.25rem;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    border-right: 0;
    border-bottom: 5px solid var(--primary-red);
  }

  .login-brand-mark {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    font-size: 1.25rem;
  }

  .login-brand-kicker {
    display: none;
  }

  .login-brand h1 {
    font-size: 1.8rem;
    letter-spacing: -0.04em;
    line-height: 0.92;
  }

  .login-brand-description {
    display: none;
  }

  .login-panel {
    place-items: start stretch;
    padding: 2rem 1.25rem;
  }

  .login-card,
  .login-card.login-username {
    max-width: none;
  }

  .login-card h2 {
    font-size: 2rem;
  }

  .login-submit {
    min-height: 56px;
  }

  .login-screen-pin .login-brand {
    min-height: 94px;
    padding-block: 0.9rem;
  }

  .login-screen-pin .login-panel {
    padding-top: 1.25rem;
  }

  .login-screen-pin .login-card h2 {
    font-size: 1.65rem;
  }

  .login-screen-pin .login-user-info {
    margin: 0.75rem 0;
    padding: 0.65rem 0;
  }

  .login-screen-pin .login-avatar {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .login-screen-pin .pin-display {
    min-height: 54px;
    margin-bottom: 0.75rem;
    font-size: 1.7rem;
  }

  .login-screen-pin .pin-key {
    min-height: 54px;
    font-size: 1.2rem;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .login-screen {
    padding: 0;
  }

  .login-layout {
    grid-template-columns: minmax(240px, 36%) 1fr;
  }

  .login-brand {
    min-height: 100vh;
    padding: 1.5rem;
    border-right: 6px solid var(--primary-red);
    border-bottom: 0;
  }

  .login-brand h1 {
    font-size: 2.7rem;
  }

  .login-panel {
    padding: 1rem 2rem;
  }

  .login-pin-card .login-user-info {
    margin: 0.5rem 0;
    padding: 0.5rem 0;
  }

  .login-pin-card .pin-display {
    min-height: 48px;
    margin-bottom: 0.5rem;
  }

  .login-pin-card .pin-key {
    min-height: 42px;
  }
}

.login-screen,
body[data-theme="light"] .login-screen,
body[data-theme="dark"] .login-screen {
  min-height: 100vh;
  padding: 0;
  background: #050505;
  color: #f5f5f5;
}

.login-layout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(100%, 480px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 1.5rem;
}

.login-brand {
  min-height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.85rem;
  padding: 0 0 1rem;
  background: transparent;
  border: 0;
  color: #ffffff;
}

.login-brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 2px solid #e52525;
  border-radius: 4px;
  color: #e52525;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.2rem;
}

.login-brand-kicker {
  display: block;
  margin: 0 0 0.15rem;
  color: #e52525;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
}

.login-brand h1 {
  margin: 0;
  color: #f5f5f5;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.login-panel {
  display: block;
  padding: 1.25rem;
  background: #141414;
  border: 1px solid #303030;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.75);
}

.login-card,
.login-card.login-username {
  width: 100%;
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}

.login-terminal-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  color: #858585;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-terminal-status span {
  width: 7px;
  height: 7px;
  background: #31c768;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(49, 199, 104, 0.65);
}

.login-card h2 {
  margin: 0;
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.login-helper {
  margin: 0.35rem 0 1rem;
  color: #858585;
  font-size: 0.8rem;
}

.login-card .form-group {
  margin-bottom: 0.75rem;
}

.login-card .form-label,
body[data-theme="light"] .login-card .form-label {
  color: #777777 !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.login-input,
body[data-theme="light"] .login-input {
  min-height: 74px;
  padding: 1rem !important;
  background: #080808 !important;
  border: 2px solid #323232 !important;
  border-radius: 7px !important;
  color: #f0f0f0 !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(1.2rem, 6vw, 1.65rem) !important;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-align: right;
  caret-color: #e52525;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.8) !important;
}

.login-input:focus {
  border-color: #e52525 !important;
}

.login-input::placeholder {
  color: #3f3f3f;
}

.login-submit {
  min-height: 56px;
  border: 1px solid #f13a3a;
  border-radius: 7px;
  background: #d91f26;
  color: #ffffff;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-submit:hover {
  background: #ef2b32;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
  transform: none;
}

.login-error-msg {
  min-height: 0;
  margin-top: 0.75rem;
  color: #ff5158;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  text-align: left;
}

.login-user-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0;
  padding: 0.7rem;
  background: #0a0a0a;
  border: 1px solid #2b2b2b;
  border-radius: 7px;
}

.login-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  background: #d91f26;
  border-radius: 5px;
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
}

.login-user-name {
  color: #f2f2f2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88rem;
  line-height: 1.2;
}

.login-change-user {
  color: #e94a4f;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
}

.login-pin-card .pin-display {
  min-height: 64px;
  margin-bottom: 0.6rem;
  padding: 0.75rem;
  background: #070707;
  border: 2px solid #323232;
  border-radius: 7px;
  color: #ef343b;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.8rem;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.8);
}

.login-pin-card .pin-keypad {
  gap: 0.45rem;
}

.login-pin-card .pin-key {
  min-height: 58px;
  padding: 0.5rem;
  background: #242424;
  border: 1px solid #383838;
  border-bottom-color: #080808;
  border-radius: 7px;
  color: #f1f1f1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.15rem;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35);
}

.login-pin-card .pin-key:hover,
.login-pin-card .pin-key:active {
  background: #303030;
  border-color: #484848;
  color: #ffffff;
  transform: none;
}

.login-pin-card .pin-key.delete {
  background: #1b1b1b;
  color: #aaaaaa;
}

.login-pin-card .pin-key.enter {
  background: #d91f26;
  border-color: #ef343b;
  color: #ffffff;
}

.login-pin-card .pin-key svg {
  width: 22px !important;
  height: 22px !important;
}

@media (max-width: 520px) {
  .login-layout {
    justify-content: flex-start;
    min-height: 100svh;
    padding: 1rem;
  }

  .login-brand,
  .login-screen-pin .login-brand {
    min-height: auto;
    padding: 0.25rem 0 0.8rem;
    border: 0;
  }

  .login-brand-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 1rem;
  }

  .login-brand h1 {
    font-size: 0.82rem;
  }

  .login-panel,
  .login-screen-pin .login-panel {
    padding: 1rem;
    border-radius: 11px;
  }

  .login-card h2,
  .login-screen-pin .login-card h2 {
    font-size: 1rem;
  }

  .login-input {
    min-height: 68px;
  }

  .login-screen-pin .login-user-info {
    margin: 0.6rem 0;
    padding: 0.55rem;
  }

  .login-screen-pin .pin-display {
    min-height: 54px;
    margin-bottom: 0.5rem;
  }

  .login-screen-pin .pin-key {
    min-height: 56px;
  }
}

@media (max-height: 660px) and (orientation: landscape) {
  .login-layout {
    width: min(100%, 760px);
    min-height: 100vh;
    padding: 0.75rem;
  }

  .login-brand {
    padding-bottom: 0.5rem;
  }

  .login-screen-pin .login-panel {
    padding: 0.75rem;
  }

  .login-pin-card .login-terminal-status {
    margin-bottom: 0.5rem;
  }

  .login-pin-card .login-user-info {
    margin: 0.4rem 0;
    padding: 0.4rem;
  }

  .login-pin-card .pin-display {
    min-height: 44px;
    margin-bottom: 0.4rem;
  }

  .login-pin-card .pin-key {
    min-height: 40px;
  }
}

.login-brand {
  justify-content: center;
  text-align: center;
}

.login-brand-kicker {
  margin-bottom: 0.35rem;
}

.login-card h2,
.login-screen-pin .login-card h2 {
  font-size: clamp(1.55rem, 6vw, 2rem);
  text-align: center;
}

.login-helper {
  display: none;
}

.login-input,
body[data-theme="light"] .login-input {
  text-align: center;
}

.login-terminal-status,
.login-screen-pin .login-terminal-status {
  justify-content: center;
}

@media (max-width: 520px) {
  .login-brand,
  .login-screen-pin .login-brand {
    justify-content: center;
    text-align: center;
  }

  .login-brand h1 {
    font-size: 0.9rem;
  }
}

/* Sistema visual operativo y superficies de desplazamiento */
:root {
  --primary: var(--primary-red);
  --primary-dark: var(--primary-red-dark);
  --danger: var(--error);
  --text-primary: var(--gray-100);
  --scroll-track: rgba(255, 255, 255, 0.055);
  --scroll-thumb: #56565f;
  --scroll-thumb-hover: var(--primary-red-light);
}

html,
body,
.sidebar-nav,
.content-area,
.pos-products-grid,
.cart-items,
.table-container,
.modal,
.categories-bar {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  scrollbar-gutter: stable;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.content-area::-webkit-scrollbar,
.pos-products-grid::-webkit-scrollbar,
.cart-items::-webkit-scrollbar,
.table-container::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.categories-bar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track,
.content-area::-webkit-scrollbar-track,
.pos-products-grid::-webkit-scrollbar-track,
.cart-items::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track,
.categories-bar::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb,
.content-area::-webkit-scrollbar-thumb,
.pos-products-grid::-webkit-scrollbar-thumb,
.cart-items::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb,
.categories-bar::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.sidebar-nav::-webkit-scrollbar-thumb:hover,
.content-area::-webkit-scrollbar-thumb:hover,
.pos-products-grid::-webkit-scrollbar-thumb:hover,
.cart-items::-webkit-scrollbar-thumb:hover,
.table-container::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover,
.categories-bar::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  background-clip: padding-box;
}

::selection {
  background: rgba(239, 68, 68, 0.35);
  color: var(--white);
}

:focus-visible {
  outline: 2px solid var(--primary-red-light);
  outline-offset: 3px;
}

.app-container {
  background: var(--black-soft);
}

.sidebar {
  background: #101011;
  box-shadow: 12px 0 36px rgba(0, 0, 0, 0.18);
}

.sidebar-header {
  text-align: left;
  padding: 1.35rem 1.25rem 1.15rem;
}

.sidebar-header h1 {
  letter-spacing: 0.02em;
}

.sidebar-nav {
  padding: 1rem 0.75rem;
}

.nav-section {
  margin-bottom: 1.15rem;
}

.nav-section-title {
  padding-inline: 0.75rem;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
}

.nav-item {
  min-height: 42px;
  padding: 0.7rem 0.8rem;
  border: 1px solid transparent;
}

.nav-item:hover {
  border-color: rgba(255, 255, 255, 0.08);
}

.nav-item.active {
  box-shadow: 0 7px 18px rgba(220, 38, 38, 0.2);
}

.main-content {
  min-width: 0;
  background: var(--black-soft);
}

.main-header {
  gap: 1rem;
  padding: 0.85rem clamp(1rem, 2.5vw, 2rem);
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(12px);
}

.header-title {
  min-width: 0;
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.content-area {
  min-width: 0;
  padding: clamp(1rem, 2.5vw, 2rem);
}

.card,
.stat-card,
.admin-caja-card,
.programacion-card {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13);
}

.caja-container {
  max-width: 1180px;
}

.caja-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.caja-section-heading h4 {
  margin-bottom: 0.15rem;
  color: var(--gray-100);
}

.caja-section-heading p {
  margin: 0;
  font-size: 0.8rem;
}

.caja-close-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--gray-700);
  border-radius: 10px;
  background: var(--black-soft);
}

.caja-close-summary strong {
  color: var(--warning);
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem;
}

.caja-close-breakdown {
  margin-bottom: 1rem;
  border: 1px solid var(--gray-700);
  border-radius: 12px;
  background: var(--black-soft);
  overflow: hidden;
}

.caja-close-breakdown > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.9rem;
  color: var(--gray-400);
  font-size: 0.85rem;
}

.caja-close-breakdown > div + div {
  border-top: 1px solid var(--gray-800);
}

.caja-close-breakdown strong {
  color: var(--gray-100);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}

.caja-close-breakdown .caja-close-total {
  padding-block: 0.85rem;
  color: var(--gray-100);
  font-weight: 700;
}

.caja-close-breakdown .caja-close-total strong {
  color: var(--warning);
  font-size: 1.05rem;
}

.caja-close-help {
  margin-top: 0.45rem;
  font-size: 0.78rem;
}

.sencillo-control {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  gap: 1rem 1.5rem;
  margin: 1rem 0;
  padding: 1.15rem;
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 14px;
  background: rgba(34, 197, 94, 0.08);
}

.sencillo-control-main,
.sencillo-control-heading,
.sencillo-control-actions,
.caja-difference-preview {
  display: flex;
  align-items: center;
}

.sencillo-control-main {
  justify-content: space-between;
  gap: 1rem;
}

.sencillo-control-heading {
  gap: 0.75rem;
}

.sencillo-control-icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  color: var(--success);
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.15);
}

.sencillo-control-heading h3,
.caja-close-section-heading h4 {
  margin: 0;
  color: var(--gray-100);
}

.sencillo-control-heading p,
.caja-close-section-heading p {
  margin: 0.18rem 0 0;
  color: var(--gray-400);
  font-size: 0.8rem;
}

.sencillo-control-amount,
.sencillo-detail-amount strong,
.sencillo-denominaciones-total strong {
  color: var(--success);
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}

.sencillo-control-amount {
  font-size: clamp(1.35rem, 3vw, 2rem);
  white-space: nowrap;
}

.sencillo-control-meta {
  display: grid;
  gap: 0.3rem;
  color: var(--gray-300);
  font-size: 0.82rem;
}

.sencillo-control-actions {
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(34, 197, 94, 0.22);
}

.sencillo-readonly-note {
  margin-inline-start: auto;
  color: var(--gray-400);
  font-size: 0.78rem;
}

.sencillo-modal-intro {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.1);
}

.sencillo-modal-intro > span,
.sencillo-modal-intro > strong {
  display: block;
}

.sencillo-modal-intro > span,
.sencillo-modal-intro p,
.sencillo-registrador {
  color: var(--gray-400);
  font-size: 0.8rem;
}

.sencillo-modal-intro > strong {
  margin: 0.15rem 0 0.35rem;
  color: var(--success);
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.35rem;
}

.sencillo-modal-intro p,
.sencillo-registrador {
  margin: 0;
}

.sencillo-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1rem;
  padding: 0.25rem;
  border-radius: 10px;
  background: var(--black-soft);
}

.sencillo-mode {
  padding: 0.65rem 0.8rem;
  color: var(--gray-400);
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.sencillo-mode.active {
  color: var(--gray-100);
  background: var(--gray-700);
}

.sencillo-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sencillo-denominaciones {
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid var(--gray-700);
  border-radius: 12px;
}

.sencillo-denominaciones-head,
.sencillo-denominacion-row,
.sencillo-denominaciones-total {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(90px, 0.7fr) minmax(110px, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
}

.sencillo-denominaciones-head {
  color: var(--gray-400);
  background: var(--black-soft);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.sencillo-denominacion-row + .sencillo-denominacion-row {
  border-top: 1px solid var(--gray-800);
}

.sencillo-denominacion-row .form-input {
  padding-block: 0.45rem;
}

.sencillo-denominacion-subtotal,
.sencillo-denominaciones-total strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sencillo-denominaciones-total {
  grid-template-columns: 1fr auto;
  color: var(--gray-100);
  border-top: 1px solid var(--gray-700);
  background: var(--black-soft);
}

.sencillo-change-preview,
.caja-difference-preview {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  margin: 0.25rem 0 0.85rem;
  padding: 0.75rem 0.9rem;
  color: var(--gray-300);
  border-radius: 10px;
  background: var(--black-soft);
  font-size: 0.82rem;
}

.sencillo-detail-amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.1);
}

.sencillo-detail-amount strong {
  font-size: 1.4rem;
}

.sencillo-detail-list {
  margin: 0 0 1rem;
}

.sencillo-detail-list > div {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--gray-800);
}

.sencillo-detail-list dt {
  color: var(--gray-400);
}

.sencillo-detail-list dd {
  margin: 0;
  color: var(--gray-100);
}

.sencillo-history-table td {
  font-variant-numeric: tabular-nums;
}

.sencillo-history-table {
  overflow-x: auto;
}

.sencillo-history-modal,
.sencillo-caja-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.sencillo-history-modal .modal-body,
.sencillo-caja-modal .modal-body {
  min-height: 0;
  overflow-y: auto;
}

.sencillo-history-grid {
  width: 100%;
  min-width: 780px;
  table-layout: auto;
}

.sencillo-history-grid th,
.sencillo-history-grid td {
  padding: 0.8rem 0.9rem;
  text-align: left;
  vertical-align: middle;
}

.sencillo-history-grid th {
  color: var(--gray-400);
  font-size: 0.78rem;
  white-space: nowrap;
}

.sencillo-history-grid td:first-child,
.sencillo-history-grid td:nth-child(2),
.sencillo-history-grid td:nth-child(3) {
  white-space: nowrap;
}

.sencillo-history-grid th:last-child,
.sencillo-history-grid td:last-child {
  width: 1%;
  text-align: right;
}

.sencillo-caja-modal {
  max-width: 620px;
}

.sencillo-caja-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.2rem;
}

.sencillo-caja-summary > div {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.85rem;
  border-radius: 12px;
  background: var(--black-soft);
}

.sencillo-caja-summary span {
  color: var(--gray-400);
  font-size: 0.76rem;
}

.sencillo-caja-summary strong {
  overflow: hidden;
  color: var(--gray-100);
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sencillo-caja-help {
  margin-top: 0.45rem;
  line-height: 1.45;
}

body[data-theme="light"] .sencillo-caja-summary > div {
  background: #f4f4f5;
}

body[data-theme="light"] .sencillo-caja-summary strong {
  color: #18181b;
}

.caja-close-section + .caja-close-section {
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--gray-700);
}

.caja-close-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.caja-close-equation {
  margin: -0.25rem 0 0.85rem;
  color: var(--gray-400);
  font-size: 0.8rem;
  text-align: right;
}

.sencillo-update-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--gray-700);
  border-radius: 12px;
  cursor: pointer;
}

.sencillo-update-choice input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.1rem;
  accent-color: var(--success);
}

.sencillo-update-choice span,
.sencillo-update-choice small {
  display: block;
}

.sencillo-update-choice strong {
  color: var(--gray-100);
}

.sencillo-update-choice small {
  margin-top: 0.2rem;
  color: var(--gray-400);
  line-height: 1.4;
}

.cierre-sencillo-extra {
  margin-top: 0.9rem;
}

.sencillo-admin-value {
  color: var(--success) !important;
  font-weight: 700;
}

body[data-theme="light"] .sencillo-control {
  background: #f0fdf4;
  border-color: #86efac;
}

body[data-theme="light"] .sencillo-control-heading h3,
body[data-theme="light"] .caja-close-section-heading h4,
body[data-theme="light"] .sencillo-update-choice strong,
body[data-theme="light"] .sencillo-detail-list dd,
body[data-theme="light"] .sencillo-denominaciones-total {
  color: #18181b;
}

body[data-theme="light"] .sencillo-control-heading p,
body[data-theme="light"] .caja-close-section-heading p,
body[data-theme="light"] .sencillo-control-meta,
body[data-theme="light"] .sencillo-modal-intro > span,
body[data-theme="light"] .sencillo-modal-intro p,
body[data-theme="light"] .sencillo-registrador,
body[data-theme="light"] .sencillo-detail-list dt,
body[data-theme="light"] .sencillo-update-choice small,
body[data-theme="light"] .caja-close-equation {
  color: #52525b;
}

body[data-theme="light"] .sencillo-modal-intro,
body[data-theme="light"] .sencillo-detail-amount {
  background: #f0fdf4;
}

body[data-theme="light"] .sencillo-mode-switch,
body[data-theme="light"] .sencillo-denominaciones-head,
body[data-theme="light"] .sencillo-denominaciones-total,
body[data-theme="light"] .sencillo-change-preview,
body[data-theme="light"] .caja-difference-preview {
  background: #f4f4f5;
}

body[data-theme="light"] .sencillo-mode.active {
  color: #18181b;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(24, 24, 27, 0.1);
}

body[data-theme="light"] .sencillo-denominaciones,
body[data-theme="light"] .sencillo-update-choice,
body[data-theme="light"] .caja-close-section + .caja-close-section {
  border-color: #d4d4d8;
}

body[data-theme="light"] .sencillo-denominacion-row + .sencillo-denominacion-row,
body[data-theme="light"] .sencillo-detail-list > div {
  border-color: #e4e4e7;
}

@media (max-width: 680px) {
  .sencillo-control,
  .sencillo-form-grid {
    grid-template-columns: 1fr;
  }

  .sencillo-control-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .sencillo-denominaciones-head,
  .sencillo-denominacion-row {
    grid-template-columns: minmax(90px, 1fr) 80px minmax(92px, 1fr);
    gap: 0.45rem;
    padding-inline: 0.6rem;
  }

  .sencillo-control-actions .btn {
    flex: 1 1 130px;
  }

  .sencillo-detail-list > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .sencillo-caja-summary {
    grid-template-columns: 1fr;
  }

  .sencillo-history-grid {
    min-width: 720px;
  }
}

.empty-state-compact {
  padding: 1.5rem;
  border: 1px dashed var(--gray-700);
  border-radius: 10px;
}

.admin-caja-card {
  border-width: 1px;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-caja-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
}

.admin-caja-card.cerrada {
  opacity: 1;
  border-color: var(--gray-700);
}

.admin-caja-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  padding: 0.75rem 0;
  border-block: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-caja-actions {
  flex-wrap: wrap;
  margin-top: 0.85rem;
}

.admin-caja-actions .btn {
  flex: 1 1 120px;
}

.table-container {
  max-width: 100%;
}

.table th {
  white-space: nowrap;
}

.table td {
  vertical-align: middle;
}

.table-sm td:first-child,
.table-sm th:first-child,
.table-sm td:nth-child(2),
.table-sm th:nth-child(2) {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .header-date {
    max-width: 8.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.72rem;
  }

  .caja-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    overflow: visible;
    padding-bottom: 0.75rem;
  }

  .caja-tabs::-webkit-scrollbar {
    display: none;
  }

  .caja-tab {
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    padding: 0.65rem 0.55rem;
    text-align: center;
    line-height: 1.2;
  }

  .caja-tab svg {
    flex: 0 0 auto;
  }

  .caja-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .caja-section-heading .badge {
    align-self: flex-start;
  }

  .admin-caja-actions .btn {
    flex-basis: 100%;
  }

  .admin-cajas-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-caja-card {
    min-width: 0;
  }
}

body[data-theme="light"] {
  --scroll-track: rgba(24, 24, 27, 0.08);
  --scroll-thumb: #a1a1aa;
  --scroll-thumb-hover: var(--primary-red);
}

body[data-theme="light"] .app-container,
body[data-theme="light"] .main-content {
  background: #f4f4f5;
}

body[data-theme="light"] .sidebar,
body[data-theme="light"] .main-header {
  background: #ffffff;
}

body[data-theme="light"] .caja-close-summary {
  background: #fafafa;
  border-color: #d4d4d8;
}

body[data-theme="light"] .caja-close-breakdown {
  background: #fafafa;
  border-color: #d4d4d8;
}

body[data-theme="light"] .caja-close-breakdown > div {
  color: #52525b;
}

body[data-theme="light"] .caja-close-breakdown > div + div {
  border-color: #e4e4e7;
}

body[data-theme="light"] .caja-close-breakdown strong,
body[data-theme="light"] .caja-close-breakdown .caja-close-total {
  color: #18181b;
}

body[data-theme="light"] .caja-close-breakdown .caja-close-total strong {
  color: #b45309;
}

body[data-theme="light"] .admin-caja-stats {
  border-color: #e4e4e7;
}

.stat-card::before {
  display: none;
}

.login-brand {
  border-right: 0;
}

body[data-theme="light"] .login-screen {
  background: #f4f4f5;
  color: #18181b;
}

body[data-theme="light"] .login-panel {
  background: #ffffff;
  border-color: #d4d4d8;
  box-shadow: 0 18px 60px rgba(24, 24, 27, 0.12);
}

body[data-theme="light"] .login-brand,
body[data-theme="light"] .login-brand h1,
body[data-theme="light"] .login-card h2,
body[data-theme="light"] .login-user-name {
  color: #18181b;
}

body[data-theme="light"] .login-terminal-status,
body[data-theme="light"] .login-helper {
  color: #71717a;
}

body[data-theme="light"] .login-input {
  background: #ffffff !important;
  border-color: #d4d4d8 !important;
  color: #18181b !important;
  box-shadow: inset 0 2px 12px rgba(24, 24, 27, 0.06) !important;
}

body[data-theme="light"] .login-input::placeholder {
  color: #71717a;
}

body[data-theme="light"] .login-user-info,
body[data-theme="light"] .login-pin-card .pin-display {
  background: #f4f4f5;
  border-color: #d4d4d8;
}

body[data-theme="light"] .login-pin-card .pin-key {
  background: #ffffff;
  border-color: #d4d4d8;
  color: #18181b;
}

body[data-theme="light"] .login-pin-card .pin-key.delete {
  background: #f4f4f5;
  color: #52525b;
}

/* Tema claro: blanco con acentos naranjado rojizo */
body[data-theme="light"] {
  --primary-red: #e65f38;
  --primary-red-dark: #c94727;
  --primary-red-light: #f07b58;
  --warm-canvas: #fff9f6;
  --warm-surface: #ffffff;
  --warm-surface-raised: #fff4ee;
  --warm-surface-muted: #fbe7dd;
  --warm-border: #e8b7a3;
  background: var(--warm-canvas);
  color: #2b1009;
}

body[data-theme="light"] .app-container,
body[data-theme="light"] .main-content,
body[data-theme="light"] .login-screen { background: var(--warm-canvas); }

body[data-theme="light"] .sidebar,
body[data-theme="light"] .main-header,
body[data-theme="light"] .card,
body[data-theme="light"] .pos-cart,
body[data-theme="light"] .product-card,
body[data-theme="light"] .stats-grid .stat-card,
body[data-theme="light"] .stat-card,
body[data-theme="light"] .modal,
body[data-theme="light"] .pedido-card,
body[data-theme="light"] .pos-sidebar,
body[data-theme="light"] .pay-btn,
body[data-theme="light"] .pay-btn-img,
body[data-theme="light"] .payment-btn,
body[data-theme="light"] .theme-option,
body[data-theme="light"] .pedido-producto-item,
body[data-theme="light"] .metodo-dropdown-btn,
body[data-theme="light"] .metodo-dropdown-content,
body[data-theme="light"] .metodo-dropdown-menu,
body[data-theme="light"] .login-card,
body[data-theme="light"] .login-pin-card,
body[data-theme="light"] .login-panel {
  background: var(--warm-surface);
  border-color: var(--warm-border);
}

body[data-theme="light"] .card-header,
body[data-theme="light"] .cart-footer,
body[data-theme="light"] .pedido-header,
body[data-theme="light"] .cart-summary,
body[data-theme="light"] .user-info,
body[data-theme="light"] .logout-btn,
body[data-theme="light"] .info-box,
body[data-theme="light"] .producto-check,
body[data-theme="light"] .table th,
body[data-theme="light"] .cart-item,
body[data-theme="light"] .login-user-info,
body[data-theme="light"] .login-pin-card .pin-display,
body[data-theme="light"] .login-pin-card .pin-key.delete {
  background: var(--warm-surface-muted);
  border-color: var(--warm-border);
}

body[data-theme="light"] .form-input,
body[data-theme="light"] .form-select,
body[data-theme="light"] .form-textarea,
body[data-theme="light"] .search-box input,
body[data-theme="light"] .modal-body input,
body[data-theme="light"] .modal-body select,
body[data-theme="light"] .modal-body textarea,
body[data-theme="light"] .summary-row.discount input,
body[data-theme="light"] .cart-summary input,
body[data-theme="light"] .login-input,
body[data-theme="light"] .login-pin-card .pin-key {
  background: var(--warm-surface-raised) !important;
  border-color: var(--warm-border) !important;
  color: #2b1009 !important;
}

body[data-theme="light"] .rotulacion-page {
  --rot-panel: var(--warm-surface);
  --rot-panel-raised: var(--warm-surface-muted);
  --rot-border: var(--warm-border);
  --rot-text: #2b1009;
  --rot-muted: #603022;
}

body[data-theme="light"] .nav-item,
body[data-theme="light"] .product-info,
body[data-theme="light"] .stat-label,
body[data-theme="light"] .text-muted,
body[data-theme="light"] .ticket-print-intro,
body[data-theme="light"] .login-terminal-status,
body[data-theme="light"] .login-helper {
  color: #56261a !important;
}

body[data-theme="light"] .login-input::placeholder { color: #603022; }
body[data-theme="light"] .nav-item.active { color: #ffffff !important; }
body[data-theme="light"] .login-submit {
  background: var(--primary-red);
  border-color: var(--primary-red-dark);
}
body[data-theme="light"] .login-submit:hover { background: var(--primary-red-dark); }

body[data-theme="light"] .categories-bar {
  background: var(--warm-surface-muted);
  border: 1px solid var(--warm-border);
}

body[data-theme="light"] .category-btn {
  background: var(--warm-surface);
  border-color: var(--warm-border);
  color: #4f2116;
}

body[data-theme="light"] .category-btn:hover {
  background: var(--warm-surface-raised);
  border-color: var(--primary-red-light);
}

body[data-theme="light"] .category-btn.active,
body[data-theme="light"] .nav-item.active {
  background: linear-gradient(135deg, var(--primary-red), var(--primary-red-dark));
  border-color: var(--primary-red-dark);
  color: #ffffff !important;
  box-shadow: 0 7px 18px rgba(230, 95, 56, 0.24);
}

body[data-theme="light"] .pay-btn-img.active {
  background: #fff0e9;
  border-color: var(--primary-red);
}

/* ============================================
   POS PROFESIONAL V7 — MESA DE DESPACHO
   ============================================ */

.content-area.pos-surface {
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.pos-workbench {
  --pos-canvas: #121315;
  --pos-surface: #181a1d;
  --pos-surface-raised: #202328;
  --pos-line: #30343a;
  --pos-text: #f7f7f5;
  --pos-muted: #a7abb2;
  --pos-accent: var(--primary-red);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(390px, 29vw, 450px);
  gap: 0;
  height: calc(100dvh - 67px);
  min-height: 620px;
  overflow: hidden;
  background: var(--pos-canvas);
  color: var(--pos-text);
  font-family: 'Barlow', sans-serif;
}

.pos-workbench .pos-products {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--pos-canvas);
}

.pos-commandbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 84px;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--pos-line);
  background: var(--pos-surface);
}

.pos-commandbar::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--pos-accent);
  transform-origin: left;
  animation: pos-line-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pos-line-in {
  from { transform: scaleX(0.12); }
  to { transform: scaleX(1); }
}

.pos-command-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 220px;
}

.pos-live-mark {
  width: 10px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 3px;
  background: var(--pos-accent);
}

.pos-command-title h2 {
  margin: 0;
  color: var(--pos-text);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.pos-command-title p {
  margin: 0.2rem 0 0;
  color: var(--pos-muted);
  font-size: 0.9rem;
}

.pos-workbench .pos-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: min(100%, 530px);
  margin: 0;
}

.pos-workbench .pos-search .search-box {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--pos-line);
  border-radius: 12px;
  background: var(--pos-canvas);
  transition: border-color 160ms ease, background-color 160ms ease;
}

.pos-workbench .pos-search .search-box:focus-within {
  border-color: var(--pos-accent);
  background: var(--pos-surface-raised);
}

.pos-workbench .pos-search .search-box svg {
  color: var(--pos-muted);
}

.pos-workbench .pos-search input {
  min-height: 48px;
  background: transparent;
  border: 0;
  color: var(--pos-text);
  font-family: inherit;
  font-size: 1rem;
}

.pos-workbench .pos-search input::placeholder {
  color: var(--pos-muted);
  opacity: 0.88;
}

.pos-workbench .pos-search kbd {
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--pos-line);
  border-bottom-width: 2px;
  border-radius: 6px;
  color: var(--pos-muted);
  background: var(--pos-surface-raised);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
}

.pos-workbench .categories-bar {
  display: flex;
  gap: 0.45rem;
  min-height: 62px;
  padding: 0.75rem 1.25rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--pos-line);
  background: var(--pos-surface);
}

.pos-workbench .category-btn {
  min-height: 38px;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--pos-line);
  border-radius: 8px;
  background: transparent;
  color: var(--pos-muted);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
}

.pos-workbench .category-btn:hover {
  border-color: var(--pos-muted);
  color: var(--pos-text);
  background: var(--pos-surface-raised);
}

.pos-workbench .category-btn.active {
  border-color: var(--pos-accent);
  color: #fff;
  background: var(--pos-accent);
  box-shadow: none;
}

.pos-workbench .pos-products-grid {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
  padding: 0 1.25rem 2rem;
  overscroll-behavior: contain;
}

.pos-workbench .pos-products-grid.empty-mode {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.pos-workbench .pos-empty-state {
  width: min(100%, 430px);
  padding: 3rem 1.5rem;
  color: var(--pos-muted);
}

.pos-workbench .pos-empty-state svg {
  width: 64px;
  height: 64px;
  color: var(--pos-muted);
}

.pos-workbench .pos-empty-state h3 {
  margin: 0 0 0.4rem;
  color: var(--pos-text);
  font-size: 1.2rem;
}

.pos-workbench .pos-empty-state p {
  margin: 0;
  font-size: 0.95rem;
}

.pos-workbench .category-section {
  margin: 0;
  padding-top: 1.15rem;
}

.pos-workbench .category-section-title {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.55rem 0 0.7rem;
  border-radius: 0;
  background: var(--pos-canvas);
  color: var(--pos-text);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pos-workbench .category-section-title small {
  color: var(--pos-muted);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.pos-workbench .category-products,
.pos-workbench .products-flex-container,
.pos-workbench .pos-products-grid.grid-mode {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--pos-line);
  border-radius: 12px;
  background: var(--pos-line);
}

.pos-workbench .product-card,
.pos-workbench .category-products .product-card,
.pos-workbench .products-flex-container .product-card,
.pos-workbench .pos-products-grid > .product-card {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 108px;
  min-height: 108px;
  max-height: none;
  margin: 0;
  padding: 0.9rem 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0.85rem;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--pos-surface);
  color: var(--pos-text);
  text-align: left;
  box-shadow: none;
  transform: none;
  touch-action: manipulation;
}

.pos-workbench .product-card:hover {
  z-index: 1;
  background: var(--pos-surface-raised);
  box-shadow: inset 0 0 0 1px var(--pos-accent);
  transform: none;
}

.pos-workbench .product-card:active {
  background: color-mix(in srgb, var(--pos-accent) 10%, var(--pos-surface));
}

.pos-workbench .product-entry-copy,
.pos-workbench .product-entry-data {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.pos-workbench .product-entry-data {
  align-items: flex-end;
  text-align: right;
}

.pos-workbench .product-name {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--pos-text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pos-workbench .product-info {
  margin: 0;
  color: var(--pos-muted);
  font-size: 0.84rem;
  line-height: 1.3;
}

.pos-workbench .product-stock {
  color: var(--pos-muted);
  font-size: 0.78rem;
  line-height: 1.15;
  white-space: nowrap;
}

.pos-workbench .product-stock b {
  color: var(--pos-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.84rem;
}

.pos-workbench .product-stock small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
}

.pos-workbench .stock-inf {
  color: #69a8ff;
  font-size: 0.76rem;
  text-transform: uppercase;
}

.pos-workbench .product-price {
  color: var(--pos-accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
}

.pos-workbench .product-price .price-unit {
  color: var(--pos-muted);
  font-size: 0.7rem;
}

.pos-workbench .product-card.low-stock {
  background: color-mix(in srgb, var(--warning) 7%, var(--pos-surface));
}

.pos-workbench .product-card.no-stock {
  opacity: 0.52;
  background: var(--pos-surface);
}

.pos-workbench .product-card.stock-ilimitado {
  background: color-mix(in srgb, #3b82f6 7%, var(--pos-surface));
}

.pos-workbench .pos-cart {
  position: relative;
  inset: auto;
  z-index: auto;
  width: auto;
  height: auto;
  max-height: none;
  min-width: 0;
  border: 0;
  border-left: 1px solid var(--pos-line);
  border-radius: 0;
  background: var(--pos-surface);
  color: var(--pos-text);
  transform: none;
  box-shadow: -10px 0 32px rgba(0, 0, 0, 0.12);
}

.pos-workbench .cart-header {
  min-height: 84px;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--pos-line);
  background: var(--pos-surface);
}

.pos-workbench .cart-heading,
.pos-workbench .cart-header-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.pos-workbench .cart-heading-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--pos-accent);
  color: #fff;
}

.pos-workbench .cart-heading-icon svg {
  width: 19px;
  height: 19px;
}

.pos-workbench .cart-heading h3 {
  margin: 0;
  color: var(--pos-text);
  font-size: 1.15rem;
  font-weight: 700;
}

.pos-workbench .cart-heading p {
  margin: 0.18rem 0 0;
  color: var(--pos-muted);
  font-size: 0.82rem;
}

.pos-workbench .cart-header .btn-outline-danger {
  min-height: 38px;
  padding: 0.45rem 0.65rem;
  border-width: 1px;
  border-color: var(--pos-line);
  color: var(--pos-muted);
  background: transparent;
}

.pos-workbench .cart-header .btn-outline-danger:hover {
  border-color: var(--error);
  color: #fff;
  background: var(--error);
}

.pos-workbench .cart-toggle {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--pos-line);
  border-radius: 9px;
  background: var(--pos-surface-raised);
  color: var(--pos-text);
}

.pos-workbench .cart-toggle svg {
  width: 18px;
  transition: transform 180ms ease;
}

.pos-workbench .pos-cart.expanded .cart-toggle svg {
  transform: rotate(180deg);
}

.pos-workbench .cart-items {
  min-height: 112px;
  max-height: none;
  padding: 0;
  background: var(--pos-canvas);
}

.pos-workbench .cart-empty-msg {
  min-height: 100%;
  padding: 2rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: var(--pos-muted);
  text-align: center;
}

.pos-workbench .cart-empty-msg svg {
  width: 28px;
  height: 28px;
  margin-bottom: 0.25rem;
  opacity: 0.6;
}

.pos-workbench .cart-empty-msg strong {
  color: var(--pos-text);
  font-size: 1rem;
}

.pos-workbench .cart-empty-msg span {
  max-width: 28ch;
  font-size: 0.85rem;
}

.pos-workbench .cart-row {
  margin: 0;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--pos-line);
  background: var(--pos-surface);
}

.pos-workbench .cart-row:last-child {
  border-bottom: 0;
}

.pos-workbench .cart-row-top {
  margin-bottom: 0.55rem;
}

.pos-workbench .cart-prod-name {
  color: var(--pos-text);
  font-size: 0.98rem;
  font-weight: 700;
}

.pos-workbench .cart-btn-remove {
  width: 34px;
  height: 34px;
  color: var(--pos-muted);
}

.pos-workbench .cart-row-bottom {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.65rem;
}

.pos-workbench .cart-prod-price {
  align-self: center;
  color: var(--pos-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
}

.pos-workbench .cart-prod-price b {
  color: var(--pos-text);
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
}

.pos-workbench .cart-qty-controls {
  justify-content: center;
  gap: 3px;
}

.pos-workbench .cart-qty-controls button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--pos-line);
  border-radius: 7px;
  background: var(--pos-surface-raised);
  color: var(--pos-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
}

.pos-workbench .cart-qty-controls button:hover {
  border-color: var(--pos-accent);
  background: var(--pos-accent);
}

.pos-workbench .cart-qty-controls input {
  width: 48px;
  height: 34px;
  border: 1px solid var(--pos-line);
  border-radius: 7px;
  background: var(--pos-canvas);
  color: var(--pos-text);
  font-family: 'JetBrains Mono', monospace;
}

.pos-workbench .cart-prod-subtotal {
  align-self: center;
  color: var(--pos-text);
  font-size: 0.9rem;
  font-weight: 600;
}

.pos-workbench .cart-footer {
  padding: 1rem;
  border-top: 1px solid var(--pos-line);
  background: var(--pos-surface);
}

.pos-workbench .cart-summary {
  display: block;
  margin: 0 0 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--pos-line);
  border-radius: 12px;
  background: var(--pos-canvas);
}

.pos-workbench .cart-summary .summary-row {
  width: 100%;
  min-height: 30px;
  margin: 0;
  color: var(--pos-muted);
  font-size: 0.88rem;
}

.pos-workbench .cart-summary .summary-row > span:last-child,
.pos-workbench .cart-summary .summary-row.total > span:last-child {
  color: var(--pos-text);
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}

.pos-workbench .discount-field {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--pos-muted);
}

.pos-workbench .discount-field b {
  font-size: 0.8rem;
  font-weight: 500;
}

.pos-workbench .cart-summary input {
  width: 74px;
  height: 32px;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--pos-line);
  border-radius: 7px;
  background: var(--pos-surface-raised);
  color: var(--pos-text);
  font-family: 'JetBrains Mono', monospace;
}

.pos-workbench .cart-summary .summary-row.total {
  min-height: 44px;
  margin-top: 0.55rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--pos-line);
  color: var(--pos-text);
  font-size: 1.05rem;
}

.pos-workbench .cart-summary .summary-row.total > span:last-child {
  color: var(--pos-accent);
  font-size: 1.45rem;
  font-weight: 600;
}

.pos-workbench .payment-section {
  margin-bottom: 0.85rem;
}

.pos-workbench .payment-title {
  margin-bottom: 0.45rem;
  color: var(--pos-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pos-workbench .payment-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.pos-workbench .pay-btn-img {
  min-width: 0;
  min-height: 54px;
  padding: 0.45rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid var(--pos-line);
  border-radius: 10px;
  background: var(--pos-canvas);
  color: var(--pos-muted);
  box-shadow: none;
}

.pos-workbench .pay-btn-img img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.pos-workbench .pay-btn-img span {
  color: inherit;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
}

.pos-workbench .pay-btn-img:hover {
  border-color: var(--pos-muted);
  background: var(--pos-surface-raised);
}

.pos-workbench .pay-btn-img.active {
  border-color: var(--pos-accent);
  background: color-mix(in srgb, var(--pos-accent) 14%, var(--pos-canvas));
  color: var(--pos-text);
}

.pos-workbench .btn-procesar {
  min-height: 58px;
  padding: 0.75rem 0.9rem;
  display: flex;
  justify-content: space-between;
  border: 1px solid var(--pos-accent);
  border-radius: 12px;
  background: var(--pos-accent);
  color: #fff;
  box-shadow: 0 10px 24px rgba(220, 38, 38, 0.22);
}

.pos-workbench .btn-procesar span,
.pos-workbench .btn-procesar strong {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.pos-workbench .btn-procesar strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
}

.pos-workbench .btn-procesar:hover:not(:disabled) {
  background: var(--primary-red-dark);
  border-color: var(--primary-red-dark);
  transform: translateY(-1px);
}

.pos-workbench .btn-procesar:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  box-shadow: none;
}

body[data-theme="light"] .pos-workbench {
  --pos-canvas: #f8f5f2;
  --pos-surface: #ffffff;
  --pos-surface-raised: #fff5ef;
  --pos-line: #e4d8d2;
  --pos-text: #24130e;
  --pos-muted: #765d54;
  --pos-accent: #e65f38;
}

body[data-theme="light"] .pos-workbench .pos-cart,
body[data-theme="light"] .pos-workbench .cart-header,
body[data-theme="light"] .pos-workbench .cart-footer,
body[data-theme="light"] .pos-workbench .cart-row,
body[data-theme="light"] .pos-workbench .product-card,
body[data-theme="light"] .pos-workbench .pay-btn-img,
body[data-theme="light"] .pos-workbench .cart-summary,
body[data-theme="light"] .pos-workbench .categories-bar {
  border-color: var(--pos-line);
  background: var(--pos-surface);
}

body[data-theme="light"] .pos-workbench .product-card:hover {
  background: var(--pos-surface-raised);
}

body[data-theme="light"] .pos-workbench .product-card.low-stock {
  background: #fff9e8;
}

body[data-theme="light"] .pos-workbench .product-card.stock-ilimitado {
  background: #f3f8ff;
}

body[data-theme="light"] .pos-workbench .product-name,
body[data-theme="light"] .pos-workbench .cart-prod-name,
body[data-theme="light"] .pos-workbench .cart-heading h3,
body[data-theme="light"] .pos-workbench .category-section-title,
body[data-theme="light"] .pos-workbench .pos-command-title h2 {
  color: var(--pos-text) !important;
}

body[data-theme="light"] .pos-workbench .product-info,
body[data-theme="light"] .pos-workbench .product-stock,
body[data-theme="light"] .pos-workbench .cart-heading p,
body[data-theme="light"] .pos-workbench .cart-empty-msg,
body[data-theme="light"] .pos-workbench .payment-title {
  color: var(--pos-muted) !important;
}

body[data-theme="light"] .pos-workbench .cart-summary input,
body[data-theme="light"] .pos-workbench .cart-qty-controls input,
body[data-theme="light"] .pos-workbench .pos-search input {
  border-color: var(--pos-line) !important;
  background: transparent !important;
  color: var(--pos-text) !important;
}

body[data-theme="light"] .pos-workbench .cart-qty-controls button {
  border-color: var(--pos-line);
  background: var(--pos-surface-raised);
  color: var(--pos-text);
}

body[data-theme="light"] .pos-workbench .pay-btn-img.active {
  border-color: var(--pos-accent);
  background: #fff0e9;
  color: var(--pos-text);
}

body[data-theme="light"] .pos-workbench .btn-procesar {
  border-color: var(--pos-accent);
  background: var(--pos-accent);
  box-shadow: 0 10px 24px rgba(230, 95, 56, 0.2);
}

@media (max-width: 1280px) {
  .pos-workbench {
    grid-template-columns: minmax(0, 1fr) 390px;
  }

  .pos-workbench .category-products,
  .pos-workbench .products-flex-container,
  .pos-workbench .pos-products-grid.grid-mode {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 1024px) {
  .content-area.pos-surface {
    overflow: hidden;
  }

  .pos-workbench {
    display: block;
    height: calc(100dvh - 67px);
    min-height: 0;
  }

  .pos-workbench .pos-products {
    height: 100%;
    padding-bottom: 80px;
  }

  .pos-workbench .pos-cart {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 95;
    width: auto;
    height: min(72vh, 660px);
    max-height: min(72vh, 660px) !important;
    border: 1px solid var(--pos-line);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: var(--pos-surface);
    transform: translateY(calc(100% - 72px)) !important;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.22);
  }

  .pos-workbench .pos-cart.expanded {
    transform: translateY(0) !important;
  }

  .pos-workbench .cart-header {
    min-height: 72px;
    cursor: default;
  }

  .pos-workbench .cart-header::before {
    display: none;
  }

  .pos-workbench .cart-toggle {
    display: grid;
  }

  .pos-workbench .cart-items {
    max-height: none;
  }

  .pos-workbench .cart-qty-controls button,
  .pos-workbench .cart-btn-remove {
    width: 44px;
    height: 44px;
  }

  .pos-workbench .cart-qty-controls input {
    height: 44px;
  }
}

@media (max-width: 700px) {
  .pos-commandbar {
    min-height: auto;
    padding: 0.8rem;
    align-items: stretch;
    flex-direction: column;
    gap: 0.7rem;
  }

  .pos-command-title {
    min-width: 0;
  }

  .pos-command-title p,
  .pos-workbench .pos-search kbd {
    display: none;
  }

  .pos-command-title h2 {
    font-size: 20px;
  }

  .pos-workbench .pos-search {
    width: 100%;
  }

  .pos-workbench .pos-search input {
    min-height: 46px;
    font-size: 16px;
  }

  .pos-workbench .categories-bar {
    min-height: 56px;
    padding: 0.55rem 0.8rem;
  }

  .pos-workbench .category-btn {
    min-height: 44px;
    font-size: 14px;
  }

  .pos-workbench .pos-products-grid {
    padding: 0 0.8rem 1.5rem;
  }

  .pos-workbench .category-products,
  .pos-workbench .products-flex-container,
  .pos-workbench .pos-products-grid.grid-mode {
    grid-template-columns: 1fr;
  }

  .pos-workbench .product-card,
  .pos-workbench .category-products .product-card,
  .pos-workbench .products-flex-container .product-card {
    min-height: 112px;
  }

  .pos-workbench .category-section-title {
    font-size: 14px;
  }

  .pos-workbench .category-section-title small {
    font-size: 12px;
  }

  .pos-workbench .product-name {
    font-size: 16px;
  }

  .pos-workbench .product-info {
    display: block;
    font-size: 14px;
  }

  .pos-workbench .product-stock,
  .pos-workbench .stock-inf {
    font-size: 13px;
  }

  .pos-workbench .product-stock b {
    font-size: 14px;
  }

  .pos-workbench .product-stock small,
  .pos-workbench .product-price .price-unit {
    font-size: 12px;
  }

  .pos-workbench .product-price {
    font-size: 16px;
  }

  .pos-workbench .cart-heading h3 {
    font-size: 17px;
  }

  .pos-workbench .cart-heading p,
  .pos-workbench .cart-prod-price,
  .pos-workbench .payment-title {
    font-size: 13px;
  }

  .pos-workbench .cart-prod-name,
  .pos-workbench .cart-summary .summary-row,
  .pos-workbench .pay-btn-img span {
    font-size: 14px;
  }

  .pos-workbench .cart-prod-subtotal,
  .pos-workbench .btn-procesar strong {
    font-size: 15px;
  }

  .pos-workbench .cart-summary .summary-row.total {
    font-size: 16px;
  }

  .pos-workbench .cart-summary .summary-row.total > span:last-child {
    font-size: 21px;
  }

  .pos-workbench .cart-header .btn-outline-danger {
    display: none;
  }

  .pos-workbench .pos-cart {
    height: calc(100dvh - 72px);
    max-height: calc(100dvh - 72px) !important;
  }

  .pos-workbench .cart-row-bottom {
    grid-template-columns: 1fr auto;
  }

  .pos-workbench .cart-prod-price {
    display: block;
    grid-column: 1 / -1;
  }

  .pos-workbench .cart-qty-controls {
    justify-content: flex-start;
  }

  .pos-workbench .cart-qty-controls button {
    width: 38px;
    height: 44px;
  }

  .pos-workbench .cart-footer {
    padding: 0.75rem;
  }

  .pos-workbench .cart-summary {
    margin-bottom: 0.7rem;
    padding: 0.6rem 0.75rem;
  }

  .pos-workbench .payment-section {
    margin-bottom: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pos-commandbar::after {
    animation: none;
  }

  .pos-workbench .pos-cart,
  .pos-workbench .cart-toggle svg {
    transition: none;
  }
}

/* Producto manual: acción discreta sobre el catálogo */
.pos-workbench .manual-product-launcher {
  flex: 0 0 auto;
  padding: 0.8rem 1.25rem 0;
  background: var(--pos-canvas);
}

.pos-workbench .manual-product-launcher button {
  min-height: 42px;
  padding: 0.55rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--pos-accent);
  border-radius: 9px;
  background: transparent;
  color: var(--pos-accent);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.pos-workbench .manual-product-launcher button:hover {
  background: var(--pos-accent);
  color: #fff;
}

.pos-workbench .manual-product-launcher button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pos-accent) 30%, transparent);
  outline-offset: 2px;
}

.pos-workbench .manual-product-launcher svg {
  width: 17px;
  height: 17px;
}

.manual-product-modal {
  width: min(760px, calc(100vw - 2rem));
  max-width: 760px;
}

.manual-product-modal .modal-header {
  padding: 1.75rem 2rem;
}

.manual-product-modal .modal-title {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.2;
}

.manual-product-modal .modal-body {
  padding: 2rem;
}

.manual-product-modal .modal-footer {
  padding: 1.25rem 2rem 1.75rem;
}

.manual-product-modal .modal-footer .btn {
  min-height: 52px;
  padding-inline: 1.75rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.manual-product-modal-form .form-group {
  margin-bottom: 1.5rem;
}

.manual-product-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.manual-product-modal-form .form-label {
  font-size: 1.05rem;
  font-weight: 800;
}

.manual-product-modal-form .form-input {
  min-height: 56px;
  font-size: 1.1rem;
}

.manual-product-modal-grid #manual-product-qty {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.manual-modal-money {
  position: relative;
}

.manual-modal-money > span {
  position: absolute;
  top: 50%;
  left: 0.85rem;
  z-index: 1;
  color: var(--gray-400);
  font-size: 1rem;
  font-weight: 700;
  transform: translateY(-50%);
  pointer-events: none;
}

.manual-modal-money .form-input {
  padding-left: 2.85rem;
  font-variant-numeric: tabular-nums;
}

.manual-product-name-field .form-input {
  width: 100%;
}

.manual-product-modal-form .form-input.is-invalid {
  border-color: var(--error);
}

.manual-product-total {
  min-height: 66px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  background: var(--gray-800);
}

.manual-product-total span {
  color: var(--gray-300);
  font-size: 1rem;
  font-weight: 600;
}

.manual-product-total strong {
  color: var(--primary-red-light);
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
}

.manual-product-error {
  margin: 0.8rem 0 0;
  color: #fca5a5;
  font-size: 0.82rem;
  font-weight: 600;
}

.manual-product-error[hidden] {
  display: none;
}

.pos-workbench .cart-manual-badge {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.15rem 0.35rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--pos-accent) 18%, var(--pos-canvas));
  color: var(--pos-accent);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.12rem;
}

body[data-theme="light"] .manual-product-total {
  background: #fff5ef;
}

body[data-theme="light"] .manual-product-total span {
  color: #765d54;
}

body[data-theme="light"] .manual-product-total strong {
  color: #d94f2b;
}

@media (max-width: 700px) {
  .pos-workbench .manual-product-launcher {
    padding: 0.7rem 0.8rem 0;
  }

  .pos-workbench .manual-product-launcher button {
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }

  .manual-product-modal .modal-header,
  .manual-product-modal .modal-body {
    padding: 1.25rem;
  }

  .manual-product-modal .modal-footer {
    padding: 1rem 1.25rem 1.25rem;
  }

  .manual-product-modal .modal-footer .btn {
    flex: 1;
    padding-inline: 0.85rem;
  }
}

@media (max-width: 420px) {
  .manual-product-modal-grid #manual-product-qty {
    text-align: left;
  }
}

/* POS: modales de cobro amplios y legibles */
.modal.pos-product-modal,
.modal.ticket-print-modal,
.modal.efectivo-payment-modal,
.modal.ticket-sale-modal {
  max-width: 760px;
}

.modal.pos-product-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.pos-product-modal .modal-body {
  min-height: 0;
  overflow-y: auto;
}

.pos-product-modal .modal-footer {
  position: relative;
  z-index: 1;
  display: block;
  background: var(--gray-900);
}

body[data-theme="light"] .pos-product-modal .modal-footer {
  background: #fff;
}

.pos-product-actions,
.pos-product-action-summary,
.pos-product-action-buttons,
.pos-product-qty-field {
  min-width: 0;
}

.pos-product-actions {
  display: grid;
  gap: 0.85rem;
  width: 100%;
}

.pos-product-action-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.85rem;
  align-items: end;
}

.pos-product-qty-field {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.pos-product-qty-field .form-label {
  margin: 0;
  text-align: center;
}

.pos-product-action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.pos-product-modal .pos-product-action-summary #add-qty {
  width: 100%;
  min-height: 54px;
  text-align: center;
}

.pos-product-modal .pos-product-action-summary .subtotal-preview {
  min-height: 54px;
  margin: 0 !important;
  padding: 0.55rem 0.85rem;
  display: grid;
  place-content: center;
  gap: 0.15rem;
  text-align: center;
  font-size: 1.05rem !important;
}

.pos-product-action-summary .subtotal-preview > span:last-child {
  white-space: nowrap;
}

.pos-product-action-summary #preview-subtotal {
  color: var(--primary-red);
}

.modal.ticket-sale-modal {
  width: min(1080px, calc(100vw - 2rem));
  max-width: 1080px;
  max-height: min(90dvh, 860px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.ticket-sale-modal .modal-header {
  padding: 1.35rem 1.75rem;
}

.ticket-sale-modal .modal-title {
  font-size: 1.5rem;
  font-weight: 800;
}

.ticket-sale-modal .modal-body {
  min-height: 0;
  padding: 1.5rem;
  overflow-y: auto;
}

.ticket-sale-modal .modal-footer:empty {
  display: none;
}

.ticket-sale-layout {
  display: grid;
  grid-template-columns: minmax(370px, 1.08fr) minmax(330px, 0.92fr);
  gap: 1.5rem;
  align-items: stretch;
  min-height: 590px;
}

.ticket-paper-stage {
  display: grid;
  place-items: start center;
  min-width: 0;
  padding: 1.5rem;
  border-radius: 16px;
  background: var(--gray-950, #09090b);
}

.ticket-sale-modal .ticket-preview {
  width: min(100%, 390px);
  max-width: 390px;
  margin: 0;
  padding: 2rem 1.75rem;
  font-size: 14px;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.ticket-sale-modal .ticket-preview .ticket-header h2 {
  font-size: 1.35rem;
}

.ticket-sale-modal .ticket-preview .ticket-header p,
.ticket-sale-modal .ticket-info p,
.ticket-sale-modal .ticket-item,
.ticket-sale-modal .ticket-item-detail .item-line {
  font-size: 0.82rem;
}

.ticket-sale-sidebar {
  display: flex;
  flex-direction: column;
  align-self: start;
  position: sticky;
  top: 0;
  min-width: 0;
  gap: 1.25rem;
}

.ticket-sale-modal .ticket-system-info {
  margin: 0;
  padding: 1.5rem;
  border-radius: 14px;
}

.ticket-sale-modal .ticket-system-info h3 {
  margin: 0 0 1.25rem;
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 800;
}

.ticket-system-details {
  display: grid;
  gap: 0;
  margin: 0;
}

.ticket-system-details > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--gray-700);
}

.ticket-system-details > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ticket-system-details dt {
  color: var(--gray-300);
  font-weight: 650;
}

.ticket-system-details dd {
  margin: 0;
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ticket-sale-actions {
  display: grid;
  gap: 0.85rem;
}

.ticket-sale-actions .btn {
  width: 100%;
  min-height: 58px;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
}

.ticket-sale-print {
  min-height: 68px !important;
  font-size: 1.2rem !important;
}

body[data-theme="light"] .ticket-paper-stage {
  background: #f1f1f3;
}

body[data-theme="light"] .ticket-sale-modal .ticket-system-info h3,
body[data-theme="light"] .ticket-system-details dd {
  color: #18181b;
}

body[data-theme="light"] .ticket-system-details dt {
  color: #52525b;
}

body[data-theme="light"] .ticket-system-details > div {
  border-bottom-color: #d4d4d8;
}

@media (max-width: 800px) {
  .modal.ticket-sale-modal {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
  }

  .ticket-sale-modal .modal-header,
  .ticket-sale-modal .modal-body {
    padding: 1rem;
  }

  .ticket-sale-layout {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .ticket-paper-stage {
    padding: 1rem;
  }

  .ticket-sale-sidebar {
    position: static;
    gap: 1rem;
  }

  .ticket-sale-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 430px) {
  .ticket-sale-modal .ticket-preview {
    padding: 1.25rem 1rem;
    font-size: 12px;
  }

  .ticket-sale-modal .ticket-system-info {
    padding: 1.15rem;
  }

  .ticket-sale-actions {
    grid-template-columns: 1fr;
  }

  .ticket-sale-actions .btn,
  .ticket-sale-print {
    min-height: 54px !important;
    font-size: 1rem !important;
  }
}

.pos-product-modal .modal-header,
.ticket-print-modal .modal-header,
.efectivo-payment-modal .modal-header {
  padding: 1.75rem 2rem;
}

.pos-product-modal .modal-title,
.ticket-print-modal .modal-title,
.efectivo-payment-modal .modal-title {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.2;
}

.pos-product-modal .modal-body,
.ticket-print-modal .modal-body,
.efectivo-payment-modal .modal-body {
  padding: 2rem;
}

.pos-product-modal .modal-footer,
.ticket-print-modal .modal-footer,
.efectivo-payment-modal .modal-footer {
  padding: 1.25rem 2rem 1.75rem;
}

.pos-product-modal .modal-footer .btn,
.ticket-print-modal .modal-footer .btn,
.efectivo-payment-modal .modal-footer .btn {
  min-height: 52px;
  padding-inline: 1.75rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.pos-product-modal .add-cart-modal h4 {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.3;
}

.pos-product-modal .add-cart-modal .product-detail,
.pos-product-modal .add-cart-modal .stock-info,
.pos-product-modal .add-cart-modal .pricing-tiers > div {
  font-size: 1.05rem;
}

.pos-product-modal .add-cart-modal .pricing-tiers-title,
.pos-product-modal .add-cart-modal .pricing-tiers small,
.pos-product-modal .add-cart-modal .preview-tier {
  font-size: 0.95rem;
}

.pos-product-modal .add-cart-modal .pricing-tiers > div {
  min-height: 54px;
  padding-block: 0.75rem;
}

.pos-product-modal .add-cart-modal .pricing-tiers strong {
  font-size: 1.05rem;
}

.pos-product-modal .form-label {
  font-size: 1.1rem;
  font-weight: 800;
}

.pos-product-modal #add-qty {
  min-height: 62px;
  font-size: 1.75rem !important;
  font-weight: 800;
}

.pos-product-modal .add-cart-modal .subtotal-preview {
  padding: 1.25rem;
  font-size: 1.35rem !important;
  font-weight: 800;
}

@media (max-height: 820px) and (min-width: 601px) {
  .modal.pos-product-modal {
    max-height: calc(100dvh - 2rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .pos-product-modal .modal-header {
    padding-block: 1rem;
  }

  .pos-product-modal .modal-body {
    padding-block: 1rem;
    overflow-y: auto;
  }

  .pos-product-modal .modal-footer {
    padding-block: 0.9rem;
  }

  .pos-product-modal .add-cart-modal .pricing-tiers > div {
    min-height: 44px;
    padding-block: 0.5rem;
  }

  .pos-product-modal .add-cart-modal .pricing-tiers small {
    display: inline;
    margin: 0 0 0 0.45rem;
  }

  .pos-product-modal .form-group {
    margin-top: 0.65rem !important;
    margin-bottom: 0;
  }

  .pos-product-modal #add-qty {
    min-height: 52px;
  }

  .pos-product-modal .add-cart-modal .subtotal-preview {
    margin-top: 0.65rem !important;
    padding: 0.85rem;
  }
}

.ticket-print-modal .ticket-print-intro {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.55;
}

.ticket-print-modal .form-label {
  font-size: 1.1rem;
  font-weight: 800;
}

.ticket-print-modal .form-input,
.ticket-print-modal .form-select {
  min-height: 60px;
  font-size: 1.15rem;
  font-weight: 700;
}

.ticket-print-modal .ticket-print-error {
  font-size: 1rem;
  font-weight: 700;
}

.efectivo-payment-modal .efectivo-modal,
.efectivo-payment-modal .form-label,
.efectivo-payment-modal .form-input {
  font-weight: 800;
}

.efectivo-payment-modal .efectivo-modal .total-display {
  padding: 1.75rem;
  margin-bottom: 1.75rem;
}

.efectivo-payment-modal .efectivo-modal .total-display .label,
.efectivo-payment-modal .efectivo-modal .vuelto-display .label,
.efectivo-payment-modal .efectivo-modal .form-label {
  font-size: 1.15rem;
  font-weight: 800;
}

.efectivo-payment-modal .efectivo-modal .total-display .amount {
  font-size: 2.75rem;
  font-weight: 800;
}

.efectivo-payment-modal .efectivo-modal .monto-input {
  min-height: 68px;
  font-size: 2rem;
  font-weight: 800;
}

.efectivo-payment-modal .efectivo-modal .vuelto-display {
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.efectivo-payment-modal .efectivo-modal .vuelto-display .amount {
  font-size: 2.25rem;
  font-weight: 800;
}

@media (max-width: 600px) {
  .modal.pos-product-modal,
  .modal.ticket-print-modal,
  .modal.efectivo-payment-modal {
    width: calc(100% - 1rem);
    margin: 0.5rem;
  }

  .pos-product-modal .modal-header,
  .ticket-print-modal .modal-header,
  .efectivo-payment-modal .modal-header,
  .pos-product-modal .modal-body,
  .ticket-print-modal .modal-body,
  .efectivo-payment-modal .modal-body {
    padding: 1.25rem;
  }

  .pos-product-modal .modal-body {
    padding-block: 0.4rem;
  }

  .pos-product-modal .modal-title,
  .ticket-print-modal .modal-title,
  .efectivo-payment-modal .modal-title {
    font-size: 1.4rem;
  }

  .pos-product-modal .modal-footer,
  .ticket-print-modal .modal-footer,
  .efectivo-payment-modal .modal-footer {
    padding: 1rem 1.25rem 1.25rem;
  }

  .pos-product-modal .modal-footer .btn,
  .ticket-print-modal .modal-footer .btn,
  .efectivo-payment-modal .modal-footer .btn {
    flex: 1;
    padding-inline: 0.75rem;
  }

  .pos-product-modal .add-cart-modal .pricing-tiers > div {
    align-items: center;
    flex-direction: row;
    gap: 0.6rem;
    min-height: 46px;
    padding-block: 0.55rem;
  }

  .pos-product-modal .add-cart-modal .pricing-tiers small {
    display: inline;
    margin: 0 0 0 0.35rem;
  }

  .pos-product-modal .add-cart-modal .pricing-tiers strong {
    margin-left: auto;
    text-align: right;
  }

  .pos-product-modal .form-group {
    margin-top: 0.75rem !important;
    margin-bottom: 0;
  }

  .pos-product-modal #add-qty {
    min-height: 54px;
  }

  .pos-product-modal .add-cart-modal .subtotal-preview {
    margin-top: 0.75rem !important;
    padding: 0.85rem;
  }

.efectivo-payment-modal .efectivo-modal .total-display .amount {
    font-size: 2.25rem;
  }
}

/* Caja: resumen legible e ingresos consultables por período */
.caja-report-card {
  overflow: hidden;
}

.caja-report-toolbar {
  align-items: end;
  gap: 1.5rem;
}

.caja-report-toolbar > div {
  min-width: 0;
}

.caja-report-toolbar p {
  margin: 0.35rem 0 0;
  color: var(--gray-400);
  font-size: 0.85rem;
}

.caja-report-user-filter {
  display: grid;
  width: min(300px, 100%);
  gap: 0.4rem;
  margin-left: auto;
  color: var(--gray-300);
  font-size: 0.78rem;
  font-weight: 700;
}

.caja-report-user-filter .form-input {
  width: 100%;
  min-height: 44px;
}

.caja-detail-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.caja-detail-stats .stat-card {
  display: block;
  min-width: 0;
  padding: 1.15rem 1.25rem;
  overflow: visible;
}

.caja-detail-stats .stat-label {
  min-height: 2.4em;
  margin-bottom: 0.35rem;
  line-height: 1.2;
}

.caja-detail-stats .stat-value {
  min-width: 0;
  font-size: clamp(1.2rem, 1.7vw, 1.75rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.caja-ingresos-panel {
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px solid var(--gray-700);
  border-radius: 14px;
  background: var(--gray-900);
  scroll-margin-top: 5.5rem;
}

.caja-period-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.caja-period-btn {
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: 1px solid var(--gray-600);
  border-radius: 10px;
  background: var(--gray-800);
  color: var(--gray-300);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.caja-period-btn:hover,
.caja-period-btn:focus-visible {
  border-color: var(--primary-red);
  color: var(--white);
}

.caja-period-btn.active {
  border-color: var(--primary-red);
  background: var(--primary-red);
  color: var(--white);
}

.caja-date-range {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: -0.25rem 0 1rem;
  padding: 1rem;
  border-radius: 12px;
  background: var(--gray-800);
}

.caja-date-range[hidden] {
  display: none;
}

.caja-date-range label {
  display: grid;
  flex: 1 1 160px;
  gap: 0.35rem;
  color: var(--gray-300);
  font-size: 0.78rem;
  font-weight: 600;
}

.caja-date-range .btn {
  min-height: 44px;
}

.caja-report-loading {
  padding: 2rem 1rem;
  color: var(--gray-400);
  text-align: center;
}

.caja-income-summary {
  display: grid;
  grid-template-columns: minmax(190px, 0.85fr) minmax(0, 2fr);
  gap: 1rem;
  padding: 1rem 0;
  border-block: 1px solid var(--gray-700);
}

.caja-income-total {
  display: grid;
  align-content: center;
  gap: 0.2rem;
}

.caja-income-total span,
.caja-payment-breakdown span {
  color: var(--gray-400);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.caja-income-total strong {
  color: var(--white);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.caja-income-total small {
  color: var(--gray-400);
  font-size: 0.78rem;
}

.caja-payment-breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.caja-payment-breakdown > div {
  display: grid;
  align-content: center;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--gray-700);
  border-radius: 12px;
  background: var(--gray-800);
}

.caja-payment-breakdown strong {
  color: var(--white);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.caja-income-note {
  max-width: 75ch;
  margin: 0.75rem 0 1.25rem;
  color: var(--gray-400);
  font-size: 0.78rem;
  line-height: 1.5;
}

.caja-top-products {
  margin-bottom: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--gray-700);
  border-radius: 12px;
  background: var(--gray-800);
}

.caja-top-products-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.caja-top-products-heading h5 {
  margin: 0 0 0.2rem;
  color: var(--white);
  font-size: 1rem;
}

.caja-top-products-heading p,
.caja-top-products-empty p {
  margin: 0;
  color: var(--gray-400);
  font-size: 0.78rem;
  line-height: 1.45;
}

.caja-copy-products {
  flex: 0 0 auto;
  padding: 0.58rem 0.85rem;
  border: 1px solid var(--primary-red);
  border-radius: 8px;
  background: transparent;
  color: var(--primary-red-light);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.caja-copy-products:hover,
.caja-copy-products:focus-visible {
  background: var(--primary-red);
  color: var(--white);
}

.caja-copy-products:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary-red-light) 45%, transparent);
  outline-offset: 2px;
}

.caja-top-products-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.caja-top-product {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--gray-700);
}

.caja-top-product:first-child {
  border-top: 0;
}

.caja-top-product-rank {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-red) 16%, var(--gray-900));
  color: var(--primary-red-light);
  font-size: 0.85rem;
  font-weight: 800;
}

.caja-top-product-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary-red) 16%, var(--gray-900));
  color: var(--primary-red-light);
}

.caja-top-product-icon svg {
  width: 22px;
  height: 22px;
}

.caja-top-product-main {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.caja-top-product-main span,
.caja-top-product-values dt {
  color: var(--gray-400);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.caja-top-product-main strong,
.caja-top-product-values dd {
  color: var(--white);
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.caja-top-product-main small {
  color: var(--gray-400);
  font-size: 0.78rem;
}

.caja-top-product-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(7rem, auto));
  gap: 1rem;
  margin: 0;
  text-align: right;
}

.caja-top-product-values div {
  display: grid;
  gap: 0.2rem;
}

.caja-top-product-values dt,
.caja-top-product-values dd {
  margin: 0;
}

.caja-top-products-empty {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 0.25rem;
}

.caja-top-products-empty strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--white);
}

.caja-sales-export {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--gray-700);
  border-radius: 12px;
  background: var(--gray-800);
}

.caja-sales-export h5 {
  margin: 0 0 0.25rem;
  color: var(--white);
  font-size: 1rem;
}

.caja-sales-export p {
  margin: 0;
  color: var(--gray-400);
  font-size: 0.8rem;
}

.caja-download-sales {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0.65rem 0.95rem;
  border: 1px solid var(--primary-red);
  border-radius: 8px;
  background: var(--primary-red);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.caja-download-sales:hover:not(:disabled),
.caja-download-sales:focus-visible:not(:disabled) {
  background: var(--primary-red-dark);
}

.caja-download-sales:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary-red-light) 45%, transparent);
  outline-offset: 2px;
}

.caja-download-sales:disabled {
  border-color: var(--gray-600);
  background: var(--gray-700);
  color: var(--gray-400);
  cursor: not-allowed;
}

.caja-report-grid {
  display: grid;
  gap: 1.25rem;
}

.caja-report-grid h5 {
  margin-bottom: 0.6rem;
  color: var(--gray-200);
  font-size: 0.92rem;
}

.caja-income-table td,
.caja-balance-table td {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body[data-theme="light"] .caja-ingresos-panel {
  border-color: var(--warm-border);
  background: var(--warm-surface);
}

body[data-theme="light"] .caja-report-toolbar p,
body[data-theme="light"] .caja-report-user-filter {
  color: #6f4a3d;
}

body[data-theme="light"] .caja-period-btn,
body[data-theme="light"] .caja-date-range,
body[data-theme="light"] .caja-payment-breakdown > div {
  border-color: #e3c8bc;
  background: var(--warm-surface-raised);
  color: #5f4035;
}

body[data-theme="light"] .caja-period-btn:hover,
body[data-theme="light"] .caja-period-btn:focus-visible {
  border-color: var(--primary-red);
  color: #2b1009;
}

body[data-theme="light"] .caja-period-btn.active {
  border-color: var(--primary-red);
  background: var(--primary-red);
  color: #fff;
}

body[data-theme="light"] .caja-income-summary {
  border-color: #ead4ca;
}

body[data-theme="light"] .caja-top-products {
  border-color: #e3c8bc;
  background: var(--warm-surface-raised);
}

body[data-theme="light"] .caja-sales-export {
  border-color: #e3c8bc;
  background: var(--warm-surface-raised);
}

body[data-theme="light"] .caja-sales-export h5 {
  color: #2b1009;
}

body[data-theme="light"] .caja-sales-export p {
  color: #6f4a3d;
}

body[data-theme="light"] .caja-top-product {
  border-color: #ead4ca;
}

body[data-theme="light"] .caja-top-product-icon {
  background: #f8e2d8;
}

body[data-theme="light"] .caja-top-products-heading h5,
body[data-theme="light"] .caja-top-products-empty strong,
body[data-theme="light"] .caja-top-product-main strong,
body[data-theme="light"] .caja-top-product-values dd {
  color: #2b1009;
}

body[data-theme="light"] .caja-top-products-heading p,
body[data-theme="light"] .caja-top-products-empty p,
body[data-theme="light"] .caja-top-product-main span,
body[data-theme="light"] .caja-top-product-main small,
body[data-theme="light"] .caja-top-product-values dt {
  color: #6f4a3d;
}

body[data-theme="light"] .caja-income-total strong,
body[data-theme="light"] .caja-payment-breakdown strong,
body[data-theme="light"] .caja-report-grid h5 {
  color: #2b1009;
}

body[data-theme="light"] .caja-ingresos-panel .caja-section-heading h4 {
  color: #2b1009;
}

body[data-theme="light"] .caja-income-total span,
body[data-theme="light"] .caja-income-total small,
body[data-theme="light"] .caja-payment-breakdown span,
body[data-theme="light"] .caja-income-note,
body[data-theme="light"] .caja-date-range label {
  color: #6f4a3d;
}

@media (max-width: 1050px) {
  .caja-detail-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .caja-report-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .caja-report-user-filter {
    width: 100%;
    margin-left: 0;
  }

  .caja-detail-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .caja-detail-stats .stat-card {
    padding: 0.95rem;
  }

  .caja-income-summary {
    grid-template-columns: 1fr;
  }

  .caja-payment-breakdown {
    grid-template-columns: 1fr;
  }

  .caja-top-product {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .caja-top-product-values {
    grid-column: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: left;
  }
}

@media (max-width: 460px) {
  .caja-top-products-heading {
    align-items: flex-start;
  }

  .caja-copy-products {
    padding-inline: 0.7rem;
  }

  .caja-sales-export {
    align-items: stretch;
    flex-direction: column;
  }

  .caja-download-sales {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .caja-detail-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .caja-detail-stats .stat-label {
    min-height: 0;
  }

  .caja-ingresos-panel {
    padding: 1rem;
  }

  .caja-period-btn {
    flex: 1 1 calc(50% - 0.5rem);
  }

  .caja-date-range .btn {
    width: 100%;
  }
}

/* ============================================
   PUNTO DE TARJETAS — MUESTRARIO FOTOGRÁFICO
   ============================================ */

.tarjetas-workbench .tarjetas-catalog {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--pos-line) var(--pos-canvas);
}

.tarjetas-workbench {
  min-height: 0;
}

.tarjetas-commandbar {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--pos-line);
  background: var(--pos-surface);
}

.tarjetas-title-block {
  min-width: 185px;
}

.tarjetas-title-block h2 {
  margin: 0;
  color: var(--pos-text);
  font-size: 1.35rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.tarjetas-title-block p {
  margin: 0.25rem 0 0;
  color: var(--pos-muted);
  font-size: 0.86rem;
}

.tarjetas-command-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  min-width: 0;
  width: 100%;
}

.tarjetas-search {
  display: flex;
  align-items: center;
  width: auto;
  flex: 1 1 320px;
  min-height: 46px;
  padding: 0 0.7rem;
  gap: 0.55rem;
  border: 1px solid var(--pos-line);
  border-radius: 10px;
  background: var(--pos-canvas);
  color: var(--pos-muted);
}

.tarjetas-search:focus-within {
  border-color: var(--pos-accent);
}

.tarjetas-search svg {
  width: 19px;
  flex: 0 0 auto;
}

.tarjetas-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--pos-text);
  font: inherit;
  font-size: 0.93rem;
}

.tarjetas-search input::placeholder {
  color: var(--pos-muted);
}

.tarjetas-search kbd {
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--pos-line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--pos-surface-raised);
  color: var(--pos-muted);
  font-size: 0.7rem;
}

.tarjetas-command-actions > .btn {
  min-height: 46px;
  white-space: nowrap;
}

.tarjetas-filter-panel {
  flex: 0 0 auto;
  display: grid;
  gap: 0.7rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--pos-line);
  background: var(--pos-surface);
}

.tarjetas-filter-primary {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1rem 1.25rem;
}

.tarjetas-filter-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
}

.tarjetas-filter-primary .tarjetas-filter-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
}

.tarjetas-filter-row.tarjetas-filter-material {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  justify-items: start;
}

.tarjetas-filter-primary .tarjetas-filter-btn {
  padding-inline: 0.5rem;
  font-size: 0.8rem;
}

.tarjetas-filter-material {
  align-items: center;
}

.tarjetas-filter-label {
  color: var(--pos-muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tarjetas-filter-options {
  min-width: 0;
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding-bottom: 0.1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--pos-line) transparent;
}

.tarjetas-filter-btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0.45rem 0.78rem;
  border: 1px solid var(--pos-line);
  border-radius: 8px;
  background: transparent;
  color: var(--pos-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.tarjetas-filter-btn:hover,
.tarjetas-filter-btn:focus-visible {
  border-color: var(--pos-muted);
  color: var(--pos-text);
}

.tarjetas-filter-btn.active {
  border-color: var(--pos-accent);
  background: var(--pos-accent);
  color: #fff;
}

.tarjetas-filter-btn:focus-visible,
.tarjeta-product-photo:focus-visible,
.tarjetas-shelf-heading button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pos-accent) 42%, transparent);
  outline-offset: 2px;
}

.tarjetas-shelves {
  flex: 0 0 auto;
  min-height: auto;
  padding: 0 1.25rem 2rem;
  overflow: visible;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--pos-line) var(--pos-canvas);
}

.tarjetas-shelf {
  padding: 1.2rem 0 1.35rem;
  border-bottom: 1px solid var(--pos-line);
}

.tarjetas-shelf:last-child {
  border-bottom: 0;
}

.tarjetas-shelf-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.tarjetas-shelf-heading h3 {
  margin: 0;
  color: var(--pos-text);
  font-size: 1.08rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.tarjetas-shelf-heading p {
  margin: 0.22rem 0 0;
  color: var(--pos-muted);
  font-size: 0.8rem;
}

.tarjetas-shelf-heading button {
  padding: 0.4rem 0;
  border: 0;
  background: transparent;
  color: var(--pos-accent);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.tarjetas-shelf-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(238px, 270px);
  gap: 0.85rem;
  padding: 0.15rem 0 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--pos-line) transparent;
}

.tarjeta-product-card {
  --tarjeta-copy-bg: var(--pos-surface);
  --tarjeta-copy-border: var(--pos-line);
  --tarjeta-copy-ink: var(--pos-text);
  --tarjeta-copy-muted: var(--pos-muted);
  --tarjeta-copy-price: #96301c;
  --tarjeta-copy-info: var(--info);
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--tarjeta-copy-border);
  border-radius: 12px;
  background: var(--tarjeta-copy-bg);
  scroll-snap-align: start;
  transition: border-color 160ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tarjeta-product-card.material-dorado {
  --tarjeta-copy-bg: #fff3ad;
  --tarjeta-copy-border: #d4c86f;
  --tarjeta-copy-ink: #51460e;
  --tarjeta-copy-muted: #66591d;
  --tarjeta-copy-info: #2d5b9d;
}

.tarjeta-product-card.material-plateado {
  --tarjeta-copy-bg: #d5d5d5;
  --tarjeta-copy-border: #b8b8b8;
  --tarjeta-copy-ink: #343434;
  --tarjeta-copy-muted: #555;
  --tarjeta-copy-info: #2d5b9d;
}

.tarjeta-product-card.material-natural {
  --tarjeta-copy-bg: #e6bda9;
  --tarjeta-copy-border: #c99a83;
  --tarjeta-copy-ink: #512d24;
  --tarjeta-copy-muted: #684338;
  --tarjeta-copy-info: #2d5b9d;
}

.tarjeta-product-card.material-otros {
  --tarjeta-copy-bg: #fff;
  --tarjeta-copy-border: #ded8d4;
  --tarjeta-copy-ink: #2b211f;
  --tarjeta-copy-muted: #6f625d;
  --tarjeta-copy-info: #2d5b9d;
}

.tarjeta-product-card:hover {
  border-color: color-mix(in srgb, var(--tarjeta-copy-border) 70%, var(--pos-muted));
  transform: translateY(-2px);
}

.tarjeta-product-card.is-out {
  opacity: 0.62;
}

.tarjeta-product-card.is-out.is-admin-editable {
  opacity: 0.82;
}

.tarjeta-product-card.is-out.is-admin-editable .tarjeta-product-photo {
  cursor: pointer;
}

.tarjeta-product-card.is-unlimited .tarjeta-product-data span {
  color: var(--tarjeta-copy-info);
  font-weight: 700;
}

.tarjeta-product-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--tarjeta-copy-border);
  background: var(--pos-canvas);
  cursor: pointer;
}

.tarjeta-product-photo:disabled {
  cursor: not-allowed;
}

.tarjeta-product-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tarjeta-product-card:hover .tarjeta-product-photo img {
  transform: scale(1.025);
}

.tarjeta-product-copy {
  display: grid;
  gap: 0.42rem;
  padding: 0.8rem;
  background: var(--tarjeta-copy-bg);
  color: var(--tarjeta-copy-ink);
}

.tarjeta-product-copy > p {
  margin: 0;
  color: var(--tarjeta-copy-muted);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.tarjeta-product-copy h4 {
  min-height: 2.5em;
  margin: 0;
  color: var(--tarjeta-copy-ink);
  font-size: 0.96rem;
  line-height: 1.25;
}

.tarjeta-product-data {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
  padding-top: 0.2rem;
}

.tarjeta-product-data strong {
  color: var(--tarjeta-copy-price);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.tarjeta-product-data strong small {
  color: var(--tarjeta-copy-muted);
  font-size: 0.66rem;
  font-weight: 650;
}

.tarjeta-product-data span {
  color: var(--tarjeta-copy-muted);
  font-size: 0.72rem;
}

.tarjetas-empty {
  min-height: 330px;
  display: grid;
  place-content: center;
  justify-items: center;
  color: var(--pos-muted);
  text-align: center;
}

.tarjetas-empty svg {
  width: 48px;
  height: 48px;
}

.tarjetas-empty h3 {
  margin: 0.8rem 0 0.2rem;
  color: var(--pos-text);
}

.tarjetas-empty p {
  margin: 0;
}

.modal.tarjeta-product-modal {
  width: min(860px, calc(100vw - 2rem));
  max-width: 860px;
}

.tarjeta-image-editor {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.2fr);
  gap: 1rem;
  align-items: start;
}

.tarjeta-image-gallery {
  min-width: 0;
}

.tarjeta-image-preview {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--gray-700);
  border-radius: 12px;
  background: var(--gray-900);
  padding: 0;
  font: inherit;
  cursor: zoom-in;
}

.tarjeta-image-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.tarjeta-image-preview > span {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  color: var(--gray-400);
}

.tarjeta-image-zoom {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(18, 19, 21, 0.88);
  color: #fff;
  pointer-events: none;
}

.tarjeta-image-preview .tarjeta-image-zoom svg,
.add-cart-tarjeta-preview .tarjeta-image-zoom svg {
  width: 19px;
  height: 19px;
}

.tarjeta-image-preview svg {
  width: 44px;
  height: 44px;
}

.tarjeta-image-editor .text-muted {
  margin: 0.35rem 0 0.85rem;
  font-size: 0.75rem;
}

.tarjeta-image-thumbnails {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.tarjeta-image-thumb {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--gray-700);
  border-radius: 8px;
  background: var(--gray-900);
}

.tarjeta-image-thumb.is-primary {
  border-color: var(--primary-red);
}

.tarjeta-image-thumb > button:first-child {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.tarjeta-image-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.tarjeta-image-thumb > button:last-child {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 7px;
  background: rgba(18, 19, 21, 0.9);
  color: #fff;
  cursor: pointer;
}

.tarjeta-image-thumb > button:last-child svg {
  width: 14px;
}

.tarjeta-url-row {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
}

.tarjeta-url-row .form-input {
  min-width: 0;
}

.tarjeta-price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.tarjeta-stock-control {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(240px, 1.2fr);
  align-items: end;
  gap: 1rem;
}

.tarjeta-stock-quantity.is-disabled {
  opacity: 0.52;
}

.tarjeta-stock-unlimited {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--gray-700);
  border-radius: 10px;
  background: var(--gray-900);
  cursor: pointer;
}

.tarjeta-stock-unlimited:has(input:checked) {
  border-color: color-mix(in srgb, var(--info) 70%, var(--gray-700));
  background: color-mix(in srgb, var(--info) 12%, var(--gray-900));
}

.tarjeta-stock-unlimited input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--info);
}

.tarjeta-stock-unlimited span {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.tarjeta-stock-unlimited strong,
.tarjeta-stock-unlimited small {
  display: block;
}

.tarjeta-stock-unlimited small {
  color: var(--gray-400);
  line-height: 1.35;
}

body[data-theme="light"] .tarjeta-stock-unlimited {
  border-color: var(--warm-border);
  background: var(--warm-surface-muted);
}

body[data-theme="light"] .tarjeta-stock-unlimited:has(input:checked) {
  border-color: #60a5fa;
  background: #eff6ff;
}

body[data-theme="light"] .tarjeta-stock-unlimited small {
  color: #52525b;
}

.add-cart-tarjeta-image {
  width: 100%;
  max-height: 260px;
  margin-bottom: 0.85rem;
  display: block;
  border-radius: 10px;
  object-fit: contain;
  background: var(--gray-900);
}

.add-cart-tarjeta-preview {
  position: relative;
  width: 100%;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: zoom-in;
}

.add-cart-tarjeta-preview .add-cart-tarjeta-image {
  margin-bottom: 0.85rem;
}

.tarjeta-image-preview:focus-visible,
.add-cart-tarjeta-preview:focus-visible,
.tarjeta-lightbox button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary-red) 48%, transparent);
  outline-offset: 3px;
}

.add-cart-tarjeta-thumbs {
  display: flex;
  gap: 0.45rem;
  margin: -0.35rem 0 0.85rem;
  padding-bottom: 0.2rem;
  overflow-x: auto;
}

.add-cart-tarjeta-thumbs button {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  padding: 2px;
  border: 1px solid var(--gray-700);
  border-radius: 8px;
  background: var(--gray-900);
  cursor: pointer;
}

.add-cart-tarjeta-thumbs button.active {
  border-color: var(--primary-red);
}

.add-cart-tarjeta-thumbs img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

body[data-theme="light"] .tarjeta-image-preview,
body[data-theme="light"] .add-cart-tarjeta-image {
  border-color: var(--warm-border);
  background: var(--warm-surface-muted);
}

body.tarjeta-lightbox-open {
  overflow: hidden;
}

.tarjeta-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  place-items: center;
  padding: 1rem;
  background: rgba(8, 9, 11, 0.94);
}

.tarjeta-lightbox.active {
  display: grid;
}

.tarjeta-lightbox-dialog {
  width: min(1180px, calc(100vw - 2rem));
  height: min(900px, calc(100dvh - 2rem));
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #34373c;
  border-radius: 14px;
  background: #111214;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.48);
  color: #f7f7f5;
}

.tarjeta-lightbox-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 66px;
  padding: 0.8rem 1rem 0.8rem 1.25rem;
  border-bottom: 1px solid #2d3035;
}

.tarjeta-lightbox-dialog > header div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.tarjeta-lightbox-dialog > header strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tarjeta-lightbox-dialog > header span {
  flex: 0 0 auto;
  color: #a7abb2;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.tarjeta-lightbox-dialog > header button,
.tarjeta-lightbox-nav {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #3a3e44;
  border-radius: 10px;
  background: #202328;
  color: #fff;
  cursor: pointer;
}

.tarjeta-lightbox-dialog > header button svg,
.tarjeta-lightbox-nav svg {
  width: 21px;
}

.tarjeta-lightbox-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #090a0c;
}

.tarjeta-lightbox-stage.single {
  grid-template-columns: minmax(0, 1fr);
}

.tarjeta-lightbox-stage > img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
  object-fit: contain;
}

.tarjeta-lightbox-nav.next svg {
  transform: rotate(180deg);
}

.tarjeta-lightbox-thumbs {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  min-height: 84px;
  padding: 0.65rem 1rem;
  overflow-x: auto;
  border-top: 1px solid #2d3035;
}

.tarjeta-lightbox-thumbs button {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid #3a3e44;
  border-radius: 8px;
  background: #202328;
  cursor: pointer;
}

.tarjeta-lightbox-thumbs button.active {
  border-color: var(--primary-red);
}

.tarjeta-lightbox-thumbs img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .tarjetas-workbench .tarjetas-catalog {
    height: 100%;
    padding-bottom: 80px;
  }
}

@media (max-width: 700px) {
  .tarjetas-commandbar {
    padding: 0.8rem;
  }

  .tarjetas-title-block h2 {
    font-size: 1.2rem;
  }

  .tarjetas-command-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tarjetas-search {
    grid-column: 1 / -1;
  }

  .tarjetas-search input {
    min-height: 44px;
    font-size: 16px;
  }

  .tarjetas-search kbd {
    display: none;
  }

  .tarjetas-command-actions > .btn {
    min-height: 44px;
    padding-inline: 0.65rem;
  }

  .tarjetas-filter-panel {
    padding: 0.55rem 0.8rem;
  }

  .tarjetas-filter-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .tarjetas-filter-primary .tarjetas-filter-row,
  .tarjetas-filter-primary .tarjetas-filter-row {
    gap: 0.4rem;
  }

  .tarjetas-filter-row.tarjetas-filter-material {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }

  .tarjetas-filter-btn {
    min-height: 42px;
    padding-inline: 0.62rem;
  }

  .tarjetas-filter-primary .tarjetas-filter-btn {
    padding-inline: 0.62rem;
    font-size: 0.82rem;
  }

  .tarjetas-filter-material .tarjetas-filter-options {
    justify-content: flex-start;
  }

  .tarjetas-shelves {
    padding: 0 0.8rem 1.5rem;
  }

  .tarjetas-shelf-heading {
    align-items: flex-start;
  }

  .tarjetas-shelf-heading button {
    min-height: 38px;
  }

  .tarjetas-shelf-track {
    grid-auto-columns: minmax(218px, 82vw);
  }

  .tarjeta-image-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .tarjeta-price-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .tarjeta-stock-control {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  .tarjeta-url-row {
    flex-direction: column;
  }

  .tarjeta-lightbox {
    padding: 0;
  }

  .tarjeta-lightbox-dialog {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .tarjeta-lightbox-stage {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.5rem;
  }

  .tarjeta-lightbox-nav {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(32, 35, 40, 0.9);
  }

  .tarjeta-lightbox-nav.previous {
    left: 0.7rem;
  }

  .tarjeta-lightbox-nav.next {
    right: 0.7rem;
  }

  .tarjeta-lightbox-nav.next svg {
    transform: rotate(180deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta-product-card,
  .tarjeta-product-photo img {
    transition: none;
  }
}

/* ============================================
   VENDEDOR: MESA DE COBRO
   ============================================ */

:root {
  --seller-ink: #1a2a23;
  --seller-ink-soft: #53675e;
  --seller-surface: #f4f7f3;
  --seller-panel: #ffffff;
  --seller-line: #dce6df;
  --seller-orange: #ed6c3a;
  --seller-orange-dark: #c95127;
  --seller-green: #277654;
  --seller-green-soft: #e8f3ed;
  --seller-sand: #fff4e9;
}

.seller-sidebar {
  width: 268px;
  background: var(--seller-ink);
  border-right: 0;
  box-shadow: 8px 0 30px rgba(27, 44, 36, 0.08);
}

.seller-sidebar .sidebar-header {
  padding: 1.5rem 1.25rem 1.35rem;
  text-align: left;
  border-bottom-color: rgba(232, 243, 237, 0.14);
}

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

.brand-mark {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--seller-ink);
  background: var(--seller-orange);
  border-radius: 12px;
  flex-shrink: 0;
}

.brand-mark svg {
  width: 22px;
  height: 22px;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-copy strong {
  color: #f6faf7;
  font-size: 1.05rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.brand-copy small {
  color: #9bb0a6;
  font-size: 0.72rem;
  margin-top: 0.25rem;
}

.seller-mode-label {
  display: inline-flex;
  margin-top: 1rem;
  padding: 0.35rem 0.6rem;
  color: #f9c5ad;
  border: 1px solid rgba(237, 108, 58, 0.5);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.seller-sidebar .sidebar-nav {
  padding: 1.35rem 0.85rem;
}

.seller-sidebar .nav-section {
  margin-bottom: 0;
}

.seller-sidebar .nav-section-title {
  color: #8fa79b;
  padding: 0.5rem 0.7rem 0.8rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

.seller-sidebar .nav-item {
  min-height: 56px;
  margin-bottom: 0.4rem;
  padding: 0.8rem 0.85rem;
  border-radius: 14px;
  color: #d4e0da;
  gap: 0.85rem;
  font-size: 0.95rem;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.seller-sidebar .nav-item svg {
  width: 22px;
  height: 22px;
  color: #a9c1b5;
}

.seller-sidebar .nav-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(2px);
}

.seller-sidebar .nav-item:hover svg {
  color: #f6bea6;
}

.seller-sidebar .nav-item.active {
  color: var(--seller-ink);
  background: #f4f8f5;
  box-shadow: 0 8px 18px rgba(9, 23, 16, 0.2);
}

.seller-sidebar .nav-item.active svg {
  color: var(--seller-orange-dark);
}

.seller-sidebar .sidebar-footer {
  padding: 1rem 0.85rem 1.25rem;
  border-top-color: rgba(232, 243, 237, 0.14);
}

.seller-sidebar .user-info {
  padding: 0.7rem;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 14px;
}

.seller-sidebar .user-avatar {
  width: 38px;
  height: 38px;
  color: var(--seller-ink);
  background: var(--seller-orange);
}

.seller-sidebar .user-name {
  color: #f6faf7;
}

.seller-sidebar .user-role {
  color: #9bb0a6;
}

.seller-sidebar .logout-btn {
  min-height: 46px;
  background: transparent;
  border-color: rgba(232, 243, 237, 0.18);
  color: #c2d0c8;
}

.seller-sidebar .logout-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(232, 243, 237, 0.32);
}

.seller-sidebar ~ .main-content {
  margin-left: 268px;
  background: var(--seller-surface);
  color: var(--seller-ink);
}

.seller-sidebar ~ .main-content .main-header {
  min-height: 78px;
  padding: 1rem 2rem;
  background: var(--seller-surface);
  border-bottom: 1px solid var(--seller-line);
}

.seller-sidebar ~ .main-content .header-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.seller-sidebar ~ .main-content .header-title {
  color: var(--seller-ink);
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}

.header-role-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.2rem 0.6rem;
  color: var(--seller-green);
  background: var(--seller-green-soft);
  border: 1px solid #c8dfd2;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.seller-sidebar ~ .main-content .header-date {
  color: var(--seller-ink-soft);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.seller-sidebar ~ .main-content .btn-icon {
  color: var(--seller-ink);
  background: transparent;
  border-color: var(--seller-line);
}

.seller-sidebar ~ .main-content .btn-icon:hover {
  color: var(--seller-orange-dark);
  background: #ffffff;
  border-color: #f1bda9;
}

.seller-sidebar ~ .main-content .content-area {
  padding: 1.35rem 1.5rem 1.5rem;
}

.seller-sidebar ~ .main-content .content-area.pos-surface {
  padding-top: 1.1rem;
}

.seller-sidebar ~ .main-content .pos-workbench {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  gap: 1.15rem;
  height: calc(100vh - 116px);
}

.seller-sidebar ~ .main-content .pos-products {
  min-width: 0;
  padding: 1.15rem;
  background: var(--seller-panel);
  border: 1px solid var(--seller-line);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(35, 65, 51, 0.05);
}

.seller-sidebar ~ .main-content .pos-commandbar {
  align-items: end;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--seller-line);
}

.seller-sidebar ~ .main-content .pos-command-title {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.seller-sidebar ~ .main-content .pos-live-mark {
  width: 10px;
  height: 10px;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--seller-orange);
  box-shadow: 0 0 0 5px var(--seller-sand);
}

.seller-sidebar ~ .main-content .pos-command-title h2,
.seller-sidebar ~ .main-content .tarjetas-title-block h2 {
  color: var(--seller-ink);
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.seller-sidebar ~ .main-content .pos-command-title p,
.seller-sidebar ~ .main-content .tarjetas-title-block p {
  color: var(--seller-ink-soft);
  font-size: 0.82rem;
}

.seller-sidebar ~ .main-content .pos-search {
  margin: 0;
}

.seller-sidebar ~ .main-content .search-box {
  min-height: 48px;
  background: #fbfdfb;
  border: 1px solid var(--seller-line);
  border-radius: 12px;
  box-shadow: none;
}

.seller-sidebar ~ .main-content .search-box:focus-within {
  border-color: var(--seller-orange);
  box-shadow: 0 0 0 4px rgba(237, 108, 58, 0.13);
}

.seller-sidebar ~ .main-content .search-box svg {
  color: var(--seller-ink-soft);
}

.seller-sidebar ~ .main-content .search-box input {
  color: var(--seller-ink);
  font-size: 0.9rem;
}

.seller-sidebar ~ .main-content .pos-search kbd {
  color: var(--seller-ink-soft);
  background: #edf3ee;
  border-color: var(--seller-line);
}

.seller-sidebar ~ .main-content .categories-bar {
  gap: 0.5rem;
  padding: 0.85rem 0 0.65rem;
}

.seller-sidebar ~ .main-content .category-btn {
  min-height: 40px;
  padding: 0.55rem 0.85rem;
  color: var(--seller-ink-soft);
  background: #f5f8f5;
  border: 1px solid var(--seller-line);
  border-radius: 10px;
  font-size: 0.8rem;
}

.seller-sidebar ~ .main-content .category-btn:hover {
  color: var(--seller-orange-dark);
  background: var(--seller-sand);
  border-color: #efb9a2;
}

.seller-sidebar ~ .main-content .category-btn.active {
  color: #ffffff;
  background: var(--seller-ink);
  border-color: var(--seller-ink);
}

.seller-sidebar ~ .main-content .manual-product-launcher {
  padding: 0.15rem 0 0.85rem;
}

.seller-sidebar ~ .main-content .manual-product-launcher button {
  min-height: 42px;
  color: var(--seller-orange-dark);
  background: var(--seller-sand);
  border: 1px dashed #e7a98d;
  border-radius: 10px;
}

.seller-sidebar ~ .main-content .products-flex-container,
.seller-sidebar ~ .main-content .category-products {
  gap: 0.7rem;
}

.seller-sidebar ~ .main-content .category-section-title {
  color: var(--seller-ink);
  border-bottom-color: var(--seller-line);
}

.seller-sidebar ~ .main-content .product-entry {
  min-height: 118px;
  padding: 0.95rem;
  color: var(--seller-ink);
  background: #fbfdfb;
  border: 1px solid var(--seller-line);
  border-radius: 14px;
  box-shadow: none;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.seller-sidebar ~ .main-content .product-entry:hover {
  background: #ffffff;
  border-color: #e4a990;
  box-shadow: 0 8px 18px rgba(35, 65, 51, 0.08);
  transform: translateY(-2px);
}

.seller-sidebar ~ .main-content .product-name {
  color: var(--seller-ink);
  font-size: 1rem;
  font-weight: 700;
  transform: translateY(0.15rem);
}

.seller-sidebar ~ .main-content .product-info {
  color: var(--seller-ink-soft);
  font-size: 0.9rem;
  line-height: 1.35;
}

.seller-sidebar ~ .main-content .product-measure {
  color: var(--seller-ink);
  font-size: 1rem;
  font-style: italic;
  font-weight: 700;
}

.seller-sidebar ~ .main-content .product-stock {
  color: var(--seller-ink-soft);
}

.seller-sidebar ~ .main-content .product-price {
  color: var(--seller-orange-dark);
  font-size: 1rem;
}

.seller-sidebar ~ .main-content .pos-cart {
  min-width: 0;
  background: var(--seller-panel);
  border: 1px solid var(--seller-line);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(35, 65, 51, 0.08);
}

.seller-sidebar ~ .main-content .cart-header {
  min-height: 74px;
  padding: 1rem 1.15rem;
  background: var(--seller-ink);
  border-bottom: 0;
}

.seller-sidebar ~ .main-content .cart-heading-icon {
  color: var(--seller-orange);
}

.seller-sidebar ~ .main-content .cart-header h3 {
  color: #f7fbf8;
  font-size: 1.02rem;
}

.seller-sidebar ~ .main-content .cart-header p {
  color: #a8bcb1;
}

.seller-sidebar ~ .main-content .cart-header .btn-outline-danger {
  color: #f8c0a9;
  border-color: rgba(248, 192, 169, 0.45);
}

.seller-sidebar ~ .main-content .cart-items {
  padding: 0.75rem;
  background: #fbfdfb;
}

.seller-sidebar ~ .main-content .cart-empty-msg {
  min-height: 190px;
  color: var(--seller-ink-soft);
}

.seller-sidebar ~ .main-content .cart-empty-msg svg {
  width: 34px;
  height: 34px;
  color: #a8bcb1;
}

.seller-sidebar ~ .main-content .cart-item {
  padding: 0.8rem;
  color: var(--seller-ink);
  background: #ffffff;
  border: 1px solid var(--seller-line);
}

.seller-sidebar ~ .main-content .cart-item-name {
  color: var(--seller-ink);
}

.seller-sidebar ~ .main-content .cart-item-price {
  color: var(--seller-ink-soft);
}

.seller-sidebar ~ .main-content .cart-footer {
  padding: 1.1rem;
  background: #ffffff;
  border-top-color: var(--seller-line);
}

.seller-sidebar ~ .main-content .cart-summary {
  margin-bottom: 1rem;
}

.seller-sidebar ~ .main-content .cart-summary .summary-row {
  min-height: 30px;
  color: var(--seller-ink-soft);
  font-size: 0.86rem;
}

.seller-sidebar ~ .main-content .cart-summary .summary-row.total {
  min-height: 62px;
  margin-top: 0.45rem;
  padding-top: 0.8rem;
  color: var(--seller-ink);
  border-top-color: var(--seller-line);
  font-size: 1.15rem;
}

.seller-sidebar ~ .main-content .cart-summary .summary-row.total span:last-child {
  color: var(--seller-orange-dark);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.seller-sidebar ~ .main-content .cart-summary input {
  min-height: 36px;
  color: var(--seller-ink);
  background: #fbfdfb;
  border-color: var(--seller-line);
}

.seller-sidebar ~ .main-content .payment-section-prominent {
  margin-top: 0.8rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--seller-line);
}

.seller-sidebar ~ .main-content .payment-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  color: var(--seller-ink);
  font-size: 0.96rem;
  font-weight: 800;
}

.seller-sidebar ~ .main-content .payment-section-heading small {
  color: var(--seller-ink-soft);
  font-size: 0.67rem;
  font-weight: 500;
}

.seller-sidebar ~ .main-content .payment-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.seller-sidebar ~ .main-content .pay-btn-img {
  min-width: 0;
  min-height: 102px;
  padding: 0.7rem 0.4rem;
  color: var(--seller-ink-soft);
  background: #f7faf7;
  border: 2px solid var(--seller-line);
  border-radius: 14px;
  box-shadow: none;
  transform: none;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.seller-sidebar ~ .main-content .pay-btn-img:hover {
  color: var(--seller-ink);
  background: #ffffff;
  border-color: #b7cec0;
  transform: none;
}

.seller-sidebar ~ .main-content .pay-btn-img.active {
  color: var(--seller-ink);
  background: var(--seller-sand);
  border: 3px solid var(--seller-orange);
  box-shadow: 0 7px 15px rgba(237, 108, 58, 0.15);
}

.seller-sidebar ~ .main-content .pay-method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--seller-ink-soft);
  background: #e8f0ea;
  border-radius: 11px;
}

.seller-sidebar ~ .main-content .pay-btn-img.active .pay-method-icon {
  color: var(--seller-orange-dark);
  background: #ffe2d2;
}

.seller-sidebar ~ .main-content .pay-method-icon svg {
  width: 22px;
  height: 22px;
}

.seller-sidebar ~ .main-content .pay-btn-img > span:not(.pay-method-icon) {
  font-size: 0.88rem;
  font-weight: 800;
}

.seller-sidebar ~ .main-content .pay-btn-img small {
  color: var(--seller-ink-soft);
  font-size: 0.63rem;
  line-height: 1.2;
  text-align: center;
}

.seller-sidebar ~ .main-content .payment-selection-note {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.65rem;
  padding: 0.7rem 0.75rem;
  color: var(--seller-green);
  background: var(--seller-green-soft);
  border: 1px solid #c8dfd2;
  border-radius: 12px;
}

.seller-sidebar ~ .main-content .payment-selection-note[data-method="yape"],
.seller-sidebar ~ .main-content .payment-selection-note[data-method="bcp"],
.seller-sidebar ~ .main-content .payment-selection-note[data-method="none"] {
  color: #8b5b12;
  background: #fff8df;
  border-color: #f0d68c;
}

.seller-sidebar ~ .main-content .payment-selection-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.seller-sidebar ~ .main-content .payment-selection-icon svg {
  width: 21px;
  height: 21px;
}

.seller-sidebar ~ .main-content .payment-selection-note span:last-child {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.seller-sidebar ~ .main-content .payment-selection-note strong {
  font-size: 0.8rem;
}

.seller-sidebar ~ .main-content .payment-selection-note small {
  color: currentColor;
  font-size: 0.68rem;
  opacity: 0.88;
}

.seller-sidebar ~ .main-content .btn-procesar {
  min-height: 64px;
  margin-top: 0.95rem;
  color: #ffffff;
  background: var(--seller-green);
  border: 0;
  border-radius: 14px;
  font-size: 1rem;
  box-shadow: 0 10px 18px rgba(39, 118, 84, 0.18);
}

.seller-sidebar ~ .main-content .btn-procesar:hover:not(:disabled) {
  background: #1f6246;
  box-shadow: 0 12px 22px rgba(39, 118, 84, 0.25);
  transform: translateY(-1px);
}

.seller-sidebar ~ .main-content .btn-procesar:disabled {
  color: #99aaa1;
  background: #e8eeea;
  box-shadow: none;
}

.seller-sidebar ~ .main-content .btn-procesar strong {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.seller-sidebar ~ .main-content .tarjetas-commandbar,
.seller-sidebar ~ .main-content .tarjetas-filter-panel {
  border-color: var(--seller-line);
}

.seller-sidebar ~ .main-content .tarjetas-catalog {
  background: var(--seller-panel);
  border: 1px solid var(--seller-line);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(35, 65, 51, 0.05);
}

.seller-sidebar ~ .main-content .tarjetas-commandbar {
  padding: 1.15rem;
}

@media (max-width: 992px) {
  .seller-sidebar {
    width: min(86vw, 320px);
  }

  .seller-sidebar ~ .main-content {
    margin-left: 0;
  }

  .seller-sidebar ~ .main-content .pos-workbench {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .seller-sidebar ~ .main-content .pos-cart {
    position: static;
    max-height: none;
    border-radius: 18px;
  }
}

@media (max-width: 640px) {
  .seller-sidebar ~ .main-content .main-header {
    min-height: 68px;
    padding: 0.8rem 1rem;
  }

  .seller-sidebar ~ .main-content .content-area,
  .seller-sidebar ~ .main-content .content-area.pos-surface {
    padding: 0.8rem;
  }

  .seller-sidebar ~ .main-content .header-title {
    font-size: 1.12rem;
  }

  .seller-sidebar ~ .main-content .header-role-chip,
  .seller-sidebar ~ .main-content .header-date {
    display: none;
  }

  .seller-sidebar ~ .main-content .pos-products {
    padding: 0.85rem;
  }

  .seller-sidebar ~ .main-content .pos-commandbar {
    align-items: stretch;
    flex-direction: column;
  }

  .seller-sidebar ~ .main-content .pos-search {
    width: 100%;
  }

  .seller-sidebar ~ .main-content .payment-buttons {
    gap: 0.4rem;
  }

  .seller-sidebar ~ .main-content .pay-btn-img {
    min-height: 96px;
    padding-inline: 0.2rem;
  }

  .seller-sidebar ~ .main-content .pay-btn-img > span:not(.pay-method-icon) {
    font-size: 0.78rem;
  }

  .seller-sidebar ~ .main-content .pay-btn-img small {
    font-size: 0.58rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seller-sidebar .nav-item,
  .seller-sidebar ~ .main-content .product-entry,
  .seller-sidebar ~ .main-content .pay-btn-img,
  .seller-sidebar ~ .main-content .btn-procesar {
    transition: none;
  }
}

/* Navegación superior para vendedores, como la referencia del POS */
.seller-sidebar {
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 76px;
  min-height: 76px;
  flex-direction: row;
  align-items: stretch;
  transform: none;
  border-bottom: 1px solid var(--seller-line);
  box-shadow: 0 4px 18px rgba(27, 44, 36, 0.08);
}

.seller-sidebar .sidebar-header {
  width: 230px;
  flex: 0 0 230px;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border-bottom: 0;
  border-right: 1px solid var(--seller-line);
}

.seller-sidebar .sidebar-brand {
  gap: 0.55rem;
}

.seller-sidebar .brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.seller-sidebar .brand-mark svg {
  width: 19px;
  height: 19px;
}

.seller-sidebar .brand-copy strong {
  color: var(--seller-ink);
  font-size: 0.87rem;
  white-space: nowrap;
}

.seller-sidebar .brand-copy small {
  color: var(--seller-ink-soft);
  font-size: 0.65rem;
}

.seller-sidebar .seller-mode-label {
  display: none;
}

.seller-sidebar .sidebar-nav {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 0.65rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #b7cec0 transparent;
}

.seller-sidebar .sidebar-nav::-webkit-scrollbar {
  height: 4px;
}

.seller-sidebar .sidebar-nav::-webkit-scrollbar-thumb {
  background: #b7cec0;
  border-radius: 999px;
}

.seller-sidebar .seller-quick-nav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-width: max-content;
  height: 100%;
}

.seller-sidebar .nav-section-title {
  display: none;
}

.seller-sidebar .nav-item {
  flex: 0 0 auto;
  min-height: 48px;
  margin: 0;
  padding: 0.65rem 0.72rem;
  color: var(--seller-ink-soft);
  border-radius: 10px;
  gap: 0.45rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

.seller-sidebar .nav-item svg {
  width: 18px;
  height: 18px;
  color: #7b9b8b;
}

.seller-sidebar .nav-item:hover {
  color: var(--seller-ink);
  background: #f1f6f2;
  transform: none;
}

.seller-sidebar .nav-item.active {
  color: #ffffff;
  background: var(--seller-orange);
  box-shadow: 0 5px 12px rgba(237, 108, 58, 0.22);
}

.seller-sidebar .nav-item.active svg {
  color: #ffffff;
}

.seller-sidebar .sidebar-footer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 194px;
  flex: 0 0 194px;
  padding: 0.55rem 0.7rem;
  background: #ffffff;
  border-top: 0;
  border-left: 1px solid var(--seller-line);
}

.seller-sidebar .user-info {
  min-width: 0;
  flex: 1;
  margin-bottom: 0;
  padding: 0.35rem;
  background: transparent;
}

.seller-sidebar .user-avatar {
  width: 32px;
  height: 32px;
}

.seller-sidebar .user-name {
  color: var(--seller-ink);
  font-size: 0.72rem;
}

.seller-sidebar .user-role {
  color: var(--seller-ink-soft);
  font-size: 0.62rem;
}

.seller-sidebar .logout-btn {
  width: auto;
  min-height: 38px;
  padding: 0.5rem;
  color: var(--seller-ink-soft);
  background: #f4f7f3;
  border-color: var(--seller-line);
}

.seller-sidebar .logout-btn span {
  display: none;
}

.seller-sidebar ~ .main-content {
  margin-top: 76px;
  margin-left: 0;
}

.seller-sidebar ~ .main-content .main-header {
  top: 76px;
}

.seller-sidebar ~ .main-content .content-area {
  min-height: calc(100vh - 76px);
}

.seller-sidebar ~ .main-content .pos-workbench {
  height: calc(100vh - 116px);
}

.seller-sidebar ~ .main-content .pay-method-icon img {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
  border-radius: 6px;
}

@media (max-width: 992px) {
  .seller-sidebar {
    width: 100%;
    height: 72px;
    min-height: 72px;
    transform: none;
  }

  .seller-sidebar .sidebar-header {
    width: 190px;
    flex-basis: 190px;
    padding-inline: 0.7rem;
  }

  .seller-sidebar .sidebar-footer {
    width: 58px;
    flex-basis: 58px;
    padding-inline: 0.4rem;
  }

  .seller-sidebar .user-info {
    display: none;
  }

  .seller-sidebar ~ .main-content {
    margin-top: 72px;
  }

  .seller-sidebar ~ .main-content .main-header {
    top: 72px;
  }

  .seller-sidebar ~ .main-content .content-area {
    min-height: calc(100vh - 72px);
  }
}

@media (max-width: 640px) {
  .seller-sidebar .sidebar-header {
    width: 156px;
    flex-basis: 156px;
  }

  .seller-sidebar .brand-copy strong {
    font-size: 0.76rem;
  }

  .seller-sidebar .brand-copy small {
    display: none;
  }

  .seller-sidebar .brand-mark {
    width: 32px;
    height: 32px;
  }

  .seller-sidebar .nav-item {
    min-height: 44px;
    padding-inline: 0.55rem;
    font-size: 0.7rem;
  }

  .seller-sidebar .nav-item svg {
    width: 16px;
    height: 16px;
  }

  .seller-sidebar .sidebar-footer {
    width: 48px;
    flex-basis: 48px;
  }

  .seller-sidebar ~ .main-content .content-area,
  .seller-sidebar ~ .main-content .content-area.pos-surface {
    padding-top: 0.8rem;
  }
}

/* Limpieza final del POS y composición de pago */
.brand-mark {
  background: transparent;
}

.brand-mark img,
.seller-sidebar .brand-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.seller-sidebar ~ .main-content .main-header {
  display: none;
}

.seller-sidebar ~ .main-content .content-area,
.seller-sidebar ~ .main-content .content-area.pos-surface {
  min-height: calc(100vh - 76px);
  padding: 0.8rem 1rem 1rem;
}

.seller-sidebar ~ .main-content .pos-workbench {
  height: calc(100vh - 92px);
}

.seller-sidebar ~ .main-content .pos-products {
  height: 100%;
  padding: 0.8rem;
}

.seller-sidebar ~ .main-content .pos-commandbar-clean {
  display: block;
  padding: 0 0 0.65rem;
  border-bottom: 0;
}

.seller-sidebar ~ .main-content .pos-commandbar-clean .pos-search,
.seller-sidebar ~ .main-content .pos-commandbar-clean .search-box {
  width: 100%;
}

.seller-sidebar ~ .main-content .pos-commandbar-clean .search-box {
  min-height: 44px;
}

.seller-sidebar ~ .main-content .pos-products-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 1rem;
}

.seller-sidebar ~ .main-content .payment-buttons {
  align-items: stretch;
}

.seller-sidebar ~ .main-content .pay-btn-img {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  min-height: 74px;
  padding: 0.55rem 0.4rem;
  text-align: left;
}

.seller-sidebar ~ .main-content .pay-method-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: transparent;
  border-radius: 7px;
}

.seller-sidebar ~ .main-content .pay-btn-img.active .pay-method-icon {
  background: transparent;
}

.seller-sidebar ~ .main-content .pay-method-icon img {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}

.seller-sidebar ~ .main-content .pay-btn-img > span:not(.pay-method-icon) {
  min-width: 0;
  flex: 0 1 auto;
  font-size: 0.82rem;
  line-height: 1.1;
  white-space: nowrap;
}

.seller-sidebar ~ .main-content .pay-btn-img small {
  min-width: 0;
  max-width: 4.4rem;
  margin-left: auto;
  color: currentColor;
  font-size: 0.58rem;
  line-height: 1.15;
  text-align: left;
}

@media (max-width: 992px) {
  .seller-sidebar ~ .main-content .content-area,
  .seller-sidebar ~ .main-content .content-area.pos-surface {
    min-height: calc(100vh - 72px);
  }

  .seller-sidebar ~ .main-content .pos-workbench {
    height: auto;
  }

  .seller-sidebar ~ .main-content .pos-products {
    height: auto;
  }
}

@media (max-width: 640px) {
  .seller-sidebar ~ .main-content .pay-btn-img {
    min-height: 68px;
    padding-inline: 0.3rem;
    gap: 0.25rem;
  }

  .seller-sidebar ~ .main-content .pay-method-icon,
  .seller-sidebar ~ .main-content .pay-method-icon img {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .seller-sidebar ~ .main-content .pay-btn-img > span:not(.pay-method-icon) {
    font-size: 0.73rem;
  }

  .seller-sidebar ~ .main-content .pay-btn-img small {
    max-width: 3.2rem;
    font-size: 0.52rem;
  }
}

/* Catálogo plano: una sola superficie y un solo desplazamiento de página */
.seller-sidebar ~ .main-content .content-area.pos-surface,
.seller-sidebar ~ .main-content .content-area {
  min-height: calc(100vh - 76px);
  overflow: visible;
}

.seller-sidebar ~ .main-content .pos-workbench {
  height: auto;
  min-height: calc(100vh - 92px);
  overflow: visible;
  align-items: start;
}

.seller-sidebar ~ .main-content .pos-products {
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.seller-sidebar ~ .main-content .pos-filterbar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  margin-bottom: 0.9rem;
  padding: 0.7rem;
  border: 1px solid var(--seller-line);
  border-radius: 14px;
  background: var(--seller-panel);
  box-shadow: 0 5px 16px rgba(35, 65, 51, 0.05);
}

.seller-sidebar ~ .main-content .pos-search-trigger {
  min-height: 42px;
  flex: 0 1 270px;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 210px;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--seller-line);
  border-radius: 10px;
  color: var(--seller-ink-soft);
  background: #fbfdfb;
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.seller-sidebar ~ .main-content .pos-search-trigger:hover,
.seller-sidebar ~ .main-content .pos-search-trigger:focus-visible {
  border-color: var(--seller-orange);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(237, 108, 58, 0.12);
  outline: 0;
}

.seller-sidebar ~ .main-content .pos-search-trigger svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--seller-orange-dark);
}

.seller-sidebar ~ .main-content .pos-search-trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seller-sidebar ~ .main-content .pos-search-trigger kbd {
  margin-left: auto;
  padding: 0.18rem 0.38rem;
  border: 1px solid var(--seller-line);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: var(--seller-ink-soft);
  background: #edf3ee;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.67rem;
}

.seller-sidebar ~ .main-content .pos-filterbar .categories-bar {
  flex: 1 1 360px;
  min-width: 0;
  min-height: 42px;
  padding: 0;
  overflow: visible;
  flex-wrap: wrap;
  border: 0;
  background: transparent;
}

.seller-sidebar ~ .main-content .pos-filterbar .category-btn {
  min-height: 40px;
}

.seller-sidebar ~ .main-content .pos-filterbar .manual-product-launcher {
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
}

.seller-sidebar ~ .main-content .pos-filterbar .manual-product-launcher button {
  min-height: 42px;
  white-space: nowrap;
}

.seller-sidebar ~ .main-content .pos-products-grid {
  display: block;
  min-height: 0;
  padding: 0 0 2rem;
  overflow: visible;
}

.seller-sidebar ~ .main-content .pos-products-grid.grid-mode,
.seller-sidebar ~ .main-content .category-products,
.seller-sidebar ~ .main-content .products-flex-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 0 1.1rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.seller-sidebar ~ .main-content .category-section {
  position: relative;
  margin: 0 0 1rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--seller-line);
  border-radius: 16px;
  background: var(--seller-panel);
  box-shadow: 0 8px 22px rgba(35, 65, 51, 0.06);
}

.seller-sidebar ~ .main-content .category-section-title {
  position: relative;
  padding: 0.85rem 1rem 0.75rem;
  border-bottom: 1px solid var(--seller-line);
  background: linear-gradient(135deg, #fffaf6 0%, var(--seller-panel) 100%);
}

.seller-sidebar ~ .main-content .category-section-title .category-count {
  color: #c62828 !important;
  font-size: 0.82rem;
  font-weight: 800;
}

.seller-sidebar ~ .main-content .category-products {
  gap: 0.7rem 1.1rem;
  padding: 0.85rem 1rem 1rem;
  background: #fbfdfb;
}

.seller-sidebar ~ .main-content .product-entry,
.seller-sidebar ~ .main-content .category-products .product-card,
.seller-sidebar ~ .main-content .products-flex-container .product-card,
.seller-sidebar ~ .main-content .pos-products-grid > .product-card {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 92px;
  height: auto;
  padding: 0.78rem 0.85rem;
  border: 2px solid #cbd3cf;
  border-radius: 13px;
  background: #f1f4f2;
  box-shadow: none;
  transform: none;
}

.seller-sidebar ~ .main-content .product-entry:hover,
.seller-sidebar ~ .main-content .product-entry.low-stock:hover,
.seller-sidebar ~ .main-content .product-entry.stock-ilimitado:hover {
  background: #fffaf7;
  border-color: var(--seller-orange);
  box-shadow: 0 5px 14px rgba(237, 108, 58, 0.12);
  transform: none;
}

.seller-sidebar ~ .main-content .product-entry.low-stock,
.seller-sidebar ~ .main-content .product-entry.stock-ilimitado {
  background: #f1f4f2;
}

.seller-sidebar ~ .main-content .pos-cart {
  position: sticky;
  top: 1rem;
  align-self: start;
  height: max-content;
  max-height: none !important;
  overflow: visible;
}

@media (min-width: 993px) {
  .seller-sidebar ~ .main-content .pos-cart {
    height: calc(100dvh - 108px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .seller-sidebar ~ .main-content .pos-cart .cart-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .seller-sidebar ~ .main-content .pos-cart .cart-footer {
    flex: 0 0 auto;
  }
}

.seller-sidebar ~ .main-content .payment-buttons {
  align-items: stretch;
}

.seller-sidebar ~ .main-content .pay-btn-img {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  min-height: 88px;
  padding: 0.5rem 0.42rem;
  text-align: left;
}

.seller-sidebar ~ .main-content .pay-method-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  align-self: center;
}

.seller-sidebar ~ .main-content .pay-btn-img .pay-method-copy {
  min-width: 0;
  height: 30px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  overflow: visible;
}

.seller-sidebar ~ .main-content .pay-method-copy > span {
  min-width: 0;
  align-self: start;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.1;
}

.seller-sidebar ~ .main-content .pay-method-copy small {
  min-width: 0;
  max-width: none;
  margin-left: 0;
  align-self: end;
  overflow: visible;
  color: var(--seller-ink-soft);
  font-size: 0.56rem;
  line-height: 1.15;
  text-align: left;
  white-space: normal;
}

.product-search-modal-dialog {
  width: min(680px, calc(100vw - 2rem));
  max-width: 680px;
}

.product-search-modal-dialog .modal-body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.product-search-modal-dialog .modal-footer {
  padding: 1rem 1.5rem 1.25rem;
}

.product-search-modal-input {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 0.45rem;
}

.product-search-modal-input svg {
  position: absolute;
  left: 0.9rem;
  width: 20px;
  height: 20px;
  color: var(--seller-orange-dark);
  pointer-events: none;
}

.product-search-modal-input input {
  width: 100%;
  min-height: 54px;
  padding: 0.75rem 1rem 0.75rem 2.8rem;
  border: 1px solid var(--seller-line);
  border-radius: 11px;
  color: var(--seller-ink);
  background: #fbfdfb;
  font: inherit;
  font-size: 1rem;
}

.product-search-modal-input input:focus {
  border-color: var(--seller-orange);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(237, 108, 58, 0.12);
}

.product-search-suggestions {
  margin-top: 0.8rem;
}

.product-search-suggestion {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.15rem;
  border: 0;
  border-bottom: 1px solid var(--seller-line);
  color: var(--seller-ink);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.product-search-suggestion:hover,
.product-search-suggestion:focus-visible {
  padding-inline: 0.7rem;
  border-radius: 8px;
  background: #fff7f2;
  outline: 0;
}

.product-search-suggestion-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.product-search-suggestion-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
}

.product-search-suggestion-copy small,
.product-search-suggestion-price small {
  color: var(--seller-ink-soft);
  font-size: 0.72rem;
}

.product-search-suggestion-price {
  color: var(--seller-orange-dark);
  font-size: 0.95rem;
  font-weight: 800;
  white-space: nowrap;
}

.product-search-hint {
  padding: 1.35rem 0.2rem;
  color: var(--seller-ink-soft);
  font-size: 0.86rem;
  text-align: center;
}

@media (max-width: 992px) {
  .seller-sidebar ~ .main-content .pos-filterbar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .seller-sidebar ~ .main-content .pos-search-trigger {
    flex: 1 1 230px;
  }

  .seller-sidebar ~ .main-content .pos-filterbar .categories-bar {
    flex-basis: 100%;
    order: 3;
  }

  .seller-sidebar ~ .main-content .pos-cart {
    position: static;
    top: auto;
    height: auto;
    transform: none !important;
  }

  .seller-sidebar ~ .main-content .cart-toggle {
    display: none;
  }
}

@media (max-width: 640px) {
  .seller-sidebar ~ .main-content .pos-filterbar {
    gap: 0.5rem;
  }

  .seller-sidebar ~ .main-content .pos-search-trigger {
    flex-basis: 100%;
  }

  .seller-sidebar ~ .main-content .pos-filterbar .manual-product-launcher {
    flex: 1 1 auto;
  }

  .seller-sidebar ~ .main-content .pos-filterbar .manual-product-launcher button {
    width: 100%;
    justify-content: center;
  }

  .seller-sidebar ~ .main-content .pos-products-grid.grid-mode,
  .seller-sidebar ~ .main-content .category-products,
  .seller-sidebar ~ .main-content .products-flex-container {
    grid-template-columns: 1fr;
  }

  .product-search-modal-dialog .modal-body,
  .product-search-modal-dialog .modal-footer {
    padding-inline: 1rem;
  }
}

/* Navegación superior con comportamiento tipo feed */
.seller-sidebar,
.seller-sidebar ~ .main-content {
  transition: transform 220ms ease, margin-top 220ms ease;
}

.seller-sidebar {
  will-change: transform;
}

.seller-sidebar.nav-hidden {
  transform: translateY(-100%);
  box-shadow: 0 0 0 rgba(27, 44, 36, 0);
}

.seller-sidebar.nav-hidden ~ .main-content {
  margin-top: 0;
}

.seller-sidebar.nav-hidden ~ .main-content .content-area,
.seller-sidebar.nav-hidden ~ .main-content .content-area.pos-surface {
  min-height: 100vh;
}

/* Punto de tarjeta con la misma superficie abierta del POS */
.seller-sidebar ~ .main-content .tarjetas-catalog {
  display: block;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.seller-sidebar ~ .main-content .tarjetas-commandbar {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
  padding: 0.7rem;
  border: 1px solid var(--seller-line);
  border-radius: 14px;
  background: var(--seller-panel);
  box-shadow: 0 5px 16px rgba(35, 65, 51, 0.05);
}

.seller-sidebar ~ .main-content .tarjetas-title-block {
  flex: 0 1 250px;
  min-width: 150px;
}

.seller-sidebar ~ .main-content .tarjetas-title-block h2 {
  color: var(--seller-ink);
  font-size: 1.05rem;
}

.seller-sidebar ~ .main-content .tarjetas-title-block p {
  color: var(--seller-ink-soft);
  font-size: 0.72rem;
}

.seller-sidebar ~ .main-content .tarjetas-command-actions {
  width: auto;
  flex: 1 1 auto;
}

.seller-sidebar ~ .main-content .tarjetas-search {
  min-height: 42px;
  border-color: var(--seller-line);
  border-radius: 10px;
  background: #fbfdfb;
  color: var(--seller-ink-soft);
}

.seller-sidebar ~ .main-content .tarjetas-search:focus-within {
  border-color: var(--seller-orange);
  box-shadow: 0 0 0 4px rgba(237, 108, 58, 0.12);
}

.seller-sidebar ~ .main-content .tarjetas-search input {
  color: var(--seller-ink);
  font-size: 0.82rem;
}

.seller-sidebar ~ .main-content .tarjetas-filter-panel {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
  padding: 0.7rem;
  border: 1px solid var(--seller-line);
  border-radius: 14px;
  background: var(--seller-panel);
  box-shadow: 0 5px 16px rgba(35, 65, 51, 0.05);
}

.seller-sidebar ~ .main-content .tarjetas-filter-primary {
  gap: 0.7rem 1rem;
}

.seller-sidebar ~ .main-content .tarjetas-filter-label {
  color: var(--seller-ink-soft);
}

.seller-sidebar ~ .main-content .tarjetas-filter-options {
  flex-wrap: wrap;
  overflow: visible;
  padding-bottom: 0;
}

.seller-sidebar ~ .main-content .tarjetas-filter-btn {
  min-height: 38px;
  color: var(--seller-ink-soft);
  background: #f5f8f5;
  border-color: var(--seller-line);
  border-radius: 10px;
}

.seller-sidebar ~ .main-content .tarjetas-filter-btn:hover,
.seller-sidebar ~ .main-content .tarjetas-filter-btn:focus-visible {
  color: var(--seller-orange-dark);
  background: var(--seller-sand);
  border-color: #efb9a2;
}

.seller-sidebar ~ .main-content .tarjetas-filter-btn.active {
  color: #fff;
  background: var(--seller-ink);
  border-color: var(--seller-ink);
}

.seller-sidebar ~ .main-content .tarjetas-shelves {
  padding: 0 0 2rem;
  overflow: visible;
}

.seller-sidebar ~ .main-content .tarjetas-shelf {
  margin: 0 0 1rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--seller-line);
  border-radius: 16px;
  background: var(--seller-panel);
  box-shadow: 0 8px 22px rgba(35, 65, 51, 0.06);
}

.seller-sidebar ~ .main-content .tarjetas-shelf-heading {
  align-items: center;
  margin: 0;
  padding: 0.85rem 1rem 0.75rem;
  border-bottom: 1px solid var(--seller-line);
  background: linear-gradient(135deg, #fffaf6 0%, var(--seller-panel) 100%);
}

.seller-sidebar ~ .main-content .tarjetas-shelf-heading h3 {
  color: var(--seller-ink);
  font-size: 0.98rem;
}

.seller-sidebar ~ .main-content .tarjetas-shelf-heading p {
  color: #c62828;
  font-weight: 800;
}

.seller-sidebar ~ .main-content .tarjetas-shelf-heading button {
  color: var(--seller-orange-dark);
}

.seller-sidebar ~ .main-content .tarjetas-shelf-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-flow: row;
  grid-auto-columns: auto;
  gap: 0.7rem 1rem;
  padding: 0.85rem 1rem 1rem;
  overflow: visible;
  scroll-snap-type: none;
}

.seller-sidebar ~ .main-content .tarjeta-product-card {
  border: 2px solid #cbd3cf;
  border-radius: 13px;
  box-shadow: none;
}

.seller-sidebar ~ .main-content .tarjeta-product-card:hover {
  border-color: var(--seller-orange);
  box-shadow: 0 5px 14px rgba(237, 108, 58, 0.12);
  transform: none;
}

@media (max-width: 700px) {
  .seller-sidebar ~ .main-content .tarjetas-commandbar {
    align-items: stretch;
    flex-direction: column;
  }

  .seller-sidebar ~ .main-content .tarjetas-title-block,
  .seller-sidebar ~ .main-content .tarjetas-command-actions {
    width: 100%;
    flex-basis: auto;
  }

  .seller-sidebar ~ .main-content .tarjetas-command-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seller-sidebar ~ .main-content .tarjetas-search {
    grid-column: 1 / -1;
  }

  .seller-sidebar ~ .main-content .tarjetas-filter-primary {
    grid-template-columns: 1fr;
  }

  .seller-sidebar ~ .main-content .tarjetas-shelf-track {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seller-sidebar,
  .seller-sidebar ~ .main-content {
    transition: none;
  }
}

/* Bloquea el desplazamiento de la vista mientras un modal está abierto */
body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.modal-open .content-area {
  overflow: hidden;
}

/* POS de administrador: la superficie antigua usa el mismo marcado que la mesa
   del vendedor, pero no debe heredar su piel. Estos ajustes solo reparan la
   geometría compartida cuando el administrador usa el POS. */
.admin-sidebar ~ .main-content .pos-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 390px);
  gap: 1rem;
  height: calc(100dvh - 68px);
  min-height: 0;
  overflow: hidden;
}

.admin-sidebar ~ .main-content .pos-products {
  display: flex;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.admin-sidebar ~ .main-content .pos-filterbar {
  display: grid;
  flex: 0 0 auto;
  gap: 0.75rem;
  min-width: 0;
  margin: 0 0 0.9rem;
  padding: 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--white);
}

.admin-sidebar ~ .main-content .pos-search-trigger {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  color: var(--gray-600);
  background: var(--gray-100);
  font: inherit;
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
}

.admin-sidebar ~ .main-content .pos-search-trigger:hover,
.admin-sidebar ~ .main-content .pos-search-trigger:focus-visible {
  border-color: var(--primary-red);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

.admin-sidebar ~ .main-content .pos-search-trigger svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--primary-red);
}

.admin-sidebar ~ .main-content .pos-search-trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-sidebar ~ .main-content .pos-search-trigger kbd {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--gray-300);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: var(--gray-600);
  background: var(--white);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.67rem;
}

.admin-sidebar ~ .main-content .pos-filterbar .categories-bar {
  display: flex;
  gap: 0.45rem;
  min-width: 0;
  min-height: 42px;
  padding: 0.1rem 0 0.3rem;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  background: transparent;
}

.admin-sidebar ~ .main-content .pos-filterbar .category-btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  color: var(--gray-700);
  background: var(--white);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.admin-sidebar ~ .main-content .pos-filterbar .category-btn:hover,
.admin-sidebar ~ .main-content .pos-filterbar .category-btn:focus-visible {
  border-color: var(--primary-red-light);
  color: var(--primary-red-dark);
  outline: 0;
}

.admin-sidebar ~ .main-content .pos-filterbar .category-btn.active {
  border-color: var(--primary-red);
  color: var(--white);
  background: var(--gradient-primary);
}

.admin-sidebar ~ .main-content .manual-product-launcher {
  padding: 0;
  background: transparent;
}

.admin-sidebar ~ .main-content .manual-product-launcher button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 42px;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--primary-red);
  border-radius: 10px;
  color: var(--primary-red-dark);
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.admin-sidebar ~ .main-content .manual-product-launcher button:hover,
.admin-sidebar ~ .main-content .manual-product-launcher button:focus-visible {
  color: var(--white);
  background: var(--primary-red);
  outline: 0;
}

.admin-sidebar ~ .main-content .pos-products-grid {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 0 0.25rem 1rem 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.admin-sidebar ~ .main-content .category-section {
  min-width: 0;
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--white);
}

.admin-sidebar ~ .main-content .category-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  margin: 0;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  color: var(--gray-900);
  background: var(--gray-100);
  font-size: 0.86rem;
}

.admin-sidebar ~ .main-content .category-section-title .category-count {
  flex: 0 0 auto;
  color: var(--gray-500);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: none;
}

.admin-sidebar ~ .main-content .category-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 0.65rem;
  padding: 0.75rem;
  background: var(--white);
}

.admin-sidebar ~ .main-content .category-products .product-card,
.admin-sidebar ~ .main-content .product-entry {
  width: auto;
  min-width: 0;
  min-height: 106px;
  height: auto;
  max-height: none;
  padding: 0.8rem;
  border: 1px solid var(--gray-300);
  border-radius: 12px;
  background: var(--gray-100);
}

.admin-sidebar ~ .main-content .category-products .product-card:hover,
.admin-sidebar ~ .main-content .product-entry:hover {
  border-color: var(--primary-red-light);
  background: var(--white);
  transform: translateY(-1px);
}

.admin-sidebar ~ .main-content .product-entry-copy,
.admin-sidebar ~ .main-content .product-entry-data {
  min-width: 0;
}

.admin-sidebar ~ .main-content .product-entry-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.admin-sidebar ~ .main-content .product-entry-data {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
}

.admin-sidebar ~ .main-content .product-entry-data .product-stock {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-sidebar ~ .main-content .pos-cart {
  display: flex;
  min-width: 0;
  min-height: 0;
  height: auto;
  max-height: 100%;
  overflow: hidden;
}

.admin-sidebar ~ .main-content .pos-cart .cart-header {
  flex: 0 0 auto;
  min-height: 82px;
  padding: 0.85rem 1rem;
}

.admin-sidebar ~ .main-content .cart-heading {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.admin-sidebar ~ .main-content .cart-heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  color: var(--white);
  background: var(--primary-red);
}

.admin-sidebar ~ .main-content .cart-heading-icon svg {
  width: 20px;
  height: 20px;
}

.admin-sidebar ~ .main-content .cart-heading > div {
  min-width: 0;
}

.admin-sidebar ~ .main-content .cart-heading h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-sidebar ~ .main-content .cart-heading p {
  color: var(--gray-500);
  font-size: 0.75rem;
}

.admin-sidebar ~ .main-content .cart-header-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.admin-sidebar ~ .main-content .cart-toggle {
  display: none;
}

.admin-sidebar ~ .main-content .pos-cart .cart-items {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.admin-sidebar ~ .main-content .pos-cart .cart-footer {
  flex: 0 0 auto;
  padding: 1rem;
}

.admin-sidebar ~ .main-content .cart-summary {
  margin-bottom: 0.9rem;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--gray-100);
}

.admin-sidebar ~ .main-content .cart-summary .summary-row {
  min-height: 34px;
  margin: 0;
  padding: 0.25rem 0;
}

.admin-sidebar ~ .main-content .cart-summary .summary-row.total {
  min-height: 52px;
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--gray-300);
  font-size: 1.08rem;
}

.admin-sidebar ~ .main-content .discount-field {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.admin-sidebar ~ .main-content .discount-field input {
  width: 70px;
  min-height: 34px;
  padding: 0.35rem 0.5rem;
  text-align: right;
}

.admin-sidebar ~ .main-content .payment-section-prominent {
  margin-bottom: 0.85rem;
}

.admin-sidebar ~ .main-content .payment-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.admin-sidebar ~ .main-content .payment-section-heading span {
  color: var(--gray-900);
  font-size: 0.88rem;
  font-weight: 700;
}

.admin-sidebar ~ .main-content .payment-section-heading small {
  color: var(--gray-500);
  font-size: 0.68rem;
  white-space: nowrap;
}

.admin-sidebar ~ .main-content .payment-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: stretch;
}

.admin-sidebar ~ .main-content .pay-btn-img {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  min-width: 0;
  min-height: 64px;
  padding: 0.5rem 0.45rem;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  color: var(--gray-700);
  background: var(--white);
  text-align: left;
}

.admin-sidebar ~ .main-content .pay-method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.admin-sidebar ~ .main-content .pay-method-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 6px;
}

.admin-sidebar ~ .main-content .pay-method-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.12rem;
}

.admin-sidebar ~ .main-content .pay-method-copy > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: currentColor;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.1;
}

.admin-sidebar ~ .main-content .pay-method-copy small {
  min-width: 0;
  color: var(--gray-500);
  font-size: 0.58rem;
  line-height: 1.15;
  white-space: normal;
}

.admin-sidebar ~ .main-content .pay-btn-img:hover,
.admin-sidebar ~ .main-content .pay-btn-img:focus-visible,
.admin-sidebar ~ .main-content .pay-btn-img.active {
  border-color: var(--primary-red);
  outline: 0;
}

.admin-sidebar ~ .main-content .pay-btn-img.active {
  color: var(--gray-900);
  background: rgba(220, 38, 38, 0.08);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}

.admin-sidebar ~ .main-content .payment-selection-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 42px;
  margin-top: 0.6rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--gray-300);
  border-radius: 9px;
  color: var(--gray-700);
  background: var(--gray-100);
  line-height: 1.2;
}

.admin-sidebar ~ .main-content .payment-selection-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--success-dark);
}

.admin-sidebar ~ .main-content .payment-selection-note[data-method="none"] {
  color: #8b5b12;
  background: #fff8df;
  border-color: #f0d68c;
}

.admin-sidebar ~ .main-content .payment-selection-note[data-method="none"] .payment-selection-icon {
  color: #b7791f;
}

.admin-sidebar ~ .main-content .payment-selection-icon svg {
  width: 16px;
  height: 16px;
}

.admin-sidebar ~ .main-content .payment-selection-note > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.12rem;
}

.admin-sidebar ~ .main-content .payment-selection-note strong {
  font-size: 0.73rem;
}

.admin-sidebar ~ .main-content .payment-selection-note small {
  color: var(--gray-500);
  font-size: 0.66rem;
}

.admin-sidebar ~ .main-content .btn-procesar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding-inline: 0.95rem;
}

.admin-sidebar ~ .main-content .btn-procesar:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

@media (max-width: 1100px) and (min-width: 901px) {
  .admin-sidebar ~ .main-content .pos-workbench {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 360px);
    gap: 0.75rem;
  }

  .admin-sidebar ~ .main-content .category-products {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 900px) {
  .admin-sidebar ~ .main-content .pos-workbench {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .admin-sidebar ~ .main-content .pos-products {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: 5rem;
  }

  .admin-sidebar ~ .main-content .pos-products-grid {
    overflow: visible;
  }

  .admin-sidebar ~ .main-content .pos-cart {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 95;
    width: auto;
    height: auto;
    max-height: 78dvh;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.2);
    transform: translateY(calc(100% - 68px));
    transition: transform 180ms ease;
  }

  .admin-sidebar ~ .main-content .pos-cart.expanded {
    transform: translateY(0);
  }

  .admin-sidebar ~ .main-content .pos-cart .cart-header {
    cursor: pointer;
  }

  .admin-sidebar ~ .main-content .pos-cart .cart-header::before {
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto 0.55rem;
    border-radius: 999px;
    background: var(--gray-300);
    content: '';
  }

  .admin-sidebar ~ .main-content .cart-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--gray-300);
    border-radius: 50%;
    color: var(--gray-700);
    background: var(--white);
  }

  .admin-sidebar ~ .main-content .cart-toggle svg {
    width: 18px;
    height: 18px;
  }

  .admin-sidebar ~ .main-content .pos-cart .cart-items {
    max-height: 28dvh;
  }

  .admin-sidebar ~ .main-content .category-products {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (max-width: 560px) {
  .admin-sidebar ~ .main-content .pos-filterbar {
    padding: 0.65rem;
  }

  .admin-sidebar ~ .main-content .category-products {
    grid-template-columns: 1fr;
  }

  .admin-sidebar ~ .main-content .payment-buttons {
    gap: 0.35rem;
  }

  .admin-sidebar ~ .main-content .pay-btn-img {
    min-height: 58px;
    padding-inline: 0.3rem;
  }

  .admin-sidebar ~ .main-content .pay-method-icon,
  .admin-sidebar ~ .main-content .pay-method-icon img {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }

  .admin-sidebar ~ .main-content .pay-method-copy > span {
    font-size: 0.7rem;
  }

  .admin-sidebar ~ .main-content .pay-method-copy small {
    font-size: 0.52rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-sidebar ~ .main-content .pos-cart {
    transition: none;
  }
}

/* Sidebar administrativo: contraste firme dentro del tema claro */
.admin-sidebar {
  background: #ffffff;
  border-right-color: #e8b7a3;
  box-shadow: 12px 0 36px rgba(84, 38, 26, 0.1);
}

.admin-sidebar .sidebar-header {
  border-bottom-color: #e8b7a3;
}

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

.admin-sidebar .brand-mark {
  width: 44px;
  height: 44px;
  background: transparent;
}

.admin-sidebar .brand-logo {
  width: 44px;
  height: 44px;
  display: block;
  object-fit: contain;
}

.admin-sidebar .brand-copy strong {
  color: #2b1009;
  font-size: 1.05rem;
}

.admin-sidebar .brand-copy small {
  color: #8a5548;
}

.admin-sidebar .sidebar-version {
  margin-top: 0.75rem;
  color: #e65f38;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.admin-sidebar .nav-section-title {
  color: #9b6557;
}

.admin-sidebar .nav-item {
  color: #56261a;
}

.admin-sidebar .nav-item svg {
  color: #a65e49;
}

.admin-sidebar .nav-item:hover {
  background: #fff0e9;
  color: #2b1009;
}

.admin-sidebar .nav-item:hover svg {
  color: #c94727;
}

.admin-sidebar .nav-item.active {
  background: linear-gradient(135deg, #e65f38, #c94727);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(201, 71, 39, 0.28);
}

.admin-sidebar .nav-item.active svg {
  color: #ffffff;
}

.admin-sidebar .sidebar-footer {
  border-top-color: #e8b7a3;
}

.admin-sidebar .user-info {
  background: #fff4ee;
  border: 1px solid #e8b7a3;
}

.admin-sidebar .user-name {
  color: #2b1009;
}

.admin-sidebar .user-role {
  color: #8a5548;
}

.admin-sidebar .logout-btn {
  background: #fff4ee;
  border-color: #e8b7a3;
  color: #7b4435;
}

.admin-sidebar .logout-btn:hover {
  background: #c94727;
  border-color: #c94727;
  color: #ffffff;
}

/* El ticket debe respetar la barra superior cuando reaparece al subir */
@media (min-width: 993px) {
  .seller-sidebar ~ .main-content .pos-cart {
    top: calc(76px + 1rem);
  }

  .seller-sidebar.nav-hidden ~ .main-content .pos-cart {
    top: 1rem;
  }
}

@media (max-width: 992px) {
  .seller-sidebar ~ .main-content .pos-cart .cart-header {
    position: sticky;
    top: 72px;
    z-index: 2;
    background: var(--seller-panel);
    border-bottom: 1px solid var(--seller-line);
  }

  .seller-sidebar.nav-hidden ~ .main-content .pos-cart .cart-header {
    top: 0;
  }
}
/* Contratos conectados con Filtro */
.filtro-contracts-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(420px, 1.15fr);
  gap: 1rem;
  align-items: start;
}

.filtro-contract-form-card,
.filtro-contract-list-card {
  min-width: 0;
}

.filtro-contract-subtitle {
  margin: 0.3rem 0 0;
  color: var(--gray-400);
  font-size: 0.82rem;
}

.filtro-contract-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.filtro-money-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--gray-600);
  border-radius: 8px;
  background: var(--gray-800);
  overflow: hidden;
}

.filtro-money-input span {
  padding: 0 0 0 0.85rem;
  color: var(--gray-300);
  font-weight: 700;
}

.filtro-money-input .form-input {
  border: 0;
  background: transparent;
}

.filtro-photo-dropzone {
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border: 1.5px dashed var(--gray-500);
  border-radius: 10px;
  background: var(--gray-800);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.filtro-photo-dropzone:hover,
.filtro-photo-dropzone:focus-visible,
.filtro-photo-dropzone.dragover {
  outline: none;
  border-color: var(--primary-red);
  background: color-mix(in srgb, var(--primary-red) 8%, var(--gray-800));
}

.filtro-photo-empty,
.filtro-photo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.45rem;
  text-align: center;
}

.filtro-photo-empty > span:last-child {
  color: var(--gray-400);
  font-size: 0.78rem;
}

.filtro-photo-icon {
  display: inline-flex;
  color: var(--primary-red);
  font-size: 1.75rem;
}

.filtro-photo-preview {
  width: 100%;
  gap: 0.75rem;
}

.filtro-photo-preview img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  border-radius: 7px;
  object-fit: contain;
}

.filtro-photo-preview > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.filtro-photo-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.filtro-contract-note {
  margin: 0;
  color: var(--gray-400);
  font-size: 0.78rem;
  line-height: 1.45;
}

.filtro-contract-list-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 360px;
  overflow-y: auto;
}

.filtro-contract-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 64px;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--gray-700);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.filtro-contract-row:hover,
.filtro-contract-row:focus-visible,
.filtro-contract-row.selected {
  outline: none;
  border-color: var(--primary-red);
  background: color-mix(in srgb, var(--primary-red) 9%, transparent);
}

.filtro-contract-row-main,
.filtro-contract-row-meta,
.filtro-items-heading,
.filtro-item-form-heading,
.filtro-item-form-footer,
.filtro-detail-header,
.filtro-detail-summary,
.filtro-item-row,
.filtro-item-actions {
  display: flex;
  align-items: center;
}

.filtro-contract-row-main,
.filtro-contract-row-meta {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.filtro-contract-row-main span,
.filtro-contract-row-meta span,
.filtro-items-heading span,
.filtro-item-row span,
.filtro-contract-empty span {
  color: var(--gray-400);
  font-size: 0.78rem;
}

.filtro-contract-row-meta {
  align-items: flex-end;
  white-space: nowrap;
}

.filtro-contract-error {
  color: var(--error) !important;
}

.filtro-contract-detail {
  padding: 1rem;
  border-top: 1px solid var(--gray-700);
}

.filtro-contract-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 130px;
  color: var(--gray-400);
  text-align: center;
}

.filtro-detail-header,
.filtro-items-heading,
.filtro-item-form-heading,
.filtro-item-form-footer {
  justify-content: space-between;
  gap: 0.75rem;
}

.filtro-detail-kicker {
  color: var(--gray-400);
  font-size: 0.75rem;
}

.filtro-detail-header h3 {
  margin: 0.2rem 0 0;
  font-size: 1.1rem;
}

.filtro-detail-summary {
  gap: 0.5rem;
  margin: 1rem 0;
}

.filtro-detail-summary > span {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.2rem;
  padding: 0.65rem;
  border-radius: 7px;
  background: var(--gray-800);
}

.filtro-detail-summary small {
  color: var(--gray-400);
  font-size: 0.7rem;
}

.filtro-detail-summary strong {
  font-size: 0.88rem;
}

.filtro-items-heading {
  margin-bottom: 0.65rem;
}

.filtro-items-heading > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.filtro-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.filtro-item-row {
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--gray-700);
}

.filtro-item-row > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.filtro-item-row span {
  overflow-wrap: anywhere;
}

.filtro-item-actions {
  flex-shrink: 0;
  gap: 0.35rem;
}

.filtro-items-empty {
  padding: 0.85rem;
  border-radius: 7px;
  background: var(--gray-800);
  color: var(--gray-400);
  font-size: 0.82rem;
}

.filtro-item-form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-700);
}

.filtro-item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.8rem;
}

.filtro-item-form-footer {
  margin-top: 0.8rem;
  flex-wrap: wrap;
}

.filtro-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--gray-300);
  font-size: 0.8rem;
}

.filtro-check input {
  width: 18px;
  height: 18px;
}

body[data-theme="light"] .filtro-money-input,
body[data-theme="light"] .filtro-photo-dropzone,
body[data-theme="light"] .filtro-detail-summary > span,
body[data-theme="light"] .filtro-items-empty {
  background: #F9FAFB;
}

body[data-theme="light"] .filtro-photo-dropzone,
body[data-theme="light"] .filtro-contract-row,
body[data-theme="light"] .filtro-contract-detail,
body[data-theme="light"] .filtro-item-form,
body[data-theme="light"] .filtro-item-row {
  border-color: #E5E7EB;
}

@media (max-width: 900px) {
  .filtro-contracts-layout {
    grid-template-columns: 1fr;
  }

  .filtro-contract-list-body {
    max-height: none;
  }
}

@media (max-width: 520px) {
  .filtro-item-grid {
    grid-template-columns: 1fr;
  }

  .filtro-detail-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .filtro-contract-row,
  .filtro-item-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .filtro-contract-row-meta {
    align-items: flex-start;
  }

  .filtro-item-actions {
    width: 100%;
  }
}

.filtro-contract-photo {
  margin: 1rem 0 1.15rem;
  padding: 0.85rem;
  border: 1px solid var(--gray-700);
  border-radius: 10px;
  background: var(--gray-800);
}

.filtro-contract-photo-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
  color: var(--gray-200);
  font-size: 0.82rem;
}

.filtro-contract-photo-heading a {
  color: var(--primary-red);
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
}

.filtro-contract-photo-heading a:hover,
.filtro-contract-photo-heading a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.filtro-contract-photo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--gray-900);
}

.filtro-contract-photo img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 390px;
  margin: 0 auto;
  object-fit: contain;
}

.filtro-contract-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 110px;
  color: var(--gray-400);
  text-align: center;
}

body[data-theme="light"] .filtro-contract-photo {
  border-color: #E5E7EB;
  background: #F9FAFB;
}

body[data-theme="light"] .filtro-contract-photo-heading {
  color: var(--gray-800);
}

@media (max-width: 520px) {
  .filtro-contract-photo-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .filtro-contract-photo-link {
    min-height: 140px;
  }

  .filtro-contract-photo img {
    max-height: 300px;
  }
}