:root {
  --bg: #f6f7f5;
  --surface: #ffffff;
  --surface-soft: #f9faf8;
  --ink: #17201d;
  --muted: #68736e;
  --line: #dfe5e1;
  --line-strong: #cbd5d0;
  --accent: #17695d;
  --accent-dark: #0f5148;
  --accent-soft: #e7f2ef;
  --blue: #315f9f;
  --amber: #9a6a16;
  --amber-soft: #fbf1de;
  --amber-line: #f0d79f;
  --red: #a3293b;
  --shadow: 0 14px 36px rgba(23, 32, 29, 0.06);
  color-scheme: light;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
}

body.auth-locked {
  overflow: hidden;
}

body.auth-locked .app-shell {
  display: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}

.login-card {
  display: grid;
  gap: 16px;
  width: min(100%, 420px);
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.login-card h1 {
  margin: 0;
  font-size: 1.8rem;
  letter-spacing: 0;
}

.login-card p {
  margin: 4px 0 0;
  color: var(--muted);
}

.login-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.login-card input {
  height: 44px;
  padding: 0 12px;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.login-error {
  padding: 10px 12px;
  color: var(--red);
  background: #fce8eb;
  border: 1px solid #efc3ca;
  border-radius: 8px;
  font-size: 0.88rem;
}

.login-note {
  font-size: 0.8rem;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 18px;
  background: #ffffff;
  border-right: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 6px;
}

.brand-mark {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
}

.login-card .brand-mark {
  width: 64px;
  height: 64px;
}

.brand strong,
.brand span {
  display: block;
}

.brand span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.84rem;
}

.nav-list {
  display: grid;
  gap: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: #40504a;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: left;
}

.nav-code {
  width: 24px;
  color: #8a9691;
  font-size: 0.75rem;
  font-weight: 800;
}

.nav-item:hover,
.nav-item.is-active {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-color: #cbe1db;
}

.sidebar-note {
  margin-top: auto;
  padding: 14px;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.45;
}

.workspace {
  min-width: 0;
  padding: 30px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 6px;
  font-size: 2rem;
  line-height: 1.12;
  font-weight: 760;
}

h2 {
  margin-bottom: 4px;
  font-size: 1.06rem;
  line-height: 1.25;
}

h3 {
  margin-bottom: 8px;
  font-size: 0.98rem;
}

p {
  color: var(--muted);
  line-height: 1.45;
}

.page-subtitle {
  margin-bottom: 0;
}

.local-system-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: -10px 0 22px;
  padding: 12px 14px;
  color: #795313;
  background: #fbf0d7;
  border: 1px solid #efd39b;
  border-radius: 8px;
}

.local-system-banner strong {
  font-size: 0.86rem;
  text-transform: uppercase;
}

.local-system-banner span {
  color: #795313;
  font-size: 0.9rem;
}

.local-system-banner.supabase-mode {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-color: #cbe1db;
}

.local-system-banner.supabase-mode span {
  color: var(--accent-dark);
}

.local-system-banner.error-mode {
  color: var(--red);
  background: #fce8eb;
  border-color: #efc3ca;
}

.local-system-banner.error-mode span {
  color: var(--red);
}

.topbar-actions,
.toolbar,
.form-footer,
.panel-header,
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.topbar-actions,
.toolbar {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.session-chip {
  display: grid;
  align-content: center;
  min-height: 38px;
  max-width: 260px;
  padding: 0 12px;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px solid #cbe1db;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 800;
}

.topbar-search,
.role-box,
.file-box {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.topbar-search {
  width: min(280px, 100%);
}

.role-box {
  width: 170px;
}

.search-results {
  display: grid;
  gap: 8px;
  margin: -10px 0 18px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.search-hit {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px;
  color: var(--ink);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
}

.search-hit strong {
  display: block;
}

.search-hit span {
  color: var(--muted);
  font-size: 0.86rem;
}

.primary-button,
.ghost-button,
.danger-button,
.small-button,
.status-select {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 750;
}

.primary-button {
  color: #ffffff;
  background: var(--accent);
}

.primary-button:hover {
  background: var(--accent-dark);
}

.ghost-button {
  color: var(--accent-dark);
  background: #ffffff;
  border-color: var(--line-strong);
}

.ghost-button:hover {
  background: var(--surface-soft);
}

.danger-button {
  color: var(--red);
  background: #ffffff;
  border-color: #e7b8c0;
}

.small-button {
  min-height: 34px;
  padding: 0 10px;
  color: var(--ink);
  background: #ffffff;
  border-color: var(--line);
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
}

#inventory.tab-panel.is-active {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#inventory .section-heading {
  order: 0;
}

#productFormPanel {
  order: 1;
}

#inventoryTableCollapse {
  order: 2;
}

#inventoryKardexCollapse {
  order: 3;
}

#inventoryReportsCollapse {
  order: 4;
}

#inventoryAdvancedToolsPanel {
  order: 5;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metric-card,
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.metric-card {
  padding: 18px;
}

.metric-card span {
  display: block;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.metric-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.55rem;
  line-height: 1.15;
}

.metric-card p {
  margin-bottom: 0;
  font-size: 0.9rem;
}

.tone-accent {
  border-top: 3px solid var(--accent);
}

.tone-blue {
  border-top: 3px solid var(--blue);
}

.tone-amber {
  border-top: 3px solid var(--amber);
}

.tone-red {
  border-top: 3px solid var(--red);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(280px, 0.62fr);
  gap: 18px;
}

.wide-panel {
  min-width: 0;
}

.panel {
  padding: 18px;
}

.panel-header {
  margin-bottom: 14px;
}

.panel-header.tight {
  align-items: flex-start;
}

.panel-header p,
.section-heading p {
  margin-bottom: 0;
}

.section-heading {
  margin-bottom: 16px;
}

.search-box {
  display: grid;
  gap: 6px;
  min-width: 190px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(23, 105, 93, 0.12);
}

input[readonly] {
  color: var(--muted);
  background: #eef3f1;
  cursor: not-allowed;
}

input,
select {
  height: 42px;
  padding: 0 12px;
}

textarea {
  resize: vertical;
  padding: 10px 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.form-grid label,
.stack-form label {
  display: grid;
  gap: 6px;
  color: #4f5c57;
  font-size: 0.84rem;
  font-weight: 800;
}

.form-action,
.form-actions {
  align-self: end;
}

.wide-field {
  grid-column: span 2;
}

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

.form-actions {
  display: flex;
  gap: 8px;
}

.form-actions button {
  flex: 1;
}

.is-hidden {
  display: none;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 820px;
}

th,
td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  font-size: 0.91rem;
}

th {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  text-transform: uppercase;
}

td.actions-cell {
  white-space: nowrap;
}

.muted {
  color: var(--muted);
}

.stock-pill,
.status-pill,
.unit-pill,
.edit-mode-pill,
.muted-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.edit-mode-pill,
.muted-chip {
  color: #48524e;
  background: #eef1ef;
}

.edit-mode-complete {
  color: #17695d;
  background: #e7f2ef;
}

.edit-mode-limited {
  color: #795313;
  background: #fbf0d7;
}

.edit-mode-blocked {
  color: var(--red);
  background: #f9e7ea;
}

.unit-pill {
  color: #35534c;
  background: #eef3f1;
}

.stock-ok {
  color: #17695d;
  background: #e7f2ef;
}

.stock-low {
  color: var(--red);
  background: #f9e7ea;
}

.status-pendiente {
  color: #795313;
  background: #fbf0d7;
}

.status-preparando {
  color: #2d5b9b;
  background: #e4edf8;
}

.status-en-ruta {
  color: #17695d;
  background: #e7f2ef;
}

.status-entregado {
  color: #48524e;
  background: #eef1ef;
}

.status-emitida {
  color: #2d5b9b;
  background: #e4edf8;
}

.status-borrador {
  color: #795313;
  background: #fbf0d7;
}

.status-enviada {
  color: #2d5b9b;
  background: #e4edf8;
}

.status-aceptada,
.status-convertida_a_venta {
  color: #17695d;
  background: #e7f2ef;
}

.status-rechazada {
  color: var(--red);
  background: #f9e7ea;
}

.status-validado,
.status-listo_para_timbrar {
  color: #17695d;
  background: #e7f2ef;
}

.status-timbrado {
  color: #315f9f;
  background: #e4edf8;
}

/* 7A-4: semaforos del preflight fiscal y de la aprobacion humana del CFDI. */
.status-preflight-neutral,
.status-approval-neutral {
  color: #48524e;
  background: #eef1ef;
}

.status-preflight-danger,
.status-approval-danger {
  color: var(--red);
  background: #f9e7ea;
}

.status-preflight-warning {
  color: #795313;
  background: #fbf0d7;
}

.status-preflight-success,
.status-approval-success {
  color: #17695d;
  background: #e7f2ef;
}

.cfdi-preflight-block {
  display: grid;
  gap: 6px;
  padding: 10px 0 4px;
  border-top: 1px dashed #d7ded9;
}

.cfdi-preflight-block input[type="text"] {
  min-width: 220px;
}

.status-error_timbrado {
  color: var(--red);
  background: #f9e7ea;
}

.status-pagada {
  color: #17695d;
  background: #e7f2ef;
}

.status-vencida,
.status-cancelada {
  color: var(--red);
  background: #f9e7ea;
}

.alert-list,
.order-list,
.route-board,
.reports-grid {
  display: grid;
  gap: 12px;
}

.compact-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.inventory-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.inventory-collapsible-panel {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.inventory-collapsible-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-weight: 850;
}

.inventory-collapsible-panel > summary::-webkit-details-marker {
  display: none;
}

.inventory-collapsible-panel > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  font-weight: 900;
}

.inventory-collapsible-panel[open] > summary::after {
  content: "-";
}

.inventory-collapsible-panel > summary span,
.inventory-collapsible-panel > summary small {
  min-width: 0;
}

.inventory-collapsible-panel > summary small {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 650;
  text-align: right;
}

.inventory-collapsible-content {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
}

.inventory-collapsible-content > .panel {
  box-shadow: none;
}

.inventory-table-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

.product-context-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.product-context-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.is-collapsed {
  display: none !important;
}

.order-layout.quote-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.order-layout.sales-layout,
.order-layout.billing-detail-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.quote-layout > .panel {
  min-width: 0;
  width: 100%;
}

.sales-layout > .panel,
.billing-detail-layout > .panel {
  min-width: 0;
  width: 100%;
}

.sales-operation-panel {
  margin-bottom: 20px;
}

.sales-operation-grid {
  grid-template-columns: minmax(220px, 0.35fr) minmax(0, 1fr) auto;
  align-items: end;
}

.sales-operation-actions {
  align-self: end;
}

.document-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.document-status-grid span {
  display: grid;
  gap: 3px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.86rem;
}

.document-status-grid strong {
  color: var(--ink);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.cfdi-flow {
  display: grid;
  gap: 12px;
}

.cfdi-step-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.cfdi-step-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cfdi-step-title span {
  padding: 4px 8px;
  color: #175b52;
  background: #e7f2ef;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.cfdi-step-title strong {
  font-size: 0.95rem;
}

.compact-notice {
  padding: 10px;
  margin: 4px 0;
}

.quote-line-inputs {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.quote-card .order-card-lines span {
  line-height: 1.35;
}

.quote-lines-box .line-row {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.alert-item,
.order-card,
.route-column,
.report-card,
.line-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.alert-item {
  padding: 12px;
}

.alert-item strong {
  display: block;
  margin-bottom: 4px;
}

.alert-item p {
  margin-bottom: 0;
}

.upcoming-list {
  display: grid;
  gap: 10px;
}

.upcoming-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.upcoming-main {
  display: grid;
  gap: 5px;
}

.upcoming-main strong {
  font-size: 1rem;
}

.upcoming-main p {
  margin-bottom: 0;
}

.upcoming-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.calendar-heading .button-row {
  justify-content: flex-end;
}

.calendar-summary-grid {
  margin-bottom: 18px;
}

.calendar-layout {
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
  align-items: start;
}

.calendar-panel,
.calendar-form,
.calendar-reminders-list {
  min-width: 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.calendar-weekday {
  min-width: 0;
  padding: 6px 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-align: center;
  text-transform: uppercase;
}

.calendar-day {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 112px;
  padding: 8px;
  color: var(--ink);
  text-align: left;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.calendar-day:hover {
  border-color: var(--accent);
}

.calendar-day.is-muted {
  color: var(--muted);
  background: #f1f3f1;
}

.calendar-day.is-today {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.calendar-day > span {
  font-size: 0.82rem;
  font-weight: 850;
}

.calendar-day-events {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.calendar-day-events small {
  display: block;
  min-width: 0;
  padding: 3px 5px;
  overflow: hidden;
  color: #48524e;
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #eef1ef;
  border-radius: 6px;
}

.calendar-day-events .calendar-overdue {
  color: var(--red);
  background: #f9e7ea;
}

.calendar-day-events .calendar-today {
  color: #2d5b9b;
  background: #e4edf8;
}

.calendar-day-events .calendar-upcoming {
  color: #795313;
  background: #fbf0d7;
}

.calendar-day-events .calendar-completed {
  color: var(--accent);
  background: var(--accent-soft);
}

.calendar-day-events .calendar-cancelled {
  color: #48524e;
  background: #eef1ef;
  text-decoration: line-through;
}

.calendar-reminders-list {
  display: grid;
  gap: 10px;
}

.calendar-reminder-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  overflow-wrap: anywhere;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: 8px;
}

.calendar-reminder-card > div {
  min-width: 0;
}

.calendar-reminder-card strong {
  display: block;
  margin-top: 6px;
  font-size: 1rem;
}

.calendar-reminder-card p {
  margin: 4px 0 0;
}

.calendar-reminder-card.priority-alta {
  border-left-color: var(--red);
}

.calendar-reminder-card.priority-media {
  border-left-color: var(--amber);
}

.calendar-reminder-card.priority-baja {
  border-left-color: var(--accent);
}

.order-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.84fr) minmax(0, 1.16fr);
  gap: 18px;
}

.stack-form {
  display: grid;
  gap: 14px;
}

.line-item-box {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.line-inputs {
  display: grid;
  grid-template-columns: minmax(190px, 1.4fr) minmax(132px, 0.8fr) 116px 120px minmax(150px, 0.9fr) auto;
  gap: 10px;
  align-items: end;
}

.sale-step-fields--product {
  grid-template-columns: minmax(220px, 1.6fr) minmax(150px, 0.9fr) 130px;
}

.sale-step-fields--price {
  grid-template-columns: minmax(160px, 1fr) minmax(200px, 1.4fr);
}

.line-step {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.line-step-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.line-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 0.72rem;
  font-weight: 800;
}

.line-step--purchase {
  background: var(--amber-soft);
  border: 1px solid var(--amber-line);
  border-radius: 10px;
  padding: 12px;
}

.line-step--purchase .line-step-number {
  background: var(--amber-line);
  color: var(--amber);
}

.line-step-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.new-product-fields {
  display: grid;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px dashed var(--line);
}

.new-product-fields.is-hidden {
  display: none;
}

.mixed-line-direct-fields.is-hidden {
  display: none;
}

.select-search-input {
  width: 100%;
  margin-bottom: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}

.compact-select-label {
  display: grid;
  gap: 5px;
  min-width: 150px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.compact-select-label select {
  min-height: 36px;
}

.mini-table {
  display: grid;
  gap: 8px;
}

.price-tools {
  display: grid;
  grid-template-columns: minmax(180px, 0.35fr) minmax(240px, 0.45fr) minmax(140px, 0.2fr);
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}

.price-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 9px 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.price-summary.separated {
  justify-content: flex-start;
}

.product-form-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.product-form-intro h2 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.product-form-intro p,
.product-inline-section p,
.product-stock-warning span {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.product-stock-warning {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--amber) 9%, var(--surface));
}

.product-inline-section {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.product-inline-section summary {
  cursor: pointer;
  font-weight: 800;
}

.product-inline-section[open] summary {
  margin-bottom: 8px;
}

.price-summary strong {
  font-size: 1.05rem;
}

.price-summary span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.price-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  color: var(--muted);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.86rem;
}

.price-hint span {
  font-weight: 850;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.price-hint strong {
  color: var(--ink);
}

.price-hint em {
  font-style: normal;
}

.fulfillment-toggle {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.fulfillment-toggle-caption {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.fulfillment-toggle-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--surface-soft);
  border-radius: 8px;
}

.fulfillment-tab {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: auto;
  margin: 0;
  padding: 9px 12px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fulfillment-tab-icon {
  font-size: 1rem;
}

.fulfillment-tab input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
}

.fulfillment-tab--stock.is-active {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.fulfillment-tab--direct.is-active {
  color: var(--amber);
  background: var(--amber-soft);
  border-color: var(--amber-line);
}

.direct-sale-panel {
  grid-column: 1 / -1;
}

.embedded-direct-purchase-panel {
  border-color: #bfdbfe;
  background: #f8fbff;
}

.subpanel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.pac-real-panel {
  min-width: 0;
}

.pac-real-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stack-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.mini-record {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow-wrap: anywhere;
}

.mini-record > div {
  min-width: 0;
}

.section-title h3 {
  margin: 0;
  font-size: 1rem;
}

.section-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.direct-sale-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.direct-sale-summary div {
  padding: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.direct-sale-summary span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.direct-sale-summary strong {
  font-size: 1rem;
}

.direct-margin-negative {
  color: #b4233b;
  background: #fff1f2;
  border-color: #fecdd3;
}

.direct-margin-negative strong {
  color: #b4233b;
}

.direct-margin-warning {
  grid-column: 1 / -1;
  color: #9a3412;
  background: #fff7ed;
  border-color: #fed7aa;
}

.direct-margin-warning strong {
  color: #9a3412;
}

.warning-state {
  color: #9a3412;
  background: #fff7ed;
  border-color: #fed7aa;
}

.line-row.direct-sale-line {
  grid-template-columns: minmax(0, 1.35fr) auto auto auto auto;
}

.direct-line-actions {
  display: flex;
  gap: 6px;
}

.direct-line-negative {
  border-left: 3px solid #e11d48;
}

.line-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: #ffffff;
}

.line-row.is-editing-line {
  border-color: var(--accent);
  background: #f2fbf7;
}

.compact-actions {
  gap: 6px;
  justify-content: flex-end;
}

.line-row span {
  color: var(--muted);
  font-size: 0.9rem;
}

.form-notice {
  padding: 11px 12px;
  color: #795313;
  background: #fbf0d7;
  border: 1px solid #f2d99d;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.35;
}

.form-notice strong {
  display: block;
  color: #4b3410;
  margin-bottom: 2px;
}

.warning-notice {
  color: #7c2d12;
  background: #fff7ed;
  border-color: rgba(194, 65, 12, 0.32);
}

.danger-notice {
  color: #7f1d1d;
  background: #fef2f2;
  border-color: rgba(220, 38, 38, 0.32);
}

.warning-text {
  display: block;
  color: #9a3412;
  font-size: 0.82rem;
  font-weight: 800;
}

.inline-action {
  margin-left: 8px;
}

.detected-text-block {
  min-width: 0;
  max-height: 220px;
  overflow: auto;
  overflow-wrap: anywhere;
  padding: 12px;
  background: #fbfaf7;
  border: 1px solid var(--line);
  border-radius: 8px;
  white-space: pre-wrap;
}

.ticket-assist-error {
  border-left: 3px solid #dc2626;
}

.ticket-assist-warning {
  border-left: 3px solid #f59e0b;
}

.ticket-assist-ready {
  border-left: 3px solid #16a34a;
}

.purchase-ticket-assist-panel {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
}

.professional-purchases-panel,
.purchase-order-panel {
  min-width: 0;
}

.professional-purchase-metrics {
  margin-bottom: 0;
}

.purchase-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 18px;
}

.purchase-view-tabs .filter-chip {
  white-space: nowrap;
}

.purchase-view-tabs .filter-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

[data-purchase-section].is-hidden {
  display: none !important;
}

.purchase-professional-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.purchase-professional-layout > .panel,
.purchase-operations-layout > .panel {
  min-width: 0;
}

.purchase-order-panel {
  grid-column: 1 / -1;
}

.purchase-receipt-panel {
  grid-column: 1 / -1;
  min-width: 0;
}

.purchase-order-line-inputs {
  grid-template-columns: minmax(190px, 1.5fr) minmax(132px, 0.8fr) 116px 130px 100px auto;
}

.purchase-receipt-progress {
  display: grid;
  gap: 6px;
  margin: 10px 0;
}

.purchase-receipt-progress > div {
  height: 8px;
  overflow: hidden;
  background: #eef2f1;
  border-radius: 999px;
}

.purchase-receipt-progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

.purchase-receipt-progress small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.purchase-receipt-lines {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.purchase-receipt-line {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(110px, 0.7fr)) minmax(150px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  background: #fbfaf7;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}

.purchase-receipt-line-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.purchase-receipt-line-title span,
.receipt-history-item span {
  overflow-wrap: anywhere;
}

.purchase-receipt-line label {
  min-width: 0;
}

.purchase-receipt-line input {
  width: 100%;
}

.professional-purchase-hint {
  background: #f7faf9;
}

.professional-purchase-item {
  align-items: flex-start;
  border-left: 4px solid var(--line-strong);
}

.professional-purchase-item.priority-critica {
  border-left-color: var(--red);
}

.professional-purchase-item.priority-alta {
  border-left-color: #d97706;
}

.professional-purchase-item.priority-media {
  border-left-color: var(--amber);
}

.professional-purchase-item.priority-baja {
  border-left-color: var(--accent);
}

.purchase-order-card .order-card-footer {
  justify-content: flex-end;
}

.professional-export-card {
  display: grid;
  gap: 8px;
}

.professional-export-card .button-row {
  align-items: stretch;
}

.purchase-professional-layout .settings-item,
.purchase-professional-layout .report-card,
.professional-purchases-panel .metric-card {
  min-width: 0;
  overflow-wrap: anywhere;
}

.purchase-professional-layout .settings-item {
  align-items: flex-start;
}

.purchase-professional-layout .settings-item > div {
  min-width: 0;
}

.purchase-ticket-actions {
  align-items: stretch;
  margin-top: 8px;
}

.purchase-ticket-actions button {
  flex: 1 1 176px;
  min-width: 0;
  min-height: 40px;
  white-space: normal;
}

#purchaseTicketAssistPreview {
  min-width: 0;
  overflow: hidden;
}

.ticket-assist-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.ticket-assist-block {
  min-width: 0;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.ticket-assist-summary,
.ticket-assist-text {
  grid-column: 1 / -1;
}

.ticket-assist-summary .compact-reports {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ticket-assist-summary .report-card,
.ticket-assist-block .settings-item,
.ticket-assist-row {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ticket-assist-block .settings-item {
  flex-wrap: wrap;
}

.ticket-assist-block .settings-item strong,
.ticket-assist-block .settings-item span {
  min-width: 0;
}

.ticket-assist-lines .settings-list {
  min-width: 0;
}

.ocr-unmatched-panel {
  margin-top: 14px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ticket-assist-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 10px;
  align-items: end;
}

.ticket-assist-row > strong,
.ticket-assist-row > span,
.ticket-assist-row > button,
.ticket-assist-row .warning-text,
.ticket-assist-row .muted {
  grid-column: 1 / -1;
}

.ticket-assist-row .small-button {
  justify-self: start;
  white-space: normal;
}

.compact-inline-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.compact-inline-field input,
.compact-inline-field select {
  width: 100%;
  min-width: 0;
}

.compact-check {
  align-self: center;
  margin: 0;
}

.muted-row {
  opacity: 0.62;
}

.csf-detected-preview {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #f7faf9;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.csf-detected-preview.is-hidden {
  display: none;
}

.csf-detected-preview h4 {
  margin: 0;
  font-size: 0.95rem;
}

.csf-detected-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.csf-detected-item {
  padding: 8px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.csf-detected-item span {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.csf-detected-item strong {
  display: block;
  margin-top: 3px;
  font-size: 0.9rem;
}

.csf-detected-item em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.74rem;
  font-style: normal;
}

.csf-text-sample {
  padding: 8px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.csf-text-sample pre {
  max-height: 180px;
  overflow: auto;
  margin: 8px 0 0;
  white-space: pre-wrap;
  font-size: 0.78rem;
  color: var(--muted);
}

.csf-text-sample textarea {
  width: 100%;
  min-height: 150px;
  margin-top: 8px;
  resize: vertical;
  font-size: 0.8rem;
  color: var(--muted);
}

.is-disabled-panel {
  opacity: 0.76;
}

.template-editor-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
  gap: 14px;
  align-items: start;
}

.template-options,
.template-preview-panel {
  display: grid;
  gap: 12px;
}

.template-block-list {
  display: grid;
  gap: 8px;
}

.template-block-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.ticket-template-preview {
  display: grid;
  justify-items: center;
  padding: 16px;
  overflow-x: auto;
  background: #eef1ef;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.ticket-preview-paper {
  color: #111;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(35, 43, 40, 0.12);
  font-family: Arial, sans-serif;
}

.ticket-preview-thermal {
  width: 280px;
  padding: 12px;
  font-size: 11px;
}

.ticket-preview-letter {
  width: min(100%, 620px);
  padding: 22px;
  font-size: 12px;
}

.ticket-preview-paper .ticket-logo {
  display: block;
  max-width: 120px;
  max-height: 58px;
  margin: 0 auto 8px;
  object-fit: contain;
}

.payment-complements-panel {
  border-color: #d9e6df;
}

.payment-complements-panel .notice-box {
  margin-bottom: 12px;
}

.advanced-cancel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(18, 31, 27, 0.58);
}

.advanced-cancel-panel {
  display: grid;
  gap: 16px;
  width: min(980px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(18, 31, 27, 0.25);
}

.advanced-cancel-panel .panel-header {
  margin-bottom: 0;
}

.advanced-cancel-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.advanced-cancel-summary > div {
  min-width: 0;
  padding: 10px;
  overflow-wrap: anywhere;
  background: #f7faf9;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.advanced-cancel-summary small {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.advanced-cancel-summary strong {
  display: block;
  font-size: 0.92rem;
}

.advanced-cancel-panel .notice-box {
  margin: 0;
}

.ticket-preview-paper .header {
  text-align: center;
}

.ticket-preview-paper h1 {
  margin: 0 0 4px;
  font-size: 1.35em;
}

.ticket-preview-paper h2 {
  margin: 10px 0 6px;
  font-size: 1.08em;
  text-align: center;
}

.ticket-preview-paper p {
  margin: 3px 0;
}

.ticket-preview-paper table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.ticket-preview-paper th,
.ticket-preview-paper td {
  padding: 5px 0;
  border-bottom: 1px dashed #bbb;
  vertical-align: top;
}

.ticket-preview-paper th {
  font-size: 0.76em;
  text-transform: uppercase;
}

.ticket-preview-paper .right {
  text-align: right;
  white-space: nowrap;
}

.ticket-preview-paper .center {
  text-align: center;
}

.ticket-preview-paper .total {
  font-weight: 800;
  font-size: 1.16em;
}

.ticket-preview-paper .note,
.ticket-preview-paper .signature,
.ticket-preview-paper .footer {
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px dashed #999;
}

.ticket-preview-paper .signature-line {
  margin-top: 24px;
  border-top: 1px solid #111;
  text-align: center;
  padding-top: 4px;
}

.ticket-preview-paper .qr-placeholder {
  margin-top: 7px;
  padding: 6px;
  border: 1px dashed #999;
  text-align: center;
}

.form-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.form-footer span {
  color: var(--muted);
  font-weight: 800;
}

.form-footer strong {
  font-size: 1.35rem;
}

.order-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.order-card-header,
.order-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.order-card-header strong {
  display: block;
}

.order-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--muted);
  font-size: 0.88rem;
}

.order-card-lines {
  display: grid;
  gap: 4px;
  color: #40504a;
  font-size: 0.88rem;
}

.status-select {
  color: var(--ink);
  background: #ffffff;
  border-color: var(--line-strong);
}

.small-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.separated {
  margin-top: 16px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.filter-tab {
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--muted);
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 800;
  cursor: pointer;
}

.filter-tab.is-active {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--surface-soft);
}

.settings-list {
  display: grid;
  gap: 10px;
}

.settings-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.settings-item span {
  color: var(--muted);
  font-size: 0.88rem;
}

.customer-pricing-metrics {
  margin: 12px 0 16px;
}

.compact-metrics {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.compact-metrics .metric-card {
  min-height: 86px;
}

.pricing-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 16px;
  align-items: start;
}

.pricing-list-panel,
.pricing-secondary-grid .mini-panel {
  min-width: 0;
}

.pricing-list-panel {
  display: grid;
  gap: 10px;
}

.pricing-list-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.pricing-list-card > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.pricing-list-card span,
.compact-list-item span {
  color: var(--muted);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.pricing-list-card .button-row {
  grid-column: 1 / -1;
}

.pricing-secondary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.compact-list {
  display: grid;
  gap: 10px;
}

.compact-list-item {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  min-width: 0;
  overflow-wrap: anywhere;
}

.margin-alert-critical {
  border-color: #fecaca;
  background: #fff7f7;
}

.margin-alert-warning {
  border-color: #fed7aa;
  background: #fffaf3;
}

.permission-dashboard {
  grid-column: 1 / -1;
  min-width: 0;
}

.permission-metrics-grid {
  margin-top: 14px;
  margin-bottom: 0;
}

.permission-admin-layout,
.permission-log-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 16px;
  min-width: 0;
}

.permission-log-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.permission-users-panel,
.permission-editor,
.permission-module-group,
.permission-row,
.sensitive-log-table,
.permission-dashboard .subpanel {
  min-width: 0;
}

.permission-user-table,
.sensitive-log-table {
  min-width: 760px;
}

.permission-user-table .selected-row {
  background: #edf7f4;
}

.permission-filter-grid {
  grid-template-columns: 1.4fr repeat(3, minmax(150px, 0.8fr));
}

.permission-warning {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #edd29a;
  border-radius: 8px;
  color: #744d0e;
  background: #fff6df;
  font-size: 0.88rem;
  font-weight: 750;
}

.permission-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 12px 0 14px;
}

.permission-groups {
  display: grid;
  gap: 12px;
}

.permission-module-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
  overflow: hidden;
}

.permission-module-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #f1f6f4;
}

.permission-module-title h4 {
  margin: 0;
  font-size: 0.98rem;
}

.permission-module-title span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.permission-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(150px, 0.7fr) minmax(160px, 0.55fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.permission-row:last-child {
  border-bottom: 0;
}

.permission-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.permission-main strong,
.permission-main code,
.permission-main p,
.sensitive-log-table td {
  overflow-wrap: anywhere;
}

.permission-main code {
  color: #36534b;
  font-size: 0.78rem;
}

.permission-main p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.permission-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.permission-control {
  display: grid;
  gap: 6px;
  color: #4f5c57;
  font-size: 0.8rem;
  font-weight: 850;
}

.permission-risk-badge,
.permission-source-badge,
.permission-state-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 850;
  white-space: nowrap;
}

.permission-risk-low {
  color: #17695d;
  background: #e7f2ef;
}

.permission-risk-medium {
  color: #315c8a;
  background: #e8f1fb;
}

.permission-risk-high {
  color: #795313;
  background: #fbf0d7;
}

.permission-risk-critical {
  color: #8a1f1f;
  background: #fde8e8;
}

.permission-source-role {
  color: #48524e;
  background: #eef1ef;
}

.permission-source-custom {
  color: #315c8a;
  background: #e8f1fb;
}

.permission-source-denied,
.permission-state-denied {
  color: #8a1f1f;
  background: #fde8e8;
}

.permission-state-allowed {
  color: #17695d;
  background: #e7f2ef;
}

@media (max-width: 1180px) {
  .pricing-admin-layout,
  .pricing-secondary-grid,
  .permission-admin-layout,
  .permission-log-layout {
    grid-template-columns: 1fr;
  }

  .purchase-professional-layout {
    grid-template-columns: 1fr;
  }

  .purchase-order-line-inputs {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .purchase-receipt-line {
    grid-template-columns: 1fr 1fr;
  }

  .ticket-assist-layout {
    grid-template-columns: 1fr;
  }

  .ticket-assist-block {
    grid-column: 1 / -1;
  }

  .permission-row,
  .permission-filter-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .purchase-view-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .purchase-receipt-line {
    grid-template-columns: 1fr;
  }

  .purchase-ticket-actions button {
    flex-basis: 100%;
  }

  .ticket-assist-row {
    grid-template-columns: 1fr;
  }
}

.migration-source {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.migration-source span {
  color: var(--muted);
  text-align: right;
}

.migration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.migration-card {
  min-height: 126px;
  padding: 16px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.migration-card span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.migration-card strong {
  display: block;
  margin: 8px 0;
  font-size: 1.8rem;
}

.migration-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.migration-warning-box,
.migration-report-heading {
  margin-top: 14px;
  padding: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.migration-warning-box h3 {
  margin: 0;
  font-size: 1rem;
}

.migration-warning-box p,
.migration-report-heading span {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.migration-table {
  min-width: 720px;
}

.backup-status {
  display: grid;
  gap: 8px;
}

.backup-status-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.backup-status-card.warning {
  color: #795313;
  background: #fbf0d7;
  border-color: #efd39b;
}

.backup-status-card span {
  color: var(--muted);
  font-size: 0.86rem;
}

.backup-status-card.warning span {
  color: #795313;
}

.route-board {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.route-column {
  padding: 14px;
}

.route-column h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.route-column h3 span {
  color: var(--muted);
  font-size: 0.8rem;
}

.route-stop {
  display: grid;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.route-stop:first-of-type {
  border-top: 0;
}

.route-stop strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.route-stop span {
  color: var(--muted);
  font-size: 0.88rem;
}

.reports-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.finance-expenses-panel {
  margin-bottom: 18px;
}

.finance-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
}

.finance-section-panel {
  margin-bottom: 14px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.finance-section-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}

.finance-section-panel summary::-webkit-details-marker {
  display: none;
}

.finance-section-panel summary::after {
  content: "+";
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-weight: 900;
}

.finance-section-panel[open] summary::after {
  content: "-";
}

.finance-section-panel summary span {
  color: var(--text);
  font-size: 1rem;
  font-weight: 900;
}

.finance-section-panel summary small {
  display: block;
  max-width: 620px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.finance-section-content {
  display: grid;
  gap: 14px;
  padding: 0 18px 18px;
}

.finance-form {
  align-items: end;
  padding: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.finance-toolbar {
  align-items: end;
  margin-bottom: 0;
}

.executive-finance-panel {
  margin-bottom: 18px;
}

.executive-finance-toolbar {
  margin-bottom: 14px;
}

.executive-finance-root {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.executive-period-note {
  padding: 10px 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.88rem;
}

.executive-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.executive-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.executive-report-card {
  min-width: 0;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.executive-report-wide {
  grid-column: 1 / -1;
}

.executive-table-wrap {
  margin-top: 12px;
}

.executive-table {
  min-width: 680px;
}

.executive-table th,
.executive-table td {
  vertical-align: top;
  overflow-wrap: anywhere;
}

.executive-alert-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.executive-alert {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.executive-alert.tone-red {
  border-left-color: var(--danger);
}

.executive-alert.tone-amber {
  border-left-color: var(--warning);
}

.executive-alert.tone-accent {
  border-left-color: var(--accent);
}

.executive-alert span {
  color: var(--muted);
  font-size: 0.88rem;
}

.finance-section-content .table-wrap {
  min-width: 0;
}

.finance-section-content td,
.finance-section-content th {
  vertical-align: top;
}

.daily-close-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.daily-close-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
}

.daily-close-date-box {
  min-width: 180px;
}

.daily-close-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.daily-close-pending-list .settings-item {
  align-items: flex-start;
}

.kardex-toolbar {
  align-items: end;
  margin-bottom: 14px;
}

.inventory-reports-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.initial-stock-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.initial-stock-card {
  padding: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.initial-stock-card span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.initial-stock-card strong {
  font-size: 1.25rem;
}

.initial-stock-warning {
  color: #9a3412;
}

.initial-stock-error {
  color: #b4233b;
}

.check-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  font-weight: 850;
}

.check-option input {
  width: auto;
}

.presentation-calculator {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.presentation-result {
  min-height: 54px;
}

.presentation-result-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.presentation-result-card span,
.presentation-result-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.presentation-result-card strong {
  font-size: 1.2rem;
}

.conversion-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.86rem;
}

.conversion-hint strong {
  color: var(--text);
}

.muted-row {
  opacity: 0.62;
}

.movement-positive {
  color: #17694f;
  font-weight: 850;
}

.movement-negative {
  color: #b4233b;
  font-weight: 850;
}

.danger-zone {
  border-color: #e7b8c0;
}

.report-card {
  padding: 16px;
}

.finance-hero {
  grid-column: span 2;
  display: grid;
  align-content: space-between;
  gap: 18px;
  background: #ffffff;
  border-color: var(--line-strong);
}

.card-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.card-heading h3,
.finance-hero h3,
.metric-panel h3,
.list-card h3 {
  margin-bottom: 6px;
}

.finance-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.finance-strip div {
  padding: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.finance-strip span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.finance-strip strong {
  margin-bottom: 0;
  font-size: 1rem;
}

.chart-card {
  min-height: 260px;
}

.chart-wide {
  grid-column: span 2;
}

.report-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.35rem;
}

.report-card ol {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding-left: 20px;
}

.bar-chart {
  display: grid;
  gap: 12px;
}

.bar-row {
  display: grid;
  gap: 7px;
}

.bar-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.84rem;
}

.bar-label span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-label strong {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.bar-track {
  overflow: hidden;
  height: 9px;
  background: #edf1ee;
  border-radius: 999px;
}

.bar-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--blue));
  border-radius: inherit;
}

.line-chart {
  display: grid;
  gap: 10px;
}

.line-chart svg {
  width: 100%;
  height: 220px;
}

.chart-grid line {
  stroke: var(--line);
  stroke-width: 1;
}

.line-chart polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.sales-line {
  stroke: var(--accent);
}

.purchase-line {
  stroke: var(--amber);
}

.paid-line {
  stroke: var(--blue);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.sales-dot {
  background: var(--accent);
}

.purchase-dot {
  background: var(--amber);
}

.paid-dot {
  background: var(--blue);
}

.empty-state.compact {
  padding: 18px;
}

.empty-state {
  padding: 22px;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  text-align: center;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  transform: translateY(18px);
  opacity: 0;
  max-width: min(360px, calc(100vw - 36px));
  padding: 14px 16px;
  color: #ffffff;
  background: var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  pointer-events: none;
}

.toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.fatal-error {
  position: fixed;
  inset: 16px 16px auto;
  z-index: 20;
  display: grid;
  gap: 4px;
  max-width: 560px;
  padding: 14px 16px;
  color: #7f1d1d;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.fatal-error span {
  color: #7f1d1d;
}

@media (max-width: 1160px) {
  .metrics-grid,
  .reports-grid,
  .migration-grid,
  .initial-stock-grid,
  .inventory-reports-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-hero,
  .chart-wide {
    grid-column: span 2;
  }

  .executive-summary-grid,
  .executive-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-grid,
  .order-layout {
    grid-template-columns: 1fr;
  }

  .sales-operation-grid {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 4;
    gap: 14px;
    padding: 16px;
  }

  .brand {
    justify-content: center;
  }

  .nav-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nav-item {
    justify-content: center;
    min-height: 40px;
    padding: 0 8px;
    font-size: 0.84rem;
  }

  .nav-code,
  .sidebar-note {
    display: none;
  }

  .workspace {
    padding: 18px;
  }

  .topbar,
  .section-heading,
  .calendar-heading,
  .daily-close-heading,
  .panel-header,
  .order-card-header,
  .order-card-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions,
  .toolbar,
  .calendar-heading .button-row,
  .upcoming-actions,
  .daily-close-actions {
    justify-content: stretch;
  }

  .topbar-actions button,
  .panel-header button,
  .search-box,
  .topbar-search,
  .role-box,
  .session-chip,
  .upcoming-actions button,
  .calendar-heading .button-row button,
  .daily-close-actions button,
  .daily-close-date-box {
    width: 100%;
  }

  .metrics-grid,
  .reports-grid,
  .executive-summary-grid,
  .executive-section-grid,
  .migration-grid,
  .initial-stock-grid,
  .inventory-reports-grid,
  .pac-real-grid,
  .inventory-table-toolbar,
  .document-status-grid,
  .sales-operation-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .inventory-collapsible-panel > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .finance-section-panel summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .finance-section-panel summary::after {
    align-self: flex-start;
  }

  .inventory-collapsible-panel > summary small {
    text-align: left;
  }

  .template-editor-grid {
    grid-template-columns: 1fr;
  }

  .csf-detected-grid {
    grid-template-columns: 1fr;
  }

  .advanced-cancel-backdrop {
    align-items: start;
    padding: 12px;
  }

  .advanced-cancel-panel {
    max-height: calc(100vh - 24px);
    padding: 14px;
  }

  .advanced-cancel-summary {
    grid-template-columns: 1fr;
  }

  .finance-hero,
  .chart-wide,
  .executive-report-wide {
    grid-column: auto;
  }

  .executive-table {
    min-width: 560px;
  }

  .finance-strip {
    grid-template-columns: 1fr;
  }

  .direct-sale-summary {
    grid-template-columns: 1fr;
  }

  .wide-field,
  .full-field {
    grid-column: auto;
  }

  .line-inputs,
  .price-tools,
  .upcoming-item,
  .calendar-reminder-card,
  .line-row,
  .form-footer,
  .form-actions {
    grid-template-columns: 1fr;
  }

  .calendar-grid {
    gap: 4px;
  }

  .calendar-day {
    min-height: 86px;
    padding: 6px;
  }

  .calendar-day-events small {
    font-size: 0.62rem;
  }

  .form-actions {
    flex-direction: column;
  }
}

/* UI Pro redesign: visual-only polish layer. */
:root {
  --bg: #f4f7f5;
  --surface: #ffffff;
  --surface-soft: #f8faf8;
  --surface-subtle: #eef5f1;
  --surface-raised: #ffffff;
  --ink: #14201c;
  --muted: #64736d;
  --line: #e3ebe7;
  --line-strong: #cdd9d3;
  --line-soft: rgba(20, 32, 28, 0.08);
  --accent: #126b5f;
  --accent-dark: #0c5148;
  --accent-soft: #e5f4f0;
  --blue: #2f679f;
  --amber: #946815;
  --amber-soft: #fbf2de;
  --amber-line: #ead39a;
  --red: #a13242;
  --shadow: 0 18px 48px rgba(20, 32, 28, 0.08);
  --shadow-soft: 0 8px 24px rgba(20, 32, 28, 0.055);
  --shadow-card: 0 1px 2px rgba(20, 32, 28, 0.04), 0 14px 34px rgba(20, 32, 28, 0.06);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --focus-ring: 0 0 0 3px rgba(18, 107, 95, 0.14);
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(244, 247, 245, 0.86) 44%, rgba(238, 245, 241, 0.95) 100%),
    var(--bg);
}

* {
  min-width: 0;
}

.app-shell {
  grid-template-columns: 260px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  padding: 24px 16px;
  background: rgba(255, 255, 255, 0.96);
  border-right: 1px solid var(--line-soft);
  box-shadow: 4px 0 28px rgba(20, 32, 28, 0.045);
}

.brand {
  padding: 0 4px 8px;
}

.brand-logo {
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-soft);
}

.brand-title {
  letter-spacing: 0;
}

.nav-list {
  gap: 6px;
}

.nav-item {
  min-height: 42px;
  color: #31413b;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.nav-item:hover {
  color: var(--accent-dark);
  background: var(--surface-soft);
  border-color: var(--line-soft);
  transform: translateX(2px);
}

.nav-item.is-active {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-color: rgba(18, 107, 95, 0.18);
  box-shadow: inset 3px 0 0 var(--accent);
}

.sidebar-note {
  border-color: var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.workspace {
  padding: 24px clamp(18px, 2.4vw, 36px) 42px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  gap: 18px;
  margin: -24px 0 22px;
  padding: 16px 0 18px;
  background: linear-gradient(180deg, rgba(244, 247, 245, 0.98), rgba(244, 247, 245, 0.88));
  backdrop-filter: blur(10px);
}

.topbar > div:first-child {
  min-width: min(100%, 420px);
}

.topbar h1,
.section-heading h2,
.calendar-heading h2,
.daily-close-heading h2 {
  letter-spacing: 0;
}

.topbar-search,
.search-box {
  background: var(--surface-raised);
  border-color: var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.session-chip,
.role-box,
.nav-code,
.badge,
.status-badge,
.price-source-badge,
.permission-source-role,
.permission-source-custom,
.permission-source-denied {
  border-radius: 999px;
}

.panel,
.metric-card,
.login-card,
.subpanel,
.mini-panel,
.settings-card,
.report-card,
.calendar-panel,
.professional-purchases-panel,
.purchase-order-panel,
.purchase-receipt-panel,
.sales-operation-panel,
.direct-sale-panel,
.finance-section-panel,
.executive-finance-panel,
.permission-dashboard .subpanel,
.pricing-list-panel {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.panel,
.subpanel,
.mini-panel {
  padding: 20px;
}

.panel:hover,
.metric-card:hover,
.report-card:hover {
  border-color: rgba(18, 107, 95, 0.16);
}

.panel-header,
.section-heading,
.calendar-heading,
.daily-close-heading {
  gap: 16px;
}

.panel-header p,
.section-heading p,
.calendar-heading p,
.daily-close-heading p {
  max-width: 74ch;
}

.metric-card {
  gap: 10px;
  padding: 18px;
}

.metric-card span,
.report-card span,
.mini-panel span {
  color: var(--muted);
}

.metric-card strong,
.report-card strong,
.mini-panel strong {
  color: var(--ink);
}

.content-grid,
.metrics-grid,
.reports-grid,
.executive-summary-grid,
.inventory-reports-grid,
.sales-operation-grid,
.purchase-professional-layout,
.purchase-operations-layout {
  gap: 18px;
}

.primary-button,
.ghost-button,
.danger-button,
.small-button,
button,
input[type='button'],
input[type='submit'] {
  border-radius: var(--radius-md);
  letter-spacing: 0;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.primary-button {
  color: #ffffff;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  border-color: var(--accent-dark);
  box-shadow: 0 8px 18px rgba(18, 107, 95, 0.18);
}

.primary-button:hover {
  box-shadow: 0 10px 24px rgba(18, 107, 95, 0.22);
  transform: translateY(-1px);
}

.ghost-button,
.small-button {
  color: var(--ink);
  background: var(--surface-raised);
  border-color: var(--line);
}

.ghost-button:hover,
.small-button:hover {
  color: var(--accent-dark);
  background: var(--surface-soft);
  border-color: rgba(18, 107, 95, 0.24);
}

.danger-button {
  color: var(--red);
  background: #fff6f7;
  border-color: #f2c8cf;
}

.danger-button:hover {
  background: #ffecee;
  border-color: #e7a5af;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

label {
  gap: 7px;
  color: #31413b;
  font-weight: 650;
}

input,
select,
textarea {
  min-height: 40px;
  color: var(--ink);
  background: #ffffff;
  border-color: var(--line);
  border-radius: var(--radius-md);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

textarea {
  min-height: 92px;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--line-strong);
}

input:focus,
select:focus,
textarea:focus {
  background: #ffffff;
  border-color: rgba(18, 107, 95, 0.48);
  box-shadow: var(--focus-ring);
}

.form-grid,
.line-inputs,
.price-tools,
.form-actions,
.button-row,
.toolbar,
.topbar-actions {
  gap: 12px;
}

.form-actions,
.button-row,
.toolbar {
  align-items: center;
  flex-wrap: wrap;
}

.wide-field,
.full-field {
  min-width: 0;
}

.table-wrap,
.executive-table-wrap {
  overflow: auto;
  background: #ffffff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.table-wrap table,
.executive-table {
  min-width: 820px;
  border-collapse: separate;
  border-spacing: 0;
}

.table-wrap th,
.executive-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #44534e;
  background: #f7faf8;
  border-bottom: 1px solid var(--line-strong);
}

.table-wrap td,
.executive-table td {
  border-bottom-color: var(--line-soft);
}

.table-wrap tbody tr,
.executive-table tbody tr {
  transition: background 140ms ease;
}

.table-wrap tbody tr:hover,
.executive-table tbody tr:hover {
  background: #f7fbf9;
}

.table-wrap td:last-child,
.executive-table td:last-child {
  white-space: nowrap;
}

.badge,
.status-badge,
.risk-badge,
.price-source-badge,
.permission-risk-low,
.permission-risk-medium,
.permission-risk-high,
.permission-risk-critical {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  font-weight: 700;
}

.notice-box,
.warning-box,
.error-box,
.success-box {
  border-radius: var(--radius-md);
  box-shadow: none;
}

.empty-state {
  padding: 26px;
  color: var(--muted);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(248, 250, 248, 0.9)),
    var(--surface-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
}

.empty-state strong {
  color: var(--ink);
}

.inventory-subnav,
.purchase-view-tabs,
.permission-template-grid {
  gap: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.inventory-subnav a,
.purchase-view-tabs .filter-chip,
.filter-chip {
  border-radius: var(--radius-sm);
}

.purchase-view-tabs .filter-chip.is-active,
.filter-chip.is-active {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
}

.inventory-collapsible-panel,
.finance-section-panel,
.product-inline-section {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.inventory-collapsible-panel > summary,
.finance-section-panel summary,
.product-inline-section summary {
  gap: 10px;
  min-height: 52px;
  padding: 15px 18px;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #f8fbf9);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.inventory-collapsible-panel[open] > summary,
.finance-section-panel[open] summary,
.product-inline-section[open] summary {
  border-bottom: 1px solid var(--line-soft);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.inventory-collapsible-content,
.finance-section-content {
  padding: 18px;
}

.inventory-collapsible-content > .panel,
.finance-section-content > .panel {
  box-shadow: none;
}

.is-disabled-panel {
  opacity: 0.72;
  filter: grayscale(0.08);
}

.ticket-assist-layout,
.ticket-assist-summary,
.ticket-assist-text,
.ticket-assist-lines,
.ocr-unmatched-panel,
.purchase-receipt-lines {
  min-width: 0;
}

.ticket-assist-block,
.ticket-assist-row,
.purchase-receipt-line,
.calendar-reminder-card,
.upcoming-item {
  border-color: var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.ticket-assist-row > strong,
.ticket-assist-row > span,
.ticket-assist-row .warning-text,
.ticket-assist-row .muted,
.purchase-receipt-line-title,
.settings-item,
.report-card {
  overflow-wrap: anywhere;
}

.template-preview-panel,
.ticket-preview-paper {
  border-color: var(--line-soft);
  box-shadow: var(--shadow-card);
}

.advanced-cancel-panel,
.permission-editor,
.pac-real-panel {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}

.toast {
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow);
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 232px minmax(0, 1fr);
  }

  .workspace {
    padding-inline: 22px;
  }
}

@media (max-width: 780px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    height: auto;
    max-height: 58vh;
    overflow: auto;
    padding: 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    box-shadow: 0 8px 26px rgba(20, 32, 28, 0.08);
  }

  .nav-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .nav-item {
    flex: 0 0 auto;
    min-width: 116px;
    justify-content: center;
    transform: none;
  }

  .nav-item:hover {
    transform: none;
  }

  .workspace {
    padding: 18px 14px 30px;
  }

  .topbar {
    position: static;
    margin: 0 0 18px;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
  }

  .panel,
  .subpanel,
  .mini-panel {
    padding: 16px;
  }

  .table-wrap,
  .executive-table-wrap {
    margin-inline: -2px;
  }

  .table-wrap table,
  .executive-table {
    min-width: 680px;
  }
}

@media (max-width: 560px) {
  .nav-item {
    min-width: 104px;
    font-size: 0.8rem;
  }

  .metric-card,
  .report-card,
  .panel {
    border-radius: var(--radius-md);
  }

  .primary-button,
  .ghost-button,
  .danger-button,
  .small-button {
    width: 100%;
    justify-content: center;
  }

  .button-row,
  .toolbar,
  .form-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* UI Pro 2 / Premium Polish: visual-only layer. */
:root {
  --premium-ink-strong: #101a17;
  --premium-panel-glow: 0 18px 46px rgba(16, 26, 23, 0.075);
  --premium-border: rgba(18, 107, 95, 0.12);
  --premium-highlight: rgba(255, 255, 255, 0.72);
  --module-accent: var(--accent);
  --module-accent-soft: var(--accent-soft);
  --finance-cash: #0f6b4f;
  --finance-cash-soft: #e4f4ed;
  --finance-income: #20835f;
  --finance-income-soft: #e8f6ef;
  --finance-expense: #b64a55;
  --finance-expense-soft: #fff0f1;
  --finance-receivable: #2e6fa3;
  --finance-receivable-soft: #eaf3fb;
  --finance-payable: #a26b12;
  --finance-payable-soft: #fbf1dc;
  --finance-profit: #0f766e;
  --finance-profit-soft: #e3f5f2;
  --finance-risk: #a83244;
  --finance-risk-soft: #ffedef;
  --finance-neutral: #64736d;
  --finance-neutral-soft: #eef2f0;
}

#dashboard {
  --module-accent: #126b5f;
  --module-accent-soft: #e5f4f0;
}

#inventory {
  --module-accent: #71823a;
  --module-accent-soft: #f0f4e3;
}

#orders,
#quotes {
  --module-accent: #167982;
  --module-accent-soft: #e5f5f6;
}

#purchases {
  --module-accent: #9a6a16;
  --module-accent-soft: #fbf1de;
}

#invoices {
  --module-accent: #315f9f;
  --module-accent-soft: #eaf1fb;
}

#finance,
#dailyClose {
  --module-accent: var(--finance-profit);
  --module-accent-soft: var(--finance-profit-soft);
}

#reports {
  --module-accent: #4f6f87;
  --module-accent-soft: #edf3f6;
}

#admin {
  --module-accent: #516760;
  --module-accent-soft: #eef3f1;
}

#calendar,
#customers,
#deliveries {
  --module-accent: #2f679f;
  --module-accent-soft: #eaf3fb;
}

.tab-panel > .section-heading,
.calendar-heading,
.daily-close-heading {
  position: relative;
  margin-bottom: 18px;
  padding: 18px 20px;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--module-accent-soft) 0%, rgba(255, 255, 255, 0.86) 42%, #ffffff 100%);
  border: 1px solid var(--premium-border);
  border-left: 5px solid var(--module-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.tab-panel > .section-heading::after,
.calendar-heading::after,
.daily-close-heading::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--premium-highlight), transparent);
  pointer-events: none;
}

.tab-panel > .section-heading h2,
.calendar-heading h2,
.daily-close-heading h2 {
  color: var(--premium-ink-strong);
  font-weight: 900;
}

.tab-panel > .section-heading p,
.calendar-heading p,
.daily-close-heading p {
  color: #52635c;
}

.panel,
.metric-card,
.report-card,
.executive-report-card,
.finance-section-panel,
.calendar-panel,
.permission-editor,
.permission-users-panel,
.pricing-list-panel,
.ticket-assist-block,
.purchase-receipt-line {
  position: relative;
  border-color: rgba(20, 32, 28, 0.075);
  box-shadow: var(--premium-panel-glow);
}

.panel::after,
.report-card::after,
.executive-report-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.panel-header h3,
.card-heading h3,
.metric-panel h3,
.list-card h3 {
  color: var(--premium-ink-strong);
  font-weight: 900;
}

.card-kicker,
.eyebrow {
  color: var(--module-accent);
  letter-spacing: 0.06em;
}

.primary-button {
  border: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent),
    linear-gradient(180deg, var(--accent), var(--accent-dark));
}

.ghost-button,
.small-button {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 248, 0.9));
}

.small-button {
  min-height: 32px;
  padding-inline: 10px;
  font-size: 0.8rem;
}

.danger-button {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent),
    #fff3f4;
}

.button-row,
.toolbar,
.form-actions,
.topbar-actions {
  row-gap: 10px;
}

input,
select,
textarea {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

input::placeholder,
textarea::placeholder {
  color: #95a19c;
}

label small,
.muted,
.helper-text {
  color: #728078;
}

.compact-form,
.finance-form {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 248, 0.88));
  border-color: rgba(20, 32, 28, 0.075);
}

.inventory-collapsible-panel > summary,
.finance-section-panel summary,
.product-inline-section summary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 248, 0.94));
}

.inventory-collapsible-panel > summary::before,
.finance-section-panel summary::before,
.product-inline-section summary::before {
  content: "";
  width: 8px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--module-accent);
  opacity: 0.8;
}

.table-wrap,
.executive-table-wrap {
  scrollbar-color: rgba(18, 107, 95, 0.28) transparent;
  scrollbar-width: thin;
}

.table-wrap::-webkit-scrollbar,
.executive-table-wrap::-webkit-scrollbar {
  height: 10px;
}

.table-wrap::-webkit-scrollbar-thumb,
.executive-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(18, 107, 95, 0.22);
  border: 3px solid #ffffff;
  border-radius: 999px;
}

.table-wrap th,
.executive-table th {
  color: #4b5c55;
  background:
    linear-gradient(180deg, #fbfdfc, #f2f7f4);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.table-wrap td,
.executive-table td {
  color: #283631;
}

.table-wrap td strong,
.executive-table td strong {
  color: var(--premium-ink-strong);
}

.status-pill,
.status-badge,
.badge,
.risk-badge,
.price-source-badge {
  border: 1px solid rgba(20, 32, 28, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.tone-accent,
.tone-cash,
.tone-income,
.tone-profit {
  --tone: var(--finance-profit);
  --tone-soft: var(--finance-profit-soft);
}

.tone-blue,
.tone-receivable {
  --tone: var(--finance-receivable);
  --tone-soft: var(--finance-receivable-soft);
}

.tone-amber,
.tone-payable {
  --tone: var(--finance-payable);
  --tone-soft: var(--finance-payable-soft);
}

.tone-red,
.tone-expense,
.tone-risk {
  --tone: var(--finance-risk);
  --tone-soft: var(--finance-risk-soft);
}

.tone-neutral {
  --tone: var(--finance-neutral);
  --tone-soft: var(--finance-neutral-soft);
}

.metric-card[class*="tone-"] {
  overflow: hidden;
  border-top: 0;
  border-left: 4px solid var(--tone, var(--accent));
  background:
    linear-gradient(135deg, var(--tone-soft, var(--accent-soft)) 0%, rgba(255, 255, 255, 0.94) 42%, #ffffff 100%);
}

.metric-card[class*="tone-"]::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--tone, var(--accent));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--tone, var(--accent)) 12%, transparent);
}

.metric-card[class*="tone-"] strong {
  color: color-mix(in srgb, var(--tone, var(--accent)) 82%, #10201b);
}

.metric-card[class*="tone-"] p {
  color: #66766f;
}

#finance .executive-finance-panel {
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(227, 245, 242, 0.74) 0%, rgba(255, 255, 255, 0.96) 34%, #ffffff 100%);
  border-top: 3px solid var(--finance-profit);
}

#finance .executive-period-note {
  color: #41544d;
  background: linear-gradient(90deg, var(--finance-neutral-soft), #ffffff);
  border-color: rgba(100, 115, 109, 0.18);
}

#finance .finance-summary-grid .metric-card:nth-child(1),
#finance .finance-summary-grid .metric-card:nth-child(2),
#finance .finance-summary-grid .metric-card:nth-child(3) {
  --tone: var(--finance-cash);
  --tone-soft: var(--finance-cash-soft);
}

#finance .finance-summary-grid .metric-card:nth-child(4),
#finance .finance-summary-grid .metric-card:nth-child(8) {
  --tone: var(--finance-receivable);
  --tone-soft: var(--finance-receivable-soft);
}

#finance .finance-summary-grid .metric-card:nth-child(5),
#finance .finance-summary-grid .metric-card:nth-child(9) {
  --tone: var(--finance-payable);
  --tone-soft: var(--finance-payable-soft);
}

#finance .finance-summary-grid .metric-card:nth-child(6),
#finance .finance-summary-grid .metric-card:nth-child(7) {
  --tone: var(--finance-risk);
  --tone-soft: var(--finance-risk-soft);
}

#finance .finance-summary-grid .metric-card:nth-child(10) {
  --tone: var(--finance-profit);
  --tone-soft: var(--finance-profit-soft);
}

#finance .executive-summary-grid .metric-card:nth-child(1),
#finance .executive-summary-grid .metric-card:nth-child(2) {
  --tone: var(--finance-income);
  --tone-soft: var(--finance-income-soft);
}

#finance .executive-summary-grid .metric-card:nth-child(3),
#finance .executive-summary-grid .metric-card:nth-child(4),
#finance .executive-summary-grid .metric-card:nth-child(6) {
  --tone: var(--finance-profit);
  --tone-soft: var(--finance-profit-soft);
}

#finance .executive-summary-grid .metric-card:nth-child(5) {
  --tone: var(--finance-expense);
  --tone-soft: var(--finance-expense-soft);
}

#finance > .finance-section-panel {
  --section-tone: var(--finance-neutral);
  --section-soft: var(--finance-neutral-soft);
  border-left: 4px solid var(--section-tone);
  background:
    linear-gradient(90deg, var(--section-soft) 0%, rgba(255, 255, 255, 0.96) 22%, #ffffff 100%);
}

#finance > .finance-section-panel:nth-of-type(2) {
  --section-tone: var(--finance-cash);
  --section-soft: var(--finance-cash-soft);
}

#finance > .finance-section-panel:nth-of-type(3),
#finance > .finance-section-panel:nth-of-type(4) {
  --section-tone: var(--finance-risk);
  --section-soft: var(--finance-risk-soft);
}

#finance > .finance-section-panel:nth-of-type(5) {
  --section-tone: var(--finance-receivable);
  --section-soft: var(--finance-receivable-soft);
}

#finance > .finance-section-panel:nth-of-type(6) {
  --section-tone: var(--finance-payable);
  --section-soft: var(--finance-payable-soft);
}

#finance > .finance-section-panel:nth-of-type(7) {
  --section-tone: var(--finance-profit);
  --section-soft: var(--finance-profit-soft);
}

#finance > .finance-section-panel:nth-of-type(8) {
  --section-tone: var(--finance-expense);
  --section-soft: var(--finance-expense-soft);
}

#finance .finance-section-panel summary::before {
  background: var(--section-tone);
}

#finance .finance-section-panel summary::after {
  border-color: color-mix(in srgb, var(--section-tone) 32%, var(--line));
  color: var(--section-tone);
  background: #ffffff;
}

#finance .executive-report-card {
  overflow: hidden;
  border-top: 3px solid var(--finance-neutral);
  background:
    linear-gradient(180deg, #ffffff, #fbfdfc);
}

#finance .executive-report-card:nth-child(1),
#finance .executive-report-card:nth-child(2) {
  border-top-color: var(--finance-profit);
}

#finance .executive-report-card:nth-child(3) {
  border-top-color: var(--finance-cash);
}

#finance .executive-report-card:nth-child(4) {
  border-top-color: var(--finance-receivable);
}

#finance .executive-report-card:nth-child(5) {
  border-top-color: var(--finance-payable);
}

#finance .executive-report-card:nth-child(6),
#finance .executive-report-card:nth-child(7),
#finance .executive-report-card:nth-child(8) {
  border-top-color: var(--finance-profit);
}

#finance .executive-report-card:nth-child(9),
#finance .executive-report-card:nth-child(10) {
  border-top-color: var(--finance-cash);
}

#finance .executive-alert {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9), var(--surface-soft));
}

#finance .executive-alert.tone-red {
  border-left-color: var(--finance-risk);
  background: var(--finance-risk-soft);
}

#finance .executive-alert.tone-amber {
  border-left-color: var(--finance-payable);
  background: var(--finance-payable-soft);
}

#finance .executive-alert.tone-accent {
  border-left-color: var(--finance-profit);
  background: var(--finance-profit-soft);
}

#finance .finance-strip div:nth-child(1),
#dailyClose .daily-close-metrics .metric-card:nth-child(7) {
  --tone: var(--finance-cash);
  --tone-soft: var(--finance-cash-soft);
}

#finance .finance-strip div:nth-child(2) {
  border-left: 4px solid var(--finance-receivable);
  background: var(--finance-receivable-soft);
}

#finance .finance-strip div:nth-child(3) {
  border-left: 4px solid var(--finance-payable);
  background: var(--finance-payable-soft);
}

#dailyClose .daily-close-metrics .metric-card:nth-child(1),
#dailyClose .daily-close-metrics .metric-card:nth-child(2),
#dailyClose .daily-close-metrics .metric-card:nth-child(4),
#dailyClose .daily-close-metrics .metric-card:nth-child(5),
#dailyClose .daily-close-metrics .metric-card:nth-child(8) {
  --tone: var(--finance-income);
  --tone-soft: var(--finance-income-soft);
}

#dailyClose .daily-close-metrics .metric-card:nth-child(3),
#dailyClose .daily-close-metrics .metric-card:nth-child(6) {
  --tone: var(--finance-expense);
  --tone-soft: var(--finance-expense-soft);
}

#dailyClose .daily-close-metrics .metric-card:nth-child(9),
#dailyClose .daily-close-metrics .metric-card:nth-child(11) {
  --tone: var(--finance-risk);
  --tone-soft: var(--finance-risk-soft);
}

#dailyClose .daily-close-metrics .metric-card:nth-child(10) {
  --tone: var(--finance-profit);
  --tone-soft: var(--finance-profit-soft);
}

.bar-track {
  background: linear-gradient(90deg, #edf3ef, #f7faf8);
  box-shadow: inset 0 1px 2px rgba(20, 32, 28, 0.08);
}

.bar-track span {
  background: linear-gradient(90deg, var(--module-accent), color-mix(in srgb, var(--module-accent) 68%, #ffffff));
}

#finance .bar-track span,
#dailyClose .bar-track span {
  background: linear-gradient(90deg, var(--finance-cash), var(--finance-receivable), var(--finance-profit));
}

.sales-dot {
  background: var(--finance-income);
}

.purchase-dot {
  background: var(--finance-payable);
}

.paid-dot {
  background: var(--finance-receivable);
}

.empty-state {
  background:
    linear-gradient(135deg, var(--module-accent-soft), rgba(255, 255, 255, 0.92) 36%, #ffffff);
  border-color: color-mix(in srgb, var(--module-accent) 18%, var(--line-strong));
}

.permission-admin-layout,
.permission-editor,
.permission-module-group,
.permission-row {
  --module-accent: #516760;
  --module-accent-soft: #eef3f1;
}

.permission-row {
  background: linear-gradient(180deg, #ffffff, #fbfdfc);
  border-color: rgba(20, 32, 28, 0.08);
}

@media (min-width: 1500px) {
  .workspace {
    max-width: 1560px;
    margin-inline: auto;
  }

  .executive-summary-grid,
  .finance-summary-grid,
  .daily-close-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .tab-panel > .section-heading,
  .calendar-heading,
  .daily-close-heading {
    padding: 16px;
  }

  .executive-section-grid {
    grid-template-columns: 1fr;
  }

  #finance .executive-report-card {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .tab-panel > .section-heading,
  .calendar-heading,
  .daily-close-heading {
    border-left-width: 4px;
  }

  .metric-card[class*="tone-"] {
    border-left-width: 3px;
  }

  .inventory-collapsible-panel > summary::before,
  .finance-section-panel summary::before,
  .product-inline-section summary::before {
    width: 100%;
    height: 4px;
  }

  .table-wrap th,
  .executive-table th {
    font-size: 0.68rem;
  }
}

/* UI Pro 2 hotfix: independent desktop sidebar scroll. */
.sidebar {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(18, 107, 95, 0.24) transparent;
}

.sidebar::-webkit-scrollbar {
  width: 10px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(18, 107, 95, 0.18);
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(18, 107, 95, 0.3);
}

/* Fine-grained permissions phase 3A */
.permission-hidden {
  display: none !important;
}

.permission-disabled {
  opacity: 0.48;
  pointer-events: none;
  filter: grayscale(0.2);
}

.permission-denied-state {
  border: 1px dashed rgba(133, 27, 36, 0.28);
  background: linear-gradient(135deg, rgba(133, 27, 36, 0.08), rgba(255, 255, 255, 0.92));
  color: #6f1d28;
}

.permission-redacted,
.permission-sensitive-redacted {
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0;
}

/* =========================================================================
   Fase 3B-2: chasis de navegacion movil. Solo <= 1024px; escritorio intacto.
   Jerarquia z-index movil (documentada): header 30 y bottom-nav 30 < overlay 40
   < drawer 45 < login (50) y backdrops de modales existentes (80).
   El drawer/barra NO son un segundo sistema de navegacion: se generan desde los
   mismos .nav-item[data-tab] del sidebar (fuente de verdad ya filtrada por permisos).
   ========================================================================= */

/* Base (escritorio-first): el chasis movil no existe visualmente en >= 1025px. */
.mobile-header,
.mobile-bottom-nav,
.mobile-drawer,
.mobile-drawer-overlay {
  display: none;
}

body.mobile-drawer-lock {
  overflow: hidden;
}

@media (max-width: 1024px) {
  /* El drawer reemplaza al sidebar; se oculta sin sacarlo del DOM (sigue siendo la fuente de verdad).
     .app-shell > .sidebar (0,2,0) gana a las reglas .sidebar previas de menor especificidad. */
  .app-shell > .sidebar {
    display: none;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  /* El titulo de la vista vive en el encabezado movil; se evita duplicarlo en el topbar. */
  .topbar > div:first-child {
    display: none;
  }

  /* --- Encabezado movil --- */
  .mobile-header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 30;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: max(6px, env(safe-area-inset-top)) 12px 6px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--line-soft, #e6ece9);
    backdrop-filter: blur(8px);
  }

  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    color: var(--accent-dark, #0c5646);
    background: var(--surface-soft, #f4f7f5);
    border: 1px solid var(--line-soft, #e6ece9);
    border-radius: 10px;
    font-size: 1.3rem;
    line-height: 1;
  }

  .mobile-header-logo {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: contain;
  }

  .mobile-header-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-weight: 700;
    font-size: 0.98rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-header-user {
    flex-shrink: 0;
    max-width: 32vw;
    overflow: hidden;
    color: var(--muted, #64736d);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* --- Overlay del drawer --- */
  .mobile-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(18, 31, 27, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .mobile-drawer-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* --- Drawer lateral --- */
  .mobile-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 45;
    width: min(84vw, 320px);
    height: 100%;
    padding: max(14px, env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
    background: #ffffff;
    border-right: 1px solid var(--line-soft, #e6ece9);
    box-shadow: 6px 0 30px rgba(20, 32, 28, 0.18);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s ease;
  }

  .mobile-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .mobile-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
  }

  .mobile-drawer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .mobile-drawer-brand img {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    object-fit: contain;
  }

  .mobile-drawer-close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    color: var(--muted, #64736d);
    background: var(--surface-soft, #f4f7f5);
    border: 1px solid var(--line-soft, #e6ece9);
    border-radius: 10px;
    font-size: 1.05rem;
    line-height: 1;
  }

  .mobile-drawer-session {
    margin: 8px 0 12px;
    padding: 10px 12px;
    background: var(--surface-soft, #f4f7f5);
    border-radius: 10px;
    color: var(--muted, #64736d);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
  }

  .mobile-drawer-nav {
    display: grid;
    gap: 4px;
  }

  .mobile-drawer-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    color: #31413b;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.95rem;
    text-align: left;
  }

  .mobile-drawer-item.is-active {
    color: var(--accent-dark, #0c5646);
    background: var(--accent-soft, #e4f4ed);
    border-color: rgba(18, 107, 95, 0.18);
    font-weight: 700;
  }

  .mobile-drawer-foot {
    margin-top: auto;
    padding-top: 14px;
  }

  .mobile-drawer-logout {
    width: 100%;
    min-height: 46px;
  }

  /* --- Barra inferior --- */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    align-items: stretch;
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid var(--line-soft, #e6ece9);
    box-shadow: 0 -6px 24px rgba(20, 32, 28, 0.08);
  }

  .mobile-bottom-modules {
    display: flex;
    flex: 1 1 auto;
    gap: 2px;
  }

  .mobile-bottom-item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    padding: 4px 2px;
    gap: 2px;
    color: #40504a;
    background: transparent;
    border: 0;
    border-radius: 10px;
    font-size: 0.72rem;
    line-height: 1.1;
  }

  .mobile-bottom-item .mobile-bottom-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-bottom-item.is-active {
    color: var(--accent-dark, #0c5646);
    background: var(--accent-soft, #e4f4ed);
    font-weight: 700;
  }

  .mobile-bottom-more {
    flex: 0 0 auto;
    min-width: 62px;
  }

  /* Espacio inferior para que la barra fija no cubra contenido ni botones. */
  .workspace {
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }

  .mobile-menu-btn:focus-visible,
  .mobile-drawer:focus-visible,
  .mobile-drawer-item:focus-visible,
  .mobile-bottom-item:focus-visible,
  .mobile-drawer-close:focus-visible {
    outline: 2px solid var(--accent, #126b5f);
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer,
  .mobile-drawer-overlay {
    transition: none;
  }
}

/* =========================================================================
   Fase 3B-3: listados moviles (tarjetas y resumen + detalle desplegable).
   Escritorio >= 1025px intacto: .mobile-list no existe visualmente fuera de
   <= 767px, y las tablas .mobile-table-swap solo se ocultan en ese rango.
   Sin listeners nuevos: las acciones moviles reutilizan los mismos data-*
   delegados que las tablas. Detalle desplegable con <details>/<summary>
   (teclado y toque nativos, sin JS).
   ========================================================================= */

.mobile-list {
  display: none;
}

@media (max-width: 767px) {
  .mobile-list {
    display: grid;
    gap: 10px;
  }

  .mobile-table-swap {
    display: none;
  }

  /* --- Tarjeta resumen + detalle (categoria C: inventario, clientes, proveedores) --- */
  .mobile-record-card {
    background: var(--surface-raised, #ffffff);
    border: 1px solid var(--line-soft, #e6ece9);
    border-radius: 12px;
    overflow: hidden;
  }

  .mobile-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 52px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
  }

  .mobile-summary-row::-webkit-details-marker {
    display: none;
  }

  .mobile-summary-row::after {
    content: "\25BE";
    flex-shrink: 0;
    color: var(--muted, #64736d);
    transition: transform 0.18s ease;
  }

  .mobile-record-card[open] > .mobile-summary-row::after {
    transform: rotate(180deg);
  }

  .mobile-record-card__title {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .mobile-record-card__title strong {
    overflow-wrap: anywhere;
  }

  .mobile-record-card__meta {
    color: var(--muted, #64736d);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
  }

  .mobile-record-card__details {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 10px 12px;
    border-top: 1px solid var(--line-soft, #e6ece9);
  }

  .mobile-record-card__pair {
    display: grid;
    grid-template-columns: minmax(88px, 34%) 1fr;
    gap: 10px;
    min-width: 0;
  }

  .mobile-record-card__details dt {
    color: var(--muted, #64736d);
    font-size: 0.78rem;
    font-weight: 700;
  }

  .mobile-record-card__details dd {
    margin: 0;
    min-width: 0;
    font-size: 0.86rem;
    overflow-wrap: anywhere;
  }

  .mobile-record-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--line-soft, #e6ece9);
  }

  .mobile-record-card__actions .small-button {
    flex: 1 1 calc(50% - 8px);
    min-height: 44px;
  }

  /* --- Tarjetas existentes de pedidos y cotizaciones (categoria B) --- */
  .order-card-header {
    flex-wrap: wrap;
  }

  .order-card-footer {
    flex-wrap: wrap;
  }

  .order-card-footer .small-button,
  .order-card-footer .status-select {
    flex: 1 1 calc(50% - 12px);
    min-height: 44px;
  }

  /* Accion principal (primer boton, p.ej. Ver detalle) a ancho completo. */
  .order-card-footer .small-button:first-child {
    flex-basis: 100%;
  }

  /* --- Entregas (categoria B): tablero de rutas a una columna --- */
  .route-board {
    grid-template-columns: 1fr;
  }

  .route-stop .button-row {
    flex-wrap: wrap;
  }

  .route-stop .button-row .small-button {
    flex: 1 1 calc(33.3% - 8px);
    min-height: 44px;
  }

  /* Estados y totales siempre legibles. */
  .status-pill {
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-summary-row::after {
    transition: none;
  }
}

/* =========================================================================
   Fase 3B-4: formularios operativos moviles.
   Alcance explicito por ID (sin selectores globales): #orderForm, #quoteForm,
   #directPurchaseSaleForm, #productForm, #customerForm, #supplierForm y el
   modal operativo .advanced-cancel-panel. Columnas responsive ya resueltas por
   reglas existentes (<=1160px: 2 col; <=780px: 1 col). Este bloque agrega:
   tactil >= 44px, fuente 16px anti-zoom iOS, barras de acciones sticky que
   REUTILIZAN los botones/handlers existentes (solo posicionamiento), zona de
   acciones peligrosas separada y modo teclado-abierto.
   Estrategia barra inferior global (3B-2): permanece visible; las barras
   sticky se elevan por encima de ella (bottom: 66px + safe-area). Solo se
   oculta mientras el teclado virtual esta abierto (body.mobile-keyboard-open,
   gestionado por visualViewport; la clase se retira sola al cerrar el teclado
   o volver a escritorio — sin estados residuales).
   Jerarquia z-index: barras sticky de formulario 20 < header/bottom-nav 30
   < overlay 40 < drawer 45 < login 50 < backdrops 80.
   ========================================================================= */

@media (max-width: 767px) {
  /* Fuente >= 16px para evitar zoom involuntario de iOS al enfocar. */
  #orderForm :is(input, select, textarea),
  #quoteForm :is(input, select, textarea),
  #directPurchaseSaleForm :is(input, select, textarea),
  #productForm :is(input, select, textarea),
  #customerForm :is(input, select, textarea),
  #supplierForm :is(input, select, textarea) {
    font-size: 16px;
    scroll-margin-block: 76px 160px;
  }

  /* Controles tactiles (excluye checkbox/radio/hidden para no deformarlos). */
  #orderForm :is(input, select):not([type="checkbox"], [type="radio"], [type="hidden"]),
  #quoteForm :is(input, select):not([type="checkbox"], [type="radio"], [type="hidden"]),
  #directPurchaseSaleForm :is(input, select):not([type="checkbox"], [type="radio"], [type="hidden"]),
  #productForm :is(input, select):not([type="checkbox"], [type="radio"], [type="hidden"]),
  #customerForm :is(input, select):not([type="checkbox"], [type="radio"], [type="hidden"]),
  #supplierForm :is(input, select):not([type="checkbox"], [type="radio"], [type="hidden"]) {
    min-height: 44px;
  }

  #orderForm button,
  #quoteForm button,
  #directPurchaseSaleForm button,
  #productForm button,
  #customerForm button,
  #supplierForm button {
    min-height: 46px;
  }

  /* Barra de acciones sticky: mismos botones y handlers, solo posicionamiento.
     Queda por ENCIMA de la barra inferior global (que sigue visible). */
  #orderForm .form-footer,
  #quoteForm .form-footer,
  #productForm .form-actions,
  #customerForm .form-actions {
    position: sticky;
    bottom: calc(66px + env(safe-area-inset-bottom));
    z-index: 20;
    padding: 10px 2px;
    background: var(--surface, #ffffff);
    border-top: 1px solid var(--line, #e3ebe7);
    box-shadow: 0 -8px 18px rgba(20, 32, 28, 0.07);
  }

  #supplierForm .form-action,
  #directPurchaseSaleForm > button[type="submit"] {
    position: sticky;
    bottom: calc(66px + env(safe-area-inset-bottom));
    z-index: 20;
    box-shadow: 0 10px 24px rgba(20, 32, 28, 0.18);
  }

  /* Total de venta/cotizacion legible dentro de la barra sticky. */
  #orderForm .form-footer strong,
  #quoteForm .form-footer strong {
    font-size: 1.4rem;
  }

  /* Zona de acciones peligrosas: separar Cancelar/limpiar de Guardar. */
  #cancelOrderEditBtn,
  #cancelQuoteEditBtn,
  #cancelProductEditBtn,
  #cancelCustomerEditBtn,
  #clearProductPresentationDraftsBtn,
  #clearProductAliasDraftsBtn {
    margin-top: 10px;
  }

  /* Lineas del borrador (pedido / compra directa / cotizacion): sin tabla
     horizontal (ya apilan a 1 col) y boton Quitar comodo y separado. */
  #orderLinesBox .line-row button,
  #directSaleLinesBox .line-row button,
  #quoteLinesBox .line-row button {
    width: 100%;
    min-height: 44px;
    margin-top: 4px;
  }

  /* Teclado virtual abierto: las barras sticky vuelven al flujo y la barra
     inferior global se oculta para no tapar el campo activo. */
  body.mobile-keyboard-open .mobile-bottom-nav {
    display: none;
  }

  body.mobile-keyboard-open #orderForm .form-footer,
  body.mobile-keyboard-open #quoteForm .form-footer,
  body.mobile-keyboard-open #productForm .form-actions,
  body.mobile-keyboard-open #customerForm .form-actions,
  body.mobile-keyboard-open #supplierForm .form-action,
  body.mobile-keyboard-open #directPurchaseSaleForm > button[type="submit"] {
    position: static;
    box-shadow: none;
  }

  /* Modal operativo de cancelacion avanzada: casi pantalla completa. */
  .advanced-cancel-backdrop {
    align-items: stretch;
    padding: 0;
  }

  .advanced-cancel-panel {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding: max(14px, env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
  }

  .advanced-cancel-panel .panel-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 8px;
    background: var(--panel, #ffffff);
  }
}

/* =========================================================================
   Hotfix responsive Compras en movil (post 3B-4).
   Causa: el reset global `* { min-width: 0 }` de la capa UI Pro permite que
   los chips de la barra secundaria y la columna lateral de botones de las
   tarjetas de Compra sugerida se compriman por debajo de su contenido
   (texto partido letra por letra). Solo <= 767px; escritorio intacto.
   ========================================================================= */

@media (max-width: 767px) {
  /* Barra secundaria de Compras: scroll horizontal, sin comprimir pestanas. */
  .purchase-view-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }

  .purchase-view-tabs .filter-chip {
    flex: 0 0 auto;
    min-height: 40px;
  }

  /* Tarjetas de Compra sugerida: botones DEBAJO del contenido, sin partir
     texto, y altura contenida. */
  .professional-purchase-item {
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
  }

  .professional-purchase-item > div:first-child {
    display: grid;
    gap: 2px;
  }

  .professional-purchase-item > div:first-child span {
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .professional-purchase-item .button-row {
    width: 100%;
    gap: 8px;
  }

  .professional-purchase-item .button-row .small-button {
    flex: 1 1 auto;
    min-width: 132px;
    min-height: 44px;
    white-space: nowrap;
  }
}

/* ===== Asistente Abasto (4A-4B) ===== */
/* Superficie visual del asistente. Prefijo unico assistant-; solo variables UI Pro 2.
   Cerrado ([hidden]) no altera nada del layout. Tres modalidades controladas por app.js:
   data-mode="docked"  (>=1441px, acoplado, sin scrim, no modal),
   data-mode="overlay" (1025-1440px, overlay + scrim, modal),
   data-mode="sheet"   (<=1024px, pantalla completa, modal). */

.assistant-scrim {
  position: fixed;
  inset: 0;
  z-index: 118;
  background: rgba(23, 32, 29, 0.42);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.assistant-scrim.is-open {
  opacity: 1;
}

.assistant-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 119;
  display: flex;
  flex-direction: column;
  width: 420px;
  max-width: 92vw;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: translateX(100%);
  transition: transform 0.2s ease;
}

.assistant-panel.is-open {
  transform: translateX(0);
}

/* Modo acoplado: el ERP reserva el ancho del panel (no tapa tablas). */
body.assistant-docked-open .app-shell {
  margin-right: 420px;
}

/* Modo modal (overlay/sheet): sin scroll de fondo. */
body.assistant-lock {
  overflow: hidden;
}

.assistant-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.assistant-header-text {
  flex: 1 1 auto;
  min-width: 0;
}

.assistant-title {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
  color: var(--ink);
}

.assistant-subtitle {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.assistant-status {
  font-size: 12px;
  color: var(--muted);
  padding-top: 4px;
  white-space: nowrap;
}

.assistant-status:empty {
  display: none;
}

.assistant-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}

.assistant-close:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

.assistant-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}

.assistant-empty-lead {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

.assistant-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.assistant-suggestions:empty {
  display: none;
}

.assistant-suggestion {
  min-height: 44px;
  padding: 10px 14px;
  text-align: left;
  font-size: 13.5px;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.assistant-suggestion:hover {
  border-color: var(--accent);
}

/* Mensajes (bloques editoriales sobrios; render dinamico en 4A-4C). */
.assistant-msg {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

.assistant-msg.is-user {
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.assistant-msg.is-assistant {
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.assistant-composer {
  flex: 0 0 auto;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

.assistant-quota {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
}

.assistant-quota.is-warning {
  color: var(--amber);
}

.assistant-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.assistant-input-row textarea {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 132px;
  resize: vertical;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
}

.assistant-send-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent-dark);
  border-radius: 10px;
  cursor: pointer;
}

.assistant-send-btn:disabled {
  background: var(--line);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

.assistant-hint {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--muted);
}

.assistant-note {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--amber);
}

.assistant-note[hidden] {
  display: none;
}

/* Region aria-live dedicada (fuera de la vista; NO sobre el hilo completo). */
.assistant-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Foco visible en todos los controles del asistente. */
.assistant-panel button:focus-visible,
.assistant-panel textarea:focus-visible,
.assistant-open-btn:focus-visible,
.mobile-assistant-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Boton de acceso movil (header): mismo lenguaje visual del chasis movil. */
.mobile-assistant-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

/* Entrada especial del drawer (no-tab). */
.mobile-drawer-item--assistant {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 12px;
  color: var(--accent-dark);
  font-weight: 600;
}

/* --- 4A-4C: estados reales de conversacion --- */

.assistant-msg-body ul {
  margin: 6px 0;
  padding-left: 20px;
}

.assistant-msg-flag {
  display: inline-block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--muted);
}

.assistant-msg-flag.is-failed {
  color: var(--red);
}

.assistant-msg.is-user.is-failed {
  border-color: var(--red);
}

.assistant-msg-status {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.assistant-msg-status.is-partial {
  background: var(--amber-soft);
  border-color: var(--amber-line);
  color: var(--amber);
}

.assistant-msg-status.is-needs_human {
  background: var(--accent-soft);
  border-color: var(--line);
  color: var(--accent-dark);
}

.assistant-msg-status.is-denied,
.assistant-msg-status.is-unavailable {
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--muted);
}

.assistant-sources {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
}

.assistant-sources summary {
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 600;
  min-height: 24px;
}

.assistant-sources ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.assistant-sources li {
  margin: 2px 0;
  color: var(--ink);
}

.assistant-typing {
  display: inline-flex;
  gap: 5px;
  padding: 10px 12px;
}

.assistant-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.35;
  animation: assistant-typing-blink 1.1s infinite ease-in-out;
}

.assistant-typing span:nth-child(2) {
  animation-delay: 0.18s;
}

.assistant-typing span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes assistant-typing-blink {
  0%,
  100% {
    opacity: 0.25;
  }
  45% {
    opacity: 0.9;
  }
}

.assistant-error {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface-soft);
  font-size: 13px;
  color: var(--ink);
}

.assistant-error p {
  margin: 0;
}

.assistant-error-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.assistant-retry-btn,
.assistant-newconv-btn {
  min-height: 44px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
}

.assistant-retry-btn:hover,
.assistant-newconv-btn:hover {
  border-color: var(--accent);
}

.assistant-thread-tools {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.assistant-send-btn.is-loading {
  background: var(--line);
  border-color: var(--line);
  color: var(--muted);
}

/* Sheet movil a pantalla completa. */
@media (max-width: 1024px) {
  .assistant-panel {
    width: 100%;
    max-width: none;
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .assistant-panel,
  .assistant-scrim,
  .assistant-typing span {
    transition: none;
    animation: none;
  }
}

/* ===== Solicitudes de cotizacion (5A-2) ===== */
/* Bandeja de staging dentro de Cotizaciones. Prefijo qr-; variables UI Pro 2. */

.qr-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.qr-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.qr-filter select,
.qr-filter input {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font: inherit;
  background: var(--surface);
}

.qr-filter-search {
  flex: 1 1 220px;
}

.qr-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qr-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
}

.qr-card:hover {
  border-color: var(--accent);
}

.qr-card-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.qr-card-meta,
.qr-card-lines {
  font-size: 12px;
  color: var(--muted);
}

.qr-card-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: 0 0 auto;
}

.qr-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
}

.qr-badge-draft { color: var(--muted); }
.qr-badge-reviewing { color: var(--blue); border-color: var(--blue); background: var(--surface); }
.qr-badge-ready { color: var(--accent-dark); border-color: var(--accent); background: var(--accent-soft); }
.qr-badge-cancelled { color: var(--red); border-color: var(--red); background: var(--surface); }
.qr-badge-converted { color: var(--ink); border-color: var(--line-strong); }

.qr-source-label textarea,
.qr-detail textarea {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  resize: vertical;
}

.qr-intake-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.qr-intake-actions .small-button,
.qr-file-label {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

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

.qr-preview-table th,
.qr-preview-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.qr-preview-table input {
  width: 100%;
  min-width: 70px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}

.qr-preview-table tr.is-saved {
  opacity: 0.65;
}

.qr-original {
  max-width: 220px;
  color: var(--muted);
  font-size: 12px;
  word-break: break-word;
}

.qr-line-error {
  color: var(--red);
  font-size: 12px;
}

.qr-error {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--amber-line);
  background: var(--amber-soft);
  border-radius: 10px;
  color: var(--amber);
  font-size: 13px;
}

.qr-save-row {
  justify-content: flex-end;
}

.qr-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.qr-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.qr-detail-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qr-pending-chip {
  font-size: 12px;
  color: var(--amber);
}

.qr-evidence pre {
  margin: 6px 0 0;
  padding: 10px 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12.5px;
  max-height: 220px;
  overflow-y: auto;
}

.qr-lines-title {
  margin: 16px 0 8px;
  font-size: 14px;
}

.qr-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qr-line {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.qr-line-original {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 8px;
  word-break: break-word;
}

.qr-line-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.qr-line-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.qr-line-grid input,
.qr-line-grid select {
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font: inherit;
}

@media (max-width: 767px) {
  .qr-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .qr-card-side {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .qr-preview-table {
    display: block;
    overflow-x: auto;
  }

  .qr-intake-actions .small-button,
  .qr-file-label,
  .qr-save-row button {
    flex: 1 1 auto;
    min-height: 44px;
  }
}


/* ===== Documentos de solicitud (5A-3) ===== */
.qr-doc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft, #dbe2ea);
  border-radius: 8px;
  margin: 8px 0;
  font-size: 0.92rem;
}

.qr-doc-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.qr-doc-state {
  color: var(--text-muted, #5b6b7b);
  font-size: 0.85rem;
}

.qr-doc-completed { color: var(--success-strong, #1c7c3c); }
.qr-doc-needs_review { color: var(--warning-strong, #9a6b00); }
.qr-doc-failed { color: var(--danger-strong, #b00020); }
.qr-doc-running, .qr-doc-pending { color: var(--text-muted, #5b6b7b); }

.qr-doc-list h4 {
  margin: 12px 0 4px;
}

@media (max-width: 767px) {
  .qr-doc-row button {
    min-height: 44px;
  }
}


/* ===== Matching y alias (5A-4) ===== */
.qr-lines-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.qr-suggestions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0;
}

.qr-suggestion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border-soft, #dbe2ea);
  border-radius: 6px;
  font-size: 0.9rem;
}

.qr-suggestion.is-ambiguous {
  border-color: var(--warning-strong, #9a6b00);
  background: var(--warning-soft, #fff7e6);
}

.qr-sug-name { font-weight: 600; }
.qr-sug-meta { color: var(--text-muted, #5b6b7b); font-size: 0.82rem; }
.qr-sug-warn { color: var(--warning-strong, #9a6b00); font-size: 0.82rem; font-weight: 600; }
.qr-sug-empty { color: var(--text-muted, #5b6b7b); font-size: 0.85rem; }

.qr-alias-learn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  margin-top: 6px;
}

.qr-alias-input {
  width: 100%;
  margin-top: 4px;
}

@media (max-width: 767px) {
  .qr-suggestion button { min-height: 44px; }
}


/* ===== Combobox de producto en solicitudes (5A-5.2) ===== */
.qr-combobox {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.qr-combobox .qr-prod-input {
  flex: 1 1 180px;
  min-width: 0;
}

.qr-combobox--empty .qr-prod-input {
  border-color: var(--warning-strong, #9a6b00);
}

.qr-prod-clear {
  flex: 0 0 auto;
}

.qr-prod-status {
  flex: 1 1 100%;
  font-size: 0.78rem;
  color: var(--text-muted, #5b6b7b);
}

.qr-combobox--empty .qr-prod-status {
  color: var(--warning-strong, #9a6b00);
}

.qr-prod-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  margin: 2px 0 0;
  padding: 4px;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface, #fff);
  border: 1px solid var(--border-soft, #dbe2ea);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.qr-prod-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.qr-prod-option:hover,
.qr-prod-option.is-active {
  background: var(--accent-soft, #eef4ff);
}

.qr-prod-opt-name { font-weight: 600; }
.qr-prod-opt-meta { font-size: 0.8rem; color: var(--text-muted, #5b6b7b); }

.qr-prod-empty {
  padding: 8px 10px;
  color: var(--text-muted, #5b6b7b);
  font-size: 0.85rem;
}

@media (max-width: 767px) {
  .qr-prod-results { max-height: 200px; }
  .qr-prod-option { min-height: 44px; }
  .qr-prod-clear { min-height: 44px; }
}

/* ============================================================================
   7A-2.1 — Interfaz de validacion fiscal (modal de cliente, semaforos, paneles).
   Autocontenido; scroll interno para no crear modales altos sin desplazamiento.
   ============================================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 1rem;
  z-index: 1000;
  overflow-y: auto;
}
.modal-card.fiscal-modal {
  background: var(--surface, #fff);
  color: var(--text, #0f172a);
  width: min(720px, 100%);
  max-height: 92vh;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fiscal-modal .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}
.fiscal-modal .modal-head h2 { font-size: 1.05rem; margin: 0; }
.fiscal-modal .icon-button {
  border: none;
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
  color: inherit;
  line-height: 1;
  padding: 0.25rem 0.5rem;
}
.fiscal-modal-body { padding: 1rem 1.25rem; overflow-y: auto; }
.fiscal-section { margin-bottom: 1.25rem; }
.fiscal-section h3 { font-size: 0.95rem; margin: 0 0 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.fiscal-field { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; font-size: 0.9rem; }
.fiscal-field span { color: var(--muted, #64748b); }
.fiscal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; }
.fiscal-grid label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; }
.fiscal-grid input, .fiscal-grid select { padding: 0.45rem 0.5rem; border: 1px solid rgba(148, 163, 184, 0.5); border-radius: 8px; }
.fiscal-badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.fiscal-badge.tone-ok { background: rgba(22, 163, 74, 0.16); color: #15803d; }
.fiscal-badge.tone-warn { background: rgba(217, 119, 6, 0.16); color: #b45309; }
.fiscal-badge.tone-danger { background: rgba(220, 38, 38, 0.16); color: #b91c1c; }
.fiscal-badge.tone-muted { background: rgba(100, 116, 139, 0.16); color: #475569; }
.fiscal-errors, .fiscal-warnings { border-radius: 8px; padding: 0.5rem 0.75rem; margin: 0.5rem 0; font-size: 0.85rem; }
.fiscal-errors { background: rgba(220, 38, 38, 0.1); }
.fiscal-warnings { background: rgba(217, 119, 6, 0.1); }
.fiscal-ok { color: #15803d; font-size: 0.85rem; margin: 0.4rem 0; }
.fiscal-errors ul, .fiscal-warnings ul, .fiscal-mini-errors, .fiscal-mini-warn { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.fiscal-note, .fiscal-catalog-hint, .fiscal-status-desc, .fiscal-validated-info { font-size: 0.8rem; color: var(--muted, #64748b); margin: 0.4rem 0; }
.fiscal-catalog-hint { color: #b45309; }
.fiscal-status-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.small-button.danger { color: #b91c1c; border-color: rgba(220, 38, 38, 0.5); }
.fiscal-mini-errors { color: #b91c1c; font-size: 0.82rem; }
.fiscal-mini-warn { color: #b45309; font-size: 0.82rem; }
.fiscal-mini-field { font-size: 0.82rem; color: var(--muted, #64748b); }
.fiscal-product-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cfdi-catalog-status { margin-bottom: 1rem; }
.cfdi-catalog-status h4 { margin: 0 0 0.5rem; font-size: 0.9rem; }
@media (prefers-color-scheme: dark) {
  .modal-card.fiscal-modal { background: #0f172a; color: #e2e8f0; }
}

/* 7A-2.2 — Combobox profesional de claves SAT (reemplaza datalist). */
.sat-combobox { position: relative; display: flex; align-items: center; gap: 0.35rem; }
.sat-combobox-input { flex: 1; padding: 0.45rem 0.5rem; border: 1px solid rgba(148, 163, 184, 0.5); border-radius: 8px; }
.sat-combobox-clear { border: none; background: transparent; cursor: pointer; font-size: 0.85rem; color: var(--muted, #64748b); padding: 0.2rem 0.4rem; }
.sat-combobox-clear:disabled { opacity: 0.4; cursor: not-allowed; }
.sat-combobox-listbox {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  margin: 0.2rem 0 0; padding: 0.2rem; list-style: none;
  background: var(--surface, #fff); color: var(--text, #0f172a);
  border: 1px solid rgba(148, 163, 184, 0.5); border-radius: 8px;
  max-height: 260px; overflow-y: auto; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.sat-combobox-option { padding: 0.4rem 0.55rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem; display: flex; gap: 0.4rem; align-items: baseline; flex-wrap: wrap; }
.sat-combobox-option span { color: var(--muted, #64748b); }
.sat-combobox-option em { color: #b45309; font-size: 0.72rem; font-style: normal; }
.sat-combobox-option.is-active, .sat-combobox-option:hover { background: rgba(37, 99, 235, 0.12); }
.sat-combobox-empty { padding: 0.5rem 0.55rem; color: var(--muted, #64748b); font-size: 0.82rem; }
.sat-combobox-hint { display: block; margin-top: 0.25rem; color: var(--muted, #64748b); font-size: 0.72rem; }
@media (prefers-color-scheme: dark) { .sat-combobox-listbox { background: #0f172a; color: #e2e8f0; } }

/* ===== Fase 7C-1: representacion impresa de CFDI (sandbox) ===================================
   Se sirve en una ventana aparte que carga esta hoja; por eso el bloque es autocontenido. */
.print-body { background: #fff; color: #111; margin: 0; }
.cfdi-doc { max-width: 900px; margin: 0 auto; padding: 24px; font-size: 12px; line-height: 1.45; }
.cfdi-doc h1 { font-size: 18px; margin: 0 0 4px; }
.cfdi-doc h2 { font-size: 15px; margin: 0 0 6px; }
.cfdi-doc h3 { font-size: 13px; margin: 12px 0 4px; text-transform: uppercase; letter-spacing: .04em; }
.cfdi-doc p { margin: 2px 0; }
.cfdi-doc .right { text-align: right; }
.cfdi-doc .muted { color: #555; }

/* La marca de sandbox debe verse SIEMPRE, tambien en papel: un fixture impreso sin ella podria
   confundirse con un comprobante real. De ahi el print-color-adjust. */
.sandbox-banner {
  background: #b3261e; color: #fff; font-weight: 700; letter-spacing: .08em;
  text-align: center; padding: 8px; margin: 0 0 16px; border-radius: 4px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cfdi-header { display: flex; justify-content: space-between; gap: 24px; border-bottom: 2px solid #111; padding-bottom: 12px; }
.cfdi-uuid { margin: 12px 0; padding: 8px; background: #f2f2f2; border-radius: 4px; font-size: 13px; }
.cfdi-parties { display: flex; gap: 24px; margin: 12px 0; }
.cfdi-parties > div { flex: 1; border: 1px solid #ccc; border-radius: 4px; padding: 10px; }
.cfdi-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.cfdi-table th, .cfdi-table td { border: 1px solid #ccc; padding: 5px 7px; text-align: left; vertical-align: top; }
.cfdi-table th { background: #f2f2f2; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cfdi-totals { margin: 12px 0; text-align: right; font-size: 13px; }
.cfdi-fiscal { border-top: 1px solid #ccc; padding-top: 10px; }
.cfdi-fiscal code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; word-break: break-all; }
.cfdi-qr { margin-top: 10px; }
/* 7C-4: el QR real sustituye al marcador. Fondo blanco explicito y print-color-adjust para
   que el contraste sobreviva a la impresion: un QR gris no se lee. */
.cfdi-qr-code {
  width: 128px; height: 128px; margin-bottom: 6px; background: #fff;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cfdi-qr-code svg { display: block; width: 100%; height: 100%; }
.cfdi-qr-url { font-size: 10px; }
.cfdi-footer { margin-top: 16px; border-top: 1px solid #ccc; padding-top: 10px; font-size: 11px; }

@media print {
  .print-actions { display: none; }
  .cfdi-doc { padding: 0; }
  .cfdi-table { page-break-inside: auto; }
  .cfdi-table tr { page-break-inside: avoid; }
}

/* ===== Fase 7C-6: endurecimiento del diseño impreso ========================================= */
@page { size: letter; margin: 12mm; }

/* La marca de sandbox debe verse AUNQUE el navegador omita gráficos de fondo (es una opción común
   al imprimir). Por eso lleva borde grueso y texto propio, no solo un fondo de color. */
.sandbox-banner { border: 3px solid #b3261e; color: #b3261e; }
@media print {
  .sandbox-banner { background: transparent; color: #000; border-color: #000; }
}

/* UUID, sellos y URL del QR son cadenas largas sin espacios: sin esto desbordan la caja. */
.cfdi-uuid, .cfdi-fiscal code, .cfdi-qr-url { overflow-wrap: anywhere; word-break: break-word; }
.cfdi-table td { overflow-wrap: anywhere; }

@media print {
  /* El QR no puede partirse entre páginas: la mitad de un QR no es escaneable. */
  .cfdi-qr, .cfdi-qr-code { page-break-inside: avoid; break-inside: avoid; }
  .cfdi-fiscal, .cfdi-parties > div, .cfdi-totals { page-break-inside: avoid; break-inside: avoid; }
  /* Con muchos conceptos la tabla salta de página: el encabezado se repite arriba. */
  .cfdi-table thead { display: table-header-group; }
  .cfdi-table tfoot { display: table-footer-group; }
  .cfdi-header { page-break-after: avoid; }
  .cfdi-doc { font-size: 10.5pt; }
  /* Tamaño mínimo legible del QR en papel, independiente del zoom de pantalla. */
  .cfdi-qr-code { width: 32mm; height: 32mm; }
}

/* ==============================================================================================
   FACTURACIÓN V2 — capa visual del módulo.

   TOKENS SCOPED A PROPÓSITO
     Todo cuelga de `.invoicing-v2`. El ERP tiene hoy tres bloques `:root` encadenados con valores
     en conflicto —deuda real, registrada—, pero consolidarlos desde aquí cambiaría Ventas,
     Inventario, Compras y Clientes como efecto secundario de un rediseño de Facturación. Eso
     amplía el radio de regresión sin necesidad. La consolidación global es un proyecto aparte.

   Se reutilizan los tokens globales seguros —superficies, líneas, tipografía, foco— y solo se
   añaden los que este módulo necesita.
   ============================================================================================== */
.invoicing-v2 {
  --inv-espacio-1: 4px;
  --inv-espacio-2: 8px;
  --inv-espacio-3: 12px;
  --inv-espacio-4: 16px;
  --inv-espacio-5: 24px;
  --inv-espacio-6: 32px;

  --inv-radio: 10px;
  --inv-radio-sm: 6px;

  --inv-superficie: var(--surface, #fff);
  --inv-superficie-tenue: var(--surface-soft, #f8faf8);
  --inv-linea: var(--line, #e3ebe7);
  --inv-linea-fuerte: var(--line-strong, #cdd9d3);
  --inv-tinta: var(--ink, #14201c);
  --inv-tinta-suave: var(--muted, #64736d);

  /* Semánticos. Success significa success; danger significa riesgo. No son decoración. */
  --inv-exito: #1a6b4f;
  --inv-exito-fondo: #e8f5ef;
  --inv-aviso: #8a5d10;
  --inv-aviso-fondo: #fbf2de;
  --inv-peligro: #a13242;
  --inv-peligro-fondo: #fbeaec;
  --inv-info: #2f679f;
  --inv-info-fondo: #eaf1f9;
  --inv-neutral-fondo: var(--surface-soft, #f4f6f5);
  --inv-apagado: #4a5551;

  --inv-transicion: 160ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* ---------- Shell ---------- */
.invoicing-v2 .inv-shell { display: flex; flex-direction: column; gap: var(--inv-espacio-4); }

/* ---------- Navegación entre contextos ---------- */
.invoicing-v2 .inv-contextos {
  display: flex; gap: var(--inv-espacio-1);
  border-bottom: 1px solid var(--inv-linea);
  margin-bottom: var(--inv-espacio-2);
}
.invoicing-v2 .inv-contexto {
  appearance: none; background: none; border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--inv-espacio-3) var(--inv-espacio-4);
  font: inherit; font-weight: 550; color: var(--inv-tinta-suave);
  cursor: pointer; transition: color var(--inv-transicion), border-color var(--inv-transicion);
}
.invoicing-v2 .inv-contexto:hover { color: var(--inv-tinta); }
.invoicing-v2 .inv-contexto.is-activa { color: var(--inv-tinta); border-bottom-color: var(--accent, #126b5f); }
.invoicing-v2 .inv-contexto:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--inv-radio-sm); }

/* ---------- Cabecera ---------- */
.invoicing-v2 .inv-cabecera {
  display: grid; gap: var(--inv-espacio-3);
  grid-template-columns: 1fr auto;
  align-items: start;
}
.invoicing-v2 .inv-titulo { margin: 0; font-size: 1.5rem; letter-spacing: -0.01em; }
.invoicing-v2 .inv-subtitulo { margin: var(--inv-espacio-1) 0 0; color: var(--inv-tinta-suave); font-size: 0.9rem; }
.invoicing-v2 .inv-cabecera-acciones { display: flex; gap: var(--inv-espacio-2); align-items: center; }

.invoicing-v2 .inv-boton {
  appearance: none; font: inherit; font-weight: 550; cursor: pointer;
  border-radius: var(--inv-radio-sm); padding: var(--inv-espacio-2) var(--inv-espacio-4);
  border: 1px solid var(--inv-linea-fuerte); background: var(--inv-superficie); color: var(--inv-tinta);
  min-height: 38px;  /* objetivo de interacción cómodo sin inflar la densidad */
  transition: background var(--inv-transicion), border-color var(--inv-transicion);
}
.invoicing-v2 .inv-boton:hover { background: var(--inv-superficie-tenue); }
.invoicing-v2 .inv-boton:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Una sola acción primaria por pantalla. Si algún día hay dos, el diseño se rompió. */
.invoicing-v2 .inv-boton-primario {
  background: var(--accent, #126b5f); border-color: var(--accent, #126b5f); color: #fff;
}
.invoicing-v2 .inv-boton-primario:hover { background: var(--accent-dark, #0c5148); }
.invoicing-v2 .inv-boton-discreto { border-color: transparent; color: var(--inv-tinta-suave); }

/* ---------- Salud fiscal ---------- */
.invoicing-v2 .inv-salud {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: var(--inv-espacio-4);
  padding: var(--inv-espacio-3) var(--inv-espacio-4);
  background: var(--inv-superficie-tenue);
  border: 1px solid var(--inv-linea); border-radius: var(--inv-radio);
}
.invoicing-v2 .inv-salud-item { display: flex; align-items: center; gap: var(--inv-espacio-2); font-size: 0.85rem; }
.invoicing-v2 .inv-salud-etiqueta { color: var(--inv-tinta-suave); }
.invoicing-v2 .inv-salud-valor { font-weight: 600; color: var(--inv-tinta); }
.invoicing-v2 .inv-salud-punto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--inv-tinta-suave); flex: none;
}
.invoicing-v2 .inv-tono-exito .inv-salud-punto { background: var(--inv-exito); }
.invoicing-v2 .inv-tono-aviso .inv-salud-punto { background: var(--inv-aviso); }
.invoicing-v2 .inv-tono-peligro .inv-salud-punto { background: var(--inv-peligro); }
.invoicing-v2 .inv-tono-info .inv-salud-punto { background: var(--inv-info); }
.invoicing-v2 .inv-tono-apagado .inv-salud-punto { background: var(--inv-apagado); }
.invoicing-v2 .inv-tono-desconocido .inv-salud-punto { background: transparent; border: 1px solid var(--inv-linea-fuerte); }

/* PRODUCCIÓN se ve siempre, y se lee como responsabilidad, no como alarma. Una pantalla en rojo
   permanente deja de significar algo al tercer día. */
.invoicing-v2 .inv-tono-produccion .inv-salud-valor {
  color: var(--inv-peligro); letter-spacing: 0.02em;
}
.invoicing-v2 .inv-tono-produccion .inv-salud-punto { background: var(--inv-peligro); }

/* ---------- Indicadores ---------- */
.invoicing-v2 .inv-indicadores {
  display: grid; gap: var(--inv-espacio-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.invoicing-v2 .inv-indicador {
  appearance: none; font: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: var(--inv-espacio-1);
  padding: var(--inv-espacio-4);
  background: var(--inv-superficie); border: 1px solid var(--inv-linea);
  border-radius: var(--inv-radio);
  transition: border-color var(--inv-transicion), background var(--inv-transicion);
}
.invoicing-v2 .inv-indicador:hover { border-color: var(--inv-linea-fuerte); background: var(--inv-superficie-tenue); }
.invoicing-v2 .inv-indicador:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.invoicing-v2 .inv-indicador-etiqueta { font-size: 0.8rem; color: var(--inv-tinta-suave); }
.invoicing-v2 .inv-indicador-valor {
  font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.invoicing-v2 .inv-indicador-nota { font-size: 0.75rem; color: var(--inv-tinta-suave); }

/* "Requieren atención" pesa más que los demás porque decide a qué se dedica el día. Cuando vale
   cero deja de gritar: un indicador que siempre destaca no destaca nada. */
.invoicing-v2 .inv-indicador.is-prioritario {
  background: var(--inv-aviso-fondo); border-color: var(--amber-line, #ead39a);
}
.invoicing-v2 .inv-indicador.is-prioritario .inv-indicador-valor { color: var(--inv-aviso); }
.invoicing-v2 .inv-indicador.is-prioritario.is-en-calma {
  background: var(--inv-superficie); border-color: var(--inv-linea);
}
.invoicing-v2 .inv-indicador.is-prioritario.is-en-calma .inv-indicador-valor { color: var(--inv-tinta); }

/* ---------- Pestañas de estado ---------- */
.invoicing-v2 .inv-pestanas {
  display: flex; flex-wrap: wrap; gap: var(--inv-espacio-1);
  padding-bottom: var(--inv-espacio-1);
}
.invoicing-v2 .inv-pestana {
  appearance: none; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--inv-espacio-2);
  padding: var(--inv-espacio-2) var(--inv-espacio-3);
  background: none; border: 1px solid transparent; border-radius: var(--inv-radio-sm);
  color: var(--inv-tinta-suave); min-height: 34px;
  transition: background var(--inv-transicion), color var(--inv-transicion);
}
.invoicing-v2 .inv-pestana:hover { background: var(--inv-superficie-tenue); color: var(--inv-tinta); }
.invoicing-v2 .inv-pestana.is-activa {
  background: var(--accent-soft, #e5f4f0); color: var(--accent-dark, #0c5148); font-weight: 600;
}
.invoicing-v2 .inv-pestana:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.invoicing-v2 .inv-pestana-conteo {
  font-size: 0.75rem; font-variant-numeric: tabular-nums;
  padding: 1px var(--inv-espacio-2); border-radius: 999px;
  background: var(--inv-neutral-fondo); color: var(--inv-tinta-suave);
}
.invoicing-v2 .inv-pestana.is-activa .inv-pestana-conteo { background: rgba(255, 255, 255, 0.7); color: inherit; }

/* ---------- Zona de la tabla ---------- */
.invoicing-v2 .inv-tabla-zona {
  background: var(--inv-superficie); border: 1px solid var(--inv-linea);
  border-radius: var(--inv-radio); overflow: hidden;
}
.invoicing-v2 .inv-vacio { padding: var(--inv-espacio-6) var(--inv-espacio-4); text-align: center; }
.invoicing-v2 .inv-vacio-titulo { margin: 0; font-weight: 600; color: var(--inv-tinta); }
.invoicing-v2 .inv-vacio-detalle { margin: var(--inv-espacio-2) 0 0; color: var(--inv-tinta-suave); font-size: 0.9rem; }

/* ---------- Contextos ---------- */
.invoicing-v2 .inv-contexto-panel[hidden] { display: none; }
.invoicing-v2 .inv-contexto-panel { display: flex; flex-direction: column; gap: var(--inv-espacio-4); }

/* ---------- Distintivo de ambiente y aviso de contexto ----------
   SANDBOX se escribe, no se insinúa con un color. Un operador tiene que poder leer que lo que
   está viendo son pruebas, aunque no distinga tonos. */
.invoicing-v2 .inv-contexto { display: inline-flex; align-items: center; gap: var(--inv-espacio-2); }
.invoicing-v2 .inv-distintivo {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px var(--inv-espacio-2); border-radius: var(--inv-radio-sm);
  background: var(--inv-aviso-fondo); color: var(--inv-aviso);
  border: 1px solid var(--amber-line, #ead39a);
  flex: none; white-space: nowrap;
}
.invoicing-v2 .inv-aviso {
  display: flex; align-items: center; gap: var(--inv-espacio-3);
  padding: var(--inv-espacio-3) var(--inv-espacio-4);
  background: var(--inv-aviso-fondo); border: 1px solid var(--amber-line, #ead39a);
  border-radius: var(--inv-radio);
}
.invoicing-v2 .inv-aviso-texto { font-size: 0.85rem; color: var(--inv-aviso); }

/* ---------- Responsive: primero escritorio, después se reduce ---------- */
@media (max-width: 1024px) {
  .invoicing-v2 .inv-cabecera { grid-template-columns: 1fr; }
  .invoicing-v2 .inv-cabecera-acciones { justify-content: flex-start; }
}
@media (max-width: 768px) {
  .invoicing-v2 .inv-contextos { overflow-x: auto; }
  .invoicing-v2 .inv-contexto { white-space: nowrap; }
  .invoicing-v2 .inv-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoicing-v2 .inv-indicador-valor { font-size: 1.35rem; }
}
@media (max-width: 480px) {
  .invoicing-v2 .inv-indicadores { grid-template-columns: 1fr; }
  .invoicing-v2 .inv-salud { gap: var(--inv-espacio-3); }
}

@media (prefers-reduced-motion: reduce) {
  .invoicing-v2 .inv-contexto,
  .invoicing-v2 .inv-boton,
  .invoicing-v2 .inv-indicador,
  .invoicing-v2 .inv-pestana { transition: none; }
}

/* ---------- Barra: búsqueda y filtros ---------- */
.invoicing-v2 .inv-barra {
  display: flex; flex-wrap: wrap; gap: var(--inv-espacio-3); align-items: center;
  margin-bottom: var(--inv-espacio-3);
}
.invoicing-v2 .inv-busqueda {
  position: relative; flex: 1 1 320px; display: flex; align-items: center;
}
.invoicing-v2 .inv-busqueda-icono {
  position: absolute; left: var(--inv-espacio-3); color: var(--inv-tinta-suave);
  font-size: 1.1rem; pointer-events: none;
}
.invoicing-v2 .inv-busqueda-campo {
  width: 100%; font: inherit; color: var(--inv-tinta);
  padding: var(--inv-espacio-2) var(--inv-espacio-3) var(--inv-espacio-2) 34px;
  min-height: 38px;
  background: var(--inv-superficie); border: 1px solid var(--inv-linea-fuerte);
  border-radius: var(--inv-radio-sm);
}
.invoicing-v2 .inv-busqueda-campo::placeholder { color: var(--inv-tinta-suave); }
.invoicing-v2 .inv-busqueda-campo:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent, #126b5f); }
.invoicing-v2 .inv-barra-acciones { display: flex; gap: var(--inv-espacio-2); align-items: center; }
.invoicing-v2 .inv-filtros-toggle { display: inline-flex; align-items: center; gap: var(--inv-espacio-2); }
.invoicing-v2 .inv-filtros-conteo {
  font-size: 0.72rem; font-variant-numeric: tabular-nums; font-weight: 600;
  min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--accent, #126b5f); color: #fff;
}
.invoicing-v2 .inv-filtros {
  flex-basis: 100%; display: grid; gap: var(--inv-espacio-3);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  padding: var(--inv-espacio-4);
  background: var(--inv-superficie-tenue);
  border: 1px solid var(--inv-linea); border-radius: var(--inv-radio);
}
.invoicing-v2 .inv-filtro { display: flex; flex-direction: column; gap: var(--inv-espacio-1); }
.invoicing-v2 .inv-filtro-etiqueta { font-size: 0.75rem; color: var(--inv-tinta-suave); }
.invoicing-v2 .inv-filtro-control {
  font: inherit; padding: 6px var(--inv-espacio-2); min-height: 34px;
  background: var(--inv-superficie); color: var(--inv-tinta);
  border: 1px solid var(--inv-linea-fuerte); border-radius: var(--inv-radio-sm);
}
.invoicing-v2 .inv-filtro-control:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.invoicing-v2 .inv-conteo {
  margin: 0 0 var(--inv-espacio-2); font-size: 0.8rem; color: var(--inv-tinta-suave);
  font-variant-numeric: tabular-nums;
}

/* ---------- Tabla ----------
   Sin líneas verticales y con una sola horizontal por fila: la cuadrícula completa compite con
   los datos y hace que todo pese lo mismo. */
.invoicing-v2 .inv-tabla-scroll { overflow-x: auto; }
.invoicing-v2 .inv-tabla {
  width: 100%; border-collapse: collapse; font-size: 0.88rem;
}
.invoicing-v2 .inv-tabla thead th {
  text-align: left; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--inv-tinta-suave);
  padding: var(--inv-espacio-3) var(--inv-espacio-4);
  border-bottom: 1px solid var(--inv-linea-fuerte);
  white-space: nowrap; background: var(--inv-superficie-tenue);
}
.invoicing-v2 .inv-tabla th.is-numerica,
.invoicing-v2 .inv-tabla td.is-numerica { text-align: right; }
.invoicing-v2 .inv-tabla tbody td {
  padding: var(--inv-espacio-3) var(--inv-espacio-4);
  border-bottom: 1px solid var(--inv-linea);
  vertical-align: middle;
}
.invoicing-v2 .inv-fila { cursor: pointer; transition: background var(--inv-transicion); }
.invoicing-v2 .inv-fila:hover { background: var(--inv-superficie-tenue); }
.invoicing-v2 .inv-fila:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.invoicing-v2 .inv-tabla tbody tr:last-child td { border-bottom: 0; }

.invoicing-v2 .inv-celda-folio { font-weight: 600; white-space: nowrap; }
.invoicing-v2 .inv-celda-cliente { display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.invoicing-v2 .inv-cliente-nombre {
  font-weight: 500; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.invoicing-v2 .inv-cliente-rfc { font-size: 0.75rem; color: var(--inv-tinta-suave); }
.invoicing-v2 .inv-celda-origen,
.invoicing-v2 .inv-celda-fecha { color: var(--inv-tinta-suave); white-space: nowrap; }
/* Cifras tabulares: sin esto las columnas de importes no se pueden comparar de un vistazo. */
.invoicing-v2 .inv-celda-total { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.invoicing-v2 .inv-vacio-celda { color: var(--inv-tinta-suave); }

.invoicing-v2 .inv-uuid, .invoicing-v2 .inv-uuid-completo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem; background: none; border: 0; padding: 2px 4px;
  color: var(--inv-tinta-suave); cursor: pointer; border-radius: 4px;
}
.invoicing-v2 .inv-uuid:hover, .invoicing-v2 .inv-uuid-completo:hover {
  background: var(--inv-neutral-fondo); color: var(--inv-tinta);
}
.invoicing-v2 .inv-uuid:focus-visible, .invoicing-v2 .inv-uuid-completo:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}

/* ---------- Insignias de estado ----------
   El texto siempre está; el color solo acompaña. */
.invoicing-v2 .inv-insignia {
  display: inline-block; white-space: nowrap;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 3px var(--inv-espacio-2); border-radius: var(--inv-radio-sm);
  border: 1px solid transparent;
}
.invoicing-v2 .inv-insignia-neutral  { background: var(--inv-neutral-fondo); color: var(--inv-tinta-suave); border-color: var(--inv-linea); }
.invoicing-v2 .inv-insignia-info     { background: var(--inv-info-fondo); color: var(--inv-info); border-color: #cfe0f0; }
.invoicing-v2 .inv-insignia-exito    { background: var(--inv-exito-fondo); color: var(--inv-exito); border-color: #bfe0d0; }
.invoicing-v2 .inv-insignia-aviso    { background: var(--inv-aviso-fondo); color: var(--inv-aviso); border-color: var(--amber-line, #ead39a); }
.invoicing-v2 .inv-insignia-peligro  { background: var(--inv-peligro-fondo); color: var(--inv-peligro); border-color: #edc9cf; }
.invoicing-v2 .inv-insignia-especial { background: var(--inv-neutral-fondo); color: var(--inv-info); border-color: #cfe0f0; }
.invoicing-v2 .inv-insignia-apagado  { background: var(--inv-neutral-fondo); color: var(--inv-apagado); border-color: var(--inv-linea-fuerte); }
.invoicing-v2 .inv-insignia.is-activa::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-right: 6px; vertical-align: 1px;
  animation: inv-latido 1.6s ease-in-out infinite;
}
@keyframes inv-latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- Acciones ---------- */
.invoicing-v2 .inv-acciones { display: flex; gap: var(--inv-espacio-1); justify-content: flex-end; align-items: center; }
.invoicing-v2 .inv-accion {
  appearance: none; font: inherit; font-size: 0.8rem; cursor: pointer; white-space: nowrap;
  padding: 5px var(--inv-espacio-3); min-height: 30px;
  border: 1px solid var(--inv-linea-fuerte); border-radius: var(--inv-radio-sm);
  background: var(--inv-superficie); color: var(--inv-tinta);
}
.invoicing-v2 .inv-accion:hover:not(:disabled) { background: var(--inv-superficie-tenue); }
.invoicing-v2 .inv-accion:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.invoicing-v2 .inv-accion-primaria {
  background: var(--accent, #126b5f); border-color: var(--accent, #126b5f); color: #fff; font-weight: 550;
}
.invoicing-v2 .inv-accion-primaria:hover:not(:disabled) { background: var(--accent-dark, #0c5148); }
/* Deshabilitado se ve deshabilitado, pero legible: el motivo va en title y en el drawer. */
.invoicing-v2 .inv-accion:disabled { opacity: 0.45; cursor: not-allowed; }
.invoicing-v2 .inv-accion-mas { font-weight: 700; letter-spacing: 1px; padding: 5px var(--inv-espacio-2); }
.invoicing-v2 .inv-accion-motivo {
  margin: 0; font-size: 0.75rem; color: var(--inv-tinta-suave); flex-basis: 100%;
}

/* ---------- Lista móvil ----------
   Ocho columnas en 390 px no se comprimen: se convierten en otra cosa. */
.invoicing-v2 .inv-lista { display: none; flex-direction: column; gap: var(--inv-espacio-3); padding: var(--inv-espacio-3); }
.invoicing-v2 .inv-tarjeta {
  display: flex; flex-direction: column; gap: var(--inv-espacio-2);
  padding: var(--inv-espacio-4);
  background: var(--inv-superficie); border: 1px solid var(--inv-linea); border-radius: var(--inv-radio);
}
.invoicing-v2 .inv-tarjeta:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.invoicing-v2 .inv-tarjeta-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--inv-espacio-2); }
.invoicing-v2 .inv-tarjeta-folio { font-size: 1rem; }
.invoicing-v2 .inv-tarjeta-cliente { color: var(--inv-tinta); }
.invoicing-v2 .inv-tarjeta-meta { display: flex; justify-content: space-between; align-items: baseline; color: var(--inv-tinta-suave); font-size: 0.85rem; }
.invoicing-v2 .inv-tarjeta-total { font-size: 1.1rem; color: var(--inv-tinta); font-variant-numeric: tabular-nums; }
.invoicing-v2 .inv-tarjeta-uuid { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.75rem; color: var(--inv-tinta-suave); }
.invoicing-v2 .inv-tarjeta-ver {
  appearance: none; background: none; border: 0; padding: var(--inv-espacio-2) 0 0;
  font: inherit; font-size: 0.85rem; font-weight: 550; color: var(--accent-dark, #0c5148);
  text-align: left; cursor: pointer; min-height: 38px;
}
.invoicing-v2 .inv-tarjeta-ver:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--inv-radio-sm); }

/* ---------- Detalle lateral ---------- */
.invoicing-v2 .inv-drawer-host[hidden] { display: none; }
.invoicing-v2 .inv-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw);
  z-index: 40; display: flex; flex-direction: column;
  background: var(--inv-superficie); border-left: 1px solid var(--inv-linea-fuerte);
  box-shadow: var(--shadow, 0 18px 48px rgba(20, 32, 28, 0.14));
  animation: inv-entrar 180ms cubic-bezier(0.2, 0, 0.2, 1);
}
@keyframes inv-entrar { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.invoicing-v2 .inv-drawer:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.invoicing-v2 .inv-drawer-cab {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--inv-espacio-3);
  padding: var(--inv-espacio-5) var(--inv-espacio-5) var(--inv-espacio-4);
  border-bottom: 1px solid var(--inv-linea);
}
.invoicing-v2 .inv-drawer-ident { display: flex; flex-direction: column; gap: var(--inv-espacio-2); align-items: flex-start; }
.invoicing-v2 .inv-drawer-folio { margin: 0; font-size: 1.25rem; letter-spacing: -0.01em; }
.invoicing-v2 .inv-drawer-cerrar {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--inv-tinta-suave);
  width: 38px; height: 38px; border-radius: var(--inv-radio-sm);
}
.invoicing-v2 .inv-drawer-cerrar:hover { background: var(--inv-superficie-tenue); color: var(--inv-tinta); }
.invoicing-v2 .inv-drawer-cerrar:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.invoicing-v2 .inv-drawer-cuerpo {
  flex: 1; overflow-y: auto;
  padding: var(--inv-espacio-5); display: flex; flex-direction: column; gap: var(--inv-espacio-5);
}
.invoicing-v2 .inv-datos { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--inv-espacio-2) var(--inv-espacio-4); }
.invoicing-v2 .inv-dato { display: contents; }
.invoicing-v2 .inv-dato-etiqueta { font-size: 0.8rem; color: var(--inv-tinta-suave); }
.invoicing-v2 .inv-dato-valor { margin: 0; font-size: 0.88rem; word-break: break-word; }
.invoicing-v2 .inv-datos-tecnicos .inv-dato-valor {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.76rem;
}
.invoicing-v2 .inv-uuid-caja { display: flex; flex-direction: column; gap: var(--inv-espacio-1); align-items: flex-start; }
.invoicing-v2 .inv-uuid-completo { font-size: 0.82rem; word-break: break-all; text-align: left; }

.invoicing-v2 .inv-incidencia {
  padding: var(--inv-espacio-4); border-radius: var(--inv-radio);
  background: var(--inv-aviso-fondo); border: 1px solid var(--amber-line, #ead39a);
}
.invoicing-v2 .inv-incidencia-titulo { margin: 0 0 var(--inv-espacio-2); font-weight: 600; color: var(--inv-aviso); }
.invoicing-v2 .inv-incidencia-cuerpo { margin: 0 0 var(--inv-espacio-2); font-size: 0.88rem; }
.invoicing-v2 .inv-incidencia-cierre { margin: 0; font-size: 0.8rem; color: var(--inv-tinta-suave); }

.invoicing-v2 .inv-drawer-acciones { display: flex; flex-wrap: wrap; gap: var(--inv-espacio-2); }
.invoicing-v2 .inv-drawer-seccion { display: flex; flex-direction: column; gap: var(--inv-espacio-3); }
.invoicing-v2 .inv-drawer-titulo { margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--inv-tinta-suave); }

.invoicing-v2 .inv-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--inv-espacio-4); border-left: 2px solid var(--inv-linea); display: flex; flex-direction: column; gap: var(--inv-espacio-3); }
.invoicing-v2 .inv-hito { position: relative; display: flex; justify-content: space-between; gap: var(--inv-espacio-3); font-size: 0.85rem; }
.invoicing-v2 .inv-hito::before {
  content: ""; position: absolute; left: calc(var(--inv-espacio-4) * -1 - 5px); top: 6px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--inv-linea-fuerte);
}
.invoicing-v2 .inv-hito-fecha { color: var(--inv-tinta-suave); font-size: 0.78rem; white-space: nowrap; }

.invoicing-v2 .inv-tecnico { border-top: 1px solid var(--inv-linea); padding-top: var(--inv-espacio-4); }
.invoicing-v2 .inv-tecnico summary { cursor: pointer; font-size: 0.85rem; color: var(--inv-tinta-suave); }
.invoicing-v2 .inv-tecnico summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--inv-radio-sm); }
.invoicing-v2 .inv-tecnico[open] summary { margin-bottom: var(--inv-espacio-3); color: var(--inv-tinta); }

/* ---------- Responsive: la tabla cede su sitio a las tarjetas ---------- */
@media (max-width: 768px) {
  .invoicing-v2 .inv-tabla-scroll { display: none; }
  .invoicing-v2 .inv-lista { display: flex; }
  .invoicing-v2 .inv-barra-acciones { flex: 1 1 100%; }
  .invoicing-v2 .inv-drawer { width: 100vw; }
  .invoicing-v2 .inv-filtros { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .invoicing-v2 .inv-filtros { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .invoicing-v2 .inv-drawer { animation: none; }
  .invoicing-v2 .inv-insignia.is-activa::before { animation: none; }
  .invoicing-v2 .inv-fila { transition: none; }
}

/* ---------- Aviso de modo demostración ----------
   Permanente y a la vista: un dato de ejemplo confundido con uno real es peor que no enseñar nada. */
.invoicing-v2 .inv-demo-aviso {
  display: flex; align-items: center; gap: var(--inv-espacio-3);
  padding: var(--inv-espacio-3) var(--inv-espacio-4);
  background: var(--inv-aviso-fondo); border: 1px solid var(--amber-line, #ead39a);
  border-radius: var(--inv-radio); font-size: 0.85rem; color: var(--inv-aviso);
}

/* ==============================================================================================
   FACTURACIÓN V2 — PASO DE SIMPLIFICACIÓN

   La pantalla anterior era correcta y estaba saturada: cuatro indicadores de salud permanentes,
   cuatro tarjetas de métricas con marco, siete pestañas, ocho columnas y, debajo, el borrador
   CFDI con sus pasos, los impuestos, el PAC y los certificados.

   Aquí no se añade nada. Se quita peso: menos bordes, menos fondos, más aire y una sola cosa
   dominante por zona. La complejidad sigue existiendo, detrás.
   ============================================================================================== */

/* ---------- Las tres vistas ----------
   El atributo lo pone app.js en tiempo de ejecución, no el HTML: el marcado de #invoices lo
   localizan otras pruebas por su texto literal y no puede cambiar. */
#invoices[data-inv-vista="lista"] .cfdi-prep-panel,
#invoices[data-inv-vista="lista"] #cfdiCsdSection,
#invoices[data-inv-vista="nueva"] #cfdiCsdSection,
#invoices[data-inv-vista="nueva"] .inv-contexto-panel,
#invoices[data-inv-vista="ajustes"] .inv-contexto-panel { display: none !important; }

/* Los paneles heredados NO se muestran en ninguna vista: lo que hace falta de ellos se ADOPTA
   -se mueve el nodo real- dentro del workspace V2. Lo que queda atrás es el envoltorio vacío. */
#invoices[data-inv-vista="nueva"] .cfdi-prep-panel,
#invoices[data-inv-vista="nueva"] #cfdiCsdSection,
#invoices[data-inv-vista="ajustes"] .cfdi-prep-panel { display: none !important; }
/* Un nodo adoptado deja de ser descendiente del panel oculto, así que se ve con normalidad. */
#invoices .inv-ws-zona > * { display: block !important; }

/* ---------- CSD fuera de su contexto ----------
   "Administración de certificados CSD" salía también bajo Emisor, PAC y Series y folios.

   #cfdiCsdSection es hermano de #invoicingShell dentro de #invoices, y renderCfdiCsdSection() le
   quita el atributo hidden cada vez que llegan los certificados. Las reglas de arriba lo tapan en
   las vistas "lista" y "nueva", pero en "ajustes" nunca se escribió la suya: en las tres secciones
   que NO lo adoptan se quedaba ahí, visible, tras cada repintado async.

   El combinador HIJO es lo que hace esto correcto y no un parche:
   al adoptarlo en la sección Certificado CSD deja de ser hijo directo de #invoices -pasa a colgar
   de .inv-ws-zona- y la regla sencillamente no lo alcanza. Con un descendiente pasaría lo
   contrario: (0,2,1,0) le gana a #invoices .inv-ws-zona > * (0,1,1,0) aun con !important, y
   ocultaría el bloque justo en el único contexto donde debe verse. */
#invoices[data-inv-vista="ajustes"] > #cfdiCsdSection { display: none !important; }

/* ---------- Ancho de lectura ----------
   Una tabla de 2.500 px de ancho no se lee mejor: se lee peor. */
.invoicing-v2 { max-width: 1360px; margin-inline: auto; }

/* ---------- Cabecera ---------- */
.invoicing-v2 .inv-cabecera {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--inv-espacio-5);
  padding: var(--inv-espacio-6) 0 var(--inv-espacio-5);
  border: 0; background: none;
}
.invoicing-v2 .inv-titulo { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }
.invoicing-v2 .inv-subtitulo { font-size: 0.9rem; margin-top: var(--inv-espacio-1); }
.invoicing-v2 .inv-cabecera-acciones { position: relative; gap: var(--inv-espacio-3); }

.invoicing-v2 .inv-cabecera-secundaria { flex-direction: column; align-items: flex-start; gap: var(--inv-espacio-3); }
.invoicing-v2 .inv-volver {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.85rem; color: var(--inv-tinta-suave); min-height: 32px;
}
.invoicing-v2 .inv-volver:hover { color: var(--inv-tinta); }
.invoicing-v2 .inv-volver:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--inv-radio-sm); }

.invoicing-v2 .inv-boton-icono {
  padding: var(--inv-espacio-2) var(--inv-espacio-3); letter-spacing: 1px;
  border-color: transparent; color: var(--inv-tinta-suave);
}
.invoicing-v2 .inv-boton-icono:hover { border-color: var(--inv-linea-fuerte); color: var(--inv-tinta); }

/* ---------- Menú ---------- */
.invoicing-v2 .inv-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 200px; padding: var(--inv-espacio-1);
  background: var(--inv-superficie); border: 1px solid var(--inv-linea);
  border-radius: var(--inv-radio); box-shadow: var(--shadow-card, 0 8px 24px rgba(20,32,28,.08));
}
.invoicing-v2 .inv-menu-opcion {
  display: flex; justify-content: space-between; align-items: center; gap: var(--inv-espacio-3);
  width: 100%; text-align: left; appearance: none; background: none; border: 0;
  padding: var(--inv-espacio-2) var(--inv-espacio-3); border-radius: var(--inv-radio-sm);
  font: inherit; font-size: 0.88rem; color: var(--inv-tinta); cursor: pointer; min-height: 36px;
}
.invoicing-v2 .inv-menu-opcion:hover { background: var(--inv-superficie-tenue); }
.invoicing-v2 .inv-menu-opcion:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Estado fiscal: de barra permanente a control discreto ---------- */
.invoicing-v2 .inv-chip {
  display: inline-flex; align-items: center; gap: var(--inv-espacio-2);
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: var(--inv-espacio-2) var(--inv-espacio-2);
  font: inherit; font-size: 0.82rem; color: var(--inv-tinta-suave);
  border-radius: var(--inv-radio-sm); min-height: 34px;
}
.invoicing-v2 .inv-chip:hover { color: var(--inv-tinta); background: var(--inv-superficie-tenue); }
.invoicing-v2 .inv-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.invoicing-v2 .inv-chip-punto {
  width: 6px; height: 6px; border-radius: 50%; background: var(--inv-tinta-suave); flex: none;
}
/* Solo se tiñe cuando hay algo que impide operar. */
.invoicing-v2 .inv-chip.is-alerta { color: var(--inv-aviso); }
.invoicing-v2 .inv-chip.is-alerta .inv-chip-punto { background: var(--inv-aviso); }

.invoicing-v2 .inv-estado-panel {
  padding: var(--inv-espacio-5) 0;
  border-top: 1px solid var(--inv-linea); border-bottom: 1px solid var(--inv-linea);
  margin-bottom: var(--inv-espacio-5);
}
.invoicing-v2 .inv-estado-titulo {
  margin: 0 0 var(--inv-espacio-4); font-size: 0.8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--inv-tinta-suave);
}
.invoicing-v2 .inv-dato-nota { display: block; font-size: 0.78rem; color: var(--inv-tinta-suave); margin-top: 2px; }

/* ---------- Métricas: banda, no tarjetas ----------
   Sin marco, sin fondo y sin sombra. El número y su etiqueta bastan; el marco solo competía
   con la tabla, que es lo que de verdad importa. */
.invoicing-v2 .inv-metricas {
  display: flex; flex-wrap: wrap; gap: var(--inv-espacio-6);
  padding: 0 0 var(--inv-espacio-6);
  border-bottom: 1px solid var(--inv-linea);
  margin-bottom: var(--inv-espacio-5);
}
.invoicing-v2 .inv-metrica {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 2px; min-width: 120px;
}
.invoicing-v2 .inv-metrica:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--inv-radio-sm); }
.invoicing-v2 .inv-metrica-valor {
  font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; color: var(--inv-tinta);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.invoicing-v2 .inv-metrica-etiqueta { font-size: 0.8rem; color: var(--inv-tinta-suave); }
.invoicing-v2 .inv-metrica:hover .inv-metrica-etiqueta { color: var(--inv-tinta); }
.invoicing-v2 .inv-metrica.is-alerta .inv-metrica-valor { color: var(--inv-aviso); }

/* ---------- Pestañas ---------- */
.invoicing-v2 .inv-pestanas { position: relative; gap: var(--inv-espacio-2); margin-bottom: var(--inv-espacio-4); }
.invoicing-v2 .inv-pestana { padding: var(--inv-espacio-2) 0; border: 0; border-radius: 0; background: none; }
.invoicing-v2 .inv-pestana + .inv-pestana { margin-left: var(--inv-espacio-5); }
.invoicing-v2 .inv-pestana:hover { background: none; color: var(--inv-tinta); }
.invoicing-v2 .inv-pestana.is-activa {
  background: none; color: var(--inv-tinta); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent, #126b5f);
}
.invoicing-v2 .inv-pestana-conteo { background: none; padding: 0 0 0 2px; font-size: 0.78rem; }
.invoicing-v2 .inv-pestana.is-activa .inv-pestana-conteo { background: none; }
.invoicing-v2 .inv-menu-pestanas { top: calc(100% + 2px); left: auto; right: 0; }

/* ---------- Barra de búsqueda: una sola fila ---------- */
.invoicing-v2 .inv-barra { gap: var(--inv-espacio-3); margin-bottom: var(--inv-espacio-4); }
.invoicing-v2 .inv-busqueda-campo { background: var(--inv-superficie-tenue); border-color: transparent; }
.invoicing-v2 .inv-busqueda-campo:hover { border-color: var(--inv-linea); }
.invoicing-v2 .inv-busqueda-campo:focus-visible { background: var(--inv-superficie); }
.invoicing-v2 .inv-filtros { background: none; border: 0; border-top: 1px solid var(--inv-linea); border-radius: 0; padding: var(--inv-espacio-4) 0 0; }
.invoicing-v2 .inv-conteo { margin-bottom: var(--inv-espacio-3); }

/* ---------- Tabla: menos rejilla, más aire ---------- */
.invoicing-v2 .inv-tabla-zona { border: 0; border-radius: 0; background: none; }
.invoicing-v2 .inv-tabla thead th {
  background: none; border-bottom: 1px solid var(--inv-linea-fuerte);
  padding: 0 var(--inv-espacio-4) var(--inv-espacio-3);
  font-size: 0.72rem;
}
.invoicing-v2 .inv-tabla thead th:first-child,
.invoicing-v2 .inv-tabla tbody td:first-child { padding-left: 0; }
.invoicing-v2 .inv-tabla thead th:last-child,
.invoicing-v2 .inv-tabla tbody td:last-child { padding-right: 0; text-align: right; }
.invoicing-v2 .inv-tabla tbody td {
  padding: var(--inv-espacio-4); border-bottom: 1px solid var(--inv-linea);
}
.invoicing-v2 .inv-celda-folio { font-weight: 500; color: var(--inv-tinta-suave); }
.invoicing-v2 .inv-cliente-nombre { font-weight: 500; max-width: 34ch; }
.invoicing-v2 .inv-celda-total { font-weight: 500; }
.invoicing-v2 .inv-acciones { gap: var(--inv-espacio-2); }
/* La acción secundaria solo aparece al posarse o al enfocar: en reposo, la fila descansa. */
.invoicing-v2 .inv-accion-mas { opacity: 0; transition: opacity 120ms ease; }
.invoicing-v2 .inv-fila:hover .inv-accion-mas,
.invoicing-v2 .inv-fila:focus-within .inv-accion-mas { opacity: 1; }

/* ---------- Insignias: el texto manda, el color acompaña ---------- */
.invoicing-v2 .inv-insignia {
  background: none; border-color: transparent; padding: 2px 0; font-weight: 500;
  font-size: 0.82rem;
}
.invoicing-v2 .inv-insignia-neutral  { color: var(--inv-tinta-suave); }
.invoicing-v2 .inv-insignia-info     { color: var(--inv-info); }
.invoicing-v2 .inv-insignia-exito    { color: var(--inv-exito); }
.invoicing-v2 .inv-insignia-aviso    { color: var(--inv-aviso); font-weight: 600; }
.invoicing-v2 .inv-insignia-peligro  { color: var(--inv-peligro); font-weight: 600; }
.invoicing-v2 .inv-insignia-especial { color: var(--inv-info); }
.invoicing-v2 .inv-insignia-apagado  { color: var(--inv-apagado); }

/* ---------- Contextos: pestañas de texto, no barra ---------- */
.invoicing-v2 .inv-contextos { border-bottom: 0; margin-bottom: 0; gap: var(--inv-espacio-4); padding-top: var(--inv-espacio-4); }
.invoicing-v2 .inv-contexto { padding: var(--inv-espacio-2) 0; font-size: 0.9rem; }
.invoicing-v2 .inv-contexto.is-activa { border-bottom-color: transparent; font-weight: 600; }

/* ---------- Tarjetas móviles: sin marco ---------- */
.invoicing-v2 .inv-lista { padding: 0; gap: 0; }
.invoicing-v2 .inv-tarjeta {
  border: 0; border-bottom: 1px solid var(--inv-linea); border-radius: 0;
  padding: var(--inv-espacio-4) 0;
}

@media (max-width: 768px) {
  .invoicing-v2 .inv-cabecera { flex-direction: column; padding-top: var(--inv-espacio-5); }
  .invoicing-v2 .inv-metricas { gap: var(--inv-espacio-5); padding-bottom: var(--inv-espacio-5); }
  .invoicing-v2 .inv-metrica { min-width: 44%; }
  .invoicing-v2 .inv-metrica-valor { font-size: 1.4rem; }
  .invoicing-v2 .inv-pestana + .inv-pestana { margin-left: var(--inv-espacio-4); }

  /* Medido a 390 sobre el despliegue, barriendo TODOS los controles de la superficie: pestañas 37,
     contextos 37, chip de entorno 34, acciones de cabecera 39, acción de tarjeta 38. Por debajo de
     44 px el dedo falla, y fallar en esta pantalla significa abrir la factura equivocada.

     La regla es una sola y cubre la superficie entera, porque la lista puntual ya se quedó corta
     una vez: al arreglar solo lo que se había mirado, seis controles quedaron fuera.

     Solo crece el área que responde al toque: no cambia el tamaño del texto ni la composición, y
     no afecta a escritorio.

     La clase va repetida a propósito. Los altos que hay que superar los ponen reglas del tipo
     `.invoicing-v2 .inv-pestana` —dos clases—; un selector de una clase más un elemento pierde
     contra ellas y la regla no llega a aplicarse: comprobado en el despliegue, las pestañas
     seguían en 37 px. Repetir la clase iguala ese peso y le suma el elemento, sin recurrir a
     !important ni tener que enumerar cada control. */
  .invoicing-v2.invoicing-v2 button,
  .invoicing-v2.invoicing-v2 a[href],
  .invoicing-v2.invoicing-v2 [role="menuitem"] { min-height: 44px; }
  /* La excepción era para TODOS los controles adoptados, con el argumento de que esos formularios
     fiscales tienen su propia composición. Medido en el despliegue a 360 y 390, eso dejaba
     "Guardar configuración" del panel del PAC en 21 px de alto: no es composición, es un blanco
     imposible de acertar con el pulgar. Los botones vuelven al mínimo de 44.

     El enlace sí conserva su alto: dentro de esos paneles va incrustado en un párrafo, y estirarlo
     a 44 px rompería la línea de texto en la que vive. */
  .invoicing-v2.invoicing-v2 .inv-ws-zona a[href] { min-height: 0; }
}

/* ==============================================================================================
   FACTURACIÓN V2 — SHELL Y WORKSPACES

   El defecto que corrige: encima del módulo se veían a la vez el epígrafe "Operación integral",
   el título del ERP, su descripción general, un buscador global grande, el rol, el correo, la
   empresa, el botón de salir, el de exportar y una franja "Sistema interno". Y debajo, otra vez,
   la cabecera de Facturación.

   Aquí no se toca el shell del resto del ERP: se repliega SOLO en este módulo, marcado por
   `body[data-modulo="invoices"]`, que pone app.js al activar la pestaña.
   ============================================================================================== */

/* ---------- La barra superior se repliega en Facturación ---------- */
body[data-modulo="invoices"] .topbar .eyebrow,
body[data-modulo="invoices"] .topbar .page-subtitle,
/* Solo el modo conectado: ocultar la franja entera dejaria sin aviso un error real. */
body[data-modulo="invoices"] #systemModeBanner.supabase-mode { display: none; }

/* La barra queda como lo que debe ser: una franja de cuenta y utilidades, no una portada. */
body[data-modulo="invoices"] .topbar {
  min-height: 56px; padding-top: var(--inv-espacio-3); padding-bottom: var(--inv-espacio-3);
  align-items: center;
}
/* El buscador global compite con el de facturas: aquí cede el sitio. */
body[data-modulo="invoices"] .topbar-search { max-width: 220px; }
body[data-modulo="invoices"] .topbar-search span { display: none; }
body[data-modulo="invoices"] .role-box span { display: none; }
body[data-modulo="invoices"] .topbar-actions { gap: var(--inv-espacio-3); align-items: center; }

/* Entorno: una marca pequeña, no una franja de ancho completo. */
body[data-modulo="invoices"] .session-chip {
  font-size: 0.75rem; padding: 2px var(--inv-espacio-2); border-radius: var(--inv-radio-sm);
}

/* ---------- Workspaces ---------- */
.invoicing-v2 .inv-ws { display: flex; flex-direction: column; gap: var(--inv-espacio-5); }
.invoicing-v2 .inv-ws-cab { display: flex; flex-direction: column; gap: var(--inv-espacio-3);
  padding-top: var(--inv-espacio-5); }
.invoicing-v2 .inv-ws-cab-fila { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--inv-espacio-4); }
.invoicing-v2 .inv-ws-titulo { margin: 0; font-size: 1.05rem; font-weight: 600; }
.invoicing-v2 .inv-ws-ayuda { margin: var(--inv-espacio-1) 0 var(--inv-espacio-4); font-size: 0.88rem; color: var(--inv-tinta-suave); }
.invoicing-v2 .inv-ws-cuerpo { min-height: 240px; }
.invoicing-v2 .inv-ws-seccion { max-width: 780px; }
.invoicing-v2 .inv-ws-vacio { color: var(--inv-tinta-suave); font-size: 0.9rem; }

/* ---------- Pasos ---------- */
.invoicing-v2 .inv-pasos {
  list-style: none; margin: 0; padding: 0 0 var(--inv-espacio-5);
  display: flex; flex-wrap: wrap; gap: var(--inv-espacio-6);
  border-bottom: 1px solid var(--inv-linea);
}
.invoicing-v2 .inv-paso { display: flex; align-items: center; gap: var(--inv-espacio-2); color: var(--inv-tinta-suave); font-size: 0.88rem; }
.invoicing-v2 .inv-paso-numero {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600;
  border: 1px solid var(--inv-linea-fuerte); background: var(--inv-superficie);
}
.invoicing-v2 .inv-paso.is-activo { color: var(--inv-tinta); font-weight: 600; }
.invoicing-v2 .inv-paso.is-activo .inv-paso-numero {
  background: var(--accent, #126b5f); border-color: var(--accent, #126b5f); color: #fff;
}
.invoicing-v2 .inv-paso.is-hecho .inv-paso-numero {
  border-color: var(--inv-exito); color: var(--inv-exito);
}

/* ---------- Barra superior: una sola pastilla de cuenta ------------------------------------
   Rol, correo, empresa y "Salir" dejan de estar permanentemente a la vista y pasan al desplegable.
   Son los controles REALES, movidos por app.js; aquí solo se les da sitio y forma. */
body[data-modulo="invoices"] .inv-cuenta { position: relative; }
body[data-modulo="invoices"] .inv-cuenta-boton {
  display: inline-flex; align-items: center; gap: var(--inv-espacio-2);
  min-height: 36px; padding: 0 var(--inv-espacio-3);
  border: 1px solid var(--inv-linea-fuerte); border-radius: var(--inv-radio-sm);
  background: var(--inv-superficie); color: var(--inv-tinta);
  font: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer;
}
body[data-modulo="invoices"] .inv-cuenta-boton::after { content: "▾"; font-size: 0.7rem; opacity: 0.6; }
body[data-modulo="invoices"] .inv-cuenta-boton:focus-visible { outline: none; box-shadow: var(--focus-ring); }
body[data-modulo="invoices"] .inv-cuenta-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 240px;
  display: flex; flex-direction: column; gap: var(--inv-espacio-3);
  padding: var(--inv-espacio-4);
  border: 1px solid var(--inv-linea); border-radius: var(--inv-radio-md);
  background: var(--inv-superficie); box-shadow: var(--inv-sombra-menu, 0 8px 24px rgba(0,0,0,.12));
}
body[data-modulo="invoices"] .inv-cuenta-menu .session-chip { align-self: flex-start; }
body[data-modulo="invoices"] .inv-cuenta-menu .role-box { display: flex; flex-direction: column; gap: 4px; }
body[data-modulo="invoices"] .inv-cuenta-menu .role-box span { display: block; font-size: 0.78rem; color: var(--inv-tinta-suave); }
body[data-modulo="invoices"] .inv-cuenta-menu #logoutBtn { width: 100%; }

/* "Exportar" es una acción de datos del ERP, no del encabezado de Facturación. */
body[data-modulo="invoices"] #exportDataBtn { display: none; }
/* El buscador global no compite con el de facturas: queda como control mínimo. */
body[data-modulo="invoices"] .topbar-search { max-width: 180px; }

/* ---------- Pie del workspace: una sola acción dominante ---------- */
.invoicing-v2 .inv-ws-pie {
  display: flex; justify-content: space-between; align-items: center; gap: var(--inv-espacio-4);
  padding-top: var(--inv-espacio-5); border-top: 1px solid var(--inv-linea);
}
.invoicing-v2 .inv-ws-pie-der { display: flex; gap: var(--inv-espacio-3); align-items: center; }

/* ---------- Resumen ---------- */
.invoicing-v2 .inv-resumen { margin: var(--inv-espacio-4) 0 0; max-width: 480px; }
.invoicing-v2 .inv-resumen-fila {
  display: flex; justify-content: space-between; gap: var(--inv-espacio-4);
  padding: var(--inv-espacio-2) 0; font-size: 0.9rem;
}
.invoicing-v2 .inv-resumen-fila dt { color: var(--inv-tinta-suave); }
.invoicing-v2 .inv-resumen-fila dd { margin: 0; font-variant-numeric: tabular-nums; }
.invoicing-v2 .inv-resumen-fila.is-total {
  border-top: 1px solid var(--inv-linea); margin-top: var(--inv-espacio-2);
  padding-top: var(--inv-espacio-3); font-size: 1rem; font-weight: 600;
}

/* ---------- Configuración fiscal ---------- */
.invoicing-v2 .inv-ajustes-layout {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--inv-espacio-6);
  align-items: start;
}
.invoicing-v2 .inv-ajustes-nav { display: flex; flex-direction: column; gap: 2px; }
.invoicing-v2 .inv-ajustes-item {
  appearance: none; background: none; border: 0; text-align: left; cursor: pointer;
  padding: var(--inv-espacio-2) var(--inv-espacio-3); border-radius: var(--inv-radio-sm);
  font: inherit; font-size: 0.9rem; color: var(--inv-tinta-suave); min-height: 36px;
}
.invoicing-v2 .inv-ajustes-item:hover { background: var(--inv-superficie-tenue); color: var(--inv-tinta); }
.invoicing-v2 .inv-ajustes-item.is-activa {
  background: var(--accent-soft, #e5f4f0); color: var(--accent-dark, #0c5148); font-weight: 600;
}
.invoicing-v2 .inv-ajustes-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.invoicing-v2 .inv-ajustes-panel { max-width: 720px; }

/* Los controles adoptados heredan el aire del workspace, no su marco antiguo. */
.invoicing-v2 .inv-ws-zona { margin-top: var(--inv-espacio-4); }
.invoicing-v2 .inv-ws-zona > .panel,
.invoicing-v2 .inv-ws-zona > .subpanel,
.invoicing-v2 .inv-ws-zona > section {
  border: 0; box-shadow: none; padding: 0; margin: 0; background: none;
}
/* El "Paso N -" de los títulos heredados sobra: el paso ya lo dice el stepper. */
.invoicing-v2 .inv-ws-zona .panel-header p { color: var(--inv-tinta-suave); font-size: 0.88rem; }

/* ---------- Un paso a la vez, de verdad ----------------------------------------------------
   El formulario heredado es UNO con sus propios "Paso 1/2/3" dentro. app.js marca cada bloque con
   data-inv-paso y el formulario con el paso en curso; aquí solo se decide qué se ve.

   Es ocultar, sí, y a propósito: los campos siguen dentro del <form>, que es lo que hace que el
   borrador se cree completo. Sacarlos del formulario para "no ocultar nada" los dejaría fuera de
   FormData, y eso ya dejaría de ser un problema de interfaz. */
.invoicing-v2 .inv-ws-zona #cfdiDraftForm > .cfdi-step-card { display: none; }
.invoicing-v2 .inv-ws-zona #cfdiDraftForm[data-inv-paso="1"] > .cfdi-step-card[data-inv-paso="1"],
.invoicing-v2 .inv-ws-zona #cfdiDraftForm[data-inv-paso="3"] > .cfdi-step-card[data-inv-paso="3"] {
  display: block;
}
/* El título "Paso 1 / Seleccionar venta" del bloque repetiría lo que ya dice el stepper. */
.invoicing-v2 .inv-ws-zona #cfdiDraftForm .cfdi-step-title { display: none; }
/* Una sola acción secundaria: "Guardar borrador" la ofrece V2 y acciona este mismo botón. */
.invoicing-v2 .inv-ws-zona [data-inv-legado="oculto"] { display: none; }

/* ---------- Los controles adoptados se ven como los de V2 ----------------------------------
   No cambia su lógica ni sus nombres: solo altura, borde, radio, foco y aire, para que no se note
   cuál venía del formulario antiguo. */
.invoicing-v2 .inv-ws-zona .form-grid { gap: var(--inv-espacio-4); }
.invoicing-v2 .inv-ws-zona label {
  display: flex; flex-direction: column; gap: var(--inv-espacio-2);
  font-size: 0.85rem; color: var(--inv-tinta-suave); font-weight: 500;
}
.invoicing-v2 .inv-ws-zona input,
.invoicing-v2 .inv-ws-zona select,
.invoicing-v2 .inv-ws-zona textarea {
  min-height: 40px; padding: 0 var(--inv-espacio-3);
  border: 1px solid var(--inv-linea-fuerte); border-radius: var(--inv-radio-sm);
  background: var(--inv-superficie); color: var(--inv-tinta);
  font: inherit; font-size: 0.92rem; width: 100%;
}
.invoicing-v2 .inv-ws-zona textarea { padding: var(--inv-espacio-3); min-height: 84px; }
.invoicing-v2 .inv-ws-zona input:focus-visible,
.invoicing-v2 .inv-ws-zona select:focus-visible,
.invoicing-v2 .inv-ws-zona textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.invoicing-v2 .inv-ws-zona input:disabled,
.invoicing-v2 .inv-ws-zona select:disabled,
.invoicing-v2 .inv-ws-zona input[readonly] {
  background: var(--inv-superficie-tenue); color: var(--inv-tinta-suave); cursor: not-allowed;
}
.invoicing-v2 .inv-ws-zona .section-hint,
.invoicing-v2 .inv-ws-zona .form-notice {
  font-size: 0.82rem; color: var(--inv-tinta-suave); margin: 0;
  border: 0; background: none; padding: 0;
}

/* ---------- Complementos: la superficie es V2, los paneles heredados quedan detrás -----------
   No se borran ni se desconectan: de ellos salen el formulario que se adopta y los botones que
   ejecutan "Preparar" y "Vista previa" con sus manejadores y sus guardas de siempre. Lo que el
   usuario ve es #invoicingComplementosSlot. */
#invoicingContextPagos > .order-layout { display: none; }
/* Salvo cuando el asistente tiene adoptado el formulario: entonces ese nodo vive dentro de V2. */
#invoicingContextPagos .inv-ws-zona #paymentForm { display: block; }

/* Un paso a la vez, igual que en Nueva factura. Los campos no salen del <form>. */
.invoicing-v2 .inv-ws-zona #paymentForm > label { display: none; }
.invoicing-v2 .inv-ws-zona #paymentForm[data-inv-paso="1"] > label[data-inv-paso="1"],
.invoicing-v2 .inv-ws-zona #paymentForm[data-inv-paso="2"] > label[data-inv-paso="2"] {
  display: flex;
}

/* La insignia de entorno acompaña al título; no es una alarma de ancho completo. */
.invoicing-v2 .inv-insignia-suave {
  margin-left: var(--inv-espacio-3); vertical-align: middle;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px var(--inv-espacio-2); border-radius: var(--inv-radio-sm);
  background: var(--inv-superficie-tenue); color: var(--inv-tinta-suave);
  border: 1px solid var(--inv-linea);
}

/* ---------- Certificado CSD: los archivos solo al cambiarlo ---------------------------------
   Antes se veían siempre .cer, .key y contraseña. En la vista normal eso invita a recargar un
   certificado que ya está bien. Se piden solo cuando alguien dice que quiere cambiarlo.
   No cambia nada de la carga ni del manejo de la contraseña: solo cuándo aparece el formulario. */
/* La regla NO puede depender de donde se adopte la seccion. Estaba anclada a .inv-ws-zona, y si
   la seccion se pinta fuera de esa zona -o se repinta tras cargar los datos- dejaba de aplicarse
   y los .cer/.key/contrasena quedaban a la vista. El dueño lo vio con certificado ya cargado.
   Ahora la condicion vive en la propia seccion: mientras no este en modo "cambiar", el formulario
   de carga no se ve, este donde este. */
#cfdiCsdSection:not([data-inv-csd="cambiar"]) #cfdiCsdForm { display: none; }
.invoicing-v2 .inv-csd-cambiar { margin-top: var(--inv-espacio-4); }

@media (max-width: 900px) {
  .invoicing-v2 .inv-ajustes-layout { grid-template-columns: 1fr; gap: var(--inv-espacio-4); }
  .invoicing-v2 .inv-ajustes-nav { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .invoicing-v2 .inv-pasos { gap: var(--inv-espacio-4); }
  .invoicing-v2 .inv-paso-titulo { display: none; }
  .invoicing-v2 .inv-paso.is-activo .inv-paso-titulo { display: inline; }
  .invoicing-v2 .inv-ws-pie { flex-direction: column-reverse; align-items: stretch; }
  .invoicing-v2 .inv-ws-pie-der { justify-content: flex-end; }
  /* Medido en el despliegue a 390 y 360: los controles heredados que se adoptan -los del panel
     del PAC- quedaban en 42 px. El resto de Facturación ya llega a 44; estos se quedaban cortos
     por los 40 px de la regla de arriba. Solo afecta al alto táctil, no al ancho ni al tipo. */
  .invoicing-v2 .inv-ws-zona input,
  .invoicing-v2 .inv-ws-zona select { min-height: 44px; }
}

/* Los paneles heredados de "Por facturar" ceden el sitio a la lista V2. */
#invoices[data-inv-vista="lista"] #invoicingContextPorFacturar > .panel,
#invoices[data-inv-vista="lista"] #invoicingContextPorFacturar > .order-layout { display: none; }

/* ==============================================================================================
   ERP V2 — ADMINISTRACIÓN Y COMPRAS

   El defecto medido en Administración: no tenía ningún conmutador y mostraba sus DOCE paneles a
   la vez, del editor de plantillas a la bitácora. Compras sí conmutaba; Administración no.

   Aquí no se mueve ningún panel. app.js marca cada uno con la sección a la que pertenece y estas
   reglas dejan ver solo la activa. Sus formularios, ids y manejadores siguen donde estaban.
   ============================================================================================== */

/* La cabecera heredada del módulo la sustituye la de V2. */
body[data-modulo="admin"] #admin > .section-heading,
body[data-modulo="orders"] #orders > .section-heading,
body[data-modulo="purchases"] #purchases > .section-heading { display: none; }

/* Una sección a la vez. Sin sección asignada un panel no se ve: si algo desaparece se nota y se
   corrige, que es preferible a que vuelva la saturación en silencio. */
#admin[data-erp-seccion-activa] [data-erp-seccion] { display: none; }
#admin[data-erp-seccion-activa="general"]     [data-erp-seccion="general"],
#admin[data-erp-seccion-activa="usuarios"]    [data-erp-seccion="usuarios"],
#admin[data-erp-seccion-activa="documentos"]  [data-erp-seccion="documentos"],
#admin[data-erp-seccion-activa="datos"]       [data-erp-seccion="datos"],
#admin[data-erp-seccion-activa="respaldos"]   [data-erp-seccion="respaldos"],
#admin[data-erp-seccion-activa="avanzado"]    [data-erp-seccion="avanzado"] { display: block; }

/* Los paneles de la sección activa se apilan bajo su título, no en rejilla de tarjetas: cuatro
   tarjetas pequeñas repartidas por 1400 px son el "espacio muerto" que había que evitar. */
#admin[data-erp-seccion-activa] > .content-grid { display: block; }
.erp-shell { display: block; }
.erp-layout { padding-top: var(--inv-espacio-5); }
.erp-panel { max-width: 960px; }
.erp-seccion-cab { padding-bottom: var(--inv-espacio-4); }
.erp-cab-acciones { display: flex; gap: var(--inv-espacio-3); align-items: center; }

/* Los paneles heredados pierden su marco propio dentro del área de contenido: el marco lo pone
   ya la sección, y dos marcos anidados es lo que hacía parecer esto un almacén de herramientas. */
#admin[data-erp-seccion-activa] [data-erp-seccion] {
  border: 0; box-shadow: none; background: none;
  padding: 0 0 var(--inv-espacio-6);
  margin: 0;
}
#admin[data-erp-seccion-activa] [data-erp-seccion] + [data-erp-seccion] {
  border-top: 1px solid var(--inv-linea);
  padding-top: var(--inv-espacio-6);
}

/* Navegación en móvil: en fila y desplazable, nunca una barra lateral dentro de otra. */
@media (max-width: 900px) {
  .erp-layout { grid-template-columns: 1fr; }
  .erp-nav {
    flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto; gap: var(--inv-espacio-2);
    padding-bottom: var(--inv-espacio-2);
  }
  .erp-nav .inv-ajustes-item { white-space: nowrap; min-height: 44px; }
  .erp-cab-acciones { flex-wrap: wrap; }
}

/* ---------- Compras: seis contextos en vez de nueve pestañas planas -------------------------
   El conmutador heredado sigue siendo el que manda; esta navegación solo lo agrupa. Las chips
   antiguas se ocultan para no tener dos navegaciones diciendo lo mismo con distinta forma. */
body[data-modulo="purchases"] #purchases > .purchase-view-tabs { display: none; }
.erp-contextos { display: flex; flex-wrap: wrap; gap: var(--inv-espacio-5);
  border-bottom: 1px solid var(--inv-linea); margin-bottom: var(--inv-espacio-5); }

/* "Vista de hoy" y "Compra sugerida" responden a la misma decisión -qué hay que comprar-, así que
   el contexto Resumen las enseña juntas. El conmutador heredado solo activa una vista y marca el
   resto con .is-hidden + [hidden]; se revela la otra por contexto, que sobrevive a sus repintados.
   Se necesita !important porque .is-hidden lo usa: no es un atajo, es la regla que hay que ganar. */
#purchases[data-erp-contexto="resumen"] [data-purchase-section~="sugeridas"] {
  display: block !important;
}

/* ---------- Compras: asistente de orden nueva ----------------------------------------------
   El formulario heredado tiene tres hijos que son, tal cual, los tres pasos: proveedor y fechas,
   la caja de línea con "Agregar a orden", y el pie con el total y el envío. app.js los marca y
   aquí se decide cuál se ve. Los campos no salen del <form>: fuera de él no llegarían a FormData
   y la orden se crearía incompleta. */
#purchases[data-erp-vista="nueva"] [data-purchase-section] { display: none !important; }
#purchases[data-erp-vista="nueva"] .erp-zona-orden { display: block; }

.erp-asistente .erp-zona #purchaseOrderForm > [data-erp-paso] { display: none; }
/* Las reglas que revelan llevan el MISMO prefijo que la que oculta, a propósito. Sin él pesan
   menos y no llegan a aplicarse: medido en el despliegue, no había ni un campo visible en los
   tres pasos aunque el reparto era correcto. Es el mismo fallo de cascada que ya apareció con los
   objetivos táctiles: que la regla esté escrita no basta, tiene que ganar. */
.erp-asistente .erp-zona #purchaseOrderForm[data-erp-paso="1"] > [data-erp-paso="1"],
.erp-asistente .erp-zona #purchaseOrderForm[data-erp-paso="2"] > [data-erp-paso="2"],
.erp-asistente .erp-zona #purchaseOrderForm[data-erp-paso="3"] > [data-erp-paso="3"] { display: block; }
/* Lo ya añadido se ve también al revisar: es justo lo que se está revisando.
   La caja de líneas vive DENTRO del bloque del paso 2, y un hijo de un padre oculto no se puede
   mostrar —medido: en el paso 3 salía el total pero ninguna línea—. Así que en el paso 3 se
   revela ese bloque y se apaga todo lo suyo menos las líneas: se ve lo pedido, no los campos
   para seguir pidiendo. */
.erp-asistente .erp-zona #purchaseOrderForm[data-erp-paso="3"] > [data-erp-paso="2"] { display: block; }
.erp-asistente .erp-zona #purchaseOrderForm[data-erp-paso="3"] > [data-erp-paso="2"] > * { display: none; }
.erp-asistente .erp-zona #purchaseOrderForm[data-erp-paso="3"] [data-erp-paso-extra="3"] { display: block; }
/* Una sola acción: "Crear orden" la ofrece V2 y acciona este mismo botón. */
.erp-asistente [data-erp-legado="oculto"] { display: none; }

/* Ancho según el dato, no un input de 1200 px para una cantidad. */
.erp-zona input[type="number"], .erp-zona input[type="date"] { max-width: 200px; }
.erp-zona textarea { max-width: 640px; }
.erp-aviso { font-size: 0.85rem; color: var(--inv-tinta-suave); margin: var(--inv-espacio-4) 0 0; }

/* ---------- Motor genérico de flujos ---------------------------------------------------------
   Una sola pareja de reglas para los cuatro flujos: recepción, compra manual, alta de proveedor y
   ticket. Antes cada asistente traía las suyas, y con ellas volvía el mismo fallo de cascada.

   El prefijo de la regla que revela es IDÉNTICO al de la que oculta, a propósito: si pesara menos
   no llegaría a aplicarse aunque estuviera escrita. Ya pasó tres veces en este proyecto. */
.erp-asistente .erp-zona [data-erp-flujo-paso] > [data-erp-flujo-hijo] { display: none; }
.erp-asistente .erp-zona [data-erp-flujo-paso="1"] > [data-erp-flujo-hijo~="1"],
.erp-asistente .erp-zona [data-erp-flujo-paso="2"] > [data-erp-flujo-hijo~="2"],
.erp-asistente .erp-zona [data-erp-flujo-paso="3"] > [data-erp-flujo-hijo~="3"] { display: block; }

/* Mientras hay un flujo abierto, el listado del módulo no comparte pantalla con él. */
#purchases[data-erp-flujo] [data-purchase-section] { display: none !important; }
/* Salvo el panel que el propio flujo ha adoptado. Recepción y ticket adoptan un panel que TAMBIÉN
   lleva data-purchase-section, así que la regla de arriba lo apagaba y el asistente salía vacío:
   medido en el despliegue, cero hijos visibles en todos sus pasos. Este selector pesa una clase
   más, y por eso gana el empate entre dos !important. */
#purchases[data-erp-flujo] .erp-zona [data-purchase-section] { display: block !important; }

/* ---------- Objetivos táctiles en los asistentes del ERP ------------------------------------
   Medido a 390 sobre el despliegue: 15 controles por debajo de 44 px entre Recepción y Compra
   manual —inputs y selects a 42, botones fantasma a 23—. La sesión anterior reportó "1" porque
   solo contó elementos <button>; inputs y selects se quedaron fuera de la medición.

   Aquí se levanta la exención que tienen los controles adoptados: en escritorio conservar su
   composición es razonable, pero con el dedo 23 px se falla, y fallar aquí significa confirmar
   una recepción o una compra equivocada. Solo crece el área que responde al toque. */
@media (max-width: 768px) {
  .invoicing-v2.invoicing-v2 .erp-zona button,
  .invoicing-v2.invoicing-v2 .erp-zona a[href],
  .invoicing-v2.invoicing-v2 .erp-zona input:not([type="checkbox"]):not([type="radio"]),
  .invoicing-v2.invoicing-v2 .erp-zona select,
  .invoicing-v2.invoicing-v2 .erp-zona textarea { min-height: 44px; }
}

/* ==============================================================================================
   ADMINISTRACIÓN — INTERIORES V2

   Usuarios y permisos entraba por la matriz completa del catálogo: decenas de filas para saber
   qué puede hacer una persona. Ahora se entra por la lista de colaboradores y los permisos viven
   en su detalle, agrupados por módulo y solo los concedidos.
   ============================================================================================== */

/* Cuando la sección tiene superficie propia, el panel heredado deja de ser la experiencia.
   No se borra ni se desconecta: sus manejadores y su editor siguen ahí para lo que ya hacen. */
#admin[data-erp-admin-propio="si"][data-erp-seccion-activa="usuarios"] [data-erp-seccion="usuarios"] {
  display: none;
}

.erp-busqueda {
  width: 100%; max-width: 420px; min-height: 40px;
  margin-bottom: var(--inv-espacio-4);
  padding: 0 var(--inv-espacio-3);
  border: 1px solid var(--inv-linea-fuerte); border-radius: var(--inv-radio-sm);
  background: var(--inv-superficie); color: var(--inv-tinta); font: inherit; font-size: 0.92rem;
}
.erp-busqueda:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Detalle del colaborador ---------- */
.erp-detalle { display: block; max-width: 720px; }
.erp-grupo-permisos { padding-top: var(--inv-espacio-5); }
.erp-grupo-permisos + .erp-grupo-permisos {
  margin-top: var(--inv-espacio-4); border-top: 1px solid var(--inv-linea);
}
.erp-grupo-titulo {
  margin: 0 0 var(--inv-espacio-3); font-size: 0.8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--inv-tinta-suave);
}
/* Sin cajas: los permisos son una lista, no doce tarjetas con borde. */
.erp-permisos { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--inv-espacio-2) var(--inv-espacio-5); }
.erp-permiso { font-size: 0.9rem; color: var(--inv-tinta); padding: 2px 0; }
/* Lo sensible se distingue por peso, no pintando media pantalla de rojo. */
.erp-permiso.is-critico { font-weight: 600; }
.erp-permiso.is-critico::after {
  content: "crítico"; margin-left: var(--inv-espacio-2);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--inv-tinta-suave);
}

@media (max-width: 768px) {
  .erp-permisos { grid-template-columns: 1fr; }
  .invoicing-v2.invoicing-v2 .erp-busqueda { min-height: 44px; }
  .invoicing-v2.invoicing-v2 .erp-detalle button { min-height: 44px; }
}

/* ---------- Documentos, Datos y Carga inicial ------------------------------------------------
   Las tres secciones dejan de enseñar su panel heredado como experiencia. Sus formularios y
   handlers siguen intactos: solo cambia cuándo se ven. */
#admin[data-erp-admin-propio="si"][data-erp-seccion-activa="documentos"] [data-erp-seccion="documentos"],
#admin[data-erp-admin-propio="si"][data-erp-seccion-activa="datos"] [data-erp-seccion="datos"] {
  display: none;
}

/* Bloques de la sección Datos: secciones con aire, no tarjetas con borde. */
.erp-bloque + .erp-bloque {
  margin-top: var(--inv-espacio-6); padding-top: var(--inv-espacio-6);
  border-top: 1px solid var(--inv-linea);
}
.erp-bloque-titulo {
  margin: 0 0 var(--inv-espacio-2); font-size: 1rem; font-weight: 600; color: var(--inv-tinta);
}

/* Una fila por dataset, con su acción a la derecha. No seis botones flotando juntos. */
.erp-filas { list-style: none; margin: var(--inv-espacio-4) 0 0; padding: 0; }
.erp-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--inv-espacio-4); padding: var(--inv-espacio-3) 0;
  border-bottom: 1px solid var(--inv-linea);
}
.erp-fila:last-child { border-bottom: 0; }
.erp-fila > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.erp-fila strong { font-size: 0.92rem; font-weight: 600; }
.erp-fila-ayuda { font-size: 0.82rem; color: var(--inv-tinta-suave); }
/* La herramienta heredada no compite con la segura: queda debajo y más apagada. */
.erp-fila.is-heredada { align-items: flex-start; opacity: 0.9; }
.erp-fila.is-heredada .erp-zona-heredada { margin-left: auto; }

/* Las columnas que un dominio no usa se apagan: dos huecos vacíos se leen peor que no estar. */
.erp-panel table[data-erp-columnas-vacias="3 4"] th:nth-child(3),
.erp-panel table[data-erp-columnas-vacias="3 4"] td:nth-child(3),
.erp-panel table[data-erp-columnas-vacias="3 4"] th:nth-child(4),
.erp-panel table[data-erp-columnas-vacias="3 4"] td:nth-child(4) { display: none; }

.erp-editor .erp-zona { margin-top: var(--inv-espacio-5); }
.erp-resumen-stock { max-width: 420px; }

@media (max-width: 768px) {
  .erp-fila { flex-direction: column; align-items: stretch; }
  .erp-fila.is-heredada .erp-zona-heredada { margin-left: 0; }
  .invoicing-v2.invoicing-v2 .erp-fila button { min-height: 44px; }
}

/* ---------- Respaldos, Avanzado y General ---------------------------------------------------
   Las seis secciones comparten ya el mismo patrón: datos, una acción dominante y lo peligroso
   aparte. Los paneles heredados quedan detrás en todas. */
#admin[data-erp-admin-propio="si"][data-erp-seccion-activa="respaldos"] [data-erp-seccion="respaldos"],
#admin[data-erp-admin-propio="si"][data-erp-seccion-activa="avanzado"] [data-erp-seccion="avanzado"],
#admin[data-erp-admin-propio="si"][data-erp-seccion-activa="general"] [data-erp-seccion="general"] {
  display: none;
}

.erp-acciones-fila {
  display: flex; gap: var(--inv-espacio-3); align-items: center;
  margin-top: var(--inv-espacio-5);
}

/* Lo destructivo se separa y se dice; no se pinta media pantalla de rojo. */
.erp-peligro { margin-top: var(--inv-espacio-6); }
.invoicing-v2 .inv-boton-peligro { border-color: var(--inv-peligro, #b3261e); color: var(--inv-peligro, #b3261e); }
.invoicing-v2 .inv-boton-peligro:hover { background: var(--inv-peligro-suave, #fdecea); }
.erp-fila.is-peligro strong { color: var(--inv-peligro, #b3261e); }

.erp-zona-herramienta { padding-top: var(--inv-espacio-4); list-style: none; }
.erp-general-pie { margin-top: var(--inv-espacio-6); max-width: 560px; }

@media (max-width: 768px) {
  .erp-acciones-fila { flex-direction: column; align-items: stretch; }
  .invoicing-v2.invoicing-v2 .erp-acciones-fila button,
  .invoicing-v2.invoicing-v2 .erp-peligro button { min-height: 44px; }
}

/* ---------- Compras: superficies de gestión --------------------------------------------------
   Órdenes, Costos e Historial pasan a tener marcado propio. Los paneles heredados que siguen
   haciendo falta se adoptan dentro; el resto queda detrás. */
#purchases[data-erp-compras-propio="si"] [data-purchase-section] { display: none !important; }
#purchases[data-erp-compras-propio="si"] .erp-zona [data-purchase-section] { display: block !important; }

.erp-barra { display: flex; gap: var(--inv-espacio-3); align-items: center;
  margin-bottom: var(--inv-espacio-4); }
.erp-barra .erp-busqueda { margin-bottom: 0; }
.erp-zona-costos, .erp-zona-preferido, .erp-zona-reportes { margin-top: var(--inv-espacio-4); }

@media (max-width: 768px) {
  .erp-barra { flex-direction: column; align-items: stretch; }
  .invoicing-v2.invoicing-v2 .erp-barra button { min-height: 44px; }
}

/* ---------- P0: el paso "Revisar" revisa, no captura ----------------------------------------
   Reportado por el dueño: el paso Revisar de "Registrar compra" seguía enseñando el buscador de
   producto, la cantidad, el costo y "Agregar". Eso no es una revisión.

   La caja de líneas ya agregadas vive DENTRO de la caja de captura, así que no basta con excluir
   el bloque: se revela el bloque y se apaga todo lo suyo menos las líneas. Mismo patrón que ya
   se usó en el paso 3 de Nueva orden. Los controles siguen en el <form> para FormData. */
/* Solo la caja de captura, no el pie: marcar ambos con el paso 2 hacia que este selector apagara
   tambien el total. Medido en el despliegue. */
.erp-asistente .erp-zona #purchaseForm[data-erp-flujo-paso="2"] > .line-item-box > * { display: none; }
.erp-asistente .erp-zona #purchaseForm[data-erp-flujo-paso="2"] #purchaseLinesBox { display: block; }

/* Un botón apagado sin explicación obliga a adivinar: el motivo se dice donde se está mirando. */
.erp-guard {
  margin: var(--inv-espacio-4) 0 0;
  font-size: 0.88rem; color: var(--inv-tinta-suave);
}

/* ---------- Ticket: "Más opciones" -----------------------------------------------------------
   La captura del dueño mostraba seis acciones en fila. Lo auxiliar sigue teniendo camino, pero
   detrás de un disparador: tener camino no es lo mismo que estar todo abierto a la vez. */
.erp-mas { position: relative; }
.erp-mas-menu {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30; min-width: 240px;
  display: flex; flex-direction: column;
  padding: var(--inv-espacio-2);
  border: 1px solid var(--inv-linea); border-radius: var(--inv-radio-md);
  background: var(--inv-superficie); box-shadow: var(--inv-sombra-menu, 0 8px 24px rgba(0,0,0,.12));
}
.erp-mas-opcion {
  appearance: none; background: none; border: 0; text-align: left; cursor: pointer;
  padding: var(--inv-espacio-2) var(--inv-espacio-3); border-radius: var(--inv-radio-sm);
  font: inherit; font-size: 0.9rem; color: var(--inv-tinta); min-height: 36px;
}
.erp-mas-opcion:hover { background: var(--inv-superficie-tenue); }
.erp-mas-opcion:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.invoicing-v2 .erp-mas-opcion.is-peligro { color: var(--inv-peligro, #b3261e); }

@media (max-width: 768px) {
  .erp-mas-menu { right: auto; left: 0; min-width: 200px; }
  .invoicing-v2.invoicing-v2 .erp-mas-opcion { min-height: 44px; }
}

/* ---------- Pie del asistente en móvil ------------------------------------------------------
   Medido a 390: el paso Revisar del ticket desbordaba. Con "Reprocesar con OCR avanzado" y
   "Guardar alias detectados" junto a Continuar, tres acciones no caben en una fila. Se apilan,
   y la primaria queda abajo, que es donde se busca. */
@media (max-width: 768px) {
  .erp-asistente .inv-ws-pie-der {
    flex-direction: column-reverse; align-items: stretch; width: 100%;
  }
  .erp-asistente .inv-ws-pie-der > * { width: 100%; }
  .erp-asistente .erp-mas { width: 100%; }
  .erp-asistente .erp-mas-boton { width: 100%; }
}

/* ==============================================================================================
   PASE DE SHELL GLOBAL — de la revisión del dueño

   Sus capturas mostraban, encima de cada módulo V2: el epígrafe "Operación integral", el título
   grande del ERP repetido, el subtítulo de abarrotes (incluso en Administración), un buscador de
   dos pisos, "Exportar" y una franja "SISTEMA INTERNO SUPABASE" hablando de localStorage.

   El módulo ya trae su propio título y subtítulo. El shell debe desaparecer y dejar sitio.
   ============================================================================================== */

/* El hero global se repliega en los TRES módulos con superficie V2, no solo en Facturación. */
body[data-modulo="invoices"] .topbar .eyebrow,
body[data-modulo="admin"] .topbar .eyebrow,
body[data-modulo="purchases"] .topbar .eyebrow,
body[data-modulo="orders"] .topbar .eyebrow,
body[data-modulo="invoices"] .topbar .page-subtitle,
body[data-modulo="admin"] .topbar .page-subtitle,
body[data-modulo="purchases"] .topbar .page-subtitle,
body[data-modulo="orders"] .topbar .page-subtitle,
body[data-modulo="admin"] .topbar #pageTitle,
body[data-modulo="purchases"] .topbar #pageTitle,
body[data-modulo="orders"] .topbar #pageTitle,
body[data-modulo="invoices"] .topbar #pageTitle {
  /* clip en vez de display:none: #pageTitle es el aria-labelledby del área y debe seguir
     teniendo nombre accesible. Se saca de la vista sin sacarlo del árbol de accesibilidad. */
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* La barra queda como lo que es: una franja de utilidades, no una portada. */
body[data-modulo="admin"] .topbar,
body[data-modulo="orders"] .topbar,
body[data-modulo="purchases"] .topbar {
  min-height: 56px; padding-top: var(--inv-espacio-3); padding-bottom: var(--inv-espacio-3);
  align-items: center;
}
/* El buscador global: un solo control, sin su etiqueta en una línea aparte. */
body[data-modulo="admin"] .topbar-search,
body[data-modulo="orders"] .topbar-search,
body[data-modulo="purchases"] .topbar-search { max-width: 240px; }
body[data-modulo="admin"] .topbar-search span,
body[data-modulo="orders"] .topbar-search span,
body[data-modulo="purchases"] .topbar-search span { display: none; }
body[data-modulo="admin"] .role-box span,
body[data-modulo="orders"] .role-box span,
body[data-modulo="purchases"] .role-box span { display: none; }
body[data-modulo="admin"] .topbar-actions,
body[data-modulo="orders"] .topbar-actions,
body[data-modulo="purchases"] .topbar-actions { gap: var(--inv-espacio-3); align-items: center; }

/* "Exportar" descarga un respaldo JSON del estado: es una tarea de Administración, no del
   encabezado de cada workflow. Su ruta se conserva en Administración → Respaldos. */
body[data-modulo="admin"] #exportDataBtn,
body[data-modulo="orders"] #exportDataBtn,
body[data-modulo="purchases"] #exportDataBtn { display: none; }

/* La franja de sistema: en operación normal no se anuncia la infraestructura. Solo se ve cuando
   dice algo que el operador necesita saber -modo local o error-, y en esos casos NO se oculta. */
body[data-modulo="admin"] #systemModeBanner.supabase-mode,
body[data-modulo="orders"] #systemModeBanner.supabase-mode,
body[data-modulo="purchases"] #systemModeBanner.supabase-mode,
body[data-modulo="invoices"] #systemModeBanner.supabase-mode { display: none; }

/* ---------- Tablas V2: la causa real del scroll horizontal ----------------------------------
   El ERP tiene una regla global `table { min-width: 820px }`. .inv-tabla fija width:100% pero
   nunca reseteaba ese mínimo, así que una tabla de seis columnas y una fila dentro del panel de
   Usuarios -unos 700 px- desbordaba. No se esconde la barra: se quita el mínimo heredado. */
.invoicing-v2 .inv-tabla { min-width: 0; }
.invoicing-v2 .inv-tabla thead th { white-space: nowrap; }
/* Ancho según el dato: nombre y correo crecen; el resto se ajusta a su contenido. */
/* MEDIDO a 1024: contenedor 720, tabla 809, exceso 89 px. El reparto era
   Colaborador 150 + Correo 232 + Rol 127 + Permisos 117 + Acceso 78 + Acción 105.

   Dos causas, ninguna era ya el min-width global:
     1. "Colaborador" heredaba white-space: nowrap y no podía quebrar. Mi regla anterior empezaba
        en la columna 3, así que no lo alcanzaba.
     2. "Correo" ocupaba 232 px sin poder partirse; un correo no tiene espacios donde quebrar.
   Más 16 px de padding a cada lado en seis columnas: 192 px solo de aire.

   Se deja que las dos primeras quiebren -el correo por cualquier punto, que es lo único que
   funciona con una cadena sin espacios- y se ajusta el padding. Alcance: solo las tablas dentro
   de un panel de settings, para no tocar Órdenes, Historial, Facturas ni Proveedores. */
.erp-panel .inv-tabla th:nth-child(-n+2), .erp-panel .inv-tabla td:nth-child(-n+2) {
  width: auto; white-space: normal; overflow-wrap: anywhere;
}
.erp-panel .inv-tabla th:nth-child(n+3), .erp-panel .inv-tabla td:nth-child(n+3) { width: 1%; white-space: nowrap; }
.erp-panel .inv-tabla th, .erp-panel .inv-tabla td { padding-left: 10px; padding-right: 10px; }
.erp-panel .inv-tabla th:first-child, .erp-panel .inv-tabla td:first-child { padding-left: 0; }
.erp-panel .inv-tabla th:last-child, .erp-panel .inv-tabla td:last-child { padding-right: 0; }

/* ---------- El bloque KPI heredado de Compras ------------------------------------------------
   Reportado por el dueño: "Resumen de compras" con nueve indicadores seguía ENCIMA de la
   superficie V2. Escapó a mi conteo porque no lleva data-purchase-section: vive fuera del
   conmutador heredado y por eso siempre estuvo visible. app.js lo marca ahora por su ancla. */
#purchases[data-erp-compras-propio="si"] [data-erp-legado="kpi"] { display: none !important; }

/* ---------- Un botón bloqueado tiene que parecerlo -------------------------------------------
   El dueño vio "Crear orden" y "Continuar" con el mismo verde que cuando sí funcionan, aunque el
   guard los rechazara. Se apagan de verdad: es `disabled` nativo, no solo opacidad. */
.invoicing-v2 .inv-boton-primario:disabled,
.invoicing-v2 .inv-boton:disabled {
  background: var(--inv-superficie-tenue); border-color: var(--inv-linea);
  color: var(--inv-tinta-suave); cursor: not-allowed; box-shadow: none;
}
.invoicing-v2 .inv-boton-primario:disabled:hover,
.invoicing-v2 .inv-boton:disabled:hover { background: var(--inv-superficie-tenue); }

/* ---------- Cuenta en móvil ------------------------------------------------------------------
   Medido a 360: el botón Cuenta salía en 36 px, por debajo del mínimo táctil. El popover cabe
   (240 px dentro de 360) pero se acota por si el contenido crece. */
@media (max-width: 768px) {
  body[data-modulo="invoices"] .inv-cuenta-boton,
  body[data-modulo="admin"] .inv-cuenta-boton,
  body[data-modulo="purchases"] .inv-cuenta-boton { min-height: 44px; }
  body[data-modulo="invoices"] .inv-cuenta-menu,
  body[data-modulo="admin"] .inv-cuenta-menu,
  body[data-modulo="purchases"] .inv-cuenta-menu { max-width: calc(100vw - 24px); right: 0; }
  .invoicing-v2 .inv-cuenta-menu #logoutBtn { min-height: 44px; }
}

/* ==============================================================================================
   VENTAS V2 — FASE 1

   Lo medido antes de escribir esto: el módulo enseñaba CUATRO superficies a la vez y no tenía
   conmutador. Aquí no se mueve ningún panel heredado ni se toca su marcado; se apagan mientras la
   superficie propia está montada, exactamente igual que en Compras.
   ============================================================================================== */

#orders[data-erp-ventas-propio="si"] > [data-sales-legado] { display: none !important; }
/* Un nodo adoptado deja de ser hijo directo de #orders, así que la regla no lo alcanza. Es el
   mismo criterio que aisló el bloque CSD: combinador hijo en vez de pelea de especificidad. */

/* ---------- Indicadores: tres cifras, no un tablero ---------- */
.invoicing-v2 .erp-ventas-indicadores {
  display: flex; flex-wrap: wrap; gap: var(--inv-espacio-4);
  padding: 0 0 var(--inv-espacio-4);
}
.invoicing-v2 .erp-ventas-indicador { display: flex; flex-direction: column; gap: 2px; min-width: 104px; }
.invoicing-v2 .erp-ventas-indicador strong {
  font-size: 1.35rem; font-weight: 600; line-height: 1.1; color: var(--inv-tinta);
  font-variant-numeric: tabular-nums;
}
.invoicing-v2 .erp-ventas-indicador span { font-size: 0.82rem; color: var(--inv-tinta-tenue); }

/* ---------- Buscador ---------- */
.invoicing-v2 .erp-ventas-busqueda {
  width: 100%; max-width: 320px; min-height: 40px; margin-bottom: var(--inv-espacio-4);
  padding: 0 var(--inv-espacio-3);
  border: 1px solid var(--inv-linea-fuerte); border-radius: var(--inv-radio-sm);
  background: var(--inv-superficie); color: var(--inv-tinta); font: inherit; font-size: 0.92rem;
}
.invoicing-v2 .erp-ventas-busqueda:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Fila y detalle ---------- */
.invoicing-v2 .erp-venta-ref {
  display: block; font-size: 0.78rem; color: var(--inv-tinta-tenue);
  font-variant-numeric: tabular-nums;
}
.invoicing-v2 .erp-venta-siguiente-celda { color: var(--inv-tinta-tenue); font-size: 0.88rem; }
.invoicing-v2 .erp-venta-fila-detalle > td { padding: 0; background: var(--inv-superficie-tenue); }
.invoicing-v2 .erp-venta-detalle { border: 0; border-radius: 0; padding: var(--inv-espacio-4); }
.invoicing-v2 .erp-venta-detalle-cab {
  display: flex; align-items: center; gap: var(--inv-espacio-3); flex-wrap: wrap;
  margin-bottom: var(--inv-espacio-3);
}
.invoicing-v2 .erp-venta-docs {
  margin: var(--inv-espacio-3) 0 0; font-size: 0.86rem; color: var(--inv-tinta-tenue);
}
.invoicing-v2 .erp-venta-siguiente {
  display: flex; align-items: center; gap: var(--inv-espacio-3); flex-wrap: wrap;
  margin-top: var(--inv-espacio-4);
}
.invoicing-v2 .erp-venta-siguiente-texto { font-size: 0.9rem; color: var(--inv-tinta); }
.invoicing-v2 .erp-venta-motivo { font-size: 0.86rem; color: var(--inv-tinta-tenue); }

@media (max-width: 768px) {
  /* La tabla no se encoge hasta ser ilegible: hace scroll dentro de su caja, nunca la página. */
  .invoicing-v2 .erp-ventas-busqueda { max-width: none; min-height: 44px; }
  .invoicing-v2 .erp-ventas-indicadores { gap: var(--inv-espacio-3); }
  .invoicing-v2 .erp-ventas-indicador { min-width: 88px; }
  .invoicing-v2 .erp-venta-abrir { min-height: 44px; }
}

/* ---------- Nueva venta: el formulario real, repartido por pasos ----------
   El <form> heredado se ADOPTA entero y se revela por partes. Los campos NO salen de él: fuera del
   formulario no llegarían a FormData y la venta se registraría incompleta. Es el mismo criterio
   que en Nueva orden y Nueva factura. */
#orderForm > [data-erp-paso] { display: none; }
#orderForm[data-erp-paso="1"] > [data-erp-paso="1"],
#orderForm[data-erp-paso="2"] > [data-erp-paso="2"],
#orderForm[data-erp-paso="3"] > [data-erp-paso="3"],
#orderForm > [data-erp-paso="0"] { display: block; }
/* Las líneas ya capturadas se ven también al revisar: es justo lo que se está revisando. */
#orderForm[data-erp-paso="4"] #orderLinesBox[data-erp-paso-extra="4"] { display: block; }
/* El pie heredado no vuelve: su "Registrar venta" lo sustituye la acción del asistente, que además
   comprueba el guard antes de enviar. */
#orderForm > [data-erp-paso="x"] { display: none !important; }

/* Los iconos del selector de surtido son decorativos -van con aria-hidden- y no pintan nada aquí. */
.invoicing-v2 .inv-ws-zona .fulfillment-tab-icon { display: none; }

/* ---------- Revisar: solo lectura ---------- */
.invoicing-v2 .erp-nueva-resumen { display: flex; flex-direction: column; gap: var(--inv-espacio-5); }
.invoicing-v2 .erp-nueva-bloque-titulo {
  margin: 0 0 var(--inv-espacio-3); font-size: 0.86rem; font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--inv-tinta-tenue);
}
.invoicing-v2 .erp-nueva-efecto {
  margin: 0; padding: var(--inv-espacio-3) 0 0;
  border-top: 1px solid var(--inv-linea); font-size: 0.88rem; color: var(--inv-tinta-tenue);
}

@media (max-width: 768px) {
  .invoicing-v2 .erp-nueva-resumen { gap: var(--inv-espacio-4); }
}
/* A contado, días de crédito y vencimiento no aplican: pedirlos es ruido. El valor sigue en el
   formulario; lo que se retira es la petición. */
#orderForm[data-erp-pago="contado"] [data-erp-solo-credito="si"] { display: none; }

/* Los radios de surtido son controles OCULTOS a propósito: el legado los reduce a 1×1 px y deja el
   clic al <label>. Dentro del asistente, la regla que da forma a los controles adoptados
   -.invoicing-v2 .inv-ws-zona input- empata en especificidad con .fulfillment-tab input[type=radio]
   y gana por ir después, así que los estiraba a 100% de ancho: medido a 1024, salían 1024 px de
   ancho, se desbordaban y la PÁGINA cogía scroll horizontal. Se les devuelve su tamaño. */
.invoicing-v2 .inv-ws-zona .fulfillment-tab input[type="radio"] {
  width: 1px; height: 1px; min-height: 0; padding: 0; border: 0;
}

/* ==============================================================================================
   VENTAS V2 — POLISH VISUAL

   Todo lo de aquí está acotado a .inv-ws-zona, que es la superficie del asistente. El formulario
   heredado sigue siendo el mismo nodo con los mismos handlers: lo que cambia es cómo se reparte el
   espacio. Ninguna regla toca el marcado ni el cálculo.
   ============================================================================================== */

/* Los títulos internos del formulario repiten lo que ya dice el paso: "Datos de venta" bajo el
   paso "Cliente", "Líneas de venta" bajo "Productos". Dos veces la misma palabra no informa. */
.invoicing-v2 .inv-ws-zona #orderForm > .section-title,
.invoicing-v2 .inv-ws-zona #orderForm .compact-section-title { display: none; }

/* ---------- Paso 1 · Cliente: una ficha, no un formulario administrativo ---------- */
.invoicing-v2 .inv-ws-zona #orderForm[data-erp-paso="1"] {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--inv-espacio-4) var(--inv-espacio-5); align-items: start;
}
/* Cliente y fecha comparten fila; responsable e indicaciones ocupan el ancho. */
.invoicing-v2 .inv-ws-zona #orderForm[data-erp-paso="1"] > [data-erp-paso="1"]:nth-of-type(3),
.invoicing-v2 .inv-ws-zona #orderForm[data-erp-paso="1"] > [data-erp-paso="1"]:nth-of-type(4) {
  grid-column: 1 / -1;
}
.invoicing-v2 .inv-ws-zona #orderForm[data-erp-paso="1"] > [data-erp-paso="0"] { grid-column: 1 / -1; }

/* ---------- Paso 2 · Productos ---------- */
/* Surtido: dos opciones, no dos áreas vacías. */
.invoicing-v2 .inv-ws-zona .fulfillment-toggle-tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--inv-linea-fuerte); border-radius: var(--inv-radio-sm);
  background: var(--inv-superficie-tenue);
}
/* Sin min-height propio a proposito: cualquier valor por debajo de 44 competiria con la
   regla tactil del shell y el contrato Z5 lo marca -con razon, porque ese empate ya dejo una vez
   reglas escritas que no ganaban-. El tamaño se controla con el padding. */
.invoicing-v2 .inv-ws-zona .fulfillment-tab {
  flex: 0 0 auto; padding: 6px 14px;
  border: 0; border-radius: calc(var(--inv-radio-sm) - 2px);
  font-size: 0.86rem; font-weight: 500; letter-spacing: 0;
}
.invoicing-v2 .inv-ws-zona .fulfillment-tab.is-active {
  color: var(--inv-tinta); background: var(--inv-superficie);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}
/* Cada grupo del editor de línea es un bloque con aire propio, no una lista de campos sueltos. */
.invoicing-v2 .inv-ws-zona .line-step { padding: 0; border: 0; background: transparent; }
.invoicing-v2 .inv-ws-zona .line-step + .line-step { margin-top: var(--inv-espacio-4); }
.invoicing-v2 .inv-ws-zona .line-step-header { margin-bottom: var(--inv-espacio-2); }
.invoicing-v2 .inv-ws-zona .sale-step-fields {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--inv-espacio-3) var(--inv-espacio-4); align-items: end;
}
/* Precio y su motivo: el motivo acompaña, no protagoniza. */
.invoicing-v2 .inv-ws-zona .sale-step-fields--price {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.invoicing-v2 .inv-ws-zona .wide-field { grid-column: 1 / -1; }
/* El precio aplicado es información contextual, no una franja. */
.invoicing-v2 .inv-ws-zona .price-hint,
.invoicing-v2 .inv-ws-zona .conversion-hint {
  padding: 0; border: 0; background: transparent;
  font-size: 0.82rem; color: var(--inv-tinta-tenue);
}
/* "Agregar línea" cierra el editor; la primaria del paso vive en el pie del asistente. */
.invoicing-v2 .inv-ws-zona .line-step-actions {
  display: flex; justify-content: flex-end; margin-top: var(--inv-espacio-4);
  padding-top: var(--inv-espacio-4); border-top: 1px solid var(--inv-linea);
}

/* Líneas ya agregadas: alineadas y legibles, no texto corrido. */
.invoicing-v2 .inv-ws-zona .mini-table { margin-top: var(--inv-espacio-5); }
.invoicing-v2 .inv-ws-zona .line-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--inv-espacio-3) var(--inv-espacio-4); align-items: center;
  padding: var(--inv-espacio-3) 0; border: 0; border-top: 1px solid var(--inv-linea);
}
.invoicing-v2 .inv-ws-zona .line-row > div:first-child {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.invoicing-v2 .inv-ws-zona .line-row strong { font-weight: 600; font-size: 0.94rem; }
.invoicing-v2 .inv-ws-zona .line-row span { font-size: 0.82rem; color: var(--inv-tinta-tenue); }
/* El fragmento de id del lote es dato técnico: no identifica nada para quien vende. */
.invoicing-v2 .inv-ws-zona .line-row-tecnico { display: none; }
.invoicing-v2 .inv-ws-zona .line-row .small-button {
  font-size: 0.82rem; font-weight: 500; color: var(--inv-tinta-tenue);
  background: transparent; border-color: transparent;
}
.invoicing-v2 .inv-ws-zona .line-row .small-button:hover { color: var(--inv-tinta); }

/* ---------- Paso 3 · Condiciones: tres columnas, no tres bloques gigantes ---------- */
.invoicing-v2 .inv-ws-zona #orderForm[data-erp-paso="3"] > [data-erp-paso="3"] {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--inv-espacio-4) var(--inv-espacio-5); align-items: start;
}

/* ---------- Paso 4 · Revisar: jerarquía y un ancla ---------- */
.invoicing-v2 .erp-nueva-bloque + .erp-nueva-bloque {
  padding-top: var(--inv-espacio-5); border-top: 1px solid var(--inv-linea);
}
.invoicing-v2 .erp-nueva-resumen .inv-resumen-fila.is-total {
  margin-top: var(--inv-espacio-3); padding-top: var(--inv-espacio-3);
  border-top: 1px solid var(--inv-linea-fuerte);
}
.invoicing-v2 .erp-nueva-resumen .inv-resumen-fila.is-total dt { font-weight: 600; color: var(--inv-tinta); }
.invoicing-v2 .erp-nueva-resumen .inv-resumen-fila.is-total dd {
  font-size: 1.3rem; font-weight: 600; color: var(--inv-tinta); font-variant-numeric: tabular-nums;
}
.invoicing-v2 .erp-nueva-nota {
  margin: var(--inv-espacio-3) 0 0; font-size: 0.82rem; color: var(--inv-tinta-tenue);
}

@media (max-width: 1100px) {
  .invoicing-v2 .inv-ws-zona #orderForm[data-erp-paso="3"] > [data-erp-paso="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .invoicing-v2 .inv-ws-zona .sale-step-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .invoicing-v2 .inv-ws-zona #orderForm[data-erp-paso="1"],
  .invoicing-v2 .inv-ws-zona #orderForm[data-erp-paso="3"] > [data-erp-paso="3"],
  .invoicing-v2 .inv-ws-zona .sale-step-fields,
  .invoicing-v2 .inv-ws-zona .sale-step-fields--price { grid-template-columns: minmax(0, 1fr); }
  .invoicing-v2 .inv-ws-zona .line-row { grid-template-columns: minmax(0, 1fr); }
}