:root {
  --ink: #101b39;
  --muted: #405074;
  --line: #dce3ef;
  --blue: #094a94;
  --bar-billed: #0a4789;
  --bar-received: #3a98f6;
  --danger: #d10a1c;
}
body {
  min-width: 0;
  background: radial-gradient(ellipse at 55% 25%, #f7f9ff 10%, #edf2fc 80%);
  color: var(--ink);
  font-family: Arial, "Helvetica Neue", sans-serif;
}
small {
  font-size: 0.65em;
}
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1.45rem;
  height: 1.45rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-shell { display: grid; grid-template-columns: 212px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background: linear-gradient(120deg, #0f2853, #10264d 85%);
  color: #fff;
  /* padding: 12px 8px 34px;*/
}
.brand { display: block; width: 100%; margin: 0 auto 24px;   background-color: #fff; padding: 15px; }
.brand img { display: block; width: 100%; }
.brand text {
  fill: #fff;
  font-size: 35px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -1.5px;
}
#nav { display: grid; gap: 4px; }
#nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  min-height: 47px;
  padding: 9px 14px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  font-size: 1.04rem;
}
#nav a:hover, #nav a.active { background: linear-gradient(100deg, #235595, #214b88); }
.sidebar-footer { margin-top: auto; padding-top: 28px; text-align: center; }
.sidebar-footer .icon { width: 83px; height: 59px; margin-bottom: 3px; }
.sidebar-footer small { display: block; color: #e3eaf9; margin-top: 3px; }
.workspace { min-width: 0; padding: 10px 16px 18px 24px; }
.topbar {
  min-height: 72px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 17px;
  padding-left: 3px;
}
.topbar h1 { margin: 0 0 2px; font-size: clamp(1.5rem, 2vw, 2.12rem); font-weight: 800; letter-spacing: -.025em; }
.topbar p, .panel-title p, .summary-copy p { margin: 0; color: var(--muted); }
.role-control { display: flex; align-items: center; gap: 14px; }
.role-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  color: #fff;
  background: #7b9fdb;
}
.role-control label { display: block; margin-bottom: 2px; color: var(--muted); font-size: .875rem; }
.role-control select { width: 193px; min-height: 34px; font-size: 1rem; }
.form-control, .form-select { border-color: #c9d4e8; color: var(--ink); }
.page { display: none; }
.page.active { display: block; }
.card { border: 0; border-radius: 16px; box-shadow: 0 3px 12px #18376c18; color: var(--ink); }
.summary-grid, .detail-grid { display: grid; gap: 20px; }
.summary-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); margin-bottom: 24px; }
.detail-grid { grid-template-columns: minmax(0, 1.64fr) minmax(0, 1fr); }
.dashboard-card {
  padding: 16px 20px 14px;
  border-radius: 20px;
  background: linear-gradient(155deg, #fff 0%, #f8f9fc 100%);
  box-shadow: 0 3px 6px #21458214, 0 11px 20px #21458214;
}
.summary-card { min-height: 316px; }
.summary-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  column-gap: clamp(10px, 1.15vw, 20px);
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}
.icon-tile { display: grid; place-items: center; width: 63px; height: 60px; border-radius: 13px; }
.icon-tile .icon { width: 35px; height: 35px; }
.blue { color: #0062c8; background: #e7f1fc; }
.summary-card .blue { background: #dcebfc; }
.green { color: #197719; background: #e7f5e8; }
.summary-copy h2, .panel-title h2 {
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0;
  font-size: clamp(1.1rem, 1.45vw, 1.52rem);
}
.summary-copy p { font-size: clamp(.85rem, 1vw, 1.02rem); line-height: 1.3; }
.summary-total { font-size: clamp(1.6rem, 2.3vw, 2.35rem); color: var(--blue); font-weight: 800; line-height: 1.2; margin-top: 5px; }
.invoice-counter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  padding: 0 12px 4px clamp(12px, 2.2vw, 38px);
  border-left: 1px solid #c9d4e5;
  color: var(--muted);
}
.invoice-counter .icon { width: 36px; height: 36px; }
.invoice-counter strong { display: block; color: var(--ink); font-size: clamp(1.75rem, 3vw, 3rem); line-height: 1; }
.invoice-counter span { font-size: clamp(.85rem, 1.15vw, 1.2rem); }
.summary-card .method-list { margin: 3px 0 14px; }
.method-row {
  display: grid;
  grid-template-columns: 150px minmax(20px, 1fr) 56px 132px;
  align-items: center;
  gap: clamp(7px, 1vw, 18px);
  min-height: 41px;
  border-bottom: 1px solid var(--line);
  padding: 2px 3px;
}
.method-name { display: flex; align-items: center; gap: 13px; color: var(--ink); }
.method-name .icon { color: var(--muted); }
.method-amount, .method-percent { text-align: right; white-space: nowrap; }
.method-amount { font-size: clamp(.875rem, 1.1vw, 1.12rem); }
.method-percent { border-radius: 20px; background: #e9edf5; font-size: .88rem; text-align: center; }
.method-row .progress { height: 16px; background: #dde3ee; border-radius: 20px; }
.method-row .progress-bar { background: var(--method-color); border-radius: inherit; }
.dashboard-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  min-height: 34px;
  padding: 3px 10px;
  margin-top: auto;
  color: #092d89;
  border-radius: 8px;
}
.dashboard-link .icon, .date-link .icon { width: 21px; height: 21px; }
.today-link { background: #cbe0f8; }
.tomorrow-link { background: #d4ddf5; }
.today-link:hover, .tomorrow-link:hover { color: #fff; background: #164e96; }
.panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.panel-title { display: flex; align-items: center; gap: 12px; }
.panel-title p { line-height: 1.35; }
.icon-tile.compact { width: 41px; height: 41px; border-radius: 8px; }
.icon-tile.compact .icon { width: 29px; height: 29px; }
.date-controls { display: flex; gap: 8px; align-items: center; }
.date-controls .btn { display: grid; place-items: center; width: 35px; height: 34px; color: var(--ink); border-color: #667796; }
.date-controls .btn:hover { color: #fff; background: #244b81; }
.date-controls .icon { width: 17px; height: 17px; }
.date-controls input { width: 155px; min-height: 34px; padding-inline: 10px; font-size: .97rem; }
.date-summary { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 2fr); gap: 26px; margin: 15px 0 16px; }
.date-totals { display: grid; gap: 7px; }
.date-total {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 14px;
  min-height: 68px;
  border-radius: 12px;
  font-size: .92rem;
}
.date-total div { color: var(--ink); }
.date-total .icon { width: 35px; height: 35px; }
.date-total strong { display: block; color: var(--blue); font-size: clamp(1.15rem, 1.6vw, 1.68rem); line-height: 1.13; white-space: nowrap; }
.date-total.green strong { color: #197719; }
.date-breakdown { border-left: 1px solid #c6d1e4; padding-left: 24px; min-width: 0; }
.dashboard-card h3 { font-size: 1.04rem; font-weight: 700; margin: 0; }
.date-breakdown h3 { margin-bottom: 6px; color: #12336b; }
.date-breakdown .method-row { grid-template-columns: 120px minmax(20px, 1fr) 55px 105px; min-height: 36px; font-size: .95rem; }
.date-breakdown .method-amount { font-size: .96rem; }
.chart-panel { border-top: 1px solid #cbd6e8; margin: 0; padding-top: 10px; }
.chart-panel figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 14px; padding: 0 7px; }
.chart-legend { display: flex; gap: 24px; color: var(--muted); font-size: .875rem; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend span::before { content: ""; width: 15px; height: 15px; border-radius: 50%; background: var(--bar-billed); }
.chart-legend span:nth-child(2)::before { background: var(--bar-received); }
.chart-scroll { overflow-x: auto; }
.chart-scroll svg { width: 100%; min-width: 375px; height: auto; display: block; }
.date-card { padding-top: 12px; padding-bottom: 10px; }
.chart-grid { stroke: var(--line); }
.chart-axis { stroke: #aebdd7; }
.chart-label { fill: var(--ink); font-size: 13px; }
.chart-value { font-size: 12px; font-weight: 700; }
.chart-billed { fill: var(--bar-billed); }
.chart-received { fill: var(--bar-received); }
.date-link { display: inline-flex; gap: 5px; align-items: center; align-self: end; margin: -1px 0 0; padding: 0; line-height: 1.1; text-decoration: none; }
.date-link .icon { width: 15px; height: 15px; }
.alerts-card .panel-head { min-height: 54px; }
.alert-icon { width: 34px; height: 34px; color: var(--danger); }
.alert-count { border-radius: 25px; background: #ffdbdc; color: #9f0913; padding: 5px 16px; white-space: nowrap; font-size: .92rem; }
.alert-row { min-height: 67px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.alert-row > .icon { color: var(--danger); margin: 0 9px 0 4px; }
.alert-row div { flex: 1; min-width: 0; }
.alert-row .btn { white-space: nowrap; --bs-btn-padding-x: .65rem; }
.alert-row p { margin: 0; line-height: 1.25; }
.alert-row small { color: var(--muted); }
.alerts-link {
  color: #ba0919;
  border-color: #dc1727;
  background: #fce0e2;
  min-height: 43px;
  margin: 30px 0 0;
}
.alerts-link:hover { background: #ba0919; }
.smallmuted { font-size: .875rem; color: var(--muted); }
.table td { vertical-align: middle; }
.table th { color: var(--ink); }
.register-card { max-width: 660px; }
dialog {
  width: 580px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  color: var(--ink);
  border: 0;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 45px #0003;
}
dialog::backdrop { background: #0e224b88; }
:focus-visible { outline: 3px solid #3392ed; outline-offset: 2px; }
@media (max-width: 1500px) {
  .method-row { grid-template-columns: 125px minmax(20px, 1fr) 46px 107px; }
  .date-breakdown .method-row { grid-template-columns: 108px minmax(20px, 1fr) 42px 88px; }
  .date-summary { gap: 16px; }
  .date-breakdown { padding-left: 16px; }
}
@media (max-width: 1280px) {
  .app-shell { grid-template-columns: 178px minmax(0, 1fr); }
  #nav a { gap: 8px; padding-inline: 9px; font-size: .94rem; }
  .workspace { padding-inline: 16px; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-card { padding-inline: 15px; }
  .icon-tile { width: 45px; height: 45px; }
  .icon-tile .icon { width: 28px; height: 28px; }
  .invoice-counter { padding-right: 0; }
  .invoice-counter .icon { width: 24px; height: 24px; }
  .method-row { grid-template-columns: 107px minmax(12px, 1fr) 40px 90px; gap: 7px; }
  .method-name { gap: 6px; font-size: .91rem; }
  .method-name .icon { width: 20px; height: 20px; }
}
@media (max-width: 960px) {
  .summary-grid { grid-template-columns: 1fr; }
  .summary-card { min-height: 0; }
}
@media (max-width: 830px) {
  .date-summary { grid-template-columns: minmax(0, 1fr); }
  .date-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .date-breakdown { border: 0; padding-left: 0; }
}
@media (max-width: 660px) {
  .app-shell { display: block; }
  .sidebar { position: static; height: auto; padding: 8px; }
  .brand { width: 95px; margin: 0 auto 6px; }
  #nav { display: flex; flex-wrap: wrap; justify-content: center; }
  #nav a { gap: 6px; padding: 6px 8px; min-height: 36px; font-size: .86rem; }
  #nav .icon { width: 18px; height: 18px; }
  .sidebar-footer { display: none; }
  .workspace { padding-inline: 12px; }
  .role-control select { width: 165px; }
  .method-name { font-size: .85rem; }
  .date-total { padding-inline: 8px; gap: 7px; font-size: .8rem; }
  .date-total .icon { width: 24px; height: 24px; }
  .date-breakdown .method-row { grid-template-columns: 106px minmax(12px, 1fr) 37px 83px; }
  .alert-row > .icon { margin-inline: 0; width: 18px; }
  .chart-scroll svg { min-width: 530px; }
  .chart-label { font-size: 16px; }
  .chart-value { font-size: 14px; }
}
@media (max-width: 390px) {
  .dashboard-card { padding-inline: 11px; }
  .summary-head { grid-template-columns: minmax(0, 1fr) auto; }
  .summary-head > .icon-tile { display: none; }
  .date-total .icon { display: none; }
  .alert-row { gap: 6px; }
  .alert-row > .icon { display: none; }
}

/* Facturas y verificaciones */
.invoice-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  padding: .75rem;
}
.invoice-search, .invoice-date, .invoice-filter-actions { grid-column: 1 / -1; }
.invoice-filters input, .invoice-filters select { min-width: 0; }
.invoice-filters .form-select {
  padding-right: 1.65rem;
  background-position: right .5rem center;
  font-size: .9rem;
}
.invoice-search { position: relative; }
.invoice-search .icon {
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--blue);
}
.invoice-search input { padding-left: 2.45rem; }
.invoice-filter-actions, .invoice-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.invoice-filter-actions { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
#facturas .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  border-radius: .5rem;
  line-height: 1.2;
}
#facturas .btn .icon { width: 1rem; height: 1rem; }
#facturas .btn-primary {
  --bs-btn-bg: #143b83;
  --bs-btn-border-color: #143b83;
  --bs-btn-hover-bg: #0f2b62;
  --bs-btn-hover-border-color: #0f2b62;
}
.invoice-results {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .9rem 0 .7rem;
  padding-inline: .5rem;
  color: #153874;
}
.invoice-results .icon { width: 1.15rem; height: 1.15rem; }
.invoice-list { display: grid; gap: .65rem; }
.invoice-card {
  display: grid;
  gap: .65rem;
  padding: .75rem;
  background: linear-gradient(155deg, #fff, #f9faff);
}
.invoice-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "identity state" "values values";
  align-items: center;
  gap: .6rem;
  min-width: 0;
}
.invoice-identity {
  grid-area: identity;
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}
.invoice-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .6rem;
  background: #e5efff;
  color: #1559c7;
}
.invoice-number {
  color: #104ab6;
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
}
.invoice-client { font-size: .94rem; line-height: 1.2; overflow-wrap: anywhere; }
.invoice-states {
  grid-area: state;
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: .25rem;
}
.invoice-status { font-size: .77rem; padding: .4rem .62rem; }
.invoice-status.paid { color: #075b2e; background: #d5f5e1; }
.invoice-status.pending { color: #754307; background: #fff0bc; }
.invoice-status.partial { color: #123e89; background: #dfebff; }
.invoice-status.overdue { color: #9f0913; background: #ffdbdc; }
.invoice-values {
  grid-area: values;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem .375rem;
  padding-top: .6rem;
  border-top: 1px solid var(--line);
  margin: 0;
}
.invoice-field { display: flex; align-items: start; gap: .375rem; min-width: 0; }
.invoice-field .icon { color: var(--muted); width: 1.05rem; height: 1.05rem; margin-top: .12rem; }
.invoice-field dt { color: var(--muted); font-size: .77rem; font-weight: 400; }
.invoice-field dd { font-size: .875rem; line-height: 1.25; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.invoice-management { display: grid; align-content: center; gap: .4rem; min-width: 0; }
.invoice-verifications { display: grid; gap: .3rem; }
.invoice-movement {
  background: #eaf0fc;
  border-radius: .5rem;
  padding: .32rem .5rem;
  color: #153568;
  font-size: .78rem;
  overflow-wrap: anywhere;
}
.invoice-movement-info { line-height: 1.25; }
.invoice-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: .15rem;
}
.invoice-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  overflow-wrap: normal;
  min-height: 1.65rem;
}
.invoice-check + .invoice-check { border-left: 1px solid #c5d2ea; }
.invoice-check .form-check-input { flex: none; margin: 0; width: .95rem; height: .95rem; cursor: inherit; }
.invoice-actions { gap: .4rem; }
.invoice-actions .btn { min-height: 2rem; padding-inline: .3rem; font-size: .8125rem; }
.invoice-abono { grid-column: 1 / -1; }

@media (max-width: 767.98px) {
  .invoice-method { grid-column: 1 / -1; align-items: center; }
  .invoice-method > div { display: flex; align-items: baseline; gap: .5rem; }
  .invoice-actions .btn, .invoice-filter-actions .btn { min-height: 2.5rem; }
  .invoice-check { min-height: 2rem; }
}
@media (min-width: 768px) {
  .invoice-card {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 32%);
    align-items: center;
    gap: .75rem;
  }
  .invoice-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-management { border-left: 1px solid var(--line); padding-left: .75rem; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .invoice-actions .btn .icon { display: none; }
}
@media (min-width: 992px) {
  .invoice-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .invoice-search, .invoice-date, .invoice-filter-actions { grid-column: span 2; }
  .invoice-values { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .invoice-field + .invoice-field { border-left: 1px solid var(--line); padding-left: .4rem; }
}
@media (min-width: 1320px) {
  .invoice-filters { grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr)) minmax(0, .9fr) minmax(0, 1.6fr); }
  .invoice-search, .invoice-date, .invoice-filter-actions { grid-column: auto; }
  .invoice-card { grid-template-columns: minmax(0, 1fr) minmax(21rem, 32%); }
  .invoice-summary {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 3.65fr) auto;
    grid-template-areas: "identity values state";
  }
  .invoice-values { border-top: 0; padding-top: 0; }
  .invoice-field { border-left: 1px solid var(--line); padding-left: .35rem; }
  .invoice-field .icon { width: .95rem; height: .95rem; }
  .invoice-actions:has(.invoice-abono) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.18fr) minmax(0, 1.28fr); }
  .invoice-abono { grid-column: auto; }
}