/* FLUX NT · tokens, shell, caja, formularios, informes y responsive. */
:root {
  --bg:#f5f6fb;
  --surface:#fff;
  --soft:#f8f9fc;
  --ink:#202535;
  --muted:#788196;
  --line:#e9ebf2;
  --primary:#635bdb;
  --primary-dark:#5147c5;
  --primary-soft:#eeecff;
  --green:#247c61;
  --green-soft:#e9f6ef;
  --red:#bb5261;
  --red-soft:#fff0f1;
  --radius:14px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  font-size:14px;
  font-synthesis:none;
  color-scheme:light
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--bg);
  line-height:1.5
}

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

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

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

button:focus-visible,a:focus-visible {
  outline:3px solid #b5b0ff;
  outline-offset:3px
}

a {
  color:var(--primary);
  text-decoration:none
}

h1,h2,h3,p {
  margin:0
}

h1 {
  font-size:28px;
  font-weight:650;
  letter-spacing:-1px;
  line-height:1.25
}

h2 {
  font-size:16px;
  font-weight:650;
  letter-spacing:-.3px
}

h3 {
  font-size:14px;
  font-weight:600
}

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

.icon {
  height:20px;
  width:20px;
  flex-shrink:0;
  vertical-align:middle
}

.icon.small {
  width:16px;
  height:16px
}

.hidden,[hidden] {
  display:none!important
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:9px 15px;
  border:1px solid #dfe2ed;
  border-radius:9px;
  background:white;
  color:var(--ink);
  font-weight:550;
  font-size:13px;
  white-space:nowrap;
  transition:background .15s,box-shadow .15s
}

.btn:hover {
  background:#f5f5fa
}

.btn.primary {
  color:white;
  background:var(--primary);
  border-color:var(--primary);
  box-shadow:0 3px 6px #635bdb16
}

.btn.primary:hover {
  background:var(--primary-dark)
}

.btn.danger {
  background:var(--red);
  border-color:var(--red);
  color:white
}

.btn.soft {
  background:var(--primary-soft);
  border-color:transparent;
  color:var(--primary)
}

.btn.link {
  border:0;
  background:transparent;
  color:var(--primary)
}

.btn.sm {
  min-height:32px;
  padding:5px 11px;
  font-size:12px
}

.icon-button {
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  flex-shrink:0;
  cursor:pointer
}

.icon-button:hover {
  color:var(--ink);
  background:var(--soft)
}

.button-row {
  display:flex;
  gap:8px;
  align-items:center
}

.badge {
  display:inline-flex;
  gap:5px;
  align-items:center;
  font-size:11px;
  font-weight:600;
  border-radius:6px;
  padding:3px 8px;
  background:#f0f1f6;
  color:#687186;
  white-space:nowrap
}

.badge.green {
  background:var(--green-soft);
  color:var(--green)
}

.badge.red {
  background:var(--red-soft);
  color:var(--red)
}

.badge.purple {
  background:var(--primary-soft);
  color:var(--primary)
}

.badge.amber {
  background:#fff2dc;
  color:#986521
}

.dot {
  width:6px;
  height:6px;
  background:currentColor;
  border-radius:50%
}

.avatar {
  height:34px;
  width:34px;
  border-radius:10px;
  background:var(--primary-soft);
  color:var(--primary);
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:650;
  flex-shrink:0
}

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

.brand-logo {
  display:block;
  width:180px;
  max-width:100%;
  height:auto;
  object-fit:contain;
}
.brand { flex-direction:column; align-items:flex-start; gap:4px; }
.sidebar .brand-logo { width:170px; }
.login-story .brand-logo { width:220px; }
.login-form-brand { display:none; }
.topbar-logo { width:96px; height:auto; flex-shrink:0; }
.boot-screen .brand-logo { width:180px; }

.brand-caption {
  font-size:10px;
  color:var(--muted);
  letter-spacing:.5px
}

.skip-link {
  position:fixed;
  top:-100px;
  left:12px;
  z-index:100;
  background:white;
  padding:12px
}

.skip-link:focus {
  top:12px
}

.boot-screen {
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:center;
  justify-content:center;
  color:var(--muted)
}

.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:232px;
  padding:28px 18px 16px;
  background:white;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  z-index:30
}

.sidebar .brand {
  padding:0 10px 29px
}

.nav-label {
  font-size:10px;
  font-weight:650;
  letter-spacing:1.2px;
  color:#9ca3b3;
  padding:0 13px;
  margin:14px 0 10px
}

.sidebar-nav {
  display:flex;
  flex-direction:column;
  gap:5px
}

.nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:43px;
  padding:11px 13px;
  border:0;
  border-radius:8px;
  color:#6e778b;
  background:transparent;
  font-size:13px;
  text-align:left;
  font-weight:500;
  width:100%
}

.nav-item:hover {
  background:var(--soft);
  color:var(--ink)
}

.nav-item.active {
  background:var(--primary-soft);
  color:var(--primary);
  font-weight:600
}

.nav-item .icon {
  height:18px;
  width:18px
}

.nav-item .badge {
  margin-left:auto;
  font-size:9px
}

.sidebar-bottom {
  margin-top:auto
}

.sidebar-tip {
  margin:20px 9px 17px;
  padding:15px 12px;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:10px;
  font-size:11px;
  color:var(--muted)
}

.sidebar-tip strong {
  display:block;
  color:#69718a;
  font-weight:550;
  margin:6px 0 3px
}

.sidebar-user {
  display:flex;
  align-items:center;
  gap:9px;
  border-top:1px solid var(--line);
  padding:17px 7px 0
}

.user-text {
  min-width:0;
  flex:1
}

.user-text strong {
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
  font-weight:600
}

.user-text small {
  font-size:10px
}

.shell {
  margin-left:232px;
  min-height:100vh
}

.topbar {
  height:68px;
  background:white;
  border-bottom:1px solid var(--line);
  padding:0 36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}

.breadcrumbs {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:12px
}

.breadcrumbs b {
  color:#51576a;
  font-weight:500
}

.topbar-right {
  display:flex;
  align-items:center;
  gap:18px
}

.topbar-date {
  color:var(--muted);
  font-size:11px;
  display:flex;
  align-items:center;
  gap:7px
}

.main {
  padding:30px 36px 40px;
  max-width:1600px;
  margin:0 auto
}

.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:25px
}

.eyebrow {
  color:var(--muted);
  font-size:10px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:8px
}

.page-heading p {
  color:var(--muted);
  font-size:12px;
  margin-top:7px
}

.kbd {
  border:1px solid #e0e2eb;
  border-radius:4px;
  padding:1px 5px;
  font-size:10px;
  background:#fff;
  color:#9196a6;
  font-family:inherit;
  font-weight:400
}

.btn.primary .kbd {
  color:#e9e7ff;
  border-color:#ffffff40;
  background:#ffffff12
}

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

.stat-card {
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:19px 20px 16px;
  min-width:0;
  box-shadow:0 2px 3px #24285102
}

.stat-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:var(--muted);
  font-size:11px;
  font-weight:500
}

.stat-icon {
  height:31px;
  width:31px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:var(--soft);
  color:#8a90a3
}

.stat-icon .icon {
  height:16px;
  width:16px
}

.stat-card .value {
  font-size:clamp(19px,1.7vw,27px);
  font-weight:650;
  letter-spacing:-.8px;
  white-space:nowrap;
  margin:12px 0 7px;
  font-variant-numeric:tabular-nums
}

.stat-card small {
  font-size:10px
}

.stat-card.incoming .stat-icon {
  color:var(--green);
  background:var(--green-soft)
}

.stat-card.outgoing .stat-icon {
  color:var(--red);
  background:var(--red-soft)
}

.stat-card.highlight {
  background:#eeecff;
  border-color:#dfdbfd
}

.stat-card.highlight .value,.stat-card.highlight .stat-head {
  color:#534bc1
}

.stat-card.highlight .stat-icon {
  color:#635bdb;
  background:#dfdafb
}

.stat-card.highlight small {
  color:#8279c5
}

.panel {
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:white;
  overflow:hidden;
  box-shadow:0 2px 4px #24285102
}

.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:20px 23px
}

.panel-heading h2 {
  display:flex;
  align-items:center;
  gap:10px
}

.panel-heading p {
  font-size:11px;
  color:var(--muted);
  margin-top:3px
}

.panel-heading .badge {
  font-weight:500;
  font-size:10px
}

.date-control {
  display:flex;
  gap:5px;
  align-items:center
}

.date-control .date-wrap {
  display:flex;
  align-items:center;
  padding:0 10px;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:8px;
  gap:6px
}

.date-control input {
  border:0;
  background:transparent;
  min-height:35px;
  padding:6px 0;
  font-size:12px;
  width:123px;
  color:#60677b
}

.toolbar {
  padding:13px 23px;
  display:flex;
  align-items:center;
  gap:10px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fdfdff
}

.search-wrap {
  position:relative;
  flex:1;
  max-width:400px;
  min-width:150px
}

.search-wrap .icon {
  position:absolute;
  left:11px;
  top:10px;
  color:#9aa0af;
  width:17px;
  height:17px
}

.search-wrap input {
  padding-left:36px!important;
  font-size:12px;
  min-height:36px;
  background:white
}

.toolbar-end {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:9px
}

.toolbar select {
  max-width:175px;
  min-height:36px;
  font-size:12px
}

.toolbar .btn {
  min-height:36px
}

.filter-count {
  font-size:10px;
  background:var(--primary);
  border-radius:50%;
  height:16px;
  width:16px;
  display:grid;
  place-items:center;
  color:white
}

.advanced-filters {
  padding:14px 23px;
  display:flex;
  align-items:flex-end;
  gap:15px;
  background:var(--soft);
  border-bottom:1px solid var(--line)
}

.advanced-filters label {
  font-size:11px;
  flex:1;
  max-width:220px
}

.advanced-filters select {
  margin-top:5px;
  font-size:12px
}

.table-wrap {
  overflow:auto
}

table {
  border-collapse:collapse;
  width:100%;
  font-size:12px;
  white-space:nowrap
}

thead {
  background:#fafbfe;
  color:#949cad;
  font-size:10px;
  font-weight:550;
  letter-spacing:.3px
}

th {
  font-weight:550;
  text-align:left;
  padding:12px 16px;
  border-bottom:1px solid var(--line)
}

th:first-child,td:first-child {
  padding-left:23px
}

th:last-child,td:last-child {
  padding-right:23px
}

td {
  padding:14px 16px;
  border-bottom:1px solid #f0f1f6;
  vertical-align:middle
}

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

tbody tr:hover {
  background:#fcfcff
}

.row-title {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:550;
  color:#495267
}

.row-direction {
  height:30px;
  width:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--green-soft);
  color:var(--green)
}

.row-direction.out {
  background:var(--red-soft);
  color:var(--red)
}

.row-direction .icon {
  width:15px;
  height:15px
}

.row-title small {
  display:block;
  font-size:10px;
  color:#9a9fac;
  font-weight:400;
  margin-top:2px
}

.note-cell {
  max-width:230px;
  white-space:normal;
  color:#7e8698;
  font-size:11px;
  line-height:1.4
}

.time-cell {
  color:#8d95a7;
  font-size:11px;
  font-variant-numeric:tabular-nums
}

.time-cell small {
  display:block;
  font-size:9px;
  color:#a3a9b6
}

.amount {
  text-align:right;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  font-size:12px
}

.amount.in {
  color:var(--green)
}

.amount.out {
  color:var(--red)
}

.text-right {
  text-align:right
}

.row-detail {
  background:transparent;
  border:0;
  border-radius:7px;
  color:#b0b4c1;
  width:29px;
  height:29px;
  padding:4px
}

.row-detail:hover {
  color:var(--primary);
  background:var(--primary-soft)
}

.user-cell {
  display:flex;
  align-items:center;
  gap:6px;
  color:#9299a8;
  font-size:10px
}

.user-cell .avatar {
  width:20px;
  height:20px;
  font-size:8px;
  border-radius:6px;
  background:#f1f2f7;
  color:#8a91a5
}

.table-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:14px 23px;
  border-top:1px solid var(--line);
  color:#9a9faf;
  font-size:10px
}

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

.pagination .icon-button {
  height:27px;
  width:27px;
  border:1px solid var(--line);
  border-radius:6px
}

.footnote {
  display:flex;
  align-items:center;
  gap:6px;
  color:#9ba1b0;
  font-size:10px;
  margin-top:15px
}

.footnote .icon {
  height:13px;
  width:13px
}

.below-ledger {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:22px
}

.mini-panel {
  padding:20px 23px;
  border:1px solid var(--line);
  background:white;
  border-radius:var(--radius)
}

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

.mini-title h3 {
  font-size:12px
}

.mini-panel p {
  font-size:11px;
  color:var(--muted);
  margin:7px 0 12px
}

.cash-equation {
  display:flex;
  gap:10px;
  align-items:center;
  font-variant-numeric:tabular-nums;
  font-size:12px;
  color:#8e96a6
}

.cash-equation b {
  font-weight:550;
  color:#596277
}

.cash-equation strong {
  font-weight:650;
  color:var(--primary);
  margin-left:auto
}

.reconcile-line {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  gap:8px
}

.reconcile-line small {
  font-size:10px
}

.notice {
  background:#fff8e8;
  border:1px solid #f5e8c6;
  color:#8f7134;
  padding:12px 15px;
  border-radius:9px;
  font-size:12px;
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:20px
}

.empty-state {
  padding:65px 24px;
  text-align:center;
  white-space:normal
}

.empty-icon {
  width:54px;
  height:54px;
  background:var(--soft);
  color:#a0a7b7;
  border-radius:16px;
  display:grid;
  place-items:center;
  margin:0 auto 14px
}

.empty-state h3 {
  font-size:14px;
  font-weight:550
}

.empty-state p {
  color:var(--muted);
  font-size:12px;
  margin:5px auto 18px;
  max-width:360px
}

.error-panel {
  padding:50px 24px;
  text-align:center;
  color:var(--muted)
}

.error-panel h2 {
  color:var(--ink);
  margin:12px
}

.error-panel p {
  max-width:500px;
  margin:0 auto 20px
}

.loading {
  padding:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--muted);
  font-size:12px
}

.spinner {
  height:16px;
  width:16px;
  border:2px solid var(--line);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin .65s linear infinite
}

@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}

input,select,textarea {
  border:1px solid #dfe2ed;
  border-radius:8px;
  background:white;
  color:var(--ink);
  width:100%;
  min-height:40px;
  padding:9px 11px;
  outline:none;
  transition:border-color .12s,box-shadow .12s
}

input:focus,select:focus,textarea:focus {
  border-color:#9d95ed;
  box-shadow:0 0 0 3px #635bdb0c
}

input::placeholder,textarea::placeholder {
  color:#a1a7b6
}

textarea {
  min-height:90px;
  resize:vertical;
  line-height:1.5
}

label {
  display:block;
  font-size:12px;
  font-weight:500;
  color:#60687a
}

label small {
  font-weight:400;
  font-size:10px;
  display:block;
  margin-top:5px
}

.field {
  margin-bottom:18px
}

.field label {
  margin-bottom:7px
}

.field-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.field-grid .field {
  margin-bottom:16px
}

.field-error {
  display:block;
  font-size:11px;
  color:var(--red);
  margin-top:5px
}

.invalid {
  border-color:var(--red)!important
}

.form-error {
  background:var(--red-soft);
  color:var(--red);
  border:1px solid #f5dce0;
  padding:10px 13px;
  font-size:12px;
  border-radius:8px;
  margin:0 0 15px
}

.checkbox {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--muted);
  font-weight:400
}

.checkbox input {
  width:15px;
  height:15px;
  min-height:0;
  accent-color:var(--primary);
  margin:0
}

.segmented {
  display:flex;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:9px;
  padding:4px;
  gap:4px
}

.segmented button {
  flex:1;
  border:0;
  background:transparent;
  color:var(--muted);
  border-radius:6px;
  min-height:35px;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-weight:550
}

.segmented button.active {
  background:white;
  box-shadow:0 1px 5px #1d23300e;
  color:var(--green)
}

.segmented button.active.out {
  color:var(--red)
}

.segmented .icon {
  height:15px;
  width:15px
}

.amount-input {
  position:relative
}

.amount-input span {
  position:absolute;
  left:16px;
  top:12px;
  font-size:23px;
  color:#9ca2b3
}

.amount-input input {
  padding:9px 16px 9px 39px;
  font-size:28px;
  font-weight:550;
  height:60px;
  font-variant-numeric:tabular-nums;
  background:var(--soft)
}

.form-hint {
  font-size:11px;
  color:var(--muted);
  margin-top:7px
}

.dialog-context {
  display:flex;
  gap:15px;
  align-items:center;
  margin:0 0 22px;
  padding:10px 13px;
  background:var(--soft);
  border-radius:8px;
  color:#858da0;
  font-size:11px
}

.dialog-context span {
  display:flex;
  align-items:center;
  gap:5px
}

.dialog-context .icon {
  width:14px;
  height:14px
}

.amount-preview {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  padding:13px;
  background:var(--soft);
  border-radius:8px;
  margin-top:14px;
  color:var(--muted)
}

.amount-preview b {
  color:var(--primary);
  font-weight:600
}

.modal-footer {
  margin:22px -27px -25px;
  padding:17px 27px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  background:#fcfcfe;
  border-radius:0 0 17px 17px
}

.modal-body {
  padding:0
}

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

.modal-heading h2 {
  font-size:19px;
  letter-spacing:-.6px
}

.modal-heading p {
  font-size:11px;
  color:var(--muted);
  margin-top:4px
}

dialog {
  border:1px solid var(--line);
  border-radius:17px;
  box-shadow:0 24px 70px #22244424;
  padding:25px 27px;
  width:520px;
  max-width:calc(100vw - 30px);
  max-height:90dvh;
  overflow:auto;
  color:var(--ink)
}

dialog::backdrop {
  background:#1e23495c;
  backdrop-filter:blur(3px)
}

dialog .close-modal {
  margin:-5px -8px 0 0
}

.detail-amount {
  font-size:36px;
  font-weight:650;
  letter-spacing:-1px;
  font-variant-numeric:tabular-nums;
  margin:6px 0 22px
}

.detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:22px
}

.detail-grid dt {
  font-size:10px;
  color:var(--muted);
  margin-bottom:4px
}

.detail-grid dd {
  font-size:12px;
  margin:0
}

.detail-note {
  padding:13px;
  background:var(--soft);
  border-radius:9px;
  font-size:12px;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}

.detail-note small {
  display:block;
  font-size:10px;
  margin-bottom:5px
}

.detail-status {
  margin:15px 0 0;
  color:var(--muted);
  font-size:11px
}

.toast-region {
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:100;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:360px;
  max-width:calc(100vw - 30px);
  pointer-events:none
}

.toast {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  background:#fff;
  box-shadow:0 5px 30px #20253c1c;
  border:1px solid #e1e9e5;
  border-left:3px solid var(--green);
  border-radius:10px;
  font-size:12px;
  pointer-events:auto
}

.toast> .icon {
  color:var(--green)
}

.toast span {
  flex:1
}

.toast.error {
  border-left-color:var(--red)
}

.toast.error>.icon {
  color:var(--red)
}

.tabs {
  display:flex;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding:0 23px
}

.tab {
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  padding:15px 0;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap
}

.tab.active {
  border-bottom-color:var(--primary);
  color:var(--primary);
  font-weight:600
}

.catalog-description {
  padding:14px 23px;
  background:var(--soft);
  color:var(--muted);
  font-size:11px;
  display:flex;
  align-items:center;
  gap:8px
}

.status-toggle {
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap
}

.catalog-actions {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px
}

.report-controls {
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
  padding:20px 23px;
  margin-bottom:22px
}

.report-controls label {
  font-size:11px;
  min-width:140px
}

.report-controls input,.report-controls select {
  margin-top:6px;
  font-size:12px
}

.report-controls .grow {
  flex:1
}

.report-grid {
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:20px;
  margin:22px 0
}

.chart-row {
  display:grid;
  grid-template-columns:160px 1fr 90px;
  align-items:center;
  gap:12px;
  margin:17px 0;
  font-size:11px;
  color:var(--muted)
}

.chart-row>span:first-child {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.chart-bar {
  width:100%;
  height:14px;
  display:block
}

.chart-bar .track {
  fill:#f2f1fb
}

.chart-bar .fill {
  fill:#9991e8
}

.chart-value {
  text-align:right;
  font-variant-numeric:tabular-nums;
  color:#646d83
}

.report-description {
  font-size:11px;
  color:var(--muted);
  margin-top:8px
}

.report-totals {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  margin:16px 0;
  gap:15px
}

.report-totals b {
  font-weight:550;
  font-variant-numeric:tabular-nums
}

.audit-list {
  padding:0 23px
}

.audit-row {
  display:grid;
  grid-template-columns:34px 1fr auto;
  gap:14px;
  padding:19px 0;
  border-bottom:1px solid var(--line)
}

.audit-icon {
  border-radius:10px;
  background:var(--primary-soft);
  color:var(--primary);
  height:32px;
  width:32px;
  display:grid;
  place-items:center
}

.audit-icon .icon {
  width:16px;
  height:16px
}

.audit-row h3 {
  font-size:12px
}

.audit-row p {
  font-size:11px;
  color:var(--muted);
  margin-top:3px
}

.audit-row time {
  font-size:10px;
  color:var(--muted)
}

.audit-detail {
  font-size:11px;
  color:var(--muted);
  margin-top:8px;
  max-width:650px;
  overflow-wrap:anywhere
}

.help-shortcut {
  display:flex;
  justify-content:space-between;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  font-size:12px;
  color:var(--muted)
}

.mobile-menu {
  display:none
}

.scrim {
  display:none
}

.login-page {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh;
  background:white
}

.login-story {
  position:relative;
  padding:45px 55px;
  background:#f0eefb;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}

.login-story:after {
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  background:#e4dff8;
  right:-250px;
  bottom:-170px;
  opacity:.65;
  pointer-events:none
}

.login-story .brand {
  position:relative;
  z-index:1;
  /* El blanco del logo se integra con el fondo del panel. */
  mix-blend-mode:multiply
}

.login-story .brand-caption {
  color:#958bb8
}

.story-content {
  max-width:460px;
  position:relative;
  z-index:1;
  margin:50px auto
}

.story-content .eyebrow {
  color:#8d80b9;
  font-size:10px
}

.story-content h1 {
  font-size:43px;
  line-height:1.16;
  letter-spacing:-1.6px;
  color:#3f365c;
  font-weight:600
}

.story-content h1 em {
  font-style:normal;
  color:var(--primary)
}

.story-content>p {
  font-size:13px;
  color:#9288ad;
  max-width:350px;
  line-height:1.7;
  margin-top:19px
}

.login-story footer {
  position:relative;
  z-index:1;
  font-size:10px;
  color:#a396bc
}

.login-main {
  display:flex;
  justify-content:center;
  align-items:center;
  padding:45px
}

.login-form-area {
  width:100%;
  max-width:355px
}

.login-form-area .eyebrow {
  margin-bottom:12px
}

.login-form-area h2 {
  font-size:26px;
  letter-spacing:-.8px
}

.login-form-area>p {
  font-size:12px;
  color:var(--muted);
  margin:8px 0 28px
}

.login-form-area .field {
  margin-bottom:19px
}

.login-form-area label {
  font-size:11px
}

.login-form-area input {
  min-height:44px
}

.password-wrap {
  position:relative
}

.password-wrap input {
  padding-right:44px
}

.password-wrap button {
  position:absolute;
  right:5px;
  top:5px
}

.login-submit {
  width:100%;
  min-height:44px;
  margin-top:6px
}

.login-submit .icon {
  margin-left:auto
}

.login-submit span {
  margin-right:auto
}

.login-security {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:5px;
  font-size:10px;
  color:#a4a9b7;
  margin-top:28px
}

.login-security .icon {
  width:13px;
  height:13px
}

.login-old {
  display:block;
  text-align:center;
  font-size:10px;
  color:#a6aabb;
  margin-top:14px
}

.login-old:hover {
  color:var(--primary)
}

@media(min-width:1800px) {
  .main {
    padding-top:42px
  }
}

@media(max-width:1250px) {
  .main {
    padding:27px 24px
  }
  .topbar {
    padding-left:24px;
    padding-right:24px
  }
  .sidebar {
    width:212px;
    padding-left:13px;
    padding-right:13px
  }
  .shell {
    margin-left:212px
  }
  .summary-grid {
    gap:12px
  }
  .stat-card {
    padding:15px
  }
  .stat-card .value {
    font-size:21px
  }
  .note-cell {
    max-width:175px
  }
  .optional-column {
    display:none
  }
  .below-ledger {
    grid-template-columns:1fr 1fr
  }
  .cash-equation {
    font-size:11px;
    gap:6px
  }
  .login-story {
    padding:35px
  }
  .story-content h1 {
    font-size:36px
  }
}

@media(max-width:980px) {
  .sidebar {
    width:195px;
    padding:22px 10px
  }
  .shell {
    margin-left:195px
  }
  .main {
    padding:25px 20px
  }
  .summary-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .stat-card .value {
    font-size:25px
  }
  .topbar-date {
    display:none
  }
  .page-heading h1 {
    font-size:25px
  }
  .below-ledger,.report-grid {
    grid-template-columns:1fr
  }
  .toolbar {
    flex-wrap:wrap
  }
  .toolbar-end {
    margin-left:0
  }
  .search-wrap {
    max-width:none
  }
  .note-cell {
    display:none
  }
  .login-story {
    padding:30px
  }
  .story-content h1 {
    font-size:32px
  }
  .login-main {
    padding:35px
  }
}

@media(max-width:720px) {
  .sidebar {
    width:232px;
    transform:translateX(-100%);
    transition:transform .18s
  }
  .sidebar.open {
    transform:translateX(0)
  }
  .shell {
    margin-left:0
  }
  .mobile-menu {
    display:inline-flex
  }
  .topbar {
    height:57px;
    padding:0 16px
  }
  .breadcrumbs {
    gap:6px;
    font-size:11px
  }
  .topbar-right {
    gap:8px
  }
  .topbar-right>.avatar {
    display:none
  }
  .main {
    padding:23px 16px
  }
  .page-heading {
    align-items:flex-start;
    gap:10px;
    margin-bottom:20px
  }
  .page-heading h1 {
    font-size:23px
  }
  .page-heading p {
    font-size:11px
  }
  .page-heading .btn {
    min-height:36px;
    font-size:11px;
    padding:8px 11px
  }
  .page-heading .kbd {
    display:none
  }
  .eyebrow {
    font-size:9px
  }
  .summary-grid {
    gap:10px;
    margin-bottom:18px
  }
  .stat-card {
    padding:14px
  }
  .stat-card .value {
    font-size:23px;
    margin:10px 0 4px
  }
  .stat-card small {
    font-size:9px
  }
  .stat-head {
    font-size:10px
  }
  .stat-icon {
    height:25px;
    width:25px;
    border-radius:7px
  }
  .panel-heading {
    padding:17px 15px;
    flex-wrap:wrap;
    gap:12px
  }
  .panel-heading h2 {
    font-size:14px
  }
  .date-control {
    margin-left:auto
  }
  .toolbar {
    padding:12px 15px;
    gap:8px
  }
  .search-wrap {
    width:100%;
    max-width:none;
    flex:auto
  }
  .toolbar-end {
    width:100%;
    justify-content:space-between
  }
  .toolbar select {
    flex:1;
    max-width:none;
    font-size:11px
  }
  .toolbar .btn {
    font-size:11px
  }
  .advanced-filters {
    padding:12px 15px;
    flex-wrap:wrap;
    gap:10px
  }
  .advanced-filters label {
    min-width:120px
  }
  th,td {
    padding:12px 10px
  }
  th:first-child,td:first-child {
    padding-left:15px
  }
  th:last-child,td:last-child {
    padding-right:15px
  }
  .row-title {
    gap:8px;
    font-size:11px
  }
  .row-title small {
    font-size:9px
  }
  .row-direction {
    width:25px;
    height:25px;
    border-radius:7px
  }
  .table-footer {
    padding:12px 15px;
    font-size:9px;
    flex-wrap:wrap
  }
  .pagination {
    margin-left:auto
  }
  .below-ledger {
    gap:12px;
    margin-top:16px
  }
  .mini-panel {
    padding:17px 16px
  }
  .footnote {
    align-items:flex-start;
    line-height:1.6;
    font-size:9px
  }
  .scrim.visible {
    display:block;
    position:fixed;
    inset:0;
    background:#20244350;
    z-index:25
  }
  .report-controls {
    padding:16px;
    gap:12px
  }
  .report-controls label {
    width:calc(50% - 8px);
    min-width:120px
  }
  .report-controls .grow {
    width:100%;
    flex:auto
  }
  .tabs {
    padding:0 15px;
    gap:16px;
    overflow:auto
  }
  .tab {
    font-size:11px
  }
  .chart-row {
    grid-template-columns:115px 1fr 90px;
    gap:8px
  }
  .catalog-description {
    padding:12px 15px
  }
  .audit-list {
    padding:0 15px
  }
  .audit-row {
    gap:10px;
    grid-template-columns:28px 1fr
  }
  .audit-row time {
    grid-column:2
  }
  .audit-icon {
    height:28px;
    width:28px
  }
  .login-page {
    display:block
  }
  .login-story {
    display:none
  }
  .login-main {
    min-height:100vh;
    padding:35px 25px
  }
  .login-form-brand { display:block; margin-bottom:34px; }
  .breadcrumbs > span, .breadcrumbs > b, .breadcrumbs > .icon { display:none; }
  .topbar-logo { width:100px; }
  .toast-region {
    right:15px;
    bottom:15px
  }
  .modal-footer {
    flex-wrap:wrap;
    padding:15px 20px;
    margin-left:-20px;
    margin-right:-20px;
    margin-bottom:-20px
  }
  dialog {
    padding:20px
  }
  .field-grid {
    gap:12px
  }
  .modal-heading h2 {
    font-size:18px
  }
  .cash-equation {
    flex-wrap:wrap
  }
  .detail-amount {
    font-size:31px
  }
  .btn .mobile-hidden {
    display:none
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation-duration:.01ms!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}

.stat-card .value.large-value {
  font-size:18px;
  white-space:normal;
  overflow-wrap:anywhere
}

@media(max-width:720px) {
  .stat-card .value.large-value {
    font-size:15px
  }
}

/* Arqueos y documentos internos */
.denomination-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0; }
.denomination-grid label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
.denomination-grid input { min-width:0; width:100%; }
.cash-receipt dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.cash-receipt dt { font-size:12px; color:var(--muted); margin-bottom:4px; }
.cash-receipt dd { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }
.cash-receipt table { width:100%; }
.cash-receipt h2 { font-size:18px; margin:16px 0; }
#flux-print { display:none; }
@media(max-width:720px) {
  .denomination-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cash-receipt dl { grid-template-columns:1fr; }
}
@media print {
  @page { size:A4; margin:15mm; }
  body { background:white!important; color:#111!important; font:11px sans-serif; }
  body > *:not(#flux-print) { display:none!important; }
  dialog, dialog::backdrop { display:none!important; }
  #flux-print { display:block!important; }
  #flux-print header { border-bottom:2px solid #333; margin-bottom:18px; }
  #flux-print h2 { font-size:18px; }
  #flux-print h3 { font-size:14px; }
  #flux-print dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  #flux-print dt { font-size:10px; color:#444; }
  #flux-print dd { margin:3px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
  #flux-print table { width:100%; border-collapse:collapse; margin-top:18px; table-layout:fixed; }
  #flux-print th, #flux-print td { padding:6px 4px; border-bottom:1px solid #bbb; text-align:left; white-space:normal; overflow-wrap:anywhere; color:#111; }
  #flux-print th { font-size:10px; background:#eee!important; }
  #flux-print thead { display:table-header-group; }
  #flux-print tr, #flux-print dl > div { break-inside:avoid; }
  #flux-print footer { margin-top:18px; border-top:1px solid #aaa; padding-top:8px; }
  .print-amount { font-size:20px; font-weight:700; }
}

.advanced-filters { flex-wrap:wrap; }
.advanced-filters label { min-width:140px; }
.cash-pagination { gap:12px; flex-wrap:wrap; }
.reconciliation-changed { display:block; margin-top:8px; color:var(--muted); }

@media (min-width:721px) and (max-width:1180px) {
  .breadcrumbs > span, .breadcrumbs > .icon { display:none; }
}

/* La planilla ocupa el primer plano; el resumen acompaña al pie. */
.main.ledger-main { padding:10px 10px 100px; }
.ledger-view .topbar { height:44px; }
.ledger-panel { overflow:visible; }
.ledger-bar { display:flex; align-items:center; gap:12px; min-height:52px; padding:8px 12px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.ledger-bar .date-control { margin-left:0; gap:3px; }
.ledger-bar .date-control input { min-height:30px; font-size:12px; width:120px; }
.ledger-bar .date-wrap { padding:0 7px; }
.ledger-bar .icon-button { min-height:32px; width:32px; height:32px; flex-shrink:0; }
.ledger-bar .btn { min-height:32px; padding:5px 8px; font-size:11px; }
.cash-glance { display:flex; flex-direction:column; gap:2px; font-size:10px; color:var(--muted); margin-left:auto; text-decoration:none; }
.cash-glance strong { font-size:14px; font-variant-numeric:tabular-nums; color:var(--primary); }
.ledger-actions { display:flex; align-items:center; gap:5px; min-width:0; }
.ledger-actions .search-wrap { min-width:100px; width:170px; flex:1; }
.ledger-actions .search-wrap input { min-height:32px; font-size:11px; }
.ledger-actions .search-wrap .icon { top:8px; width:15px; height:15px; }
.ledger-more { position:relative; }
.ledger-more > summary { list-style:none; cursor:pointer; }
.ledger-more > summary::-webkit-details-marker { display:none; }
.ledger-more[open] > summary { background:var(--primary-soft); color:var(--primary); }
.ledger-action-menu { position:absolute; right:0; top:calc(100% + 5px); z-index:20; width:205px; padding:5px; border:1px solid var(--line); border-radius:10px; background:white; box-shadow:0 8px 24px #25233a18; }
.ledger-action-menu .btn { width:100%; justify-content:flex-start; border:0; padding:10px; min-height:38px; }
.ledger-action-menu .btn:hover { background:var(--soft); }
.cash-summary-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); background:#fafaff; border-radius:0 0 var(--radius) var(--radius); scroll-margin-top:55px; }
.cash-summary-item { min-width:0; padding:12px 15px; display:flex; flex-direction:column; gap:5px; }
.cash-summary-item + .cash-summary-item { border-left:1px solid var(--line); }
.cash-summary-item > span { font-size:10px; color:var(--muted); }
.cash-summary-item > strong { font-size:17px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.cash-summary-item.in > strong { color:var(--green); }
.cash-summary-item.out > strong { color:var(--red); }
.cash-summary-item.cash-final { background:var(--primary-soft); border-radius:0 0 var(--radius) 0; }
.cash-summary-item.cash-final > strong { color:var(--primary); }
.movement-fab { position:fixed; bottom:24px; right:24px; z-index:25; border-radius:28px; min-height:48px; box-shadow:0 5px 20px #4f46e540; }
.ledger-main .below-ledger { margin-top:14px; }
.ledger-main .mini-panel { padding:15px; }
@media(max-width:1180px) {
  .ledger-actions .search-wrap { width:125px; }
  .ledger-action-label { display:none; }
  .ledger-bar { gap:8px; }
}
@media(max-width:720px) {
  .main.ledger-main { padding:8px 8px 90px; }
  .ledger-view .topbar { height:42px; }
  .ledger-bar { padding:6px 8px; gap:6px; }
  .ledger-bar .date-control { flex:1; min-width:0; }
  .ledger-bar .date-control .badge { display:none; }
  .ledger-bar .date-control input { width:110px; font-size:11px; }
  .cash-glance { flex-shrink:0; }
  .cash-glance strong { font-size:12px; }
  .ledger-actions { width:100%; }
  .ledger-actions .search-wrap { width:auto; min-width:0; }
  .cash-summary-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cash-summary-item { padding:10px 12px; }
  .cash-summary-item:nth-child(3) { border-left:0; border-top:1px solid var(--line); }
  .cash-summary-item:nth-child(4) { border-top:1px solid var(--line); }
  .cash-summary-item > strong { font-size:15px; }
  .movement-fab { width:54px; height:54px; min-height:54px; bottom:calc(18px + env(safe-area-inset-bottom)); right:16px; padding:0; justify-content:center; }
  .movement-fab > span, .movement-fab .kbd { display:none; }
  .movement-fab .icon { width:24px; height:24px; }
}
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ledger-panel th { padding-top:9px; padding-bottom:9px; }
.ledger-panel td { padding-top:8px; padding-bottom:8px; }
.ledger-panel .row-direction { height:27px; width:27px; border-radius:7px; }
.cash-glance { max-width:145px; }
.cash-glance strong { overflow-wrap:anywhere; }
.toast-region { bottom:88px; }
@media(max-width:720px) { .toast-region { bottom:calc(84px + env(safe-area-inset-bottom)); } }
.ledger-panel .row-title { white-space:normal; overflow-wrap:anywhere; }
@media(min-width:1251px) {
  .ledger-panel table { table-layout:fixed; }
  .ledger-panel th, .ledger-panel td { padding-left:12px; padding-right:12px; }
  .ledger-panel th:nth-child(1) { width:72px; }
  .ledger-panel th:nth-child(2) { width:22%; }
  .ledger-panel th:nth-child(3) { width:18%; }
  .ledger-panel th:nth-child(4), .ledger-panel th:nth-child(5) { width:14%; }
  .ledger-panel th:nth-child(6), .ledger-panel th:nth-child(7) { width:11%; }
  .ledger-panel th:nth-child(9) { width:44px; }
  .ledger-panel .note-cell { overflow-wrap:anywhere; }
  .ledger-panel .user-cell { white-space:normal; overflow-wrap:anywhere; }
  .ledger-panel td .badge { white-space:normal; overflow-wrap:anywhere; }
  .ledger-panel td.amount { white-space:normal; overflow-wrap:anywhere; }
}

.mobile-amount, .mobile-payment { display:none; }
.movement-fab { width:54px; height:54px; min-height:54px; padding:0; justify-content:center; }
.movement-fab > span, .movement-fab .kbd { display:none; }
.movement-fab .icon { width:24px; height:24px; }
.cash-summary-item.cash-final { padding-right:65px; }
@media(max-width:720px) {
  .ledger-panel table { table-layout:fixed; width:100%; }
  .ledger-panel th:nth-child(1) { width:51px; white-space:normal; font-size:9px; }
  .ledger-panel th:nth-child(2) { width:auto; }
  .ledger-panel th:nth-child(4), .ledger-panel td:nth-child(4),
  .ledger-panel th:nth-child(6), .ledger-panel td:nth-child(6),
  .ledger-panel th:nth-child(7), .ledger-panel td:nth-child(7) { display:none; }
  .ledger-panel th:nth-child(8) { width:107px; }
  .ledger-panel th:nth-child(9) { width:32px; }
  .ledger-panel .mobile-amount { display:table-cell; white-space:normal; overflow-wrap:anywhere; font-size:11px; }
  .ledger-panel .mobile-payment { display:block; }
  .ledger-panel .row-category { display:none; }
  .ledger-panel th, .ledger-panel td { padding-left:6px; padding-right:6px; }
  .ledger-panel .row-title { gap:5px; }
  .ledger-panel .row-title > div { min-width:0; }
  .ledger-panel .row-direction { width:22px; height:22px; flex-shrink:0; }
  .ledger-panel .row-direction .icon { width:13px; height:13px; }
  .ledger-panel td:first-child { font-size:10px; }
  .ledger-panel .row-detail { width:22px; height:30px; }
  .cash-summary-item.cash-final { padding-right:12px; }
}

/* Sólo los movimientos se desplazan; el resumen permanece al pie de la vista. */
.shell.ledger-view { height:100dvh; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.ledger-view .topbar { flex-shrink:0; }
.main.ledger-main { flex:1; min-height:0; display:flex; flex-direction:column; padding-bottom:0; }
.ledger-main #integrity-notice { flex-shrink:0; max-height:20vh; overflow:auto; }
.ledger-panel { flex:1; min-height:0; display:flex; flex-direction:column; margin-bottom:0; }
.ledger-bar, .ledger-panel .advanced-filters, .ledger-footer { flex-shrink:0; }
.ledger-panel .advanced-filters { max-height:30vh; overflow:auto; }
#ledger-results { flex:1; min-height:0; display:flex; flex-direction:column; overflow:auto; }
#ledger-results .table-wrap { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding-bottom:72px; }
#ledger-results th { position:sticky; top:0; z-index:2; background:#fafbfe; }
#ledger-results .table-footer { flex-shrink:0; }
.ledger-footer { position:relative; padding-right:78px; padding-bottom:env(safe-area-inset-bottom); background:var(--primary-soft); }
.ledger-footer .movement-fab { position:absolute; right:12px; top:calc((100% - env(safe-area-inset-bottom)) / 2); bottom:auto; transform:translateY(-50%); }
.ledger-footer .cash-summary-item.cash-final { padding-right:12px; }
.ledger-checks { position:relative; }
.ledger-checks > summary { list-style:none; cursor:pointer; }
.ledger-checks > summary::-webkit-details-marker { display:none; }
.ledger-checks[open] > summary { background:var(--primary-soft); color:var(--primary); }
.ledger-checks-panel { position:absolute; top:calc(100% + 8px); right:0; z-index:30; width:min(650px,calc(100vw - 40px)); max-height:60dvh; overflow:auto; padding:14px; border:1px solid var(--line); border-radius:12px; background:white; box-shadow:0 8px 24px #25233a22; }
.ledger-checks-panel .footnote { margin-top:0; }
@media(max-width:720px) {
  .main.ledger-main { padding-bottom:0; }
  .ledger-checks { position:static; }
  .ledger-actions { position:relative; }
  .ledger-checks-panel { right:0; width:100%; }
  .ledger-checks-panel .below-ledger { grid-template-columns:1fr; }
}

.sidebar-session { border-top:1px solid var(--line); margin-top:14px; padding-top:10px; }
.user-menu { position:relative; }
.user-menu > summary { list-style:none; cursor:pointer; }
.user-menu > summary::-webkit-details-marker { display:none; }
.user-menu[open] > summary { color:var(--primary); background:var(--primary-soft); }
.user-menu-panel { position:absolute; right:0; top:calc(100% + 8px); width:220px; padding:6px; z-index:40; border:1px solid var(--line); border-radius:10px; background:white; box-shadow:0 8px 24px #25233a22; }
.user-menu-name { padding:10px; border-bottom:1px solid var(--line); margin-bottom:5px; overflow-wrap:anywhere; }
.user-menu-name strong, .user-menu-name small { display:block; }
.user-menu-name small { color:var(--muted); margin-top:4px; }
.user-menu-panel .btn { width:100%; justify-content:flex-start; border:0; }
.user-menu-panel .btn:hover { background:var(--soft); }

/* Alta: campos con scroll y acciones siempre visibles. */
dialog.movement-dialog[open] { display:flex; flex-direction:column; max-height:90dvh; padding:0; overflow:hidden; }
.movement-dialog .modal-heading { flex-shrink:0; padding:22px 27px; margin:0; }
.movement-dialog #movement-form { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.movement-fields { min-height:0; overflow:auto; overscroll-behavior:contain; padding:0 27px 20px; }
.movement-dialog .modal-footer { flex-shrink:0; margin:0; padding-bottom:calc(17px + env(safe-area-inset-bottom)); }
@media(max-width:720px) {
  .movement-dialog .modal-heading { padding:18px; }
  .movement-fields { padding:0 18px 18px; }
  .movement-dialog .modal-footer { padding:14px 18px calc(14px + env(safe-area-inset-bottom)); }
}

/* Evita que el estado vacío reduzca el ancho intrínseco de la planilla. */
.main.ledger-main { width:100%; }
.ledger-main .ledger-panel { width:100%; }

.sidebar-box { margin:0 8px 18px; font-size:12px; font-weight:600; color:var(--primary); overflow-wrap:anywhere; }
.box-label { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid var(--line); border-radius:7px; padding:5px 9px; font-size:11px; font-weight:600; color:var(--primary); background:var(--primary-soft); }
#box-name-form { margin:16px 0; padding-bottom:16px; border-bottom:1px solid var(--line); }
@media(max-width:720px) { .box-label { max-width:130px; font-size:10px; padding:4px 7px; } }

/* Encabezados compactos en las vistas de gestión. */
.shell .main:not(.ledger-main) { padding:14px; }
.shell .main:not(.ledger-main) .page-heading { gap:12px; margin-bottom:12px; }
.shell .main:not(.ledger-main) .page-heading > div:first-child { min-width:0; }
.shell .main:not(.ledger-main) .page-heading .eyebrow { margin-bottom:2px; line-height:1.3; }
.shell .main:not(.ledger-main) .page-heading h1 { font-size:24px; line-height:1.2; letter-spacing:-.6px; }
.shell .main:not(.ledger-main) .page-heading p { margin-top:3px; line-height:1.35; }
.shell .main:not(.ledger-main) .report-controls { padding:12px; gap:10px; margin-bottom:14px; }
@media(max-width:720px) {
  .shell .main:not(.ledger-main) { padding:10px; }
  .shell .main:not(.ledger-main) .page-heading { flex-wrap:wrap; row-gap:8px; margin-bottom:10px; }
  .shell .main:not(.ledger-main) .page-heading > div:first-child { flex-basis:100%; }
  .shell .main:not(.ledger-main) .page-heading h1 { font-size:22px; }
  .shell .main:not(.ledger-main) .report-controls { padding:10px; }
}

/* Evolución diaria: SVG nativo, sin ancho proporcional a la cantidad de días. */
.trend-panel { margin-top:16px; }
.trend-panel .panel-heading { flex-wrap:wrap; gap:12px; }
.trend-switch { display:flex; gap:4px; }
.trend-switch [aria-pressed="true"] { background:var(--primary); color:white; border-color:var(--primary); }
.trend-controls { display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; padding:0 20px 12px; }
.trend-controls label { min-width:140px; flex:1; font-size:11px; }
.trend-controls input, .trend-controls select { margin-top:4px; }
.trend-controls small { display:block; font-size:10px; margin-top:3px; }
.trend-controls > button { margin-top:20px; }
.trend-controls .form-error { width:100%; }
.trend-filter-note { padding:0 20px; font-size:11px; color:var(--muted); }
.trend-legend { display:flex; flex-wrap:wrap; gap:16px; align-items:center; padding:12px 20px 4px; font-size:12px; }
.trend-legend span::before { content:""; display:inline-block; width:20px; height:3px; margin-right:7px; vertical-align:middle; background:var(--green); }
.trend-legend .trend-exit::before { background:var(--red); }
.trend-range { margin-left:auto; }
.trend-content { min-width:0; padding:0 12px; }
.trend-chart { display:block; width:100%; height:280px; touch-action:pan-y; }
.trend-chart text { fill:var(--muted); font-size:11px; }
.trend-grid { stroke:var(--line); }
.trend-line { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.trend-line.entries { stroke:var(--green); }
.trend-line.exits { stroke:var(--red); }
.trend-dot.entries { fill:var(--green); }
.trend-dot.exits { fill:var(--red); }
.trend-cursor { stroke:#788196; stroke-dasharray:3 4; opacity:.6; }
.trend-detail { min-height:34px; padding:4px 20px; font-size:12px; }
.trend-loading { padding:30px 12px; color:var(--muted); }
.trend-panel > .footnote { padding:0 20px 14px; margin:0; }
@media(max-width:720px) {
  .trend-controls, .trend-legend, .trend-detail { padding-left:12px; padding-right:12px; }
  .trend-controls label { min-width:120px; }
  .trend-controls > button { margin-top:0; }
  .trend-panel > .footnote { padding:0 12px 12px; }
  .trend-range { width:100%; margin-left:0; }
}
.trend-line.exits { stroke-dasharray:6 3; }

/* Ventas: mismos tokens y diálogos nativos; pie de confirmación siempre visible. */
.sale-dialog { width: min(760px, calc(100vw - 24px)); }
.sale-dialog #sale-form { display: flex; flex-direction: column; min-height: 0; }
.sale-fields { overflow-y: auto; min-height: 0; max-height: 60vh; padding-right: 4px; }
.sale-dialog .modal-footer { flex-shrink: 0; }
.sale-line { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border, #e5e5ec); }
.sale-line > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sale-line small { display: block; margin-top: 4px; }
.sale-line b { white-space: nowrap; }
.sale-lines { margin: 14px 0; }
.sale-payment { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin: 10px 0; }
.sale-payment > * { min-width: 0; }
.sale-suggestions { display: grid; gap: 6px; max-height: 180px; overflow-y: auto; margin-top: 6px; }
.sale-suggestions .btn { justify-content: space-between; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.sales-filters { flex-wrap: wrap; }
.sales-filters .field { margin-bottom: 0; }
#products-search-form, #sales-search-form { flex-wrap: wrap; }
#products-search-form input, #sales-search-form input { min-width: 0; width: min(300px, 100%); }
@media (max-width: 720px) {
  .sale-payment { grid-template-columns: 1fr 1fr; }
  .sale-payment button { grid-column: 2; justify-self: end; }
  .sale-line { flex-wrap: wrap; }
  .sale-fields { max-height: 58vh; }
  .sale-dialog .modal-footer .btn { padding-inline: 12px; }
}
.sales-filters #sales-search-form { display: flex; flex: 1; max-width: 460px; gap: 8px; }
.sales-filters #sales-search { flex: 1; width: auto; }
#sales-results, #products-results { padding: 0 22px 18px; }
#sales-results .pagination, #products-results .pagination { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; font-size: 12px; color: var(--muted); }
#products-search-form { margin: 0 22px 18px; gap: 8px; }
@media (max-width: 720px) { #sales-results, #products-results { padding: 0 12px 12px; } #products-search-form { margin-inline: 12px; } }