/* ===========================
   Total Clean POS — styles.css
   =========================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:        #185FA5;
  --blue-light:  #E6F1FB;
  --blue-mid:    #B5D4F4;
  --blue-dark:   #0C447C;
  --green:       #3B6D11;
  --green-light: #EAF3DE;
  --amber:       #854F0B;
  --amber-light: #FAEEDA;
  --red:         #A32D2D;
  --red-light:   #FCEBEB;
  --teal:        #0F6E56;
  --teal-light:  #E1F5EE;

  --bg:          #F5F4F0;
  --surface:     #FFFFFF;
  --surface-2:   #F1EFE8;
  --border:      rgba(0,0,0,0.08);
  --border-md:   rgba(0,0,0,0.13);
  --text:        #1A1A18;
  --text-2:      #5F5E5A;
  --text-3:      #9B9990;

  --radius:      8px;
  --radius-lg:   12px;
  --sidebar-w:   68px;
  --topbar-h:    52px;
  --font:        'DM Sans', sans-serif;
  --font-mono:   'DM Mono', monospace;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.10);
}

html, body { height: 100%; overflow: hidden; }
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* ===========================
   LAYOUT
   =========================== */
.pos-app { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 2px;
  flex-shrink: 0;
  z-index: 10;
}

.sidebar-logo {
  width: 38px; height: 38px;
  background: var(--blue);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  color: #fff;
  font-size: 18px;
}

.sidebar-spacer { flex: 1; }

.nav-btn {
  width: 46px; height: 46px;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-3);
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.nav-btn i { font-size: 20px; line-height: 1; }
.nav-label { font-size: 9px; font-weight: 500; letter-spacing: 0.02em; }
.nav-btn:hover { background: var(--surface-2); color: var(--text); }
.nav-btn.active { background: var(--blue-light); color: var(--blue); }

.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  flex-shrink: 0;
}
.topbar-title { font-size: 15px; font-weight: 600; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-clock { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.badge-turno { font-size: 11px; padding: 3px 9px; border-radius: 20px; background: var(--green-light); color: var(--green); font-weight: 500; }
.topbar-user { display: flex; align-items: center; gap: 8px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--blue-light); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--blue); }
.user-name { font-size: 13px; color: var(--text-2); }

.content { flex: 1; overflow-y: auto; background: var(--bg); }
.panel { display: none; padding: 20px; min-height: 100%; }
.panel.active { display: block; }

/* ===========================
   COMPONENTS
   =========================== */
.card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.section-header h2 { font-size: 16px; font-weight: 600; }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }

.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 0.5px solid var(--border-md);
  border-radius: var(--radius);
  padding: 7px 12px;
  transition: border-color 0.15s;
}
.search-bar:focus-within { border-color: var(--blue); }
.search-bar i { color: var(--text-3); font-size: 16px; flex-shrink: 0; }
.search-bar input { background: none; border: none; outline: none; font-size: 13px; color: var(--text); font-family: var(--font); width: 100%; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-primary:hover { background: var(--blue-dark); }
.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--surface);
  color: var(--text);
  border: 0.5px solid var(--border-md);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-secondary:hover { background: var(--surface-2); }

.btn-confirm {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 11px;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  margin-top: 12px;
  transition: background 0.15s;
}
.btn-confirm:hover { background: var(--teal-light); color: var(--teal); }

.icon-btn {
  width: 30px; height: 30px;
  border: none;
  background: none;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
  font-size: 16px;
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.del:hover { background: var(--red-light); color: var(--red); }

.cat-tabs, .period-tabs {
  display: flex; gap: 3px;
  background: var(--surface-2);
  padding: 3px;
  border-radius: var(--radius);
  width: fit-content;
}
.tab-btn {
  padding: 5px 13px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  color: var(--text-2);
  transition: all 0.15s;
  white-space: nowrap;
}
.tab-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* ===========================
   CAJA
   =========================== */
.caja-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  height: calc(100vh - var(--topbar-h) - 40px);
}

.productos-side { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.cat-tabs { margin: 0; overflow-x: auto; }

.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  overflow-y: auto;
  align-content: start;
  padding-bottom: 4px;
  flex: 1;
}

.prod-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  user-select: none;
}
.prod-card:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.prod-card:active { transform: scale(0.97); }
.prod-card.out-of-stock { opacity: 0.6; }

.prod-icon {
  position: relative;
  width: 40px; height: 40px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
  font-size: 18px;
  color: var(--blue);
}
.prod-name { font-size: 12px; font-weight: 500; color: var(--text); margin-bottom: 3px; line-height: 1.3; }
.prod-price { font-size: 13px; color: var(--blue); font-weight: 600; }
.prod-stock-info { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* Ticket */
.ticket-panel {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.ticket-header {
  padding: 12px 14px;
  border-bottom: 0.5px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.ticket-items { flex: 1; overflow-y: auto; padding: 6px 10px; }
.ticket-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-3); font-size: 13px; gap: 8px; }
.ticket-empty i { font-size: 30px; }

.ticket-item {
  display: flex; flex-direction: column; gap: 0;
  padding: 6px 0;
  border-bottom: 0.5px solid var(--border);
}
.ticket-item:last-child { border-bottom: none; }

/* Flash cuando se agrega un ítem por escaneo */
@keyframes scan-pop {
  0%   { background: var(--teal-light); transform: scaleY(1.04); }
  60%  { background: var(--teal-light); }
  100% { background: transparent; transform: scaleY(1); }
}
.scan-added { animation: scan-pop 0.55s ease-out; transform-origin: top; }
.ti-row-main { display: flex; align-items: center; gap: 6px; }
.ti-name { flex: 1; font-size: 12px; line-height: 1.3; color: var(--text); }
.ti-qty { display: flex; align-items: center; gap: 5px; }
.qty-btn {
  width: 22px; height: 22px;
  border: 0.5px solid var(--border-md);
  background: var(--surface-2);
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  font-family: var(--font);
}
.qty-btn:hover { background: var(--bg); }
.ti-qty-num { font-size: 13px; font-weight: 500; min-width: 18px; text-align: center; }

/* Columna de precio por ítem */
.ti-price-col { display: flex; flex-direction: column; align-items: flex-end; min-width: 58px; }
.ti-price-orig { font-size: 10px; color: var(--text-3); text-decoration: line-through; line-height: 1.2; }
.ti-price { font-size: 12px; font-weight: 500; text-align: right; }
.ti-price.with-desc { color: var(--green); }

/* Botón de descuento por ítem (etiqueta/tag) */
.ti-desc-btn {
  width: 24px; height: 24px;
  border: none; background: transparent;
  border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 13px; flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.ti-desc-btn:hover { background: var(--surface-2); color: var(--text); }
.ti-desc-btn.active { color: var(--blue); background: var(--blue-light); }

/* Fila de descuento por ítem (colapsable) */
.ti-desc-row {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px;
  padding: 5px 8px;
  background: var(--surface-2);
  border-radius: var(--radius);
}
.ti-desc-tipo-btn {
  width: 28px; height: 26px;
  border: 1px solid var(--border-md);
  background: var(--surface);
  border-radius: 6px; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.12s; font-family: var(--font);
}
.ti-desc-tipo-btn:hover { background: var(--bg); }
.ti-desc-input {
  flex: 1; height: 26px; min-width: 0;
  border: 1px solid var(--border-md);
  border-radius: 6px; font-size: 12px;
  padding: 0 6px; font-family: var(--font-mono); outline: none;
}
.ti-desc-input:focus { border-color: var(--blue); }
.ti-desc-hint { font-size: 11px; color: var(--green); white-space: nowrap; min-width: 36px; text-align: right; }

/* Sección de vuelto */
.vuelto-wrap {
  border-top: 0.5px solid var(--border);
  padding: 8px 0 4px;
  display: flex; flex-direction: column; gap: 4px;
}
.vuelto-input-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
}
.vuelto-input-row label { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.vuelto-input-row input {
  width: 108px; height: 30px;
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  font-size: 13px; padding: 0 8px;
  font-family: var(--font-mono);
  outline: none; text-align: right;
}
.vuelto-input-row input:focus { border-color: var(--blue); }
.vuelto-result {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 3px 0; font-size: 13px;
}
.vuelto-result span { color: var(--text-2); }
.vuelto-result strong { font-size: 15px; color: var(--teal); font-family: var(--font-mono); }

.ticket-footer {
  padding: 12px 14px;
  border-top: 0.5px solid var(--border);
  flex-shrink: 0;
}
.totals-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); margin-bottom: 3px; }
.totals-total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 600; color: var(--text); margin: 8px 0 12px; }
.pago-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.pago-btn {
  padding: 7px 4px;
  border: 0.5px solid var(--border-md);
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  color: var(--text-2);
  transition: all 0.15s;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.pago-btn i { font-size: 16px; }
.pago-btn:hover { background: var(--blue-light); color: var(--blue); border-color: var(--blue); }
.pago-btn.selected { background: var(--blue-light); color: var(--blue); border-color: var(--blue); }
.cobrar-btn {
  width: 100%;
  padding: 11px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s;
  letter-spacing: 0.01em;
}
.cobrar-btn:hover:not(:disabled) { background: var(--blue-dark); }
.cobrar-btn:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; }

/* ===========================
   INVENTARIO
   =========================== */
.table-wrap { overflow-x: auto; background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-lg); }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  padding: 9px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--surface-2);
  border-bottom: 0.5px solid var(--border);
  white-space: nowrap;
}
.data-table td { padding: 10px 14px; border-bottom: 0.5px solid var(--border); color: var(--text); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: #fafaf8; }

.stock-badge { padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 500; }
.stock-ok  { background: var(--green-light); color: var(--green); }
.stock-low { background: var(--amber-light); color: var(--amber); }
.stock-out { background: var(--red-light); color: var(--red); }
.cat-badge { padding: 2px 9px; border-radius: 20px; font-size: 11px; background: var(--surface-2); color: var(--text-2); }
.code-cell { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.row-actions { display: flex; gap: 4px; }

/* ===========================
   RECEPCION
   =========================== */
.rec-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.rec-form-card h3, .rec-orders-card h3 { font-size: 14px; font-weight: 600; margin-bottom: 14px; color: var(--text); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-row { display: flex; flex-direction: column; gap: 4px; }
.form-row label { font-size: 12px; color: var(--text-2); font-weight: 500; }
.form-row input, .form-row select {
  padding: 7px 10px;
  border: 0.5px solid var(--border-md);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.18s, background 0.18s;
}

/* Campo lleno: borde azul suave + fondo ligeramente azulado */
.form-row input:not([type="checkbox"]):not([type="radio"]):not(:placeholder-shown) {
  border-color: var(--blue-mid);
  background: #EFF5FF;
}

/* Al hacer foco siempre el azul de marca, sin importar si está lleno o vacío */
.form-row input:focus, .form-row select:focus {
  border-color: var(--blue);
  background: var(--surface);
  outline: 2px solid var(--blue-light);
  outline-offset: 0;
}
.rec-add-row { display: flex; gap: 8px; align-items: center; }
.rec-add-row input { padding: 7px 10px; border: 0.5px solid var(--border-md); border-radius: var(--radius); background: var(--surface-2); color: var(--text); font-size: 13px; font-family: var(--font); outline: none; }
.rec-add-row input:focus { border-color: var(--blue); }
.rec-add-row select { flex: 2; padding: 7px 10px; border: 0.5px solid var(--border-md); border-radius: var(--radius); background: var(--surface-2); color: var(--text); font-size: 13px; font-family: var(--font); outline: none; }
.rec-add-row input[type="number"] { width: 80px; }

.rec-items-list { margin-top: 10px; max-height: 220px; overflow-y: auto; }
.empty-hint { font-size: 12px; color: var(--text-3); padding: 10px 0; }
.rec-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 0.5px solid var(--border); font-size: 13px; }
.rec-item:last-child { border-bottom: none; }
.rec-item-name { flex: 1; font-weight: 500; }
.rec-item-meta { color: var(--text-2); font-size: 12px; }
.rec-item-total { font-weight: 600; min-width: 70px; text-align: right; }
.rec-total { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; padding-top: 10px; border-top: 0.5px solid var(--border-md); margin-top: 6px; }

.ord-list { display: flex; flex-direction: column; gap: 8px; }
.ord-row { background: var(--surface-2); border-radius: var(--radius); padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; }
.ord-name { font-size: 13px; font-weight: 500; }
.ord-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.ord-status { font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 500; white-space: nowrap; }
.ord-transit  { background: var(--blue-light); color: var(--blue); }
.ord-received { background: var(--green-light); color: var(--green); }
.ord-pending  { background: var(--amber-light); color: var(--amber); }

/* ===========================
   REPORTES
   =========================== */
.rep-actions { display: flex; align-items: center; gap: 10px; }

/* Rango personalizado */
.rep-custom-range {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 0.5px solid var(--border-md);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.rep-range-icon { color: var(--text-3); font-size: 16px; }
.rep-custom-range label { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.rep-custom-range input[type="date"] {
  height: 32px; border: 1px solid var(--border-md);
  border-radius: var(--radius); padding: 0 8px;
  font-size: 13px; font-family: var(--font); outline: none;
}
.rep-custom-range input[type="date"]:focus { border-color: var(--blue); }

/* Métricas */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 16px;
}
.metric-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex; align-items: flex-start; gap: 14px;
}
.metric-icon-wrap {
  width: 42px; height: 42px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.metric-body { flex: 1; min-width: 0; }
.metric-label { font-size: 12px; color: var(--text-2); margin-bottom: 4px; font-weight: 500; }
.metric-val { font-size: 22px; font-weight: 600; color: var(--text); line-height: 1.2; }
.metric-sub { font-size: 11px; color: var(--text-3); margin-top: 3px; }

/* Skeleton loading */
.metric-card.rep-loading { background: var(--surface-2); border-color: transparent; }
.rep-skel {
  height: 20px; border-radius: 4px;
  background: linear-gradient(90deg, var(--border) 25%, var(--surface) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: rep-shimmer 1.4s infinite;
  margin-bottom: 8px;
}
.rep-skel-sm { height: 12px; width: 60%; }
@keyframes rep-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Gráficos */
.charts-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }
.chart-card { overflow: visible; }
.chart-card-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 14px;
}
.chart-title { font-size: 13px; font-weight: 600; color: var(--text); margin: 0; }
.chart-subtitle { font-size: 11px; color: var(--text-3); }

/* Gráfico de barras */
.bar-chart-wrap {
  display: flex; align-items: flex-end;
  gap: 3px; height: 120px; padding-bottom: 20px; position: relative;
}
.bar-wrap {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; height: 100%; justify-content: flex-end;
  min-width: 0;
}
.bar-col { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.bar {
  width: 100%; border-radius: 3px 3px 0 0;
  background: var(--blue-mid);
  transition: background 0.15s; min-height: 3px;
}
.bar-wrap:hover .bar { background: var(--blue); }
.bar-lbl { font-size: 9px; color: var(--text-3); white-space: nowrap; margin-top: 4px; }
.rep-chart-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 8px; color: var(--text-3); font-size: 13px; min-height: 100px;
}
.rep-chart-empty i { font-size: 24px; }

/* Donut */
.donut-wrap { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.donut-svg-wrap { display: flex; justify-content: center; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; }
.legend-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius);
  background: var(--surface-2);
}
.legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend-info { flex: 1; min-width: 0; }
.legend-label { font-size: 12px; color: var(--text); display: block; font-weight: 500; }
.legend-count { font-size: 11px; color: var(--text-3); }
.legend-right { text-align: right; }
.legend-monto { display: block; font-size: 12px; font-weight: 600; color: var(--text); font-family: var(--font-mono); }
.legend-pct { font-size: 11px; color: var(--text-3); }

/* Top productos */
.rep-top-card { overflow: hidden; }
.rep-prod-name { font-size: 13px; font-weight: 500; color: var(--text); }
.rep-prod-code { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.rep-units { font-size: 13px; font-weight: 600; color: var(--text); }
.rep-pct-label { font-size: 11px; color: var(--text-3); white-space: nowrap; min-width: 34px; text-align: right; }
.progress-bar-wrap { display: flex; align-items: center; gap: 8px; }
.progress-bar { flex: 1; height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--blue); border-radius: 3px; transition: width 0.4s ease; }

/* ===========================
   CONFIGURACION
   =========================== */
.config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.config-grid h3 { font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.user-list { display: flex; flex-direction: column; gap: 8px; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 0.5px solid var(--border); }
.user-row:last-child { border-bottom: none; }
.user-row strong { font-size: 13px; display: block; }
.user-row p { font-size: 11px; color: var(--text-3); }
.user-row .avatar { flex-shrink: 0; }
.user-row div:nth-child(2) { flex: 1; }
.badge-role { font-size: 11px; padding: 2px 9px; border-radius: 20px; background: var(--blue-light); color: var(--blue); }
.badge-role.admin { background: var(--amber-light); color: var(--amber); }

/* ===========================
   MODALS
   =========================== */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.modal-bg.open { display: flex; }
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  width: 420px;
  max-width: 95vw;
  border: 0.5px solid var(--border);
  box-shadow: var(--shadow-md);
  animation: modal-in 0.2s ease;
}
.modal-sm { width: 320px; }
@keyframes modal-in { from { opacity:0; transform: scale(0.95) translateY(8px); } to { opacity:1; transform: none; } }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-header h3 { font-size: 15px; font-weight: 600; }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* Código escaneado no encontrado */
.no-enc-code {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  padding: 10px 16px;
  letter-spacing: 0.08em;
  text-align: center;
}

.cobro-success { text-align: center; padding: 8px 0 4px; }
.cobro-check { width: 52px; height: 52px; border-radius: 50%; background: var(--green-light); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 24px; color: var(--green); }
.cobro-success h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.cobro-label { font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.cobro-amount { font-size: 30px; font-weight: 600; margin-bottom: 4px; }
.cobro-method { font-size: 13px; color: var(--text-2); }
.cobro-ticket { font-size: 12px; color: var(--text-3); font-family: var(--font-mono); margin-top: 4px; }

/* ===========================
   TOAST
   =========================== */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--text);
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  z-index: 999;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===========================
   SCROLLBAR
   =========================== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ===========================
   LOGIN SCREEN
   =========================== */
.login-screen {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}

.login-card {
  background: var(--surface);
  border: 0.5px solid var(--border-md);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 40px 36px 36px;
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}

.login-logo {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 8px;
}

.login-title {
  font-size: 20px; font-weight: 600; color: var(--text);
}

.login-subtitle {
  font-size: 13px; color: var(--text-2); margin-bottom: 16px;
}

.login-card form {
  width: 100%; display: flex; flex-direction: column; gap: 10px;
}

.login-field {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border-md); border-radius: var(--radius);
  padding: 0 12px; background: var(--bg);
  transition: border-color .15s;
}
.login-field:focus-within { border-color: var(--blue); background: #fff; }
.login-field i { color: var(--text-3); font-size: 16px; flex-shrink: 0; }
.login-field input {
  border: none; background: transparent; outline: none;
  font-family: var(--font); font-size: 14px; color: var(--text);
  width: 100%; padding: 11px 0;
}
.login-field input::placeholder { color: var(--text-3); }

.login-error {
  font-size: 13px; color: var(--red);
  background: var(--red-light); border-radius: var(--radius);
  padding: 8px 12px; text-align: center; margin: 0;
}

.login-btn {
  margin-top: 4px; width: 100%; padding: 11px;
  background: var(--blue); color: #fff; border: none;
  border-radius: var(--radius); font-family: var(--font);
  font-size: 14px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s;
}
.login-btn:hover:not(:disabled) { background: var(--blue-dark); }
.login-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Botón logout en topbar */
.logout-btn {
  width: 32px; height: 32px; border-radius: var(--radius);
  border: 1px solid var(--border-md); background: transparent;
  color: var(--text-2); cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 16px;
  transition: background .15s, color .15s;
}
.logout-btn:hover { background: var(--red-light); color: var(--red); border-color: var(--red); }

/* Wrapper de la app ocupa toda la altura */
#pos-app-wrapper { width: 100%; }

/* ===========================
   HOME / INICIO
   =========================== */
.home-welcome {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 0.5px solid var(--border);
}
.home-logo {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: var(--blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.home-title { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.home-subtitle { font-size: 13px; color: var(--text-2); }
.home-subtitle strong { color: var(--text); }

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.home-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.home-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.home-card:active { transform: scale(0.97); }

.home-card-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}

/* Colores del icono por módulo (sin inline CSS vars) */
.home-card[data-color="blue"]  .home-card-icon { background: var(--blue-light);  color: var(--blue);   }
.home-card[data-color="teal"]  .home-card-icon { background: var(--teal-light);  color: var(--teal);   }
.home-card[data-color="amber"] .home-card-icon { background: var(--amber-light); color: var(--amber);  }
.home-card[data-color="green"] .home-card-icon { background: var(--green-light); color: var(--green);  }
.home-card[data-color="gray"]  .home-card-icon { background: var(--surface-2);   color: var(--text-2); }

.home-card-body { width: 100%; }
.home-card-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.home-card-desc  { font-size: 12px; color: var(--text-3); line-height: 1.4; }

/* ===========================
   TICKET TABS (multi-ventana)
   =========================== */
.ticket-tabs-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px 0;
  background: var(--surface-2);
  border-bottom: 0.5px solid var(--border);
  overflow-x: auto;
  flex-shrink: 0;
  min-height: 36px;
}
.ticket-tabs-bar::-webkit-scrollbar { height: 0; }

.ticket-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px 6px 0 0;
  border: 0.5px solid transparent;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.ticket-tab:hover { background: var(--surface); color: var(--text); }
.ticket-tab.active {
  background: var(--surface);
  color: var(--blue);
  border-color: var(--border);
  border-bottom-color: var(--surface);
  margin-bottom: -0.5px;
}

.tab-close-btn {
  width: 16px; height: 16px;
  border: none; background: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
  padding: 0;
  transition: background 0.12s, color 0.12s;
}
.tab-close-btn:hover { background: var(--red-light); color: var(--red); }

.tab-add-btn {
  width: 26px; height: 26px;
  border: 0.5px solid var(--border-md);
  background: var(--surface);
  border-radius: 6px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
  font-size: 14px;
  margin-left: 2px;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.tab-add-btn:hover { background: var(--blue-light); color: var(--blue); border-color: var(--blue); }

/* ===========================
   DESCUENTO
   =========================== */
.descuento-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
}
.desc-label { font-size: 12px; color: var(--text-2); }
.desc-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.desc-tipo-btn {
  width: 28px; height: 28px;
  border: 0.5px solid var(--border-md);
  background: var(--surface-2);
  border-radius: 6px;
  font-size: 12px; font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  color: var(--blue);
  transition: background 0.12s;
  flex-shrink: 0;
}
.desc-tipo-btn:hover { background: var(--blue-light); }
.desc-input {
  width: 72px;
  padding: 5px 8px;
  border: 0.5px solid var(--border-md);
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 13px;
  font-family: var(--font);
  color: var(--text);
  outline: none;
  text-align: right;
  transition: border-color 0.12s;
}
.desc-input:focus { border-color: var(--blue); background: var(--surface); }
.desc-applied { color: var(--green); font-weight: 500; }

/* ===========================
   PAGO MIXTO
   =========================== */
.mixto-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
}
.mixto-toggle input[type="checkbox"] { accent-color: var(--blue); cursor: pointer; }

.pago-mixto-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: var(--surface-2);
  border-radius: var(--radius);
  border: 0.5px solid var(--border);
}
.pago-mixto-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mixto-select {
  flex: 1;
  padding: 6px 8px;
  border: 0.5px solid var(--border-md);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px;
  font-family: var(--font);
  color: var(--text);
  outline: none;
  cursor: pointer;
}
.mixto-monto {
  width: 80px;
  padding: 6px 8px;
  border: 0.5px solid var(--border-md);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
  font-family: var(--font);
  color: var(--text);
  outline: none;
  text-align: right;
  transition: border-color 0.12s;
}
.mixto-monto:focus { border-color: var(--blue); }
.mixto-monto[readonly] { background: var(--surface-2); color: var(--text-2); }

/* ===========================
   CERRAR CAJA BUTTON
   =========================== */
.cerrar-caja-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  margin-top: 6px;
  background: transparent;
  color: var(--red);
  border: 0.5px solid var(--red);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s;
}
.cerrar-caja-btn:hover { background: var(--red-light); }

/* ===========================
   CIERRE MODAL CONTENT
   =========================== */
.cierre-resumen { font-size: 13px; }

.cierre-bloque {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.cierre-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  color: var(--text-2);
}
.cierre-fila strong { color: var(--text); font-weight: 500; }

.cierre-total {
  border-top: 0.5px solid var(--border-md);
  margin-top: 4px;
  padding-top: 8px;
  color: var(--text) !important;
  font-weight: 600;
}
.cierre-total span, .cierre-total strong { font-weight: 600; color: var(--text); font-size: 14px; }

.cierre-total-general {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  padding: 9px 12px;
  background: var(--blue-light);
  border-radius: var(--radius);
  border: 1px solid var(--blue-mid);
}
.cierre-total-general span       { font-size: 13px; font-weight: 600; color: var(--blue-dark); }
.cierre-total-general span small { font-weight: 400; opacity: 0.75; font-size: 11px; }
.cierre-total-general strong     { font-size: 16px; font-weight: 700; color: var(--blue-dark); }

.cierre-diferencia-badge {
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-top: 8px;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}
.cierre-diferencia-badge.positivo { background: var(--green-light); color: var(--green); }
.cierre-diferencia-badge.negativo { background: var(--red-light); color: var(--red); }

/* ── Selector de caja (modal apertura) ──────────────────── */
.caja-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.caja-option {
  flex: 1;
  min-width: 110px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid var(--border-md);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--surface);
  user-select: none;
}

.caja-option:hover:not(.ocupada) {
  border-color: var(--blue-mid);
  background: var(--blue-light);
}

.caja-option.selected {
  border-color: var(--blue);
  background: var(--blue-light);
}

.caja-option.ocupada {
  opacity: 0.5;
  cursor: not-allowed;
}

.caja-option-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--blue-light);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.caja-option.ocupada .caja-option-icon {
  background: var(--surface-2);
  color: var(--text-3);
}

.caja-option.selected .caja-option-icon {
  background: var(--blue);
  color: #fff;
}

.caja-option-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.caja-option-nombre {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.caja-option-status {
  font-size: 11px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 4px;
}

.caja-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.caja-status-dot.libre   { background: var(--green); }
.caja-status-dot.ocupada { background: var(--red); }

/* ── Botones de caja inferiores ─────────────────────────── */
.caja-acciones-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.caja-acciones-row .cerrar-caja-btn,
.caja-acciones-row .cambiar-caja-btn {
  flex: 1;
}

/* ── Formulario de producto (página inline) ─────────────── */
#inv-view-list,
#inv-view-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.inv-nombre-link {
  font-weight: 500;
  color: var(--blue);
  cursor: pointer;
  text-decoration: none;
}
.inv-nombre-link:hover {
  text-decoration: underline;
}

.inv-form-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.inv-form-topbar h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.inv-form-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  flex: 1;
  padding-bottom: 4px;
}

.inv-form-card {
  padding: 20px 22px;
}

.inv-form-section {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  margin-bottom: 14px;
}

#np-description {
  width: 100%;
  resize: vertical;
  min-height: 76px;
  padding: 8px 10px;
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  transition: border-color 0.15s;
  line-height: 1.5;
}

#np-description:focus {
  outline: none;
  border-color: var(--blue);
}

.inv-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 16px;
  flex-shrink: 0;
}

/* Celdas de tabla inventario */
.inv-desc-td    { max-width: 200px; }
.inv-desc-cell  { color: var(--text-2); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inv-barcode-cell { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }

/* ── Modal ajuste de stock ──────────────────────────────── */
.ajuste-stock-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-2);
}

.ajuste-stock-info strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-mono);
}

/* ── Modal importador de productos ─────────────────────────── */
.modal-lg {
  width: 900px;
  max-width: calc(100vw - 40px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.import-instrucciones {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text-2);
}

.import-instrucciones p { flex: 1; margin: 0; line-height: 1.4; }

.btn-sm {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: var(--radius);
  white-space: nowrap;
}

.import-file-row { margin-bottom: 14px; }

.import-file-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 2px dashed var(--border-md);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-3);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  text-align: center;
}

.import-file-label:hover,
.import-file-label.drag-over {
  border-color: var(--blue);
  background: var(--blue-light);
  color: var(--blue-dark);
}

.import-file-label i { font-size: 30px; }
#import-file-input { display: none; }

#import-preview {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.import-preview-header {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 8px;
  padding: 0 2px;
}

.import-table-wrap {
  overflow: auto;
  flex: 1;
  max-height: 320px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.import-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.import-table th {
  background: var(--surface-2);
  position: sticky;
  top: 0;
  padding: 7px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  z-index: 1;
}

.import-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text);
}

.import-table tr:last-child td { border-bottom: none; }
.import-table tr:hover td { background: var(--bg, #F5F4F0); }

.import-row-error td { background: rgba(163,45,45,.04); }
.import-row-error:hover td { background: rgba(163,45,45,.08); }

.import-accion-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.import-accion-badge.nuevo {
  background: var(--green-light);
  color: var(--green);
}

.import-accion-badge.actualizar {
  background: var(--blue-light);
  color: var(--blue-dark);
}

.import-accion-badge.error {
  background: var(--red-light);
  color: var(--red);
}

.import-error-msg {
  font-size: 11px;
  color: var(--red);
  margin-top: 3px;
  line-height: 1.3;
}

/* ── Vista historial de movimientos ────────────────────────── */
.hist-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hist-title {
  font-size: 18px;
  font-weight: 600;
  flex: 0 0 auto;
}

.hist-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.hist-select {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.hist-select:focus {
  outline: none;
  border-color: var(--blue);
}

.hist-date {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
}

.hist-date:focus {
  outline: none;
  border-color: var(--blue);
}

/* Badges de tipo de movimiento */
.hist-tipo-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.hist-badge-venta  { background: var(--blue-light);  color: var(--blue-dark); }
.hist-badge-ajuste { background: var(--amber-light); color: var(--amber);     }
.hist-badge-import { background: var(--green-light); color: var(--green);     }

/* ── Botón Ventas de sesión ─────────────────────────────────── */
.caja-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.btn-ventas-sesion {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 36px;
  border: 1.5px solid var(--blue-mid);
  border-radius: var(--radius);
  background: var(--blue-light);
  color: var(--blue-dark);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.btn-ventas-sesion:hover { background: #cde3f8; }

/* ── Vista sesión de ventas ─────────────────────────────────── */
#caja-view-ventas {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  overflow: auto;
}

.sesion-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sesion-titulo {
  font-size: 18px;
  font-weight: 600;
  flex: 0 0 auto;
}

.sesion-chips-wrap {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.sesion-chip {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
}
.sesion-chip-total { background: var(--blue-light); border-color: var(--blue-mid); color: var(--blue-dark); }
.sesion-chip-dev   { background: var(--amber-light); border-color: var(--amber); color: var(--amber); }

.sesion-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-3);
  font-size: 14px;
}
.sesion-empty i { font-size: 40px; }

/* Cards de venta */
.sesion-venta-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.sesion-venta-card:hover { box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,.08)); }

.sesion-venta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}
.sesion-venta-header:hover { background: var(--surface-2); }

.sesion-venta-left  { display: flex; align-items: center; gap: 12px; }
.sesion-venta-right { display: flex; align-items: center; gap: 14px; }

.sesion-venta-num   { font-weight: 700; font-size: 15px; font-family: var(--font-mono); }
.sesion-venta-hora  { font-size: 13px; color: var(--text-3); }
.sesion-venta-metodo { font-size: 12px; color: var(--text-3); }
.sesion-venta-total { font-size: 15px; font-weight: 600; font-family: var(--font-mono); }

.sesion-badge-dev {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--amber-light);
  color: var(--amber);
}

.sesion-chevron {
  font-size: 16px;
  color: var(--text-3);
  transition: transform 0.2s;
}

/* Detalle de venta */
.sesion-venta-detail {
  border-top: 1px solid var(--border);
  padding: 14px 16px;
}

.sesion-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 12px;
}
.sesion-items-table th {
  background: var(--surface-2);
  padding: 6px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
.sesion-items-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.sesion-items-table tr:last-child td { border-bottom: none; }

.sesion-venta-acciones {
  display: flex;
  justify-content: flex-end;
  padding: 4px 0 8px;
}

/* Footer de devolución inline */
.sesion-dev-form {
  border-top: 1px dashed var(--border-md);
  padding-top: 12px;
  margin-top: 4px;
}

.sesion-dev-footer {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Botón Devolución en caja (legacy, puede removerse) ──────── */
.devolucion-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid var(--amber);
  border-radius: var(--radius);
  background: var(--amber-light);
  color: var(--amber);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.devolucion-btn:hover { background: #f5ddb8; }

/* ── Modal devolución ───────────────────────────────────────── */
.dev-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.dev-search-input-wrap {
  position: relative;
  flex: 1;
  max-width: 200px;
}
.dev-search-input-wrap i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}
.dev-search-input-wrap input {
  width: 100%;
  height: 36px;
  padding: 0 10px 0 32px;
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
}
.dev-search-input-wrap input:focus {
  outline: none;
  border-color: var(--blue);
}

.dev-venta-header { margin-bottom: 12px; }

.dev-venta-info-grid {
  display: flex;
  gap: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.dev-info-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  border-right: 1px solid var(--border);
}
.dev-info-item:last-child { border-right: none; }
.dev-info-item span  { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.dev-info-item strong { font-size: 13px; font-weight: 600; color: var(--text); }

/* Controles de cantidad en devolución */
.dev-qty-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}
.dev-qty-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-md);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  transition: background 0.1s;
}
.dev-qty-btn:hover { background: var(--surface-2); }
.dev-qty-input {
  width: 48px;
  height: 28px;
  text-align: center;
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.dev-qty-input:focus { outline: none; border-color: var(--blue); }

/* Total y footer del modal */
.dev-footer-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.dev-total-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 20px;
  background: var(--amber-light);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  white-space: nowrap;
  flex-shrink: 0;
}
.dev-total-box span   { font-size: 11px; color: var(--amber); font-weight: 600; text-transform: uppercase; }
.dev-total-box strong { font-size: 20px; font-weight: 700; color: var(--amber); font-family: var(--font-mono); }

/* ===========================
   SELECTOR DE CAJAS (admin)
   =========================== */
#caja-view-selector {
  height: 100%;
  overflow-y: auto;
}

.caja-sel-page {
  padding: 28px 32px;
  max-width: 1100px;
}

.caja-sel-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.caja-sel-page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.caja-sel-page-title i { color: var(--blue); }

.caja-sel-page-sub {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 4px;
}

/* Grid de tarjetas */
.caja-sel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* Tarjeta individual */
.caja-sel-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.caja-sel-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--blue-mid);
}

.caja-sel-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.caja-sel-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--blue-light);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.caja-sel-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.caja-sel-card-nombre {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.caja-sel-card-cajero {
  font-size: 12px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 4px;
}
.caja-sel-card-cajero i { font-size: 11px; }

/* Meta info (hora + fondo) */
.caja-sel-card-meta {
  display: flex;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text-2);
}
.caja-sel-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.caja-sel-card-meta i { font-size: 12px; color: var(--text-3); }

/* Botones de acción */
.caja-sel-card-actions {
  display: flex;
  gap: 8px;
}
.caja-sel-card-actions .btn-secondary {
  flex: 0 0 auto;
}
.caja-sel-card-actions .btn-primary {
  flex: 1;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Estado vacío */
.caja-sel-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-3);
  gap: 10px;
  text-align: center;
}
.caja-sel-empty i {
  font-size: 48px;
  opacity: 0.4;
}
.caja-sel-empty p {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}
.caja-sel-empty span {
  font-size: 12px;
}

/* Loading */
.caja-sel-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px;
  color: var(--text-3);
  font-size: 13px;
}
.caja-sel-spin {
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Botón "Cambiar Caja" en el ticket panel */
.cambiar-caja-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--blue-light);
  color: var(--blue);
  border: 1px solid var(--blue-mid);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.cambiar-caja-btn:hover { background: var(--blue-mid); }

/* ===========================
   MAESTRO DE PRODUCTOS
   =========================== */
#inv-view-maestro {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Topbar ─────────────────── */
.maestro-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.maestro-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.maestro-topbar-search {
  flex: 1;
  max-width: 480px;
}

/* Layout split ──────────── */
.maestro-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Panel izquierdo: lista ─── */
.maestro-list-pane {
  width: 340px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.maestro-list-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.maestro-list-filters {
  display: flex;
  gap: 8px;
}

.maestro-btn-nuevo {
  width: 100%;
  justify-content: center;
}

.maestro-lista {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

/* Item de la lista ────────── */
.maestro-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.1s;
  border-left: 3px solid transparent;
}

.maestro-item:hover { background: var(--surface-2); }

.maestro-item.selected {
  background: var(--blue-light);
  border-left-color: var(--blue);
}

.maestro-item-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

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

.maestro-item-nombre {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

.maestro-item-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.maestro-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

.maestro-item-precio {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-2);
}

/* Dot de stock ────────────── */
.maestro-stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.maestro-stock-dot.dot-ok  { background: #5b9f3b; }
.maestro-stock-dot.dot-low { background: var(--amber); }
.maestro-stock-dot.dot-out { background: var(--red); }

/* Badge inactivo ─────────── */
.maestro-badge-inactivo {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-3);
  border: 1px solid var(--border-md);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

/* Paginación ────────────── */
.paginacion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  justify-content: flex-end;
}
.pag-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  background: var(--bg-1);
  color: var(--text-2);
  cursor: pointer;
  font-size: 14px;
  transition: background .15s;
}
.pag-btn:hover:not(:disabled) { background: var(--bg-2); color: var(--accent); }
.pag-btn:disabled { opacity: .35; cursor: default; }
.pag-info {
  font-size: 12px;
  color: var(--text-3);
  min-width: 90px;
  text-align: center;
}
#maestro-paginacion .paginacion { justify-content: center; padding: 6px 8px; }

/* Contador de productos ──── */
.count-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  background: var(--bg-2);
  border: 1px solid var(--border-md);
  border-radius: 20px;
  padding: 1px 10px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0;
}

.maestro-count-label {
  font-size: 12px;
  color: var(--text-3);
  padding: 6px 12px 2px;
}

/* Estado vacío lista ─────── */
.maestro-lista-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  color: var(--text-3);
  gap: 8px;
  text-align: center;
}
.maestro-lista-empty i  { font-size: 36px; opacity: 0.4; }
.maestro-lista-empty p  { font-size: 13px; }

/* Panel derecho: formulario  */
.maestro-detail-pane {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
}

/* Placeholder vacío ─────── */
.maestro-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
  color: var(--text-3);
  gap: 10px;
  text-align: center;
  padding: 40px;
}
.maestro-empty-state i    { font-size: 52px; opacity: 0.3; }
.maestro-empty-state p    { font-size: 15px; font-weight: 600; color: var(--text-2); }
.maestro-empty-state span { font-size: 12px; }

/* Formulario de detalle ──── */
.maestro-form-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.maestro-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.maestro-form-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.maestro-form-meta {
  font-size: 12px;
  color: var(--text-3);
  display: block;
  margin-top: 3px;
}

/* Toggle activo ──────────── */
.maestro-toggle-activo {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
  white-space: nowrap;
  padding-top: 4px;
}
.maestro-toggle-activo input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--blue);
}

/* Cuerpo del formulario ──── */
.maestro-form-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.maestro-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
  margin-bottom: 12px;
}

/* Margen bruto ───────────── */
.maestro-margen-row {
  margin-top: 8px;
  font-size: 13px;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
}
.maestro-margen-row strong { font-weight: 700; font-size: 15px; }
.maestro-margen-label { color: var(--text-3); font-size: 12px; }

/* Footer del formulario ──── */
.maestro-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

/* Botón eliminar (destructivo) */
.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--red);
  border-radius: var(--radius);
  background: transparent;
  color: var(--red);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-danger:hover {
  background: var(--red-light);
}

/* ===========================
   ESTADÍSTICAS DE PRODUCTO
   =========================== */
.inv-form-stats {
  padding: 0 24px 20px;
}

.prod-stats-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.prod-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 200px;
  flex: 1;
}

.prod-stat-card.prod-stat-loading {
  color: var(--text-3);
  font-size: 13px;
  justify-content: center;
  min-width: unset;
}

.prod-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.prod-stat-icon.prod-stat-ventas {
  background: var(--blue-light);
  color: var(--blue);
}

.prod-stat-icon.prod-stat-ingresos {
  background: var(--green-light);
  color: var(--green);
}

.prod-stat-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.prod-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-3);
}

.prod-stat-value {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text);
  line-height: 1.2;
}

.prod-stat-sub {
  font-size: 11px;
  color: var(--text-3);
}

.prod-stat-spin {
  animation: spin 0.8s linear infinite;
}

/* ===========================
   PACK / EMBALAJE
   =========================== */

/* Caja de configuración del pack en el Maestro */
.pack-componente-box {
  background: var(--blue-light);
  border: 1px solid var(--blue-mid);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 6px;
}

/* Texto de ayuda al pie de la caja */
.pack-hint {
  font-size: 12px;
  color: var(--blue-dark);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--blue-mid);
  line-height: 1.5;
}

/* Combobox buscador de producto base */
.pack-search-wrap {
  position: relative;
}

.pack-search-wrap input[type="text"] {
  width: 100%;
}

.pack-search-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-height: 220px;
  overflow-y: auto;
  z-index: 200;
}

.pack-drop-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

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

.pack-drop-item:hover {
  background: var(--blue-light);
}

.pack-drop-nombre {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.pack-drop-meta {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
}

.pack-drop-empty {
  padding: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}

/* Badge "PACK" en la tabla de inventario */
.pack-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--blue-light);
  color: var(--blue-dark);
  border: 1px solid var(--blue-mid);
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.8;
}

/* Badge "PACK" superpuesto en el icono de la tarjeta del POS */
.prod-pack-tag {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--blue);
  color: #fff;
  line-height: 16px;
  pointer-events: none;
}

/* ===========================
   RECEPCIÓN DE MERCANCÍA
   =========================== */

.rec-layout {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 20px;
  height: calc(100vh - var(--topbar-h) - 80px);
  min-height: 0;
}

/* ── Formulario izquierdo ── */
.rec-form-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.rec-form-titulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rec-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}

/* Proveedor combobox */
.rec-prov-wrap {
  position: relative;
}

.rec-prov-wrap input[type="text"] {
  width: 100%;
}

/* Buscador de producto */
.rec-search-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 6px;
}

.rec-prod-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.rec-prod-wrap input[type="text"] {
  width: 100%;
}

.rec-num-input {
  width: 90px;
  flex-shrink: 0;
}

.rec-add-btn {
  flex-shrink: 0;
  height: 36px;
  width: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dropdown compartido (proveedor + producto) */
.rec-prov-dropdown,
.rec-prod-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-height: 220px;
  overflow-y: auto;
  z-index: 200;
}

.rec-drop-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

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

.rec-drop-item:hover { background: var(--blue-light); }

.rec-drop-nombre {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.rec-drop-meta {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
}

.rec-drop-empty {
  padding: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}

/* Lista de ítems */
.rec-items-list {
  flex: 1;
  overflow-y: auto;
  margin-top: 10px;
  min-height: 80px;
  max-height: 220px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.rec-empty-hint {
  text-align: center;
  padding: 24px;
  color: var(--text-3);
  font-size: 13px;
  line-height: 2;
}

.rec-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

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

.rec-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rec-item-nombre {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rec-item-codigo {
  font-size: 11px;
  color: var(--text-3);
}

.rec-item-nums {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  font-family: var(--font-mono);
}

.rec-item-subtotal {
  font-weight: 700;
  color: var(--text);
}

.rec-item-x { color: var(--text-3); }

/* Footer: total + botón confirmar */
.rec-footer {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.rec-total {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: var(--radius);
  border: 1px solid var(--border-md);
}

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

.rec-total-iva-row {
  font-size: 12px;
  color: var(--text-3);
  padding: 3px 0;
}

.rec-total-iva-row span:last-child {
  font-family: var(--font-mono);
}

.rec-total-divider {
  border-top: 1px solid var(--border-md);
  margin: 6px 0;
}

.rec-total-main-row {
  font-size: 13px;
  color: var(--text-2);
  padding: 3px 0;
}

.rec-total-main-row strong {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text);
}

/* ── Historial derecho ── */
.rec-hist-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.rec-hist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.rec-hist-head h3 {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rec-hist-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.rec-hist-search {
  flex: 1;
  min-width: 0;
}

.rec-hist-filters input[type="date"] {
  width: 130px;
  flex-shrink: 0;
}

.rec-hist-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rec-hist-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-3);
  font-size: 13px;
}

.rec-hist-empty i {
  font-size: 36px;
  display: block;
  margin-bottom: 12px;
  opacity: 0.4;
}

/* Tarjeta de recepción en el historial */
.rec-hist-card-row {
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  flex-shrink: 0;
}

.rec-hist-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  gap: 12px;
  user-select: none;
}

.rec-hist-row-head:hover { background: var(--surface-2); }

.rec-hist-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.rec-hist-num {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  background: var(--blue-light);
  color: var(--blue-dark);
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.rec-hist-prov {
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rec-hist-factura {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.rec-hist-row-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.rec-hist-fecha {
  font-size: 12px;
  color: var(--text-3);
}

.rec-hist-total {
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
}

.rec-hist-chevron {
  font-size: 14px;
  color: var(--text-3);
  transition: transform 0.2s;
  flex-shrink: 0;
}

/* Detalle expandido */
.rec-hist-detail {
  border-top: 1px solid var(--border);
  padding: 12px 14px;
  background: var(--surface-2);
}

.rec-hist-nota {
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rec-hist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 10px;
}

.rec-hist-table th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--text-3);
  padding: 4px 6px;
  border-bottom: 1px solid var(--border-md);
}

.rec-hist-table td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--border);
}

.rec-hist-table tr:last-child td { border-bottom: none; }

.rec-hist-detail-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-3);
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* Recepciones anuladas */
.rec-hist-anulada {
  opacity: 0.65;
}

.rec-hist-anulada .rec-hist-row-head:hover {
  background: var(--surface);
}

.rec-hist-badge-anulada {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--red-light);
  color: var(--red);
  border: 1px solid var(--red);
  line-height: 1.8;
  flex-shrink: 0;
}

.rec-hist-total--anulada {
  text-decoration: line-through;
  color: var(--text-3);
}

@media (max-width: 1100px) {
  .rec-layout {
    grid-template-columns: 1fr;
    height: auto;
    overflow-y: auto;
  }

  .rec-items-list {
    max-height: 180px;
  }
}

/* ═══════════════════════════════════════════════════
   CONFIGURACIÓN
   ═══════════════════════════════════════════════════ */

/* Layout: sidenav + contenido */
.config-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  height: 100%;
  overflow: hidden;
}

/* ── Sidenav ─────────────────────────────────────── */
.config-sidenav {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.config-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
  color: var(--text-2);
  text-align: left;
  transition: background .15s, color .15s;
  width: 100%;
}
.config-nav-btn i { font-size: 17px; flex-shrink: 0; }
.config-nav-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}
.config-nav-btn.active {
  background: var(--blue-light);
  color: var(--blue);
  font-weight: 600;
}

/* ── Área de contenido ───────────────────────────── */
.config-content {
  overflow-y: auto;
  padding: 28px 32px;
  background: var(--bg);
}

/* ── Encabezado de sección ───────────────────────── */
.cfg-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.cfg-section-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.cfg-section-desc {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 2px;
}
.cfg-header-btn {
  margin-left: auto;
  flex-shrink: 0;
}

.cfg-section-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}
.cfg-section-icon.blue  { background: var(--blue-light);  color: var(--blue); }
.cfg-section-icon.teal  { background: var(--teal-light);  color: var(--teal); }
.cfg-section-icon.amber { background: var(--amber-light); color: var(--amber); }
.cfg-section-icon.green { background: var(--green-light); color: var(--green); }

/* ── Formulario de configuración ─────────────────── */
.cfg-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  max-width: 680px;
}

.cfg-form-row {
  display: flex;
  gap: 14px;
}
.cfg-form-row .form-group { flex: 1; }

.cfg-form .form-group {
  margin-bottom: 16px;
}
.cfg-form label:not(.cfg-perm-switch) {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 5px;
}
.cfg-form input,
.cfg-form select,
.cfg-form textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-md);
  border-radius: 6px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  transition: border-color .15s, background .15s;
}
.cfg-form input:focus,
.cfg-form select:focus {
  outline: none;
  border-color: var(--blue-mid);
  background: var(--blue-light);
}
.cfg-form input:disabled {
  background: var(--surface-2);
  color: var(--text-3);
  cursor: not-allowed;
}
.cfg-form input:not([type="checkbox"]):not([type="radio"]):not(:placeholder-shown):not(:disabled) {
  border-color: var(--blue-mid);
  background: #EFF5FF;
}

.cfg-divider-label {
  position: relative;
  margin: 20px 0 8px;
  text-align: center;
}
.cfg-divider-label::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  border-top: 1px solid var(--border);
}
.cfg-divider-label span {
  position: relative;
  background: var(--surface);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
}

.cfg-hint {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 12px;
}
.cfg-req { color: var(--red); margin-left: 2px; }

.cfg-form-actions {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

/* ── Tablas ──────────────────────────────────────── */
.cfg-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.cfg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.cfg-table thead tr {
  background: var(--surface-2);
}
.cfg-table th {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-3);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.cfg-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.cfg-table tbody tr:last-child td { border-bottom: none; }
.cfg-table tbody tr:hover { background: var(--bg); }

.cfg-row-inactive td { opacity: .55; }
.cfg-row-inactive:hover { background: var(--surface) !important; }

.cfg-nombre  { font-weight: 600; color: var(--text); }
.cfg-muted   { color: var(--text-3); }
.cfg-chip    {
  display: inline-block;
  padding: 2px 8px;
  background: var(--surface-2);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-2);
}
.cfg-chip-uso {
  background: var(--green-light);
  color: var(--green);
}

.cfg-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.cfg-badge-admin  { background: var(--amber-light); color: var(--amber); }
.cfg-badge-cajero { background: var(--blue-light);  color: var(--blue); }

.cfg-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}
.cfg-status-dot::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cfg-status-dot.on  { color: var(--green); }
.cfg-status-dot.on::before  { background: var(--green); }
.cfg-status-dot.off { color: var(--text-3); }
.cfg-status-dot.off::before { background: var(--text-3); }

.cfg-actions-cell {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.cfg-btn-restore { color: var(--teal) !important; }

.cfg-empty {
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  padding: 32px 0 !important;
}

/* ── Loading / Error ─────────────────────────────── */
.cfg-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 14px;
  padding: 40px 0;
}
.cfg-loading i { font-size: 20px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.cfg-error {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
  background: var(--red-light);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
}

@media (max-width: 900px) {
  .config-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .config-sidenav {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 10px;
  }
  .config-nav-btn { width: auto; }
  .config-content { padding: 16px; }
}

/* ── Logo del negocio ────────────────────────────── */

/* Logo en pantalla de login */
.login-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
}

/* Sidebar: imagen de logo */
.sidebar-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

/* Home panel: imagen de logo */
.home-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
}

/* ── Toggle de permisos (modal usuario) ──────────────── */
.cfg-perm-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
  user-select: none;
}
.cfg-perm-switch input[type="checkbox"] { display: none; }

.cfg-perm-track {
  position: relative;
  width: 40px; height: 22px;
  background: var(--border-md);
  border-radius: 20px;
  flex-shrink: 0;
  transition: background .2s;
}
.cfg-perm-track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.cfg-perm-switch input:checked + .cfg-perm-track { background: var(--teal); }
.cfg-perm-switch input:checked + .cfg-perm-track::after { transform: translateX(18px); }

.cfg-perm-info { display: flex; flex-direction: column; gap: 2px; }
.cfg-perm-info strong { font-size: 14px; font-weight: 600; color: var(--text); }
.cfg-perm-info span   { font-size: 12px; color: var(--text-3); }

/* ── Botón de permiso en la tabla ────────────────────── */
.cfg-perm-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: opacity .15s, background .15s;
}
.cfg-perm-btn:hover { opacity: .8; }
.cfg-perm-btn.perm-on  { background: var(--teal-light);  color: var(--teal); }
.cfg-perm-btn.perm-off { background: var(--surface-2);   color: var(--text-3); }

/* Tarjeta de logo en configuración */
.cfg-logo-card {
  max-width: 680px;
}
.cfg-logo-row {
  display: flex;
  gap: 20px;
  align-items: center;
}
.cfg-logo-preview {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  border: 2px dashed var(--border-md);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color .2s;
}
.cfg-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cfg-logo-placeholder { font-size: 26px; color: var(--text-3); }
.cfg-logo-info { display: flex; flex-direction: column; gap: 6px; }
.cfg-label-sm { font-size: 13px; font-weight: 600; color: var(--text); }
.cfg-logo-btns { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.cfg-btn-del {
  padding: 7px 9px !important;
  color: var(--red) !important;
  border-color: var(--red-light) !important;
}
.cfg-btn-del:hover { background: var(--red-light) !important; }


/* ══════════════════════════════════════════════
   ADMINISTRACIÓN — Layout, Sidenav y Secciones
   ══════════════════════════════════════════════ */

.adm-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
}
.adm-nav {
  width: 180px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.adm-nav-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-3);
  padding: 0 8px 12px;
}
.adm-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  text-align: left;
  transition: background .15s, color .15s;
  width: 100%;
}
.adm-nav-btn i { font-size: 16px; flex-shrink: 0; }
.adm-nav-btn:hover  { background: var(--bg-2); color: var(--text); }
.adm-nav-btn.active { background: var(--teal-light); color: var(--teal); font-weight: 600; }

.adm-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Period bar (reutiliza rep-period-bar del módulo reportes, o la redefine) */
.adm-date-input {
  padding: 5px 8px;
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
}

.adm-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 0;
  color: var(--text-3);
  font-size: 14px;
}
.adm-loading i { font-size: 20px; animation: spin .8s linear infinite; }

/* Toolbar gastos */
.adm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.adm-total-label { font-size: 13px; color: var(--text-2); margin-right: 8px; }
.adm-total-val   { font-size: 18px; font-weight: 700; color: var(--red); }

/* Chips de categorías */
.adm-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.adm-cat-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
}
.adm-cat-chip i      { color: var(--text-3); }
.adm-cat-chip strong { font-weight: 600; }
.adm-cat-pct         { color: var(--text-3); }

/* Lista de categorías */
.adm-cat-lista { list-style: none; margin: 0; padding: 0; }
.adm-cat-item  {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.adm-cat-item span { flex: 1; }

/* Estado de Resultados */
.adm-resultado-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  max-width: 600px;
}
.adm-resultado-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.adm-resultado-header h3 { font-size: 16px; font-weight: 700; }

.adm-res-tabla { display: flex; flex-direction: column; }
.adm-res-fila {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.adm-res-fila:last-child   { border-bottom: none; }
.adm-res-desc              { color: var(--text-3); font-size: 13px; }
.adm-res-subtotal          { font-weight: 500; border-top: 2px solid var(--border-md); }
.adm-res-gasto             { color: var(--red); }
.adm-res-total             { font-size: 16px; font-weight: 700; padding: 14px 0; border-top: 2px solid var(--border-md); }
.adm-res-positivo          { color: var(--teal); }
.adm-res-negativo          { color: var(--red); }

.adm-res-desglose {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.adm-res-desglose h4 { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 10px; }
.adm-desglose-fila {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 5px 0;
  color: var(--text-2);
}

/* Auditoría */
.adm-audit-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
}
.adm-audit-tabs .tab-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  transition: color .15s;
}
.adm-audit-tabs .tab-btn:hover  { color: var(--text); }
.adm-audit-tabs .tab-btn.active { color: var(--teal); border-bottom-color: var(--teal); font-weight: 600; }

.adm-audit-resumen { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-audit-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid var(--border-md);
}
.adm-chip-red { background: var(--red-light); color: var(--red); border-color: var(--red-light); }
.adm-audit-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 0;
  color: var(--text-3);
}
.adm-audit-empty i { font-size: 32px; color: var(--teal); }

/* ══════════════════════════════════════════════
   REPORTES & ANÁLISIS — Layout y Sidenav
   ══════════════════════════════════════════════ */

.rep-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* Sidenav */
.rep-nav {
  width: 180px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rep-nav-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-3);
  padding: 0 8px 12px;
}
.rep-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  text-align: left;
  transition: background .15s, color .15s;
  width: 100%;
}
.rep-nav-btn i { font-size: 16px; flex-shrink: 0; }
.rep-nav-btn:hover  { background: var(--bg-2); color: var(--text); }
.rep-nav-btn.active { background: var(--blue-light); color: var(--blue-mid); font-weight: 600; }

/* Content area */
.rep-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Period bar */
.rep-period-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rep-custom-range {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rep-custom-range label { font-size: 12px; color: var(--text-2); }
.rep-custom-range input[type="date"] {
  padding: 5px 8px;
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
}

/* Loading state */
.rep-loading-full {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 0;
  color: var(--text-3);
  font-size: 14px;
}
.rep-loading-full i { font-size: 20px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Sección Gastos ──────────────────────────── */
.gastos-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.gastos-total-label { font-size: 13px; color: var(--text-2); margin-right: 8px; }
.gastos-total-val   { font-size: 18px; font-weight: 700; color: var(--red); }

.gastos-por-cat {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gasto-cat-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
}
.gasto-cat-chip i      { color: var(--text-3); }
.gasto-cat-chip strong { font-weight: 600; }
.gasto-cat-pct         { color: var(--text-3); }

/* Modal categorías */
.cat-gasto-lista { list-style: none; margin: 0; padding: 0; }
.cat-gasto-item  {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.cat-gasto-item span { flex: 1; }

/* ── Sección Resultado ───────────────────────── */
.resultado-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  max-width: 600px;
}
.resultado-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.resultado-tabla { display: flex; flex-direction: column; gap: 0; }
.res-fila {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.res-fila:last-child { border-bottom: none; }
.res-ingreso  { color: var(--text); }
.res-desc     { color: var(--text-3); font-size: 13px; }
.res-subtotal { font-weight: 500; border-top: 2px solid var(--border-md); }
.res-gasto    { color: var(--red); }
.res-total    { font-size: 16px; font-weight: 700; padding: 14px 0; border-top: 2px solid var(--border-md); }
.res-positivo { color: var(--teal); }
.res-negativo { color: var(--red); }

.resultado-desglose {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.resultado-desglose h4 { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 10px; }
.res-desglose-fila {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 5px 0;
  color: var(--text-2);
}

/* ── Sección Auditoría ───────────────────────── */
.audit-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.audit-tabs .tab-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  transition: color .15s;
}
.audit-tabs .tab-btn:hover  { color: var(--text); }
.audit-tabs .tab-btn.active { color: var(--blue-mid); border-bottom-color: var(--blue-mid); font-weight: 600; }

.audit-resumen {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.audit-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid var(--border-md);
}
.audit-chip-red { background: var(--red-light); color: var(--red); border-color: var(--red-light); }

.audit-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 0;
  color: var(--text-3);
}
.audit-empty i { font-size: 32px; color: var(--teal); }