/* Beta 1.48 · selector de temas y rastreo. Se carga después de styles.css. */

/* --------------------------------------------------------------------------
   Selector de temas (también visible desde el Diseño Original)
   -------------------------------------------------------------------------- */
.design-preview-switch button { min-width: 0; }
.design-preview-switch button small {
  display: block;
  max-width: 118px;
  margin-top: 1px;
  overflow: hidden;
  font-size: 8px;
  font-weight: 750;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .7;
}
.design-preview-switch button:has(small) { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }

.theme-modal-head { align-items: flex-start; }
.theme-modal-head .eyebrow,
.theme-settings-panel .eyebrow { margin: 0 0 5px; }
.modal:has(.theme-picker-body) { width: min(1040px, calc(100vw - 28px)); }
.theme-picker-body { display: grid; gap: 18px; }
.theme-current-note {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 8px 15px;
  padding: 13px 16px;
  border: 1px solid var(--theme-border, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--theme-accent, var(--teal)) 7%, var(--theme-surface, #fff));
}
.theme-current-note > span { color: var(--theme-muted, var(--muted)); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.theme-current-note > strong { color: var(--theme-text, var(--ink)); }
.theme-current-note > small { color: var(--theme-muted, var(--muted)); text-align: right; }
.theme-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.theme-gallery.compact { margin-top: 18px; }
.theme-choice {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--theme-border, var(--line));
  border-radius: 16px;
  display: grid;
  grid-template-columns: 96px minmax(0,1fr) 24px;
  align-items: center;
  gap: 12px;
  color: var(--theme-text, var(--ink));
  background: var(--theme-surface, #fff);
  text-align: left;
  box-shadow: none;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, translate .18s ease;
}
.theme-choice:hover { translate: 0 -2px; border-color: var(--theme-accent, var(--teal)); box-shadow: 0 13px 28px color-mix(in srgb,var(--theme-accent,var(--teal)) 14%,transparent); }
.theme-choice.active { border-color: var(--theme-accent, var(--teal)); box-shadow: 0 0 0 3px color-mix(in srgb,var(--theme-accent,var(--teal)) 17%,transparent); }
.theme-choice-preview {
  position: relative;
  width: 96px;
  height: 64px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--preview-surface) 70%,#888);
  border-radius: 9px;
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-rows: 15px 1fr;
  background: var(--preview-bg);
}
.theme-choice-preview i { grid-row: 1 / 3; background: var(--preview-sidebar); }
.theme-choice-preview b { grid-column: 2; margin: 5px 6px 2px; border-radius: 3px; background: var(--preview-surface); }
.theme-choice-preview em { grid-column: 2; margin: 3px 6px 5px; border-radius: 4px; background: var(--preview-surface); }
.theme-choice-preview small { position: absolute; right: 11px; bottom: 11px; width: 16px; height: 5px; border-radius: 99px; background: var(--preview-accent); }
.theme-choice-copy { min-width: 0; display: grid; gap: 4px; }
.theme-choice-copy strong { color: inherit; font-size: 14px; }
.theme-choice-copy small { color: var(--theme-muted, var(--muted)); font-size: 11px; line-height: 1.35; }
.theme-choice-check { width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; color: var(--theme-accent-contrast,#fff); background: var(--theme-accent,var(--teal)); font-size: 12px; font-weight: 900; }
.theme-choice:not(.active) .theme-choice-check { background: color-mix(in srgb,var(--theme-border,var(--line)) 65%,transparent); }
.theme-choice.compact { grid-template-columns: 70px minmax(0,1fr) 22px; }
.theme-choice.compact .theme-choice-preview { width: 70px; height: 50px; grid-template-columns: 19px 1fr; }
.theme-picker-footer,
.theme-settings-actions { display: flex; flex-wrap: wrap; gap: 9px; }

/* --------------------------------------------------------------------------
   Rastreo: estructura funcional compartida por Original y todos los temas
   -------------------------------------------------------------------------- */
.tracking-search-shell,
.tracking-package-result,
.tracking-client-panel,
.tracking-current-report,
.tracking-report-panel,
.tracking-state-card {
  min-width: 0;
  border: 1px solid var(--theme-border, var(--line));
  border-radius: var(--theme-panel-radius, 20px);
  color: var(--theme-text, var(--ink));
  background: var(--theme-surface, #fff);
  box-shadow: var(--theme-shadow, var(--shadow));
}
.tracking-search-shell {
  padding: clamp(18px,2.2vw,28px);
  display: grid;
  grid-template-columns: minmax(220px,.72fr) minmax(360px,1.28fr);
  align-items: end;
  gap: 22px;
  background:
    radial-gradient(circle at 8% 12%,color-mix(in srgb,var(--theme-accent,var(--teal)) 18%,transparent),transparent 30%),
    var(--theme-surface,#fff);
}
.tracking-search-shell.provider-pending { opacity: .78; }
.tracking-search-copy h2 { margin: 2px 0 7px; font-size: clamp(22px,2.2vw,32px); }
.tracking-search-copy p:last-child { margin: 0; color: var(--theme-muted,var(--muted)); }
.tracking-search-form { min-width: 0; display: grid; gap: 7px; }
.tracking-search-form > label { color: var(--theme-muted,var(--muted)); font-size: 11px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.tracking-search-form > div { min-width: 0; padding: 5px; border: 1px solid var(--theme-border,var(--line)); border-radius: var(--theme-control-radius,14px); display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 4px; background: var(--theme-surface-raised,#f8fbfa); }
.tracking-search-form > div > span { display: grid; place-items: center; color: var(--theme-accent,var(--teal)); font-size: 20px; }
.tracking-search-form input { min-width: 0; min-height: 46px; border: 0 !important; outline: 0; color: var(--theme-text,var(--ink)) !important; background: transparent !important; font: 750 16px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; text-transform: uppercase; box-shadow: none !important; }
.tracking-search-form > small { color: var(--theme-muted,var(--muted)); line-height: 1.4; }
.tracking-shared-client { grid-column: 1 / -1; min-width: 0; padding: 15px; border: 1px solid var(--theme-border,var(--line)); border-radius: var(--theme-control-radius,14px); display: grid; grid-template-columns: minmax(240px,.85fr) minmax(320px,1.15fr); align-items: center; gap: 18px; background: color-mix(in srgb,var(--theme-surface-raised,#f8fbfa) 82%,transparent); }
.tracking-shared-client.is-active { border-color: color-mix(in srgb,var(--theme-accent,var(--teal)) 58%,var(--theme-border,var(--line))); background: color-mix(in srgb,var(--theme-accent,var(--teal)) 8%,var(--theme-surface-raised,#f8fbfa)); }
.tracking-shared-summary { min-width: 0; display: grid; gap: 10px; }
.tracking-shared-heading { min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.tracking-shared-heading > span { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--theme-accent-contrast,#fff); background: var(--theme-accent,var(--teal)); font-size: 18px; font-weight: 900; }
.tracking-shared-heading p { margin: 0 0 2px; color: var(--theme-muted,var(--muted)); font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.tracking-shared-heading h3 { margin: 0; color: var(--theme-text,var(--ink)); font-size: 16px; }
.tracking-shared-heading em { padding: 5px 9px; border-radius: 999px; color: var(--theme-accent,var(--teal)); background: color-mix(in srgb,var(--theme-accent,var(--teal)) 12%,transparent); font-size: 10px; font-style: normal; font-weight: 850; white-space: nowrap; }
.tracking-shared-selected { min-width: 0; padding-left: 44px; display: flex; align-items: center; gap: 9px; }
.tracking-shared-selected > span { width: 23px; height: 23px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: var(--theme-accent-contrast,#fff); background: var(--theme-accent,var(--teal)); font-size: 11px; font-weight: 900; }
.tracking-shared-selected small,
.tracking-shared-selected strong,
.tracking-shared-selected b { display: block; }
.tracking-shared-selected small,
.tracking-shared-empty span { color: var(--theme-muted,var(--muted)); font-size: 11px; }
.tracking-shared-selected b { margin-top: 1px; color: var(--theme-accent,var(--teal)); font-size: 12px; }
.tracking-shared-empty { padding-left: 44px; display: flex; flex-wrap: wrap; gap: 5px 9px; }
.tracking-shared-empty strong { color: var(--theme-text,var(--ink)); font-size: 12px; }
.tracking-shared-form { align-content: center; }
.tracking-shared-clear { width: max-content; margin-top: 3px; }
.tracking-workspace { min-width: 0; margin-top: 16px; display: grid; grid-template-columns: minmax(0,1fr) minmax(310px,390px); align-items: start; gap: 16px; }
.tracking-main,
.tracking-result-stack { min-width: 0; display: grid; gap: 16px; }
.tracking-state-card { min-height: 310px; padding: 34px; display: flex; align-items: center; justify-content: center; gap: 20px; text-align: left; }
.tracking-state-card > span { width: 58px; height: 58px; flex: 0 0 auto; border-radius: 18px; display: grid; place-items: center; color: var(--theme-accent-contrast,#fff); background: var(--theme-accent,var(--teal)); font-size: 28px; font-weight: 900; }
.tracking-state-card strong { display: block; margin-bottom: 5px; font-size: 20px; }
.tracking-state-card p { max-width: 560px; margin: 0 0 12px; color: var(--theme-muted,var(--muted)); line-height: 1.55; }
.tracking-state-card code { display: block; margin: 8px 0; color: inherit; font-size: 15px; }
.tracking-state-card.error > span,
.tracking-state-card.invalid > span { background: #cb5057; }
.tracking-state-card.invalid { border-color: color-mix(in srgb,#cb5057 45%,var(--theme-border,var(--line))); }
.tracking-spinner { animation: tracking-spin .9s linear infinite; }
.tracking-spinner::after { content:""; width: 22px; height: 22px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; }
@keyframes tracking-spin { to { rotate: 360deg; } }
.tracking-package-result,
.tracking-client-panel,
.tracking-current-report,
.tracking-report-panel { padding: clamp(17px,2vw,24px); }
.tracking-result-title { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.tracking-result-title h2 { margin: 3px 0 4px; font: 850 clamp(23px,2.5vw,34px)/1.1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: -.04em; }
.tracking-result-title code { color: var(--theme-muted,var(--muted)); font-size: 13px; }
.tracking-latest-status { margin: 20px 0 8px; padding: 16px; border-radius: calc(var(--theme-control-radius,12px) + 2px); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 16px; background: color-mix(in srgb,var(--theme-accent,var(--teal)) 10%,var(--theme-surface-raised,#f7faf9)); }
.tracking-latest-status > span { grid-column: 1 / -1; color: var(--theme-muted,var(--muted)); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.tracking-latest-status > strong { color: var(--theme-text,var(--ink)); }
.tracking-latest-status > b { color: var(--theme-accent,var(--teal)); font-size: 13px; }
.tracking-status-timeline { margin: 18px 0 0; padding: 0; list-style: none; }
.tracking-status-timeline li { position: relative; min-height: 55px; margin-left: 8px; padding: 0 48px 18px 28px; border-left: 1px solid var(--theme-border,var(--line)); display: grid; }
.tracking-status-timeline li:last-child { min-height: 30px; padding-bottom: 0; border-left-color: transparent; }
.tracking-timeline-dot { position: absolute; top: 2px; left: -6px; width: 11px; height: 11px; border: 2px solid var(--theme-surface,#fff); border-radius: 50%; background: var(--theme-muted,var(--muted)); box-shadow: 0 0 0 1px var(--theme-border,var(--line)); }
.tracking-status-timeline .latest .tracking-timeline-dot { background: var(--theme-accent,var(--teal)); box-shadow: 0 0 0 4px color-mix(in srgb,var(--theme-accent,var(--teal)) 16%,transparent); }
.tracking-status-timeline strong,
.tracking-status-timeline small { display: block; }
.tracking-status-timeline small { margin-top: 3px; color: var(--theme-muted,var(--muted)); }
.tracking-status-timeline em { position: absolute; top: 0; right: 0; color: var(--theme-accent,var(--teal)); font-size: 10px; font-style: normal; font-weight: 850; text-transform: uppercase; }
.tracking-history-empty { padding: 18px 0 2px; color: var(--theme-muted,var(--muted)); }
.tracking-history-empty strong,
.tracking-history-empty span { display: block; }
.tracking-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tracking-panel-heading p { margin: 0 0 3px; color: var(--theme-muted,var(--muted)); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.tracking-panel-heading h3 { margin: 0; }
.tracking-panel-heading > span { padding: 5px 9px; border-radius: 999px; color: var(--theme-accent,var(--teal)); background: color-mix(in srgb,var(--theme-accent,var(--teal)) 12%,transparent); font-size: 10px; font-weight: 850; }
.tracking-client-found { margin: 17px 0; padding: 14px; border: 1px solid color-mix(in srgb,var(--theme-accent,var(--teal)) 40%,var(--theme-border,var(--line))); border-radius: var(--theme-control-radius,12px); display: flex; align-items: center; gap: 12px; background: color-mix(in srgb,var(--theme-accent,var(--teal)) 8%,var(--theme-surface-raised,#f8fbfa)); }
.tracking-client-found > span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--theme-accent-contrast,#fff); background: var(--theme-accent,var(--teal)); font-weight: 900; }
.tracking-client-found small,
.tracking-client-found strong,
.tracking-client-found b { display: block; }
.tracking-client-found small { color: var(--theme-muted,var(--muted)); }
.tracking-client-found b { margin-top: 2px; color: var(--theme-accent,var(--teal)); font-size: 12px; }
.tracking-client-warning { margin: 17px 0; padding: 13px 15px; border-left: 3px solid #e6a64a; border-radius: 8px; background: color-mix(in srgb,#e6a64a 10%,var(--theme-surface-raised,#f8fbfa)); }
.tracking-client-warning strong,
.tracking-client-warning span { display: block; }
.tracking-client-warning span { margin-top: 3px; color: var(--theme-muted,var(--muted)); font-size: 12px; }
.tracking-client-search { display: grid; gap: 6px; }
.tracking-client-search > label { color: var(--theme-muted,var(--muted)); font-size: 11px; font-weight: 800; }
.tracking-client-search > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.tracking-client-search input { min-width: 0; min-height: 44px; border: 1px solid var(--theme-border,var(--line)); border-radius: var(--theme-control-radius,10px); color: var(--theme-text,var(--ink)); background: var(--theme-surface-raised,#f8fbfa); }
.tracking-client-search small { color: var(--theme-muted,var(--muted)); }
.tracking-current-report pre { max-width: 100%; margin: 14px 0; padding: 16px; overflow: auto; border: 1px solid var(--theme-border,var(--line)); border-radius: var(--theme-control-radius,10px); color: var(--theme-text,var(--ink)); background: var(--theme-surface-raised,#f7faf9); font: 600 12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; white-space: pre-wrap; }
.tracking-current-report > div:first-child p { margin: 0; font-weight: 850; }
.tracking-current-report > div:first-child span { color: var(--theme-muted,var(--muted)); font-size: 12px; }
.tracking-report-panel { position: sticky; top: 78px; }
.tracking-report-queue { margin: 16px 0; display: grid; gap: 7px; }
.tracking-report-row { padding: 9px; border: 1px solid var(--theme-border,var(--line)); border-radius: var(--theme-control-radius,10px); display: grid; grid-template-columns: 25px minmax(0,1fr) 28px; align-items: center; gap: 8px; background: var(--theme-surface-raised,#f8fbfa); }
.tracking-report-row > span { width: 25px; height: 25px; border-radius: 7px; display: grid; place-items: center; color: var(--theme-accent-contrast,#fff); background: var(--theme-accent,var(--teal)); font-size: 11px; font-weight: 900; }
.tracking-report-row strong,
.tracking-report-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracking-report-row small { margin-top: 2px; color: var(--theme-muted,var(--muted)); font-size: 10px; }
.tracking-report-row button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; color: #c74c53; background: color-mix(in srgb,#c74c53 10%,transparent); font-size: 18px; cursor: pointer; }
.tracking-report-empty { padding: 13px; border: 1px dashed var(--theme-border,var(--line)); border-radius: 10px; color: var(--theme-muted,var(--muted)); font-size: 12px; text-align: center; }
.tracking-report-panel > label { display: grid; gap: 7px; }
.tracking-report-panel > label > span { color: var(--theme-muted,var(--muted)); font-size: 11px; font-weight: 800; }
.tracking-report-panel textarea { width: 100%; min-height: 285px; resize: vertical; border: 1px solid var(--theme-border,var(--line)); border-radius: var(--theme-control-radius,10px); color: var(--theme-text,var(--ink)); background: var(--theme-surface-raised,#f8fbfa); font: 600 12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }
.tracking-report-actions { margin-top: 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.tracking-report-actions .button:only-child { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   Sistema compartido por los seis temas. Recolorea TODAS las composiciones
   modernas y mantiene las estructuras explícitas de cada módulo.
   -------------------------------------------------------------------------- */
html[data-design="modern"] body {
  color: var(--theme-text);
  background: var(--theme-bg);
  font-size: calc(16px * var(--theme-font-scale,1));
}
html[data-design="modern"] .app-shell { grid-template-columns: var(--theme-sidebar-width) minmax(0,1fr) !important; background: var(--theme-bg); }
html[data-design="modern"] .modern-sidebar { color: var(--theme-sidebar-text) !important; background: var(--theme-sidebar-bg) !important; }
html[data-design="modern"] .modern-sidebar :is(.brand-name strong,.brand-name small,.modern-nav-heading,.nav-button,.modern-sidebar-profile strong,.modern-sidebar-profile small) { color: inherit !important; }
html[data-design="modern"] .modern-sidebar :is(.modern-workspace-switch,.nav-button,.modern-sidebar-profile) { border-color: color-mix(in srgb,var(--theme-sidebar-text) 13%,transparent) !important; background: transparent !important; }
html[data-design="modern"] .modern-sidebar .nav-button:hover { background: color-mix(in srgb,var(--theme-sidebar-text) 8%,transparent) !important; }
html[data-design="modern"] .modern-sidebar .nav-button.active { color: var(--theme-sidebar-text) !important; background: color-mix(in srgb,var(--theme-accent) 20%,transparent) !important; box-shadow: inset 3px 0 var(--theme-accent); }
html[data-design="modern"] .modern-sidebar .nav-badge { color: var(--theme-sidebar-text) !important; background: color-mix(in srgb,var(--theme-accent) 35%,transparent) !important; }
html[data-design="modern"] .main.modern-workspace { min-width: 0; color: var(--theme-text); background: var(--theme-bg) !important; container: themed-workspace / inline-size; }
html[data-design="modern"] .modern-app-topbar {
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
  background: color-mix(in srgb,var(--theme-surface) 94%,transparent) !important;
  box-shadow: 0 1px 0 var(--theme-border);
}
html[data-design="modern"] .modern-app-topbar :is(.modern-breadcrumb,.modern-breadcrumb span,.modern-breadcrumb strong,.branch-select span) { color: var(--theme-muted) !important; }
html[data-design="modern"] .modern-app-topbar :is(select,.button,.branch-account-button) { border-color: var(--theme-border) !important; color: var(--theme-text) !important; background: var(--theme-surface-raised) !important; }
html[data-design="modern"] .design-preview-switch { border-color: var(--theme-border) !important; background: var(--theme-surface-raised) !important; }
html[data-design="modern"] .design-preview-switch button { color: var(--theme-muted) !important; }
html[data-design="modern"] .design-preview-switch button.active { color: var(--theme-accent-contrast) !important; background: var(--theme-accent) !important; }
html[data-design="modern"] .sync-pill,
html[data-design="modern"] .version-pill { border-color: var(--theme-border) !important; color: var(--theme-accent) !important; background: color-mix(in srgb,var(--theme-accent) 11%,var(--theme-surface)) !important; }
html[data-design="modern"] .modern-module-frame { --workspace-bg:var(--theme-bg); --workspace-panel:var(--theme-surface); --workspace-panel-2:var(--theme-surface-raised); --workspace-border:var(--theme-border); --workspace-text:var(--theme-text); --workspace-muted:var(--theme-muted); }
html[data-design="modern"] .m-screen {
  --m-bg:var(--theme-bg);
  --m-surface:var(--theme-surface);
  --m-surface-2:var(--theme-surface-raised);
  --m-surface-soft:color-mix(in srgb,var(--theme-surface-raised) 86%,var(--theme-bg));
  --m-line:var(--theme-border);
  --m-line-strong:color-mix(in srgb,var(--theme-border) 70%,var(--theme-text));
  --m-text:var(--theme-text);
  --m-muted:var(--theme-muted);
  --m-subtle:color-mix(in srgb,var(--theme-muted) 74%,var(--theme-bg));
  --m-accent:var(--theme-accent);
  --m-accent-soft:color-mix(in srgb,var(--theme-accent) 13%,transparent);
  gap: calc(15px * var(--theme-density,1));
  color: var(--theme-text) !important;
}
html[data-design="modern"] .modern-tracking-layout .m-tracking-stage { min-width: 0; display: grid; gap: 15px; }
html[data-design="modern"] .m-command-header { border-color: var(--theme-border) !important; }
html[data-design="modern"] :is(.m-command-title,.m-content-block h2,.m-content-block h3,.m-panel h2,.m-panel h3,.m-stat-value) { color: var(--theme-text) !important; }
html[data-design="modern"] :is(.m-command-description,.m-command-kicker,.m-stat-label,.m-stat-note,.m-content-block p,.m-content-block small,.m-panel p,.m-panel small) { color: var(--theme-muted) !important; }
html[data-design="modern"] :is(.m-panel,.m-content-block,.m-data-viewport,.m-control-bar,.m-stat-strip,.m-stat,.m-upload-stage,.m-guidance,.m-inbox-item,.m-settings-nav,.m-admin-nav,.m-cash-equation,.m-cash-channel-rail,.m-month-rail,.m-audit-overview) {
  border-color: var(--theme-border) !important;
  border-radius: var(--theme-panel-radius) !important;
  color: var(--theme-text) !important;
  background: var(--theme-surface) !important;
  box-shadow: none;
}
html[data-design="modern"] :is(.m-stat,.m-control-bar,.m-guidance,.m-settings-nav a,.m-admin-nav a) { border-radius: var(--theme-control-radius) !important; }
html[data-design="modern"] .m-content-block { box-shadow: var(--theme-shadow); }
html[data-design="modern"] .modern-workspace :is(.card,.table-wrap,.report-preview,.expense-month-bar,.cash-summary,.account-summary,.profit-formula,.notice-mode,.notice-tabs,.check-list,.check-card,.branch-row,.access-row,.monthly-step,.monthly-certificate,.processor-row,.approval-summary,.support-toolbar,.support-case-card,.courier-card,.courier-architecture,.courier-next-step,.period-bar) {
  border-color: var(--theme-border) !important;
  border-radius: var(--theme-panel-radius) !important;
  color: var(--theme-text) !important;
  background: var(--theme-surface) !important;
  box-shadow: none !important;
}
html[data-design="modern"] .modern-workspace :is(.card,.table-wrap,.support-case-card,.courier-card) :is(h1,h2,h3,h4,strong,b) { color: var(--theme-text) !important; }
html[data-design="modern"] .modern-workspace :is(.card,.table-wrap,.support-case-card,.courier-card) :is(p,small,.muted,.helper,span:not(.badge)) { color: var(--theme-muted); }
html[data-design="modern"] .modern-workspace table { color: var(--theme-text) !important; background: var(--theme-surface) !important; }
html[data-design="modern"] .modern-workspace :is(thead,th) { border-color: var(--theme-border) !important; color: var(--theme-muted) !important; background: var(--theme-surface-raised) !important; }
html[data-design="modern"] .modern-workspace tbody tr,
html[data-design="modern"] .modern-workspace tbody tr:nth-child(odd),
html[data-design="modern"] .modern-workspace tbody tr:nth-child(even),
html[data-design="modern"] .modern-workspace .receiving-table .receiving-row-done { border-color: var(--theme-border) !important; color: var(--theme-text) !important; background: var(--theme-surface) !important; }
html[data-design="modern"] .modern-workspace tbody tr:nth-child(even) { background: color-mix(in srgb,var(--theme-surface-raised) 58%,var(--theme-surface)) !important; }
html[data-design="modern"] .modern-workspace tbody tr:hover { background: color-mix(in srgb,var(--theme-accent) 8%,var(--theme-surface)) !important; }
html[data-design="modern"] .modern-workspace :is(td,td strong,td b,td.money) { color: var(--theme-text) !important; }
html[data-design="modern"] .modern-workspace :is(td small,td .muted) { color: var(--theme-muted) !important; }
html[data-design="modern"] :is(.modal,.modal-head,.modal-body,.modal-foot) { border-color: var(--theme-border) !important; color: var(--theme-text) !important; background: var(--theme-surface) !important; }
html[data-design="modern"] .modal-backdrop { background: color-mix(in srgb,var(--theme-bg) 65%,rgba(0,0,0,.66)); }
html[data-design="modern"] :is(input,select,textarea,.input-readonly) { border-color: var(--theme-border) !important; color: var(--theme-text) !important; background: var(--theme-surface-raised) !important; }
html[data-design="modern"] :is(input,select,textarea)::placeholder { color: color-mix(in srgb,var(--theme-muted) 78%,transparent) !important; }
html[data-design="modern"] :is(input,select,textarea):focus { border-color: var(--theme-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb,var(--theme-accent) 17%,transparent) !important; }
html[data-design="modern"] .button { border-color: var(--theme-border); border-radius: var(--theme-control-radius); color: var(--theme-text); background: var(--theme-surface-raised); }
html[data-design="modern"] .button.primary { border-color: var(--theme-accent) !important; color: var(--theme-accent-contrast) !important; background: var(--theme-accent) !important; }
html[data-design="modern"] .button:hover { filter: brightness(1.04); }
html[data-design="modern"] .global-alert { border-color: var(--theme-border) !important; color: var(--theme-text) !important; background: var(--theme-surface) !important; }
html[data-design="modern"] .global-alert small { color: var(--theme-muted) !important; }
/* The legacy stylesheet contains high-specificity Beta colors. This final layer
   makes light and dark themes equally legible in every converted module. */
html[data-design="modern"][data-theme] .modern-workspace :is(h1,h2,h3,h4,label,strong) { color: var(--theme-text) !important; }
html[data-design="modern"][data-theme] .modern-workspace :is(p,small,.muted,.helper,.subhead) { color: var(--theme-muted) !important; }
html[data-design="modern"][data-theme] .modern-workspace :is(.field input,.field select,.field textarea,.period-bar input,.expense-month-bar input,.branch-select select,.pdf-actual-input,.notice-search,.receivable-customer-picker>input[type="search"],.receiving-scanner input,.receiving-batch-input,.tracking-client-search input,.tracking-report-panel textarea) {
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
  background: var(--theme-surface-raised) !important;
}
html[data-design="modern"][data-theme] .modern-workspace :is(.period-bar,.expense-month-bar) {
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
  background: var(--theme-surface) !important;
}
html[data-design="modern"][data-theme] .modern-workspace :is(.period-bar,.expense-month-bar) :is(span,strong,label) { color: var(--theme-text) !important; }
html[data-design="modern"][data-theme] .modern-workspace .button {
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
  background: var(--theme-surface-raised) !important;
}
html[data-design="modern"][data-theme] .modern-workspace .button.primary {
  border-color: var(--theme-accent) !important;
  color: var(--theme-accent-contrast) !important;
  background: var(--theme-accent) !important;
}
html[data-design="modern"][data-theme] .modern-workspace :is(.tracking-search-copy h2,.tracking-result-title h2,.tracking-current-report p,.tracking-panel-heading h3) { color: var(--theme-text) !important; }

/* Modals live outside .modern-workspace. Override the original Beta palette with
   the active theme so every dialog remains readable in both light and dark themes. */
html[data-design="modern"][data-theme] .modal {
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
  background: var(--theme-surface) !important;
}
html[data-design="modern"][data-theme] .modal :is(.modal-head,.modal-body,.modal-foot) {
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
  background: var(--theme-surface) !important;
}
html[data-design="modern"][data-theme] .modal :is(h1,h2,h3,h4,strong,b,label,legend) { color: var(--theme-text) !important; }
html[data-design="modern"][data-theme] .modal :is(p,small,.muted,.helper) { color: var(--theme-muted) !important; }
html[data-design="modern"][data-theme] .modal :is(input,select,textarea,.input-readonly) {
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
  background: var(--theme-surface-raised) !important;
}
html[data-design="modern"][data-theme] .modal :is(
  .check-row,.preview-stat,.notice-email-modal,.receiving-manual-confirm-item,
  .receiving-manual-confirm-check,.receiving-batch-result,.receivable-customer-picker,
  .receivable-customer-result,.receivable-customer-selected,.receivable-customer-empty,
  .office-bank-distribution,.office-bank-row,.office-debit-toggle,.office-allocation-preview,
  .office-existing-receipt,.return-items-editor,.return-item-row,.return-credit-preview,
  .theme-current-note,.theme-choice
) {
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
  background: var(--theme-surface-raised) !important;
}
html[data-design="modern"][data-theme] .modal .theme-choice.active {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--theme-accent) 17%,transparent) !important;
}
html[data-design="modern"][data-theme] .modal .button {
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
  background: var(--theme-surface-raised) !important;
}
html[data-design="modern"][data-theme] .modal .button.primary {
  border-color: var(--theme-accent) !important;
  color: var(--theme-accent-contrast) !important;
  background: var(--theme-accent) !important;
}
html[data-design="modern"] .modern-dashboard-head :is(h1,strong),
html[data-design="modern"] .modern-card-header :is(h2,strong),
html[data-design="modern"] .modern-metric-card strong { color: var(--theme-text) !important; }
html[data-design="modern"] .modern-dashboard-head :is(p,span),
html[data-design="modern"] .modern-card-header p,
html[data-design="modern"] .modern-metric-card :is(span,p),
html[data-design="modern"] .modern-activity-row small,
html[data-design="modern"] .modern-attention-list small { color: var(--theme-muted) !important; }
html[data-design="modern"] :is(.modern-metric-card,.modern-chart-card,.modern-finance-card,.modern-recent-card,.modern-attention-card) {
  border-color: var(--theme-border) !important;
  border-radius: var(--theme-panel-radius) !important;
  color: var(--theme-text) !important;
  background: var(--theme-surface) !important;
  box-shadow: none;
}
html[data-design="modern"] .modern-metric-card > p,
html[data-design="modern"] .modern-finance-card footer,
html[data-design="modern"] .modern-activity-head,
html[data-design="modern"] .modern-activity-row,
html[data-design="modern"] .modern-attention-list > button { border-color: var(--theme-border) !important; }
html[data-design="modern"] .modern-activity-row:hover,
html[data-design="modern"] .modern-attention-list > button:hover { background: color-mix(in srgb,var(--theme-accent) 7%,var(--theme-surface)) !important; }
html[data-design="modern"] .modern-chart-plot,
html[data-design="modern"] .modern-finance-list i { background-color: var(--theme-surface-raised) !important; }
html[data-design="modern"] .modern-live-pill { color: var(--theme-accent) !important; background: color-mix(in srgb,var(--theme-accent) 11%,transparent) !important; }

/* Tema 1 · Diseño Beta: continuidad con el panel aprobado. */
html[data-theme="beta"] .m-content-block,
html[data-theme="beta"] .tracking-package-result,
html[data-theme="beta"] .tracking-client-panel,
html[data-theme="beta"] .tracking-current-report,
html[data-theme="beta"] .tracking-report-panel { background: linear-gradient(145deg,var(--theme-surface),color-mix(in srgb,var(--theme-surface-raised) 35%,var(--theme-surface))) !important; }

/* Tema 2 · Ejecutiva clara: lienzo corporativo, navegación compacta y paneles planos. */
html[data-theme="executive"] .modern-sidebar { box-shadow: 8px 0 30px rgba(13,54,60,.08); }
html[data-theme="executive"] .modern-nav { gap: 2px; }
html[data-theme="executive"] .modern-nav .nav-button { min-height: 38px; border-radius: 7px !important; }
html[data-theme="executive"] .m-command-header { padding: 8px 0 20px; }
html[data-theme="executive"] .m-content-block { border-top: 3px solid color-mix(in srgb,var(--theme-accent) 28%,var(--theme-border)) !important; }
html[data-theme="executive"] .modern-metric-grid { border: 1px solid var(--theme-border); border-radius: var(--theme-panel-radius); gap: 1px; overflow: hidden; background: var(--theme-border); }
html[data-theme="executive"] .modern-metric-card { border: 0 !important; border-radius: 0 !important; }
html[data-theme="executive"] :is(.m-stat-strip,.m-analytics-highlights,.m-workflow-summary) { gap: 1px; overflow: hidden; border: 1px solid var(--theme-border); border-radius: var(--theme-panel-radius); background: var(--theme-border); }
html[data-theme="executive"] :is(.m-stat-strip,.m-analytics-highlights,.m-workflow-summary) > .m-stat { border: 0 !important; border-radius: 0 !important; }

/* Tema 3 · Centro de control: alta densidad, ángulos técnicos y barras de mando. */
html[data-theme="control-dark"] .main.modern-workspace { padding-inline: clamp(14px,2vw,26px); }
html[data-theme="control-dark"] .modern-sidebar { border-right: 1px solid var(--theme-border); }
html[data-theme="control-dark"] .modern-nav .nav-button { min-height: 34px; padding-block: 5px; border-radius: 4px !important; font-size: 11px; }
html[data-theme="control-dark"] .modern-nav-heading { margin-top: 8px; font-size: 8px; letter-spacing: .16em; }
html[data-theme="control-dark"] .m-command-header { padding-bottom: 11px; }
html[data-theme="control-dark"] .m-command-title { font-size: clamp(22px,2vw,30px); }
html[data-theme="control-dark"] :is(.m-content-block,.m-panel,.m-data-viewport,.tracking-search-shell,.tracking-package-result,.tracking-client-panel,.tracking-current-report,.tracking-report-panel) { border-radius: 6px !important; }
html[data-theme="control-dark"] .m-content-block { box-shadow: inset 0 1px color-mix(in srgb,var(--theme-accent) 13%,transparent); }
html[data-theme="control-dark"] .modern-workspace :is(th,td) { padding-block: 8px !important; }
html[data-theme="control-dark"] .m-stat { min-height: 88px; padding: 12px !important; }
html[data-theme="control-dark"] .m-stat-value { font: 780 20px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
html[data-theme="control-dark"] :is(.modern-metric-card,.modern-chart-card,.modern-finance-card,.modern-recent-card,.modern-attention-card) { border-radius: 6px !important; }
html[data-theme="control-dark"] .modern-metric-grid { gap: 7px; }

/* Tema 4 · Cristal suave: espacios flotantes y capas translúcidas. */
html[data-theme="soft-glass"] body { background: radial-gradient(circle at 15% 5%,#d9eef6 0,transparent 34%),radial-gradient(circle at 90% 35%,#e1e7ff 0,transparent 31%),var(--theme-bg); background-attachment: fixed; }
html[data-theme="soft-glass"] .app-shell { gap: 14px; padding: 14px; background: transparent; }
html[data-theme="soft-glass"] .modern-sidebar { top: 14px; height: calc(100dvh - 28px); border: 1px solid rgba(255,255,255,.7); border-radius: 24px; color: var(--theme-sidebar-text) !important; background: color-mix(in srgb,var(--theme-sidebar-bg) 78%,transparent) !important; box-shadow: 0 22px 50px rgba(53,91,108,.15); backdrop-filter: blur(22px) saturate(130%); }
html[data-theme="soft-glass"] .main.modern-workspace { padding-top: 0; background: transparent !important; }
html[data-theme="soft-glass"] .modern-app-topbar { margin-top: 0 !important; border: 1px solid rgba(255,255,255,.75) !important; border-radius: 20px; box-shadow: 0 16px 40px rgba(53,91,108,.09); backdrop-filter: blur(20px); }
html[data-theme="soft-glass"] :is(.m-content-block,.m-panel,.m-data-viewport,.tracking-search-shell,.tracking-package-result,.tracking-client-panel,.tracking-current-report,.tracking-report-panel) { background: color-mix(in srgb,var(--theme-surface) 76%,transparent) !important; box-shadow: var(--theme-shadow); backdrop-filter: blur(18px) saturate(125%); }
html[data-theme="soft-glass"] :is(.modern-metric-card,.modern-chart-card,.modern-finance-card,.modern-recent-card,.modern-attention-card) { background: color-mix(in srgb,var(--theme-surface) 76%,transparent) !important; box-shadow: var(--theme-shadow); backdrop-filter: blur(18px) saturate(125%); }
html[data-theme="soft-glass"] .m-command-header { border: 0 !important; padding-inline: 7px; }

/* Tema 5 · Premium minimalista: composición editorial y líneas finas. */
html[data-theme="premium"] :is(.m-command-title,.m-content-block h2,.m-content-block h3,.tracking-search-copy h2,.tracking-result-title h2) { font-family: Georgia,"Times New Roman",serif; font-weight: 600 !important; letter-spacing: -.025em; }
html[data-theme="premium"] .modern-sidebar { border-right: 1px solid #384137; }
html[data-theme="premium"] .modern-sidebar .nav-button { border-radius: 0 !important; border-width: 0 0 1px !important; }
html[data-theme="premium"] .modern-sidebar .nav-button.active { box-shadow: inset 2px 0 #c7a66c; }
html[data-theme="premium"] .m-command-header { padding-block: 14px 24px; }
html[data-theme="premium"] :is(.m-content-block,.m-panel,.m-data-viewport,.m-control-bar,.m-stat,.tracking-search-shell,.tracking-package-result,.tracking-client-panel,.tracking-current-report,.tracking-report-panel) { border-radius: 2px !important; box-shadow: none; }
html[data-theme="premium"] :is(.modern-metric-card,.modern-chart-card,.modern-finance-card,.modern-recent-card,.modern-attention-card) { border-width: 1px 0 0 !important; border-radius: 0 !important; }
html[data-theme="premium"] .m-content-block { border-width: 1px 0 0 !important; }
html[data-theme="premium"] .m-stat-strip { border-width: 1px 0 !important; border-radius: 0 !important; }
html[data-theme="premium"] .button { text-transform: uppercase; letter-spacing: .045em; font-size: 10px; }

/* Tema 6 · Modular logística: navegación en mosaico y superficies bento. */
@media (min-width: 761px) {
  html[data-theme="logistics-modular"] .modern-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  html[data-theme="logistics-modular"] .modern-nav-heading { grid-column: 1 / -1; }
  html[data-theme="logistics-modular"] .modern-nav .nav-button { min-height: 62px; padding: 8px 5px; border: 1px solid var(--theme-border) !important; border-radius: 13px !important; display: grid; justify-items: center; gap: 3px; text-align: center; }
  html[data-theme="logistics-modular"] .modern-nav .nav-button .nav-icon { font-size: 19px; }
  html[data-theme="logistics-modular"] .modern-nav .nav-button > span:last-child { font-size: 9px; line-height: 1.15; }
}
html[data-theme="logistics-modular"] .m-content-sections,
html[data-theme="logistics-modular"] .m-ledger-sections,
html[data-theme="logistics-modular"] .m-analytics-sections { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 14px; }
html[data-theme="logistics-modular"] .m-content-block:has(.table-wrap),
html[data-theme="logistics-modular"] .m-content-block:has(.m-data-viewport),
html[data-theme="logistics-modular"] .m-content-block:has(.form-grid) { grid-column: 1 / -1; }
html[data-theme="logistics-modular"] .m-content-block { border-top: 3px solid color-mix(in srgb,var(--theme-accent) 44%,var(--theme-border)) !important; }
html[data-theme="logistics-modular"] .m-command-icon { rotate: 3deg; }
html[data-theme="logistics-modular"] .modern-dashboard-grid { grid-template-columns: minmax(0,1.45fr) minmax(280px,.55fr); }
html[data-theme="logistics-modular"] .modern-metric-card:nth-child(1) { border-top-color: #51d6a0 !important; }
html[data-theme="logistics-modular"] .modern-metric-card:nth-child(2) { border-top-color: #70a7ff !important; }
html[data-theme="logistics-modular"] .modern-metric-card:nth-child(3) { border-top-color: #b39cff !important; }
html[data-theme="logistics-modular"] .modern-metric-card:nth-child(4) { border-top-color: #f2ad62 !important; }
html[data-theme="logistics-modular"] .modern-metric-card { border-top-width: 3px !important; }

/* Responsive, zoom y uso como app en iPhone/Android. */
@container themed-workspace (max-width: 1060px) {
  .tracking-workspace { grid-template-columns: minmax(0,1fr); }
  .tracking-report-panel { position: static; }
  .theme-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 980px) {
  .theme-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tracking-workspace { grid-template-columns: minmax(0,1fr); }
  .tracking-report-panel { position: static; }
}
@media (max-width: 760px) {
  html[data-design="modern"] .app-shell { display: block !important; padding: 0 0 calc(96px + env(safe-area-inset-bottom,0px)); }
  html[data-design="modern"] .main.modern-workspace { padding-inline: 13px; }
  html[data-theme="soft-glass"] .modern-sidebar { top: auto; height: auto; border-radius: 18px 18px 0 0; backdrop-filter: blur(22px); }
  html[data-theme="soft-glass"] .modern-app-topbar { margin-top: 0 !important; }
  html[data-theme="logistics-modular"] .m-content-sections,
  html[data-theme="logistics-modular"] .m-ledger-sections,
  html[data-theme="logistics-modular"] .m-analytics-sections { grid-template-columns: minmax(0,1fr); }
  .design-preview-switch button small { max-width: 96px; }
  .theme-current-note { grid-template-columns: 1fr; }
  .theme-current-note > small { text-align: left; }
  .theme-gallery,
  .theme-gallery.compact { grid-template-columns: minmax(0,1fr); }
  .theme-choice { grid-template-columns: 78px minmax(0,1fr) 22px; }
  .theme-choice-preview { width: 78px; height: 54px; grid-template-columns: 21px 1fr; }
  .tracking-search-shell { grid-template-columns: minmax(0,1fr); align-items: stretch; }
  .tracking-shared-client { grid-template-columns: minmax(0,1fr); }
  .tracking-shared-selected,
  .tracking-shared-empty { padding-left: 0; }
  .tracking-search-form > div { grid-template-columns: 32px minmax(0,1fr); }
  .tracking-search-form > div .button { grid-column: 1 / -1; width: 100%; min-height: 46px; }
  .tracking-workspace { grid-template-columns: minmax(0,1fr); }
  .tracking-state-card { min-height: 260px; padding: 24px 18px; align-items: flex-start; flex-direction: column; }
  .tracking-result-title { display: grid; }
  .tracking-latest-status { grid-template-columns: minmax(0,1fr); }
  .tracking-client-search > div { grid-template-columns: minmax(0,1fr); }
  .tracking-client-search .button { width: 100%; }
  .tracking-current-report .row-actions { display: grid; grid-template-columns: minmax(0,1fr); }
  .tracking-current-report .button { width: 100%; }
  .tracking-report-panel textarea { min-height: 245px; }
  .tracking-report-actions { grid-template-columns: minmax(0,1fr); }
  .tracking-report-actions .button { width: 100%; }
}
@media (max-width: 430px) {
  .theme-choice { grid-template-columns: 62px minmax(0,1fr) 20px; gap: 9px; padding: 9px; }
  .theme-choice-preview { width: 62px; height: 47px; grid-template-columns: 17px 1fr; }
  .theme-choice-copy strong { font-size: 13px; }
  .theme-choice-copy small { font-size: 10px; }
  .tracking-package-result,
  .tracking-client-panel,
  .tracking-current-report,
  .tracking-report-panel { padding: 15px; }
  .tracking-shared-heading { grid-template-columns: 34px minmax(0,1fr); }
  .tracking-shared-heading em { grid-column: 2; width: max-content; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-choice { transition: none; }
  .tracking-spinner { animation-duration: 1.8s; }
}