:root {
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --cyan-600: #0891b2;
  --green-100: #dcfce7;
  --green-700: #15803d;
  --amber-100: #fef3c7;
  --amber-800: #92400e;
  --red-50: #fef2f2;
  --red-700: #b91c1c;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-950: #020617;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 12px 34px rgba(15, 23, 42, .08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background:
    linear-gradient(180deg, #f8fafc 0%, #eef4fb 42%, #f8fafc 100%);
  margin: 0;
  overflow-x: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, textarea { font: inherit; }
dialog { border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
table { min-width: 1080px; }

.min-h-screen { min-height: 100vh; }
.w-full { width: 100%; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-5 { margin-bottom: 1.25rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pb-6 { padding-bottom: 1.5rem; }
.p-4 { padding: 1rem; }
.h-14 { height: 3.5rem; }
.w-14 { width: 3.5rem; }
.flex { display: flex; }
.grid { display: grid; }
.block { display: block; }
.hidden { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.flex-1 { flex: 1 1 0%; }
.min-w-0 { min-width: 0; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.overflow-hidden { overflow: hidden; }
.border { border: 1px solid var(--slate-200); }
.border-b { border-bottom: 1px solid var(--slate-200); }
.border-collapse { border-collapse: collapse; }
.rounded-lg { border-radius: .5rem; }
.rounded-full { border-radius: 9999px; }
.bg-white { background: #fff; }
.bg-slate-50 { background: var(--slate-50); }
.bg-slate-100 { background: var(--slate-100); }
.bg-green-100 { background: var(--green-100); }
.bg-red-50 { background: var(--red-50); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-xs { font-size: .75rem; }
.text-sm { font-size: .875rem; }
.text-lg { font-size: 1.125rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: .025em; }
.leading-6 { line-height: 1.5rem; }
.leading-8 { line-height: 2rem; }
.leading-tight { line-height: 1.1; }
.text-blue-700 { color: var(--blue-700); }
.text-green-700 { color: var(--green-700); }
.text-red-700 { color: var(--red-700); }
.text-slate-500 { color: var(--slate-500); }
.text-slate-600 { color: var(--slate-600); }
.text-slate-700 { color: var(--slate-700); }
.text-slate-950 { color: var(--slate-950); }

.btn {
  align-items: center;
  border: 1px solid transparent;
  border-radius: .5rem;
  cursor: pointer;
  display: inline-flex;
  gap: .45rem;
  font-weight: 700;
  justify-content: center;
  max-width: 100%;
  min-height: 2.75rem;
  padding: .7rem 1rem;
  text-align: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: normal;
  box-shadow: var(--shadow-sm);
}
.btn:disabled { cursor: not-allowed; opacity: .65; }
.btn-sm { min-height: 2.25rem; padding: .45rem .75rem; font-size: .875rem; }
.btn-primary { background: var(--blue-700); color: #fff; }
.btn-primary:hover { background: var(--blue-800); }
.btn-secondary { background: rgba(255,255,255,.92); border-color: var(--slate-200); color: var(--slate-950); }
.btn-secondary:hover { background: var(--slate-100); }
.btn-danger { background: var(--red-50); border-color: #fecaca; color: var(--red-700); }
.btn-danger:hover { background: #fee2e2; border-color: var(--red-700); }
.panel { background: rgba(255,255,255,.92); border: 1px solid rgba(226,232,240,.9); border-radius: .5rem; box-shadow: var(--shadow-sm); padding: 1rem; }
.panel:hover { box-shadow: var(--shadow-md); }
.table-shell { background: rgba(255,255,255,.95); border: 1px solid var(--slate-200); border-radius: .5rem; box-shadow: var(--shadow-sm); overflow-x: auto; }
.table-shell tbody tr:hover { background: var(--slate-50); }
.validations-scroll {
  max-height: min(34rem, calc(100vh - 22rem));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--blue-700) var(--slate-100);
  scrollbar-width: thin;
}
.validations-scroll::-webkit-scrollbar {
  height: .65rem;
  width: .65rem;
}
.validations-scroll::-webkit-scrollbar-track {
  background: var(--slate-100);
  border-radius: 9999px;
}
.validations-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--blue-700), var(--cyan-600));
  border: 2px solid var(--slate-100);
  border-radius: 9999px;
}
.validations-scroll table {
  border-collapse: separate;
  border-spacing: 0;
}
.validations-scroll thead th {
  background: var(--slate-100);
  box-shadow: 0 1px 0 var(--slate-200);
  position: sticky;
  top: 0;
  z-index: 3;
}
.validations-scroll tbody td {
  position: relative;
  z-index: 1;
}
.input {
  background: rgba(255,255,255,.96);
  border: 1px solid var(--slate-200);
  border-radius: .5rem;
  min-height: 2.75rem;
  outline: none;
  padding: .7rem .85rem;
  min-width: 0;
  width: 100%;
}
.input:focus { border-color: var(--blue-700); box-shadow: 0 0 0 3px rgba(29,78,216,.12); }
.password-field { display: block; position: relative; }
.password-input { padding-right: 3rem; }
.password-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: .4rem;
  color: var(--slate-500);
  cursor: pointer;
  display: inline-flex;
  height: 2.1rem;
  justify-content: center;
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.1rem;
}
.password-toggle:hover { background: var(--slate-100); color: var(--slate-700); }
.password-toggle:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.textarea { min-height: 7rem; resize: vertical; }
.label { color: var(--slate-700); display: block; font-size: .875rem; font-weight: 600; }
.checkbox { accent-color: var(--blue-700); height: 1.05rem; width: 1.05rem; }
.segmented { background: rgba(241,245,249,.88); border: 1px solid var(--slate-200); border-radius: .5rem; display: inline-flex; flex-wrap: wrap; padding: .2rem; width: 100%; }
.segmented-btn { background: transparent; border: 0; border-radius: .4rem; color: var(--slate-600); cursor: pointer; flex: 1 1 auto; font-weight: 700; min-height: 2.35rem; padding: .55rem .75rem; }
.segmented-btn.active { background: #fff; color: var(--slate-950); box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.badge { border-radius: 9999px; display: inline-flex; font-size: .75rem; font-weight: 700; padding: .25rem .6rem; }
.badge-pending { background: var(--amber-100); color: var(--amber-800); }
.badge-signed { background: var(--green-100); color: var(--green-700); }
.badge-dispute { background: var(--red-50); color: var(--red-700); }
.metric-card { background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: .5rem; padding: 1rem; }
.icon { height: 1rem; width: 1rem; }
.icon-btn { align-items: center; background: #fff; border: 1px solid var(--slate-200); border-radius: .5rem; cursor: pointer; display: inline-flex; height: 2.5rem; justify-content: center; width: 2.5rem; }
.icon-btn:hover { background: var(--slate-100); }
.icon-btn-danger { color: var(--red-700); }
.icon-btn-danger:hover { background: var(--red-50); border-color: var(--red-700); }
.metric-icon { color: var(--blue-700); height: 2rem; width: 2rem; }
.success-icon { height: 2rem; width: 2rem; }
.upload-icon { color: var(--blue-700); height: 1.35rem; margin-bottom: .75rem; width: 1.35rem; }
.upload-box { background: rgba(248,250,252,.75); border: 1px dashed var(--slate-400); border-radius: .5rem; display: flex; flex-direction: column; min-height: 7rem; padding: 1rem; justify-content: center; }
.upload-box:hover { border-color: var(--blue-700); background: #eff6ff; }
.signature-canvas { background: #fff; border: 1px solid var(--slate-200); border-radius: .5rem; display: block; height: 13rem; touch-action: none; width: 100%; }
.qr-panel { align-items: flex-start; border-top: 1px solid var(--slate-200); display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; padding-top: 1rem; }
.qr-panel.hidden { display: none; }
.qr-code { background: #fff; border: 1px solid var(--slate-200); border-radius: .5rem; flex: 0 0 auto; padding: .5rem; }
.qr-code img, .qr-code canvas { display: block; height: 96px; width: 96px; }
.modal { background: transparent; max-width: calc(100vw - 2rem); width: 42rem; }
.modal::backdrop { background: rgba(15, 23, 42, .45); }
.modal-card { background: #fff; border: 1px solid var(--slate-200); border-radius: .5rem; box-shadow: 0 24px 60px rgba(15, 23, 42, .25); padding: 1rem; width: 100%; }
.photo-preview { align-items: center; aspect-ratio: 4 / 3; background: var(--slate-100); border: 1px dashed var(--slate-400); border-radius: .5rem; color: var(--slate-500); display: flex; justify-content: center; overflow: hidden; padding: 1rem; text-align: center; }
.photo-img { display: block; height: 100%; object-fit: cover; width: 100%; }
.row-actions { align-items: flex-start; display: flex; flex-direction: column; gap: .35rem; }
.row-actions-right { align-items: flex-end; }
.user-chip { align-items: center; background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 9999px; color: var(--blue-700); display: inline-flex; font-size: .8rem; font-weight: 800; gap: .5rem; max-width: 100%; padding: .25rem .7rem .25rem .25rem; }
.user-chip-avatar { align-items: center; background: #fff; border: 1px solid var(--blue-100); border-radius: 9999px; color: var(--blue-700); display: inline-flex; flex: 0 0 auto; font-size: .7rem; font-weight: 900; height: 2rem; justify-content: center; overflow: hidden; width: 2rem; }
.user-chip-avatar img { display: block; height: 100%; object-fit: cover; width: 100%; }
.user-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-avatar { align-items: center; background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 9999px; color: var(--blue-700); display: flex; font-size: 1.25rem; font-weight: 900; height: 6rem; justify-content: center; margin: 0 auto; overflow: hidden; width: 6rem; }
.avatar-img { height: 100%; object-fit: cover; width: 100%; }
.back-link { align-items: center; color: var(--blue-700); display: inline-flex; font-size: .875rem; font-weight: 700; gap: .45rem; }
.back-link:hover { color: var(--blue-800); }
.brand-lockup { align-items: center; display: inline-flex; gap: .7rem; }
.brand-mark { align-items: center; background: var(--blue-700); border-radius: .5rem; color: #fff; display: inline-flex; font-size: .8rem; font-weight: 800; height: 2.35rem; justify-content: center; letter-spacing: .03em; width: 2.35rem; }
.home-shell { position: relative; }
.home-centered { margin-left: auto; margin-right: auto; max-width: 48rem; }
.legal-nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  justify-content: center;
}
.legal-nav a {
  color: var(--slate-600);
  font-size: .875rem;
  font-weight: 700;
}
.legal-nav a:hover { color: var(--blue-700); }
.legal-page {
  display: grid;
  gap: 1rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 52rem;
}
.legal-page header {
  background: rgba(255,255,255,.55);
  border-radius: .5rem;
  padding: 1rem;
}
.legal-section {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--slate-200);
  border-radius: .5rem;
  box-shadow: var(--shadow-sm);
  padding: 1rem;
}
.legal-section h2 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  margin: 0 0 .75rem;
}
.legal-section p,
.legal-section li {
  color: var(--slate-600);
  line-height: 1.75rem;
}
.legal-section p { margin: .75rem 0 0; }
.legal-section ul {
  margin: .75rem 0 0;
  padding-left: 1.25rem;
}
.legal-footer {
  border-top: 1px solid var(--slate-200);
  color: var(--slate-500);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  justify-content: space-between;
  padding-top: 1rem;
}

.login-bg {
  background:
    linear-gradient(90deg, rgba(2,6,23,.84) 0%, rgba(15,23,42,.62) 48%, rgba(248,250,252,.88) 100%),
    url("../img/login-bg.png") center / cover no-repeat;
}
.auth-shell {
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.auth-card {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px);
  border-color: rgba(255,255,255,.72);
  box-shadow: 0 24px 70px rgba(2,6,23,.28);
  max-width: 28rem;
  width: 100%;
}
.login-bg .segmented {
  background: rgba(226,232,240,.72);
}

.dashboard-bg {
  background:
    linear-gradient(135deg, rgba(238,244,248,.94) 0%, rgba(232,238,245,.9) 48%, rgba(247,250,252,.95) 100%),
    url("../img/login-bg.png") center / cover no-repeat;
}

main > header {
  background: rgba(255,255,255,.55);
  border-radius: .5rem;
  padding: 1rem;
}
.dashboard-header { position: relative; }
.dashboard-actions {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  width: 100%;
}
.dashboard-menu-trigger { justify-content: space-between; }
.dashboard-action-menu {
  background: rgba(255,255,255,.96);
  border: 1px solid var(--slate-200);
  border-radius: .5rem;
  box-shadow: var(--shadow-md);
  display: none;
  flex-direction: column;
  gap: .5rem;
  padding: .6rem;
}
.dashboard-action-menu.open { display: flex; }
.dashboard-tab {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: .45rem;
  color: var(--slate-700);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-weight: 800;
  gap: .55rem;
  justify-content: flex-start;
  min-height: 2.6rem;
  padding: .65rem .75rem;
  text-align: left;
  width: 100%;
}
.dashboard-tab:hover {
  background: var(--slate-100);
  color: var(--slate-950);
}
.dashboard-tab.active {
  background: var(--blue-50);
  border-color: var(--blue-100);
  color: var(--blue-700);
}
.dashboard-tab-primary {
  background: var(--blue-700);
  color: #fff;
  order: 1;
}
.dashboard-tab-primary:hover {
  background: var(--blue-800);
  color: #fff;
}
.dashboard-tab.hidden { display: none; }
.dashboard-tab.active { order: 0; }
#profile-link { order: 2; }
#users-link { order: 3; }
#accounting-link { order: 4; }
#super-admin-link { order: 5; }
#logout-btn { order: 6; }
.accounting-period-tabs { width: 100%; }
.accounting-analysis-grid { grid-template-columns: minmax(0, 1fr); }
.analysis-panel { background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: .5rem; min-width: 0; padding: 1rem; }
.flow-chart { align-items: end; display: grid; gap: .5rem; grid-auto-flow: column; grid-auto-columns: minmax(1.75rem, 1fr); min-height: 9rem; overflow-x: auto; padding-bottom: .25rem; }
.flow-bar-item { align-items: center; display: flex; flex-direction: column; gap: .5rem; min-width: 1.75rem; }
.flow-bar-track { align-items: end; background: #fff; border: 1px solid var(--slate-200); border-radius: .5rem; display: flex; height: 7rem; overflow: hidden; width: 100%; }
.flow-bar { background: linear-gradient(180deg, var(--blue-700), var(--cyan-600)); border-radius: .4rem .4rem 0 0; display: block; min-height: .5rem; width: 100%; }
.flow-bar-label { color: var(--slate-500); font-size: .75rem; font-weight: 700; text-transform: capitalize; }
.status-chart { display: grid; gap: .85rem; }
.status-meter { background: #fff; border: 1px solid var(--slate-200); border-radius: 9999px; display: flex; height: 1rem; overflow: hidden; }
.status-meter-pending { background: var(--amber-100); display: block; }
.status-meter-processed { background: var(--green-100); display: block; }
.status-legend { color: var(--slate-600); display: flex; flex-wrap: wrap; font-size: .875rem; font-weight: 700; gap: .75rem 1rem; }
.legend-dot { border-radius: 9999px; display: inline-flex; height: .65rem; margin-right: .4rem; width: .65rem; }
.legend-pending { background: var(--amber-800); }
.legend-processed { background: var(--green-700); }
.preview-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.preview-frame {
  background:
    linear-gradient(135deg, rgba(238,244,248,.94), rgba(247,250,252,.96)),
    url("../img/login-bg.png") center / cover no-repeat;
  border: 1px solid var(--slate-200);
  border-radius: .5rem;
  box-shadow: var(--shadow-sm);
  min-height: 32rem;
  overflow: hidden;
}
.preview-topbar {
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(226,232,240,.9);
  padding: 1rem;
}
.preview-content {
  display: grid;
  gap: .75rem;
  padding: 1rem;
}
.preview-table {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--slate-200);
  border-radius: .5rem;
  overflow: hidden;
}
.preview-row {
  border-bottom: 1px solid var(--slate-200);
  display: grid;
  gap: .35rem;
  padding: .75rem;
}
.preview-row:last-child { border-bottom: 0; }
.preview-note {
  background: rgba(255,255,255,.72);
  border: 1px dashed var(--slate-400);
  border-radius: .5rem;
  color: var(--slate-600);
  font-size: .875rem;
  line-height: 1.5rem;
  padding: .75rem;
}
.super-admin-grid {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .sm-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-col-span-2 { grid-column: span 2 / span 2; }
}

@media (min-width: 768px) {
  .md-text-6xl { font-size: 3.75rem; line-height: 1; }
  .md-px-8 { padding-left: 2rem; padding-right: 2rem; }
  .md-flex-row { flex-direction: row; }
  .md-items-center { align-items: center; }
  .md-justify-between { justify-content: space-between; }
  .md-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md-col-span-2 { grid-column: span 2 / span 2; }
  .super-admin-grid { grid-template-columns: 24rem minmax(0, 1fr); }
  .segmented { width: auto; }
  .qr-panel { align-items: center; flex-direction: row; }
  .dashboard-layout {
    align-items: start;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 17rem minmax(0, 1fr);
  }
  .dashboard-layout > .dashboard-header {
    display: contents;
  }
  .dashboard-layout > .dashboard-header > div:first-child {
    background: rgba(255,255,255,.55);
    border-bottom: 1px solid var(--slate-200);
    border-radius: .5rem;
    grid-column: 2;
    padding: 1rem 1rem 1.5rem;
  }
  .dashboard-layout > section {
    grid-column: 2;
    margin-top: 0;
  }
  .dashboard-actions {
    align-items: stretch;
    flex: 0 0 17rem;
    grid-column: 1;
    grid-row: 1 / span 3;
    position: sticky;
    top: 1rem;
    width: 17rem;
  }
  .dashboard-menu-trigger { display: none; }
  .dashboard-action-menu {
    background: rgba(255,255,255,.96);
    border: 1px solid var(--slate-200);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    padding: .6rem;
  }
  .accounting-period-tabs { width: auto; }
  .accounting-analysis-grid { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); }
}

@media (max-width: 420px) {
  .px-4 { padding-left: .875rem; padding-right: .875rem; }
  .px-6 { padding-left: 1rem; padding-right: 1rem; }
  .py-12 { padding-top: 2rem; padding-bottom: 2rem; }
  .panel { padding: .875rem; }
  .login-bg {
    background:
      linear-gradient(180deg, rgba(2,6,23,.66) 0%, rgba(248,250,252,.9) 54%, rgba(248,250,252,.96) 100%),
      url("../img/login-bg.png") 38% center / cover no-repeat;
  }
  .text-3xl { font-size: 1.625rem; line-height: 2rem; }
  .text-4xl { font-size: 2rem; line-height: 2.25rem; }
  .leading-8 { line-height: 1.75rem; }
  .btn { width: 100%; }
  .btn-sm { width: auto; }
  .validations-scroll { max-height: 58vh; }
  .signature-canvas { height: 11rem; }
  .auth-shell { padding-bottom: 1rem; padding-top: 1rem; }
}