/* ============================================================
   INVENTARIO — FORMULARIOS DE CREACIÓN (Ventas / Compras)
   Layout de trabajo responsive. Usa únicamente variables de
   app-theme.css y clases de utilidad existentes.
   ============================================================ */

/* ── Contenedor y encabezado ─────────────────────────────── */
.inv-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  animation: invRise var(--transition-slow) both;
}

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

.inv-form-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}

.inv-form-head-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: var(--border-radius-lg);
  background: var(--primary-gradient);
  color: var(--text-inverse);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
}

.inv-form-head-text { min-width: 0; flex: 1; }

.inv-form-title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 650;
  line-height: 1.2;
  color: var(--text-primary);
}

.inv-form-subtitle {
  margin: 2px 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.inv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--border-radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.inv-chip-primary { background: var(--primary-bg); color: var(--primary-dark); }
.inv-chip-info    { background: var(--info-bg);    color: var(--info-dark); }
.inv-chip-warning { background: var(--warning-bg); color: var(--warning-dark); }
.inv-chip-muted   { background: var(--bg-surface-active); color: var(--text-secondary); }

/* ── Rejilla de trabajo: formulario + resumen ────────────── */
.inv-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
  gap: var(--space-4);
  align-items: start;
  width: 100%;
  max-width: 100%;
}

.inv-form-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.inv-form-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  max-width: 100%;
}

.inv-form-side > * { min-width: 0; }

.inv-form-aside {
  min-width: 0;
  max-width: 100%;
}

/* La columna de resultados ya no es sticky: el detalle va arriba del resumen */
.inv-form-side .inv-summary { position: static; }

.inv-form-side .inv-detail-desktop .table-scroll-area { overflow: auto; }

.inv-form-side .inv-detail-desktop .mud-table-root { min-width: 620px; }

.inv-form-side .inv-detail-desktop .mud-table.telwin-table .mud-th,
.inv-form-side .inv-detail-desktop .mud-table.telwin-table .mud-table-cell {
  padding: var(--space-2) !important;
  font-size: var(--font-size-xs) !important;
}

/* ── Secciones ───────────────────────────────────────────── */
.inv-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--space-4) var(--space-5) var(--space-5);
  box-shadow: var(--shadow-xs);
}

.inv-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-color-light);
}

.inv-section-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: var(--border-radius);
  background: var(--primary-bg);
  color: var(--primary);
  display: grid;
  place-items: center;
}

.inv-section-title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 650;
  color: var(--text-primary);
}

.inv-section-desc {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.inv-section-badge {
  margin-left: auto;
  background: var(--bg-surface-active);
  color: var(--text-secondary);
  border-radius: var(--border-radius-pill);
  padding: 3px 10px;
  font-size: var(--font-size-xs);
  font-weight: 650;
}

.inv-section-badge--edit {
  margin-left: auto;
  background: var(--primary-bg);
  color: var(--primary-dark);
}

.inv-section-badge--edit + .inv-section-badge { margin-left: 0; }

/* ── Campos ──────────────────────────────────────────────── */
.inv-fields {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}

.inv-col-3  { grid-column: span 3; }
.inv-col-4  { grid-column: span 4; }
.inv-col-6  { grid-column: span 6; }
.inv-col-8  { grid-column: span 8; }
.inv-col-12 { grid-column: span 12; }

.inv-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.inv-label {
  font-size: var(--font-size-xs);
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.inv-label .inv-req { color: var(--danger); margin-left: 2px; }

.inv-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.inv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--bg-surface-hover);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-pill);
}

.inv-toggle-option {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: .02em;
  padding: 3px 14px;
  border-radius: var(--border-radius-pill);
  cursor: pointer;
  line-height: 1.5;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.inv-toggle-option:hover { color: var(--text-primary); }

.inv-toggle-option:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.inv-toggle-option.is-active {
  background: var(--primary);
  color: var(--text-inverse);
  box-shadow: var(--shadow-xs);
}

.inv-help {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

/* ── Selector de modo (tarjetas grandes) ─────────────────── */
.inv-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.inv-mode-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--text-secondary);
  font: inherit;
}

.inv-mode-card:hover:not(:disabled) {
  border-color: var(--primary-light);
  background: var(--primary-bg);
}

.inv-mode-card.is-active {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary-dark);
  box-shadow: var(--shadow-focus);
}

.inv-mode-card:disabled { cursor: not-allowed; opacity: .6; }

.inv-mode-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--border-radius);
  background: var(--bg-surface-hover);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
}

.inv-mode-card.is-active .inv-mode-icon {
  background: var(--primary);
  color: var(--text-inverse);
}

.inv-mode-title {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 650;
  color: inherit;
}

.inv-mode-sub {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.35;
}

/* ── Presentaciones (cajas / medias / unidades) ──────────── */
.inv-pres-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.inv-pres-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-surface-hover);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  transition: all var(--transition-fast);
}

.inv-pres-card:focus-within {
  border-color: var(--primary-light);
  background: var(--primary-bg);
}

.inv-pres-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.inv-pres-name {
  font-size: var(--font-size-sm);
  font-weight: 650;
  color: var(--text-primary);
}

.inv-pres-tag {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.inv-pres-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.inv-pres-fields .inv-pres-venta { grid-column: 1 / -1; }

/* ── Total en línea (visible mientras se ingresa) ────────── */
.inv-inline-total {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--primary-bg);
  border: 1px solid var(--primary-light);
  border-radius: var(--border-radius);
}

.inv-inline-total-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.inv-inline-total-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.inv-inline-total-label {
  font-size: var(--font-size-xs);
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.inv-inline-total-sub {
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

.inv-inline-total-value {
  font-size: clamp(1.25rem, 3.2vw, 1.6rem);
  font-weight: 750;
  line-height: 1.1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.inv-inline-total-value.is-loss { color: var(--danger); }

.inv-inline-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--primary-light);
}

.inv-inline-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.inv-inline-stat-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.inv-inline-stat-value {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inv-inline-stat-value.is-profit { color: var(--success); }
.inv-inline-stat-value.is-loss { color: var(--danger); }
.inv-inline-stat-value.is-muted { color: var(--text-muted); font-weight: 600; }

/* ── Filas de información / notas ────────────────────────── */
.inv-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--border-radius);
  background: var(--bg-surface-hover);
  border: 1px solid var(--border-color-light);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.45;
}

.inv-note-info    { background: var(--info-bg);    border-color: var(--info-light);    color: var(--info-dark); }
.inv-note-warning { background: var(--warning-bg); border-color: var(--warning-light); color: var(--warning-dark); }
.inv-note-success { background: var(--success-bg); border-color: var(--success-light); color: var(--success-dark); }
.inv-note-danger  { background: var(--danger-bg);  border-color: var(--danger-light);  color: var(--danger-dark); }

.inv-note-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── Resumen lateral ─────────────────────────────────────── */
.inv-summary {
  position: sticky;
  top: calc(var(--header-height, 60px) + var(--space-4));
  width: 100%;
  max-width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.inv-summary-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--primary-gradient);
  color: var(--text-inverse);
}

.inv-summary-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--border-radius);
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .25);
}

.inv-summary-head-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.inv-summary-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.inv-summary-subtitle {
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.2;
  opacity: .8;
}

.inv-summary-chip {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: var(--border-radius-pill);
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .28);
  font-size: var(--font-size-xs);
  font-weight: 650;
  white-space: nowrap;
}

.inv-summary-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.inv-summary-total {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 6px);
  background: var(--primary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.inv-summary-total::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}

.inv-summary-total-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.inv-summary-total-value {
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  font-weight: 750;
  line-height: 1.05;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.inv-summary-total-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: 550;
  color: var(--text-secondary);
}

.inv-summary-rows {
  display: flex;
  flex-direction: column;
}

.inv-summary-group-label {
  padding-bottom: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.inv-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color-light);
}

.inv-summary-row:last-child { border-bottom: none; }

.inv-summary-row > span { min-width: 0; }

.inv-summary-row strong {
  color: var(--text-primary);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inv-summary-row--discount strong {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--border-radius-pill);
  background: var(--danger-bg);
  color: var(--danger-dark);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.inv-summary-row--result {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-surface-hover);
  border: 1px solid var(--border-color-light);
  border-radius: var(--border-radius);
}

.inv-summary-row--result > span {
  font-weight: 650;
  color: var(--text-primary);
}

.inv-summary-row--result strong {
  font-size: var(--font-size-md);
  font-weight: 750;
}

.inv-summary-row--result.is-profit {
  background: var(--success-bg);
  border-color: var(--success-light);
}

.inv-summary-row--result.is-profit > span,
.inv-summary-row--result.is-profit strong { color: var(--success-dark); }

.inv-summary-row--result.is-loss {
  background: var(--danger-bg);
  border-color: var(--danger-light);
}

.inv-summary-row--result.is-loss > span,
.inv-summary-row--result.is-loss strong { color: var(--danger-dark); }

.inv-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--bg-surface-hover);
  border-top: 1px solid var(--border-color-light);
}

.inv-summary-actions > * { flex: 1 1 0; min-width: 0; }

.inv-summary-actions .mud-button-root {
  height: 42px;
  border-radius: var(--border-radius);
  font-weight: 650;
  text-transform: none;
}

.inv-summary-actions .mud-button-filled-primary {
  box-shadow: 0 8px 16px -10px var(--primary-dark);
}

/* ── Texto utilitario ────────────────────────────────────── */
.inv-text-profit { color: var(--success); }
.inv-text-loss   { color: var(--danger); }
.inv-text-muted  { color: var(--text-muted); }
.inv-strong      { font-weight: 650; color: var(--text-primary); }
.inv-num         { font-variant-numeric: tabular-nums; }

/* ── Selector de búsqueda compartido ─────────────────────── */
.telwin-search-select { position: relative; }

.telwin-search-clear {
  position: absolute;
  right: 46px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--border-radius-pill);
  background: var(--bg-surface-active);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.telwin-search-clear:hover { background: var(--danger-bg); color: var(--danger); }

.telwin-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: min(60vh, 340px);
  overflow-y: auto;
}

.telwin-search-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-bottom: 1px solid var(--border-color-light);
  background: transparent;
  cursor: pointer;
  font: inherit;
  transition: background var(--transition-fast);
}

.telwin-search-item:hover,
.telwin-search-item:focus-visible {
  background: var(--primary-bg);
  outline: none;
}

.telwin-search-item-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.telwin-search-item-sub {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.telwin-search-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

.telwin-search-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-1);
  position: sticky;
  bottom: 0;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color-light);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* ── Detalle de factura (tabla + tarjetas móvil) ─────────── */
.inv-detail-desktop { display: block; }
.inv-detail-mobile  { display: none; flex-direction: column; gap: var(--space-2); }

.inv-line-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--space-3);
  box-shadow: var(--shadow-xs);
}

.inv-line-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.inv-line-name {
  font-size: var(--font-size-sm);
  font-weight: 650;
  color: var(--text-primary);
}

.inv-line-code {
  display: inline-block;
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-xs);
  font-weight: 650;
  color: var(--primary);
  background: var(--primary-bg);
  border-radius: var(--border-radius-pill);
  padding: 2px 8px;
}

.inv-line-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-color-light);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.inv-line-meta strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ── Acciones móviles fijas ──────────────────────────────── */
.inv-mobile-actions { display: none; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .inv-form-grid { grid-template-columns: minmax(0, 1fr); }
  .inv-summary { position: static; }
  .inv-summary-actions { display: none; }

  .inv-mobile-actions {
    display: flex;
    gap: var(--space-2);
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
    border-radius: var(--border-radius-lg);
  }

  .inv-mobile-actions > * { flex: 1; }

  .inv-mobile-total {
    flex: 0 0 auto !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: var(--space-3);
    margin-right: var(--space-2);
    border-right: 1px solid var(--border-color);
  }

  .inv-mobile-total span {
    font-size: var(--font-size-xs);
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .inv-mobile-total strong {
    font-size: var(--font-size-md);
    font-weight: 750;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
  }
}

@media (max-width: 768px) {
  .inv-form-head { border-radius: var(--border-radius); padding: var(--space-3) var(--space-4); }
  .inv-form-title { font-size: var(--font-size-lg); }
  .inv-section { padding: var(--space-3) var(--space-4) var(--space-4); }

  .inv-detail-desktop { display: none; }
  .inv-detail-mobile  { display: flex; }

  .inv-col-3, .inv-col-4 { grid-column: span 6; }
  .inv-col-6, .inv-col-8 { grid-column: span 12; }

  .inv-pres-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .inv-col-3, .inv-col-4, .inv-col-6, .inv-col-8 { grid-column: span 12; }
  .inv-mode-switch { grid-template-columns: 1fr; }
  .inv-pres-fields { grid-template-columns: 1fr 1fr; }
  .inv-chip { display: none; }
}

/* Accesibilidad: respeta usuarios que reducen movimiento */
@media (prefers-reduced-motion: reduce) {
  .inv-form { animation: none; }
  .inv-mode-card, .inv-pres-card, .inv-form-head-icon { transition: none; }
}

/* ── Blindaje de ancho: evita que el resumen se desborde ─── */
.inv-form,
.inv-form-grid,
.inv-form-main,
.inv-form-side,
.inv-form-aside,
.inv-section,
.inv-fields,
.inv-field,
.inv-mode-switch,
.inv-pres-grid,
.inv-pres-card,
.inv-pres-fields,
.inv-detail-desktop,
.table-scroll-area { min-width: 0; }

.inv-form-main > * { min-width: 0; }

.inv-pres-card .mud-input-control,
.inv-field .mud-input-control { min-width: 0; width: 100%; }

.inv-summary { min-width: 0; box-sizing: border-box; }

/* Tabla de precios por sede (modal /inventario/precios) */
.inv-precios-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.inv-precios-table thead th {
  background: var(--primary);
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-3);
  text-align: left;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.inv-precios-table thead th:first-child { border-top-left-radius: var(--border-radius); }
.inv-precios-table thead th:last-child { border-top-right-radius: var(--border-radius); }

.inv-precios-table tbody td {
  padding: var(--space-2) var(--space-3);
  vertical-align: middle;
  border-bottom: 1px solid var(--border-color-light);
}

.inv-precios-table tbody tr.inv-precios-row:hover { background: var(--bg-surface-hover); }

.inv-precios-table tbody tr.inv-precios-row .mud-input-control { margin-top: 0; }

.inv-ganancia-row td {
  padding: 0 var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border-color-light);
}

.inv-ganancia-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-1) var(--space-3);
  background: var(--success-bg);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
}

.inv-ganancia-item { display: inline-flex; align-items: baseline; gap: var(--space-1); }
.inv-ganancia-label { color: var(--text-secondary); font-weight: 500; }
.inv-ganancia-item strong { color: var(--success-dark); }

/* ── Inventario temporal: detalle + editor ───────────────── */
.temporal-page { overflow: visible; }

.temporal-page .filter-header {
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.temporal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

/* Móvil: primero se diligencia, luego se revisa el detalle y al final el resumen */
.temporal-editor { order: 1; }
.temporal-detail { order: 2; }
.temporal-summary-panel { order: 3; overflow: hidden; }

.temporal-summary-panel > .temporal-summary { border-top: none; }

@media (min-width: 1101px) {
  .temporal-layout {
    grid-template-columns: minmax(340px, 4fr) minmax(0, 8fr);
    grid-template-rows: auto auto;
  }
  .temporal-editor { grid-column: 1; grid-row: 1 / span 2; }
  .temporal-detail { grid-column: 2; grid-row: 1; }
  .temporal-summary-panel { grid-column: 2; grid-row: 2; }

  .temporal-summary-panel .temporal-summary {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .temporal-summary-panel .temporal-editor-actions { justify-content: flex-end; }

  .temporal-summary-panel .temporal-editor-actions .mud-button-root {
    flex: 0 0 auto;
    min-width: 170px;
  }
}

.temporal-panel {
  min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}

.temporal-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-color-light);
}

.temporal-panel-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.temporal-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius);
  background: var(--primary-bg);
  color: var(--primary-dark);
  border: 1px solid var(--border-color-light);
}

.temporal-panel-title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.temporal-panel-subtitle {
  margin: 2px 0 0;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  line-height: 1.3;
}

.temporal-detail-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex: 0 0 auto;
}

.temporal-detail-kpi span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.temporal-detail-kpi strong {
  font-size: var(--font-size-md);
  font-variant-numeric: tabular-nums;
}

.temporal-detail-kpi strong.is-profit { color: var(--success-dark); }
.temporal-detail-kpi strong.is-loss { color: var(--danger-dark); }

.temporal-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface-hover);
  border-bottom: 1px solid var(--border-color-light);
}

.temporal-segmented--editor { background: var(--bg-surface); }

.temporal-segmented-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--border-radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.temporal-segmented-btn:hover {
  background: var(--bg-surface-active);
  color: var(--text-primary);
}

.temporal-segmented-btn.is-active {
  background: var(--primary-bg);
  border-color: var(--primary-light);
  color: var(--primary-dark);
}

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

.temporal-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: var(--border-radius-pill);
  background: var(--bg-surface-active);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.temporal-segmented-btn.is-active .temporal-count {
  background: var(--primary);
  color: var(--text-inverse);
}

.temporal-detail-body { padding: var(--space-3); }

.temporal-detail-body .table-scroll-area {
  max-height: min(62vh, 680px);
  overflow: auto;
  border: 1px solid var(--border-color-light);
  border-radius: var(--border-radius);
}

/* Fila que se está editando: se conecta visualmente con el editor */
.mud-table.telwin-table .mud-table-body .mud-table-row.is-editing {
  background: var(--primary-bg) !important;
}

.mud-table.telwin-table .mud-table-body .mud-table-row.is-editing .mud-table-cell:first-child {
  box-shadow: inset 3px 0 0 var(--primary);
}

.temporal-catalog-table .mud-table-root { min-width: 780px; }

.mud-table.telwin-table.temporal-catalog-table .mud-th,
.mud-table.telwin-table.temporal-catalog-table .mud-table-cell {
  padding: var(--space-2) !important;
  font-size: var(--font-size-xs) !important;
}

.temporal-edit-tag {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2);
  padding: 1px 7px;
  border-radius: var(--border-radius-pill);
  background: var(--primary-bg);
  border: 1px solid var(--primary-light);
  color: var(--primary-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.temporal-edit-tag--solid {
  flex: 0 0 auto;
  margin-left: auto;
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-inverse);
}

.temporal-editor {
  position: sticky;
  top: calc(var(--header-height, 60px) + var(--space-4));
  max-height: calc(100vh - var(--header-height, 60px) - var(--space-6));
  overflow-y: auto;
  scrollbar-width: thin;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.temporal-editor.is-editing {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px var(--primary-bg), var(--shadow-md);
}

.temporal-editor.is-editing .temporal-panel-icon {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-inverse);
}

.temporal-editor-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.temporal-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.temporal-field .mud-input-control {
  width: 100%;
  min-width: 0;
  margin-top: 0;
}

.temporal-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
}

.temporal-qty-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.temporal-qty-grid .temporal-qty-cell:last-child { grid-column: 1 / -1; }

.temporal-qty-grid.is-unit { grid-template-columns: minmax(0, 1fr); }

.temporal-qty-grid.is-unit .temporal-qty-cell:last-child { grid-column: auto; }

.temporal-qty-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.temporal-qty-hint {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
}

.temporal-inline-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--primary-bg);
  border: 1px solid var(--border-color-light);
  border-left: 3px solid var(--primary);
  border-radius: var(--border-radius);
}

.temporal-inline-total-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.temporal-inline-total-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.temporal-inline-total-sub {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.temporal-inline-total-value {
  font-size: var(--font-size-md);
  font-weight: 750;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.temporal-form-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

.temporal-form-actions .mud-button-root { min-height: 38px; }

.temporal-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface-hover);
  border-top: 1px solid var(--border-color-light);
}

.temporal-summary-hero {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-color-light);
  border-radius: var(--border-radius);
}

.temporal-summary-hero > span:first-child {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.temporal-summary-hero strong {
  font-size: var(--font-size-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.temporal-summary-hero.is-profit strong { color: var(--success-dark); }
.temporal-summary-hero.is-loss strong { color: var(--danger-dark); }

.temporal-summary-hint {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.temporal-summary-rows { display: flex; flex-direction: column; }

.temporal-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 3px 0;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  border-bottom: 1px dashed var(--border-color-light);
}

.temporal-summary-row:last-child { border-bottom: none; }

.temporal-summary-row strong {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.temporal-summary-row.is-add strong { color: var(--success-dark); }
.temporal-summary-row.is-warn strong { color: var(--warning-dark); }
.temporal-summary-row.is-loss strong { color: var(--danger-dark); }

.temporal-editor-actions {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--border-color-light);
}

.temporal-editor-actions .mud-button-root {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
}

.temporal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 200px;
  padding: var(--space-5);
  color: var(--text-muted);
  text-align: center;
}

.temporal-empty .mud-icon-root { color: var(--border-color); }

.temporal-empty p {
  margin: 0;
  max-width: 46ch;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .temporal-editor {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .temporal-editor-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--bg-surface);
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
  }
}

@media (max-width: 560px) {
  .temporal-segmented {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .temporal-segmented::-webkit-scrollbar { display: none; }
  .temporal-pair { grid-template-columns: minmax(0, 1fr); }
  .temporal-detail-body .table-scroll-area { max-height: 55vh; }
}

@media (prefers-reduced-motion: reduce) {
  .temporal-segmented-btn,
  .temporal-editor { transition: none; }
}