:root {
  color-scheme: light;
  /* Spa OS semantic foundation. The approved visual standard remains the authority. */
  --color-primary: #2c4569;
  --color-text-primary: #172c4a;
  --color-text-secondary: #4f5d70;
  --color-surface-page: #f6f0e7;
  --color-surface-card: #fffaf3;
  --color-surface-subtle: #e8dccd;
  --color-border-subtle: #e8dccd;
  --color-border-control: #b8a48c;
  --color-material-wood: #8f6647;
  --color-accent-premium: #9a6242;
  --color-status-success: #27563a;
  --color-status-success-surface: #edf5ef;
  --color-status-warning: #70451f;
  --color-status-warning-surface: #fff1dc;
  --color-status-danger: #8b342b;
  --color-status-danger-surface: #faece8;
  --color-status-info: #2c4569;
  --color-status-info-surface: #edf1f6;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --radius-control: .45rem;
  --radius-card: .7rem;
  --radius-pill: 999px;
  --shadow-subtle: 0 .25rem 1rem rgb(23 44 74 / 6%);
  --touch-target-min: 2.75rem;
  --page-width: 70rem;
  --page-width-narrow: 42rem;
  --page-gutter: clamp(1rem, 3vw, 2rem);
  --focus-ring: 3px solid var(--color-accent-premium);
}

/* Shared Spa OS UI primitives -------------------------------------------------
   These semantic primitives are intentionally framework-free and additive so
   feature surfaces can migrate in small, reviewable batches. */
.spa-page {
  width: min(100%, var(--page-width));
  margin-inline: auto;
  padding-left: max(var(--page-gutter), env(safe-area-inset-left));
  padding-right: max(var(--page-gutter), env(safe-area-inset-right));
  padding-block: var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
}
.spa-page--narrow { max-width: var(--page-width-narrow); }
.spa-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.spa-page-header h1 { margin: var(--space-1) 0; }
.spa-page-header p { margin: var(--space-1) 0 0; }
.spa-eyebrow {
  margin: 0;
  color: var(--color-accent-premium);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.spa-section {
  margin-block: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
}
.spa-section > :first-child { margin-top: 0; }
.spa-section > :last-child { margin-bottom: 0; }
.spa-grid { display: grid; gap: var(--space-3); }
.spa-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.spa-button {
  display: inline-flex;
  min-height: var(--touch-target-min);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: .65rem var(--space-4);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-control);
  background: var(--color-primary);
  color: var(--color-surface-card);
  font: inherit;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.spa-button--secondary {
  border-color: var(--color-border-control);
  background: var(--color-surface-card);
  color: var(--color-primary);
}
.spa-button--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--color-primary);
}
.spa-button--danger {
  border-color: var(--color-status-danger);
  background: transparent;
  color: var(--color-status-danger);
}
.spa-button:is(:disabled, [aria-disabled="true"]),
.spa-button[aria-busy="true"] {
  cursor: not-allowed;
  opacity: .58;
  pointer-events: none;
}
.spa-button[aria-busy="true"]::before {
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: spa-spin .8s linear infinite;
}
.spa-button:focus-visible,
.spa-control:focus-visible,
.spa-direct-edit__value:focus-visible,
.spa-dialog button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}
@keyframes spa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spa-button[aria-busy="true"]::before { animation-duration: 1.8s; }
}

.spa-field { display: grid; gap: var(--space-1); }
.spa-field > label,
.spa-field > legend,
.spa-label { color: var(--color-text-primary); font-weight: 750; }
.spa-help { color: var(--color-text-secondary); font-size: .88rem; }
.spa-control {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: .7rem;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font: inherit;
}
textarea.spa-control { min-height: 7rem; resize: vertical; }
.spa-control[aria-invalid="true"] { border-color: var(--color-status-danger); }
.spa-control:is(:disabled, [readonly]) {
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  cursor: not-allowed;
  opacity: 1;
}
.spa-choice {
  display: flex;
  min-height: var(--touch-target-min);
  align-items: center;
  gap: var(--space-2);
}
.spa-choice input { width: 1.25rem; min-height: 1.25rem; accent-color: var(--color-primary); }
.spa-field-error {
  margin: 0;
  color: var(--color-status-danger);
  font-size: .88rem;
  font-weight: 700;
}

.spa-direct-edit { display: grid; gap: var(--space-2); }
.spa-direct-edit__value {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-primary);
  text-align: left;
  cursor: text;
}
.spa-direct-edit__value:hover,
.spa-direct-edit__value:focus-visible {
  border-color: var(--color-border-control);
  background: var(--color-surface-page);
}
.spa-direct-edit__state {
  min-height: 1.25rem;
  color: var(--color-text-secondary);
  font-size: .82rem;
  font-weight: 700;
}
.spa-direct-edit__state[data-state="saving"]::before { content: "Guardando…"; }
.spa-direct-edit__state[data-state="saved"] { color: var(--color-status-success); }
.spa-direct-edit__state[data-state="saved"]::before { content: "Guardado"; }
.spa-direct-edit__state[data-state="error"] { color: var(--color-status-danger); }

.spa-record-list { display: grid; gap: var(--space-3); }
.spa-record {
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-subtle);
}
.spa-record__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.spa-record__title { margin: 0; color: var(--color-text-primary); }
.spa-record__meta { color: var(--color-text-secondary); font-size: .84rem; }
.spa-record__amount { color: var(--color-text-primary); font-variant-numeric: tabular-nums; font-weight: 800; }
.spa-record__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.spa-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  width: fit-content;
  padding: .25rem .55rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.2;
}
.spa-status--pending { color: var(--color-status-warning); background: var(--color-status-warning-surface); }
.spa-status--success { color: var(--color-status-success); background: var(--color-status-success-surface); }
.spa-status--danger { color: var(--color-status-danger); background: var(--color-status-danger-surface); }
.spa-status--warning { color: var(--color-status-warning); background: var(--color-status-warning-surface); }
.spa-status--info { color: var(--color-status-info); background: var(--color-status-info-surface); }

.spa-feedback {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  margin-block: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid currentColor;
  border-radius: var(--radius-control);
  font-weight: 650;
}
.spa-feedback::before { font-weight: 900; }
.spa-feedback--success { color: var(--color-status-success); background: var(--color-status-success-surface); }
.spa-feedback--success::before { content: "✓"; }
.spa-feedback--error { color: var(--color-status-danger); background: var(--color-status-danger-surface); }
.spa-feedback--error::before { content: "!"; }
.spa-feedback--warning { color: var(--color-status-warning); background: var(--color-status-warning-surface); }
.spa-feedback--warning::before { content: "!"; }
.spa-feedback--info { color: var(--color-status-info); background: var(--color-status-info-surface); }
.spa-feedback--info::before { content: "i"; }
.spa-empty-state,
.spa-loading-state {
  padding: var(--space-5);
  border: 1px dashed var(--color-border-control);
  border-radius: var(--radius-card);
  color: var(--color-text-secondary);
  text-align: center;
}
.spa-loading-state[aria-busy="true"]::before { content: "Cargando… "; font-weight: 750; }

.spa-dialog {
  width: min(calc(100% - 2rem), 34rem);
  max-height: calc(100svh - 2rem);
  padding: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  box-shadow: 0 1rem 3rem rgb(23 44 74 / 18%);
}
.spa-dialog::backdrop { background: rgb(23 44 74 / 42%); }
.spa-dialog__panel { display: grid; gap: var(--space-4); padding: var(--space-5); }

@media (max-width: 36rem) {
  .spa-page-header { display: grid; }
  .spa-action-row > .spa-button { flex: 1 1 100%; }
  .spa-record__header { display: grid; }
}