:root {
  --ink: #1e293b;
  --muted: #5f6b78;
  --paper: #f4f6f5;
  --surface: #ffffff;
  --line: #d9dee2;
  --blue: #2da82b;
  --blue-dark: #1f5e2d;
  --sky: #e8f8e6;
  --orange: #2775b6;
  --government-green: #39c937;
  --government-green-dark: #2da82b;
  --government-black: #151a1d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.topbar {
  min-height: 76px;
  padding: 0;
  display: flex;
  align-items: center;
  background: var(--government-green);
  border-bottom: 1px solid var(--government-green-dark);
}

.topbar-inner, .module-nav-inner, .site-footer > * { width: min(1440px, 100%); }
.topbar-inner { margin: 0 auto; padding: 12px 28px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }

.brand {
  color: #101214;
  text-decoration: none;
  display: flex;
  gap: 12px;
  align-items: center;
}

.brand strong, .brand small { display: block; }
.brand-logo { width: 102px; height: 45px; object-fit: contain; object-position: left center; }
.brand strong { font-size: 1rem; }
.brand small { margin-top: 2px; color: #17351b; font-size: .78rem; }
.guest-nav { display: flex; align-items: center; gap: 20px; }
.prototype { color: #17351b; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.access-link { color: white; background: #20272b; border: 1px solid #20272b; border-radius: 4px; padding: 9px 15px; font-size: .86rem; font-weight: 700; text-decoration: none; }
.user-nav { display: flex; align-items: center; gap: 20px; font-size: .86rem; }
.user-nav span strong, .user-nav span small { display: block; }
.user-nav span small { color: #24482b; }
.user-nav a, .link-button { color: #142417; font: inherit; font-weight: 700; text-decoration: none; }
.link-button { border: 1px solid rgba(0,0,0,.34); background: rgba(255,255,255,.2); cursor: pointer; padding: 8px 12px; }
.user-nav form { margin: 0; }

.module-nav { background: #20272b; color: white; }
.module-nav-inner { margin: 0 auto; padding: 9px 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: .82rem; }
.module-nav a { color: white; font-weight: 700; text-decoration: none; }
.module-nav span { color: #c9d0d4; }

main { min-height: calc(100vh - 160px); }

.hero {
  min-height: auto;
  padding: 54px max(28px, calc((100vw - 1240px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 56px;
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  color: var(--government-green-dark);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

h1 {
  max-width: 760px;
  margin: 10px 0 16px;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.12;
  letter-spacing: -.025em;
}

.lead {
  max-width: 650px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.55;
}

.summary-card {
  padding: 24px;
  background: #f8faf9;
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: 5px solid var(--government-green);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(15,23,42,.08);
}

.summary-heading, .summary-card dl div, .signatures {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.summary-heading { align-items: center; font-size: .82rem; color: var(--muted); }
.badge { padding: 5px 9px; border: 1px solid #b9c5bb; border-radius: 4px; background: var(--sky); }
.summary-card h2 { margin: 20px 0; font-size: 1.35rem; }
.summary-card dl { margin: 0; }
.summary-card dl div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.summary-card dt { color: var(--muted); }
.summary-card dd { margin: 0; font-weight: 600; }
.summary-card .balance { margin-top: 8px; color: var(--blue-dark); border: 0; }
.signatures { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .8rem; }
.pending { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #d69e2e; }

.section-intro { padding: 30px max(28px, calc((100vw - 1240px) / 2)) 16px; }
.section-intro h2 { margin: 0 0 5px; font-size: 1.35rem; }
.section-intro p { margin: 0; color: var(--muted); }

.portals {
  padding: 0 max(28px, calc((100vw - 1240px) / 2)) 54px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  background: transparent;
}

.portals article {
  min-height: 230px;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--government-green);
  border-radius: 4px;
}

.number { color: var(--government-green-dark); font: 700 .74rem "Segoe UI", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.portals h2 { margin: 24px 0 10px; font-size: 1.22rem; }
.portals p { min-height: 75px; color: var(--muted); line-height: 1.55; }
.portal-link { color: var(--government-green-dark); font: 700 .9rem "Segoe UI", sans-serif; text-decoration: none; }
.portal-link::after { content: " →"; }

.flash-stack { position: fixed; z-index: 10; top: 94px; right: 24px; width: min(380px, calc(100vw - 48px)); }
.flash { margin-bottom: 8px; padding: 14px 18px; color: white; background: var(--blue-dark); border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.flash.error { background: #8b332f; }
.flash.success { background: #24705e; }

.auth-layout { min-height: calc(100vh - 160px); padding: 54px max(28px, calc((100vw - 1080px) / 2)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 64px; align-items: center; }
.auth-layout h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
.auth-notes { margin: 28px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.9; }
.form-card, .side-card, .notice-panel { padding: 26px; border: 1px solid var(--line); background: var(--surface); border-radius: 4px; box-shadow: 0 2px 7px rgba(15,23,42,.05); }
.form-card { border-top: 5px solid var(--government-green); }
.form-card-header { margin: -26px -26px 22px; padding: 20px 26px; border-bottom: 1px solid var(--line); background: #fafbfa; }
.form-card-header h2 { margin: 0; font-size: 1.35rem; }
.form-card-header p { margin: 5px 0 0; color: var(--muted); font-size: .84rem; }
.form-card h2, .side-card h2, .notice-panel h2 { font-family: inherit; }
label { display: block; margin: 16px 0; color: var(--muted); font-size: .84rem; font-weight: 600; }
input, select, textarea { width: 100%; margin-top: 7px; padding: 10px 12px; border: 1px solid #aeb8bf; border-radius: 3px; background: white; color: var(--ink); font: 1rem "Segoe UI", sans-serif; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(57,201,55,.2); border-color: var(--government-green-dark); }
textarea { min-height: 88px; resize: vertical; }
button, .button { display: inline-block; padding: 10px 18px; border: 0; border-radius: 4px; font: 700 .9rem "Segoe UI", sans-serif; text-decoration: none; cursor: pointer; }
.primary { color: white; background: var(--government-green-dark); }
.primary:hover { background: #237f22; }
.secondary { color: var(--blue-dark); background: var(--sky); }
.danger { color: white; background: #8b332f; }
.full { width: 100%; }
.form-hint { margin-top: 24px; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.money-format-hint { margin: 12px 0 18px; padding: 10px 12px; color: #315046; background: #f3f8f4; border-left: 4px solid var(--government-green-dark); font-size: .82rem; line-height: 1.45; }
.actions { display: flex; justify-content: flex-end; align-items: center; gap: 20px; margin-top: 24px; }

.page-heading { padding: 36px max(28px, calc((100vw - 1240px) / 2)) 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.page-heading > div { min-width: 0; }
.page-heading.compact { padding-top: 42px; }
.page-heading h1 { margin: 6px 0 0; max-width: 920px; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.page-heading .lead { margin-bottom: 0; }
.back { display: inline-block; margin-bottom: 26px; color: var(--blue); text-decoration: none; font-weight: 700; }
.content-section { padding: 0 max(28px, calc((100vw - 1240px) / 2)) 54px; }
.content-section.narrow { max-width: 940px; }
.table-card { overflow: auto; border: 1px solid var(--line); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { padding: 12px 14px; color: var(--ink); background: var(--sky); text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
td { padding: 13px 14px; border-top: 1px solid var(--line); vertical-align: top; }
td small { display: block; margin-top: 4px; color: var(--muted); }
td a { color: var(--blue); font-weight: 700; }
.money { text-align: right; font-weight: 700; white-space: nowrap; }
.status { display: inline-block; padding: 5px 9px; color: var(--blue-dark); background: var(--sky); border: 1px solid #c7dfc5; border-radius: 4px; font-size: .75rem; font-weight: 700; text-transform: capitalize; white-space: nowrap; }
.status.large { padding: 9px 14px; }
.status.aprobada { color: #195646; background: #cce8dd; }
.status.rechazada { color: #762e2a; background: #efd3d0; }
.status.observada { color: #7e481f; background: #f4ddc8; }

.workflow-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin: 1.25rem 0;
  overflow: hidden;
  border: 1px solid #c8d1cc;
  border-radius: 4px;
  background: #c8d1cc;
}
.workflow-strip span { padding: .75rem; background: #f4f7f5; color: #315046; font-size: .82rem; font-weight: 700; }
.rendition-heading { padding-bottom: 18px; }
.rendition-metrics { padding-bottom: 18px; }
.rendition-metrics article small { display: block; margin-top: 5px; color: var(--muted); font-size: .78rem; }
.workflow-nav-wrap { padding-bottom: 24px; }
.workflow-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #bcc8c1;
  border-radius: 5px;
  background: #bcc8c1;
  gap: 1px;
}
.workflow-step {
  min-width: 0;
  min-height: 78px;
  padding: 13px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #315046;
  background: #f5f7f5;
  text-decoration: none;
}
.workflow-step:hover { background: #e9f1e9; }
.workflow-step.active { color: white; background: var(--government-green-dark); }
.workflow-step.complete:not(.active) { background: #e3f1e4; }
.workflow-step.locked { color: #7b8580; background: #ecefed; cursor: not-allowed; }
.workflow-step strong, .workflow-step small { display: block; }
.workflow-step strong { margin-top: 2px; font-size: .84rem; }
.workflow-step small { margin-top: 5px; color: inherit; font-size: .72rem; line-height: 1.25; opacity: .82; }
.step-number {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .74rem;
  font-weight: 800;
}
.stage-shell { padding-bottom: 72px; }
.stage-heading { margin-bottom: 22px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.stage-heading h2 { margin: 3px 0 7px; font-size: 1.65rem; }
.stage-heading p:not(.eyebrow) { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.5; }
.stage-badge { padding: 8px 12px; color: var(--blue-dark); background: var(--sky); border: 1px solid #c7dfc5; border-radius: 4px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.stage-badge.complete { color: #195646; background: #cce8dd; }
.stage-badge.warning { color: #7e481f; background: #f4ddc8; }
.stage-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; align-items: start; }
.stage-main, .stage-side { min-width: 0; }
.stage-side { display: grid; gap: 16px; }
.stage-form { margin-top: 18px; }
.stage-form > summary { font-size: 1rem; }
.stage-actions { margin-top: 26px; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line); }
.compact-hint { margin: 4px 0 0; }
.workflow-notice-wrap { padding-bottom: 14px; }
.workflow-notice { padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 18px; border: 1px solid #c8d9cf; border-left: 5px solid var(--government-green); background: #f3f8f4; }
.workflow-notice.warning { border-color: #e0c7ae; border-left-color: var(--orange); background: #fbf4ed; }
.workflow-notice span { display: block; margin-top: 4px; color: var(--muted); font-size: .84rem; }
.stage-observations { margin-bottom: 20px; }
.egreso-list { display: grid; gap: 12px; }
.egreso-card { padding: 20px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 16px; align-items: start; border: 1px solid var(--line); border-left: 4px solid var(--government-green); background: white; }
.egreso-card.has-warning { border-left-color: var(--orange); }
.egreso-index { width: 30px; height: 30px; display: grid; place-items: center; color: white; background: var(--government-green-dark); border-radius: 50%; font-size: .8rem; font-weight: 800; }
.egreso-body { min-width: 0; }
.egreso-title-row { display: flex; justify-content: space-between; gap: 20px; }
.egreso-title-row h3 { margin: 3px 0 12px; font-size: 1.12rem; }
.egreso-amount { white-space: nowrap; font-size: 1.05rem; }
.egreso-meta { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.egreso-meta div { min-width: 0; }
.egreso-meta dt { color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.egreso-meta dd { margin: 3px 0 0; overflow-wrap: anywhere; font-size: .86rem; }
.egreso-meta a { color: var(--blue); font-weight: 700; }
.egreso-actions { align-self: center; }
.inline-warning { margin: 12px 0 0; color: #7e481f; font-size: .82rem; font-weight: 700; }
.muted { color: var(--muted); }
.empty-state { padding: 48px 24px; text-align: center; border: 1px dashed #aebbb4; background: #f8faf8; }
.empty-state-number { width: 42px; height: 42px; margin: 0 auto 12px; display: grid; place-items: center; color: white; background: var(--government-green-dark); border-radius: 50%; font-weight: 800; }
.empty-state h3 { margin: 0 0 8px; }
.empty-state p { max-width: 560px; margin: 0 auto 20px; color: var(--muted); line-height: 1.5; }
.single-expense-form { max-width: 900px; margin: 0 auto; }
.single-expense-form fieldset { margin: 0 0 28px; padding: 0 0 24px; border: 0; border-bottom: 1px solid var(--line); }
.single-expense-form fieldset:last-of-type { border-bottom: 0; }
.single-expense-form legend { margin-bottom: 4px; color: var(--government-green-dark); font-size: 1rem; font-weight: 800; }
.reconciliation-summary { margin-bottom: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.reconciliation-summary article { padding: 15px; border: 1px solid var(--line); background: white; }
.reconciliation-summary span { display: block; margin-bottom: 6px; color: var(--muted); font-size: .75rem; }
.reconciliation-summary strong { font-size: 1.05rem; }
.stage-form-pair { margin-top: 18px; }
.reconciliation-confirm { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.reconciliation-confirm h3 { margin: 0 0 5px; }
.reconciliation-confirm p { margin: 0; color: var(--muted); }
.final-review-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.final-summary dl { margin: 0; }
.final-summary dl div { padding: 12px 0; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); }
.final-summary dt { color: var(--muted); }
.final-summary dd { margin: 0; text-align: right; font-weight: 700; }
.workflow-result { padding: 14px; color: #195646; background: #e2f1e9; border-left: 4px solid #24705e; }
.form-pair { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(420px, 1.7fr); gap: 1rem; margin-top: 1rem; }
.final-check { margin-top: 1rem; border-left: 4px solid var(--green, #28765a); }
@media (max-width: 900px) {
  .workflow-strip { grid-template-columns: 1fr; }
  .workflow-nav { grid-template-columns: 1fr; }
  .workflow-step { min-height: auto; }
  .stage-grid, .final-review-grid { grid-template-columns: 1fr; }
  .reconciliation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .egreso-card { grid-template-columns: 34px minmax(0, 1fr); }
  .egreso-actions { grid-column: 2; }
  .form-pair { grid-template-columns: 1fr; }
}
.status.borrador { color: #515c61; background: #e2e4e3; }

.metrics { padding: 0 max(28px, calc((100vw - 1240px) / 2)) 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.metrics article { min-width: 0; padding: 18px; background: white; color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--government-green); }
.metrics article span { display: block; margin-bottom: 8px; color: var(--muted); font-size: .78rem; }
.metrics article strong { font-size: 1.3rem; }
.metrics code { color: var(--blue-dark); }
.workspace { padding: 0 max(28px, calc((100vw - 1240px) / 2)) 54px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.main-column, .side-column { min-width: 0; display: grid; gap: 22px; }
.card-heading { padding: 22px; display: flex; justify-content: space-between; align-items: center; }
.card-heading h2 { margin: 3px 0; font-family: inherit; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-grid .wide { grid-column: 1 / -1; }
.expandable summary, .side-card summary { color: var(--blue); font-weight: 700; cursor: pointer; }
.expandable > form { margin-top: 20px; }
.side-card form { margin-top: 18px; }
.hash { display: block; padding: 9px; overflow: hidden; background: #eeece5; }
.checks { padding: 0; list-style: none; }
.checks li { margin: 12px 0; padding-left: 26px; position: relative; }
.checks li::before { content: "○"; position: absolute; left: 0; color: var(--orange); }
.checks li.done::before { content: "●"; color: #24705e; }
.consent { display: flex; gap: 8px; align-items: flex-start; font-size: .78rem; }
.consent input { width: auto; margin: 2px 0 0; }
.notice-panel { border-left: 5px solid var(--orange); }
.notice-panel article { padding: 12px 0; border-top: 1px solid var(--line); }
.response { padding: 12px; background: #edf5f5; }
.danger-zone { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.danger-zone summary { color: #8b332f; cursor: pointer; }
.version-list { padding: 0; list-style: none; }
.version-list li { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.evidence-list { padding: 0; list-style: none; }
.evidence-list li { padding: 10px 0; border-top: 1px solid var(--line); }
.evidence-list li span, .evidence-list li small { display: block; margin-top: 3px; color: var(--muted); }
.section-heading { margin: 36px 0 14px; display: flex; justify-content: space-between; align-items: end; }
.section-heading:first-child { margin-top: 0; }
.section-heading h2 { margin: 3px 0; font-family: inherit; font-size: 1.45rem; }
.audit-expedientes { margin-bottom: 48px; }
.audit-detail { display: grid; gap: 26px; }
.version-card { border: 1px solid var(--line); background: var(--surface); }
.version-card > summary { padding: 22px; display: flex; justify-content: space-between; gap: 20px; align-items: center; cursor: pointer; }
.version-card > summary span small { display: block; margin-top: 4px; color: var(--muted); }
.version-card > summary code { max-width: 55%; overflow-wrap: anywhere; font-size: .75rem; }
.version-body { padding: 0 22px 24px; }
.version-body h3 { margin-top: 28px; font-family: inherit; }
.evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.evidence-grid article { padding: 18px; border: 1px solid var(--line); background: #f7f5ef; }
.evidence-grid article span, .evidence-grid article small { display: block; margin-top: 6px; color: var(--muted); }
.audit-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.audit-message { padding: 18px 22px; border-top: 1px solid var(--line); }
.empty-state { padding: 0 22px 22px; color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }

.site-footer { min-height: 72px; padding: 18px 28px; display: flex; justify-content: space-between; align-items: center; gap: 30px; color: #d8dee1; background: var(--government-black); font-size: .78rem; }
.site-footer div { display: grid; gap: 3px; }
.site-footer strong { color: white; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 48px; }
  .summary-card { max-width: 560px; }
  .portals { grid-template-columns: 1fr; }
  .portals p { min-height: 0; }
  .auth-layout, .workspace { grid-template-columns: 1fr; }
  .audit-columns, .evidence-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .user-nav span { display: none; }
  .topbar-inner { align-items: flex-start; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 10px; }
}

@media (max-width: 520px) {
  .prototype { display: none; }
  h1 { font-size: 3rem; }
  .summary-card { padding: 22px; box-shadow: none; }
  .signatures { flex-direction: column; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .metrics { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .topbar-inner { padding: 10px 16px; }
  .brand-logo { width: 76px; height: 34px; }
  .brand strong, .brand small, .user-identity { display: none; }
  .guest-nav { gap: 8px; }
  .access-link, .link-button { padding: 7px 9px; font-size: .76rem; }
  .module-nav-inner { padding: 8px 16px; }
  .module-nav span { display: none; }
}

.link-button.danger {
  color: #b3362c;
}

.link-button.danger:hover {
  color: #8d2a22;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
}

.icon-button svg {
  width: 15px;
  height: 15px;
}

.icon-button.danger:hover,
.icon-button.danger:focus-visible {
  color: #b3362c;
  border-color: #e7c0bc;
  background: #fdf4f3;
}

.pago-fila {
  align-items: end;
}