/* ─────────────────────────────────────────────────────────
   Botones
   ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: 0 var(--space-5);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), box-shadow var(--transition-fast);
  user-select: none;
  white-space: nowrap;
}

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

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--cta-bg);
  color: var(--cta-text);
}
.btn--primary:hover:not(:disabled) {
  background: var(--cta-hover);
}

.btn--outline {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border);
}
.btn--outline:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--text-tertiary);
}

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn--ghost:hover:not(:disabled) {
  background: var(--bg-input);
  color: var(--text-primary);
}

.btn--danger {
  background: var(--danger);
  color: #fff;
}
.btn--danger:hover:not(:disabled) {
  background: #B91C1C;
}

.btn--sm {
  min-height: 36px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.btn--icon {
  width: var(--touch-target);
  min-height: var(--touch-target);
  padding: 0;
}

.btn--block { width: 100%; }

/* FAB rojo de Ecomiq (sidebar [+]) */
.btn-fab {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--cta-text);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast);
  padding: 0;
}
.btn-fab svg { width: 20px; height: 20px; }
.btn-fab:hover { background: var(--accent-hover); }
.btn-fab:focus { outline: none; }
.btn-fab:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 2px; }

/* ─────────────────────────────────────────────────────────
   Inputs
   ───────────────────────────────────────────────────────── */
.input,
.textarea,
.select {
  display: block;
  width: 100%;
  min-height: var(--input-height);
  padding: 0 var(--space-4);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              background-color var(--transition-fast);
}

/* Select: quitar look-and-feel nativo del OS, agregar chevron del sistema */
.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: var(--space-8);
  /* chevron-down como background image (mismo path del icons.js) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 16px;
}
.select::-ms-expand { display: none; } /* IE */
.select option { color: var(--text-primary); background: var(--bg-card); }
.select:hover:not(:focus):not(:disabled) {
  border-color: var(--text-tertiary);
}
.select:disabled {
  background-color: var(--bg-input);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.textarea {
  min-height: 96px;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
  line-height: 1.5;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-tertiary);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.input--soft {
  background: var(--bg-input);
  border-color: transparent;
}
.input--soft:focus {
  background: var(--bg-card);
  border-color: var(--accent);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.field__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}
.field__hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.field__error {
  font-size: var(--text-xs);
  color: var(--danger);
}
.field__success {
  font-size: var(--text-xs);
  color: var(--success);
}

/* Search bar (topbar) */
.search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 480px;
}
.search__input {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-4) 0 var(--space-10);
  background: var(--bg-input);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.search__input::placeholder { color: var(--text-tertiary); }
.search__input:focus {
  outline: none;
  background: var(--bg-card);
  border-color: var(--border);
}
.search__icon {
  position: absolute;
  left: var(--space-3);
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────
   Badges (status pills estilo Ecomiq)
   ───────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1;
  border-radius: var(--radius-full);
  background: var(--bg-input);
  color: var(--text-secondary);
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

.badge--success { background: var(--success-bg); color: var(--success); }
.badge--warning { background: var(--warning-bg); color: var(--warning); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger); }
.badge--info    { background: var(--info-bg);    color: var(--info); }
.badge--accent  { background: var(--accent-light); color: var(--accent); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  background: var(--bg-input);
  border-radius: var(--radius-sm);
}

/* ─────────────────────────────────────────────────────────
   Cards
   ───────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.card--flat { box-shadow: none; }
.card--pad-lg { padding: var(--space-6); }

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.card__subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* Product card (estilo Ecomiq) */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}
.product-card:hover { box-shadow: var(--shadow-md); }

.product-card__media {
  aspect-ratio: 4 / 3;
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 32px;
}
.product-card__body { padding: var(--space-4); }
.product-card__title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
}
.product-card__sku {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.product-card__price {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-top: var(--space-3);
}

/* KPI card (dashboard) */
.kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.kpi__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}
.kpi__value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-top: var(--space-2);
  font-feature-settings: "tnum";
}
.kpi__trend {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}
.kpi__trend--up   { color: var(--success); }
.kpi__trend--down { color: var(--danger); }

/* ─────────────────────────────────────────────────────────
   Tables (estilo Orders List de Ecomiq)
   ───────────────────────────────────────────────────────── */
.table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table { min-width: max-content; }
@media (min-width: 1024px) {
  .table { min-width: 100%; } /* En desktop la tabla rellena el contenedor */
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-base);
}

.table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-card);
  text-align: left;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table tbody td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  vertical-align: middle;
}

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

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

.table th.sortable {
  cursor: pointer;
  user-select: none;
}
.table th.sortable::after {
  content: " ↕";
  color: var(--text-tertiary);
  font-size: 11px;
}

.table__num {
  text-align: right;
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}

/* ─────────────────────────────────────────────────────────
   Sidebar (Ecomiq)
   ───────────────────────────────────────────────────────── */
.sidebar {
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: var(--space-3) 0;
}

.sidebar__top {
  padding: 0 var(--space-3);
  margin-bottom: var(--space-4);
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--space-2);
  flex: 1;
}

.sidebar__item {
  position: relative;        /* para ::before barra activa */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  text-decoration: none;
  outline: none;
}
.sidebar__item:hover {
  background: var(--brand-navy-50);   /* tint muy sutil, distinto del active */
  color: var(--text-primary);
}

/* Tooltip en sidebar estrecho (modo 60px). Usa el atributo data-label. */
@media (min-width: 640px) and (max-width: 1023px) {
  .sidebar__item[data-label]:hover::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--text-primary);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    z-index: 80;
    pointer-events: none;
    animation: fadeIn 120ms ease-out;
  }
}
.sidebar__item:focus { outline: none; }
.sidebar__item:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: -2px;
}
.sidebar__item.is-active {
  background: var(--brand-navy-light);
  color: var(--brand-navy);
  font-weight: var(--font-semibold);
}
/* Barra vertical izquierda · indicador distintivo del item activo
   (no se confunde con el hover sutil que pinta solo fondo). */
.sidebar__item.is-active::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--brand-navy);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.sidebar--collapsed .sidebar__item.is-active::before {
  left: -8px;
}

/* Items en alpha (no construidos) · disabled con badge "Próx." */
.sidebar__item--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.sidebar__item--disabled:hover {
  background: transparent !important;
  color: var(--text-secondary) !important;
}
.sidebar__item--disabled .sidebar__icon { color: var(--text-tertiary); }

/* Badge "Próx." al lado del label */
.sidebar__badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: var(--font-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--bg-input);
  color: var(--text-tertiary);
  border-radius: var(--radius-full);
}
.sidebar__item.is-active .sidebar__icon { color: var(--brand-navy); }
.sidebar__item.is-active:hover {
  background: var(--brand-navy-light); /* no se aclara al hover si ya está activo */
}

.sidebar__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__workspace {
  margin: var(--space-4) var(--space-3) 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}
.sidebar__workspace-title {
  font-size: 10px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
}
.sidebar__workspace-item {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  outline: none;
}
.sidebar__workspace-item:hover {
  background: #EEF2FA;
  color: var(--brand-navy);
}
.sidebar__workspace-item:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: -2px;
}
.sidebar__workspace-item.is-active {
  color: var(--brand-navy);
  font-weight: var(--font-medium);
  background: var(--brand-navy-light);
}

.sidebar--collapsed .sidebar__label,
.sidebar--collapsed .sidebar__workspace { display: none; }

/* ─────────────────────────────────────────────────────────
   Topbar (Ecomiq)
   ───────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  height: var(--topbar-h);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  cursor: pointer;
}

.topbar__search { flex: 1; }

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-navy);
  color: var(--cta-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  flex-shrink: 0;
}

/* Brand mark — la "L" del logo en topbar/login. SIEMPRE navy LTH. */
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--brand-navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-bold);
  flex-shrink: 0;
}
.brand-mark--lg { width: 44px; height: 44px; font-size: 22px; border-radius: var(--radius-md); }

/* ─────────────────────────────────────────────────────────
   Modal (Ecomiq)
   ───────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 100;
  animation: fadeIn var(--transition-base);
}

.modal {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  box-shadow: var(--shadow-overlay);
  animation: slideUp var(--transition-base);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.modal__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}
.modal__close {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal__close:hover { background: var(--bg-hover); color: var(--text-primary); }

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

@media (max-width: 639px) {
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
}

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

/* ─────────────────────────────────────────────────────────
   Drawer (slide-in panel desde la derecha)
   Para vistas contextuales (detalle de item, edición rápida).
   En mobile se convierte en bottom-sheet (slide-up).
   ───────────────────────────────────────────────────────── */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.4);
  display: flex;
  justify-content: flex-end;
  z-index: 100;
  animation: fadeIn 180ms ease-out;
}
.drawer-backdrop.is-closing { animation: fadeOut 200ms ease-in forwards; }

.drawer {
  width: 100%;
  max-width: var(--drawer-w, 420px);
  height: 100vh;
  height: 100dvh;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-overlay);
  animation: drawer-slide-in 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer.is-closing {
  animation: drawer-slide-out 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

.drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.drawer__heading { min-width: 0; flex: 1; }
.drawer__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: 1.3;
}
.drawer__subtitle {
  margin-top: 4px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.drawer__close {
  background: transparent;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.drawer__close:hover { background: var(--bg-hover); color: var(--text-primary); }
.drawer__close:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
  -webkit-overflow-scrolling: touch;
}
.drawer__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}

@keyframes drawer-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes drawer-slide-out {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Mobile: bottom-sheet (slide-up desde abajo, todo el ancho) */
@media (max-width: 639px) {
  .drawer-backdrop {
    align-items: flex-end;
    justify-content: stretch;
  }
  .drawer {
    max-width: 100%;
    height: auto;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    animation: drawer-slide-up 280ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .drawer.is-closing {
    animation: drawer-slide-down 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
  }
  .drawer__header { padding: var(--space-4) var(--space-5); }
  .drawer__body   { padding: var(--space-4) var(--space-5); }
  .drawer__footer { padding: var(--space-3) var(--space-5); }
}
@keyframes drawer-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes drawer-slide-down {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .drawer,
  .drawer.is-closing,
  .drawer-backdrop,
  .drawer-backdrop.is-closing {
    animation-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────
   Drawer · secciones internas (detalle de producto)
   ───────────────────────────────────────────────────────── */
.drawer-section {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-light);
}
.drawer-section:last-child { border-bottom: none; padding-bottom: 0; }
.drawer-section--top { padding-top: 0; }
.drawer-section__label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

.drawer-grid {
  display: grid;
  gap: var(--space-4);
}
.drawer-grid--2 { grid-template-columns: 1fr 1fr; }
.drawer-grid--3 { grid-template-columns: repeat(3, 1fr); }

.drawer-grid__label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.drawer-grid__value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  font-family: var(--font-mono);
  color: var(--text-primary);
  line-height: 1.1;
  font-feature-settings: "tnum";
}
.drawer-grid__value--sm {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}
.drawer-grid__hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-family: var(--font-primary);
  font-weight: var(--font-regular);
}

.drawer-placeholder {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-input);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.drawer-placeholder svg { color: var(--brand-navy-mid); flex-shrink: 0; margin-top: 2px; }

.drawer-oc {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-input);
  border-radius: var(--radius-md);
}
.drawer-oc__folio {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.drawer-oc__meta { margin-top: 2px; }
.drawer-oc__qty { text-align: right; font-size: var(--text-sm); }

.drawer-margin {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
  font-size: var(--text-sm);
}

.drawer-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.drawer-specs > div { display: flex; justify-content: space-between; gap: var(--space-2); }
.drawer-specs dt {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.drawer-specs dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}
@media (max-width: 639px) {
  .drawer-specs { grid-template-columns: 1fr; }
  .drawer-grid--3 { grid-template-columns: 1fr 1fr; }
}
/* Variante stacked: dt arriba (label uppercase chiquito), dd abajo a ancho
   completo. Útil cuando los valores son largos o multi-palabra y space-between
   se ve apretado. */
.drawer-specs--stacked > div { display: block; }
.drawer-specs--stacked dt {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}
.drawer-specs--stacked dd {
  font-size: var(--text-sm);
  color: var(--text-primary);
  word-break: break-word;
}

/* ─────────────────────────────────────────────────────────
   Product image (drawer header)
   ───────────────────────────────────────────────────────── */
.product-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-input);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.product-image__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}
.product-image__actions {
  margin-top: var(--space-2);
  display: flex;
  justify-content: flex-end;
}

/* ─────────────────────────────────────────────────────────
   Inline field · lectura ↔ edición
   Patrón: lápiz al lado del valor → click → input + Guardar/Cancelar
   ───────────────────────────────────────────────────────── */
.inline-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.inline-field__label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}
.inline-field__display {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
}
.inline-field__value {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: 1.2;
  font-feature-settings: "tnum";
  min-width: 0;
  overflow-wrap: anywhere;
}
.inline-field__edit-btn {
  background: var(--bg-input);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
  flex-shrink: 0;
}
.inline-field.is-editable:hover .inline-field__edit-btn {
  color: var(--text-secondary);
}
.inline-field__edit-btn:hover {
  background: var(--brand-navy-light) !important;
  color: var(--brand-navy) !important;
  border-color: var(--brand-navy-light);
}
.inline-field__edit-btn:focus { outline: none; }
.inline-field__edit-btn:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}

.inline-field__edit-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.inline-field__edit-row[hidden] { display: none !important; }
.inline-field__edit-row .input {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 0 var(--space-3);
  font-size: var(--text-base);
}
.inline-field__edit-row .btn { flex-shrink: 0; }

/* En móvil, los botones de Guardar/Cancelar bajan a su propia fila */
@media (max-width: 480px) {
  .inline-field__edit-row {
    flex-direction: column;
    align-items: stretch;
  }
  .inline-field__edit-row .input { width: 100%; }
  .inline-field__edit-row .btn { width: 100%; }
}

/* ─────────────────────────────────────────────────────────
   Pantalla 2.5 · Nueva venta (wizard de 3 pasos)
   ───────────────────────────────────────────────────────── */

/* Stepper visual · 3 nodos conectados */
.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}
.stepper__step {
  display: flex;
  align-items: center;
  flex: 1;
  gap: var(--space-2);
  position: relative;
}
.stepper__step:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 var(--space-2);
  transition: background var(--transition-base);
}
.stepper__step.is-done::after { background: var(--brand-navy); }

.stepper__node {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  font-family: inherit;
  color: var(--text-tertiary);
  cursor: not-allowed;
  flex-shrink: 0;
  padding: 0;
  transition: all var(--transition-fast);
}
.stepper__node:not(:disabled) { cursor: pointer; }
.stepper__node:not(:disabled):hover {
  border-color: var(--brand-navy);
  color: var(--brand-navy);
}

.stepper__num { line-height: 1; }
.stepper__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
  white-space: nowrap;
}

.stepper__step.is-active .stepper__node {
  border-color: var(--brand-navy);
  background: var(--brand-navy);
  color: #fff;
}
.stepper__step.is-active .stepper__label {
  color: var(--brand-navy);
  font-weight: var(--font-semibold);
}
.stepper__step.is-done .stepper__node {
  border-color: var(--brand-navy);
  background: var(--brand-navy);
  color: #fff;
}
.stepper__step.is-done .stepper__label { color: var(--text-primary); }

@media (max-width: 639px) {
  .stepper__label { display: none; }
  .stepper__step:not(:last-child)::after { margin: 0 var(--space-1); }
}

/* Wizard layout · 2-col en desktop (body + summary), 1-col mobile */
.wizard {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  align-items: start;
}
@media (max-width: 1023px) {
  .wizard { grid-template-columns: 1fr; }
}

.wizard__body { min-width: 0; }
.wizard__step {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.wizard__step-header { margin-bottom: var(--space-4); }
.wizard__step-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-1);
}
.wizard__step-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Summary panel · sticky en desktop, bottom en mobile */
.summary-panel {
  position: sticky;
  top: calc(var(--banner-h) + var(--topbar-h) + var(--space-4));
}
@media (max-width: 1023px) {
  .summary-panel { position: static; order: 2; }
}
.summary-panel__inner {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.summary-panel__label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}
.summary-panel__empty {
  padding: var(--space-3) 0;
  color: var(--text-tertiary);
}
.summary-panel__empty p {
  font-size: var(--text-sm);
  margin: 0;
  line-height: 1.5;
}
.summary-panel__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.summary-panel__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.summary-panel__item-title {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.summary-panel__item-price { color: var(--text-secondary); }
.summary-panel__totals {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.summary-panel__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
}
.summary-panel__row--total {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-light);
  margin-top: var(--space-1);
}
.summary-panel__row--total .mono { font-size: var(--text-lg); color: var(--brand-navy); }

/* Wizard footer · sticky bottom con acciones */
.wizard__footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin: 0 calc(-1 * var(--space-2));
  z-index: 30;
}
.wizard__footer-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
@media (max-width: 639px) {
  .wizard__footer { flex-direction: column; align-items: stretch; }
  .wizard__footer-meta { text-align: center; }
  .wizard__footer-actions { width: 100%; }
  .wizard__footer-actions .btn { flex: 1; }
}

/* Cart item · entrada del carrito */
.cart-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cart-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.cart-item:hover {
  border-color: var(--brand-navy-mid);
  box-shadow: var(--shadow-sm);
}
.cart-item__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--brand-navy-light);
  color: var(--brand-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cart-item__main { min-width: 0; }
.cart-item__title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-item__meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}
.cart-item__price {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  white-space: nowrap;
}
.cart-item__remove { color: var(--text-tertiary); }
.cart-item__remove:hover { color: var(--danger); background: var(--danger-bg); }

/* ID pill — chip pequeño que etiqueta "ID" + el código único de fábrica.
   Reutilizable en cart-item, bat-option, units-list, etc.
   Sirve para distinguir visualmente el ID único del modelo del producto. */
.id-pill,
.bat-option__id {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px 1px 4px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  line-height: 1.4;
}
.id-pill__label,
.bat-option__id-label {
  font-size: 9px;
  font-weight: var(--font-bold);
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  background: var(--bg-card);
  padding: 1px 4px;
  border-radius: 2px;
  text-transform: uppercase;
}
.id-pill .mono,
.bat-option__id .mono {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

/* Empty del carrito (Step 1) — más compacto que .empty genérico */
.cart-empty { padding: var(--space-8) var(--space-4); text-align: center; }
.cart-empty__icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-input);
  color: var(--text-tertiary);
  align-items: center;
  justify-content: center;
}

/* Indicador "Listo para escanear" debajo del input mono */
.scan-input-wrap { position: relative; }
.scan-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--bg-input);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.scan-indicator__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
  transition: background var(--transition-fast);
}
.scan-indicator.is-active {
  background: var(--success-bg);
  color: var(--success);
}
.scan-indicator.is-active .scan-indicator__dot {
  background: var(--success);
  animation: scan-pulse 1.6s ease-in-out infinite;
}
@keyframes scan-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
  .scan-indicator.is-active .scan-indicator__dot { animation: none; }
}

/* Drawer · Picker de batería (lista de opciones) */
.bat-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 320px;
  overflow-y: auto;
}
.bat-option {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.bat-option:hover { border-color: var(--brand-navy); background: var(--brand-navy-50); }
.bat-option:active { transform: scale(0.99); }
.bat-option__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.bat-option__meta {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.bat-option__price {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* Step 2 · secciones internas del wizard */
.wizard__section {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-light);
}
.wizard__section:first-of-type {
  margin-top: var(--space-4);
  padding-top: 0;
  border-top: none;
}
.wizard__section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: 4px;
}
.wizard__section-required {
  color: var(--brand-red);
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--font-bold);
}

/* Búsqueda de cliente */
.client-search {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}
.client-search .search { max-width: none; flex: 1; }
@media (max-width: 639px) {
  .client-search { flex-direction: column; }
  .client-search .btn { width: 100%; }
}

/* Combobox · input con panel dropdown homologado al sistema.
   Reemplaza <datalist> nativo (que tiene styling inconsistente entre browsers
   y se sale de modales). Se usa para marca/modelo/año de vehículo y otros
   pickers de "típicamente catálogo, pero permite captura libre". */
.combobox {
  position: relative;
  display: block;
}
.combobox__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08), 0 2px 6px rgba(17, 24, 39, 0.04);
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Variante portal: renderizado en <body> con coordenadas calculadas por JS.
   Top/left/width los setea el JS, así que cancelamos los defaults. Z-index
   tiene que estar arriba del modal-backdrop (~1000). */
.combobox__panel--portal {
  position: absolute;
  top: auto;
  left: auto;
  right: auto;
  z-index: 1100;
}
.combobox__panel[hidden] { display: none; }
.combobox__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.combobox__option:hover,
.combobox__option.is-focused {
  background: var(--brand-navy-50);
  color: var(--brand-navy);
}
.combobox__empty {
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
}

.client-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-input);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}
.client-results[hidden] { display: none; }
.client-results__empty {
  padding: var(--space-3) var(--space-2);
  font-size: var(--text-sm);
}

.client-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.client-result:hover {
  border-color: var(--brand-navy);
  background: var(--brand-navy-50);
}
.client-result__name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.client-result__meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Cliente seleccionado · card */
.selected-client {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--brand-navy-50);
  border: 1px solid var(--brand-navy-light);
  border-radius: var(--radius-md);
}
.selected-client__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.selected-client__main { min-width: 0; }
.selected-client__name {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.selected-client__meta {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.selected-client__stats {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 4px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

/* Técnico picker (cards seleccionables) */
.tecnico-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
}
.tecnico-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.tecnico-card:hover {
  border-color: var(--brand-navy);
  background: var(--brand-navy-50);
}
.tecnico-card.is-selected {
  border-color: var(--brand-navy);
  background: var(--brand-navy-light);
}
.tecnico-card.is-selected svg { color: var(--brand-navy); }
.tecnico-card__main { min-width: 0; }
.tecnico-card__name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.tecnico-card__role {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Vehículo picker (cards de vehículos del cliente) */
.vehiculo-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-2);
}
.vehiculo-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.vehiculo-card:hover {
  border-color: var(--brand-navy);
  background: var(--brand-navy-50);
}
.vehiculo-card.is-selected {
  border-color: var(--brand-navy);
  background: var(--brand-navy-light);
}
.vehiculo-card.is-selected svg { color: var(--brand-navy); }
.vehiculo-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vehiculo-card.is-selected .vehiculo-card__icon {
  background: var(--brand-navy);
  color: #fff;
}
.vehiculo-card__main { min-width: 0; }
.vehiculo-card__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vehiculo-card__meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

/* Datos del domicilio · grid 2 cols */
.domicilio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 639px) {
  .domicilio-grid { grid-template-columns: 1fr; }
}

/* Radio card (tipo cliente: particular vs empresa) */
.radio-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.radio-card:hover { border-color: var(--brand-navy-mid); }
.radio-card input[type="radio"] { margin: 0; }
.radio-card input[type="radio"]:checked + .radio-card__title { color: var(--brand-navy); font-weight: var(--font-semibold); }
.radio-card:has(input:checked) {
  border-color: var(--brand-navy);
  background: var(--brand-navy-50);
}
.radio-card__title {
  font-size: var(--text-sm);
  color: var(--text-primary);
}

/* Pantalla 3.2 · Hoja de vida del cliente */
.cliente-detail {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  align-items: start;
}
@media (max-width: 1023px) {
  .cliente-detail { grid-template-columns: 1fr; }
}
.cliente-detail__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.cliente-detail__subheader { margin-top: var(--space-2); }
.cliente-detail__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cliente-detail__section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.cliente-detail__section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.cliente-detail__section-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.cliente-detail__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: sticky;
  top: calc(var(--banner-h) + var(--topbar-h) + var(--space-4));
  min-width: 0; /* evita que dd's largos (email) desborden el card */
}
@media (max-width: 1023px) {
  .cliente-detail__sidebar { position: static; }
}
/* KPI strip cuando vive dentro de __main (no necesita margin propio,
   __main ya gestiona el spacing con su `gap`) */
.cliente-detail__main .kpi-strip,
.kpi-strip--inset { margin-bottom: 0; }
/* En desktop el __main es más estrecho (sidebar ocupa 320px). Forzamos
   4 columnas para que las KPIs no hagan wrap a 2x2 y queden alineadas con
   "Ticket promedio" y "Última compra" frente al sidebar. */
@media (min-width: 1024px) {
  .cliente-detail__main .kpi-strip--inset {
    grid-template-columns: repeat(4, 1fr);
  }
  .cliente-detail__main .kpi-strip--inset .kpi-card {
    padding: var(--space-3) var(--space-4);
  }
  .cliente-detail__main .kpi-strip--inset .kpi-card__value {
    font-size: 24px;
  }
}
/* Card sidebar: dt/dd apilados verticalmente para que emails largos
   no se corten — el ancho disponible es estrecho (~270px) */
.cliente-detail__sidebar .drawer-specs > div {
  display: block;
}
.cliente-detail__sidebar .drawer-specs dt {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}
.cliente-detail__sidebar .drawer-specs dd {
  text-align: left;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.cliente-detail__sidebar .drawer-specs > div + div {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}
.cliente-detail__card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
.cliente-detail__card--credito {
  background: var(--brand-navy-50);
  border-color: var(--brand-navy-light);
}
.cliente-detail__card-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

/* Grid de vehículos en la hoja de vida */
.cliente-vehiculos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-2);
}

/* Pantalla 3.1 · Lista de clientes */
.cliente-row-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.cliente-row-main { min-width: 0; }
.cliente-row-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* Toggle estilo "Solo con crédito" en la toolbar de filtros */
.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  height: 40px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: border-color var(--transition-fast);
}
.filter-toggle:hover { border-color: var(--text-tertiary); }
.filter-toggle:has(input:checked) {
  border-color: var(--brand-navy);
  background: var(--brand-navy-50);
  color: var(--brand-navy);
}
.filter-toggle input { margin: 0; }

/* Paginación al fondo de tablas largas */
.paginacion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-top: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* Pantalla 2.1 · Dashboard ejecutivo */
.dashboard__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
}
.dashboard__kpis {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.kpi-card__hint {
  margin-top: 4px;
}

/* Sparkline 30 días card */
.dashboard__sparkline-card {
  margin-bottom: var(--space-5);
  padding: var(--space-5);
}
.dashboard__sparkline-svg {
  width: 100%;
  margin-top: var(--space-3);
  background: linear-gradient(180deg, transparent 0%, var(--brand-navy-50) 100%);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}
.dashboard__sparkline-graph {
  width: 100%;
  height: 140px;
  display: block;
}
.dashboard__sparkline-graph circle:hover { r: 5; cursor: pointer; }
.dashboard__sparkline-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding: 0 var(--space-3);
}

/* Row de 2 columnas (Top productos + Top técnicos) */
.dashboard__row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
@media (max-width: 1023px) {
  .dashboard__row2 { grid-template-columns: 1fr; }
}
.dashboard__top-card {
  padding: var(--space-4) var(--space-5);
}

/* Lista de ranking (top productos / top técnicos) */
.dashboard__rank-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-3);
}
.dashboard__rank-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.dashboard__rank-row:hover {
  background: var(--brand-navy-50);
}
.dashboard__rank-num {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-input);
  color: var(--text-secondary);
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  flex-shrink: 0;
}
.dashboard__rank-row:first-child .dashboard__rank-num {
  background: var(--brand-navy);
  color: #fff;
}
.dashboard__rank-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.dashboard__rank-meta {
  margin-top: 2px;
}
.dashboard__rank-amount {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* Card de ventas recientes */
.dashboard__recientes-card {
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}

/* Pantalla 2.2 · Filtro de fecha (Hoy / Ayer / picker) */
.date-filter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.date-filter__pill {
  padding: 8px 16px;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-family: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--text-primary);
  transition: all var(--transition-fast);
}
.date-filter__pill:hover {
  border-color: var(--brand-navy);
  background: var(--brand-navy-50);
}
.date-filter__pill.is-active {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
}
.date-filter__pill:focus { outline: none; }
.date-filter__pill:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}
.date-filter__input {
  height: 36px;
  padding: 0 var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.date-filter__input:hover { border-color: var(--text-tertiary); }
.date-filter__input:focus {
  outline: none;
  border-color: var(--brand-navy);
  box-shadow: 0 0 0 3px var(--brand-navy-light);
}

/* Breakdown por método de pago (KPI strip aux) */
.pago-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.pago-breakdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.pago-breakdown__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--brand-navy-light);
  color: var(--brand-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pago-breakdown__main { min-width: 0; flex: 1; }
.pago-breakdown__label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}
.pago-breakdown__monto {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-top: 2px;
}

/* Step 3 · Toggle de factura (Sin / Con +16%) */
.factura-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
@media (max-width: 639px) {
  .factura-toggle { grid-template-columns: 1fr; }
}
.factura-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.factura-option:hover {
  border-color: var(--brand-navy);
  background: var(--brand-navy-50);
}
.factura-option.is-active {
  border-color: var(--brand-navy);
  background: var(--brand-navy-light);
}
.factura-option.is-active .factura-option__icon {
  background: var(--brand-navy);
  color: #fff;
}
.factura-option__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.factura-option__main { min-width: 0; }
.factura-option__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.factura-option__hint {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}
.factura-option__check {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-navy);
  color: #fff;
  align-items: center;
  justify-content: center;
}

/* Form fiscal cuando facturar=true */
.factura-form {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-input);
  border-radius: var(--radius-md);
}

/* Step 3 · Chips de descuento */
.descuento-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.descuento-chip {
  position: relative;
  padding: 8px 16px;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--text-primary);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.descuento-chip:hover {
  border-color: var(--brand-navy);
  background: var(--brand-navy-50);
}
.descuento-chip.is-active {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
}
.descuento-chip:focus { outline: none; }
.descuento-chip:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}
.descuento-chip:active { transform: translateY(1px); }
.descuento-chip.requires-auth {
  background: var(--warning-bg);
  border-color: var(--warning);
  color: var(--warning);
}
.descuento-chip.requires-auth:hover {
  background: var(--warning);
  color: #fff;
}
.descuento-chip.requires-auth.is-active {
  background: var(--warning);
  border-color: var(--warning);
  color: #fff;
}
.descuento-chip__lock {
  display: inline-flex;
  margin-left: 2px;
  opacity: 0.85;
}
.descuento-chip__hint {
  font-size: 10px;
  font-weight: var(--font-medium);
  margin-left: 4px;
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.descuento-chip:not(.is-active) .descuento-chip__hint {
  background: var(--info-bg);
  color: var(--info);
}

/* Step 3 · Resumen de la venta */
.pago-resumen {
  background: var(--bg-input);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.pago-resumen__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.pago-resumen__row--total {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.pago-resumen__row--total .mono { font-size: var(--text-lg); color: var(--brand-navy); }
.pago-resumen__divider {
  height: 1px;
  background: var(--border-light);
  margin: var(--space-1) 0;
}

/* Step 3 · Métodos de pago (split soportado) */
.pago-methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pago-method {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.pago-method.is-active {
  border-color: var(--brand-navy);
  background: var(--brand-navy-50);
}
.pago-method.is-disabled { opacity: 0.55; }

.pago-method__toggle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  width: 100%;
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--text-primary);
}
.pago-method__toggle:disabled { cursor: not-allowed; }
.pago-method__toggle:hover:not(:disabled) { background: var(--brand-navy-50); border-radius: inherit; }

.pago-method__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pago-method.is-active .pago-method__icon {
  background: var(--brand-navy);
  color: #fff;
}
.pago-method__name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}
.pago-method__check {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-navy);
  color: #fff;
  align-items: center;
  justify-content: center;
}

/* Badge de estado del método activo (Listo / Sin monto / Falta banco) */
.pago-method__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
}
.pago-method__status--ok {
  background: var(--success-bg);
  color: var(--success);
}
.pago-method__status--warning {
  background: var(--warning-bg);
  color: var(--warning);
}

/* Icono "!" del balance cuando hay incompletos */
.pago-totales__icon--warn {
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--warning);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  margin-right: 6px;
  vertical-align: middle;
}
.pago-method__disabled-hint {
  font-size: var(--text-xs);
}

.pago-method__details {
  display: flex;
  gap: var(--space-3);
  padding: 0 var(--space-3) var(--space-3);
  flex-wrap: wrap;
}
.pago-method__details .field { margin: 0; }
@media (max-width: 639px) {
  .pago-method__details { flex-direction: column; }
}

/* Totales asignado vs total venta */
.pago-totales {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.pago-totales.is-ok {
  background: var(--success-bg);
  color: var(--success);
  font-weight: var(--font-semibold);
}
.pago-totales.is-ok .muted { color: rgba(5, 150, 105, 0.7); }
.pago-totales.is-pending {
  background: var(--warning-bg);
  color: var(--warning);
}
.pago-totales.is-pending .muted { color: rgba(234, 88, 12, 0.7); }
.pago-totales__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  vertical-align: middle;
}
@media (max-width: 480px) {
  .pago-totales { flex-direction: column; align-items: flex-start; }
}

/* Pantalla 2.6 · Detalle de venta (Order detail estilo Ecomiq) */
.venta-detail {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  align-items: start;
}
@media (max-width: 1023px) {
  .venta-detail { grid-template-columns: 1fr; }
}

.venta-detail__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.venta-detail__subtitle {
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

.venta-detail__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }

.venta-detail__section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.venta-detail__section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

/* Producto principal */
.venta-detail__producto {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
}
.venta-detail__producto-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--brand-navy-light);
  color: var(--brand-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.venta-detail__producto-main { min-width: 0; }
.venta-detail__producto-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.venta-detail__producto-meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.venta-detail__producto-price {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* Servicios */
.venta-detail__servicios { display: flex; flex-direction: column; gap: var(--space-2); }
.venta-detail__servicio-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-light);
}
.venta-detail__servicio-row:last-child { border-bottom: none; }
.venta-detail__servicio-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.venta-detail__servicio-name { font-size: var(--text-sm); font-weight: var(--font-medium); }
.venta-detail__servicio-price { font-size: var(--text-sm); font-weight: var(--font-semibold); }

/* Totales */
.venta-detail__totales { display: flex; flex-direction: column; gap: var(--space-2); }
.venta-detail__total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
}
.venta-detail__total-row--final {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.venta-detail__total-row--final .mono { font-size: var(--text-lg); color: var(--brand-navy); }

/* Pagos */
.venta-detail__pagos { display: flex; flex-direction: column; gap: var(--space-2); }
.venta-detail__pago-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-input);
  border-radius: var(--radius-md);
}
.venta-detail__pago-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--brand-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.venta-detail__pago-method { font-size: var(--text-sm); font-weight: var(--font-semibold); }
.venta-detail__pago-amount { font-size: var(--text-md); font-weight: var(--font-semibold); }

/* Sidebar */
.venta-detail__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: sticky;
  top: calc(var(--banner-h) + var(--topbar-h) + var(--space-4));
}
@media (max-width: 1023px) {
  .venta-detail__sidebar { position: static; }
}
.venta-detail__card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
.venta-detail__card--utilidad {
  background: var(--brand-navy-50);
  border-color: var(--brand-navy-light);
}
.venta-detail__card-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}
.venta-detail__cliente {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.venta-detail__cliente-main { min-width: 0; }
.venta-detail__cliente-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.venta-detail__utilidad {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.venta-detail__utilidad .mono {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--brand-navy);
}

/* Drawer · Venta cerrada exitosamente */
.venta-success { text-align: center; padding: var(--space-3) 0; }
.venta-success__icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}
.venta-success__title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-1);
}
.venta-success__folios {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  text-align: left;
}
.venta-success__folio {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-input);
  border-radius: var(--radius-md);
}
.venta-success__folio .mono:last-child { color: var(--brand-navy); font-weight: var(--font-semibold); }

/* Link button (texto que parece link dentro de text) */
.link-btn {
  background: none;
  border: none;
  color: var(--info);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.link-btn:hover { color: var(--brand-navy); }

/* Drawer · Picker de servicio (cards) */
.serv-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.serv-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  position: relative;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.serv-option:hover:not(:disabled) {
  border-color: var(--brand-navy);
  background: var(--brand-navy-50);
}
.serv-option:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.serv-option__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--brand-navy-light);
  color: var(--brand-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.serv-option__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.serv-option__hint {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}
.serv-option__price {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────
   Pantalla 1.4 · Mapa de racks
   ───────────────────────────────────────────────────────── */
.rack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--space-4);
}

.rack {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.rack__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-light);
}
.rack__heading { min-width: 0; flex: 1; }
.rack__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.rack__subtitle {
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.rack__meta {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.rack__meta strong { color: var(--text-primary); }
.rack__meta-sep { color: var(--text-tertiary); opacity: 0.5; }

.rack__board {
  --cols: 4;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rack__row {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: var(--space-2);
}
.rack__row-label {
  font-size: 10px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.06em;
  text-align: center;
  user-select: none;
}
.rack__row-cells {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--space-2);
}

/* Slot · botón clickeable que representa una posición física del rack */
.rack__slot {
  background: var(--bg-input);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 72px;
  font-family: inherit;
  text-align: left;
  color: var(--text-primary);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
              border-color var(--transition-fast), opacity var(--transition-fast);
  position: relative;
}
.rack__slot:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--brand-navy);
  z-index: 1;
}
.rack__slot:focus { outline: none; }
.rack__slot:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
  z-index: 2;
}
.rack__slot:active { transform: translateY(0); }
.rack__slot.is-dimmed { opacity: 0.22; }
.rack__slot.is-dimmed:hover { opacity: 0.6; }

/* Variantes por estado · usan los color tokens del sistema */
.rack__slot--empty {
  background: var(--bg-input);
  color: var(--text-tertiary);
  border-style: dashed;
  border-color: var(--border);
}
.rack__slot--disponible {
  background: var(--success-bg);
  color: var(--success);
  border-color: rgba(5, 150, 105, 0.18);
}
.rack__slot--reservada {
  background: var(--info-bg);
  color: var(--info);
  border-color: rgba(37, 99, 235, 0.18);
}
.rack__slot--en_transito {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: rgba(234, 88, 12, 0.18);
}
.rack__slot--vendida {
  background: var(--accent-light);
  color: var(--accent);
  border-color: rgba(227, 24, 55, 0.15);
}
.rack__slot--garantia {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: rgba(220, 38, 38, 0.18);
}
.rack__slot--reciclaje {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: rgba(234, 88, 12, 0.18);
}

.rack__slot-label {
  font-size: 9px;
  font-weight: var(--font-semibold);
  opacity: 0.7;
  letter-spacing: 0.04em;
}
.rack__slot-code {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rack__slot-product {
  font-size: 10px;
  opacity: 0.85;
  margin-top: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rack__slot-empty-text {
  font-size: var(--text-xs);
  font-style: italic;
  opacity: 0.55;
  margin-top: auto;
}

/* Leyenda de colores arriba del grid */
.rack-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.rack-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rack-legend__swatch {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* Menú de acciones del rack (dentro del modal) */
.rack-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rack-action {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  width: 100%;
}
.rack-action:hover:not(:disabled) {
  border-color: var(--brand-navy);
  background: var(--brand-navy-50);
}
.rack-action:disabled { opacity: 0.5; cursor: not-allowed; }
.rack-action svg { color: var(--text-secondary); flex-shrink: 0; margin-top: 2px; }
.rack-action--danger:hover:not(:disabled) {
  border-color: var(--danger);
  background: var(--danger-bg);
}
.rack-action--danger:hover:not(:disabled) svg { color: var(--danger); }
.rack-action__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.rack-action__hint {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Mobile: racks apilados */
@media (max-width: 639px) {
  .rack-grid { grid-template-columns: 1fr; }
  .rack__slot { min-height: 64px; }
  .rack__slot-product { display: none; } /* solo código en móvil */
}

/* ─────────────────────────────────────────────────────────
   Units list · baterías individuales dentro del drawer
   ───────────────────────────────────────────────────────── */
.units-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--bg-input);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}
.unit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.unit-row:hover { background: var(--brand-navy-50); }
.unit-row__main { min-width: 0; }
.unit-row__code {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.unit-row__meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────
   Tabs / filtros (estilo Ecomiq)
   ───────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
}
.tabs__tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tabs__tab:hover { color: var(--text-primary); }
.tabs__tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ─────────────────────────────────────────────────────────
   Page header
   ───────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.page-header__title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.page-header__breadcrumb {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.page-header__crumb {
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  margin: -2px -4px;
  transition: color var(--transition-fast), background var(--transition-fast);
}
a.page-header__crumb:hover {
  color: var(--brand-navy);
  background: var(--brand-navy-light);
}
a.page-header__crumb:focus { outline: none; }
a.page-header__crumb:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}
.page-header__crumb.is-current {
  color: var(--text-secondary);
  cursor: default;
}
.page-header__crumb-sep {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  user-select: none;
}
.page-header__actions {
  display: flex;
  gap: var(--space-2);
}

/* ─────────────────────────────────────────────────────────
   Iconos SVG (Heroicons-style outline)
   Uso: <svg class="icon" viewBox="0 0 24 24"><path .../></svg>
   ───────────────────────────────────────────────────────── */
.icon {
  width: 16px; height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icon-lg { width: 20px; height: 20px; }
.icon-xl { width: 24px; height: 24px; }

/* ─────────────────────────────────────────────────────────
   KPI card con sparkline (estilo Stripe/Ecomiq)
   ───────────────────────────────────────────────────────── */
.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  overflow: hidden;
}
.kpi-card__row {
  display: flex; align-items: center; justify-content: space-between;
}
.kpi-card__label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}
.kpi-card__value {
  font-size: 28px;
  font-weight: var(--font-bold);
  line-height: 1.1;
  font-feature-settings: "tnum";
  color: var(--text-primary);
}
.kpi-card__value-unit {
  color: var(--text-tertiary);
  font-size: 16px;
  font-weight: var(--font-medium);
}
.kpi-card__delta {
  font-size: 11px;
  font-weight: var(--font-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.kpi-card__delta--up   { color: var(--success); background: var(--success-bg); }
.kpi-card__delta--down { color: var(--danger);  background: var(--danger-bg); }
.kpi-card__delta--warn { color: var(--warning); background: var(--warning-bg); }
.kpi-card__sparkline {
  width: 100%;
  height: 36px;
  margin-top: var(--space-1);
}

/* Sparkline path styling */
.sparkline-line { stroke-width: 2; fill: none; }
.sparkline-fill { fill-opacity: 0.12; }
.sparkline-line--accent  { stroke: var(--accent); }
.sparkline-fill--accent  { fill: var(--accent); }
.sparkline-line--success { stroke: var(--success); }
.sparkline-fill--success { fill: var(--success); }
.sparkline-line--warning { stroke: var(--warning); }
.sparkline-fill--warning { fill: var(--warning); }
.sparkline-line--info    { stroke: var(--info); }
.sparkline-fill--info    { fill: var(--info); }
.sparkline-line--navy    { stroke: var(--brand-navy); }
.sparkline-fill--navy    { fill: var(--brand-navy); }

/* ─────────────────────────────────────────────────────────
   KPI strip (4 columnas, responsive)
   ───────────────────────────────────────────────────────── */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
@media (max-width: 480px) {
  /* En pantallas muy chicas: 2 columnas en vez de 1, KPIs más compactos */
  .kpi-strip {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
  .kpi-card { padding: var(--space-3); }
  .kpi-card__value { font-size: 22px; }
  .kpi-card__label { font-size: 10px; }
}

/* ─────────────────────────────────────────────────────────
   AI Insight banner (sugerencia contextual con acento púrpura)
   ───────────────────────────────────────────────────────── */
.ai-insight {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  background: linear-gradient(135deg, #F5F3FF 0%, #FEF3F2 100%);
  border: 1px solid #DDD6FE;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}
.ai-insight__icon {
  flex: 0 0 32px; height: 32px;
  background: #7C3AED; color: #fff;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.ai-insight__body { flex: 1; }
.ai-insight__badge {
  display: inline-block;
  background: #7C3AED; color: #fff;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ai-insight__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin-bottom: 4px;
  color: var(--text-primary);
}
.ai-insight__text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.ai-insight__actions {
  display: flex; gap: var(--space-2);
  flex-shrink: 0;
}
@media (max-width: 639px) {
  .ai-insight { flex-direction: column; }
  .ai-insight__actions { width: 100%; justify-content: flex-end; }
}

/* ─────────────────────────────────────────────────────────
   Chips de filtro (Ecomiq style con count pill)
   ───────────────────────────────────────────────────────── */
.chips {
  display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--space-4);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}
.chip:hover { border-color: var(--text-tertiary); color: var(--text-primary); }
.chip.is-active {
  background: var(--text-primary); color: #fff; border-color: var(--text-primary);
}
.chip__count {
  background: var(--bg-input);
  color: var(--text-secondary);
  padding: 1px 7px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--font-semibold);
}
.chip.is-active .chip__count {
  background: rgba(255,255,255,0.2); color: #fff;
}

/* ─────────────────────────────────────────────────────────
   Tech card (Workiz dispatch board pattern)
   ───────────────────────────────────────────────────────── */
.tech-strip {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  -webkit-overflow-scrolling: touch;
}
.tech-card {
  flex: 0 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  min-width: 220px;
  display: flex; align-items: center; gap: var(--space-3);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.tech-card__avatar-wrap { position: relative; }
.tech-card__avatar-wrap .avatar { width: 40px; height: 40px; }
.tech-card__status-dot {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
}
.tech-card__status-dot--working   { background: var(--warning); }
.tech-card__status-dot--available { background: var(--success); }
.tech-card__status-dot--offline   { background: var(--text-tertiary); }
.tech-card__name { font-size: var(--text-sm); font-weight: var(--font-semibold); }
.tech-card__meta { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; }

/* ─────────────────────────────────────────────────────────
   Toast (notificaciones rápidas)
   ───────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  background: var(--text-primary);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  z-index: 200;
  animation: slideUp var(--transition-base);
}
.toast--success { background: var(--success); }
.toast--danger  { background: var(--danger); }

/* ─────────────────────────────────────────────────────────
   Login screen (0.1)
   Responsive: usa dvh (dynamic viewport — fix iOS keyboard) y
   compacta progresivamente cuando el viewport es bajo.
   ───────────────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-4);
  background: linear-gradient(135deg, var(--brand-navy-50) 0%, var(--brand-navy-light) 100%);
}
.login {
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  box-shadow: var(--shadow-lg);
}
.login__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.login__title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.login__sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.login__intro {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: var(--space-2) 0 var(--space-5);
}
.login-footer {
  text-align: center;
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.6;
}

/* Estructura interna para layout 2-columnas (landscape ancho+bajo).
   Por default es 1 columna lineal — ver media query abajo. */
.login__left { display: contents; }
.login__right { display: contents; }

/* Viewports cortos (laptop pequeña en horizontal, mobile landscape,
   teclado virtual abierto en mobile portrait). Compactamos paddings
   y reducimos elementos secundarios para que todo quepa sin scroll. */
@media (max-height: 820px) {
  .login-wrap { padding: var(--space-3) var(--space-4); }
  .login { padding: var(--space-6) var(--space-6); }
  .login__brand { margin-bottom: var(--space-1); }
  .login__intro { margin: var(--space-1) 0 var(--space-3); }
  .users { gap: var(--space-1); margin-bottom: var(--space-3); }
  .user-pick { padding: var(--space-2) var(--space-3); }
  .pin-key { height: 48px; }
  .pin-dots { margin: var(--space-2) 0 var(--space-1); min-height: 18px; }
  .pin-keyboard { margin-top: var(--space-2); gap: 6px; }
  .btn--login { margin-top: var(--space-3); }
  .login-footer { margin-top: var(--space-3); }
}

/* Landscape ancho+bajo: aprovecha el ancho con 2 columnas
   Izquierda: brand + intro + users (centro vertical)
   Derecha:   PIN field + keyboard + Entrar (apilado top→bottom)
   Mobile portrait NO entra aquí. */
@media (min-width: 760px) and (max-height: 760px) {
  .login {
    max-width: 720px;
    padding: var(--space-6) var(--space-6);
    display: grid;
    grid-template-columns: 1fr 280px;
    grid-template-areas:
      "left  right"
      "foot  foot";
    column-gap: var(--space-6);
    row-gap: var(--space-3);
    align-items: stretch;
  }

  .login__left {
    grid-area: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    justify-content: center;
  }
  .login__right {
    grid-area: right;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .login-footer { grid-area: foot; }

  /* Restablece márgenes que dejarían huecos en flex */
  .login__brand { margin-bottom: 0; }
  .login__intro { margin: 0; }
  .users { margin-bottom: 0; }

  /* Field (PIN dots + msg) ahora vive en la columna derecha */
  .login__right .field { margin: 0; }
  .pin-dots { justify-content: center; margin: var(--space-1) 0; }

  /* Keyboard y Entrar consecutivos en la columna derecha */
  .pin-keyboard { margin-top: 0; gap: var(--space-2); }
  .btn--login { margin-top: var(--space-2); }
  .pin-key { height: 48px; }
}

/* Viewport muy bajo (Mac Mini 720p, iPhone landscape real). */
@media (max-height: 680px) {
  .login { padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); }
  .login__intro { display: none; }
  .login-footer { display: none; }
  .pin-key { height: 44px; font-size: var(--text-base); }
  .brand-mark--lg { width: 36px; height: 36px; font-size: 18px; }
  .login__title { font-size: var(--text-lg); }
}

/* Pantallas muy estrechas (iPhone SE) sin reducir altura — la grid
   place-items ya nos cubre, pero forzamos paddings menores. */
@media (max-width: 380px) {
  .login { padding: var(--space-5) var(--space-4); }
  .pin-keyboard { gap: 6px; }
}

.users {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.user-pick {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  background: var(--bg-card);
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.user-pick:hover {
  border-color: var(--brand-navy);
  background: var(--brand-navy-50);
}
.user-pick.is-selected {
  border-color: var(--brand-navy);
  background: var(--brand-navy-light);
}
.user-pick__text { text-align: left; min-width: 0; }
.user-pick__name { font-weight: var(--font-medium); color: var(--text-primary); }
.user-pick__role { font-size: var(--text-xs); color: var(--text-secondary); text-transform: capitalize; }

.pin-keyboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.pin-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              transform var(--transition-fast);
}
.pin-key svg { display: block; }
.pin-key:hover { background: var(--bg-hover); border-color: var(--brand-navy-mid); }
.pin-key--accent { color: var(--brand-red); border-color: var(--brand-red-light); }
.pin-key--accent:hover { background: var(--brand-red-light); }
.pin-key--clear {
  color: var(--text-secondary);
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
}
.pin-key--clear:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--text-tertiary); }

/* Botón "Entrar" del login: spacing consistente */
.btn--login {
  margin-top: var(--space-5);
  height: var(--touch-target);
}

/* ─────────────────────────────────────────────────────────
   Shell utilities
   ───────────────────────────────────────────────────────── */
.mode-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--warning);
  color: #fff;
  text-align: center;
  padding: 6px var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__bottom {
  padding: 0 var(--space-2);
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Botón toggle del sidebar (colapsar/expandir) */
.sidebar__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 36px;
  padding: 0 var(--space-3);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-family: inherit;
  font-weight: var(--font-medium);
  cursor: pointer;
  border-radius: var(--radius-md);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: var(--space-2);
  border-top: 1px solid var(--border-light);
  transition: background var(--transition-fast), color var(--transition-fast);
  padding-top: var(--space-2);
}
.sidebar__toggle:hover {
  background: var(--brand-navy-light);
  color: var(--brand-navy);
}
.sidebar__toggle:focus { outline: none; }
.sidebar__toggle:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: -2px;
}
.sidebar__toggle-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar--collapsed .sidebar__toggle {
  justify-content: center;
  padding: var(--space-2) 0 0;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
}
@media (max-width: 1023px) {
  .detail-grid { grid-template-columns: 1fr; }
}

.empty {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--text-tertiary);
}
.empty__icon { font-size: 48px; margin-bottom: var(--space-3); }

.clickable { cursor: pointer; }
.clickable:hover { background: var(--bg-hover); }

.text-xs { font-size: var(--text-xs); }

/* ─────────────────────────────────────────────────────────
   Topbar: hamburger + brand link + user dropdown
   ───────────────────────────────────────────────────────── */
.topbar__hamburger {
  display: none;     /* solo en mobile */
}
@media (max-width: 639px) {
  .topbar__hamburger { display: inline-flex; }
  /* En mobile el search del topbar quita ancho útil → ocultarlo (hay search en cada pantalla) */
  .topbar__search { display: none; }
  /* Padding más justo y gap menor */
  .topbar { padding: 0 var(--space-3); gap: var(--space-2); }
}

.topbar__brand {
  text-decoration: none;
  color: inherit;
  transition: opacity var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.topbar__brand:hover { opacity: 0.85; color: inherit; }
@media (max-width: 480px) {
  .topbar__brand-label { display: none; } /* en pantallas chicas solo el cuadrito L */
}

.user-menu { position: relative; }
.user-menu__trigger {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  border-radius: var(--radius-full);
  transition: outline var(--transition-fast);
}
.user-menu__trigger:focus { outline: 2px solid var(--brand-navy-light); outline-offset: 2px; }

.user-menu__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  padding: var(--space-2);
  z-index: 60;
}
.user-menu__dropdown[hidden] { display: none; }

.user-menu__header {
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--space-2);
}
.user-menu__name { font-weight: var(--font-semibold); color: var(--text-primary); }
.user-menu__role { font-size: var(--text-xs); color: var(--text-secondary); text-transform: capitalize; }

.user-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.user-menu__item:hover { background: var(--bg-hover); }
.user-menu__item--danger { color: var(--danger); }
.user-menu__item--danger:hover { background: var(--danger-bg); }
.user-menu__item svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────
   Sidebar mobile (slide-in overlay 260px con labels SIEMPRE visibles)
   En mobile la preferencia .sidebar--collapsed se IGNORA porque el
   overlay tiene espacio para labels completos.
   ───────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .app-shell__sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
    width: 260px;
    z-index: 70;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    box-shadow: var(--shadow-lg);
    display: flex !important;   /* override del display:none anterior */
  }
  .app-shell__sidebar.is-open { transform: translateX(0); }

  /* Override de .sidebar--collapsed: en mobile SIEMPRE expandido */
  .sidebar.sidebar--collapsed .sidebar__label,
  .sidebar.sidebar--collapsed .sidebar__workspace,
  .sidebar.sidebar--collapsed .sidebar__badge {
    display: inline !important;
  }
  .sidebar.sidebar--collapsed .sidebar__workspace { display: block !important; }
  .sidebar.sidebar--collapsed .sidebar__item {
    justify-content: flex-start;
    padding: 0 var(--space-3);
  }
  .sidebar.sidebar--collapsed .sidebar__top {
    padding: 0 var(--space-3);
    justify-content: flex-start;
  }
  .sidebar.sidebar--collapsed .sidebar__toggle {
    justify-content: flex-start;
    padding-left: var(--space-3);
  }
  /* Ocultar el botón de toggle en mobile (no aplica colapsar/expandir) */
  .sidebar__toggle { display: none !important; }
}

.sidebar-overlay {
  display: none;
}
@media (max-width: 639px) {
  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.4);
    z-index: 65;
  }
  .sidebar-overlay[hidden] { display: none; }
}

/* ─────────────────────────────────────────────────────────
   Botones con ícono+label que colapsan a solo ícono en mobile
   ───────────────────────────────────────────────────────── */
.btn__icon { display: inline-flex; align-items: center; }
.btn__label-md { margin-left: 6px; }
@media (max-width: 767px) {
  .btn__label-md { display: none; }
  /* solo ícono visible → cuadrar el botón */
  .btn--sm .btn__icon { font-size: var(--text-base); }
}

/* ─────────────────────────────────────────────────────────
   Page header responsive
   ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .page-header__actions {
    flex-wrap: wrap;
    width: 100%;
  }
  .page-header__actions .btn { flex: 1; }
  .page-header__title {
    font-size: var(--text-lg);
    line-height: 1.3;
  }
  /* En títulos con "Stock actual · 92 unidades" o similares, el subtitulo
     muted no debe romper en su propia línea cuando ya estamos verticales. */
  .page-header__title .muted {
    display: inline;
    white-space: normal;
  }
  /* Saludo del dashboard "¡Hola, Rafael!" — más compacto en mobile */
  .dashboard__title { font-size: var(--text-xl); }
  .breadcrumb-row,
  .page-header__breadcrumb { flex-wrap: wrap; }
}

/* ─────────────────────────────────────────────────────────
   Tablas: scroll horizontal en pantallas chicas, columnas
   secundarias se ocultan
   ───────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

@media (max-width: 1023px) {
  /* Oculta columnas marcadas como secundarias en pantallas medianas */
  .table .col-hide-md { display: none; }
}
@media (max-width: 639px) {
  .table .col-hide-sm { display: none; }
  /* Pad menor para no comer ancho */
  .table thead th, .table tbody td { padding-left: var(--space-2); padding-right: var(--space-2); }
}

/* ─────────────────────────────────────────────────────────
   Utilities tipográficas (heredadas del shell)
   ───────────────────────────────────────────────────────── */
.muted { color: var(--text-secondary); }
.mono  { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }

/* ─────────────────────────────────────────────────────────
   Skeleton loaders (shimmer)
   Uso: <span class="skeleton" style="width:120px;height:14px"></span>
   ───────────────────────────────────────────────────────── */
.skeleton {
  display: inline-block;
  background: linear-gradient(90deg,
    var(--bg-input) 0%,
    rgba(243, 244, 246, 0.6) 50%,
    var(--bg-input) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}
[aria-busy="true"] .skeleton { color: transparent; }

/* ─────────────────────────────────────────────────────────
   Progress bar (Recibir OC, importaciones, etc.)
   ───────────────────────────────────────────────────────── */
.progress {
  background: var(--bg-input);
  height: 6px;
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}
.progress--lg { height: 10px; }
.progress__bar {
  height: 100%;
  width: 0%;
  background: var(--success);
  border-radius: inherit;
  transition: width var(--transition-base);
}
.progress__bar--warning { background: var(--warning); }
.progress__bar--danger  { background: var(--danger); }
.progress__bar--navy    { background: var(--brand-navy); }

/* ─────────────────────────────────────────────────────────
   Stock card (mobile-first: la tabla de stock se vuelve cards)
   Ver inventario-stock.js (<640px usa este patrón en vez de tabla).
   ───────────────────────────────────────────────────────── */
.stock-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.stock-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
  font-family: inherit;
  text-align: left;
  width: 100%;
}
.stock-card:hover {
  border-color: var(--brand-navy);
  box-shadow: var(--shadow-md);
}
.stock-card:active { transform: scale(0.995); }
.stock-card:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}
.stock-card__main { min-width: 0; }
.stock-card__title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stock-card__meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}
.stock-card__right { text-align: right; min-width: 80px; }
.stock-card__stock {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  font-family: var(--font-mono);
  line-height: 1;
}
.stock-card__stock--warning { color: var(--warning); }
.stock-card__stock--danger  { color: var(--danger); }
.stock-card__price {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
  font-family: var(--font-mono);
}
.stock-card__footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-light);
  margin-top: var(--space-1);
}

/* Toggle de vista tabla ↔ cards basado en breakpoint */
.stock-view-cards { display: none; }
@media (max-width: 639px) {
  .stock-view-table { display: none; }
  .stock-view-cards { display: block; }
}

/* Toolbar de filtros (search + select + counter) */
.stock-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.stock-toolbar .select { min-height: 40px; max-width: 220px; }
.stock-toolbar__spacer { flex: 1; }
@media (max-width: 639px) {
  .stock-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .stock-toolbar .search { max-width: 100% !important; }
  .stock-toolbar .select { max-width: 100%; width: 100%; }
  .stock-toolbar .filter-toggle { width: 100%; justify-content: center; }
  .stock-toolbar__spacer { display: none; }
  .stock-toolbar > .text-sm { text-align: center; padding: var(--space-1) 0; }
}

/* Grid del modal de detalle */
.stock-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.stock-detail__num {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  font-family: var(--font-mono);
}

/* ─────────────────────────────────────────────────────────
   Recibir OC (1.7) — layouts específicos de la pantalla
   ───────────────────────────────────────────────────────── */
.recibir-oc__toolbar {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.recibir-oc__toolbar #oc-picker { min-width: 280px; max-width: 380px; }
.recibir-oc__toolbar-spacer { flex: 1; }
.recibir-oc__progress-card {
  min-width: 240px;
  padding: var(--space-3) var(--space-4);
}
@media (max-width: 639px) {
  .recibir-oc__toolbar #oc-picker { width: 100%; max-width: 100%; }
  .recibir-oc__progress-card { width: 100%; }
  .recibir-oc__toolbar-spacer { display: none; }
}

.recibir-oc__scan-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
@media (max-width: 767px) {
  .recibir-oc__scan-row { grid-template-columns: 1fr; }
  .recibir-oc__scan-row .btn { width: 100%; }
}

.recibir-oc__scan-list {
  max-height: 360px;
  overflow-y: auto;
  margin-top: var(--space-3);
  /* Scroll vertical interno justificado (§1 del protocolo): es panel
     de actividad sticky de un flujo activo, no contenido principal. */
}
.recibir-oc__scan-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-light);
  animation: scan-pop var(--transition-base);
}
.recibir-oc__scan-item:last-child { border-bottom: none; }

@keyframes scan-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────
   ai-insight variantes (warning, info)
   El default es purple gradient con badge "AI". Las variantes
   neutralizan a un color funcional para banners no-IA.
   ───────────────────────────────────────────────────────── */
.ai-insight--warning {
  background: var(--warning-bg);
  border-color: #FCD9B6;
}
.ai-insight--warning .ai-insight__icon { background: var(--warning); }
.ai-insight--warning .ai-insight__title { color: var(--warning); }

.ai-insight--info {
  background: var(--info-bg);
  border-color: #BFDBFE;
}
.ai-insight--info .ai-insight__icon { background: var(--info); }
.ai-insight--info .ai-insight__title { color: var(--info); }

.ai-insight--danger {
  background: var(--danger-bg);
  border-color: #FECACA;
}
.ai-insight--danger .ai-insight__icon { background: var(--danger); }
.ai-insight--danger .ai-insight__title { color: var(--danger); }

/* ─────────────────────────────────────────────────────────
   Input / select extra variants
   ───────────────────────────────────────────────────────── */
.input--mono {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.select--lg { min-height: 44px; padding-right: var(--space-8); }

/* ─────────────────────────────────────────────────────────
   PIN dots (login). Indicador visual del PIN tecleado, estilo
   Apple Lock screen. Reemplaza el <input type="password"> oculto.
   ───────────────────────────────────────────────────────── */
.pin-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-2);
  min-height: 24px;
}
.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.pin-dot.is-filled {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  transform: scale(1.05);
}
.pin-dots.is-error .pin-dot {
  border-color: var(--danger);
}
.pin-dots.is-error .pin-dot.is-filled {
  background: var(--danger);
}
.pin-dots.shake { animation: pin-shake 380ms cubic-bezier(.36,.07,.19,.97); }

@keyframes pin-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .pin-dots.shake { animation: none; }
}

/* ─────────────────────────────────────────────────────────
   Modal · variante confirm (centrado + body block)
   ───────────────────────────────────────────────────────── */
.modal--confirm .modal__body {
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}
.modal--confirm .modal__body p { margin: 0; }
.modal--confirm .modal__body p + p { margin-top: var(--space-3); }

.modal--danger .modal__title  { color: var(--danger); }
.modal--warning .modal__title { color: var(--warning); }

/* ─────────────────────────────────────────────────────────
   Hovers / focus-visible / active states reforzados
   (decisiones validadas 2026-05-10: :focus-visible no :focus)
   ───────────────────────────────────────────────────────── */

/* Btn: feedback de pressed */
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn--primary:active:not(:disabled) { background: var(--brand-red-dark); }

/* Variant navy (CTA secundaria — no compite con primary rojo) */
.btn--navy {
  background: var(--brand-navy);
  color: #fff;
  border-color: var(--brand-navy);
}
.btn--navy:hover:not(:disabled) { background: var(--brand-navy-dark); border-color: var(--brand-navy-dark); }
.btn--navy:active:not(:disabled) { background: var(--brand-navy-dark); }

/* Chip: focus-visible + active */
.chip:focus { outline: none; }
.chip:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}
.chip:active { transform: translateY(1px); }

/* User-pick (login): focus-visible */
.user-pick:focus { outline: none; }
.user-pick:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}
.user-pick:active { transform: scale(0.99); }

/* PIN key: focus-visible + active claro */
.pin-key:focus { outline: none; }
.pin-key:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}
.pin-key:active {
  background: var(--brand-navy-light);
  transform: scale(0.96);
}
.pin-key--accent:active { background: var(--brand-red-light); }

/* Tabs */
.tabs__tab:focus { outline: none; }
.tabs__tab:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Modal close button */
.modal__close:focus { outline: none; }
.modal__close:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}

/* KPI card: hover sutil para indicar que es agrupable */
.kpi-card { transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.kpi-card.is-clickable { cursor: pointer; }
.kpi-card.is-clickable:hover {
  border-color: var(--brand-navy-mid);
  box-shadow: var(--shadow-sm);
}

/* Tech card */
.tech-card { transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tech-card:hover { border-color: var(--brand-navy); box-shadow: var(--shadow-md); }
.tech-card:focus { outline: none; }
.tech-card:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 2px; }

/* User menu trigger: hover ring + active */
.user-menu__trigger:hover .avatar { box-shadow: 0 0 0 3px var(--brand-navy-light); }
.user-menu__item:active { transform: translateX(1px); }

/* Sidebar item: active feedback en touch */
.sidebar__item:active { background: var(--brand-navy-light); }

/* Tabla: fila clickable con cursor pointer */
.table tbody tr.clickable td { cursor: pointer; }
.table tbody tr.clickable:hover { background: var(--brand-navy-50); }

/* Selects/inputs: variante visual de hover en outline */
.input:hover:not(:focus),
.textarea:hover:not(:focus),
.select:hover:not(:focus) {
  border-color: var(--text-tertiary);
}

/* Topbar search: hover */
.search__input:hover:not(:focus) { background: var(--bg-card); border-color: var(--border); }

/* Toast: cursor pointer (clic para dismiss) */
.toast { cursor: pointer; }
.toast:hover { opacity: 0.92; }

/* ─────────────────────────────────────────────────────────
   Pantalla 1.6 · Nueva/Detalle de OC
   ───────────────────────────────────────────────────────── */
.oc-detail__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.oc-table__total-row td {
  background: var(--bg-input);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.oc-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
@media (max-width: 767px) {
  .oc-summary { grid-template-columns: 1fr; gap: var(--space-4); }
}
.oc-summary__totals { display: flex; flex-direction: column; gap: var(--space-2); }
.oc-summary__row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.oc-summary__row--total {
  border-top: 1px solid var(--border);
  padding-top: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-md);
  color: var(--text-primary);
}
.oc-summary__limit {
  display: flex; flex-direction: column;
  padding-left: var(--space-5);
  border-left: 1px solid var(--border);
}
@media (max-width: 767px) {
  .oc-summary__limit { padding-left: 0; border-left: 0; padding-top: var(--space-4); border-top: 1px solid var(--border); }
}
.oc-summary__limit-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--space-2);
}
.oc-summary__limit-label {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.oc-summary__limit-count {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}
.oc-summary__limit-count--success { color: var(--success); }
.oc-summary__limit-count--warning { color: var(--warning); }
.oc-summary__limit-count--danger  { color: var(--danger); }

/* Items dentro del drawer quick-view de OC */
.oc-drawer-items { display: flex; flex-direction: column; gap: var(--space-1); }
.oc-drawer-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-input);
  border-radius: var(--radius-md);
}
.oc-drawer-item__main { min-width: 0; flex: 1; }
.oc-drawer-item__code {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.oc-drawer-item__name {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}
.oc-drawer-item__qty { flex-shrink: 0; font-size: var(--text-sm); white-space: nowrap; }

/* ─────────────────────────────────────────────────────────
   Cotizador (pantalla 2.4)
   ───────────────────────────────────────────────────────── */
.cot-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 1024px) {
  .cot-layout {
    grid-template-columns: 340px 1fr;
    gap: var(--space-5);
    align-items: start;
  }
  .cot-form { position: sticky; top: var(--space-4); }
}

.cot-results__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.cot-result-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.cot-result-card:hover { box-shadow: var(--shadow-md); }
.cot-result-card--top {
  border-color: var(--brand-navy);
  box-shadow: 0 0 0 1px var(--brand-navy);
}
.cot-result-card--muted { opacity: 0.85; }

.cot-result-card__head {
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.cot-result-card__title-wrap { min-width: 0; flex: 1 1 200px; }
.cot-result-card__badges {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: var(--space-2);
}
.cot-result-card__title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  margin: 0;
  color: var(--text-primary);
}
.cot-result-card__sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: 2px;
  font-family: var(--font-mono, monospace);
}
.cot-result-card__price { text-align: right; flex-shrink: 0; }
.cot-result-card__price-now {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: 1.1;
}
.cot-result-card__price-old {
  display: flex; align-items: center; gap: 6px;
  justify-content: flex-end;
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.cot-result-card__price-strike { text-decoration: line-through; }

.cot-result-card__specs {
  display: flex; flex-wrap: wrap; gap: 6px;
}

.cot-result-card__insight {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  background: var(--brand-navy-50, var(--bg-input));
  border-radius: var(--radius-md);
  border-left: 3px solid var(--brand-navy);
}
.cot-result-card__insight-num {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--brand-navy);
  line-height: 1;
  flex-shrink: 0;
  min-width: 56px;
}
.cot-result-card__insight-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

.cot-result-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
}
.cot-result-card__stock { font-size: var(--text-sm); }

@media (max-width: 639px) {
  .cot-result-card__price { text-align: left; flex-basis: 100%; }
  .cot-result-card__price-old { justify-content: flex-start; }
  .cot-result-card__foot { flex-direction: column; align-items: stretch; }
  .cot-result-card__foot .btn { width: 100%; min-height: var(--touch-target, 48px); }
}

/* Resumen sidebar — usa el mismo .card; sin estilos extra */

/* Modal "Generar cotización" — summary panel arriba */
.cot-modal-summary {
  display: flex; gap: var(--space-3); justify-content: space-between;
  padding: var(--space-3);
  background: var(--bg-input);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.cot-modal-summary__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}

/* Lista de resultados de búsqueda de cliente (autocomplete) */
.cot-cliente-results {
  margin-top: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  max-height: 220px;
  overflow-y: auto;
  box-shadow: var(--shadow-sm);
}
.cot-cliente-results__item {
  width: 100%;
  text-align: left;
  display: block;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background var(--transition-fast);
}
.cot-cliente-results__item:last-child { border-bottom: none; }
.cot-cliente-results__item:hover,
.cot-cliente-results__item:focus-visible {
  background: var(--bg-hover);
  outline: none;
}
.cot-cliente-results__empty {
  padding: var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
}

/* ─────────────────────────────────────────────────────────
   Garantías · detalle dentro del drawer (pantallas 3.6/3.7)
   ───────────────────────────────────────────────────────── */
.gar-detalle__status {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: var(--space-3);
}
.gar-detalle__section {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--space-4) 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border-light);
}
.gar-detalle__dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  font-size: var(--text-sm);
}
.gar-detalle__dl dt {
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}
.gar-detalle__dl dd {
  margin: 0;
  color: var(--text-primary);
  word-break: break-word;
}
.gar-detalle__motivo {
  margin: 0;
  padding: var(--space-3);
  background: var(--bg-input);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: pre-wrap;
}
.gar-detalle__fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-2);
}
.gar-detalle__foto {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-input);
  transition: transform var(--transition-fast);
}
.gar-detalle__foto:hover { transform: scale(1.02); }
.gar-detalle__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ─────────────────────────────────────────────────────────
   Cascos · modal "Empacar envío" (lista con checkboxes)
   ───────────────────────────────────────────────────────── */
.empacar-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  max-height: 300px;
  overflow-y: auto;
}
.empacar-list__head {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--bg-input);
  position: sticky; top: 0;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}
.empacar-toggle {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  user-select: none;
}
.empacar-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.empacar-item:last-child { border-bottom: none; }
.empacar-item:hover { background: var(--bg-hover); }
.empacar-item__body {
  flex: 1; min-width: 0;
  font-size: var(--text-sm);
}

/* ─────────────────────────────────────────────────────────
   Conteo físico (pantalla 1.9) · scanner panel + progress bar
   ───────────────────────────────────────────────────────── */
.conteo-progress {
  margin-top: var(--space-2);
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--bg-input);
  overflow: hidden;
}
.conteo-progress__bar {
  height: 100%;
  background: var(--brand-navy);
  transition: width var(--transition-base, 200ms cubic-bezier(0.4, 0, 0.2, 1));
}

.conteo-scanner__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.conteo-scanner__form {
  display: flex; gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.conteo-scanner__input {
  flex: 1; min-width: 0;
  font-size: var(--text-lg);
  height: 56px;
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.conteo-scanner__btn {
  flex-shrink: 0;
  min-height: 56px;
  padding: 0 var(--space-5);
}

/* Hint visual: cuál código escanear (anti-error: evita que confundan SKU con serial) */
.conteo-scanner__hint {
  display: flex; gap: var(--space-2);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  background: var(--info-bg);
  border: 1px solid var(--info);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.conteo-scanner__hint-icon {
  flex-shrink: 0;
  color: var(--info);
  margin-top: 2px;
}
.conteo-scanner__hint-body {
  flex: 1;
  color: var(--text-primary);
  line-height: 1.5;
}
.conteo-scanner__hint-rows {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-2);
}
.conteo-scanner__hint-row {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs);
}
.conteo-scanner__hint-row--ok    { color: var(--success); }
.conteo-scanner__hint-row--bad   { color: var(--danger); }
.conteo-scanner__hint-row code {
  font-family: var(--font-mono, monospace);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  background: var(--bg-card);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
@media (max-width: 639px) {
  .conteo-scanner__hint-rows { flex-direction: column; gap: var(--space-1); }
}

.conteo-scanner__feedback {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
}
.conteo-scanner__feedback--hint {
  background: var(--bg-input);
  color: var(--text-tertiary);
  justify-content: center;
}
.conteo-scanner__feedback--loading {
  background: var(--bg-input);
  color: var(--text-secondary);
  justify-content: center;
}
.conteo-scanner__feedback--success {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}
.conteo-scanner__feedback--warning {
  background: var(--warning-bg);
  border-color: var(--warning);
  color: var(--warning);
}
.conteo-scanner__feedback--error {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

/* ─────────────────────────────────────────────────────────
   Cartera B2B (pantallas 3.4/3.5) · saldos + timeline
   ───────────────────────────────────────────────────────── */
.cartera-saldos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
@media (min-width: 480px) {
  .cartera-saldos { grid-template-columns: repeat(4, 1fr); }
}
.cartera-saldo {
  padding: var(--space-3);
  background: var(--bg-input);
  border-radius: var(--radius-md);
  text-align: center;
}
.cartera-saldo--total {
  background: var(--brand-navy-50, var(--bg-input));
  border-left: 3px solid var(--brand-navy);
  text-align: left;
}
.cartera-saldo__label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.cartera-saldo__value {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.cartera-saldo__value--bad { color: var(--danger); }
.cartera-saldo__value--ok  { color: var(--success); }

/* Timeline de movimientos (cargos + abonos) */
.cartera-timeline {
  display: flex; flex-direction: column;
  gap: var(--space-1);
  border-left: 2px solid var(--border);
  padding-left: var(--space-3);
  margin-left: var(--space-2);
}
.cartera-mov {
  position: relative;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
}
.cartera-mov--paid { opacity: 0.7; }
.cartera-mov__dot {
  position: absolute;
  left: calc(-1 * var(--space-3) - 6px - 1px);
  top: calc(var(--space-2) + 4px);
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
}
.cartera-mov__dot--cargo { background: var(--text-secondary); }
.cartera-mov__dot--abono { background: var(--success); }
.cartera-mov__dot--paid  { background: var(--success); }
.cartera-mov__dot--late  { background: var(--danger); }
.cartera-mov__body { min-width: 0; }
.cartera-mov__row {
  display: flex; gap: var(--space-2);
  justify-content: space-between;
  align-items: baseline;
}
.cartera-mov__concepto {
  font-weight: var(--font-medium);
  color: var(--text-primary);
  min-width: 0;
  word-break: break-word;
}
.cartera-mov__monto {
  flex-shrink: 0;
  font-weight: var(--font-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.cartera-mov__monto--abono { color: var(--success); }
.cartera-mov__meta {
  font-size: var(--text-xs);
  margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────
   Reportes (pantalla 2.8) · toolbar + chart + ranking + tiles
   ───────────────────────────────────────────────────────── */
.reportes-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.reportes-toolbar__nav {
  display: flex; align-items: center; gap: var(--space-2);
}
.reportes-toolbar__mes {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  min-width: 140px;
  text-align: center;
}

.reportes-chart {
  background: var(--bg-input);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.reportes-chart__axis {
  display: flex; justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  padding: var(--space-2) var(--space-3) 0;
  font-variant-numeric: tabular-nums;
}

.reportes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (min-width: 1024px) {
  .reportes-grid { grid-template-columns: 1fr 1fr; }
}

/* Tiles por método de pago */
.reportes-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2);
}
.reportes-tile {
  padding: var(--space-3);
  background: var(--bg-input);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--text-tertiary);
}
.reportes-tile--success { border-left-color: var(--success); }
.reportes-tile--info    { border-left-color: var(--info); }
.reportes-tile--warning { border-left-color: var(--warning); }
.reportes-tile__label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.reportes-tile__value {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.reportes-tile__hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* Ranking list con barras horizontales */
.ranking-list {
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.ranking-row {
  display: flex; flex-direction: column;
  gap: var(--space-1);
}
.ranking-row__head {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap;
}
.ranking-row__name {
  flex: 1; min-width: 0;
  font-size: var(--text-sm);
}
.ranking-row__values {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ranking-row__bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--bg-input);
  overflow: hidden;
}
.ranking-row__bar-fill {
  height: 100%;
  background: var(--brand-navy);
  border-radius: var(--radius-full);
  transition: width 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─────────────────────────────────────────────────────────
   Configuración (pantalla 0.4) · secciones + dirty bar
   ───────────────────────────────────────────────────────── */
.config-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.config-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.config-section__head { margin-bottom: var(--space-4); }
.config-section__title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0;
}
.config-section__sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 4px 0 0;
}
.config-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .config-grid { grid-template-columns: 1fr 1fr; }
}
.config-grid__full { grid-column: 1 / -1; }

.config-subsection-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--space-4) 0 var(--space-2);
}
.config-zonas {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.config-zona-row {
  display: grid;
  grid-template-columns: 1fr 120px auto;
  gap: var(--space-2);
  align-items: center;
}
@media (max-width: 480px) {
  .config-zona-row { grid-template-columns: 1fr 100px auto; }
}

.config-info {
  display: flex; gap: var(--space-2);
  padding: var(--space-3);
  background: var(--info-bg);
  border: 1px solid var(--info);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin-top: var(--space-4);
}
.config-info svg { color: var(--info); flex-shrink: 0; margin-top: 2px; }

.config-dirty-banner {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}
.config-dirty-banner svg { color: var(--warning); }

.config-save-bar {
  position: sticky;
  bottom: var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--text-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.25);
  z-index: 30;
  gap: var(--space-3);
}
.config-save-bar .muted { color: rgba(255,255,255,0.7); font-size: var(--text-sm); }
.config-save-bar .btn--ghost { color: #fff; }
.config-save-bar .btn--ghost:hover { background: rgba(255,255,255,0.1); }

/* ─────────────────────────────────────────────────────────
   Mi cuenta (pantalla 0.2)
   ───────────────────────────────────────────────────────── */
.mi-cuenta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .mi-cuenta-grid { grid-template-columns: 1fr 1fr; }
}
.mi-cuenta-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }

.mi-cuenta-perfil {
  display: flex; align-items: center; gap: var(--space-3);
}
.mi-cuenta-perfil__avatar {
  width: 56px; height: 56px;
  font-size: var(--text-md);
  flex-shrink: 0;
}
.mi-cuenta-perfil__nombre {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.mi-cuenta-perfil__rol { margin-top: 4px; }

.mi-cuenta-quick {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}
.mi-cuenta-quick__label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}
.mi-cuenta-quick__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  margin-right: 4px;
  margin-bottom: 4px;
  background: var(--bg-input);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.mi-cuenta-quick__link:hover { background: var(--brand-navy-light); color: var(--brand-navy); }

.mi-cuenta-pin-input {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-md);
  letter-spacing: 0.3em;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────
   Usuarios (pantalla 0.3)
   ───────────────────────────────────────────────────────── */
.usuario-row__name {
  display: flex; align-items: center; gap: var(--space-2);
}
.usuario-detalle__head {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.usuario-detalle__avatar {
  width: 48px; height: 48px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────
   Detalle de modelo (pantalla 1.2) + batería (pantalla 1.3)
   ───────────────────────────────────────────────────────── */
.modelo-detalle__sub,
.bateria-detalle__sub {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

.modelo-detalle__grid,
.bateria-detalle__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 1024px) {
  .modelo-detalle__grid,
  .bateria-detalle__grid {
    grid-template-columns: 1fr 320px;
    align-items: start;
  }
  .modelo-detalle__side,
  .bateria-detalle__side {
    position: sticky;
    top: calc(var(--space-4) + var(--banner-h, 0px));
  }
}

.modelo-detalle__main,
.bateria-detalle__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.modelo-detalle__specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
}
@media (min-width: 640px) {
  .modelo-detalle__specs { grid-template-columns: 1fr 1fr; }
}
.modelo-detalle__spec {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-light);
}
.modelo-detalle__spec:last-child { border-bottom: none; }
.modelo-detalle__spec dt {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}
.modelo-detalle__spec dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: var(--font-semibold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Batería · bloque visual de ubicación */
.bateria-detalle__ubicacion-label {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--brand-navy-50, var(--bg-input));
  border-left: 4px solid var(--brand-navy);
  border-radius: var(--radius-md);
}
.bateria-detalle__ubicacion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--brand-navy);
  color: #fff;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────
   Sidebar caret · indica que el item tiene sub-páginas + toggle accordion
   ───────────────────────────────────────────────────────── */
.sidebar__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 4px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}
.sidebar__caret:hover { background: var(--bg-input); color: var(--text-primary); }
.sidebar__item.is-expanded .sidebar__caret { transform: rotate(180deg); }
.sidebar__item--has-ws.is-active .sidebar__caret { color: var(--brand-navy); }

/* ─────────────────────────────────────────────────────────
   Sidebar children (acordeón inline tipo Hostinger)
   max-height transition: simple, funciona en todos los browsers,
   sin quirks del grid 0fr→1fr (que falla con varios children directos).
   ───────────────────────────────────────────────────────── */
.sidebar__children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar__children.is-expanded {
  /* 60px por child es suficiente para los más altos posibles. Si en algún
     momento se agregan workspaces con muchos hijos (>10), subir el cap. */
  max-height: 600px;
}
.sidebar__child {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px var(--space-3) 8px calc(var(--space-3) + 20px + var(--space-2));
  margin: 2px var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
}
.sidebar__child:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.sidebar__child.is-active {
  background: var(--brand-navy-light);
  color: var(--brand-navy);
  font-weight: var(--font-medium);
}
.sidebar__child-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text-tertiary);
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.sidebar__child:hover .sidebar__child-dot { background: var(--text-secondary); }
.sidebar__child.is-active .sidebar__child-dot { background: var(--brand-navy); }

/* En sidebar VISUALMENTE colapsado (desktop con .sidebar--collapsed,
   o tablet por default sin .sidebar--expanded), ocultamos el caret y los
   children accordion. La discoverabilidad de sub-páginas viene del flyout
   (click en el ícono) y de los sub-tabs Stripe en page-header. */
@media (min-width: 1024px) {
  .sidebar--collapsed .sidebar__caret,
  .sidebar--collapsed .sidebar__children { display: none !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .sidebar:not(.sidebar--expanded) .sidebar__caret,
  .sidebar:not(.sidebar--expanded) .sidebar__children { display: none !important; }
}

/* ─────────────────────────────────────────────────────────
   Sidebar flyout · sub-páginas al click en sidebar colapsado
   ───────────────────────────────────────────────────────── */
.sidebar-flyout {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.15);
  min-width: 220px;
  padding: var(--space-2);
  animation: slideRight 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideRight {
  from { transform: translateX(-6px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.sidebar-flyout__title {
  font-size: 10px;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  padding: var(--space-2) var(--space-3) var(--space-1);
}
.sidebar-flyout__item {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
  min-height: var(--touch-target, 48px);
  display: flex;
  align-items: center;
}
.sidebar-flyout__item:hover,
.sidebar-flyout__item:focus-visible {
  background: var(--bg-hover);
  outline: none;
}
.sidebar-flyout__item.is-active {
  background: var(--brand-navy-light);
  color: var(--brand-navy);
}

/* ─────────────────────────────────────────────────────────
   Subnav (sub-tabs Stripe-style debajo del page-header)
   ───────────────────────────────────────────────────────── */
.subnav {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: calc(-1 * var(--space-2));
}
.subnav__tab {
  display: inline-flex; align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.subnav__tab:hover {
  color: var(--text-primary);
}
.subnav__tab.is-active {
  color: var(--brand-navy);
  border-bottom-color: var(--brand-navy);
  font-weight: var(--font-semibold);
}
.subnav__tab:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─────────────────────────────────────────────────────────
   Command palette (Cmd+K / '/')
   ───────────────────────────────────────────────────────── */
.palette-backdrop {
  position: fixed; inset: 0;
  background: rgba(17, 24, 39, 0.6);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  animation: fadeIn 120ms ease-out;
}
.palette {
  width: 100%;
  max-width: 580px;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(17, 24, 39, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideDown 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideDown {
  from { transform: translateY(-12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.palette__input-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-light);
}
.palette__icon {
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.palette__input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: var(--text-md);
  color: var(--text-primary);
  font-family: inherit;
  padding: var(--space-1) 0;
}
.palette__input::placeholder { color: var(--text-tertiary); }
.palette__esc {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  padding: 2px 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
}
.palette__results {
  max-height: 380px;
  overflow-y: auto;
  padding: var(--space-2);
}
.palette__group + .palette__group { margin-top: var(--space-2); }
.palette__group-label {
  font-size: 10px;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  padding: var(--space-2) var(--space-3) var(--space-1);
}
.palette__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text-primary);
  transition: background var(--transition-fast);
}
.palette__item.is-active {
  background: var(--brand-navy-light);
  color: var(--brand-navy);
}
.palette__item-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-input);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}
.palette__item.is-active .palette__item-icon {
  background: var(--brand-navy);
  color: #fff;
}
.palette__item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.palette__item-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.palette__item-sub {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.palette__item.is-active .palette__item-sub { color: var(--brand-navy-mid, var(--text-secondary)); }
.palette__item-enter {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--brand-navy);
}
.palette__empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}
.palette__hint {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border-light);
  background: var(--bg-input);
  font-size: 11px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.palette__hint kbd {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  padding: 1px 5px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  margin-right: 2px;
}
@media (max-width: 639px) {
  .palette-backdrop { padding-top: 5vh; padding-left: var(--space-2); padding-right: var(--space-2); }
  .palette__hint { display: none; }
  .palette__results { max-height: 60vh; }
}

@media (max-width: 639px) {
  .conteo-scanner__form { flex-direction: column; }
  .conteo-scanner__btn { width: 100%; }
}

/* ─────────────────────────────────────────────────────────
   Avatar XS (para cards compactas tipo kanban)
   ───────────────────────────────────────────────────────── */
.avatar--xs {
  width: 22px;
  height: 22px;
  font-size: 10px;
}

/* ─────────────────────────────────────────────────────────
   Servicios Kanban (pantalla 2.3)
   ───────────────────────────────────────────────────────── */

/* Toolbar superior — navegación de día + totales */
.kanban-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.kanban-toolbar__nav {
  display: flex; align-items: center; gap: var(--space-2);
}
.kanban-toolbar__date {
  max-width: 160px;
}
.kanban-toolbar__totals {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-sm);
}

/* tech-card extendida con KPIs (override del display:flex row) */
.tech-card--kpi {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  min-width: 240px;
  cursor: default;
}
.tech-card__head {
  display: flex; align-items: center; gap: var(--space-2);
}
.tech-card__body { flex: 1; min-width: 0; }
.tech-card__role {
  font-size: var(--text-xs);
  text-transform: capitalize;
}
.tech-card__count {
  flex-shrink: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--brand-navy);
  min-width: 32px;
  text-align: right;
}
.tech-card__stats {
  display: flex; gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-light);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.tech-card__stats span {
  display: inline-flex; align-items: center; gap: 4px;
}

/* Kanban board (mobile-first scroll-snap-x) */
.kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86vw;
  gap: var(--space-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-3);
  margin: 0 calc(-1 * var(--space-4));    /* full-bleed dentro del content padding */
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
@media (min-width: 768px) {
  .kanban {
    grid-auto-columns: 280px;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 1280px) {
  .kanban {
    grid-auto-columns: minmax(260px, 1fr);
    overflow-x: visible;
  }
}

.kanban-col {
  scroll-snap-align: start;
  background: var(--bg-input);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  min-height: 240px;
}
.kanban-col__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-3) var(--space-2);
  position: sticky; top: 0;
  background: var(--bg-input);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  z-index: 1;
}
.kanban-col__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kanban-col__count {
  background: var(--bg-card);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  min-width: 24px;
  text-align: center;
}
.kanban-col__body {
  flex: 1;
  padding: 0 var(--space-2) var(--space-2);
  display: flex; flex-direction: column;
  gap: var(--space-2);
}
.kanban-col__empty {
  text-align: center;
  padding: var(--space-6) var(--space-3);
  font-size: var(--text-sm);
}

/* Kanban card */
.kanban-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: box-shadow var(--transition-fast);
}
.kanban-card:hover { box-shadow: var(--shadow-sm); }
.kanban-card--domicilio {
  border-left: 3px solid var(--info);
}
.kanban-card--venta {
  border-left: 3px solid var(--brand-navy);
}

.kanban-card__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-2);
}
.kanban-card__type-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.kanban-card__time {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.kanban-card__body {
  display: flex; flex-direction: column; gap: 4px;
}
.kanban-card__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: 1.3;
}
.kanban-card__meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  display: flex; align-items: center; gap: 4px;
}

.kanban-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-light);
}
.kanban-card__foot-left {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap;
}
.kanban-card__total {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.kanban-card__menu {
  flex-shrink: 0;
  width: 28px; height: 28px;
  min-height: 0;
  padding: 0;
}
.kanban-card__advance {
  min-height: 36px;
  font-size: var(--text-xs);
  justify-content: center;
}