:root {

  color-scheme: dark;

  --bg: #111410;

  --surface: #1b201a;

  --surface2: #22291f;

  --border: #343d2e;

  --text: #f1f2e9;

  --muted: #a6b09f;

  --gold: #d4b28a;

  --green: #b5d8a5;

  --red: #e9a092;

  --radius: 20px;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

}

* { box-sizing: border-box; }

body {

  margin: 0;

  background: var(--bg);

  color: var(--text);

  font-size: 14px;

  line-height: 1.5;

}

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

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

a { color: inherit; text-decoration: none; }

button {

  cursor: pointer;

  color: var(--text);

  border: 1px solid var(--border);

  background: var(--surface2);

  border-radius: 10px;

  padding: 10px 15px;

  transition: background .18s, border-color .18s;

}

button:hover { background: #30382a; border-color: #7a8066; }

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

button:focus-visible,

a:focus-visible,

input:focus-visible,

select:focus-visible,

textarea:focus-visible,

summary:focus-visible {

  outline: 2px solid var(--gold);

  outline-offset: 3px;

}

.primary {

  background: var(--gold);

  border-color: var(--gold);

  color: #1a1d16;

  font-weight: 650;

}

.primary:hover { background: #e2c39f; border-color: #e2c39f; }

.secondary { background: transparent; }

.danger { color: var(--red); }

.icon-button {

  width: 40px;

  height: 40px;

  padding: 8px;

  display: inline-grid;

  place-items: center;

}

.icon {

  width: 20px;

  height: 20px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.6;

  stroke-linecap: round;

  stroke-linejoin: round;

  vertical-align: middle;

}

/* Navegación */

.sidebar {

  position: fixed;

  inset: 0 auto 0 0;

  width: 238px;

  background: #151a13;

  border-right: 1px solid var(--border);

  padding: 33px 21px;

  display: flex;

  flex-direction: column;

  z-index: 5;

}

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

.brand img { width: 43px; height: 43px; }

.brand span {

  font-size: 19px;

  font-weight: 650;

  letter-spacing: -.6px;

  white-space: nowrap;

}

.brand b { font-size: 18px; font-weight: 400; color: var(--gold); }

.brand small {

  display: block;

  font-size: 6px;

  letter-spacing: .8px;

  color: var(--muted);

  margin-top: 3px;

  white-space: normal;

}

.nav-label {

  font-size: 9px;

  letter-spacing: 1.6px;

  color: #7d8a74;

  margin: 44px 12px 13px;

}

nav { display: grid; gap: 5px; }

nav a {

  display: flex;

  align-items: center;

  gap: 13px;

  padding: 12px 15px;

  color: var(--muted);

  border-radius: 11px;

}

nav a:hover { background: #222a1e; }

nav a.active { background: #332f23; color: #ebcaa4; }

nav a.active::after {

  content: "";

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: var(--gold);

  margin-left: auto;

}

.sidebar-bottom { margin-top: auto; font-size: 10px; color: var(--muted); }

.sidebar-bottom small {

  display: block;

  margin: 8px 0 0 15px;

  color: #728068;

}

.status-dot {

  display: inline-block;

  width: 5px;

  height: 5px;

  background: var(--green);

  border-radius: 50%;

  margin-right: 7px;

}

/* Estructura */

main {

  margin-left: 238px;

  padding: 33px 4vw 24px;

  max-width: 1720px;

}

header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 26px;

}

.eyebrow {

  font-size: 9px;

  letter-spacing: 2px;

  color: var(--gold);

  margin: 0 0 8px;

  font-weight: 650;

}

h1 {

  font-size: 34px;

  line-height: 1.2;

  font-weight: 550;

  letter-spacing: -1.25px;

  margin: 0;

}

h2 { font-size: 18px; font-weight: 550; margin: 0 0 10px; letter-spacing: -.3px; }

h3 { font-weight: 550; font-size: 15px; margin: 0; }

.subtitle { color: var(--muted); font-size: 12px; margin: 8px 0 0; }

.header-actions, .actions, .row {

  display: flex;

  align-items: center;

  gap: 10px;

}

.row { justify-content: space-between; }

.actions { flex-wrap: wrap; }

.header-actions { flex-shrink: 0; }

.card {

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  padding: 23px;

  min-width: 0;

}

.hero {

  background:

    radial-gradient(ellipse at 95% 0%, #49402b 0, transparent 60%),

    linear-gradient(110deg, #2d3425, #20291d);

  border: 1px solid #635b40;

  border-radius: var(--radius);

  padding: 29px 31px;

  position: relative;

  overflow: hidden;

}

.hero .lead { max-width: 440px; font-size: 12px; color: #bbc4af; }

.hero .amount { font-size: 48px; margin: 10px 0; line-height: 1.1; }

.hero .row { align-items: flex-start; }

.hero-symbol { color: #b69a70; opacity: .7; width: 52px; height: 52px; }

.hero-symbol .icon { width: 52px; height: 52px; stroke-width: 1; }

.grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 17px;

}

.dashboard-top {

  display: grid;

  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);

  gap: 17px;

}

.stats {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 17px;

  margin: 18px 0;

}

.metric-label {

  font-size: 12px;

  color: var(--muted);

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 8px;

}

.amount {

  font-size: 29px;

  letter-spacing: -1px;

  font-weight: 550;

  overflow-wrap: anywhere;

  font-variant-numeric: tabular-nums;

}

.metric .amount { margin: 12px 0 7px; }

.metric small { font-size: 10px; }

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

.positive { color: var(--green); }

.negative { color: var(--red); }

.section { margin-top: 20px; }

.card-head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 10px;

  margin-bottom: 18px;

}

.card-head h2 { margin: 0; }

.text-button {

  background: none;

  border: none;

  color: var(--gold);

  padding: 4px;

  font-size: 12px;

}

/* Listas */

.list-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 13px;

  padding: 15px 0;

  border-bottom: 1px solid var(--border);

}

.list-row:last-child { border: 0; }

.list-row .left { display: flex; align-items: center; gap: 12px; min-width: 0; }

.list-row .left > div { min-width: 0; overflow-wrap: anywhere; }

.list-row strong {

  font-weight: 550;

  font-variant-numeric: tabular-nums;

  white-space: nowrap;

}

.list-row small { display: block; font-size: 10px; margin-top: 4px; }

.list-icon {

  background: #2d3527;

  color: var(--gold);

  width: 36px;

  height: 36px;

  border-radius: 11px;

  display: grid;

  place-items: center;

  flex-shrink: 0;

}

.income-icon { color: var(--green); }

.expense-icon { color: var(--red); background: #352b24; }

.note {

  background: #252c20;

  border: 1px solid #3e4835;

  border-radius: 12px;

  padding: 13px 16px;

  font-size: 12px;

  color: #bec7b5;

  line-height: 1.65;

}

.note strong { color: var(--text); }

.empty { padding: 34px 18px; text-align: center; color: var(--muted); }

.empty .icon { width: 36px; height: 36px; color: var(--gold); margin-bottom: 15px; }

.empty h2 { color: var(--text); }

.empty p { max-width: 400px; margin: 8px auto 20px; font-size: 13px; }

/* Filtros */

.toolbar {

  display: flex;

  flex-wrap: wrap;

  align-items: end;

  gap: 10px;

  margin: 18px 0;

}

.toolbar label { flex: 1; min-width: 130px; margin: 0; font-size: 10px; }

.toolbar input, .toolbar select { margin-top: 6px; }

.toolbar .search { flex: 2; min-width: 190px; }

.toolbar button { height: 42px; }

.pill-group { display: flex; gap: 6px; flex-wrap: wrap; }

.pill-group button {

  font-size: 12px;

  padding: 8px 14px;

  border-radius: 25px;

  background: transparent;

}

.pill-group button.selected {

  background: var(--gold);

  color: #1b2017;

  border-color: var(--gold);

}

/* Gráficas */

.chart { width: 100%; height: auto; display: block; overflow: visible; }

.chart text { font-family: inherit; fill: var(--muted); font-size: 11px; }

.chart .gridline { stroke: var(--border); stroke-dasharray: 3 5; }

.legend {

  display: flex;

  gap: 16px;

  font-size: 10px;

  color: var(--muted);

  margin-top: 12px;

}

.legend span::before {

  content: "";

  display: inline-block;

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--gold);

  margin-right: 6px;

}

.legend .expense::before { background: #6d8464; }

.bar-bg {

  height: 6px;

  border-radius: 12px;

  background: #30382a;

  overflow: hidden;

  margin: 9px 0 4px;

}

.bar-fill { height: 100%; border-radius: inherit; background: var(--gold); }

.category { padding: 12px 0; }

.category .row { font-size: 12px; }

progress { width: 100%; height: 9px; accent-color: var(--gold); margin: 14px 0; }

.account-card .amount { margin: 15px 0; }

.tag {

  font-size: 10px;

  background: #2e3528;

  padding: 4px 8px;

  border-radius: 6px;

  color: var(--gold);

}

.financial-breakdown { font-size: 12px; }

.financial-breakdown .row { padding: 9px 0; border-bottom: 1px solid #49513b; }

.financial-breakdown .row:last-child { border: 0; }

.transaction-button {

  background: none;

  border: 0;

  padding: 4px;

  color: var(--muted);

}

.transaction-actions { display: flex; align-items: center; gap: 7px; }

.transaction-actions button { font-size: 11px; }

.transaction-amount { text-align: right; }

.transaction-amount > small { display: block; }

.compact-text { font-size: 11px; color: var(--muted); }

details { font-size: 12px; margin-top: 15px; }

summary { cursor: pointer; color: var(--gold); }

details table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 12px; }

td, th { text-align: left; padding: 9px 5px; border-bottom: 1px solid var(--border); }

/* Avisos */

.demo-banner, .migration-banner {

  padding: 10px 14px;

  border: 1px solid #685b40;

  background: #342e22;

  border-radius: 12px;

  font-size: 12px;

  margin-bottom: 20px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

}

.demo-banner button, .migration-banner button {

  font-size: 11px;

  padding: 6px 10px;

}

footer {

  display: flex;

  justify-content: space-between;

  gap: 15px;

  margin-top: 35px;

  padding-top: 18px;

  border-top: 1px solid var(--border);

  color: #78836f;

  font-size: 10px;

}

/* Formularios */

dialog {

  background: #1b2119;

  color: var(--text);

  border: 1px solid #515b43;

  border-radius: 22px;

  width: min(550px, 94vw);

  max-height: 90vh;

  padding: 26px;

  box-shadow: 0 30px 100px #0007;

}

dialog::backdrop { background: #080b08bb; backdrop-filter: blur(5px); }

.modal-head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 15px;

  margin-bottom: 15px;

}

.modal-head h2 { font-size: 24px; margin: 0; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

label {

  display: block;

  font-size: 12px;

  color: var(--muted);

  margin: 16px 0 7px;

}

input, select, textarea {

  display: block;

  width: 100%;

  min-width: 0;

  padding: 11px 12px;

  background: #11170f;

  color: var(--text);

  border: 1px solid #3c4933;

  border-radius: 10px;

  margin-top: 6px;

}

input[type="checkbox"] { display: inline; width: auto; margin: 0 8px 0 0; }

textarea { resize: vertical; min-height: 70px; }

.full { width: 100%; margin-top: 18px; }

.form-help { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 8px 0; }

#form-error { color: var(--red); font-size: 12px; }

#toast {

  position: fixed;

  bottom: 25px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 30;

  max-width: min(90vw, 650px);

  padding: 0;

  border-radius: 12px;

  background: #d4b28a;

  color: #181b15;

  box-shadow: 0 8px 45px #0008;

  font-size: 13px;

}

#toast:not(:empty) { padding: 13px 18px; }

#toast button {

  color: #181b15;

  background: none;

  border: 1px solid #74634c;

  margin-left: 15px;

  font-size: 12px;

  padding: 5px 10px;

}

.welcome-title { font-size: 24px; max-width: 450px; line-height: 1.25; }

.welcome { padding: 32px; }

.welcome p { max-width: 600px; }

[hidden] { display: none !important; }

/* Pantallas pequeñas */

@media (min-width: 1450px) {

  main { padding-left: 55px; padding-right: 55px; }

}

@media (max-width: 1080px) {

  .sidebar { width: 205px; padding: 25px 15px; }

  .brand img { width: 36px; }

  main { margin-left: 205px; padding: 28px; }

  .dashboard-top { grid-template-columns: 1fr 1fr; }

  .hero { padding: 25px; }

  .hero .amount { font-size: 38px; }

  .metric .amount { font-size: 25px; }

}

@media (max-width: 800px) {

  .sidebar {

    position: static;

    width: 100%;

    padding: 17px 20px 10px;

    border-right: 0;

    border-bottom: 1px solid var(--border);

  }

  .brand img { width: 39px; }

  .nav-label, .sidebar-bottom { display: none; }

  nav {

    display: flex;

    overflow-x: auto;

    margin-top: 18px;

    gap: 4px;

    padding-bottom: 3px;

  }

  nav a {

    flex-direction: column;

    font-size: 10px;

    gap: 4px;

    padding: 8px 11px;

    white-space: nowrap;

  }

  nav a.active::after { display: none; }

  main { margin: 0; padding: 24px 20px; }

  .header-actions { gap: 7px; }

  h1 { font-size: 29px; }

  .dashboard-top { grid-template-columns: 1fr; }

  .hero .amount { font-size: 44px; }

  .stats { gap: 10px; }

  .metric { padding: 17px; }

  .metric .amount { font-size: 24px; }

  .grid { gap: 13px; }

  .card { padding: 20px; }

  .subtitle { max-width: 260px; }

  header { gap: 10px; }

  .header-actions .primary { font-size: 12px; padding: 10px; }

  .chart text { font-size: 12px; }

}

@media (max-width: 540px) {

  main { padding: 22px 16px; }

  header { align-items: flex-start; }

  .header-actions .primary span { display: none; }

  .header-actions .primary { width: 40px; font-size: 20px; padding: 4px; }

  .subtitle { font-size: 11px; }

  .eyebrow { font-size: 8px; letter-spacing: 1.5px; }

  .grid { grid-template-columns: 1fr; }

  .stats { grid-template-columns: 1fr 1fr; }

  .stats .metric:last-child { grid-column: 1 / -1; }

  .hero { padding: 25px; }

  .hero .amount { font-size: 39px; }

  .hero-symbol { display: none; }

  .form-grid { grid-template-columns: 1fr; }

  .toolbar label { min-width: 115px; }

  .card-head, .row.wrap { flex-wrap: wrap; }

  .list-row, .list-row .left { gap: 9px; }

  .list-icon { width: 31px; height: 31px; }

  .transaction-actions {

    flex-wrap: wrap;

    justify-content: flex-end;

    max-width: 130px;

  }

  .transaction-amount { width: 100%; }

  .transaction-actions button { padding: 4px 7px; }

  .list-row small { font-size: 9px; }

  .list-row strong { font-size: 13px; }

  .demo-banner, .migration-banner { align-items: flex-start; }

  footer span { max-width: 170px; text-align: right; }

  dialog { padding: 22px; }

  .pill-group { gap: 5px; }

  .pill-group button { padding: 7px 10px; }

  .toolbar .search { min-width: 100%; flex: 1; }

  .note { font-size: 11px; }

  .metric .amount { font-size: clamp(18px, 5.4vw, 22px); white-space: nowrap; }

}

@media (max-width: 360px) {

  .stats { grid-template-columns: 1fr; }

}

@media (prefers-reduced-motion: reduce) {

  * { scroll-behavior: auto !important; transition: none !important; }

}