/* Tradalvo. Visual tokens adapted from the local Legado Crédito reference.
   This layer deliberately replaces the former warm palette across all modules. */
:root,
:root[data-theme="Claro"] {
  color-scheme: light;
  --background: #f5f7f4;
  --foreground: #14231d;
  --surface: #ffffff;
  --surface-soft: #edf3ef;
  --brand: #0b6b4f;
  --brand-strong: #074b39;
  --brand-soft: #dff3e9;
  --muted: #64736c;
  --line: #dce5e0;
  --warning-soft: #fff4d8;
  --danger-soft: #fff0ef;
  --positive: #047857;
  --negative: #b42318;
  --brand-on: #ffffff;
  --hero: #020617;
  --hero-text: #f8fafc;
  --hero-muted: #cbd5e1;
  --gold: #e3ac36;
  --bg: var(--background);
  --text: var(--foreground);
  --panel: var(--surface);
  --panel-2: var(--surface-soft);
  --panel-3: var(--brand-soft);
  /* Existing modules consume these compatibility aliases. */
  --orange: var(--brand);
  --orange-2: var(--brand-strong);
  --green: var(--positive);
  --red: var(--negative);
  --radius: 24px;
  --finance-font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --font-sans: "Segoe UI Variable", "Aptos", "Segoe UI", system-ui, sans-serif;
  --shadow-card: 0 18px 45px -32px rgb(15 23 42 / .28);
  --shadow-modal: 0 28px 80px -24px rgb(2 6 23 / .35);
  font-family: var(--font-sans);
}
:root[data-theme="Oscuro"] {
  color-scheme: dark;
  --background: #0b1511;
  --foreground: #edf7f2;
  --surface: #111e18;
  --surface-soft: #172820;
  --brand: #4fcea0;
  --brand-strong: #7ce1b8;
  --brand-soft: #153d2e;
  --muted: #9aaca3;
  --line: #294037;
  --warning-soft: #392e16;
  --danger-soft: #3a1f1e;
  --positive: #77dfb3;
  --negative: #ffaaa3;
  --brand-on: #0b1511;
  --shadow-card: none;
  --shadow-modal: 0 28px 80px -24px rgb(0 0 0 / .65);
}

html { background: var(--background); scroll-behavior: smooth; }
body { background: var(--background); color: var(--text); font-family: var(--font-sans); text-rendering: optimizeLegibility; }
button, input, select, textarea { font-family: inherit; }
::selection { background: var(--brand-soft); color: var(--text); }
body .app-shell {
  background: radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--brand-soft) 60%, transparent), transparent 30rem), var(--background);
}
body .sidebar { width: 264px; flex-basis: 264px; background: var(--surface); border-color: var(--line); }
body .brand-row { height: 88px; flex-shrink: 0; padding: 0 16px; gap: 8px; border-color: var(--line); }
.brand-lockup { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-symbol { display: block; width: 40px; height: 40px; flex: 0 0 40px; }
.brand-copy { display: grid; gap: 5px; }
.brand-copy strong { font-size: 17px; line-height: 1; font-weight: 750; letter-spacing: -.04em; white-space: nowrap; }
.brand-copy small { font-size: 10px; line-height: 1.2; color: var(--brand); white-space: nowrap; }
body .sidebar-toggle { display: inline-flex; width: 44px; min-width: 44px; height: 44px; color: var(--muted); margin-left: auto; }
body .side-nav { padding: 16px 12px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
body .nav-label { padding: 16px 12px 8px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .13em; }
body .nav-label.admin-label { color: var(--muted); }
body .nav-group { gap: 4px; margin-bottom: 8px; }
body .nav-item { min-height: 44px; border-radius: 14px; padding: 10px 12px; color: var(--muted); font-size: 14px; font-weight: 500; gap: 12px; }
body .nav-item:hover { background: var(--surface-soft); color: var(--text); }
body .nav-item.active { background: var(--brand-soft); color: var(--brand-strong); border-color: color-mix(in srgb, var(--brand) 20%, transparent); font-weight: 650; }
body .nav-item :is(.nav-icon, small) { color: inherit; }
body .nav-item small { background: var(--surface-soft); font-size: 9px; }
body .nav-icon { display: inline-flex; align-items: center; justify-content: center; }
body .nav-icon svg { width: 19px; height: 19px; }
body .sidebar-bottom { padding: 12px; border-color: var(--line); }
body .local-note { border-color: var(--line); border-radius: 16px; background: var(--surface-soft); }
body .local-note b { font-size: 11px; font-weight: 600; }
body .local-note small, body .sidebar-foot { color: var(--muted); }
body :is(.status-dot, .local-pill i) { box-shadow: none; background: var(--brand); }
body .topbar { min-height: 72px; height: 72px; flex-basis: 72px; background: color-mix(in srgb, var(--surface) 94%, transparent); border-color: var(--line); padding-inline: 32px; }
body .topbar h1 { font-size: 18px; letter-spacing: -.025em; font-weight: 650; }
body .local-pill { background: var(--surface-soft); color: var(--muted); border-color: var(--line); font-weight: 500; font-size: 10px; }
body .icon-button { width: 44px; height: 44px; color: var(--muted); border-color: var(--line); background: var(--surface); border-radius: 14px; }
body .icon-button:hover { color: var(--brand); border-color: var(--brand); background: var(--surface-soft); }
body .icon-button > svg { width: 19px; height: 19px; flex-shrink: 0; }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .theme-sun { display: none; }
:root[data-theme="Oscuro"] .theme-toggle .theme-moon { display: none; }
:root[data-theme="Oscuro"] .theme-toggle .theme-sun { display: block; }
body .content-area { max-width: 1440px; padding: 32px; }
body .app-footer { color: var(--muted); border-color: var(--line); padding: 24px 32px; font-size: 11px; line-height: 1.6; }

/* Shared editorial header, with the same hierarchy as the reference's panel. */
:root .content-area .page-intro {
  position: relative; isolation: isolate; overflow: hidden; align-items: center;
  min-height: 186px; padding: 32px 36px; margin-bottom: 28px;
  border: 1px solid color-mix(in srgb, var(--hero-muted) 12%, transparent);
  border-radius: 30px; background: var(--hero); color: var(--hero-text);
}
:root .content-area .page-intro::after { content: ""; position: absolute; z-index: -1; width: 220px; height: 220px; right: -72px; top: -120px; border: 32px solid color-mix(in srgb, var(--brand-soft) 32%, transparent); border-radius: 50%; pointer-events: none; }
:root .content-area .page-intro > div { min-width: 0; }
:root .content-area .page-intro h2 { margin: 14px 0 12px; font-size: clamp(28px, 2.7vw, 40px); line-height: 1.12; font-weight: 650; letter-spacing: -.045em; color: var(--hero-text); }
:root .content-area .page-intro p { max-width: 72ch; margin: 0; color: var(--hero-muted); font-size: 14px; line-height: 1.8; }
:root .content-area .page-intro .eyebrow { display: inline-flex; margin: 0; padding: 6px 10px; border: 1px solid rgb(255 255 255 / .18); background: rgb(255 255 255 / .06); color: #a7f3d0; border-radius: 30px; font-size: 10px; font-weight: 600; letter-spacing: .06em; }
:root .content-area .page-intro > .button { flex-shrink: 0; background: #dff3e9; color: #074b39; border-color: transparent; }
:root .home-screen > .page-intro { min-height: 236px; padding-bottom: 64px; margin-bottom: 0; }
:root .home-screen > .grid.stats { position: relative; z-index: 1; margin: -28px 20px 32px; gap: 14px; }

:root[data-theme] body :is(.card, .catalog-card, .program-card, .notice-card, .book-card) { background: var(--surface); border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
:root[data-theme] body .content-area .card { padding: 24px; }
:root[data-theme] body .card.soft { background: var(--surface-soft); }
:root[data-theme] body .card-header { margin-bottom: 20px; gap: 16px; }
:root[data-theme] body :is(.card-header h2, .card-header h3) { font-size: 18px; line-height: 1.3; font-weight: 650; letter-spacing: -.025em; }
:root[data-theme] body .card-header p { color: var(--muted); font-size: 13px; line-height: 1.6; }
:root[data-theme] body .stat-card { min-height: 144px; }
:root[data-theme] body .stat-card .label { color: var(--muted); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; }
:root[data-theme] body .stat-card .value { margin-top: 16px; color: var(--text); font-size: 30px; font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
:root[data-theme] body .stat-card .hint { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 10px; }
:root[data-theme] body .stat-card .value.positive { color: var(--green); }
:root[data-theme] body .stat-card .value.negative { color: var(--red); }
:root[data-theme] body .stat-icon { display: none; }
:root[data-theme] body .section-gap { margin-top: 24px; }
:root[data-theme] body :is(.grid.two, .grid.three) { gap: 20px; }

:root[data-theme] body .button { border-radius: 14px; background: var(--surface); color: var(--text); border-color: var(--line); min-height: 44px; font-size: 13px; font-weight: 600; padding: 10px 16px; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
:root[data-theme] body .button:hover { background: var(--surface-soft); border-color: var(--brand); color: var(--text); }
:root[data-theme] body .button.primary { background: var(--brand); color: var(--brand-on); border-color: var(--brand); }
:root[data-theme] body .button.primary:hover { background: var(--brand-strong); color: var(--brand-on); border-color: var(--brand-strong); }
:root[data-theme] body .button.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 28%, var(--line)); }
:root[data-theme] body .button.danger:hover { background: var(--danger-soft); }
:root[data-theme] body :is(.tab-row, .period-row, .dc-tabs) { background: var(--surface); border-color: var(--line); border-radius: 16px; }
:root[data-theme] body :is(.tab-button, .period-row button, .dc-tab) { color: var(--muted); border-radius: 12px; font-weight: 500; min-height: 44px; }
:root[data-theme] body :is(.tab-button.active, .period-row button.active, .dc-tab.is-active) { background: var(--brand-soft); color: var(--brand-strong); box-shadow: none; }
:root[data-theme] body :is(.tab-button, .period-row button, .dc-tab):hover { background: var(--surface-soft); color: var(--brand); }
:root[data-theme] body :is(.action-tile, .dc-template-button) { background: var(--surface-soft); border-color: var(--line); border-radius: 16px; color: var(--text); }
:root[data-theme] body :is(.action-tile, .dc-template-button):hover { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
:root[data-theme] body .action-tile b { font-size: 13px; font-weight: 600; }
:root[data-theme] body .action-tile span { color: var(--muted); font-size: 12px; line-height: 1.6; }
:root[data-theme] body :is(.notice-banner, .program-preview, .notice-head, .check-grid, .account-billing) { border-color: var(--line); background: var(--surface-soft); color: var(--text); }
:root[data-theme] body .notice-banner b { color: var(--brand-strong); }
:root[data-theme] body :is(.badge, .badge.orange) { background: var(--brand-soft); color: var(--brand-strong); border-color: color-mix(in srgb, var(--brand) 18%, var(--line)); }
:root[data-theme] body :is(.empty-state, .instrument-guide) { background: var(--surface-soft); border-color: var(--line); color: var(--muted); }
:root[data-theme] body :is(.empty-state b, .detail-row b, .notice-card h3) { color: var(--text); }
:root[data-theme] body :is(.detail-row, .notice-card p, .split-card p, .setting-row, .chart-disclaimer) { color: var(--muted); border-color: var(--line); }
:root[data-theme] body .split-card .avatar { background: var(--brand-soft); color: var(--brand-strong); }
:root[data-theme] body .link-button { color: var(--brand); }
:root[data-theme] body :is(input, select, textarea, .field input, .field select, .field textarea, .setting-row select, .catalog-filter, .search-input) { background-color: var(--surface); color: var(--text); border-color: var(--line); border-radius: 12px; color-scheme: inherit; accent-color: var(--brand); }
:root[data-theme] body :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
:root[data-theme] body :is(input, select, textarea):disabled { background: var(--surface-soft); color: var(--muted); }
:root[data-theme] body :is(.field label, .field-label) { color: var(--muted); }
:root[data-theme] body :is(th, td, .table-wrap) { border-color: var(--line); }
:root[data-theme] body table { background: var(--surface); color: var(--text); }
:root[data-theme] body th { background: var(--surface-soft); color: var(--muted); }
:root[data-theme] body td { color: var(--text); }
:root[data-theme] body tbody tr:hover { background: var(--surface-soft); }
:root[data-theme] body .positive { color: var(--green); }
:root[data-theme] body .negative { color: var(--red); }
:root[data-theme] body :is(.mini-chart, .mini-bar-labels) { border-color: var(--line); color: var(--muted); }
:root[data-theme] body .mini-bar { background: var(--green); }
:root[data-theme] body .mini-bar.loss { background: var(--red); }
:root[data-theme] body .calendar-weekday { color: var(--muted); }
:root[data-theme] body .calendar-day { background: var(--surface); color: var(--text); border-color: var(--line); }
:root[data-theme] body .calendar-day:hover { background: var(--surface-soft); border-color: var(--brand); }
:root[data-theme] body .calendar-day.selected { background: var(--brand-soft); border-color: var(--brand); }
:root[data-theme] body .calendar-day.win { border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
:root[data-theme] body .calendar-day.loss { border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
:root[data-theme] body .calendar-day.outside { background: var(--surface-soft); }
:root[data-theme] body .chart-canvas { background: var(--surface); }
:root[data-theme] body .toast { background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
:root #modalRoot .modal { background: var(--surface); border-radius: 24px; border-color: var(--line); box-shadow: var(--shadow-modal); }
:root #modalRoot .modal-header { background: var(--surface); padding: 24px; }
:root #modalRoot .modal-body { padding: 24px; }
:root #modalRoot .dc-modal-body { padding: 24px; }
:root #modalRoot .dc-modal-footer { background: var(--surface); border-color: var(--line); }
:root #modalRoot :is(.field input, .field select, .field textarea, .dc-control) { background: var(--surface); color: var(--text); border-color: var(--line); border-radius: 12px; }
:root #modalRoot .button.primary { background: var(--brand); color: var(--brand-on); }
:root[data-theme] body :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; box-shadow: none; }
body .sidebar.collapsed { width: 80px; flex-basis: 80px; }
body .sidebar.collapsed .brand-copy { display: none; }
body .sidebar.collapsed .brand-row { height: auto; min-height: 88px; padding: 12px 0; flex-direction: column; gap: 6px; }
body .sidebar.collapsed .sidebar-toggle { display: inline-flex; margin: 0; }

@media (min-width: 1280px) {
  .discipline-screen .dc-status-today > .dc-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  body .sidebar { width: 236px; flex-basis: 236px; }
  body .brand-copy strong { font-size: 15px; }
  body .brand-copy small { font-size: 9px; }
  body .brand-row { padding-inline: 12px; }
  body .brand-symbol { width: 32px; height: 32px; flex-basis: 32px; }
  body .content-area { padding: 24px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 76px; }
  body .sidebar, body .sidebar.collapsed { width: 64px; flex-basis: 64px; }
  body .brand-row, body .sidebar.collapsed .brand-row { min-height: 72px; height: 72px; padding: 0; }
  body .sidebar :is(.brand-copy, .sidebar-toggle) { display: none; }
  body .side-nav { padding: 12px 6px; }
  body .nav-item { min-height: 44px; padding: 8px 4px; justify-content: center; }
  body .topbar { height: 64px; min-height: 64px; flex-basis: 64px; padding: 0 12px; }
  body .mobile-brand { font-size: 13px; letter-spacing: -.03em; }
  body .top-actions { gap: 6px; }
  body .top-actions .button { padding: 10px 12px; font-size: 12px; }
  body .top-actions .icon-button { width: 44px; min-width: 44px; height: 44px; border: 0; background: transparent; }
  body .content-area { padding: 20px 12px; }
  :root .content-area .page-intro { min-height: 174px; padding: 24px 20px; border-radius: 24px; flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 20px; }
  :root .content-area .page-intro::after { width: 140px; height: 140px; top: -90px; right: -60px; border-width: 20px; }
  :root .content-area .page-intro h2 { font-size: 28px; margin-top: 12px; }
  :root .content-area .page-intro p { font-size: 13px; line-height: 1.7; }
  :root .content-area .page-intro .eyebrow { font-size: 9px; }
  :root .home-screen > .page-intro { padding-bottom: 48px; margin-bottom: 0; }
  :root .home-screen > .grid.stats { margin: -20px 8px 24px; gap: 10px; }
  :root[data-theme] body .content-area .card { padding: 18px; border-radius: 20px; }
  :root[data-theme] body .home-screen > .grid.stats .stat-card { min-height: 0; padding: 16px; }
  :root[data-theme] body .stat-card .value { font-size: 24px; }
  body .app-footer { padding: 20px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Marca: el icono y las dos líneas de texto forman una sola composición.
   El control del menú vive en la barra superior y no reduce el ancho del logo. */
body .brand-row {
  height: 96px;
  min-height: 96px;
  padding: 0 16px;
  gap: 0;
}
body .brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  width: 100%;
  font-family: "Segoe UI", Arial, sans-serif;
  text-rendering: auto;
}
body .brand-symbol {
  display: block;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  filter: none;
  transform: none;
}
body .brand-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
body .brand-copy strong {
  display: block;
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -.5px;
  white-space: nowrap;
  text-shadow: none;
  filter: none;
  transform: none;
}
body .brand-copy .brand-tagline {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--brand-strong);
  text-shadow: none;
  filter: none;
  transform: none;
}
body .topbar-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
body .topbar .sidebar-toggle {
  display: inline-flex;
  flex: 0 0 44px;
  margin: 0;
}
body .sidebar.collapsed .brand-row {
  height: 96px;
  min-height: 96px;
  padding: 0;
  gap: 0;
}
body .sidebar.collapsed .brand-lockup { justify-content: center; }
body .sidebar.collapsed .brand-copy { display: none; }
@media (max-width: 1100px) and (min-width: 761px) {
  body .brand-row { padding-inline: 12px; }
  body .brand-lockup { gap: 10px; }
  body .brand-symbol { width: 44px; height: 44px; flex-basis: 44px; }
}
@media (max-width: 760px) {
  body .brand-row, body .sidebar.collapsed .brand-row {
    height: 82px;
    min-height: 82px;
    padding: 0;
  }
  body .brand-lockup { justify-content: center; }
  body .brand-symbol, body .sidebar.collapsed .brand-symbol {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  body .sidebar .brand-copy, body .topbar .sidebar-toggle { display: none; }
}