:root {
  color-scheme: light;
  --bg: #f5f7fa;
  --panel: #ffffff;
  --panel-soft: #f9fafb;
  --text: #17202a;
  --muted: #667085;
  --line: #d9dee7;
  --line-strong: #b8c1ce;
  --accent: #7c2d8f;
  --accent-strong: #5f1d70;
  --success: #0f8a62;
  --danger: #b42318;
  --warning: #9b5d00;
  --shadow: 0 18px 45px rgba(18, 25, 38, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

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

[hidden] {
  display: none !important;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #eef2f6;
}

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

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.login-brand strong {
  font-size: 20px;
}

.login-brand span,
.login-copy,
.password-panel > p,
.compact-heading p {
  margin: 4px 0 0;
  color: var(--muted);
}

.login-panel h1,
.password-panel h2 {
  margin: 4px 0 0;
}

.login-form,
.password-panel form {
  display: grid;
  gap: 16px;
}

.pin-login {
  display: grid;
  gap: 12px;
}

.pin-display {
  display: grid;
  place-items: center;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--text);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.18em;
}

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.pin-pad button {
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
}

.pin-pad button:active {
  border-color: var(--purple);
  color: var(--purple);
  background: #faf5ff;
}

.form-error {
  margin: 0;
  color: var(--danger);
  font-size: 13px;
  font-weight: 500;
}

.password-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(16, 24, 40, 0.72);
}

.password-panel {
  width: min(100%, 460px);
  border-radius: 8px;
  background: #ffffff;
  padding: 28px;
  box-shadow: var(--shadow);
}

.password-input {
  position: relative;
  display: block;
}

.password-input input {
  padding-right: 46px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
}

.password-toggle:hover {
  background: #f2f4f7;
}

.password-toggle img {
  width: 19px;
  height: 19px;
}

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

h1, h2, h3, h4, h5, h6, strong, b, th {
  font-weight: 500;
}

input, select, textarea, option {
  font-weight: 400;
}

button {
  font-weight: 500;
  cursor: pointer;
}

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

.sidebar {
  min-width: 0;
  background: #101828;
  color: #ffffff;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  overflow: hidden;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
}

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

.brand strong {
  font-size: 18px;
}

.brand span {
  color: #b8c1ce;
  font-size: 13px;
  margin-top: 2px;
}

.nav {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.nav-item {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #d0d5dd;
  text-align: left;
  padding: 0 12px;
}

.nav-item.active,
.nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.session-card {
  margin-top: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.session-card span,
.session-card small {
  color: #b8c1ce;
}

.session-card strong,
.session-card span,
.session-card small {
  display: block;
}

.session-card strong {
  margin: 6px 0 2px;
}

.session-logout {
  width: 100%;
  min-height: 34px;
  margin-top: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: transparent;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
}

.app-version {
  display: block;
  margin-top: 0;
  color: #7d89a0;
  font-size: 11px;
  text-align: center;
}

.role-switcher {
  margin-top: 12px;
  color: #d0d5dd;
  font-size: 12px;
}

.role-switcher select {
  margin-top: 6px;
  min-height: 36px;
  border-color: rgba(255, 255, 255, 0.22);
  background: #1d2939;
  color: #ffffff;
}

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

body[data-view="movements"] .movement-form {
  display: none;
}

body[data-view="movements"] .content-grid {
  grid-template-columns: minmax(0, 1fr);
}

.assigned-agent {
  display: block;
  padding: 10px 0 11px;
  color: #344054;
  font-weight: 500;
}

.workspace {
  min-width: 0;
  width: 100%;
  padding: 28px;
  display: grid;
  gap: 22px;
}

#operationPanel {
  order: 1;
}

#dashboardSummary {
  order: 2;
}

#monthlyPanel {
  order: 3;
}

#clientsView,
#settingsView {
  order: 1;
}

.topbar,
.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.topbar h1,
.section-heading h2 {
  margin: 0;
  letter-spacing: 0;
}

.topbar h1 {
  font-size: 30px;
}

.section-heading h2 {
  font-size: 18px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.topbar-actions,
.form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.primary-button,
.ghost-button,
.link-button {
  min-height: 40px;
  border-radius: 8px;
  padding: 0 14px;
  border: 1px solid transparent;
  font-weight: 500;
}

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

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

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

.ghost-button:hover {
  border-color: var(--line-strong);
}

.link-button {
  background: transparent;
  color: var(--accent);
  padding: 0;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.metric,
.movement-form,
.history-panel,
.monthly-panel,
.clients-strip,
.cash-panel {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.metric {
  padding: 16px;
}

.metric span,
.metric small {
  color: var(--muted);
}

.metric strong {
  display: block;
  margin: 8px 0 4px;
  font-size: 24px;
  letter-spacing: 0;
}

.cash-metric {
  border-color: transparent;
}

.branch-tone-1 {
  background: #eef8f3;
}

.branch-tone-2 {
  background: #f3f6ff;
}

.branch-tone-3 {
  background: #fff7e8;
}

.branch-tone-4 {
  background: #f7f0ff;
}

.branch-tone-5 {
  background: #ecfbff;
}

.branch-tone-6 {
  background: #fff0f3;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(360px, 480px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
}

#operationPanel .history-panel {
  grid-column: 1 / -1;
}

.movement-form,
.history-panel,
.monthly-panel,
.requests-panel,
.admin-panel,
.clients-strip,
.cash-panel,
.refacil-view {
  padding: 18px;
}

.monthly-panel,
.requests-panel {
  display: grid;
  gap: 16px;
}

.cash-panel {
  display: grid;
  gap: 20px;
}

.refacil-view {
  display: grid;
  gap: 18px;
}

body[data-view="refacil"] .workspace {
  background: #f4f8fc;
}

.refacil-view .eyebrow,
.refacil-view .link-button {
  color: #0969da;
}

.refacil-view .metric,
.refacil-view .movement-form {
  border-color: #d7e3f1;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(16, 43, 84, 0.08);
}

.refacil-view .metric {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.refacil-view .metric strong {
  color: #064fa8;
}

.refacil-view .status-pill {
  background: #e8f2ff;
  color: #064fa8;
}

.refacil-view input:focus,
.refacil-view select:focus,
.refacil-view textarea:focus {
  border-color: #0969da;
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.12);
}

.refacil-type-select {
  border-color: #cfe0f2;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.refacil-type-select.is-bill-payment {
  background: #eef7ff;
  border-color: #b8d8f8;
  color: #07518f;
}

.refacil-type-select.is-money-send {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.refacil-type-select.is-money-reception {
  background: #eefdf5;
  border-color: #bbf7d0;
  color: #166534;
}

.refacil-type-select.is-cash-expense {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #9f1239;
}

.refacil-type-select option {
  color: #102a43;
}

.refacil-type-select .refacil-option-bill {
  background: #eef7ff;
}

.refacil-type-select .refacil-option-send {
  background: #fff7ed;
}

.refacil-type-select .refacil-option-reception {
  background: #eefdf5;
}

.refacil-type-select .refacil-option-expense {
  background: #fff1f2;
}

.refacil-view .primary-button {
  border-color: #0969da;
  background: #0969da;
}

.refacil-view .primary-button:hover {
  border-color: #064fa8;
  background: #064fa8;
}

.refacil-view .ghost-button,
.refacil-view .mini-button {
  border-color: #d7e3f1;
  color: #064fa8;
}

.refacil-view .ghost-button:hover,
.refacil-view .mini-button:hover {
  border-color: #0969da;
  background: #e8f2ff;
}

.refacil-impact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border: 1px solid #d7e3f1;
  border-radius: 8px;
  background: #f7fbff;
  padding: 12px;
}

.refacil-impact div {
  display: grid;
  gap: 4px;
}

.refacil-impact span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.refacil-impact strong {
  font-size: 20px;
  color: #064fa8;
}

.cash-balance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 14px;
}

.cash-branch-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.cash-branch-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(16, 24, 40, 0.1);
}

.cash-branch-heading strong {
  font-size: 18px;
}

.cash-branch-heading small {
  color: var(--muted);
  font-weight: 500;
}

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

.cash-balance-tile {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  padding: 10px;
}

.cash-balance-tile span,
.cash-balance-tile small {
  color: var(--muted);
}

.cash-balance-tile strong {
  font-size: 16px;
  word-break: break-word;
}

.cash-branch-row td {
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0;
}

.cash-code-layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body[data-role="cashier"] .cash-code-layout {
  grid-template-columns: minmax(0, 1fr);
}

body[data-role="agent"] .cash-code-layout {
  grid-template-columns: minmax(280px, 420px);
}

body[data-role="agent"] .processed-codes-panel {
  align-self: start;
}

.cash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 420px));
  gap: 18px;
  align-items: start;
}

.cash-form,
.cash-history {
  width: 100%;
}

.cash-summary-panel {
  display: grid;
  gap: 14px;
}

.cash-adjustment-current {
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  background: #eef2ff;
  color: #24304a;
  font-size: 14px;
  font-weight: 500;
  padding: 12px;
}

.cash-filter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.cash-filter-row input,
.cash-filter-row select {
  min-height: 44px;
}

.cash-mobile-tabs,
.cash-mobile-global-filter,
.cash-mobile-branches-panel {
  display: none;
}

.cash-mobile-branches {
  display: grid;
  gap: 10px;
}

.cash-mobile-branch-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  padding: 12px;
}

.cash-mobile-branch-card.branch-tone-1 {
  background: #eef8f3;
}

.cash-mobile-branch-card.branch-tone-2 {
  background: #f3f6ff;
}

.cash-mobile-branch-card.branch-tone-3 {
  background: #fff7e8;
}

.cash-mobile-branch-card.branch-tone-4 {
  background: #f7f0ff;
}

.cash-mobile-branch-card.branch-tone-5 {
  background: #ecfbff;
}

.cash-mobile-branch-card.branch-tone-6 {
  background: #fff0f3;
}

.cash-mobile-branch-card.is-informational {
  border-style: dashed;
}

.cash-mobile-branch-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.cash-mobile-branch-head strong,
.cash-mobile-branch-head small {
  display: block;
}

.cash-mobile-branch-head small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 500;
}

.cash-mobile-branch-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cash-mobile-branch-metrics div {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  padding: 8px;
}

.cash-mobile-branch-metrics small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.cash-mobile-branch-metrics strong {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  word-break: break-word;
}

.dashboard-code-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.dashboard-code-card {
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 12px;
}

.dashboard-code-card small {
  color: var(--muted);
  display: block;
  font-weight: 500;
  margin-top: 3px;
}

.processed-codes-panel {
  background: #fbfcfe;
}

.payment-code-table {
  min-width: 820px;
}

.payment-code-row.branch-tone-1 td {
  background: #eef8f3;
}

.payment-code-row.branch-tone-2 td {
  background: #f3f6ff;
}

.payment-code-row.branch-tone-3 td {
  background: #fff7e8;
}

.payment-code-row.branch-tone-4 td {
  background: #f7f0ff;
}

.payment-code-row.branch-tone-5 td {
  background: #ecfbff;
}

.payment-code-row.branch-tone-6 td {
  background: #fff0f3;
}

body[data-role="cashier"] .payment-code-branch {
  display: none;
}

.compact-pagination {
  justify-content: space-between;
}

.compact-filter {
  display: grid;
  gap: 4px;
  min-width: 150px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.compact-filter-row {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
}

.compact-filter select {
  min-height: 36px;
  padding: 0 10px;
}

.month-picker {
  min-width: 180px;
  max-width: 220px;
}

.monthly-commission {
  min-width: 190px;
  display: grid;
  gap: 3px;
  border-left: 1px solid var(--line);
  padding-left: 16px;
}

.monthly-commission span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.monthly-commission strong {
  font-size: 20px;
}

.monthly-table {
  min-width: 1160px;
}

.monthly-table td:not(:first-child),
.monthly-table th:not(:first-child) {
  text-align: right;
}

.net-positive {
  color: var(--success);
  font-weight: 500;
}

.net-negative {
  color: var(--danger);
  font-weight: 500;
}

.movement-form {
  display: grid;
  gap: 16px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
  align-items: start;
}

label {
  display: grid;
  gap: 7px;
  color: #344054;
  font-weight: 400;
  font-size: 14px;
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  padding: 0 12px;
  outline: none;
}

.client-picker {
  position: relative;
  display: block;
}

.client-suggestions {
  position: absolute;
  z-index: 25;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(16, 24, 40, 0.16);
  padding: 5px;
}

.client-suggestions button {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 8px 10px;
  text-align: left;
}

.client-suggestions button:hover,
.client-suggestions button:focus {
  background: #f4ebff;
  outline: none;
}

.client-suggestions .create-client-option {
  border-top: 1px solid var(--line);
  border-radius: 0 0 6px 6px;
  color: var(--accent);
}

.client-suggestions small {
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.client-no-results {
  display: block;
  color: var(--muted);
  padding: 12px 10px;
  font-size: 13px;
  font-weight: 500;
}

.inline-client-add {
  justify-self: start;
  margin-top: 2px;
}

textarea {
  resize: vertical;
  min-height: 88px;
  padding-top: 10px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 45, 143, 0.14);
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  border-radius: 8px;
  background: #eef1f5;
}

.segment {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}

.segment.type-compra {
  color: var(--success);
}

.segment.type-venta {
  color: var(--danger);
}

.segment.type-compra.active {
  background: #e7f8f1;
  border-color: #75c7a5;
  color: var(--success);
  box-shadow: 0 1px 3px rgba(18, 25, 38, 0.14);
}

.segment.type-venta.active {
  background: #fff1ed;
  border-color: #f7a08a;
  color: var(--danger);
  box-shadow: 0 1px 3px rgba(18, 25, 38, 0.14);
}

.quick-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 42px;
  align-items: center;
}

.choice-button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  padding: 0 13px;
  font-weight: 500;
}

.choice-button img {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.choice-button span {
  min-width: 0;
}

.choice-button.active {
  border-color: var(--accent);
  background: #f4ebff;
  color: var(--accent);
}

.option-currency-usdt,
.coin-usdt {
  background: #e7f8f1;
  border-color: #a6e4c8;
  color: #087443;
}

.option-currency-bitcoin,
.coin-bitcoin {
  background: #fff6df;
  border-color: #f6c85f;
  color: #8a4b00;
}

.option-currency-ethereum,
.coin-ethereum {
  background: #eef4ff;
  border-color: #b2ccff;
  color: #175cd3;
}

.option-currency-litecoin,
.coin-litecoin {
  background: #f2f4f7;
  border-color: #cfd4dc;
  color: #344054;
}

.option-currency-tron,
.coin-tron {
  background: #fff1f3;
  border-color: #fda4af;
  color: #be123c;
}

.option-currency-usdt.active,
.option-currency-bitcoin.active,
.option-currency-ethereum.active,
.option-currency-litecoin.active,
.option-currency-tron.active {
  box-shadow: inset 0 0 0 2px currentColor, 0 1px 3px rgba(18, 25, 38, 0.14);
}

.currency-choice .choice-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 86px;
}

.status-pill,
.type-pill,
.currency-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.status-pill {
  background: #f4ebff;
  color: var(--accent);
}

.type-pill.compra {
  background: #e7f8f1;
  color: var(--success);
}

.type-pill.venta {
  background: #fff1ed;
  color: var(--danger);
}

.currency-pill {
  background: #eef4ff;
  color: #175cd3;
}

.total-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  border: 1px solid #c7d7fe;
  border-radius: 8px;
  background: #f5f8ff;
  padding: 0 14px;
}

.total-box span {
  color: #344054;
  font-weight: 500;
}

.total-box strong {
  font-size: 22px;
  letter-spacing: 0;
}

.commission-field {
  border: 1px solid #f6c85f;
  border-radius: 8px;
  background: #fffaf0;
  padding: 12px;
}

.commission-field small {
  color: #7a2e0e;
  font-weight: 500;
}

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

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.checkbox-field input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}

.checkbox-field strong,
.checkbox-field small {
  display: block;
}

.checkbox-field small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 500;
}

.order-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #ffffff;
}

.order-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 45, 143, 0.14);
}

.order-input strong {
  padding-left: 12px;
  color: var(--muted);
}

.order-input input,
.order-input input:focus {
  border: 0;
  box-shadow: none;
}

.cop-input {
  position: relative;
  display: block;
}

.cop-input > span {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--muted);
}

.cop-input input {
  padding-left: 28px;
  font-variant-numeric: tabular-nums;
}

.price-alert {
  display: grid;
  gap: 4px;
  border: 1px solid #fdb022;
  border-radius: 8px;
  background: #fffaeb;
  color: #7a2e0e;
  padding: 12px 14px;
}

.price-alert[hidden] {
  display: none;
}

.price-alert strong {
  font-size: 14px;
}

.price-alert span {
  font-size: 13px;
  line-height: 1.35;
}

.price-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #c7d7fe;
  border-radius: 8px;
  background: #f5f8ff;
  color: #344054;
  padding: 10px 12px;
}

.price-suggestion[hidden] {
  display: none;
}

.price-suggestion span {
  font-size: 13px;
  line-height: 1.35;
}

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

.blockchain-check h2 {
  font-size: 16px;
}

.tx-list-field {
  display: grid;
  gap: 7px;
}

.field-label {
  color: #344054;
  font-size: 14px;
  font-weight: 500;
}

.tx-rows {
  display: grid;
  gap: 8px;
}

.tx-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
}

.tx-row input {
  min-width: 0;
}

.chain-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chain-actions span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.chain-pending {
  background: #f2f4f7;
  color: #475467;
}

.chain-valid {
  background: #e7f8f1;
  color: var(--success);
}

.chain-error {
  background: #fff1ed;
  color: var(--danger);
}

.split-panel {
  display: grid;
  gap: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.split-panel[hidden] {
  display: none;
}

.new-client-panel {
  display: grid;
  gap: 12px;
  border: 1px solid #c7d7fe;
  border-radius: 8px;
  background: #f5f8ff;
  padding: 14px;
}

.new-client-panel[hidden] {
  display: none;
}

.new-client-panel .section-heading {
  align-items: flex-start;
}

.new-client-panel .field-row {
  grid-template-columns: 1fr;
}

.compact-actions {
  justify-content: end;
}

.correction-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
  border: 1px solid #f6c85f;
  border-radius: 8px;
  background: #fff6df;
  color: #7a2e0e;
  padding: 12px 14px;
}

.correction-banner[hidden] {
  display: none;
}

.correction-banner strong {
  grid-column: 1;
  font-size: 14px;
}

.correction-banner span {
  grid-column: 1;
  font-size: 13px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.status-active {
  background: #e7f8f1;
  color: var(--success);
}

.status-voided {
  background: #fff1ed;
  color: var(--danger);
}

.status-corrected {
  background: #fff6df;
  color: #8a4b00;
}

.status-success {
  background: #e7f8f1;
  color: var(--success);
}

.status-danger {
  background: #fff1ed;
  color: var(--danger);
}

.movement-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.48);
}

.detail-dialog {
  width: min(760px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  overflow: auto;
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
  padding: 18px;
}

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

.user-editor-dialog {
  width: min(680px, 100%);
}

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

.user-editor-form select[multiple] {
  min-height: 108px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: var(--text);
}

.checkbox-row input {
  width: auto;
}

.detail-item {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 12px;
}

.detail-item span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

.detail-item strong {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

tr.is-voided td,
tr.is-corrected td {
  color: var(--muted);
}

.split-panel-head {
  display: grid;
  grid-template-columns: minmax(140px, 180px);
  gap: 12px;
  align-items: end;
}

.split-summary {
  min-height: 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
}

.split-summary span,
.split-summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.split-summary strong {
  justify-self: end;
  font-size: 18px;
}

.split-summary small {
  grid-column: 1 / -1;
}

.split-summary.ok small {
  color: var(--success);
}

.split-summary.pending small {
  color: var(--warning);
}

.split-summary.over small {
  color: var(--danger);
}

.split-rows {
  display: grid;
  gap: 10px;
}

.split-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 130px 38px;
  gap: 10px;
  align-items: end;
}

.split-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  padding-bottom: 12px;
}

.icon-button {
  width: 38px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--danger);
  font-size: 20px;
  line-height: 1;
}

.icon-button:disabled {
  color: var(--line-strong);
  cursor: not-allowed;
}

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

.filters > * {
  min-width: 0;
}

.table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  background: #ffffff;
}

.movements-table {
  min-width: 1280px;
}

.movements-table th:nth-child(5),
.movements-table td:nth-child(5),
.movements-table th:nth-child(6),
.movements-table td:nth-child(6) {
  min-width: 130px;
}

.movements-table th:last-child,
.movements-table td:last-child {
  min-width: 190px;
}

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

th {
  color: var(--muted);
  background: #f8fafc;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

td {
  font-size: 14px;
}

tr:last-child td {
  border-bottom: 0;
}

.amount-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pagination-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.icon-button {
  width: 34px;
  min-width: 34px;
  padding: 0;
  justify-content: center;
}

.order-link {
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
}

.clients-strip {
  display: grid;
  gap: 16px;
  align-self: start;
  align-content: start;
}

.admin-panel {
  display: grid;
  gap: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

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

.admin-card {
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 14px;
}

.admin-card h3 {
  margin: 0;
  font-size: 16px;
}

.admin-card > p {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.users-card {
  grid-column: 1 / -1;
}

.compact-heading {
  align-items: center;
}

.users-list {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.user-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(120px, 0.8fr) minmax(110px, 0.7fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

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

.user-row.is-inactive {
  background: #f8fafc;
  opacity: 0.72;
}

.user-row strong,
.user-row small {
  display: block;
}

.user-row small {
  margin-top: 2px;
  color: var(--muted);
}

.user-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.role-badge {
  justify-self: start;
  border-radius: 999px;
  background: #f2f4f7;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 500;
}

.user-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.user-form select[multiple] {
  min-height: 108px;
}

.admin-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 36px;
}

.admin-token {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  padding: 0 8px 0 12px;
  font-size: 13px;
  font-weight: 500;
}

.token-remove {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: #f2f4f7;
  color: var(--danger);
  font-weight: 500;
  line-height: 1;
}

.admin-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 180px) auto;
  gap: 8px;
  align-items: center;
}

.payment-method-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

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

.request-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 12px;
}

.request-row.is-highlighted {
  border-color: #8b2fa0;
  background: #fbf3ff;
  box-shadow: 0 0 0 3px rgba(139, 47, 160, 0.14);
}

.request-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-weight: 500;
}

.request-row p {
  margin: 8px 0 0;
}

.request-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.payment-method-row {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
}

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

.payment-method-row > div {
  display: flex;
  gap: 6px;
}

.payment-method-row > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.payment-method-row span {
  overflow-wrap: anywhere;
  font-weight: 500;
}

.payment-method-row small {
  color: var(--muted);
  font-weight: 500;
}

.commission-settings-card form {
  display: grid;
  gap: 12px;
}

.receipt-box {
  grid-column: 1 / -1;
  width: min(100%, 300px);
  margin: 0 auto;
  padding: 20px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
}

.receipt-box h3 {
  margin: 0 0 18px;
  letter-spacing: 0;
  font-size: 20px;
  text-align: center;
}

.receipt-box p {
  margin: 10px 0;
  font-size: 14px;
}

.receipt-received {
  margin-top: 34px !important;
}

.receipt-signature {
  height: 86px;
}

.receipt-line {
  text-align: center;
}

.detail-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.operation-requests-card,
.telegram-card,
.review-card {
  grid-column: 1 / -1;
}

.branches-card,
.payment-methods-card {
  grid-column: 1 / -1;
}

.telegram-preview,
.daily-summary {
  min-height: 54px;
  border: 1px solid #c7d7fe;
  border-radius: 8px;
  background: #f5f8ff;
  color: #344054;
  padding: 12px;
  font-size: 13px;
  line-height: 1.35;
}

.integration-state {
  margin: 0;
  color: var(--warning);
  font-size: 13px;
  font-weight: 500;
}

.integration-state.is-ready {
  color: var(--success);
}

.integration-help {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.telegram-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.telegram-log {
  display: grid;
  gap: 8px;
}

.telegram-log > strong {
  font-size: 13px;
}

.telegram-log-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 9px 10px;
}

.telegram-log-row strong,
.telegram-log-row small {
  display: block;
}

.telegram-log-row small {
  margin-top: 2px;
  color: var(--muted);
}

.daily-summary {
  white-space: pre-line;
}

.clients-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 440px) auto;
  gap: 12px;
  align-items: center;
}

.clients-toolbar span {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.clients-table {
  min-width: 660px;
}

.clients-table th:last-child,
.clients-table td:last-child {
  width: 190px;
}

.client-actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.table-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mini-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 500;
}

.mini-button:hover {
  border-color: var(--line-strong);
}

.mini-button.danger {
  color: var(--danger);
}

.mini-button.success {
  color: #087443;
  border-color: #a8dfc3;
  background: #eaf8f0;
}

.mobile-card-list {
  display: none;
}

.request-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  transform: translateY(90px);
  opacity: 0;
  transition: 180ms ease;
  background: #101828;
  color: #ffffff;
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  pointer-events: none;
}

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

.install-banner {
  position: fixed;
  z-index: 80;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  width: min(520px, calc(100vw - 40px));
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 28px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  box-shadow: 0 22px 56px rgba(16, 24, 40, 0.22);
}

.install-banner img,
.install-help img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
}

.install-banner strong,
.install-banner span {
  display: block;
}

.install-banner span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}

.install-dismiss {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}

.install-help {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(16, 24, 40, 0.72);
}

.install-help section {
  width: min(100%, 400px);
  display: grid;
  gap: 14px;
  border-radius: 8px;
  background: #ffffff;
  padding: 26px;
  box-shadow: var(--shadow);
}

.install-help h2,
.install-help p {
  margin: 0;
}

.install-help p {
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .users-card {
    grid-column: auto;
  }

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

  .branches-card,
  .payment-methods-card,
  .telegram-card,
  .review-card {
    grid-column: auto;
  }
}

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

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 12px;
    gap: 12px;
  }

  .brand,
  .session-card {
    display: none;
  }

  .app-version {
    position: fixed;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 12;
    margin-top: 0;
    border-radius: 999px;
    background: rgba(16, 24, 40, 0.78);
    padding: 2px 7px;
    color: #98a2b3;
    font-size: 10px;
    text-align: right;
    pointer-events: none;
  }

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

  .nav-item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    padding: 0 6px;
  }

  .workspace {
    padding: 16px;
  }

  .topbar,
  .section-heading {
    align-items: flex-start;
  }

  .topbar {
    flex-direction: column;
  }

  .topbar h1 {
    font-size: 24px;
  }

  .topbar-actions,
  .form-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .summary-grid,
  .field-row,
  .filters,
  .admin-add-row,
  .clients-toolbar {
    grid-template-columns: 1fr;
  }

  .telegram-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

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

  .login-panel {
    padding: 24px;
  }

  .user-form,
  .user-row,
  .request-row {
    grid-template-columns: 1fr;
  }

  .admin-panel {
    gap: 14px;
  }

  .admin-card {
    padding: 12px;
  }

  .admin-card .section-heading,
  .compact-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .user-row {
    gap: 8px;
    align-items: stretch;
  }

  .user-actions {
    justify-content: stretch;
  }

  .user-row .mini-button {
    width: 100%;
  }

  .payment-method-row {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .payment-method-row > div:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cash-balance-grid,
  .cash-code-layout,
  .cash-filter-row,
  .cash-grid {
    grid-template-columns: 1fr;
  }

  .cash-mobile-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    position: sticky;
    top: 70px;
    z-index: 8;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    padding: 5px;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);
  }

  .cash-mobile-tabs button {
    min-width: 0;
    min-height: 38px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.15;
    overflow: hidden;
    padding: 6px 8px;
    white-space: normal;
  }

  .cash-mobile-tabs button.active {
    background: #f4e8fb;
    color: var(--accent);
  }

  .cash-mobile-global-filter {
    display: grid;
    gap: 8px;
  }

  #cashView[data-mobile-tab="branches"] > .cash-mobile-global-filter,
  #cashView[data-mobile-tab="history"] > .cash-mobile-global-filter,
  #cashView[data-mobile-tab="create"] > .cash-mobile-global-filter {
    display: none;
  }

  .cash-mobile-global-filter input,
  .cash-mobile-global-filter select {
    min-height: 46px;
  }

  .cash-mobile-branches-panel {
    display: block;
  }

  #cashView[data-mobile-tab="pending"] [data-cash-mobile-panel]:not([data-cash-mobile-panel="pending"]),
  #cashView[data-mobile-tab="processed"] [data-cash-mobile-panel]:not([data-cash-mobile-panel="processed"]),
  #cashView[data-mobile-tab="branches"] [data-cash-mobile-panel]:not([data-cash-mobile-panel="branches"]),
  #cashView[data-mobile-tab="history"] [data-cash-mobile-panel]:not([data-cash-mobile-panel="history"]),
  #cashView[data-mobile-tab="create"] [data-cash-mobile-panel]:not([data-cash-mobile-panel="create"]) {
    display: none !important;
  }

  #cashView[data-mobile-tab="branches"] > .cash-grid {
    display: grid;
  }

  #cashView .cash-history .cash-filter-row {
    display: none;
  }

  .cash-summary-panel {
    padding: 14px;
  }

  #cashView[data-mobile-tab="history"] .cash-movements-panel .compact-heading {
    gap: 12px;
  }

  #cashView[data-mobile-tab="history"] .cash-movements-panel .compact-filter-row {
    display: grid;
  }

  body[data-role="admin"] #cashView {
    display: flex;
    flex-direction: column;
  }

  body[data-role="admin"] #cashView > .section-heading {
    order: 0;
  }

  body[data-role="admin"] #cashView > .cash-code-layout {
    order: 1;
  }

  body[data-role="admin"] #cashView > .cash-summary-panel {
    order: 2;
  }

  body[data-role="admin"] #cashView > .cash-grid {
    order: 3;
  }

  body[data-role="admin"] #cashMovementForm {
    order: 1;
  }

  body[data-role="admin"] .cash-adjustment-form {
    order: 2;
  }

  body[data-role="admin"] #cashView > .cash-movements-panel {
    order: 4;
  }

  body[data-role="admin"] #cashView > .processed-codes-panel {
    order: 5;
  }

  .cash-branch-balances {
    grid-template-columns: 1fr;
  }

  .compact-filter {
    width: 100%;
  }

  .compact-filter-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .payment-code-table {
    min-width: 640px;
  }

  .cash-history .table-wrap {
    display: none;
  }

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

  .cash-mobile-branch-heading {
    display: block;
    min-width: 0;
    margin: 10px 0 2px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 12px;
    color: #24304a;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cash-mobile-branch-heading:first-child {
    margin-top: 0;
  }

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

  .cash-mobile-card.branch-tone-1 {
    background: #eef8f3;
  }

  .cash-mobile-card.branch-tone-2 {
    background: #f3f6ff;
  }

  .cash-mobile-card.branch-tone-3 {
    background: #fff7e8;
  }

  .cash-mobile-card.branch-tone-4 {
    background: #f7f0ff;
  }

  .cash-mobile-card.branch-tone-5 {
    background: #ecfbff;
  }

  .cash-mobile-card.branch-tone-6 {
    background: #fff0f3;
  }

  .cash-mobile-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
  }

  .cash-mobile-main small,
  .cash-mobile-concept {
    display: block;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
  }

  .cash-mobile-code {
    display: block;
    font-size: 21px;
  }

  .cash-mobile-amount {
    font-size: 20px;
    text-align: right;
    white-space: nowrap;
  }

  .cash-mobile-status {
    display: flex;
    justify-content: flex-start;
  }

  .cash-mobile-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .cash-mobile-actions .mini-button {
    width: 100%;
    min-height: 40px;
  }

  .cash-mobile-list-item {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfe;
    padding: 10px;
  }

  .cash-mobile-list-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
  }

  .cash-mobile-list-main small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
  }

  .cash-mobile-list-main > div:last-child {
    display: grid;
    justify-items: end;
    gap: 5px;
  }

  .cash-mobile-list-amount {
    white-space: nowrap;
  }

  .cash-mobile-list-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .empty-mobile-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfe;
    color: var(--muted);
    padding: 14px;
  }

  .payment-code-sticky {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 1px 0 0 var(--line);
  }

  .receipt-box {
    padding: 20px;
  }

  .request-actions {
    justify-content: flex-start;
  }

  .install-banner {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: calc(100vw - 24px);
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .install-banner img {
    width: 44px;
    height: 44px;
  }

  .install-dismiss {
    position: absolute;
    top: 4px;
    right: 4px;
  }

  .install-banner .primary-button {
    margin-right: 18px;
  }

  .client-actions {
    justify-content: flex-start;
  }

  .month-picker {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .monthly-panel > .section-heading {
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
  }

  .monthly-panel > .section-heading > div:first-child {
    min-width: 0;
  }

  .monthly-commission {
    width: 100%;
    min-width: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
    padding-top: 12px;
    padding-left: 0;
  }

  .client-suggestions button {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

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

  .chain-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .split-panel-head {
    grid-template-columns: 1fr;
  }

  .split-label {
    padding-bottom: 0;
  }
}

@media print {
  @page {
    size: 80mm auto;
    margin: 0;
  }

  body * {
    visibility: hidden;
  }

  .detail-overlay,
  .detail-overlay *,
  .receipt-box,
  .receipt-box * {
    visibility: visible;
  }

  .detail-overlay {
    position: static;
    display: block;
    background: #ffffff;
    padding: 0;
    width: 80mm;
  }

  .detail-dialog {
    width: 80mm;
    max-width: none;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    border: 0;
    padding: 0;
  }

  .detail-dialog > .section-heading {
    display: none;
  }

  .receipt-box {
    width: 72mm;
    max-width: 72mm;
    border: 0;
    border-radius: 0;
    padding: 5mm 4mm 8mm;
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none;
  }

  .receipt-box h3 {
    margin-bottom: 5mm;
    font-size: 16px;
  }

  .receipt-box p {
    margin: 3mm 0;
    font-size: 12px;
    line-height: 1.25;
  }

  .receipt-signature {
    height: 22mm;
  }
}

/* Bóveda */
.vault-view { display: grid; gap: 20px; }
.vault-view [hidden] { display: none !important; }
.vault-tabs, .vault-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.vault-tabs { padding-bottom: 16px; border-bottom: 1px solid var(--line, #e2e8f0); }
.vault-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 24px; }
.vault-card { display: flex; flex-direction: column; gap: 12px; }
.vault-card h3 { margin: 0; }
.vault-note, .vault-link { color: var(--muted, #64748b); font-size: 13px; line-height: 1.6; }
.vault-link { display: block; }
.vault-message { margin: 0; color: var(--ink, #1e293b); overflow-wrap: anywhere; }
.vault-message:empty { display: none; }
.vault-small-form { max-width: 560px; margin-top: 24px; }
.vault-view .table-wrap { overflow-x: auto; margin: 18px 0; }
.vault-view table { width: 100%; min-width: 760px; }
.vault-view th, .vault-view td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--line, #e2e8f0); vertical-align: top; }
.vault-view td { overflow-wrap: anywhere; }
.vault-empty { text-align: center !important; padding: 32px !important; color: var(--muted, #64748b); }
.vault-overdue { background: #fff1f2; color: #9f1239; }
.vault-paid { background: #ecfdf5; color: #065f46; }
.vault-dialog { border: none; border-radius: 20px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: 90vh; color: inherit; }
.vault-dialog::backdrop { background: #0f172a99; }
.vault-dialog .movement-form { margin: 0; box-shadow: none; }
.vault-dialog [data-vault-dialog-fields], [data-vault-entry-fields] { display: grid; gap: 16px; }
.vault-view label { display: grid; gap: 8px; }
.vault-audit pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
@media (max-width: 680px) {
  .vault-view .section-heading { align-items: flex-start; flex-wrap: wrap; gap: 16px; }
  .vault-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .vault-forms { grid-template-columns: 1fr; }
  .vault-card strong { font-size: 26px; }
}

/* Identidad de Bóveda: violeta y lavanda, distinta al morado general. */
body[data-view="vault"] .workspace { background: linear-gradient(145deg, #f6f2ff, #fcfaff 65%, #ede9fe); }
body[data-view="vault"] .nav-item[data-view="vault"].active { background: #ede9fe; color: #5b21b6; box-shadow: inset 3px 0 #7c3aed; }
.vault-view {
  --accent: #6d28d9; --accent-strong: #5b21b6; --line: #ddd6fe; --muted: #6f6487;
  --text: #2e1b47; --panel-soft: #f5f3ff; padding: 22px; color: var(--text);
}
.vault-view .eyebrow, .vault-view h2 { color: #5b21b6; }
.vault-view .primary-button { background: #6d28d9; border-color: #6d28d9; color: #fff; box-shadow: 0 5px 14px #6d28d91f; }
.vault-view .primary-button:hover { background: #5b21b6; border-color: #5b21b6; }
.vault-view .ghost-button, .vault-view .mini-button { color: #5b21b6; background: #faf8ff; border: 1px solid #c4b5fd; }
.vault-view .ghost-button:hover, .vault-view .mini-button:hover { background: #ede9fe; border-color: #8b5cf6; }
.vault-view button:focus-visible, .vault-view input:focus-visible, .vault-view select:focus-visible { outline: 3px solid #a78bfa; outline-offset: 3px; }
.vault-view .metric, .vault-view .movement-form, .vault-view .table-wrap { border: 1px solid #ddd6fe; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px #4c1d9509; }
.vault-view .metric { background: linear-gradient(160deg, #fff, #f5f3ff); }
.vault-view .metric strong { color: #5b21b6; }
.vault-view thead { background: #ede9fe; color: #4c1d95; }
.vault-view tbody tr:hover { background: #faf8ff; }
.vault-view .vault-dialog { background: #fff; box-shadow: 0 24px 80px #2e10654d; }
.vault-view .vault-dialog::backdrop { background: #2e106582; }
.vault-connection { display: flex; justify-content: space-between; gap: 18px; align-items: center; flex-wrap: wrap; padding: 22px; border-radius: 18px; background: linear-gradient(120deg, #4c1d95, #6d28d9); color: #fff; }
.vault-connection h3 { margin: 0 0 8px; color: #fff; }
.vault-connection p { margin: 0; max-width: 640px; line-height: 1.6; color: #ede9fe; }
.vault-connection strong { display: block; font-size: 28px; color: #fff; margin-top: 5px; }
.vault-connection small { color: #ede9fe; }
.vault-connection.is-pending { background: #ede9fe; color: #4c1d95; }
.vault-connection.is-pending h3, .vault-connection.is-pending p { color: #4c1d95; }
.vault-view [data-vault-dialog-error] { color: #b42318; }
.is-vault-linked { border-color: #c4b5fd; background: #f5f3ff; }
@media (max-width: 680px) { .vault-view { padding: 14px; } .vault-connection { padding: 18px; } }

/* Controles consistentes: mismo alto y columnas amplias para campos y selectores. */
label { min-width: 0; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  min-width: 0; max-width: 100%; min-height: 46px; padding: 10px 12px; line-height: 1.4;
}
.cop-input {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #ffffff;
}
.cop-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 45, 143, 0.14);
}
.refacil-view .cop-input:focus-within {
  border-color: #0969da;
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.12);
}
.cop-input > span {
  position: static;
  z-index: auto;
  display: grid;
  place-items: center;
  transform: none;
  border-right: 1px solid var(--line);
  background: #f8fafc;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cop-input input:not([type="checkbox"]):not([type="radio"]),
.cop-input input:not([type="checkbox"]):not([type="radio"]):focus {
  height: 46px;
  min-height: 46px;
  border: 0;
  border-radius: 0;
  padding: 10px 12px;
  box-shadow: none;
}
select { display: block; width: 100%; padding-right: 32px; }
.compact-filter-row > .compact-filter { flex: 1 1 220px; min-width: 0; }
.compact-filter select, .role-switcher select { min-height: 46px; padding: 10px 12px; padding-right: 32px; }
.cash-filter-row > *, .field-row > *, .vault-history-filters > * { min-width: 0; }
.month-picker { width: min(100%, 260px); max-width: none; }
.user-form select[multiple], .user-editor-form select[multiple] { min-height: 138px; padding: 10px 12px; }
.vault-history-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; align-items: end; padding: 20px; margin: 20px 0; border: 1px solid #ddd6fe; border-radius: 18px; background: #faf8ff; }
.vault-history-filters .vault-actions { align-self: end; }
.vault-history-filters button { min-height: 46px; }
.vault-history-summary { margin-bottom: 20px; }
.vault-actions button:disabled { opacity: .45; cursor: default; }
@media (max-width: 900px) { .filters { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } }
@media (max-width: 760px) {
  .filters, .cash-filter-row, .compact-filter-row { grid-template-columns: minmax(0, 1fr); }
  .compact-filter-row > .compact-filter { width: 100%; }
  .month-picker { width: 100%; }
}

/* Cuentas por cobrar abiertas, con historial en la misma sección. */
.vault-debtor-detail { padding: 22px; margin: 24px 0; border: 1px solid #c4b5fd; border-radius: 18px; background: #fff; }
.vault-debtor-detail > .summary-grid { margin-top: 20px; }
.vault-debtor-selected { border-color: #8b5cf6 !important; box-shadow: 0 0 0 2px #ede9fe !important; }
.vault-debtor-picker { flex: 1 1 260px; max-width: 420px; }
.vault-debtor-detail h3 { scroll-margin-top: 24px; }
.vault-debtor-detail .section-heading { flex-wrap: wrap; }
.vault-view [data-vault-debt-account] { display: grid; }
@media (max-width: 680px) {
  .vault-debtor-detail { padding: 14px; }
  .vault-debtor-picker { max-width: none; width: 100%; }
}

/* Single-line controls share an exact box, including native Mac/Safari selects. */
input:not([type]),
input[type="text"], input[type="search"], input[type="number"],
input[type="date"], input[type="month"], input[type="password"],
input[type="email"], input[type="tel"], input[type="url"],
select:not([multiple]):not([size]) {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 46px;
  min-height: 46px;
  border-radius: 8px;
}

select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 10px 40px 10px 12px;
  line-height: 24px;
  cursor: pointer;
}

body select:not([multiple]):not([size]) {
  background-image: url("/icons/chevron-down.svg");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

select:disabled { cursor: default; }