/* ERP TechStore Colombia — Modern White Design System */

:root {
  --sidebar-width: 236px;
  --erp-shell-header-height: 3.75rem;
  --erp-shell-gutter: 1.15rem;
  --surface: #ffffff;
  --canvas: #f4f7fb;
  --ink: #0b1220;
  --ink-secondary: #64748b;
  --ink-muted: #94a3b8;
  --accent-color: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-dark: #3b82f6;
  --accent-soft: rgba(37, 99, 235, 0.08);
  --accent-glow: rgba(37, 99, 235, 0.12);
  --border-subtle: rgba(15, 23, 42, 0.09);
  --border-hairline: rgba(15, 23, 42, 0.055);
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.055);
  --shadow-md: 0 10px 36px -10px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 20px 56px -14px rgba(15, 23, 42, 0.14);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  /* Type scale */
  --type-display: 1.5rem;
  --type-page: 1.25rem;
  --type-title: 1.0625rem;
  --type-card: 0.9375rem;
  --type-body: 0.875rem;
  --type-caption: 0.75rem;
  --type-micro: 0.6875rem;
  /* Alias ERP = design system (una sola familia) */
  --erp-ink: var(--ink);
  --erp-muted: var(--ink-secondary);
  --erp-line: var(--border-subtle);
  --erp-surface: var(--surface);
  --erp-accent: var(--accent-color);
  --erp-accent-soft: var(--accent-soft);
  --erp-radius: var(--radius-md);
  --ease-fluid: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--canvas);
  background-image:
    radial-gradient(ellipse 90% 60% at 10% -5%, color-mix(in srgb, var(--accent-color) 4.5%, transparent), transparent 55%),
    radial-gradient(ellipse 70% 50% at 95% 105%, color-mix(in srgb, var(--accent-dark) 3.5%, transparent), transparent 50%);
  background-attachment: fixed;
  color: var(--ink);
  font-size: var(--type-body);
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-size: var(--type-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.2;
  color: var(--ink);
}

h2, .h2 {
  font-size: var(--type-page);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--ink);
}

h3, .h3 {
  font-size: var(--type-title);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
  color: var(--ink);
}

h4, .h4 {
  font-size: var(--type-card);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
}

.text-secondary {
  color: var(--ink-secondary) !important;
  line-height: 1.45;
}

body.theme-no-mesh {
  background-image: none !important;
}

[data-bs-theme="dark"] {
  color-scheme: dark;
}

[data-bs-theme="dark"] body {
  background-color: var(--canvas) !important;
  background-image:
    radial-gradient(ellipse 80% 55% at 0% -10%, color-mix(in srgb, var(--accent-color) 8%, transparent), transparent 58%),
    radial-gradient(ellipse 60% 45% at 100% 110%, color-mix(in srgb, var(--accent-dark) 6%, transparent), transparent 52%);
  color: var(--ink) !important;
}

body.theme-no-mesh[data-bs-theme="dark"],
[data-bs-theme="dark"] body.theme-no-mesh {
  background-image: none !important;
}

/* Custom Scrollbars Global */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.18);
  border-radius: 10px;
  transition: background 0.3s var(--ease-fluid);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.35);
}

/* Sidebar — luminous white rail */
.navbar-vertical.navbar-expand-lg {
  width: var(--sidebar-width) !important;
  box-shadow: 1px 0 0 var(--border-subtle), var(--shadow-sm) !important;
  border-right: none !important;
  background: var(--surface) !important;
}

[data-bs-theme="dark"] .navbar-vertical.navbar-expand-lg {
  box-shadow: 1px 0 0 var(--border-hairline) !important;
  background: color-mix(in srgb, var(--surface) 96%, #000) !important;
}

@media (min-width: 992px) {
  .page-wrapper {
    margin-left: var(--sidebar-width) !important;
    transition: margin-left 0.4s var(--ease-fluid);
  }
}

/* Brand header styling inside Sidebar */
.navbar-brand {
  padding: 0 1.25rem !important;
  min-height: var(--erp-shell-header-height);
  height: var(--erp-shell-header-height);
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: 0.75rem !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
}

.navbar-brand .fs-2 {
  font-size: 1.15rem !important;
  letter-spacing: -0.03em;
}

.navbar-brand .fs-3 {
  font-size: 1.15rem !important;
  font-weight: 500 !important;
  color: var(--ink-secondary) !important;
}

[data-bs-theme="dark"] .navbar-brand {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Sidebar Logo */
.sidebar-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: cover;
  border: 1.5px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease-fluid);
}

[data-bs-theme="dark"] .sidebar-logo {
  border-color: var(--accent-dark);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.sidebar-logo:hover {
  transform: scale(1.12) rotate(8deg);
}

.sidebar-logo:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-sm);
}

/* Sidebar nav — signature left accent on active */
.navbar-vertical .navbar-nav .nav-item {
  margin: 0.08rem 0.55rem !important;
  position: relative;
}

.navbar-vertical .navbar-nav .nav-link {
  border-radius: var(--radius-md) !important;
  padding: 0.48rem 0.7rem !important;
  transition: background-color 0.22s var(--ease-fluid), color 0.22s var(--ease-fluid), box-shadow 0.22s var(--ease-fluid) !important;
  font-weight: 600 !important;
  color: var(--ink-secondary) !important;
  font-size: 0.78rem !important;
  position: relative;
  min-height: 2.35rem;
}

.navbar-vertical .navbar-nav .nav-link-icon {
  margin-right: 0.55rem !important;
  color: var(--ink-muted) !important;
  transition: color 0.25s var(--ease-fluid) !important;
}

.navbar-vertical .navbar-nav .nav-link-icon .ti {
  font-size: 1.1rem !important;
}

.navbar-vertical .nav-item.nav-section {
  margin: 0.65rem 0.55rem 0.15rem !important;
  pointer-events: none;
}

.navbar-vertical .nav-section-label {
  display: block;
  margin: 0;
  padding: 0 0.15rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.2;
}

.navbar-vertical .nav-item.nav-section:first-child {
  margin-top: 0.2rem !important;
}

.navbar-vertical .navbar-nav .nav-item.active .nav-link {
  background-color: var(--accent-soft) !important;
  color: var(--accent-color) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

body.theme-no-nav-bar .navbar-vertical .navbar-nav .nav-item.active .nav-link::before {
  display: none;
}

.navbar-vertical .navbar-nav .nav-item.active .nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 58%;
  border-radius: 0 3px 3px 0;
  background: var(--accent-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-color) 35%, transparent);
  transition: height 0.22s var(--ease-fluid);
}

.navbar-vertical .navbar-nav .nav-item.active .nav-link-icon,
.navbar-vertical .navbar-nav .nav-link:hover .nav-link-icon {
  color: var(--accent-color) !important;
}

.navbar-vertical .navbar-nav .nav-link:hover:not(.active) {
  background-color: rgba(15, 23, 42, 0.03) !important;
  color: var(--ink) !important;
  transform: none;
}

.navbar-vertical .navbar-nav .nav-item:not(.active) .nav-link:hover {
  background-color: rgba(15, 23, 42, 0.03) !important;
  color: var(--ink) !important;
}

[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav-item.active .nav-link,
[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav-link:hover {
  background-color: rgba(59, 130, 246, 0.1) !important;
  color: var(--accent-dark) !important;
}

[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav-item.active .nav-link::before {
  background: var(--accent-dark);
}

[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav-item:not(.active) .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav-item.active .nav-link-icon,
[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav-link:hover .nav-link-icon {
  color: var(--accent-dark) !important;
}

/* Cards — crisp white surfaces with clearer separation from canvas */
.card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-xs) !important;
  background-color: var(--surface);
  transition: border-color 0.3s var(--ease-fluid), box-shadow 0.3s var(--ease-fluid);
}

body.card-style-flat .card {
  box-shadow: none !important;
}

body.card-style-bordered .card {
  box-shadow: none !important;
  border: 1px solid var(--border-subtle) !important;
}

body.card-style-elevated .card {
  box-shadow: var(--shadow-xs) !important;
  border-color: var(--border-hairline) !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.card-title {
  font-size: var(--type-card) !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em;
  color: var(--ink) !important;
  margin-bottom: 0 !important;
  line-height: 1.3;
}

[data-bs-theme="dark"] .card {
  border: 1px solid var(--border-hairline) !important;
  box-shadow: var(--shadow-sm) !important;
  background-color: var(--surface) !important;
}

/* KPI Cards */
.card-kpi {
  transition: transform 0.3s var(--ease-fluid), box-shadow 0.3s var(--ease-fluid), border-color 0.3s var(--ease-fluid) !important;
}

.card-kpi:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent-color) 18%, var(--border-subtle)) !important;
  box-shadow: var(--shadow-md) !important;
}

.card-kpi .avatar {
  width: 2.75rem !important;
  height: 2.75rem !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
}

.card-kpi .avatar .ti {
  font-size: 1.35rem !important;
}

.card-kpi .font-weight-medium {
  font-variant-numeric: tabular-nums;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
  color: var(--ink) !important;
}

.card-kpi-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.card-kpi-link:hover,
.card-kpi-link:focus,
.card-kpi-link:active {
  color: inherit;
  text-decoration: none;
}

.card-kpi-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-color) 55%, transparent);
  outline-offset: 2px;
}

.card-kpi-link .kpi-action-hint {
  opacity: 0;
  transition: opacity 0.25s var(--ease-fluid), transform 0.25s var(--ease-fluid);
  font-size: 0.85rem;
  color: var(--tblr-secondary);
}

.card-kpi-link:hover .kpi-action-hint {
  opacity: 1;
  transform: translate(2px, -2px);
}

/* Tables */
.table thead th {
  font-size: var(--type-micro) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  background: color-mix(in srgb, var(--canvas) 55%, var(--surface)) !important;
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
}

.table tbody td {
  font-size: var(--type-body);
  color: var(--ink);
  border-color: var(--border-hairline) !important;
  vertical-align: middle;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

/* Interactive Table Rows */
.table tbody tr {
  transition: background-color 0.18s var(--ease-fluid);
}

.table tbody tr:hover {
  background-color: color-mix(in srgb, var(--accent-soft) 55%, transparent) !important;
}

/* Elegant Light-theme Status Badges */
.badge {
  font-weight: 600 !important;
  border-radius: 50px !important;
  padding: 0.3em 0.7em !important;
  letter-spacing: 0.02em;
  font-size: 0.6875rem !important;
  box-shadow: none !important;
  border: 1px solid transparent;
  line-height: 1.25;
  vertical-align: middle;
}

.badge-recibido,
.badge-status-info {
  background-color: color-mix(in srgb, var(--accent-color) 10%, transparent) !important;
  color: var(--accent-color) !important;
  border: 1px solid color-mix(in srgb, var(--accent-color) 18%, transparent) !important;
}

.badge-diagnostico,
.badge-status-warning {
  background-color: color-mix(in srgb, var(--color-warning, #d97706) 10%, transparent) !important;
  color: var(--color-warning, #d97706) !important;
  border: 1px solid color-mix(in srgb, var(--color-warning, #d97706) 18%, transparent) !important;
}

.badge-reparacion {
  background-color: rgba(139, 92, 246, 0.1) !important;
  color: #7c3aed !important;
  border: 1px solid rgba(139, 92, 246, 0.18) !important;
}

.badge-listo,
.badge-status-success {
  background-color: color-mix(in srgb, var(--color-success, #059669) 10%, transparent) !important;
  color: var(--color-success, #059669) !important;
  border: 1px solid color-mix(in srgb, var(--color-success, #059669) 18%, transparent) !important;
}

.badge-entregado,
.badge-status-neutral {
  background-color: rgba(71, 85, 105, 0.1) !important;
  color: #334155 !important;
  border: 1px solid rgba(71, 85, 105, 0.16) !important;
}

.badge-cancelado,
.badge-status-danger {
  background-color: color-mix(in srgb, var(--color-danger, #dc2626) 10%, transparent) !important;
  color: var(--color-danger, #dc2626) !important;
  border: 1px solid color-mix(in srgb, var(--color-danger, #dc2626) 18%, transparent) !important;
}

/* Traffic light colors for Stock alerts */
.stock-ok { color: var(--color-success, #10b981); font-weight: 600; }
.stock-warning { color: var(--color-warning, #f59e0b); font-weight: 600; }
.stock-danger { color: var(--color-danger, #ef4444); font-weight: 600; }

/* Haptic Glow Focus for Inputs & Selects */
.form-control, .form-select {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-subtle) !important;
  padding: 0.55rem 0.8rem !important;
  transition: border-color 0.22s var(--ease-fluid), box-shadow 0.22s var(--ease-fluid), background-color 0.22s var(--ease-fluid) !important;
  background-color: var(--surface);
  color: var(--ink);
  font-size: 0.875rem;
  box-shadow: none;
  min-height: 2.35rem;
}

.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
  border-color: color-mix(in srgb, var(--ink) 16%, transparent) !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  outline: none;
}

.form-control:disabled,
.form-select:disabled {
  opacity: 0.65;
  background-color: color-mix(in srgb, var(--canvas) 70%, var(--surface)) !important;
  cursor: not-allowed;
}

.form-label {
  font-size: var(--type-caption);
  font-weight: 600;
  color: var(--ink-secondary);
  margin-bottom: 0.3rem;
  letter-spacing: 0.01em;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: color-mix(in srgb, var(--surface) 88%, #000) !important;
  border-color: var(--border-subtle) !important;
  color: var(--ink) !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: color-mix(in srgb, var(--surface) 92%, #000) !important;
  color: var(--ink) !important;
}

[data-bs-theme="dark"] .badge-entregado,
[data-bs-theme="dark"] .badge-status-neutral {
  background-color: rgba(148, 163, 184, 0.12) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

[data-bs-theme="dark"] .btn-outline-secondary {
  background: color-mix(in srgb, var(--surface) 42%, transparent) !important;
  border-color: var(--border-hairline) !important;
  color: var(--ink-secondary) !important;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background: color-mix(in srgb, var(--accent-color) 10%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--accent-color) 24%, var(--border-hairline)) !important;
  color: var(--ink) !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-subtle)) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  background-color: color-mix(in srgb, var(--surface) 92%, #000) !important;
  color: var(--ink) !important;
}

[data-bs-theme="dark"] .form-control-color,
[data-bs-theme="dark"] .theme-color-input {
  border: 1px solid var(--border-subtle) !important;
  background: color-mix(in srgb, var(--surface) 90%, #000) !important;
  padding: 0.2rem !important;
}

[data-bs-theme="dark"] .text-secondary {
  color: var(--ink-secondary) !important;
}

[data-bs-theme="dark"] .table thead th {
  background: color-mix(in srgb, var(--surface) 70%, var(--canvas)) !important;
  color: var(--ink-muted) !important;
  border-bottom-color: var(--border-hairline) !important;
}

[data-bs-theme="dark"] .table tbody td {
  color: var(--ink) !important;
  border-color: var(--border-hairline) !important;
}

[data-bs-theme="dark"] .table tbody tr:hover {
  background-color: color-mix(in srgb, var(--accent-color) 7%, transparent) !important;
}

[data-bs-theme="dark"] .page-body {
  background-color: var(--canvas);
  background-image:
    radial-gradient(ellipse 80% 55% at 0% 0%, color-mix(in srgb, var(--accent-color) 6%, transparent), transparent 58%),
    radial-gradient(ellipse 60% 45% at 100% 100%, color-mix(in srgb, var(--accent-dark) 5%, transparent), transparent 52%);
}

[data-bs-theme="dark"] body.theme-no-mesh .page-body {
  background-image: none;
}

[data-bs-theme="dark"] .page-wrapper > .navbar.erp-topbar,
[data-bs-theme="dark"] .page-wrapper > .navbar {
  background: color-mix(in srgb, var(--surface) 90%, transparent) !important;
  border-bottom-color: var(--border-hairline) !important;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent-color) 10%, transparent) !important;
}

[data-bs-theme="dark"] .erp-module .nav-tabs .nav-link {
  color: var(--ink-secondary) !important;
}

[data-bs-theme="dark"] .erp-module .nav-tabs .nav-link:hover {
  color: var(--ink) !important;
  background: color-mix(in srgb, var(--accent-color) 8%, transparent) !important;
}

[data-bs-theme="dark"] .erp-module .nav-tabs .nav-link.active {
  color: var(--accent-color) !important;
  background: var(--accent-soft) !important;
}

[data-bs-theme="dark"] .theme-preset-card {
  background: var(--surface);
  border-color: var(--border-hairline);
  color: var(--ink);
}

[data-bs-theme="dark"] .theme-preset-card:hover,
[data-bs-theme="dark"] .theme-preset-card.active {
  border-color: color-mix(in srgb, var(--accent-color) 40%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-color) 8%, var(--surface));
}

[data-bs-theme="dark"] .theme-preview-panel {
  background: var(--surface);
  border-color: var(--border-hairline);
}

[data-bs-theme="dark"] .theme-preview-mode-label {
  color: var(--ink-secondary);
}

.theme-preview-mock[data-preview-theme="dark"] .theme-preview-sidebar,
.theme-preview-mock[data-preview-theme="dark"] .theme-preview-card,
.theme-preview-mock[data-preview-theme="dark"] .theme-preview-input {
  border-color: var(--preview-border, var(--border-hairline));
}

/* Tabler input-icon: restore left/right padding overridden above */
.input-icon > .form-control:not(:first-child),
.input-icon > .form-select:not(:first-child) {
  padding-left: 2.5rem !important;
}

.input-icon > .form-control:not(:last-child),
.input-icon > .form-select:not(:last-child) {
  padding-right: 2.5rem !important;
}

.input-icon > .form-control-lg:not(:first-child),
.input-icon > .form-select-lg:not(:first-child) {
  padding-left: 3rem !important;
}

/* Buttons */
.btn {
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 0.55rem 1.1rem !important;
  transition: background-color 0.22s var(--ease-fluid), border-color 0.22s var(--ease-fluid), box-shadow 0.22s var(--ease-fluid), color 0.22s var(--ease-fluid), transform 0.15s var(--ease-fluid) !important;
  letter-spacing: -0.01em;
}

.btn:active:not(:disabled):not(.disabled) {
  transform: scale(0.97) !important;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

.btn-primary {
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color) 22%, transparent) !important;
  color: #fff !important;
}

.btn-primary:hover:not(:disabled):not(.disabled) {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-color) 30%, transparent) !important;
}

.btn-primary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-color) 55%, transparent);
  outline-offset: 2px;
}

.btn-outline-secondary {
  border-color: var(--border-subtle) !important;
  color: var(--ink-secondary) !important;
  background: var(--surface) !important;
}

.btn-outline-secondary:hover:not(:disabled):not(.disabled) {
  background: color-mix(in srgb, var(--ink) 3.5%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--ink) 14%, transparent) !important;
  color: var(--ink) !important;
}

.btn-ghost-secondary {
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--ink-secondary) !important;
  box-shadow: none !important;
}

.btn-ghost-secondary:hover:not(:disabled):not(.disabled) {
  background: color-mix(in srgb, var(--ink) 4%, transparent) !important;
  color: var(--ink) !important;
  border-color: transparent !important;
}

.btn .spinner-border {
  width: 0.9rem;
  height: 0.9rem;
  border-width: 0.12em;
  vertical-align: -0.1em;
}

/* Login — split panel: acceso (izq) + almacén animado (der); colores vía theme.js */
.login-page-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, var(--login-accent-soft, var(--accent-soft)), transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 80%, color-mix(in srgb, var(--login-ink, var(--ink)) 6%, transparent), transparent 50%),
    var(--login-canvas, var(--canvas));
}

.login-page-wrap.page {
  margin: 0 !important;
  padding: 1.5rem !important;
}

.login-page {
  width: 100%;
  max-width: 980px;
}

.login-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  min-height: 560px;
  background: var(--login-surface, var(--surface));
  border-radius: var(--login-radius-xl, var(--radius-xl, 22px));
  overflow: hidden;
  box-shadow: var(--login-shadow-lg, var(--shadow-lg));
}

/* —— Formulario (izquierda) —— */
.login-panel__form {
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2.75rem 2rem;
}

.login-panel__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.25rem;
}

.login-panel__logo-mark {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--login-accent, var(--accent-color));
  font-size: 1.4rem;
  background: var(--login-accent-soft, var(--accent-soft));
  border-radius: var(--login-radius-md, var(--radius-md, 12px));
}

.login-panel__logo-mark--has-img {
  width: auto;
  height: auto;
  min-width: 0;
  max-width: 200px;
  max-height: 64px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.login-panel__logo-img {
  display: block;
  max-width: 200px;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0;
}

.login-panel__stage-brand {
  position: absolute;
  top: 1.35rem;
  left: 1.5rem;
  z-index: 2;
  pointer-events: none;
}

.login-panel__stage-logo {
  display: block;
  max-height: 40px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.login-panel__product {
  font-size: 1rem;
  font-weight: 700;
  color: var(--login-ink, var(--ink));
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.login-panel__company {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--login-muted, var(--ink-secondary));
  margin-top: 0.15rem;
  letter-spacing: 0.01em;
}

.login-panel__welcome {
  margin-bottom: 1.85rem;
}

.login-panel__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--login-accent, var(--accent-color));
}

.login-panel__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--login-ink, var(--ink));
  letter-spacing: -0.035em;
  margin: 0 0 0.4rem;
  line-height: 1.12;
}

.login-panel__subtitle {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--login-muted, var(--ink-secondary));
  line-height: 1.5;
  max-width: 26ch;
}

.login-panel__error {
  margin-bottom: 1rem;
  padding: 0.65rem 0.85rem;
  font-size: 0.8125rem;
  color: var(--login-danger, var(--color-danger));
  background: color-mix(in srgb, var(--login-danger, var(--color-danger)) 8%, var(--login-surface, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--login-danger, var(--color-danger)) 25%, transparent);
  border-radius: var(--login-radius-md, var(--radius-md, 10px));
}

.login-panel__form-fields {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  flex: 1;
}

.login-panel__field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.login-panel__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--login-muted, var(--ink-secondary));
}

.login-panel__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.login-panel__input-icon {
  position: absolute;
  left: 0.95rem;
  font-size: 1.05rem;
  color: var(--ink-muted, #94a3b8);
  pointer-events: none;
  transition: color 0.15s;
}

.login-panel__input-wrap:focus-within .login-panel__input-icon {
  color: var(--login-accent, var(--accent-color));
}

.login-panel__input {
  width: 100%;
  padding: 0.78rem 0.95rem 0.78rem 2.65rem;
  font-size: 0.9375rem;
  color: var(--login-ink, var(--ink));
  background: var(--login-input-bg, var(--canvas));
  border: 1.5px solid transparent;
  border-radius: var(--login-radius-md, var(--radius-md, 12px));
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.login-panel__input::placeholder {
  color: var(--ink-muted, #94a3b8);
}

.login-panel__input:hover {
  background: var(--login-input-hover, var(--canvas));
}

.login-panel__input:focus {
  outline: none;
  background: var(--login-surface, var(--surface));
  border-color: var(--login-accent, var(--accent-color));
  box-shadow: 0 0 0 3px var(--login-accent-ring, var(--accent-glow));
}

.login-panel__submit {
  margin-top: 0.5rem;
  width: 100%;
  padding: 0.88rem 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--login-accent, var(--accent-color)) 0%, var(--login-accent-hover, var(--accent-hover)) 100%);
  border: none;
  border-radius: var(--login-radius-md, var(--radius-md, 12px));
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 14px var(--login-accent-ring, var(--accent-glow));
}

.login-panel__submit i {
  font-size: 1.1rem;
  transition: transform 0.2s;
}

.login-panel__submit:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--login-accent-hover, var(--accent-hover)) 0%, var(--login-accent, var(--accent-color)) 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--login-accent-ring, var(--accent-glow));
}

.login-panel__submit:hover:not(:disabled) i {
  transform: translateX(3px);
}

.login-panel__submit:disabled {
  opacity: 0.72;
  cursor: wait;
}

.login-panel__submit:focus-visible {
  outline: 2px solid var(--login-accent, var(--accent-color));
  outline-offset: 2px;
}

.login-panel__footer {
  margin-top: auto;
  padding-top: 1.75rem;
  font-size: 0.75rem;
  color: var(--ink-muted, #94a3b8);
  text-align: center;
}

/* —— Escena inventario (derecha) —— */
.login-panel__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem 2rem 2.25rem;
  background: var(--login-stage, var(--ink));
  overflow: hidden;
}

.login-panel__stage-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 20%, transparent 75%);
  pointer-events: none;
}

.login-panel__stage-glow {
  position: absolute;
  top: 15%;
  left: 50%;
  width: 280px;
  height: 280px;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--login-stage-glow, var(--accent-glow)) 0%, transparent 68%);
  filter: blur(40px);
  pointer-events: none;
  animation: login-glow-pulse 5s ease-in-out infinite;
}

@keyframes login-glow-pulse {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.85; transform: translateX(-50%) scale(1.08); }
}

.login-inv {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0 1.5rem;
  min-height: 280px;
}

.login-inv__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.5rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  background: var(--login-stage-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.login-inv__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.7);
  animation: login-live-pulse 2s ease-in-out infinite;
}

@keyframes login-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

.login-inv__warehouse {
  position: relative;
  width: 100%;
  max-width: 240px;
}

.login-inv__rack {
  position: relative;
  padding: 0.75rem;
  background: var(--login-stage-surface);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  backdrop-filter: blur(8px);
}

.login-inv__shelf {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.login-inv__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}

.login-inv__slot {
  position: relative;
  aspect-ratio: 1.15;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow: hidden;
}

.login-inv__box {
  position: absolute;
  inset: 18% 14% 28%;
  background: linear-gradient(145deg, var(--login-accent-soft, var(--accent-soft)), color-mix(in srgb, var(--login-accent, var(--accent-color)) 55%, transparent));
  border-radius: 4px;
  transform: scaleY(0);
  transform-origin: bottom;
  opacity: 0;
  animation: login-box-fill 4s ease-in-out infinite;
}

.login-inv__qty {
  position: absolute;
  bottom: 4px;
  right: 5px;
  font-size: 0.5625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--login-accent-glow, var(--accent-dark));
  opacity: 0;
  animation: login-qty-flash 4s ease-in-out infinite;
}

.login-inv__slot--r1c1 .login-inv__box { animation-delay: 0s; }
.login-inv__slot--r1c2 .login-inv__box { animation-delay: 0.4s; }
.login-inv__slot--r1c3 .login-inv__box { animation-delay: 0.8s; }
.login-inv__slot--r2c1 .login-inv__box { animation-delay: 1.2s; }
.login-inv__slot--r2c2 .login-inv__box { animation-delay: 1.6s; }
.login-inv__slot--r2c3 .login-inv__box { animation-delay: 2s; }
.login-inv__slot--r3c1 .login-inv__box { animation-delay: 2.4s; }
.login-inv__slot--r3c2 .login-inv__box { animation-delay: 2.8s; }
.login-inv__slot--r3c3 .login-inv__box { animation-delay: 3.2s; }

.login-inv__slot--r1c1 .login-inv__qty { animation-delay: 0.8s; }
.login-inv__slot--r1c2 .login-inv__qty { animation-delay: 1.2s; }
.login-inv__slot--r1c3 .login-inv__qty { animation-delay: 1.6s; }
.login-inv__slot--r2c1 .login-inv__qty { animation-delay: 2s; }
.login-inv__slot--r2c2 .login-inv__qty { animation-delay: 2.4s; }
.login-inv__slot--r2c3 .login-inv__qty { animation-delay: 2.8s; }
.login-inv__slot--r3c1 .login-inv__qty { animation-delay: 3.2s; }
.login-inv__slot--r3c2 .login-inv__qty { animation-delay: 3.6s; }
.login-inv__slot--r3c3 .login-inv__qty { animation-delay: 4s; }

.login-inv__slot--r1c1 .login-inv__qty::after { content: '×24'; }
.login-inv__slot--r1c2 .login-inv__qty::after { content: '×8'; }
.login-inv__slot--r1c3 .login-inv__qty::after { content: '×15'; }
.login-inv__slot--r2c1 .login-inv__qty::after { content: '×6'; }
.login-inv__slot--r2c2 .login-inv__qty::after { content: '×32'; }
.login-inv__slot--r2c3 .login-inv__qty::after { content: '×11'; }
.login-inv__slot--r3c1 .login-inv__qty::after { content: '×3'; }
.login-inv__slot--r3c2 .login-inv__qty::after { content: '×19'; }
.login-inv__slot--r3c3 .login-inv__qty::after { content: '×7'; }

@keyframes login-box-fill {
  0%, 8% { transform: scaleY(0); opacity: 0; }
  18%, 55% { transform: scaleY(1); opacity: 1; }
  70%, 100% { transform: scaleY(0.3); opacity: 0.4; }
}

@keyframes login-qty-flash {
  0%, 20% { opacity: 0; }
  28%, 50% { opacity: 1; }
  65%, 100% { opacity: 0; }
}

.login-inv__scanner {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--login-accent-glow, var(--accent-dark)), transparent);
  box-shadow: 0 0 12px var(--login-accent-ring, var(--accent-glow));
  animation: login-scanner-sweep 3.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

.login-inv__beam {
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--login-accent-glow, var(--accent-dark)) 50%, transparent), transparent);
  transform: translateX(-50%);
  animation: login-beam-flicker 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes login-scanner-sweep {
  0%, 100% { top: 0.75rem; opacity: 0.4; }
  50% { top: calc(100% - 0.75rem); opacity: 0.9; }
}

@keyframes login-beam-flicker {
  0%, 100% { opacity: 0.2; }
  40%, 60% { opacity: 0.7; }
}

.login-inv__float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #fff;
  background: color-mix(in srgb, var(--login-accent, var(--accent-color)) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--login-accent-glow, var(--accent-dark)) 35%, transparent);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  opacity: 0;
  animation: login-float-in 6s ease-in-out infinite;
}

.login-inv__float i {
  font-size: 0.8rem;
}

.login-inv__float--sku {
  top: -8%;
  right: -6%;
  animation-delay: 0.5s;
}

.login-inv__float--stock {
  bottom: 18%;
  left: -12%;
  animation-delay: 2.2s;
  background: rgba(52, 211, 153, 0.2);
  border-color: rgba(52, 211, 153, 0.4);
  color: #a7f3d0;
}

.login-inv__float--imei {
  top: 42%;
  right: -14%;
  animation-delay: 4s;
  background: rgba(99, 102, 241, 0.25);
  border-color: rgba(129, 140, 248, 0.4);
  color: #c7d2fe;
}

@keyframes login-float-in {
  0%, 12% { opacity: 0; transform: translateY(8px) scale(0.92); }
  18%, 32% { opacity: 1; transform: translateY(0) scale(1); }
  40%, 100% { opacity: 0; transform: translateY(-6px) scale(0.95); }
}

.login-inv__ticker {
  width: 100%;
  max-width: 280px;
  margin-top: 1.25rem;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.login-inv__ticker-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  animation: login-ticker-scroll 22s linear infinite;
}

.login-inv__ticker-track span::before {
  content: '●';
  margin-right: 0.5rem;
  color: var(--login-accent, var(--accent-color));
  font-size: 0.45rem;
  vertical-align: middle;
}

@keyframes login-ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.login-panel__stage-copy {
  position: relative;
  z-index: 1;
  margin-top: 0.5rem;
}

.login-panel__stage-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.login-panel__stage-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
  max-width: 32ch;
}

@media (max-width: 799px) {
  .login-panel {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .login-panel__stage {
    order: -1;
    min-height: 260px;
    padding: 1.75rem 1.5rem 1.5rem;
  }

  .login-inv {
    min-height: 200px;
    padding: 0.5rem 0 1rem;
  }

  .login-inv__warehouse {
    max-width: 200px;
  }

  .login-inv__float {
    display: none;
  }

  .login-panel__stage-text {
    max-width: none;
  }

  .login-panel__form {
    padding: 1.75rem 1.5rem 1.5rem;
  }

  .login-panel__subtitle {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-panel__stage-glow,
  .login-inv__live-dot,
  .login-inv__box,
  .login-inv__qty,
  .login-inv__scanner,
  .login-inv__beam,
  .login-inv__float,
  .login-inv__ticker-track {
    animation: none;
  }

  .login-inv__box {
    transform: scaleY(1);
    opacity: 0.7;
  }

  .login-inv__scanner {
    top: 50%;
    opacity: 0.5;
  }

  .login-panel__submit:hover:not(:disabled) {
    transform: none;
  }

  .login-panel__submit:hover:not(:disabled) i {
    transform: none;
  }
}

/* POS Category pills */
.pos-cat-pill,
.btn-cat-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--erp-muted, #64748b) 7%, var(--erp-surface, #fff));
  color: var(--erp-muted, #4a5568);
  border: 1px solid var(--erp-line, rgba(15, 23, 42, 0.08));
  border-radius: 50px !important;
  font-weight: 600;
  padding: 0.28rem 0.65rem !important;
  font-size: 0.75rem !important;
  line-height: 1.2;
  transition:
    background-color 0.18s var(--ease-fluid),
    border-color 0.18s var(--ease-fluid),
    color 0.18s var(--ease-fluid),
    box-shadow 0.18s var(--ease-fluid);
  white-space: nowrap;
  cursor: pointer;
}

.pos-cat-pill:hover:not(.is-active),
.btn-cat-filter:hover:not(.btn-primary):not(.is-active) {
  background: color-mix(in srgb, var(--erp-accent, #2563eb) 8%, var(--erp-surface, #fff));
  border-color: color-mix(in srgb, var(--erp-accent, #2563eb) 22%, var(--erp-line));
  color: var(--erp-ink, #0f172a);
}

.pos-cat-pill.is-active,
.btn-cat-filter.btn-primary {
  background-color: var(--erp-accent, var(--accent-color)) !important;
  color: #ffffff !important;
  border-color: var(--erp-accent, var(--accent-color)) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--erp-accent, #2563eb) 28%, transparent) !important;
}

.pos-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 0.45rem;
  padding: 0;
}

/* Compact product tiles for POS catalog */
.pos-product-card {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 12px !important;
  border: 1px solid var(--erp-line, rgba(15, 23, 42, 0.08)) !important;
  box-shadow: 0 1px 6px color-mix(in srgb, var(--erp-ink, #0f172a) 4%, transparent) !important;
  transition: transform 0.2s var(--ease-fluid), box-shadow 0.2s var(--ease-fluid), border-color 0.2s var(--ease-fluid) !important;
  display: flex;
  flex-direction: column;
  height: auto !important;
  min-height: 0;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--erp-surface, #ffffff) !important;
  padding: 0.3rem;
  text-align: left;
  width: 100%;
  color: inherit;
  font: inherit;
}

.pos-product-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--erp-accent, #2563eb) 28%, var(--erp-line)) !important;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--erp-ink, #0f172a) 8%, transparent) !important;
}

.pos-product-card:focus-visible {
  outline: 2px solid var(--erp-accent, #2563eb);
  outline-offset: 2px;
}

.pos-product-card-img {
  height: 58px;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.pos-product-card-fallback {
  height: 58px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--erp-muted, #94a3b8) 14%, var(--erp-surface, #f1f5f9));
  color: var(--erp-muted, #94a3b8);
  font-size: 1.25rem;
  font-weight: bold;
  border-radius: 8px;
  flex-shrink: 0;
}

.pos-product-card-body {
  padding: 0.35rem 0.25rem 0.15rem !important;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.1rem;
  min-height: 0;
}

.pos-product-card-brand {
  font-size: 0.5625rem;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--erp-muted, #94a3b8);
  letter-spacing: 0.05em;
  text-align: left;
}

.pos-product-card-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--erp-ink, #1e293b);
  text-align: left;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pos-product-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem;
  margin-top: 0.25rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--erp-line, rgba(15, 23, 42, 0.06));
}

.pos-product-card-price {
  font-weight: 800;
  color: var(--accent-color);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.pos-product-card-stock {
  font-size: 0.625rem;
  color: var(--erp-muted, #64748b);
  font-weight: 600;
  white-space: nowrap;
}

/* POS — scrollbar categorías */
#pos-categories-container::-webkit-scrollbar {
  height: 4px;
}

#pos-categories-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 10px;
}

#pos-categories-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 10px;
}

#pos-categories-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.22);
}

/* POS — scrollbar categorías en modo oscuro */
[data-bs-theme="dark"] #pos-categories-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] #pos-categories-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
}

[data-bs-theme="dark"] #pos-categories-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* Premium Glassmorphic Toast Styles */
.premium-toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.premium-toast {
  min-width: 320px;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.06);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
  transform: translateY(-20px) scale(0.95);
  opacity: 0;
  transition: all 0.4s var(--ease-fluid);
}

[data-bs-theme="dark"] .premium-toast {
  background: rgba(13, 18, 31, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.premium-toast.show {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.premium-toast.hide {
  transform: translateY(-10px) scale(0.95);
  opacity: 0;
}

.premium-toast-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.premium-toast-success .premium-toast-icon {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.premium-toast-error .premium-toast-icon {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.premium-toast-warning .premium-toast-icon {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.premium-toast-content {
  flex-grow: 1;
}

.premium-toast-title {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 2px;
  color: #0f172a;
}

[data-bs-theme="dark"] .premium-toast-title {
  color: #ffffff;
}

.premium-toast-msg {
  font-size: 0.8rem;
  color: #64748b;
}

/* Premium Confirm Modal Overlay */
.premium-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s var(--ease-fluid);
}

.premium-confirm-overlay.show {
  opacity: 1;
}

.premium-confirm-overlay.hide {
  opacity: 0;
}

.premium-confirm-card {
  width: 90%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.9) translateY(10px);
  transition: transform 0.4s var(--ease-spring);
}

[data-bs-theme="dark"] .premium-confirm-card {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}

.premium-confirm-overlay.show .premium-confirm-card {
  transform: scale(1) translateY(0);
}

.premium-confirm-overlay.hide .premium-confirm-card {
  transform: scale(0.95) translateY(10px);
}

.premium-confirm-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.premium-confirm-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
}

[data-bs-theme="dark"] .premium-confirm-title {
  color: #ffffff;
}

.premium-confirm-msg {
  font-size: 0.875rem;
  color: #64748b;
  text-align: center;
}

/* Enhanced Modal Dialog Widths */
#modal-recibir-mercancia .modal-dialog,
#modal-devolver-mercancia .modal-dialog {
  max-width: 1250px !important;
  width: 95% !important;
}

/* ─── App Shell: Topbar + Page Layout ─── */
.page-wrapper {
  background: transparent;
}

.page-wrapper > .navbar.erp-topbar,
.page-wrapper > .navbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  height: var(--erp-shell-header-height);
  min-height: var(--erp-shell-header-height);
  padding: 0 !important;
  background: color-mix(in srgb, var(--surface) 90%, transparent) !important;
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent-color) 8%, transparent), var(--shadow-xs) !important;
}

.erp-topbar .container-xl {
  height: 100%;
  max-width: 100%;
  padding-left: var(--erp-shell-gutter);
  padding-right: var(--erp-shell-gutter);
}

.erp-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  height: 100%;
  min-height: var(--erp-shell-header-height);
  padding: 0;
}

.erp-topbar-context {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  height: 100%;
}

.erp-topbar-accent {
  flex-shrink: 0;
  align-self: center;
  width: 3px;
  height: 1.5rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-color), var(--accent-dark));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.erp-topbar-context-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.125rem;
  min-width: 0;
}

.erp-topbar-kicker {
  margin: 0;
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1;
}

.erp-topbar-title {
  margin: 0;
  font-size: var(--type-title);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.erp-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.erp-topbar-divider {
  width: 1px;
  height: 1.75rem;
  background: var(--border-subtle);
}

/* Topbar móvil: título visible, chip compacto */
@media (max-width: 991.98px) {
  .page-wrapper > .navbar.erp-topbar {
    --erp-shell-header-height: 3.35rem;
  }

  .erp-topbar-inner {
    gap: 0.65rem;
  }

  .erp-topbar-kicker {
    display: none;
  }

  .erp-topbar-title {
    font-size: 0.9375rem;
  }

  .erp-topbar-divider {
    display: none;
  }

  .erp-user-meta {
    display: none;
  }

  .erp-user-chevron {
    display: none;
  }

  .erp-user-chip {
    padding: 0.25rem;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
  }

  .navbar-vertical .navbar-nav .nav-link {
    min-height: 44px;
    padding: 0.65rem 0.85rem !important;
    font-size: 0.875rem !important;
  }

  .navbar-vertical .navbar-nav .nav-link-icon .ti {
    font-size: 1.25rem !important;
  }

  .erp-header__title {
    font-size: 1rem;
  }

  .erp-module .erp-filter-card .card-body {
    padding: 0.55rem 0.7rem;
  }
}

.erp-theme-switch {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem;
  border-radius: 999px;
  border: 1px solid var(--border-hairline);
  background: color-mix(in srgb, var(--canvas) 70%, var(--surface));
}

[data-bs-theme="dark"] .erp-theme-switch {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.erp-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-fluid), color 0.2s var(--ease-fluid), box-shadow 0.2s var(--ease-fluid);
}

.erp-theme-btn:hover {
  color: var(--ink-secondary);
  background: rgba(15, 23, 42, 0.04);
}

.erp-theme-btn.is-active {
  color: var(--accent-color);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

[data-bs-theme="dark"] .erp-theme-btn.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: #93c5fd;
}

.erp-theme-btn:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.erp-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0.55rem 0.35rem 0.4rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-fluid), box-shadow 0.2s var(--ease-fluid), background-color 0.2s var(--ease-fluid);
}

.erp-user-chip:hover {
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-xs);
}

.erp-user-chip:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

[data-bs-theme="dark"] .erp-user-chip {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.erp-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--accent-color);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
}

.erp-user-avatar--lg {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.8125rem;
}

.erp-user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: 11rem;
}

.erp-user-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.erp-user-role-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
  min-width: 0;
  max-width: 100%;
}

.erp-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}

.erp-role-badge--violet {
  color: #6d28d9;
  background: rgba(109, 40, 217, 0.1);
}

.erp-role-badge--blue {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.1);
}

.erp-role-badge--cyan {
  color: #0e7490;
  background: rgba(8, 145, 178, 0.1);
}

.erp-role-badge--green {
  color: #15803d;
  background: rgba(22, 163, 74, 0.1);
}

.erp-role-badge--amber {
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
}

.erp-role-badge--slate {
  color: #475569;
  background: rgba(100, 116, 139, 0.12);
}

[data-bs-theme="dark"] .erp-role-badge--violet { color: #c4b5fd; background: rgba(109, 40, 217, 0.22); }
[data-bs-theme="dark"] .erp-role-badge--blue { color: #93c5fd; background: rgba(37, 99, 235, 0.22); }
[data-bs-theme="dark"] .erp-role-badge--cyan { color: #67e8f9; background: rgba(8, 145, 178, 0.22); }
[data-bs-theme="dark"] .erp-role-badge--green { color: #86efac; background: rgba(22, 163, 74, 0.22); }
[data-bs-theme="dark"] .erp-role-badge--amber { color: #fcd34d; background: rgba(245, 158, 11, 0.2); }
[data-bs-theme="dark"] .erp-role-badge--slate { color: #cbd5e1; background: rgba(100, 116, 139, 0.25); }

.erp-user-sede {
  font-size: 0.6875rem;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.erp-user-chevron {
  font-size: 0.875rem;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.erp-user-dropdown {
  min-width: 15rem;
  padding: 0.35rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.erp-user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem;
}

.erp-user-dropdown-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.erp-user-dropdown-email {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--ink-muted);
  word-break: break-all;
}

@media (prefers-reduced-motion: reduce) {
  .erp-theme-btn,
  .erp-user-chip {
    transition: none;
  }
}

.page-body {
  padding-top: 0.55rem !important;
  padding-bottom: 1.15rem !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: var(--canvas);
  background-image:
    radial-gradient(ellipse 90% 60% at 0% 0%, color-mix(in srgb, var(--accent-color, #0891b2) 4%, transparent), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 100%, color-mix(in srgb, var(--accent-color, #0891b2) 3%, transparent), transparent 50%);
  min-height: calc(100vh - var(--erp-shell-header-height));
}

.page-body > .container-xl {
  padding-left: var(--erp-shell-gutter);
  padding-right: var(--erp-shell-gutter);
}

body.theme-no-mesh .page-body {
  background-image: none;
}

.page-header {
  margin-bottom: 1.5rem !important;
}

.page-title {
  font-size: var(--type-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em;
  color: var(--ink) !important;
  line-height: 1.2;
  margin-bottom: 0 !important;
}

.page-header .text-secondary {
  font-size: var(--type-caption);
  color: var(--ink-secondary) !important;
  margin-top: 0.3rem !important;
  line-height: 1.45;
  max-width: 40rem;
}

/* Modals & dropdowns */
.modal-content {
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-lg) !important;
  background-color: var(--surface) !important;
  overflow: hidden;
}

.modal-header {
  border-bottom: 1px solid var(--border-hairline) !important;
  padding: 1.1rem 1.35rem !important;
  background: color-mix(in srgb, var(--surface) 92%, var(--canvas));
}

.modal-title {
  font-size: var(--type-title) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em;
  color: var(--ink) !important;
  line-height: 1.25;
}

.modal-body {
  padding: 1.15rem 1.35rem !important;
}

.modal-footer {
  border-top: 1px solid var(--border-hairline) !important;
  padding: 0.85rem 1.35rem !important;
  background: color-mix(in srgb, var(--canvas) 40%, var(--surface));
  gap: 0.5rem;
}

.modal-backdrop.show {
  opacity: 0.45;
}

.dropdown-menu {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 0.4rem !important;
  background-color: var(--surface) !important;
}

.dropdown-item {
  border-radius: var(--radius-sm) !important;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.45rem 0.7rem !important;
  color: var(--ink) !important;
  transition: background-color 0.15s var(--ease-fluid), color 0.15s var(--ease-fluid);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--accent-soft) !important;
  color: var(--accent-color) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--accent-soft) !important;
  color: var(--accent-color) !important;
}

.dropdown-divider {
  border-top-color: var(--border-hairline) !important;
  margin: 0.35rem 0.25rem !important;
}

[data-bs-theme="dark"] .modal-content {
  background-color: var(--surface) !important;
  border-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
  background: color-mix(in srgb, var(--surface) 94%, #000);
  border-color: var(--border-hairline) !important;
}

[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--surface) !important;
  border-color: var(--border-subtle) !important;
}

/* Alerts */
.alert {
  border-radius: var(--radius-md) !important;
  border: 1px solid transparent !important;
  font-size: 0.875rem;
}

.alert-title {
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* Focus & accessibility */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-color) 55%, transparent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Button shape variants (theme config) */
body.btn-style-pill .btn:not(.btn-icon) {
  border-radius: 999px !important;
}

body.btn-style-square .btn:not(.btn-icon) {
  border-radius: 4px !important;
}

.form-control-color {
  height: 2.75rem;
  padding: 0.25rem !important;
  cursor: pointer;
}

/* Theme customizer — preset grid */
.theme-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.65rem;
}

.theme-preset-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-fluid), box-shadow 0.2s var(--ease-fluid);
  text-align: left;
}

.theme-preset-card:hover {
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.theme-preset-card.active {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.theme-preset-swatch {
  width: 100%;
  height: 28px;
  border-radius: var(--radius-sm);
}

.theme-preset-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}

.theme-preview-panel {
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.theme-preview-mock {
  display: flex;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  min-height: 220px;
  background: var(--preview-canvas, var(--canvas));
}

.theme-preview-sidebar {
  width: 38%;
  background: var(--preview-surface, var(--surface));
  border-right: 1px solid var(--border-hairline);
  padding: 0.75rem 0.5rem;
}

.theme-preview-brand {
  font-weight: 800;
  font-size: 0.75rem;
  color: var(--preview-accent, var(--accent-color));
  padding: 0.35rem 0.5rem 0.65rem;
  letter-spacing: -0.02em;
}

.theme-preview-nav-item {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--preview-ink-secondary, var(--ink-secondary));
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  margin: 0.1rem 0.25rem;
}

.theme-preview-nav-item.active {
  background: color-mix(in srgb, var(--preview-accent, var(--accent-color)) 10%, transparent);
  color: var(--preview-accent, var(--accent-color));
  border-left: 2px solid var(--preview-accent, var(--accent-color));
}

.theme-preview-main {
  flex: 1;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.theme-preview-card {
  background: var(--preview-surface, var(--surface));
  border-radius: var(--preview-radius, var(--radius-lg));
  padding: 0.75rem;
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-xs);
}

.theme-preview-mock.preview-card-flat .theme-preview-card {
  box-shadow: none;
}

.theme-preview-mock.preview-card-bordered .theme-preview-card {
  box-shadow: none;
  border-color: var(--border-subtle);
}

.theme-preview-card-title {
  font-size: 0.6875rem;
  color: var(--preview-ink-secondary, var(--ink-secondary));
  font-weight: 600;
}

.theme-preview-card-value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--preview-ink, var(--ink));
  letter-spacing: -0.03em;
  margin: 0.15rem 0 0.5rem;
}

.theme-preview-btn {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border: none;
  border-radius: var(--preview-btn-radius, var(--radius-md));
  background: var(--preview-accent, var(--accent-color));
  color: #fff;
}

.theme-preview-input {
  height: 28px;
  border-radius: var(--preview-btn-radius, var(--radius-md));
  border: 1px solid var(--border-subtle);
  background: var(--preview-surface, var(--surface));
}

.email-preview-panel {
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.email-preview-mode-label {
  color: var(--ink-secondary);
}

.email-preview-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.email-preview-type {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border-hairline);
  background: var(--canvas);
  color: var(--ink-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.email-preview-type:hover {
  border-color: var(--border-subtle);
  color: var(--ink);
}

.email-preview-type.is-active {
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent-color) 35%, transparent);
  color: var(--accent-color);
}

.email-preview-mock {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  background: var(--canvas);
}

.email-preview-toolbar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border-hairline);
}

.email-preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.email-preview-dot--red { background: #ff5f57; }
.email-preview-dot--yellow { background: #febc2e; }
.email-preview-dot--green { background: #28c840; }

.email-preview-toolbar-title {
  margin-left: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-secondary);
}

.email-preview-meta {
  padding: 0.75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border-hairline);
}

.email-preview-meta-row {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 0.35rem;
  font-size: 0.75rem;
  line-height: 1.4;
}

.email-preview-meta-row + .email-preview-meta-row {
  margin-top: 0.35rem;
}

.email-preview-meta-label {
  font-weight: 600;
  color: var(--ink-secondary);
}

.email-preview-meta-value {
  color: var(--ink);
  word-break: break-word;
}

.email-preview-meta-value--subject {
  font-weight: 700;
}

.email-preview-body {
  padding: 0.85rem 0.75rem;
  min-height: 120px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
}

.email-preview-attachments {
  padding: 0.65rem 0.75rem;
  background: var(--canvas);
  border-top: 1px solid var(--border-hairline);
}

.email-preview-attachment {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-hairline);
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
}

.email-preview-attachment .ti {
  color: #c0392b;
  font-size: 1rem;
}

/* Caja — desglose por método de pago */
.caja-metodo-card {
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: 1rem;
  height: 100%;
}

.caja-metodo-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-secondary);
}

.caja-metodo-monto {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.caja-metodo-bar {
  height: 4px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.caja-metodo-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s var(--ease-fluid);
  min-width: 0;
}

.caja-metodo-pct {
  font-size: 0.75rem;
  margin-top: 0.35rem;
}

.caja-historial-table th {
  font-size: 0.7rem;
  white-space: nowrap;
}

.caja-historial-row {
  cursor: pointer;
}

.caja-historial-row:hover {
  background-color: rgba(37, 99, 235, 0.04) !important;
}

.caja-historial-row-highlight {
  background-color: rgba(37, 99, 235, 0.08) !important;
  outline: 2px solid rgba(37, 99, 235, 0.2);
  outline-offset: -2px;
}

.caja-desglose-embedded {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: 1rem;
  background: var(--surface);
}

#modal-detalle-past-caja .modal-dialog {
  max-width: 920px;
}

/* ═══════════════════════════════════════════════════════════
   ERP Module — kit canónico
   Clases: .erp-header | .erp-filter-card | .erp-table-panel | .erp-list-workspace
   Flujo listados: header compacto → (filtros + tabla unidos) → panel
  ═══════════════════════════════════════════════════════════ */

.erp-module {
  --erp-ink: #0c1222;
  --erp-muted: #64748b;
  --erp-line: rgba(12, 18, 34, 0.08);
  --erp-accent: var(--accent-color, #0891b2);
  --erp-accent-soft: color-mix(in srgb, var(--accent-color, #0891b2) 12%, transparent);
  --erp-positive: #059669;
  --erp-negative: #e11d48;
  --erp-warn: #d97706;
  --erp-surface: #ffffff;
  --erp-radius: var(--radius-md);
  animation: erp-enter 0.45s var(--ease-fluid) both;
}

[data-bs-theme="dark"] .erp-module {
  --erp-ink: var(--ink, #f1f5f9);
  --erp-muted: var(--ink-secondary, #94a3b8);
  --erp-line: var(--border-hairline, rgba(255, 255, 255, 0.08));
  --erp-surface: var(--surface, #121a2b);
  --erp-accent-soft: color-mix(in srgb, var(--accent-color, #0891b2) 14%, transparent);
  --erp-canvas: var(--canvas, #0a0e17);
  color: var(--erp-ink);
}

[data-bs-theme="dark"] .erp-module .erp-filter-card,
[data-bs-theme="dark"] .erp-module .erp-table-panel,
[data-bs-theme="dark"] .erp-module .erp-stat-card,
[data-bs-theme="dark"] .erp-module .erp-panel {
  background: var(--erp-surface);
  border-color: var(--erp-line);
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.48);
}

[data-bs-theme="dark"] .erp-module .card {
  background: var(--erp-surface) !important;
  border-color: var(--erp-line) !important;
}

[data-bs-theme="dark"] .erp-module .table thead th {
  background: color-mix(in srgb, var(--erp-surface) 82%, var(--erp-canvas)) !important;
  color: var(--erp-muted) !important;
}

[data-bs-theme="dark"] .erp-module .nav-tabs.card-header-tabs {
  border-bottom-color: var(--erp-line);
}

[data-bs-theme="dark"] .cot-doc-modal-body {
  background: color-mix(in srgb, var(--canvas) 72%, #000) !important;
}

[data-bs-theme="dark"] .cot-doc {
  border-color: var(--border-hairline);
  box-shadow: 0 18px 48px -16px rgba(0, 0, 0, 0.55);
}

/* Solo opacity: un transform en .erp-module convierte position:fixed de los
   modals en relativo al módulo (diálogos “invisibles” detrás del blur). */
@keyframes erp-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .erp-module { animation: none; }
}

/* Header — kit canónico compacto (topbar ya muestra el módulo) */
.erp-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  margin-bottom: 0.55rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--erp-line);
}

/* Topbar ya identifica el módulo: ocultar eyebrow redundante */
.erp-header__eyebrow {
  display: none;
}

.erp-header__title {
  font-size: var(--type-title);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--erp-ink);
  margin: 0;
  line-height: 1.2;
}

.erp-header__sub {
  font-size: var(--type-caption);
  color: var(--erp-muted);
  margin: 0.15rem 0 0;
  line-height: 1.45;
  max-width: 36rem;
  letter-spacing: -0.005em;
}

.erp-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.erp-header__actions .btn-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.erp-module .erp-header__actions .btn {
  font-size: 0.75rem !important;
  padding: 0.28rem 0.65rem !important;
  line-height: 1.25 !important;
  min-height: 2rem;
}

.erp-module .erp-header__actions .btn .ti {
  font-size: 0.95rem;
  vertical-align: -0.1em;
}

.erp-module .erp-header__actions .btn .me-2 {
  margin-right: 0.35rem !important;
}

/* Shell, tabs, panels */
.erp-module .card {
  border-radius: var(--erp-radius) !important;
  border-color: var(--erp-line) !important;
  box-shadow: var(--shadow-xs) !important;
}

.erp-module .card-header {
  background: var(--erp-surface) !important;
  border-bottom-color: var(--erp-line) !important;
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
}

.erp-module .nav-tabs {
  border-bottom: none;
  gap: 0.15rem;
}

.erp-module .nav-tabs .nav-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--erp-muted);
  border: none !important;
  border-radius: 8px !important;
  padding: 0.5rem 0.85rem !important;
  transition: color 0.15s, background 0.15s;
}

.erp-module .nav-tabs .nav-link:hover {
  color: var(--erp-ink);
  background: var(--erp-accent-soft);
}

.erp-module .nav-tabs .nav-link.active {
  color: var(--erp-accent) !important;
  background: var(--erp-accent-soft) !important;
}

.erp-module .erp-panel,
.erp-module .erp-filter-card {
  border-radius: var(--erp-radius);
  border: 1px solid var(--erp-line);
  background: var(--erp-surface);
  box-shadow: var(--shadow-xs);
}

.erp-module .erp-filter-card .card-body {
  padding: 0.55rem 0.75rem;
}

.erp-module .erp-filter-card {
  margin-bottom: 0.55rem !important;
}

.erp-module .erp-filter-card .form-label {
  margin-bottom: 0.2rem;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--erp-muted);
}

.erp-module .erp-filter-card .form-control,
.erp-module .erp-filter-card .form-select {
  padding: 0.32rem 0.6rem !important;
  font-size: 0.8125rem !important;
  min-height: 2rem;
  box-shadow: none;
}

.erp-module .erp-filter-card .row {
  --tblr-gutter-y: 0.45rem;
}

.erp-module .card-header.erp-tabs-header,
.erp-module .card-header.bg-transparent {
  background: transparent !important;
  border-bottom: 1px solid var(--erp-line) !important;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
}

.erp-module .erp-filter-submit {
  white-space: nowrap;
  font-size: 0.75rem !important;
  padding: 0.32rem 0.65rem !important;
  min-height: 2rem;
}

/* Tables densas */
.erp-module .erp-table-panel {
  border-radius: var(--erp-radius);
  border: 1px solid var(--erp-line);
  background: var(--erp-surface);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  margin-bottom: 0;
}

.erp-module .erp-table-panel .table {
  margin-bottom: 0;
}

/* Filtros + tabla unidos (kit listados densos) */
.erp-list-workspace {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--erp-line);
  border-radius: 10px;
  background: var(--erp-surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  margin-bottom: 0.35rem;
}

.erp-list-workspace > .erp-filter-card,
.erp-list-workspace > .erp-table-panel,
.erp-list-workspace > .inv-ledger {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.erp-list-workspace > .erp-filter-card {
  border-bottom: 1px solid var(--erp-line) !important;
  background: color-mix(in srgb, var(--erp-surface) 88%, var(--erp-accent) 12%) !important;
}

.erp-list-workspace > .erp-filter-card .card-body {
  padding: 0.45rem 0.7rem !important;
}

/* Alias legacy Inventario workspace → kit canónico */
.inv-workspace {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--erp-line);
  border-radius: 10px;
  background: var(--erp-surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  margin-bottom: 0.35rem;
}

.inv-workspace > .erp-filter-card,
.inv-workspace > .inv-ledger {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.inv-workspace > .erp-filter-card {
  border-bottom: 1px solid var(--erp-line) !important;
  background: color-mix(in srgb, var(--erp-surface) 88%, var(--erp-accent) 12%) !important;
}

.inv-workspace > .erp-filter-card .card-body {
  padding: 0.45rem 0.7rem !important;
}

[data-bs-theme="dark"] .erp-list-workspace {
  border-color: var(--erp-line);
  background: var(--erp-surface);
}

[data-bs-theme="dark"] .erp-list-workspace > .erp-filter-card {
  background: color-mix(in srgb, var(--erp-surface) 90%, var(--erp-accent) 10%) !important;
  border-bottom-color: var(--erp-line) !important;
}

.erp-module .erp-table-panel .table.table-striped > tbody > tr:nth-of-type(odd) > * {
  --tblr-table-bg-type: transparent;
  background-color: transparent;
}

.erp-module .table {
  font-size: 0.8125rem;
}

.erp-module .table thead th {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--erp-muted);
  background: color-mix(in srgb, var(--erp-surface) 88%, var(--erp-accent) 12%);
  border-bottom: 1px solid var(--erp-line) !important;
  padding: 0.45rem 0.7rem;
  white-space: nowrap;
}

.erp-module .table tbody td {
  border-bottom: 1px solid color-mix(in srgb, var(--erp-line) 70%, transparent);
  vertical-align: middle;
  color: var(--erp-ink);
  padding: 0.4rem 0.7rem;
  line-height: 1.35;
}

.erp-module .table tbody tr:last-child td {
  border-bottom: none;
}

.erp-module .table .avatar,
.erp-module .table .avatar-sm {
  --tblr-avatar-size: 1.4rem;
  width: 1.4rem !important;
  height: 1.4rem !important;
  min-width: 1.4rem;
  font-size: 0.625rem !important;
}

.erp-module .table .badge {
  font-size: 0.65rem;
  padding: 0.15em 0.45em;
  font-weight: 600;
}

.erp-module .table tbody tr:hover {
  background: color-mix(in srgb, var(--erp-accent-soft) 40%, transparent);
}

/* Historial ventas — estado de devolución */
.erp-module .table tbody tr.venta-row--parcial > * {
  background: color-mix(in srgb, #f59e0b 8%, transparent);
}

.erp-module .table tbody tr.venta-row--devuelta > * {
  background: color-mix(in srgb, #64748b 9%, transparent);
  color: color-mix(in srgb, var(--erp-ink, #1e293b) 72%, transparent);
}

.erp-module .table tbody tr.venta-row--anulada > * {
  background: color-mix(in srgb, #dc2626 7%, transparent);
  opacity: 0.85;
}

.erp-module .table tbody tr.venta-row--parcial,
.erp-module .table tbody tr.venta-row--devuelta,
.erp-module .table tbody tr.venta-row--anulada {
  box-shadow: inset 3px 0 0 0 var(--erp-accent, #206bc4);
}

.erp-module .table tbody tr.venta-row--parcial {
  box-shadow: inset 3px 0 0 0 #d97706;
}

.erp-module .table tbody tr.venta-row--devuelta {
  box-shadow: inset 3px 0 0 0 #64748b;
}

.erp-module .table tbody tr.venta-row--anulada {
  box-shadow: inset 3px 0 0 0 #dc2626;
}

/* Filas interactivas (Inventario y otros listados con edición rápida) */
.erp-module .table tbody tr.is-clickable {
  cursor: pointer;
}

.erp-module .table tbody tr.is-clickable:hover {
  background: color-mix(in srgb, var(--erp-accent-soft) 65%, transparent);
}

.erp-module .table tbody tr.is-clickable:focus-visible {
  outline: 2px solid var(--erp-accent);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--erp-accent-soft) 55%, transparent);
}

/* Empty state — listados sin resultados */
.erp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.25rem 1.5rem;
  gap: 0.35rem;
  min-height: 10rem;
}

.erp-empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.35rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--erp-accent-soft) 80%, var(--erp-surface));
  color: var(--erp-accent);
  font-size: 1.35rem;
}

.erp-empty-state__title {
  margin: 0;
  font-size: var(--type-card);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--erp-ink);
  line-height: 1.3;
}

.erp-empty-state__desc {
  margin: 0;
  max-width: 22rem;
  font-size: var(--type-caption);
  line-height: 1.45;
  color: var(--erp-muted);
}

.erp-empty-state__action {
  margin-top: 0.75rem;
}

.erp-table-panel .erp-empty-state {
  border-top: 1px solid var(--erp-line);
}

/* ── Inventario: mostrador de escaneo (Servitec Gamers) ──
   Firma: riel de escaneo con ticks de código de barras + ledger mono */
.inv-module {
  --inv-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
}

.inv-module .erp-header {
  margin-bottom: 0.35rem;
  padding-bottom: 0.3rem;
}

.inv-module .erp-header__title {
  font-size: 1rem;
  letter-spacing: -0.04em;
}

.inv-module .erp-header__sub {
  font-family: var(--inv-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.01em;
  color: var(--erp-muted);
}

/* Filtros + tabla = un solo bloque (sin aire entre cards) */
.inv-workspace {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--erp-line);
  border-radius: 10px;
  background: var(--erp-surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  margin-bottom: 0.35rem;
}

.inv-workspace > .erp-filter-card,
.inv-workspace > .inv-ledger {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.inv-workspace > .erp-filter-card {
  border-bottom: 1px solid var(--erp-line) !important;
  background: color-mix(in srgb, var(--erp-surface) 88%, var(--erp-accent) 12%) !important;
}

.inv-workspace > .erp-filter-card .card-body {
  padding: 0.45rem 0.7rem !important;
}

.inv-module .erp-filter-card {
  margin-bottom: 0 !important;
}

.inv-filter-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.45rem;
  min-height: 2rem;
}

.inv-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.inv-chip {
  appearance: none;
  border: 1px solid var(--erp-line);
  background: var(--erp-surface);
  color: var(--erp-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  line-height: 1;
  cursor: pointer;
  min-height: 1.7rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.inv-chip:hover {
  border-color: color-mix(in srgb, var(--erp-accent) 35%, var(--erp-line));
  color: var(--erp-ink);
}

.inv-chip.is-active {
  background: var(--erp-accent-soft);
  border-color: color-mix(in srgb, var(--erp-accent) 45%, var(--erp-line));
  color: color-mix(in srgb, var(--erp-accent) 75%, #0f172a);
}

.inv-filter-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
}

.inv-result-count {
  font-family: var(--inv-mono);
  font-size: 0.68rem;
  color: var(--erp-muted);
  white-space: nowrap;
}

.inv-clear-filters {
  font-size: 0.7rem !important;
  padding: 0.2rem 0.45rem !important;
  min-height: 1.7rem;
}

.inv-scan-input {
  position: relative;
}

.inv-scan-input__icon {
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.05rem;
  color: var(--erp-accent);
  pointer-events: none;
  opacity: 0.85;
  z-index: 1;
}

/* Más específico que .erp-module .erp-filter-card .form-control { padding: … !important } */
.erp-module .inv-scan-input .form-control,
.erp-module .erp-filter-card .inv-scan-input .form-control,
.inv-scan-input .form-control {
  padding-left: 2.15rem !important;
  font-family: var(--inv-mono);
  letter-spacing: 0.01em;
}

.inv-scan-input .form-control:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--erp-accent) 18%, transparent) !important;
}

.inv-ledger .table thead th {
  padding: 0.35rem 0.55rem;
  font-size: 0.6rem;
}

.inv-ledger .table tbody td {
  padding: 0.28rem 0.55rem;
}

.inv-sku {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.inv-sku__code {
  font-family: var(--inv-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--erp-muted);
  background: transparent;
  padding: 0;
}

.inv-sku__tag {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  color: color-mix(in srgb, var(--erp-accent) 80%, #0c4a6e);
  background: var(--erp-accent-soft);
}

.inv-product {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.inv-thumb {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--erp-surface) 70%, var(--erp-muted));
}

.inv-thumb--letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--erp-muted);
  background: color-mix(in srgb, var(--erp-accent-soft) 70%, var(--erp-surface));
}

.inv-product__name {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--erp-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22rem;
}

.inv-row.is-clickable:hover .inv-product__name,
.inv-row.is-clickable:focus-visible .inv-product__name {
  color: color-mix(in srgb, var(--erp-accent) 70%, var(--erp-ink));
}

.inv-cat {
  font-size: 0.72rem;
  color: var(--erp-muted);
}

.inv-money {
  font-family: var(--inv-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--erp-muted);
  white-space: nowrap;
}

.inv-money--sale {
  color: var(--erp-ink);
  font-weight: 600;
}

.inv-qty {
  font-family: var(--inv-mono);
  font-size: 0.8125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.inv-qty--ok { color: var(--erp-positive, #059669); }
.inv-qty--low { color: var(--erp-warn, #d97706); }
.inv-qty--out { color: var(--erp-negative, #e11d48); }

.inv-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  padding: 0.12em 0.4em;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height: 1.2;
}

.inv-status--ok {
  color: #047857;
  background: color-mix(in srgb, #10b981 16%, transparent);
}

.inv-status--low {
  color: #b45309;
  background: color-mix(in srgb, #f59e0b 18%, transparent);
}

.inv-status--out {
  color: #be123c;
  background: color-mix(in srgb, #f43f5e 16%, transparent);
}

.inv-status--imei {
  color: color-mix(in srgb, var(--erp-accent) 70%, #0f172a);
  background: var(--erp-accent-soft);
}

[data-bs-theme="dark"] .inv-status--ok {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.16);
}

[data-bs-theme="dark"] .inv-status--low {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.16);
}

[data-bs-theme="dark"] .inv-status--out {
  color: #fda4af;
  background: rgba(244, 63, 94, 0.16);
}

[data-bs-theme="dark"] .inv-workspace {
  border-color: var(--erp-line);
  background: var(--erp-surface);
}

[data-bs-theme="dark"] .inv-workspace > .erp-filter-card {
  background: color-mix(in srgb, var(--erp-surface) 90%, var(--erp-accent) 10%) !important;
  border-bottom-color: var(--erp-line) !important;
}

@media (max-width: 767.98px) {
  .inv-filter-meta {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }

  .inv-product__name {
    max-width: 12rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inv-scan-input .form-control:focus {
    transition: none;
  }
}

/* Stat cards */
.erp-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}

@media (min-width: 768px) {
  .erp-stat-grid { grid-template-columns: repeat(4, 1fr); }
}

.erp-stat-card {
  padding: 0.85rem 1rem;
  border-radius: calc(var(--erp-radius) - 2px);
  border: 1px solid var(--erp-line);
  background: var(--erp-surface);
}

.erp-stat-card__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--erp-muted);
  margin-bottom: 0.25rem;
}

.erp-stat-card__value {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--erp-ink);
  font-variant-numeric: tabular-nums;
}

/* Pills / badges de estado */
.erp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  white-space: nowrap;
}

.erp-pill--success { background: rgba(5, 150, 105, 0.12); color: #059669; }
.erp-pill--danger { background: rgba(225, 29, 72, 0.1); color: #e11d48; }
.erp-pill--warn { background: rgba(217, 119, 6, 0.12); color: #d97706; }
.erp-pill--info { background: var(--erp-accent-soft); color: var(--erp-accent); }
.erp-pill--muted { background: rgba(100, 116, 139, 0.12); color: #64748b; }

/* Botones de acción en tablas — icono + texto (Ver, Devolver, Editar…) */
.erp-actions,
.compras-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
}

.erp-action-btn,
.compras-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.2rem 0.45rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 7px;
  border: 1px solid var(--erp-line, rgba(12, 18, 34, 0.12));
  background: var(--erp-surface, #fff);
  color: var(--erp-ink, #0c1222);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
  white-space: nowrap;
  min-height: 1.55rem;
}

.erp-module .erp-action-btn > span,
.erp-module .compras-action-btn > span {
  display: none;
}

.erp-module .erp-action-btn,
.erp-module .compras-action-btn {
  width: 1.7rem;
  min-width: 1.7rem;
  padding: 0.2rem;
  gap: 0;
}

.erp-td-actions,
.compras-td-actions {
  min-width: 6.25rem;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle !important;
}

.erp-action-btn .ti,
.compras-action-btn .ti {
  font-size: 0.95rem;
  opacity: 0.85;
}

.erp-action-btn:hover,
.compras-action-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--erp-accent, #0891b2) 35%, var(--erp-line));
}

.erp-action-btn:focus-visible,
.compras-action-btn:focus-visible {
  outline: 2px solid var(--erp-accent, #0891b2);
  outline-offset: 2px;
}

.erp-action-btn--view:hover,
.compras-action-btn--view:hover {
  background: color-mix(in srgb, var(--erp-accent, #0891b2) 8%, var(--erp-surface));
  color: var(--erp-accent, #0891b2);
}

.erp-action-btn--return:hover,
.compras-action-btn--ret:hover {
  background: rgba(225, 29, 72, 0.06);
  color: #e11d48;
  border-color: rgba(225, 29, 72, 0.22);
}

.erp-action-btn--edit:hover {
  background: rgba(100, 116, 139, 0.08);
  color: #475569;
  border-color: rgba(100, 116, 139, 0.25);
}

.erp-action-btn--delete:hover,
.erp-action-btn--anular:hover,
.erp-action-btn--unlink:hover {
  background: rgba(225, 29, 72, 0.06);
  color: #e11d48;
  border-color: rgba(225, 29, 72, 0.22);
}

.erp-action-btn--pdf:hover,
.erp-action-btn--chart:hover {
  background: color-mix(in srgb, var(--erp-accent, #0891b2) 6%, var(--erp-surface));
  color: var(--erp-muted, #64748b);
}

.erp-action-btn--recv:hover,
.compras-action-btn--recv:hover {
  background: rgba(22, 163, 74, 0.08);
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.25);
}

.erp-action-btn--pay:hover {
  background: color-mix(in srgb, var(--erp-accent, #0891b2) 10%, var(--erp-surface));
  color: var(--erp-accent, #0891b2);
}

[data-bs-theme="dark"] .erp-action-btn,
[data-bs-theme="dark"] .compras-action-btn {
  background: var(--erp-surface, #0d121f);
  border-color: var(--erp-line);
  color: var(--erp-ink, #f1f5f9);
}

@media (prefers-reduced-motion: reduce) {
  .erp-action-btn:hover,
  .compras-action-btn:hover {
    transform: none;
  }
}

/* ── Taller / Reparaciones — tablero Kanban ── */
.rep-module {
  --rep-board-offset: 17.5rem;
}

.rep-header-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
}

.rep-search-wrap {
  position: relative;
  min-width: min(100%, 240px);
  max-width: 300px;
}

.rep-search-wrap__icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--erp-muted);
  pointer-events: none;
  z-index: 1;
}

/* Más específico que .erp-module .form-control { padding: … !important } */
.erp-module .rep-search-wrap .form-control,
.rep-search-wrap .form-control {
  padding-left: 2.4rem !important;
}

.rep-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--erp-line);
  border-radius: var(--erp-radius, 14px);
  background: color-mix(in srgb, var(--erp-surface) 92%, var(--erp-accent) 8%);
  box-shadow: var(--shadow-xs);
}

.rep-toolbar__views {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.2rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--erp-muted) 6%, var(--erp-surface));
  border: 1px solid var(--erp-line);
}

.rep-view-btn {
  border: none;
  background: transparent;
  color: var(--erp-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 0.45rem 0.8rem;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.rep-view-btn:hover {
  color: var(--erp-ink);
  background: color-mix(in srgb, var(--erp-ink) 4%, transparent);
}

.rep-view-btn.is-active {
  color: var(--erp-accent);
  background: var(--erp-surface);
  box-shadow: var(--shadow-xs);
}

.rep-view-btn:focus-visible {
  outline: 2px solid var(--erp-accent);
  outline-offset: 2px;
}

.rep-toolbar__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.rep-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0.6rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--erp-muted);
  border-radius: 999px;
  border: 1px solid var(--erp-line);
  background: var(--erp-surface);
  white-space: nowrap;
}

.rep-stat-pill strong {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--erp-ink);
  font-variant-numeric: tabular-nums;
}

.rep-stat-pill--bench strong { color: #7c3aed; }
.rep-stat-pill--ready strong { color: var(--erp-positive); }
.rep-stat-pill--done strong { color: var(--erp-muted); }

.rep-kanban-board {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 -0.25rem;
  padding: 0 0.25rem 0.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scroll-snap-type: x proximity;
}

.rep-kanban-board::-webkit-scrollbar {
  height: 8px;
}

.rep-kanban-board::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.28);
  border-radius: 999px;
}

.rep-kanban-track {
  display: flex;
  gap: 0.85rem;
  min-width: min-content;
  padding-bottom: 0.25rem;
}

.rep-kanban-board--view-activas .rep-kanban-track {
  min-width: 0;
}

@media (min-width: 1200px) {
  .rep-kanban-board--view-activas {
    overflow-x: hidden;
  }

  .rep-kanban-board--view-activas .rep-kanban-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .rep-kanban-board--view-activas .rep-kanban-col {
    flex: initial;
    width: auto;
    min-width: 0;
  }
}

@media (min-width: 992px) {
  .rep-kanban-board--view-archivo {
    overflow-x: hidden;
  }

  .rep-kanban-board--view-archivo .rep-kanban-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    min-width: 0;
  }

  .rep-kanban-board--view-archivo .rep-kanban-col {
    flex: initial;
    width: auto;
    min-width: 0;
  }
}

@media (min-width: 1680px) {
  .rep-kanban-board--view-todas {
    overflow-x: hidden;
  }

  .rep-kanban-board--view-todas .rep-kanban-track {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    min-width: 0;
  }

  .rep-kanban-board--view-todas .rep-kanban-col {
    min-width: 0 !important;
    width: auto !important;
    flex: initial;
  }
}

.rep-kanban-col {
  flex: 0 0 272px;
  width: 272px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  max-height: calc(100dvh - var(--rep-board-offset));
  border-radius: var(--erp-radius, 14px);
  border: 1px solid var(--erp-line);
  background: var(--erp-surface, #fff);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.rep-kanban-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--erp-line);
  flex-shrink: 0;
}

.rep-kanban-col--recibido .rep-kanban-col__head { background: rgba(59, 130, 246, 0.08); }
.rep-kanban-col--diagnostico .rep-kanban-col__head { background: rgba(139, 92, 246, 0.08); }
.rep-kanban-col--reparacion .rep-kanban-col__head { background: rgba(217, 119, 6, 0.1); }
.rep-kanban-col--listo .rep-kanban-col__head { background: rgba(5, 150, 105, 0.1); }
.rep-kanban-col--entregado .rep-kanban-col__head { background: rgba(100, 116, 139, 0.1); }
.rep-kanban-col--cancelado .rep-kanban-col__head { background: rgba(225, 29, 72, 0.08); }

.rep-kanban-col__title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--erp-ink);
  line-height: 1.25;
}

.rep-kanban-col__count {
  flex-shrink: 0;
  min-width: 1.5rem;
  padding: 0.15rem 0.45rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: center;
  border-radius: 999px;
  background: var(--erp-surface, var(--surface));
  border: 1px solid var(--erp-line);
  color: var(--erp-ink);
  font-variant-numeric: tabular-nums;
}

.rep-kanban-col__body {
  flex: 1;
  overflow-y: auto;
  padding: 0.55rem;
  min-height: 120px;
  overscroll-behavior: contain;
}

.rep-kanban-col__body--dragover {
  background: color-mix(in srgb, var(--erp-accent) 6%, var(--erp-surface));
}

.rep-kanban-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--erp-muted);
  border: 1px dashed color-mix(in srgb, var(--erp-muted) 28%, var(--erp-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--erp-muted) 4%, var(--erp-surface));
  pointer-events: none;
}

.rep-card {
  margin-bottom: 0.55rem;
  padding: 0.7rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--erp-line);
  background: var(--erp-surface, var(--surface));
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.rep-card:hover {
  border-color: color-mix(in srgb, var(--erp-accent) 35%, var(--erp-line));
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.rep-card:last-child {
  margin-bottom: 0;
}

.rep-card.opacity-50 {
  opacity: 0.55;
}

.rep-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}

.rep-card__orden {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--erp-accent) 12%, transparent);
  color: var(--erp-accent);
}

.rep-card__fecha {
  font-size: 0.6875rem;
  color: var(--erp-muted);
  white-space: nowrap;
}

.rep-card__equipo {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--erp-ink);
  line-height: 1.3;
  margin-bottom: 0.35rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rep-card__meta {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  font-size: 0.6875rem;
  color: var(--erp-muted);
  margin-bottom: 0.25rem;
  line-height: 1.35;
}

.rep-card__meta .ti {
  flex-shrink: 0;
  margin-top: 0.1rem;
  font-size: 0.8rem;
}

.rep-card__meta span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.rep-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--erp-line);
}

.rep-card__tec {
  font-size: 0.6875rem;
  color: var(--erp-muted);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rep-card__total {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--erp-accent);
  white-space: nowrap;
}

.rep-card__actions {
  margin-top: 0.5rem;
}

.rep-card__actions .erp-action-btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 767px) {
  .rep-module {
    --rep-board-offset: 20rem;
  }

  .rep-header-tools {
    width: 100%;
  }

  .rep-search-wrap {
    width: 100%;
    max-width: none;
  }

  .rep-header-tools #btn-nueva-orden {
    width: 100%;
  }

  .rep-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .rep-toolbar__stats {
    justify-content: flex-start;
  }

  .rep-kanban-col {
    flex-basis: 248px;
    width: 248px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rep-card:hover {
    transform: none;
  }
}

[data-bs-theme="dark"] .rep-toolbar,
[data-bs-theme="dark"] .rep-kanban-col,
[data-bs-theme="dark"] .rep-card,
[data-bs-theme="dark"] .rep-stat-pill {
  background: var(--erp-surface);
}

[data-bs-theme="dark"] .rep-toolbar__views {
  background: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] .rep-view-btn.is-active {
  background: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .rep-kanban-col__count {
  background: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .rep-kanban-empty {
  background: rgba(255, 255, 255, 0.03);
}

/* Forms dentro de módulos */
.erp-module .form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--erp-ink);
}

.erp-module .form-control,
.erp-module .form-select {
  border-radius: 8px;
  border-color: var(--erp-line);
  font-size: 0.8125rem;
  padding: 0.4rem 0.7rem !important;
}

.erp-module .form-control:focus,
.erp-module .form-select:focus {
  border-color: color-mix(in srgb, var(--erp-accent) 55%, var(--erp-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--erp-accent) 18%, transparent);
}

.erp-module .btn:not(.btn-icon):not(.erp-action-btn) {
  font-size: 0.8125rem !important;
  padding: 0.4rem 0.85rem !important;
}

.erp-module .btn-primary {
  background: linear-gradient(135deg, var(--erp-accent) 0%, color-mix(in srgb, var(--erp-accent) 80%, #0c4a6e) 100%);
  border: none;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--erp-accent) 40%, transparent);
}

.erp-module .btn-primary:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--erp-accent) 90%, #000) 0%, color-mix(in srgb, var(--erp-accent) 70%, #0c4a6e) 100%);
}

.erp-module .nav-pills .nav-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--erp-muted);
  border-radius: 10px !important;
  padding: 0.5rem 0.9rem !important;
}

.erp-module .nav-pills .nav-link.active {
  background: var(--erp-accent-soft) !important;
  color: var(--erp-accent) !important;
}

/* POS — punto de venta para cajero */
.pos-module {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  height: 100%;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.pos-session-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem 0.55rem;
  flex-shrink: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.28rem 0.55rem;
  border-radius: 10px;
  border: 1px solid var(--erp-line);
  background: var(--erp-surface);
  box-shadow: var(--shadow-xs);
}

.pos-session-bar__primary,
.pos-session-bar__meta,
.pos-session-bar__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.pos-session-bar__meta {
  margin-left: auto;
}

.pos-session-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--erp-muted);
  background: color-mix(in srgb, var(--erp-muted) 8%, transparent);
  border: 1px solid var(--erp-line);
  white-space: nowrap;
}

.pos-session-chip .ti {
  font-size: 0.9rem;
  opacity: 0.85;
}

.pos-session-chip--live {
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
  border-color: rgba(5, 150, 105, 0.2);
}

[data-bs-theme="dark"] .pos-session-chip--live {
  color: #6ee7b7;
  background: rgba(5, 150, 105, 0.18);
  border-color: rgba(5, 150, 105, 0.28);
}

.pos-session-chip--warn {
  color: #d97706;
  background: rgba(217, 119, 6, 0.1);
  border-color: rgba(217, 119, 6, 0.2);
}

[data-bs-theme="dark"] .pos-session-chip--warn {
  color: #fcd34d;
  background: rgba(217, 119, 6, 0.16);
  border-color: rgba(217, 119, 6, 0.28);
}

.pos-session-chip--scan {
  color: var(--erp-accent);
  background: var(--erp-accent-soft);
  border-color: color-mix(in srgb, var(--erp-accent) 22%, transparent);
}

.pos-session-bar__admin {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 0.35rem;
  border-left: 1px solid var(--erp-line);
  margin-left: 0.15rem;
}

.pos-session-bar__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--erp-muted);
  white-space: nowrap;
}

.pos-session-sede-select {
  min-width: 9.5rem;
  max-width: 13rem;
}

.pos-gate-card {
  max-width: 28rem;
  margin: 2.5rem auto;
  padding: 2rem 1.75rem;
  text-align: center;
  border-radius: var(--erp-radius);
  border: 1px solid var(--erp-line);
  background: var(--erp-surface);
  box-shadow: var(--shadow-sm);
}

.pos-gate-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  font-size: 1.35rem;
  color: #d97706;
  background: rgba(217, 119, 6, 0.1);
}

.pos-gate-card__title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--erp-ink);
}

.pos-gate-card__text {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  color: var(--erp-muted);
  line-height: 1.5;
}

.pos-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 0.75rem;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

@media (max-width: 991.98px) {
  .pos-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(280px, 48vh) minmax(320px, 1fr);
  }
}

.pos-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  align-self: stretch;
  border-radius: var(--erp-radius);
  border: 1px solid var(--erp-line);
  background: var(--erp-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.pos-panel--catalog {
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--erp-accent) 55%, transparent),
    var(--shadow-sm);
}

.pos-panel--sale {
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--erp-accent) 28%, transparent),
    var(--shadow-sm);
}

.pos-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-shrink: 0;
  min-height: 2.75rem;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--erp-line);
  background: color-mix(in srgb, var(--erp-surface) 92%, var(--canvas));
}

.pos-panel__head--sale {
  background: color-mix(in srgb, var(--erp-accent) 5%, var(--erp-surface));
  min-height: 2.75rem;
}

.pos-panel__heading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.pos-panel__heading-text {
  min-width: 0;
}

.pos-step-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #fff;
  background: var(--erp-accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--erp-accent) 30%, transparent);
}

.pos-step-badge--sale {
  background: color-mix(in srgb, var(--erp-accent) 78%, #0f172a);
}

.pos-panel__step {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--erp-accent);
  line-height: 1.2;
}

.pos-panel__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--erp-ink);
  line-height: 1.2;
}

.pos-panel__hint {
  display: none;
}

.pos-kbd-hint {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 0.45rem;
  border-radius: 7px;
  border: 1px solid var(--erp-line);
  background: var(--canvas);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--erp-muted);
}

.pos-cart-count {
  flex-shrink: 0;
  align-self: center;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--erp-accent);
  background: var(--erp-accent-soft);
  border: 1px solid color-mix(in srgb, var(--erp-accent) 20%, transparent);
}

.pos-panel__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.pos-panel__body--catalog {
  gap: 0;
}

.pos-toolbar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--erp-line);
  background: color-mix(in srgb, var(--erp-surface) 96%, var(--canvas));
}

.pos-search-wrap {
  flex-shrink: 0;
  padding: 0.45rem 0.65rem 0.3rem;
  border-bottom: none;
}

.pos-search-input {
  border-radius: 9px !important;
  font-size: 0.875rem !important;
  font-weight: 500;
  min-height: 2.35rem;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
}

.pos-categories {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  flex-shrink: 0;
  padding: 0 0.65rem 0.4rem;
  overflow-x: auto;
  border-bottom: none;
  scrollbar-width: thin;
}

.pos-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.45rem;
  -webkit-overflow-scrolling: touch;
}

.pos-panel__body--sale {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

.pos-cart-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  -webkit-overflow-scrolling: touch;
}

.pos-cart-line {
  display: flex;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem;
  border-radius: 10px;
  border: 1px solid var(--erp-line);
  background: var(--erp-surface);
}

.pos-cart-line__media {
  flex-shrink: 0;
}

.pos-cart-line__img,
.pos-cart-line__fallback {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  object-fit: cover;
}

.pos-cart-line__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--erp-accent);
  background: var(--erp-accent-soft);
  border: 1px solid color-mix(in srgb, var(--erp-accent) 18%, transparent);
}

.pos-cart-line__body {
  flex: 1;
  min-width: 0;
}

.pos-cart-line__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.pos-cart-line__name {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--erp-ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pos-cart-line__subtotal {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--erp-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pos-cart-line__unit {
  font-size: 0.75rem;
  color: var(--erp-muted);
  margin-bottom: 0.3rem;
}

.pos-cart-line__disc {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #e11d48;
  background: rgba(225, 29, 72, 0.1);
}

.pos-cart-line__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pos-cart-line__qty {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.pos-cart-line__qty-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--erp-muted);
}

.pos-qty-stepper {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  height: 2.125rem;
  border-radius: 9px;
  border: 1px solid var(--erp-line);
  background: var(--canvas);
  overflow: hidden;
}

.pos-qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-width: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  color: var(--erp-ink);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pos-qty-btn:hover {
  background: color-mix(in srgb, var(--erp-accent) 10%, transparent);
  color: var(--erp-accent);
}

.pos-qty-btn:focus-visible {
  outline: 2px solid var(--erp-accent);
  outline-offset: -2px;
  z-index: 1;
}

.pos-qty-input {
  width: 2.5rem;
  min-width: 2.5rem;
  max-width: 3.25rem;
  padding: 0 0.15rem;
  border: none;
  border-left: 1px solid var(--erp-line);
  border-right: 1px solid var(--erp-line);
  background: var(--erp-surface);
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--erp-ink);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}

.pos-qty-input::-webkit-outer-spin-button,
.pos-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pos-qty-input:focus {
  outline: none;
  background: color-mix(in srgb, var(--erp-accent) 6%, var(--erp-surface));
}

.pos-qty-fixed {
  display: inline-flex;
  align-items: center;
  height: 2.125rem;
  padding: 0 0.65rem;
  border-radius: 9px;
  border: 1px solid var(--erp-line);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--erp-ink);
  background: var(--canvas);
}

.pos-cart-line__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.pos-cart-line__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--erp-line);
  background: var(--erp-surface);
  color: var(--erp-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.pos-cart-line__action:hover {
  border-color: color-mix(in srgb, var(--erp-accent) 35%, var(--erp-line));
  color: var(--erp-accent);
  background: var(--erp-accent-soft);
}

.pos-cart-line__action--danger:hover {
  border-color: rgba(225, 29, 72, 0.35);
  color: #e11d48;
  background: rgba(225, 29, 72, 0.08);
}

.pos-cart-line__imei {
  margin-top: 0.55rem;
}

.pos-cart-line__imei .form-control {
  font-size: 0.8125rem;
}

.pos-totals {
  flex-shrink: 0;
  padding: 0.5rem 0.7rem 0.65rem;
  border-top: 1px solid var(--erp-line);
  background: color-mix(in srgb, var(--erp-surface) 94%, var(--canvas));
}

.pos-totals__lines {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.pos-totals__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  font-size: 0.8125rem;
  color: var(--erp-ink);
}

.pos-totals__row--muted {
  color: var(--erp-muted);
  font-size: 0.78rem;
}

.pos-totals__val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pos-totals__grand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0.35rem 0 0.5rem;
  padding: 0.4rem 0 0;
  border-top: 1px dashed var(--erp-line);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--erp-ink);
}

.pos-totals__grand-val {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--erp-accent);
  font-variant-numeric: tabular-nums;
}

.pos-checkout-btn {
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  min-height: 2.5rem;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--erp-accent) 28%, transparent);
}

.pos-checkout-btn:disabled {
  box-shadow: none;
}

.pos-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 5.5rem;
  padding: 0.85rem 1rem;
  text-align: center;
  color: var(--erp-muted);
  font-size: 0.8125rem;
}

.pos-empty--compact {
  min-height: 7rem;
  padding: 1.25rem 1rem;
}

.pos-empty .ti {
  font-size: 1.75rem;
  opacity: 0.35;
}

.pos-empty p {
  margin: 0;
  max-width: 16rem;
  line-height: 1.45;
}

/* POS: viewport fijo bajo el topbar — el page-body ocupa el resto; scroll solo en catálogo/carrito */
body:has(.page-body .pos-module) {
  overflow: hidden;
  height: 100%;
}

body:has(.page-body .pos-module) .page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

body:has(.page-body .pos-module) .page-wrapper > .navbar.erp-topbar,
body:has(.page-body .pos-module) .page-wrapper > .navbar {
  flex-shrink: 0;
}

.page-body:has(.pos-module) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  padding-top: 0.15rem !important;
  padding-bottom: 0.25rem !important;
  overflow: hidden;
}

.page-body:has(.pos-module) > .container-xl {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.pos-module {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
}

.pos-workspace {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
}

.pos-panel--sale .pos-totals {
  padding: 0.4rem 0.65rem 0.5rem;
}

.pos-panel--sale .pos-totals__grand {
  margin: 0.25rem 0 0.4rem;
  padding-top: 0.3rem;
}

.pos-panel--sale .pos-checkout-btn {
  min-height: 2.35rem;
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
}

@media (max-width: 991.98px) {
  body:has(.page-body .pos-module) {
    overflow: auto;
    height: auto;
  }

  body:has(.page-body .pos-module) .page-wrapper {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .page-body:has(.pos-module) {
    height: auto !important;
    max-height: none !important;
    min-height: calc(100dvh - var(--erp-shell-header-height)) !important;
    overflow: auto;
  }

  .page-body:has(.pos-module) > .container-xl {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .pos-module {
    height: auto;
    max-height: none;
  }

  .pos-workspace {
    height: auto;
    max-height: none;
  }

  .pos-panel {
    height: auto;
    max-height: none;
    min-height: 22rem;
  }

  .pos-panel--catalog .pos-results {
    max-height: 42vh;
  }

  .pos-panel--sale .pos-cart-scroll {
    max-height: 40vh;
  }
}

.pos-module .card {
  border-radius: var(--erp-radius) !important;
}

.pos-module .pos-product-card {
  border-color: var(--erp-line) !important;
}

.pos-module .btn-cat-filter.btn-primary {
  background-color: var(--erp-accent) !important;
  border-color: var(--erp-accent) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--erp-accent) 30%, transparent) !important;
}

/* POS — modo oscuro pulido (mostrador gaming) */
[data-bs-theme="dark"] .pos-module {
  --pos-elevated: color-mix(in srgb, var(--surface) 94%, var(--canvas));
  --pos-inset: color-mix(in srgb, var(--canvas) 88%, #000);
  --pos-rail: color-mix(in srgb, var(--accent-color) 52%, transparent);
}

[data-bs-theme="dark"] .page-body:has(.pos-module) {
  background: var(--canvas);
  background-image: none;
}

[data-bs-theme="dark"] .pos-session-bar {
  background: var(--pos-elevated);
  border-color: color-mix(in srgb, var(--accent-color) 10%, var(--border-hairline));
  box-shadow: 0 8px 28px -14px rgba(0, 0, 0, 0.55);
}

[data-bs-theme="dark"] .pos-panel {
  background: var(--pos-elevated);
  border-color: color-mix(in srgb, var(--accent-color) 8%, var(--border-hairline));
  box-shadow: 0 14px 40px -18px rgba(0, 0, 0, 0.62);
}

[data-bs-theme="dark"] .pos-panel--catalog {
  box-shadow:
    inset 3px 0 0 var(--pos-rail),
    0 14px 40px -18px rgba(0, 0, 0, 0.62);
}

[data-bs-theme="dark"] .pos-panel--sale {
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--accent-color) 28%, transparent),
    0 14px 40px -18px rgba(0, 0, 0, 0.62);
}

[data-bs-theme="dark"] .pos-panel__head {
  background: color-mix(in srgb, var(--pos-elevated) 88%, var(--canvas));
  border-bottom-color: var(--border-hairline);
}

[data-bs-theme="dark"] .pos-panel__head--sale {
  background: color-mix(in srgb, var(--accent-color) 5%, var(--pos-elevated));
}

[data-bs-theme="dark"] .pos-toolbar {
  background: color-mix(in srgb, var(--pos-elevated) 92%, var(--canvas));
  border-bottom-color: var(--border-hairline);
}

[data-bs-theme="dark"] .pos-search-wrap {
  background: transparent;
  border-bottom-color: transparent;
}

[data-bs-theme="dark"] .pos-search-input {
  background: var(--pos-inset) !important;
  border-color: var(--border-hairline) !important;
  color: var(--ink) !important;
}

[data-bs-theme="dark"] .pos-search-input::placeholder {
  color: var(--ink-muted);
}

[data-bs-theme="dark"] .pos-search-input:focus {
  border-color: color-mix(in srgb, var(--accent-color) 40%, var(--border-hairline)) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  background: color-mix(in srgb, var(--pos-inset) 88%, var(--surface)) !important;
}

[data-bs-theme="dark"] .pos-categories {
  background: transparent;
  border-bottom-color: transparent;
}

[data-bs-theme="dark"] .pos-results {
  background: var(--pos-inset);
}

[data-bs-theme="dark"] .pos-cat-pill {
  background: color-mix(in srgb, var(--surface) 38%, var(--canvas));
  border-color: var(--border-hairline);
  color: var(--ink-secondary);
}

[data-bs-theme="dark"] .pos-cat-pill:hover:not(.is-active) {
  background: color-mix(in srgb, var(--accent-color) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--accent-color) 26%, var(--border-hairline));
  color: var(--ink);
}

[data-bs-theme="dark"] .pos-cat-pill.is-active {
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent-color) 32%, transparent);
}

[data-bs-theme="dark"] .pos-product-card {
  background: color-mix(in srgb, var(--surface) 90%, var(--canvas)) !important;
  border-color: var(--border-hairline) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}

[data-bs-theme="dark"] .pos-product-card:hover {
  border-color: color-mix(in srgb, var(--accent-color) 32%, var(--border-hairline)) !important;
  box-shadow: 0 14px 28px -6px rgba(0, 0, 0, 0.48) !important;
}

[data-bs-theme="dark"] .pos-product-card-fallback {
  background: color-mix(in srgb, var(--ink-muted) 16%, var(--surface));
  color: var(--ink-muted);
}

[data-bs-theme="dark"] .pos-cart-scroll {
  background: var(--pos-inset);
}

[data-bs-theme="dark"] .pos-cart-line {
  background: color-mix(in srgb, var(--surface) 72%, var(--canvas));
  border-color: var(--border-hairline);
}

[data-bs-theme="dark"] .pos-totals {
  background: color-mix(in srgb, var(--pos-elevated) 78%, #000);
  border-top-color: var(--border-hairline);
}

[data-bs-theme="dark"] .pos-session-bar__admin {
  border-left-color: var(--border-hairline);
}

[data-bs-theme="dark"] .pos-kbd-hint {
  background: var(--pos-inset);
  border-color: var(--border-hairline);
  color: var(--ink-muted);
}

[data-bs-theme="dark"] .pos-qty-stepper {
  background: var(--pos-inset);
  border-color: var(--border-hairline);
}

[data-bs-theme="dark"] .pos-qty-input {
  background: color-mix(in srgb, var(--surface) 65%, var(--canvas));
}

[data-bs-theme="dark"] .pos-cart-count {
  border-color: color-mix(in srgb, var(--accent-color) 22%, var(--border-hairline));
}

[data-bs-theme="dark"] .pos-gate-card {
  background: var(--pos-elevated);
  border-color: var(--border-hairline);
  box-shadow: 0 14px 40px -18px rgba(0, 0, 0, 0.55);
}

[data-bs-theme="dark"] .pos-gate-card__icon {
  color: #fcd34d;
  background: rgba(217, 119, 6, 0.14);
}

.erp-module .btn-outline-primary {
  border-color: color-mix(in srgb, var(--erp-accent) 35%, var(--erp-line));
  color: var(--erp-accent);
  border-radius: 10px;
  font-weight: 600;
}

.erp-module .btn-outline-primary:hover {
  background: var(--erp-accent-soft);
  border-color: var(--erp-accent);
  color: var(--erp-accent);
}

/* Empty state */
.erp-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--erp-muted);
  font-size: 0.875rem;
}

.erp-empty .ti {
  font-size: 2rem;
  opacity: 0.35;
  display: block;
  margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════
   Dashboard — Centro de control (Servitec Gamers)
   ═══════════════════════════════════════════════════════════ */

.dash {
  --dash-ink: var(--erp-ink, #0c1222);
  --dash-muted: var(--erp-muted, #64748b);
  --dash-line: var(--erp-line, rgba(12, 18, 34, 0.08));
  --dash-cyan: var(--erp-accent, #0891b2);
  --dash-cyan-soft: var(--erp-accent-soft, rgba(8, 145, 178, 0.1));
  --dash-positive: var(--erp-positive, #059669);
  --dash-negative: var(--erp-negative, #e11d48);
  --dash-warn: var(--erp-warn, #d97706);
  --dash-surface: var(--erp-surface, #ffffff);
  --dash-radius: var(--erp-radius, 14px);
  animation: dash-enter 0.5s var(--ease-fluid) both;
}

[data-bs-theme="dark"] .dash {
  --dash-ink: #f1f5f9;
  --dash-muted: #94a3b8;
  --dash-line: rgba(255, 255, 255, 0.07);
  --dash-cyan-soft: rgba(34, 211, 238, 0.12);
  --dash-surface: #0d121f;
}

@keyframes dash-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dash { animation: none; }
  .dash-kpi { animation: none !important; }
}

/* Header */
.dash-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.35rem;
}

.dash-header__intro {
  min-width: 0;
}

.dash-header__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--dash-cyan);
  margin: 0 0 0.2rem;
}

.dash-header__title {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--dash-ink);
  margin: 0;
  line-height: 1.15;
}

.dash-header__sub {
  font-size: 0.875rem;
  color: var(--dash-muted);
  margin: 0.3rem 0 0;
}

.dash-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: flex-end;
}

.dash-filter {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}

.dash-filter__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dash-muted);
}

.dash-filters .form-select {
  min-width: 132px;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 10px;
  border-color: var(--dash-line);
  background-color: var(--dash-surface);
}

/* Pulse — period P&L vs open-register cash (theme-aware surface) */
.dash-pulse {
  --dash-pulse-bg: var(--dash-surface, var(--erp-surface, #ffffff));
  --dash-pulse-ink: var(--dash-ink, var(--erp-ink, #0c1222));
  --dash-pulse-muted: var(--dash-muted, var(--erp-muted, #64748b));
  --dash-pulse-line: var(--dash-line, var(--erp-line, rgba(12, 18, 34, 0.08)));
  --dash-pulse-panel: color-mix(in srgb, var(--dash-pulse-muted) 6%, var(--dash-pulse-bg));
  --dash-pulse-glow: color-mix(in srgb, var(--dash-cyan, #0891b2) 12%, transparent);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem 1.5rem;
  padding: 1.5rem 1.65rem 1.35rem;
  margin-bottom: 1.5rem;
  background: var(--dash-pulse-bg);
  border: 1px solid var(--dash-pulse-line);
  border-radius: var(--dash-radius, 14px);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(12, 18, 34, 0.04));
  overflow: hidden;
  color: var(--dash-pulse-ink);
}

@media (min-width: 768px) {
  .dash-pulse {
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    padding: 1.65rem 1.85rem 1.45rem;
  }
  .dash-pulse__bar-wrap {
    grid-column: 1 / -1;
  }
}

.dash-pulse__glow {
  pointer-events: none;
  position: absolute;
  inset: -40% -20% auto auto;
  width: 55%;
  height: 120%;
  background: radial-gradient(ellipse at center, var(--dash-pulse-glow) 0%, transparent 68%);
  opacity: 0.85;
}

.dash-pulse::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dash-cyan) 70%, #67e8f9), var(--dash-cyan));
  border-radius: 3px 0 0 3px;
}

.dash-pulse__main {
  position: relative;
  z-index: 1;
}

.dash-pulse__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dash-pulse-muted);
  margin: 0;
}

.dash-pulse__value {
  font-size: clamp(2rem, 5vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  margin: 0.35rem 0 0.2rem;
  color: var(--dash-pulse-ink);
}

.dash-pulse__value.is-positive { color: var(--dash-positive, #059669); }
.dash-pulse__value.is-negative { color: var(--dash-negative, #e11d48); }

.dash-pulse__sub {
  font-size: 0.8125rem;
  color: var(--dash-pulse-muted);
  margin: 0;
  max-width: 32rem;
  line-height: 1.45;
}

.dash-pulse__side {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.dash-pulse__group-label {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dash-pulse-muted);
}

.dash-pulse__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 575px) {
  .dash-pulse__stats { grid-template-columns: 1fr; }
}

.dash-pulse__stat {
  padding: 0.6rem 0.75rem;
  background: var(--dash-pulse-panel);
  border-radius: 10px;
  border: 1px solid var(--dash-pulse-line);
}

.dash-pulse__stat-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dash-pulse-muted);
  margin-bottom: 0.15rem;
}

.dash-pulse__stat-value {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--dash-pulse-ink);
}

.dash-pulse__stat--in .dash-pulse__stat-value { color: var(--dash-cyan, #0891b2); }
.dash-pulse__stat--out .dash-pulse__stat-value { color: var(--dash-negative, #e11d48); }

.dash-pulse__cash {
  padding: 0.7rem 0.85rem;
  background: color-mix(in srgb, var(--dash-pulse-muted) 5%, var(--dash-pulse-bg));
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--dash-pulse-muted) 35%, var(--dash-pulse-line));
  border-left: 3px solid color-mix(in srgb, var(--dash-pulse-muted) 55%, var(--dash-pulse-line));
}

.dash-pulse__cash .dash-pulse__stat-value {
  color: var(--dash-pulse-ink);
  font-size: 1.05rem;
}

.dash-pulse__cash-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--dash-pulse-muted);
}

.dash-pulse__bar-wrap {
  position: relative;
  z-index: 1;
  height: 5px;
  background: color-mix(in srgb, var(--dash-pulse-muted) 12%, var(--dash-pulse-bg));
  border-radius: 99px;
  overflow: hidden;
}

.dash-pulse__bar {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--dash-cyan), color-mix(in srgb, var(--dash-cyan) 55%, #67e8f9));
  transition: width 0.6s var(--ease-fluid);
}

/* KPI board */
.dash-section {
  margin-bottom: 1.75rem;
}

.dash-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding-left: 0.15rem;
}

.dash-section__title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dash-muted);
  margin: 0;
}

.dash-section__hint {
  font-size: 0.75rem;
  color: var(--dash-muted);
}

.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

@media (min-width: 768px) {
  .dash-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 992px) {
  .dash-kpi-grid--op { grid-template-columns: repeat(3, 1fr); }
  .dash-kpi-grid--fin { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .dash-kpi-grid--fin { grid-template-columns: repeat(2, 1fr); }
  .dash-kpi-grid--6 { grid-template-columns: repeat(3, 1fr); }

  .dash-kpi-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "op op"
      "fin-caja fin-periodo";
    gap: 1rem;
  }

  .dash-kpi-group--op { grid-area: op; }
  .dash-kpi-group--fin-caja { grid-area: fin-caja; }
  .dash-kpi-group--fin-periodo { grid-area: fin-periodo; }
}

.dash-kpi-board {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dash-kpi-group {
  background: var(--dash-surface);
  border: 1px solid var(--dash-line);
  border-radius: var(--dash-radius);
  padding: 1rem 1.05rem 1.1rem;
  box-shadow: var(--shadow-xs);
}

.dash-kpi-group--op {
  border-top: 3px solid var(--dash-cyan);
}

.dash-kpi-group--fin-caja {
  border-top: 3px solid #6366f1;
}

.dash-kpi-group--fin-periodo {
  border-top: 3px solid #d97706;
}

.dash-kpi-group__head {
  margin-bottom: 0.75rem;
}

.dash-kpi-group__title {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dash-ink);
  margin: 0;
}

.dash-kpi-group__hint {
  font-size: 0.75rem;
  color: var(--dash-muted);
  margin: 0.15rem 0 0;
}

.dash-kpi {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.65rem 0.75rem;
  padding: 0.85rem 0.9rem;
  background: color-mix(in srgb, var(--dash-surface) 96%, var(--canvas, #f1f5f9));
  border: 1px solid var(--dash-line);
  border-radius: 11px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.25s var(--ease-fluid), box-shadow 0.25s var(--ease-fluid), border-color 0.25s, background 0.2s;
  animation: dash-kpi-in 0.45s var(--ease-fluid) both;
}

.dash-kpi:nth-child(1) { animation-delay: 0.04s; }
.dash-kpi:nth-child(2) { animation-delay: 0.08s; }
.dash-kpi:nth-child(3) { animation-delay: 0.12s; }
.dash-kpi:nth-child(4) { animation-delay: 0.16s; }
.dash-kpi:nth-child(5) { animation-delay: 0.2s; }
.dash-kpi:nth-child(6) { animation-delay: 0.24s; }

@keyframes dash-kpi-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.dash-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--dash-cyan) 22%, var(--dash-line));
  color: inherit;
  text-decoration: none;
}

.dash-kpi:hover .dash-kpi__arrow {
  color: var(--dash-cyan);
  opacity: 1;
  transform: translate(2px, -2px);
}

.dash-kpi--active {
  transform: scale(0.98);
  border-color: var(--dash-cyan) !important;
  box-shadow: 0 0 0 3px var(--dash-cyan-soft);
}

.dash-kpi:focus-visible {
  outline: 2px solid var(--dash-cyan);
  outline-offset: 2px;
}

.dash-kpi__icon {
  flex-shrink: 0;
  width: 2.125rem;
  height: 2.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: 1.05rem;
}

.dash-kpi__body {
  min-width: 0;
}

.dash-kpi__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dash-muted);
  line-height: 1.3;
}

.dash-kpi__value {
  display: block;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--dash-ink);
  line-height: 1.25;
  margin-top: 0.08rem;
}

.dash-kpi__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.875rem;
  color: var(--dash-muted);
  opacity: 0.45;
  transition: color 0.2s, opacity 0.2s, transform 0.2s var(--ease-fluid);
}

.dash-panel--highlight {
  animation: dash-highlight 1.5s var(--ease-fluid);
}

@keyframes dash-highlight {
  0%, 100% { box-shadow: var(--shadow-xs); }
  25% { box-shadow: 0 0 0 3px var(--dash-cyan-soft), var(--shadow-md); }
}

.dash-section.dash-panel--highlight {
  border-radius: var(--dash-radius);
}

.dash-columns {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 992px) {
  .dash-columns--2 {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Bento panels */
.dash-panel {
  background: var(--dash-surface);
  border: 1px solid var(--dash-line);
  border-radius: var(--dash-radius);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  height: 100%;
}

.dash-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--dash-line);
}

.dash-panel__title {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dash-ink);
  margin: 0;
}

.dash-panel__body {
  padding: 1.25rem;
}

.dash-panel__body--chart {
  padding: 1rem 1.25rem 1.25rem;
}

.dash-chart-wrap {
  position: relative;
  height: 300px;
  width: 100%;
}

.dash-chart-wrap--sm {
  height: 260px;
}

/* Quick links */
.dash-quick {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dash-quick__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--dash-line);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}

.dash-quick__item:last-child {
  border-bottom: none;
}

.dash-quick__item:hover {
  background: var(--dash-cyan-soft);
  color: inherit;
  text-decoration: none;
}

.dash-quick__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dash-quick__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--dash-ink);
}

.dash-quick__desc {
  font-size: 0.75rem;
  color: var(--dash-muted);
  margin-top: 0.1rem;
}

/* Gasto total block */
.dash-gasto-hero {
  text-align: center;
  padding: 1.5rem 1rem;
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.04), rgba(225, 29, 72, 0.01));
  border: 1px solid var(--dash-line);
  border-radius: 12px;
  height: 100%;
}

.dash-gasto-hero__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dash-muted);
}

.dash-gasto-hero__value {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--dash-negative);
  margin: 0.35rem 0;
  font-variant-numeric: tabular-nums;
}

.dash-origen-card {
  padding: 0.85rem 1rem;
  background: var(--dash-surface);
  border: 1px solid var(--dash-line);
  border-radius: 10px;
  height: 100%;
  border-top-width: 3px;
}

.dash-origen-card__name {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--dash-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-origen-card__value {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--dash-negative);
  font-variant-numeric: tabular-nums;
  margin-top: 0.15rem;
}

.dash-origen-card__pct {
  font-size: 0.6875rem;
  color: var(--dash-muted);
}

.dash-table-wrap {
  max-height: 320px;
  overflow-y: auto;
}

.dash-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--dash-surface) !important;
}

.dash-empty {
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.875rem;
  color: var(--dash-muted);
}

.dash-kpi__value.text-success { color: var(--dash-positive) !important; }
.dash-kpi__value.text-danger { color: var(--dash-negative) !important; }

/* ═══════════════════════════════════════════════════════════
   Compras — módulo de abastecimiento
   ═══════════════════════════════════════════════════════════ */

.compras-module {
  --cp-ink: var(--erp-ink, #0c1222);
  --cp-muted: var(--erp-muted, #64748b);
  --cp-line: var(--erp-line, rgba(12, 18, 34, 0.08));
  --cp-cyan: var(--erp-accent, #0891b2);
  --cp-caja: #e11d48;
  --cp-ext: #d97706;
  --cp-trans: var(--erp-accent, #0891b2);
  --cp-otro: #64748b;
  --cp-surface: var(--erp-surface, #ffffff);
  --cp-radius: calc(var(--erp-radius, 14px) - 2px);
}

[data-bs-theme="dark"] .compras-module {
  --cp-ink: #f1f5f9;
  --cp-muted: #94a3b8;
  --cp-line: rgba(255, 255, 255, 0.08);
  --cp-surface: #0d121f;
}

.compras-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cp-line);
}

.compras-header__eyebrow {
  font-family: ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cp-cyan);
  margin-bottom: 0.35rem;
}

.compras-header__title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--cp-ink);
}

.compras-header__sub {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--cp-muted);
}

.compras-shell {
  border-radius: var(--cp-radius);
  border-color: var(--cp-line) !important;
  overflow: hidden;
}

.compras-tabs-head {
  background: var(--cp-surface);
  border-bottom: 1px solid var(--cp-line) !important;
}

.compras-oc-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.compras-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}

@media (min-width: 992px) {
  .compras-summary-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.compras-stat-card {
  padding: 0.85rem 1rem;
  background: var(--cp-surface);
  border: 1px solid var(--cp-line);
  border-radius: 10px;
}

.compras-stat-card--accent {
  border-top: 3px solid var(--cp-cyan);
}

.compras-stat-card__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cp-muted);
  margin-bottom: 0.25rem;
}

.compras-stat-card__value {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--cp-ink);
}

.compras-stat-card__value--danger { color: var(--cp-caja); }
.compras-stat-card__value--sm { font-size: 0.875rem; font-weight: 600; }

.compras-stat-card__fuente { margin-top: 0.15rem; }

.compras-origen-panel {
  padding: 1rem 1.15rem;
  background: color-mix(in srgb, var(--cp-cyan) 4%, var(--cp-surface));
  border: 1px solid var(--cp-line);
  border-radius: 10px;
}

.compras-origen-panel__title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cp-muted);
  margin: 0 0 0.25rem;
}

.compras-origen-panel__hint {
  font-size: 0.8125rem;
  color: var(--cp-muted);
  margin: 0 0 0.85rem;
}

.compras-origen-keys {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 576px) {
  .compras-origen-keys { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .compras-origen-keys { grid-template-columns: repeat(4, 1fr); }
}

.compras-origen-key {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  background: var(--cp-surface);
  border: 1px solid var(--cp-line);
  border-radius: 8px;
}

.compras-origen-key__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.35rem;
  flex-shrink: 0;
}

.compras-origen-key--caja_efectivo .compras-origen-key__dot { background: var(--cp-caja); }
.compras-origen-key--transferencia_empresa .compras-origen-key__dot { background: var(--cp-trans); }
.compras-origen-key--efectivo_externo .compras-origen-key__dot { background: var(--cp-ext); }
.compras-origen-key--otro .compras-origen-key__dot { background: var(--cp-otro); }

.compras-origen-key__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.compras-origen-key__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cp-ink);
  line-height: 1.25;
}

.compras-origen-key__desc {
  font-size: 0.6875rem;
  color: var(--cp-muted);
  line-height: 1.3;
}

.compras-table-panel {
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius);
  overflow: hidden;
  background: var(--cp-surface);
}

.compras-table-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--cp-line);
  background: color-mix(in srgb, var(--cp-ink) 2%, var(--cp-surface));
}

.compras-table-panel__title {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0;
  color: var(--cp-ink);
}

.compras-table-panel__count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cp-muted);
}

.compras-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compras-table thead th {
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cp-muted) !important;
  white-space: nowrap;
  padding: 0.65rem 0.85rem !important;
  background: var(--cp-surface) !important;
  border-bottom: 1px solid var(--cp-line) !important;
}

.compras-table tbody td {
  padding: 0.75rem 0.85rem !important;
  vertical-align: middle;
  border-color: var(--cp-line) !important;
  font-size: 0.8125rem;
}

.compras-row:hover td {
  background: color-mix(in srgb, var(--cp-cyan) 3%, transparent);
}

.compras-oc-id {
  display: inline-block;
  font-family: ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--cp-cyan) 12%, transparent);
  color: var(--cp-cyan);
  white-space: nowrap;
}

.compras-td-prov {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--cp-ink);
}

.compras-td-sede,
.compras-td-date {
  color: var(--cp-muted);
  white-space: nowrap;
}

.compras-td-total {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--cp-ink);
}

.compras-estado-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.compras-pill {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  white-space: nowrap;
}

.compras-pill--ok { background: #dcfce7; color: #166534; }
.compras-pill--warn { background: #fef3c7; color: #92400e; }
.compras-pill--danger { background: #fee2e2; color: #991b1b; }
.compras-pill--info { background: #e0f2fe; color: #075985; }
.compras-pill--muted { background: #f1f5f9; color: #64748b; }

[data-bs-theme="dark"] .compras-pill--ok { background: rgba(22, 101, 52, 0.25); color: #86efac; }
[data-bs-theme="dark"] .compras-pill--warn { background: rgba(146, 64, 14, 0.25); color: #fcd34d; }
[data-bs-theme="dark"] .compras-pill--danger { background: rgba(153, 27, 27, 0.25); color: #fca5a5; }

.compras-origen-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

.compras-origen-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.3;
}

.compras-origen-badge--caja_efectivo { background: rgba(225, 29, 72, 0.1); color: var(--cp-caja); }
.compras-origen-badge--transferencia_empresa { background: rgba(8, 145, 178, 0.12); color: var(--cp-trans); }
.compras-origen-badge--efectivo_externo { background: rgba(217, 119, 6, 0.12); color: var(--cp-ext); }
.compras-origen-badge--otro { background: rgba(100, 116, 139, 0.12); color: var(--cp-otro); }

.compras-sin-detalle {
  font-size: 0.6875rem;
  color: var(--cp-muted);
  font-style: italic;
}

.compras-th-actions,
.compras-td-actions {
  min-width: 7.5rem;
}

.compras-empty {
  color: var(--cp-muted);
}

.compras-pagos-table {
  border: 1px solid var(--cp-line);
  border-radius: 8px;
  overflow: hidden;
}

/* —— Cotización documento (estilo factura Siigo) —— */
.cot-doc-modal-body {
  background: #eef1f5;
  padding: 1.25rem !important;
}

.cot-doc {
  --cot-blue: #1a56a8;
  --cot-border: #7a92a8;
  --cot-gray: #e9ecef;
  --cot-ink: #1a1a1a;
  --cot-muted: #4a5568;

  max-width: 820px;
  margin: 0 auto;
  padding: 1.25rem 1.35rem 0.75rem;
  background: #fff;
  color: var(--cot-ink);
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-size: 0.8125rem;
  border: 1px solid var(--cot-border);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
}

.cot-doc__header {
  display: grid;
  grid-template-columns: 1fr auto 180px;
  gap: 1rem;
  align-items: start;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #cbd5e1;
  margin-bottom: 0.75rem;
}

.cot-doc__empresa-nombre {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.cot-doc__logo {
  display: block;
  max-width: 180px;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: 0.5rem;
}

.cot-doc__empresa p {
  margin: 0 0 0.15rem;
  font-size: 0.6875rem;
  color: var(--cot-muted);
  line-height: 1.35;
}

.cot-doc__qr-placeholder {
  width: 76px;
  height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  border: 1px solid #cbd5e1;
  background: #fafbfc;
  font-size: 0.5625rem;
  color: var(--cot-muted);
  text-align: center;
  word-break: break-all;
  padding: 0.25rem;
}

.cot-doc__qr-placeholder i {
  font-size: 1.75rem;
  opacity: 0.35;
}

.cot-doc__doc-id-inner {
  min-height: 88px;
  padding: 1rem 0.75rem;
  background: var(--cot-blue);
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
}

.cot-doc__doc-id-inner strong {
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
}

.cot-doc__doc-id-inner span {
  font-size: 0.8125rem;
  font-weight: 600;
}

.cot-doc__doc-id-inner small {
  font-size: 0.625rem;
  opacity: 0.85;
  text-transform: uppercase;
}

.cot-doc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  margin-bottom: 0.75rem;
}

.cot-doc__grid h2 {
  margin: 0 0 0.4rem;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cot-ink);
}

.cot-doc__grid dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.75rem;
}

.cot-doc__grid dt {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cot-muted);
}

.cot-doc__grid dd {
  margin: 0;
  font-size: 0.75rem;
  color: var(--cot-ink);
}

.cot-doc__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.85rem;
  font-size: 0.75rem;
}

.cot-doc__table th {
  background: var(--cot-gray);
  padding: 0.45rem 0.4rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid #cbd5e1;
  text-align: left;
}

.cot-doc__table th:nth-child(3),
.cot-doc__table th:nth-child(4) {
  text-align: center;
}

.cot-doc__table th:nth-child(5),
.cot-doc__table th:nth-child(6) {
  text-align: right;
}

.cot-doc__table td {
  padding: 0.4rem;
  border: 1px solid #e2e8f0;
  vertical-align: top;
}

.cot-doc__table td:nth-child(1) { width: 11%; }
.cot-doc__table td:nth-child(2) { width: 36%; }
.cot-doc__table td:nth-child(3) { width: 8%; text-align: center; }
.cot-doc__table td:nth-child(4) { width: 7%; text-align: center; }
.cot-doc__table td:nth-child(5),
.cot-doc__table td:nth-child(6) { text-align: right; white-space: nowrap; }

.cot-doc__row-empty td {
  height: 1.35rem;
}

.cot-doc__footer {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.cot-doc__footer-left h3 {
  margin: 0 0 0.2rem;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cot-doc__footer-left p {
  margin: 0 0 0.65rem;
  font-size: 0.75rem;
  color: var(--cot-muted);
  line-height: 1.4;
}

.cot-doc__totals {
  border: 1px solid #cbd5e1;
}

.cot-doc__total-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  font-size: 0.75rem;
  border-bottom: 1px solid #e2e8f0;
}

.cot-doc__total-row--final {
  background: var(--cot-gray);
  font-weight: 800;
  border-bottom: none;
}

.cot-doc__legal {
  margin: 0 0 1.25rem;
  font-size: 0.625rem;
  color: var(--cot-muted);
  line-height: 1.45;
  max-width: 72%;
}

.cot-doc__signatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 0.75rem;
}

.cot-doc__signatures span {
  display: block;
  border-top: 1px solid var(--cot-ink);
  margin-bottom: 0.25rem;
}

.cot-doc__signatures small {
  font-size: 0.625rem;
  color: var(--cot-muted);
}

.cot-doc__page-bar {
  display: flex;
  justify-content: space-between;
  margin: 0 -1.35rem;
  padding: 0.35rem 1.35rem;
  background: var(--cot-gray);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--cot-muted);
  text-transform: uppercase;
}

/* Factura de venta — layout Siigo (logo | empresa | QR + 3 columnas) */
.cot-doc__header--factura {
  grid-template-columns: 140px 1fr 76px;
}

.cot-doc__logo-wrap {
  display: flex;
  align-items: flex-start;
}

.cot-doc__logo-wrap .cot-doc__logo {
  margin-bottom: 0;
  max-width: 120px;
  max-height: 64px;
}

.cot-doc__empresa--center {
  text-align: center;
}

.cot-doc__empresa--center .cot-doc__empresa-nombre {
  font-size: 0.9375rem;
}

.cot-doc__legal-line {
  margin-top: 0.35rem !important;
  font-style: italic;
}

.cot-doc__grid--3 {
  grid-template-columns: 1fr 1fr 180px;
  align-items: start;
}

.cot-doc__items-count {
  margin: -0.5rem 0 0.75rem;
  font-size: 0.6875rem;
  color: var(--cot-muted);
}

.cot-doc__qr-svg {
  display: block;
  flex-shrink: 0;
}

.cot-doc__qr-placeholder--print {
  width: 72px;
  min-height: 72px;
}

@media screen and (max-width: 767px) {
  .cot-doc__header {
    grid-template-columns: 1fr;
  }

  .cot-doc__doc-id {
    order: -1;
  }

  .cot-doc__doc-id-inner {
    min-height: auto;
    padding: 0.75rem;
  }

  .cot-doc__grid,
  .cot-doc__grid--3,
  .cot-doc__footer {
    grid-template-columns: 1fr;
  }

  .cot-doc__header--factura {
    grid-template-columns: 1fr;
  }

  .cot-doc__table {
    font-size: 0.6875rem;
  }

  .cot-doc__table th:nth-child(1),
  .cot-doc__table td:nth-child(1) {
    display: none;
  }
}

@media print {
  @page doc-a4 {
    size: A4 portrait;
    margin: 8mm;
  }

  @page pos-ticket {
    size: 80mm auto;
    margin: 0;
  }

  body * {
    visibility: hidden;
  }

  /* Cotización — impresión vía host fuera del modal */
  body.printing-cotizacion * {
    visibility: hidden;
  }

  body.printing-cotizacion #cotizacion-print-host,
  body.printing-cotizacion #cotizacion-print-host * {
    visibility: visible;
  }

  body.printing-cotizacion #cotizacion-print-host {
    display: block !important;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    z-index: 99999;
    background: #fff;
  }

  body.printing-cotizacion #cotizacion-print-host .cot-doc {
    page: doc-a4;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 6mm 8mm 4mm;
    box-shadow: none;
    border: 1px solid #7a92a8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8.5pt;
    line-height: 1.3;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.printing-cotizacion #cotizacion-print-host .cot-doc__header {
    display: grid !important;
    grid-template-columns: 1fr auto 148px !important;
    gap: 8px !important;
    align-items: start !important;
    page-break-inside: avoid;
  }

  body.printing-cotizacion #cotizacion-print-host .cot-doc__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    page-break-inside: avoid;
  }

  body.printing-cotizacion #cotizacion-print-host .cot-doc__footer {
    display: grid !important;
    grid-template-columns: 1fr 168px !important;
    gap: 8px !important;
    page-break-inside: avoid;
  }

  body.printing-cotizacion #cotizacion-print-host .cot-doc__doc-id-inner {
    background: #1a56a8 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.printing-cotizacion #cotizacion-print-host .cot-doc__table th {
    background: #e9ecef !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.printing-cotizacion #cotizacion-print-host .cot-doc__table th:nth-child(1),
  body.printing-cotizacion #cotizacion-print-host .cot-doc__table td:nth-child(1) {
    display: table-cell !important;
  }

  body.printing-cotizacion #cotizacion-print-host .cot-doc__total-row--final,
  body.printing-cotizacion #cotizacion-print-host .cot-doc__page-bar {
    background: #e9ecef !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.printing-cotizacion #cotizacion-print-host .cot-doc__row-empty td {
    height: 12px;
    padding: 1px 4px !important;
  }

  body.printing-cotizacion #cotizacion-print-host .cot-doc__qr-placeholder i {
    display: none !important;
  }

  body.printing-cotizacion #cotizacion-print-host .cot-doc__logo {
    max-width: 88px;
    max-height: 52px;
  }

  /* Factura — impresión vía host fuera del modal */
  body.printing-factura * {
    visibility: hidden;
  }

  body.printing-factura #factura-print-host,
  body.printing-factura #factura-print-host * {
    visibility: visible;
  }

  body.printing-factura #factura-print-host {
    display: block !important;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    z-index: 99999;
    background: #fff;
  }

  body.printing-factura #factura-print-host .cot-doc {
    page: doc-a4;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 6mm 8mm 4mm;
    box-shadow: none;
    border: 1px solid #7a92a8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8.5pt;
    line-height: 1.3;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.printing-factura #factura-print-host .cot-doc__header--factura {
    display: grid !important;
    grid-template-columns: 95px 1fr 72px !important;
    gap: 6px !important;
    align-items: start !important;
    page-break-inside: avoid;
  }

  body.printing-factura #factura-print-host .cot-doc__grid--3 {
    display: grid !important;
    grid-template-columns: 1fr 1fr 148px !important;
    gap: 8px !important;
    page-break-inside: avoid;
  }

  body.printing-factura #factura-print-host .cot-doc__footer {
    display: grid !important;
    grid-template-columns: 1fr 168px !important;
    gap: 8px !important;
    page-break-inside: avoid;
  }

  body.printing-factura #factura-print-host .cot-doc__doc-id-inner {
    background: #1a56a8 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.printing-factura #factura-print-host .cot-doc__table th {
    background: #e9ecef !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.printing-factura #factura-print-host .cot-doc__table th:nth-child(1),
  body.printing-factura #factura-print-host .cot-doc__table td:nth-child(1) {
    display: table-cell !important;
  }

  body.printing-factura #factura-print-host .cot-doc__total-row--final,
  body.printing-factura #factura-print-host .cot-doc__page-bar {
    background: #e9ecef !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.printing-factura #factura-print-host .cot-doc__row-empty td {
    height: 12px;
    padding: 1px 4px !important;
  }

  body.printing-factura #factura-print-host .cot-doc__qr-placeholder i {
    display: none !important;
  }

  body.printing-factura #factura-print-host .cot-doc__logo {
    max-width: 88px;
    max-height: 52px;
  }

  /* Ticket POS 80mm */
  #pos-print-receipt,
  #pos-print-receipt * {
    visibility: visible;
  }

  #pos-print-receipt {
    page: pos-ticket;
    position: absolute;
    left: 0;
    top: 0;
    width: 80mm;
    max-width: 80mm;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }

  .pos-receipt-print-host {
    display: block !important;
    width: 80mm;
    margin: 0;
    padding: 0;
  }

  .modal,
  .modal-dialog,
  .modal-content,
  .modal-body {
    overflow: visible !important;
    max-height: none !important;
  }

  .modal-body.cot-doc-modal-body {
    padding: 0 !important;
    background: #fff !important;
  }

  .modal-backdrop,
  .erp-sidebar,
  .erp-topbar,
  .navbar,
  #sidebar-container {
    display: none !important;
  }
}

/* Hosts de impresión documentos (fuera del modal) */
.factura-print-host,
.cotizacion-print-host {
  display: none;
}

.pos-receipt-print-host {
  width: 80mm;
  max-width: 80mm;
}

.pos-receipt {
  width: 80mm;
  max-width: 80mm;
  margin: 0 auto;
  padding: 2mm 3mm;
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  line-height: 1.25;
  color: #000;
  background: #fff;
  box-sizing: border-box;
}

.pos-receipt__head {
  text-align: center;
  margin: 0 0 2mm;
}

.pos-receipt__head p {
  margin: 0 0 1px;
  font-size: 11px;
}

.pos-receipt__empresa {
  font-weight: 700;
  font-size: 12px !important;
  margin-bottom: 2px !important;
}

.pos-receipt__legal-line {
  font-size: 10px !important;
  margin-top: 2px !important;
}

.pos-receipt__rule {
  border: none;
  margin: 2mm 0;
  height: 0;
}

.pos-receipt__rule--thick {
  border-top: 2px solid #000;
}

.pos-receipt__rule--dash {
  border-top: 1px dashed #000;
}

.pos-receipt__title {
  margin: 0 0 2mm;
  font-weight: 700;
  font-size: 11px;
  text-align: center;
}

.pos-receipt__line {
  margin: 0 0 1px;
  font-size: 11px;
  text-align: left;
  word-break: break-word;
}

.pos-receipt__line span {
  font-weight: 700;
}

.pos-receipt__items {
  width: 100%;
  border-collapse: collapse;
  margin: 1mm 0;
  font-size: 11px;
}

.pos-receipt__items th {
  font-weight: 700;
  text-align: left;
  padding: 0 0 1mm;
  border-bottom: 1px solid #000;
}

.pos-receipt__items th:nth-child(1) { width: 14%; }
.pos-receipt__items th:nth-child(2) { width: 56%; text-align: center; }
.pos-receipt__items th:nth-child(3) { width: 30%; text-align: right; }

.pos-receipt__items td {
  padding: 1mm 0;
  vertical-align: top;
}

.pos-receipt__ct {
  text-align: left;
  width: 14%;
}

.pos-receipt__desc {
  text-align: left;
  padding-left: 1mm;
  padding-right: 1mm;
}

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

.pos-receipt__imei {
  font-size: 9px;
  color: #333;
}

.pos-receipt__subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 1px;
}

.pos-receipt__total {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 12px;
  margin: 1mm 0 0;
}

.pos-receipt__pay-title {
  margin: 0 0 2mm;
  font-weight: 700;
  font-size: 11px;
  text-align: center;
}

.pos-receipt__pay-line {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 1px;
}

.pos-receipt__cambio {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 12px;
  margin-top: 2mm;
}

.pos-receipt__foot {
  text-align: center;
  margin: 0;
}

.pos-receipt__foot p {
  margin: 0 0 1px;
  font-size: 9px;
}

/* Etiquetas de código de barras (inventario) */
.barcode-print-host {
  display: none;
}

.barcode-labels-sheet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4mm;
  padding: 4mm;
  box-sizing: border-box;
}

.barcode-label {
  width: 62mm;
  min-height: 28mm;
  padding: 2mm 2.5mm;
  border: 1px dashed #ccc;
  border-radius: 2mm;
  text-align: center;
  box-sizing: border-box;
  break-inside: avoid;
  page-break-inside: avoid;
  background: #fff;
  color: #000;
}

.barcode-label__name {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1.5mm;
  min-height: 2.4em;
  overflow: hidden;
}

.barcode-label__svg {
  width: 100%;
  max-width: 56mm;
  height: 42px;
}

.barcode-label__code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 1mm;
}

.barcode-label__price {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  margin-top: 1mm;
}

.barcode-label-preview {
  display: flex;
  justify-content: center;
  padding: 1rem;
  background: var(--erp-surface-muted, #f6f8fb);
  border-radius: 0.5rem;
}

.barcode-label-preview .barcode-label {
  border-style: solid;
  border-color: var(--erp-border, #e2e8f0);
}

@media print {
  @page barcode-labels {
    size: A4 portrait;
    margin: 8mm;
  }

  body.printing-barcode * {
    visibility: hidden !important;
  }

  body.printing-barcode #barcode-print-host,
  body.printing-barcode #barcode-print-host * {
    visibility: visible !important;
  }

  body.printing-barcode #barcode-print-host {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
  }

  body.printing-barcode .barcode-label {
    border-color: #999;
  }
}

/* Modal producto — ficha de catálogo */
#modal-producto .modal-dialog {
  max-height: calc(100vh - 1.5rem);
  margin: 0.75rem auto;
}

#modal-producto .prod-form-modal {
  --prod-accent: var(--erp-accent, #0891b2);
  --prod-accent-soft: color-mix(in srgb, var(--prod-accent) 10%, var(--erp-surface, #fff));
  --prod-ink: var(--erp-ink, #0c1222);
  --prod-muted: var(--erp-muted, #64748b);
  --prod-line: var(--erp-line, rgba(12, 18, 34, 0.08));
  --prod-surface: var(--erp-surface, #fff);
  --prod-surface-muted: color-mix(in srgb, var(--prod-muted) 6%, var(--prod-surface));
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 1.5rem);
  border: none;
  overflow: hidden;
}

#modal-producto .prod-form-modal__header,
#modal-producto .prod-form-modal__footer {
  flex-shrink: 0;
}

#modal-producto #form-producto {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

#modal-producto .prod-form-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.prod-form-modal__header {
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem 1.5rem 1rem;
  border-bottom: 1px solid var(--prod-line);
  background:
    linear-gradient(135deg, var(--prod-accent-soft) 0%, transparent 55%),
    var(--prod-surface);
}

.prod-form-modal__eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--prod-accent);
}

.prod-form-modal__intro .modal-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--prod-ink);
}

.prod-form-modal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.prod-form-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--prod-ink);
  background: var(--prod-surface-muted);
  border: 1px solid var(--prod-line);
  border-radius: 999px;
}

.prod-form-modal__body {
  padding: 1.25rem 1.5rem 1.5rem;
  background: color-mix(in srgb, var(--prod-muted) 4%, var(--prod-surface));
}

.prod-form-modal__footer {
  padding: 0.85rem 1.5rem 1.15rem;
  border-top: 1px solid var(--prod-line);
  background: var(--prod-surface);
}

.prod-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 991.98px) {
  .prod-form-layout {
    grid-template-columns: 1fr;
  }
}

.prod-form-layout__main,
.prod-form-layout__aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.prod-form-card {
  padding: 1.15rem 1.2rem;
  background: var(--prod-surface);
  border: 1px solid var(--prod-line);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--prod-ink) 4%, transparent);
}

.prod-form-card--accent {
  border-color: color-mix(in srgb, var(--prod-accent) 22%, var(--prod-line));
  background:
    linear-gradient(160deg, var(--prod-accent-soft) 0%, var(--prod-surface) 42%);
}

.prod-form-card__head {
  margin-bottom: 1rem;
}

.prod-form-card__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--prod-ink);
  letter-spacing: -0.01em;
}

.prod-form-card__desc {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--prod-muted);
}

.prod-form-input-title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Ticket de código — elemento distintivo */
.prod-barcode-ticket {
  position: relative;
  padding: 0.85rem 1rem 0.75rem;
  border-radius: 0.65rem;
  border: 1px dashed color-mix(in srgb, var(--prod-accent) 35%, var(--prod-line));
  background:
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--prod-accent) 4%, transparent) 0,
      color-mix(in srgb, var(--prod-accent) 4%, transparent) 2px,
      transparent 2px,
      transparent 6px
    ),
    var(--prod-surface-muted);
  overflow: hidden;
}

.prod-barcode-ticket::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--prod-accent);
  border-radius: 3px 0 0 3px;
}

.prod-barcode-ticket__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--prod-muted);
}

.prod-barcode-ticket__label i {
  font-size: 1rem;
  color: var(--prod-accent);
}

.prod-barcode-ticket__row {
  display: flex;
  gap: 0.5rem;
}

.prod-barcode-ticket__input {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-color: var(--prod-line);
}

.prod-barcode-ticket__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.prod-barcode-ticket__hint {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--prod-muted);
}

.prod-price-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.prod-price-field__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--prod-muted);
}

.prod-price-field--highlight .form-control {
  border-color: color-mix(in srgb, var(--prod-accent) 35%, var(--prod-line));
  background: color-mix(in srgb, var(--prod-accent) 5%, var(--prod-surface));
}

.prod-stock-block {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--prod-line);
}

.prod-form-stock-input {
  max-width: 8rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--prod-accent) !important;
  background: var(--prod-surface) !important;
}

.prod-form-props {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.prod-form-prop {
  margin: 0;
  cursor: pointer;
}

.prod-form-prop__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.prod-form-prop__box {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--prod-line);
  border-radius: 0.55rem;
  background: var(--prod-surface-muted);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.prod-form-prop__box i {
  flex-shrink: 0;
  margin-top: 0.1rem;
  font-size: 1.1rem;
  color: var(--prod-muted);
  transition: color 0.15s ease;
}

.prod-form-prop__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.prod-form-prop__text strong {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--prod-ink);
  line-height: 1.25;
}

.prod-form-prop__text small {
  font-size: 0.72rem;
  color: var(--prod-muted);
  line-height: 1.3;
}

.prod-form-prop__input:focus-visible + .prod-form-prop__box {
  outline: 2px solid var(--prod-accent);
  outline-offset: 2px;
}

.prod-form-prop__input:checked + .prod-form-prop__box {
  border-color: color-mix(in srgb, var(--prod-accent) 45%, var(--prod-line));
  background: var(--prod-accent-soft);
  box-shadow: inset 3px 0 0 var(--prod-accent);
}

.prod-form-prop__input:checked + .prod-form-prop__box i {
  color: var(--prod-accent);
}

.prod-form-serial-input {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: stretch;
}

@media (max-width: 575.98px) {
  .prod-form-serial-input {
    grid-template-columns: 1fr;
  }
}

.prod-form-serial-input textarea {
  min-height: 4.25rem;
  resize: vertical;
}

.prod-form-serial-table {
  max-height: 168px;
  border: 1px solid var(--prod-line);
  border-radius: 0.55rem;
  background: var(--prod-surface-muted);
}

[data-bs-theme="dark"] .prod-form-modal {
  --prod-surface: var(--erp-surface, #1e293b);
  --prod-surface-muted: color-mix(in srgb, var(--prod-muted) 12%, var(--prod-surface));
}

[data-bs-theme="dark"] .prod-form-modal__body {
  background: color-mix(in srgb, #000 18%, var(--prod-surface));
}

@media (prefers-reduced-motion: reduce) {
  .prod-form-prop__box {
    transition: none;
  }
}

/* —— Seguimiento público de reparación (QR) —— */
.track-page-wrap {
  min-height: 100vh;
  min-height: 100dvh;
}

.track-page {
  --track-bg: color-mix(in srgb, var(--tblr-bg-surface, #f8fafc) 88%, #dbe4f0);
  --track-card: var(--tblr-bg-surface, #fff);
  --track-ink: var(--tblr-body-color, #1e293b);
  --track-muted: var(--tblr-secondary, #64748b);
  --track-line: color-mix(in srgb, var(--track-ink) 10%, transparent);
  --track-accent: var(--tblr-primary, #206bc4);
  min-height: 100vh;
  min-height: 100dvh;
  padding: 1.25rem 1rem 2rem;
  background:
    radial-gradient(120% 80% at 10% -10%, color-mix(in srgb, var(--track-accent) 14%, transparent), transparent 55%),
    radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, #0ea5e9 10%, transparent), transparent 50%),
    var(--track-bg);
  color: var(--track-ink);
}

.track-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 28rem;
  margin: 0 auto 1rem;
}

.track-brand__logo {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  border-radius: 0.55rem;
  background: var(--track-card);
  border: 1px solid var(--track-line);
  padding: 0.2rem;
}

.track-brand__mark {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--track-accent) 12%, var(--track-card));
  color: var(--track-accent);
  font-size: 1.25rem;
}

.track-brand__name {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
}

.track-brand__kicker {
  font-size: 0.75rem;
  color: var(--track-muted);
}

.track-card {
  max-width: 28rem;
  margin: 0 auto;
  padding: 1.25rem 1.15rem 1.35rem;
  background: var(--track-card);
  border: 1px solid var(--track-line);
  border-radius: 1rem;
  box-shadow: 0 12px 32px color-mix(in srgb, #0f172a 8%, transparent);
}

.track-card--loading,
.track-card--error {
  text-align: center;
  padding: 2rem 1.25rem;
}

.track-card--loading p,
.track-card--error p {
  margin: 0.85rem 0 0;
  color: var(--track-muted);
}

.track-card--error > i {
  font-size: 2rem;
  color: var(--tblr-danger, #d63939);
}

.track-card--error h1 {
  font-size: 1.2rem;
  margin: 0.65rem 0 0;
}

.track-card__hint {
  font-size: 0.85rem;
}

.track-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.track-card__eyebrow {
  margin: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--track-muted);
  font-weight: 600;
}

.track-card__title {
  margin: 0.15rem 0 0;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.track-status {
  flex-shrink: 0;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--track-accent) 12%, transparent);
  color: var(--track-accent);
}

.track-status--listo {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #15803d;
}

.track-status--entregado {
  background: color-mix(in srgb, #64748b 14%, transparent);
  color: #475569;
}

.track-status--cancelado {
  background: color-mix(in srgb, #dc2626 12%, transparent);
  color: #b91c1c;
}

.track-status--en_reparacion,
.track-status--diagnostico {
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  color: #b45309;
}

.track-timeline {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0.35rem 0 0.15rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.15rem;
  position: relative;
}

.track-timeline::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0.72rem;
  height: 2px;
  background: var(--track-line);
  z-index: 0;
}

.track-timeline__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
}

.track-timeline__dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--track-card);
  border: 2px solid color-mix(in srgb, var(--track-muted) 45%, transparent);
}

.track-timeline__step.is-done .track-timeline__dot,
.track-timeline__step.is-active .track-timeline__dot {
  border-color: var(--track-accent);
  background: var(--track-accent);
}

.track-timeline__step.is-active .track-timeline__dot {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--track-accent) 22%, transparent);
}

.track-timeline__label {
  font-size: 0.62rem;
  line-height: 1.15;
  color: var(--track-muted);
  font-weight: 500;
}

.track-timeline__step.is-done .track-timeline__label,
.track-timeline__step.is-active .track-timeline__label {
  color: var(--track-ink);
  font-weight: 650;
}

.track-timeline--cancelled {
  display: block;
  margin-bottom: 1rem;
}

.track-timeline--cancelled::before {
  display: none;
}

.track-timeline__cancelled {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.65rem;
  background: color-mix(in srgb, #dc2626 8%, transparent);
  color: #b91c1c;
  font-size: 0.85rem;
  font-weight: 600;
}

.track-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 0.85rem;
  margin: 0 0 1rem;
}

.track-facts dt {
  margin: 0;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--track-muted);
  font-weight: 600;
}

.track-facts dd {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  word-break: break-word;
}

.track-note {
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.8rem;
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--track-muted) 6%, transparent);
}

.track-note h2 {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--track-muted);
  font-weight: 700;
}

.track-note p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.track-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.9rem 0 0.35rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.7rem;
  border: 1px dashed color-mix(in srgb, var(--track-accent) 35%, transparent);
  background: color-mix(in srgb, var(--track-accent) 6%, transparent);
  font-size: 0.85rem;
}

.track-total strong {
  font-size: 1.15rem;
  font-weight: 800;
}

.track-guarantee,
.track-updated {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  color: var(--track-muted);
}

.track-footer {
  max-width: 28rem;
  margin: 1rem auto 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--track-muted);
}

[data-bs-theme="dark"] .track-page {
  --track-bg: #0f172a;
  --track-card: #1e293b;
  --track-ink: #e2e8f0;
  --track-muted: #94a3b8;
  --track-line: rgba(148, 163, 184, 0.22);
}

@media (max-width: 420px) {
  .track-facts {
    grid-template-columns: 1fr;
  }

  .track-timeline__label {
    font-size: 0.58rem;
  }
}

/* Nómina · ficha colaborador (modal)
   Form wraps header/body/footer, so Bootstrap scrollable needs flex+min-height:0
   so .modal-body (not .modal-content) is the scroll container. */
#modal-empleado .modal-content {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 3.5rem);
  overflow: hidden;
}

#modal-empleado .nomina-emp-form {
  --nomina-emp-ink: var(--erp-ink, var(--ink));
  --nomina-emp-muted: var(--erp-muted, var(--ink-secondary));
  --nomina-emp-line: var(--erp-line, var(--border-subtle));
  --nomina-emp-surface: var(--erp-surface, var(--surface));
  --nomina-emp-canvas: var(--canvas, #f8fafc);
  --nomina-emp-accent: var(--erp-accent, var(--accent-color));
  --nomina-emp-accent-soft: var(--erp-accent-soft, var(--accent-soft));
  --nomina-emp-wage: color-mix(in srgb, var(--nomina-emp-accent) 9%, var(--nomina-emp-surface));
  --nomina-emp-wage-line: color-mix(in srgb, var(--nomina-emp-accent) 28%, var(--nomina-emp-line));
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

#modal-empleado .nomina-emp-modal__header {
  flex-shrink: 0;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--nomina-emp-accent) 5%, var(--nomina-emp-surface)) 0%, var(--nomina-emp-surface) 100%);
}

#modal-empleado .nomina-emp-modal__eyebrow {
  margin: 0 0 0.12rem;
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nomina-emp-accent);
  line-height: 1.2;
}

#modal-empleado .nomina-emp-modal__intro .modal-title {
  margin: 0;
  font-size: 1.05rem !important;
  letter-spacing: -0.02em;
}

#modal-empleado .modal-body.nomina-emp-modal__body,
#modal-empleado .nomina-emp-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.85rem 1.15rem 1rem !important;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

#modal-empleado .nomina-emp-modal__footer {
  flex-shrink: 0;
  padding: 0.65rem 1.15rem !important;
  gap: 0.4rem;
}

.nomina-emp-section {
  margin: 0;
  padding: 0.85rem 0.9rem 0.9rem 0.95rem;
  border-radius: var(--erp-radius, var(--radius-md));
  border: 1px solid var(--nomina-emp-line);
  background: color-mix(in srgb, var(--nomina-emp-surface) 86%, var(--nomina-emp-canvas));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--nomina-emp-accent) 45%, transparent);
}

.nomina-emp-section--last {
  margin-bottom: 0;
}

.nomina-emp-section__head {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0 0 0.7rem;
  padding: 0 0 0.45rem;
  border-bottom: 1px solid color-mix(in srgb, var(--nomina-emp-line) 80%, transparent);
}

.nomina-emp-section__index {
  flex: 0 0 auto;
  min-width: 1.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--nomina-emp-accent) 75%, var(--nomina-emp-muted));
  line-height: 1.2;
}

.nomina-emp-section__title {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--nomina-emp-muted);
  line-height: 1.25;
}

.nomina-emp-form .form-label {
  margin-bottom: 0.28rem;
  font-size: 0.76rem;
  font-weight: 550;
  color: var(--nomina-emp-ink);
}

.nomina-emp-form .form-control,
.nomina-emp-form .form-select {
  min-height: 2.15rem;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

/* Signature · wage strip (pay decision) */
.nomina-emp-wage {
  display: flex;
  margin-top: 0.75rem;
  border-radius: calc(var(--erp-radius, var(--radius-md)) - 2px);
  border: 1px solid var(--nomina-emp-wage-line);
  background:
    linear-gradient(135deg, var(--nomina-emp-wage) 0%, color-mix(in srgb, var(--nomina-emp-surface) 92%, var(--nomina-emp-canvas)) 62%);
  overflow: hidden;
}

.nomina-emp-wage__rail {
  flex: 0 0 0.28rem;
  background: linear-gradient(180deg, var(--nomina-emp-accent) 0%, color-mix(in srgb, var(--nomina-emp-accent) 55%, transparent) 100%);
}

.nomina-emp-wage__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.65rem 0.8rem 0.75rem;
}

.nomina-emp-wage__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.nomina-emp-wage__eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nomina-emp-accent);
  line-height: 1.2;
}

.nomina-emp-wage__hint {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--nomina-emp-muted);
  font-variant-numeric: tabular-nums;
}

.nomina-emp-wage__amount {
  position: relative;
}

.nomina-emp-wage__currency {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--nomina-emp-muted);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.nomina-emp-wage__amount .form-control {
  padding-left: 1.45rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  border-color: color-mix(in srgb, var(--nomina-emp-accent) 22%, var(--nomina-emp-line));
  background: color-mix(in srgb, var(--nomina-emp-surface) 94%, transparent);
}

.nomina-emp-wage__amount .form-control:focus {
  border-color: var(--nomina-emp-accent);
  box-shadow: 0 0 0 3px var(--nomina-emp-accent-soft);
}

.nomina-emp-wage__salary {
  max-width: 16.5rem;
}

.nomina-emp-switch {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 2.15rem;
  margin-top: 0.55rem;
  margin-bottom: 0;
  /* Override Bootstrap form-switch padding-left so the track stays inside the cell */
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm, 0.35rem);
  background: color-mix(in srgb, var(--nomina-emp-surface) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--nomina-emp-accent) 14%, var(--nomina-emp-line));
}

.nomina-emp-switch .form-check-input {
  float: none;
  margin-left: 0;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.nomina-emp-switch .form-check-label {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--nomina-emp-ink);
  line-height: 1.25;
}

.nomina-emp-switch__title {
  font-weight: 600;
}

.nomina-emp-switch__hint {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--nomina-emp-muted);
}

[data-bs-theme="dark"] #modal-empleado .nomina-emp-form {
  --nomina-emp-canvas: color-mix(in srgb, var(--nomina-emp-surface) 88%, #020617);
  --nomina-emp-wage: color-mix(in srgb, var(--nomina-emp-accent) 14%, var(--nomina-emp-surface));
  --nomina-emp-wage-line: color-mix(in srgb, var(--nomina-emp-accent) 34%, var(--nomina-emp-line));
}

[data-bs-theme="dark"] #modal-empleado .nomina-emp-modal__header {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--nomina-emp-accent) 10%, var(--nomina-emp-surface)) 0%, var(--nomina-emp-surface) 100%);
}

[data-bs-theme="dark"] .nomina-emp-section {
  background: color-mix(in srgb, var(--nomina-emp-surface) 94%, #0f172a);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--nomina-emp-accent) 55%, transparent);
}

[data-bs-theme="dark"] .nomina-emp-wage {
  background:
    linear-gradient(135deg, var(--nomina-emp-wage) 0%, color-mix(in srgb, var(--nomina-emp-surface) 96%, #020617) 65%);
}

[data-bs-theme="dark"] .nomina-emp-wage__amount .form-control {
  background: color-mix(in srgb, var(--nomina-emp-surface) 80%, #020617);
}

[data-bs-theme="dark"] .nomina-emp-switch {
  background: color-mix(in srgb, var(--nomina-emp-accent) 8%, var(--nomina-emp-surface));
  border-color: color-mix(in srgb, var(--nomina-emp-accent) 22%, var(--nomina-emp-line));
}

@media (max-width: 767.98px) {
  .nomina-emp-wage__meta {
    margin-bottom: 0.45rem;
  }

  .nomina-emp-wage__salary {
    max-width: none;
  }
}