*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: dark;
  --bg:        #0d1117;
  --surface:   #161b22;
  --surface2:  #1f2937;
  --border:    #30363d;
  --text:      #e6edf3;
  --muted:     #8b949e;
  --accent:    #58a6ff;
  --green:     #3fb950;
  --green-dim: #1a3a20;
  --red:       #f85149;
  --red-dim:   #3a1a1a;
  --yellow:    #f59e0b;
  --yellow-dim:#342410;
  --purple:    #a371f7;
  --teal:      #2dd4bf;
  --teal-dim:  #103b39;
  --orange:    #f97316;
  --orange-dim:#3b2515;
  --brand-start: #ffffff;
  --surface-hover: #21262d;
  --tooltip-surface: rgba(31, 41, 55, .97);
  --tooltip-text: #93c5fd;
  --modal-backdrop: rgba(1, 4, 9, .82);
  --floating-surface: rgba(22, 27, 34, .98);
  --floating-text: #c9d1d9;
  --panel-shadow: rgba(0, 0, 0, .55);
  --on-accent: #0b0f19;
  --radius:    10px;
}


body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color .2s ease, color .2s ease;
}


/* ── LOGIN ── */
#loginScreen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}
.login-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 18px 50px var(--panel-shadow);
}
.login-logo {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.15), rgba(163, 113, 247, 0.15));
  border: 1px solid rgba(88, 166, 255, 0.4);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  margin: 0 auto 20px;
  box-shadow: 0 0 15px rgba(88, 166, 255, 0.1);
}
.login-box h2 { 
  text-align: center; 
  font-size: 24px; 
  font-weight: 800; 
  margin-bottom: 6px; 
  letter-spacing: -.5px;
  background: linear-gradient(120deg, var(--brand-start) 40%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.login-box p { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 28px; }
.login-tabs { display: flex; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 4px; gap: 4px; margin-bottom: 24px; }
.login-tab { flex: 1; padding: 8px; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; background: transparent; color: var(--muted); transition: all .2s; }
.login-tab.active { background: var(--surface2); color: var(--text); }
.login-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.login-field label { font-size: 12px; color: var(--muted); font-weight: 500; }
.login-field input { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; padding: 11px 14px; outline: none; transition: border-color .18s; }
.login-field input:focus { border-color: var(--accent); }
.btn-login {
  width: 100%; padding: 13px;
  background: linear-gradient(135deg, #1f6feb, #58a6ff);
  color: #fff; border: none; border-radius: 8px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: opacity .18s; margin-top: 8px;
}
.btn-login:hover { opacity: .88; }

.btn-preview {
  width: 100%; padding: 11px;
  background: transparent; color: var(--accent);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all .18s; margin-top: 12px;
}
.btn-preview:hover { background: var(--surface2); border-color: var(--accent); }

.login-error { color: var(--red); font-size: 13px; text-align: center; margin-top: 12px; min-height: 18px; }

/* ── APP ── */
#appScreen { display: none; }

header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.header-spacer {
  display: block;
  grid-column: 1;
}
.header-left { 
  grid-column: 2;
  display: flex; 
  flex-direction: column;
  align-items: center; 
  gap: 6px; 
  text-align: center;
}
.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
}
header .logo {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.15), rgba(163, 113, 247, 0.15));
  border: 1px solid rgba(88, 166, 255, 0.4);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 15px rgba(88, 166, 255, 0.1);
}
header h1 { 
  font-size: 22px; 
  font-weight: 800; 
  letter-spacing: -.5px; 
  background: linear-gradient(120deg, var(--brand-start) 40%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
header h1 span {
  background: linear-gradient(120deg, var(--accent) 0%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}
header p  { font-size: 12px; color: var(--muted); margin-top: 0; }

.header-right { 
  grid-column: 3;
  justify-self: end;
  display: flex; 
  align-items: center; 
  gap: 12px; 
}
#userEmail { font-size: 12px; color: var(--muted); }
.btn-logout { padding: 7px 14px; border-radius: 7px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; }
.btn-logout:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }

main { max-width: 1100px; margin: 0 auto; padding: 24px; }

#loadingOverlay {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  font-size: 14px; color: var(--muted);
  gap: 10px;
}

#connectionOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(13, 17, 23, .96);
  backdrop-filter: blur(8px);
}
.connection-dialog {
  width: min(440px, 100%);
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 24px 70px var(--panel-shadow);
  text-align: center;
}
.connection-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border: 1px solid rgba(249, 115, 22, .4);
  border-radius: 50%;
  background: rgba(249, 115, 22, .1);
  color: var(--orange);
  font-size: 30px;
  font-weight: 800;
}
.connection-dialog h2 { margin-bottom: 9px; font-size: 21px; }
.connection-dialog > p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.connection-dialog .connection-protection-note {
  margin-top: 12px;
  color: var(--text);
  font-size: 11.5px;
}
.connection-retry-button {
  width: 100%;
  margin-top: 22px;
  padding: 11px 16px;
  border: 1px solid rgba(88, 166, 255, .5);
  border-radius: 8px;
  background: var(--accent);
  color: #08111f;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.connection-retry-button:hover { filter: brightness(1.08); }
.connection-retry-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  color: var(--muted);
  font-size: 12px;
}
.connection-retry-status[hidden] { display: none; }
body.connection-blocked { overflow: hidden; }
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.tabs-nav {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.tab-btn {
  background: transparent; border: none; color: var(--muted);
  padding: 12px 24px; font-size: 15px; font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent; transition: all .2s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-content { display: none; }
.tab-content.active { display: block; }

.summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 32px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 88px; }
.card label { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); display: block; margin-bottom: 4px; padding-right: 16px; white-space: nowrap; }
.card .info-icon { position: absolute; top: 15px; right: 16px; margin-left: 0; }
.card .amount { font-size: 22px; font-weight: 700; line-height: 1.2; }
.card.incomes .amount { color: var(--green); }
.card.expenses .amount { color: var(--red); }
.card.investments .amount { color: var(--yellow); }
.card.balance .amount { color: var(--accent); }
.card.wealth .amount { color: var(--purple); }


.tooltip-target {
  cursor: help;
  position: relative;
}
.info-icon {
  font-size: 10px;
  opacity: 0.6;
  margin-left: 2px;
  vertical-align: middle;
}
.tooltip-box {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: var(--tooltip-surface);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 12.5px;
  color: var(--tooltip-text);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 999;
  white-space: nowrap;
  font-weight: 500;
  line-height: 1.4;
}
.tooltip-box::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--tooltip-surface) transparent transparent transparent;
}
.tooltip-target:hover .tooltip-box {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}
.tooltip-target:focus .tooltip-box,
.tooltip-target:focus-within .tooltip-box {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}

.form-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; margin-bottom: 32px; }
.form-panel h2 { font-size: 15px; font-weight: 600; margin-bottom: 20px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.panel-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.movement-ai-assistant { position: relative; min-width: 0; margin: 0 0 22px; padding: 17px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--purple) 42%, var(--border)); border-radius: 14px; background: radial-gradient(circle at 92% 8%, rgba(163, 113, 247, .18), transparent 36%), linear-gradient(145deg, rgba(88, 166, 255, .11), rgba(163, 113, 247, .06)); box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 14px 38px rgba(3, 8, 20, .18); }
.movement-ai-assistant::before { content: ''; position: absolute; width: 110px; height: 110px; top: -72px; right: 24px; border-radius: 50%; background: rgba(88, 166, 255, .24); filter: blur(28px); pointer-events: none; }
.movement-ai-assistant > * { position: relative; z-index: 1; }
.movement-ai-heading, .movement-ai-input-row, .movement-ai-results { display: flex; min-width: 0; gap: 12px; }
.movement-ai-heading { align-items: flex-start; justify-content: space-between; margin-bottom: 13px; }
.movement-ai-heading > div { min-width: 0; }
.movement-ai-heading strong, .movement-ai-heading small { display: block; }
.movement-ai-heading small, .movement-ai-privacy, .movement-ai-status { color: var(--muted); line-height: 1.45; }
.movement-ai-heading small { margin-top: 4px; }
.movement-ai-badge { flex: 0 0 auto; max-width: 100%; padding: 4px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 11px; text-align: center; }
.movement-ai-assistant > label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 600; }
.movement-ai-input-row input { min-width: 0; flex: 1 1 auto; }
.movement-ai-input-row button, .movement-ai-proposal button { flex: 0 0 auto; }
.movement-ai-input-row .movement-ai-analyze { max-width: 100%; border-color: transparent; background: linear-gradient(135deg, #1f6feb, var(--purple)); color: #fff; font-weight: 800; box-shadow: 0 7px 20px rgba(88, 166, 255, .18); }
.movement-ai-input-row .movement-ai-analyze:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.movement-ai-input-row .movement-ai-analyze:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 75%, white); outline-offset: 2px; }
.movement-ai-input-row .movement-ai-analyze:disabled { background: linear-gradient(135deg, rgba(31, 111, 235, .45), rgba(163, 113, 247, .38)); box-shadow: none; }
.movement-ai-input-row button:disabled { cursor: not-allowed; opacity: .55; }
.movement-ai-privacy, .movement-ai-status { margin: 10px 0 0; overflow-wrap: anywhere; font-size: 11px; }
.movement-ai-status.is-error { color: var(--danger); }
.movement-ai-results { align-items: stretch; margin-top: 13px; flex-wrap: wrap; }
.movement-ai-account { flex: 1 0 100%; margin: 0; padding: 9px 11px; border: 1px solid rgba(88, 166, 255, .22); border-radius: 9px; background: rgba(88, 166, 255, .07); color: var(--tooltip-text); overflow-wrap: anywhere; font-size: 11px; }
.movement-ai-proposal { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 13px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: 11px; background: rgba(13, 17, 23, .58); }
.movement-ai-summary { min-width: 0; overflow-wrap: anywhere; color: var(--text); font-size: 12px; line-height: 1.45; }
.movement-ai-actions { display: flex; width: 100%; min-width: 0; flex-wrap: wrap; gap: 8px; }
.movement-ai-actions button { min-width: 0; flex: 1 1 150px; }
.movement-ai-actions .movement-ai-save { border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--purple)); color: #fff; font-weight: 800; }
.movement-ai-actions button:disabled { cursor: not-allowed; filter: grayscale(.35); opacity: .48; }
.movement-ai-discard { flex: 1 0 100%; min-width: 0; }
.movement-ai-assistant[aria-busy="true"] .movement-ai-input-row button { cursor: progress; opacity: .7; }
.movement-classic-divider { display: flex; align-items: center; gap: 10px; margin: 2px 0 20px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; }
.movement-classic-divider::before, .movement-classic-divider::after { content: ''; height: 1px; background: var(--border); flex: 1 1 auto; }
.movement-classic-divider span { flex: 0 1 auto; text-align: center; }

@media (max-width: 480px) {
  .movement-ai-heading, .movement-ai-input-row, .movement-ai-results { flex-direction: column; }
  .movement-ai-badge { align-self: flex-start; }
  .movement-ai-input-row button, .movement-ai-proposal button { width: 100%; }
  .movement-ai-actions { flex-direction: column; }
  .movement-ai-proposal { flex-basis: auto; width: 100%; }
}
.type-toggle { display: flex; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 4px; gap: 4px; width: fit-content; }
.type-toggle button { padding: 9px 28px; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; background: transparent; color: var(--muted); }
.type-toggle button.active-income  { background: var(--green-dim); color: var(--green); }
.type-toggle button.active-expense { background: var(--red-dim);   color: var(--red);   }
.type-toggle button.active-investment { background: var(--yellow-dim); color: var(--yellow); }
.btn-edit-mov { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: pointer; padding: 5px 9px; font-size: 13px; margin-right: 4px; }
.btn-edit-mov:hover { border-color: var(--accent); color: var(--accent); background: rgba(88, 166, 255, 0.1); }
.btn-cancel-edit { width: 100%; margin-top: 8px; padding: 10px; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; }
.btn-cancel-edit:hover { border-color: var(--red); color: var(--red); }

.cat-search-wrap {
  margin-bottom: 20px;
}
.cat-search-wrap input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13.5px;
  padding: 10px 14px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  width: 100%;
}
.cat-search-wrap input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.15);
}

.cat-section { margin-bottom: 22px; }
.cat-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px; color: var(--muted); padding: 6px 0 10px; display: flex; align-items: center; gap: 8px; }
.cat-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.cat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.cat-pill { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg); color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .18s; user-select: none; }
.cat-pill:hover { border-color: var(--accent); color: var(--text); }
.cat-pill.selected-income  { background: var(--green-dim); border-color: var(--green); color: var(--green); font-weight: 700; }
.cat-pill.selected-expense { background: var(--red-dim);   border-color: var(--red);   color: var(--red);   font-weight: 700; }
.cat-pill.selected-investment { background: var(--yellow-dim); border-color: var(--yellow); color: var(--yellow); font-weight: 700; }
.subcat-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 4px 12px; border-left: 2px solid var(--border); margin-left: 4px; }
.subcat-pill { padding: 4px 11px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; transition: all .15s; }
.subcat-pill:hover { border-color: var(--accent); color: var(--text); }
.subcat-pill.selected-income  { background: var(--green-dim); border-color: var(--green); color: var(--green); font-weight: 600; }
.subcat-pill.selected-expense { background: var(--red-dim);   border-color: var(--red);   color: var(--red);   font-weight: 600; }
.subcat-pill.selected-investment { background: var(--yellow-dim); border-color: var(--yellow); color: var(--yellow); font-weight: 600; }

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

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--muted); font-weight: 500; }
.field input, .field select { background: var(--bg); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-size: 14px; padding: 10px 12px; outline: none; transition: border-color .18s; width: 100%; }
.field input:focus { border-color: var(--accent); }

.search-wrap { display: flex; align-items: center; }
.search-wrap input { background: var(--bg); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-size: 14px; padding: 9px 12px; outline: none; transition: border-color .18s; width: 320px; }
.search-wrap input:focus { border-color: var(--accent); }

.date-wrapper { position: relative; display: flex; align-items: center; }
.date-wrapper::after { content: '📅'; position: absolute; right: 12px; font-size: 14px; pointer-events: none; opacity: 0.8; }
.btn-add { width: 100%; padding: 14px; background: linear-gradient(135deg, #1f6feb, #58a6ff); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; letter-spacing: .3px; transition: opacity .18s, transform .12s; }
.btn-add:hover { opacity: .88; transform: translateY(-1px); }
.btn-add:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-add.editing-movement { background: linear-gradient(135deg, #d29922, #f59e0b); }
.module-inline-actions,
.future-section-controls { display: flex; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.module-inline-action { width: auto; min-height: 38px; padding: 8px 13px; white-space: nowrap; }
.module-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; grid-column: 1 / -1; }
.module-filter-heading > div { display: flex; flex-direction: column; gap: 3px; }
.module-filter-heading strong { font-size: 14px; }
.module-filter-heading small { color: var(--muted); font-size: 11px; }

.movements-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.movements-header h2 { font-size: 15px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.table-actions { display: flex; gap: 8px; }
.btn-export, .btn-import { padding: 9px 18px; background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .18s; }

.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
thead th { background: var(--surface2); padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); border-bottom: 1px solid var(--border); }

thead th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
thead th.sortable:hover {
  background: var(--surface-hover) !important;
  color: var(--text);
}
thead th span {
  margin-left: 4px;
  font-size: 11px;
  display: inline-block;
}

tbody tr { border-bottom: 1px solid var(--border); transition: background .15s; }
tbody tr:hover { background: var(--surface2); }
tbody td { padding: 13px 16px; font-size: 14px; vertical-align: middle; }
.td-date { color: var(--muted); font-size: 13px; }
.td-type { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
#movementsTableContainer th:nth-child(2),
#movementsTableContainer td:nth-child(2) { min-width: 128px; white-space: nowrap; }
.td-type { white-space: nowrap; }
.type-income  { background: var(--green-dim); color: var(--green); }
.type-expense { background: var(--red-dim);   color: var(--red);   }
.type-investment { background: var(--yellow-dim); color: var(--yellow); }
.td-amount { font-weight: 700; font-size: 15px; }
.amount-income  { color: var(--green); }
.amount-expense { color: var(--red); }
.amount-investment { color: var(--yellow); }
.td-cat { font-size: 11px; color: var(--muted); background: var(--surface2); padding: 2px 8px; border-radius: 20px; display: inline-block; }
.btn-del { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: pointer; padding: 5px 9px; font-size: 13px; }
.btn-del:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }
.empty { text-align: center; padding: 56px 24px; color: var(--muted); }
.empty span { font-size: 36px; display: block; margin-bottom: 12px; }

.analysis-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.ana-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; }
.ana-card label { font-size: 11px; color: var(--muted); text-transform: uppercase; display: block; margin-bottom: 4px; }
.ana-card .val { font-size: 20px; font-weight: 700; }
.ana-card.tooltip-target { outline: none; }
.ana-card.tooltip-target:focus { border-color: var(--accent); }
.ana-metric-tooltip {
  left: 0;
  right: auto;
  width: min(290px, calc(100vw - 36px));
  transform: translateY(-12px);
  white-space: normal;
  text-align: left;
  text-transform: none;
}
.ana-card:nth-child(even) .ana-metric-tooltip {
  right: 0;
  left: auto;
}
.ana-card:hover .ana-metric-tooltip,
.ana-card:focus .ana-metric-tooltip,
.ana-card:focus-within .ana-metric-tooltip {
  transform: translateY(-5px);
}
.ana-metric-tooltip::after {
  left: 24px;
  transform: none;
}
.ana-card:nth-child(even) .ana-metric-tooltip::after {
  right: 24px;
  left: auto;
}
.summary-metric-tooltip {
  left: 0;
  width: min(300px, calc(100vw - 36px));
  transform: translateY(-12px);
  white-space: normal;
  text-align: left;
}
.tooltip-target:hover .summary-metric-tooltip,
.tooltip-target:focus .summary-metric-tooltip,
.tooltip-target:focus-within .summary-metric-tooltip {
  transform: translateY(-5px);
}
.summary-metric-tooltip::after {
  left: 24px;
  transform: none;
}
.evolution-chart-heading {
  flex: 1 1 520px;
  min-width: min(100%, 280px);
}
.evolution-chart-heading p {
  max-width: 720px;
  margin: 7px 0 0 13px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.percentage-share,
.percentage-not-applicable {
  margin-left: 3px;
  font-size: 11px;
  font-weight: 400;
  opacity: .72;
}
.percentage-not-applicable {
  cursor: help;
  opacity: .82;
}
.ana-card .val .percentage-not-applicable {
  margin-left: 0;
  font-size: inherit;
  font-weight: inherit;
  opacity: 1;
}

.analysis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.chart-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; }
.chart-box h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 20px; border-left: 3px solid var(--accent); padding-left: 10px; }

.chart-container { display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; flex-wrap: wrap; }
.donut-chart { transform: rotate(-90deg); flex-shrink: 0; }
.chart-legend { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 6px; }
.legend-item { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); }
.legend-item b { color: var(--text); }
.legend-color { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 8px; }

.bar-row { margin-bottom: 12px; }
.bar-info { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.bar-track { background: var(--bg); height: 8px; border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }

.group-breakdown { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border); }
.group-breakdown-title { font-size: 11px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }

.chart-area { pointer-events: none; }
.chart-line { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.4)); }
.chart-line:hover { stroke-width: 4.5; }
.chart-grid { stroke: var(--border); stroke-width: 1; stroke-opacity: 0.35; stroke-dasharray: 2 2; }
.chart-axis { stroke: var(--border); stroke-width: 1.5; stroke-opacity: 0.6; }
.chart-label { fill: var(--muted); font-size: 10px; }
.chart-dot { cursor: pointer; transition: r 0.15s, stroke-width 0.15s; }
.chart-dot:hover { r: 6.5; stroke-width: 3px; }

footer {
  margin-top: 64px;
  padding: 32px 0 64px 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}
.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  flex-wrap: wrap;
  gap: 16px;
}
footer p {
  line-height: 1.5;
}
footer .version {
  background: var(--surface2);
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  color: var(--accent);
}

#toast { position: fixed; bottom: 28px; right: 28px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 20px; font-size: 14px; font-weight: 500; opacity: 0; transform: translateY(12px); transition: all .25s; pointer-events: none; z-index: 999; }
#toast.show { opacity: 1; transform: translateY(0); }

.card .amount, 
.td-amount, 
.td-date, 
.ana-card .val, 
.chart-label {
  font-variant-numeric: tabular-nums;
}

.year-header-row {
  background: var(--surface2) !important;
  cursor: pointer;
  user-select: none;
}
.year-header-row:hover {
  background: var(--surface-hover) !important;
}
.td-year-header {
  font-weight: 700 !important;
  color: var(--accent) !important;
  padding: 12px 16px !important;
}
.year-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.year-arrow {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

.year-collapse-header {
  background: var(--surface2);
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  transition: background 0.15s;
}
.year-collapse-header:hover {
  background: var(--surface-hover) !important;
}
.year-collapse-header span {
  font-weight: 700;
  color: var(--accent);
}
.year-collapse-header .year-arrow {
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

.header-profile-badge {
  background: rgba(245, 158, 11, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 24px;
  width: 100%;
  max-width: 100%;
  min-height: 98px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  animation: fadeIn 0.3s ease-in-out;
}
.header-profile-badge-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-align: left;
  width: 100%;
}
.header-profile-badge-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}
.header-profile-image-wrap {
  width: 88px;
  height: 64px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(245, 158, 11, .25);
  background: var(--surface2);
}
.header-profile-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  transform: scale(1.12);
}
.header-profile-badge-text {
  flex: 1;
  min-width: 0;
}
.header-profile-badge strong {
  display: block;
  font-size: 13.5px;
  color: var(--yellow);
  font-weight: 700;
  margin-bottom: 2px;
}
.header-profile-badge p {
  font-size: 12px;
  color: var(--text);
  margin: 0 !important;
}
.header-profile-badge .header-profile-badge-label {
  font-weight: 650;
  color: var(--yellow);
  margin: 1px 0 3px !important;
}
.btn-change-profile {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--accent);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: all 0.2s;
}
.btn-change-profile:hover {
  background: var(--border) !important;
  color: #fff !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.analysis-filters-modern, .evolution-filters-modern {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.filter-group label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.pill-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pill-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.pill-btn:hover {
  border-color: var(--accent);
  color: var(--text);
  background: var(--surface2);
}
.pill-btn.active {
  background: rgba(88, 166, 255, 0.12);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 10px rgba(88, 166, 255, 0.08);
}

.segmented-control {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  width: fit-content;
  gap: 2px;
}
.segment-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.segment-btn:hover {
  color: var(--text);
}
.segment-btn.active {
  background: var(--surface2);
  color: var(--text);
}

.month-grid-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
}
.month-btn {
  flex: 1 0 calc(7.69% - 4px);
  min-width: 48px;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 8px 4px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.month-btn:hover {
  background: var(--surface2);
  color: var(--text);
}
.month-btn.active {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.evolution-filters-compact {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.evolution-filters-compact .segmented-control {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  display: flex;
  align-items: center;
  height: 28px;
}
.evolution-filters-compact .segment-btn {
  padding: 2px 8px;
  font-size: 11.5px;
  height: 22px;
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
  border-radius: 4px;
  transition: all 0.15s ease;
}
.evolution-filters-compact .segment-btn.active {
  background: var(--surface2);
  color: var(--text);
}
.evolution-filters-compact .pill-selector {
  display: flex;
  gap: 4px;
  align-items: center;
}
.evolution-filters-compact .pill-btn {
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.evolution-filters-compact .pill-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.evolution-filters-compact .pill-btn.active {
  background: rgba(88, 166, 255, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── MÓDULO DE INVERSIONES ── */
.btn-add-investment {
  background: linear-gradient(135deg, #b45309, #f59e0b);
  color: #111827;
}
.btn-add-investment:hover { opacity: .92; }
.investment-breakdown-box { min-height: 210px; }
.investment-breakdown-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 0 0 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.investment-breakdown-total span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.investment-breakdown-total strong { color: var(--yellow); font-size: 24px; }
.investment-breakdown-chart { margin-bottom: 18px; }
.compact-empty { padding: 24px 12px; }
#investmentsTableContainer .amount-investment { color: var(--yellow); }
#investmentsTableContainer .table-wrap { overflow-x: auto; }
#investmentsTableContainer table { min-width: 980px; }
#investmentsTableContainer th,
#investmentsTableContainer td { padding-left: 10px; padding-right: 10px; }
#investmentsTableContainer th:nth-child(1),
#investmentsTableContainer td:nth-child(1) { width: 88px; }
#investmentsTableContainer th:nth-child(2),
#investmentsTableContainer td:nth-child(2) { width: 112px; }
#investmentsTableContainer th:nth-child(3),
#investmentsTableContainer td:nth-child(3) { min-width: 175px; }
#investmentsTableContainer th:nth-child(6),
#investmentsTableContainer td:nth-child(6) { width: 84px; }
#investmentsTableContainer th:nth-child(7),
#investmentsTableContainer td:nth-child(7) { width: 96px; }
#investmentsTableContainer th:nth-child(8),
#investmentsTableContainer td:nth-child(8) { width: 138px; }
#investmentsTableContainer th:nth-child(9),
#investmentsTableContainer td:nth-child(9) { width: 108px; }
.investment-amount-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 118px;
}
.investment-amount-stack > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
}
.investment-amount-stack small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}
.investment-amount-stack strong { font-size: 12px; }
.investment-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.investment-row-actions .btn-edit-mov,
.investment-row-actions .btn-del,
.btn-sell-investment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 30px;
  margin: 0;
  padding: 0;
}
.btn-sell-investment {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
}
.btn-sell-investment:hover {
  border-color: var(--green);
  color: var(--green);
  background: var(--green-dim);
}
.btn-sell-investment:disabled {
  opacity: .32;
  cursor: not-allowed;
  border-color: var(--border);
  color: var(--muted);
  background: transparent;
}


.investment-tracking-fields {
  margin: 18px 0 20px;
  padding: 15px;
  border: 1px solid rgba(245, 158, 11, .28);
  border-radius: 10px;
  background: rgba(245, 158, 11, .055);
}
.investment-tracking-fields-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 13px;
}
.investment-tracking-fields-header strong { color: var(--yellow); font-size: 12.5px; }
.investment-tracking-fields-header span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.investment-tracking-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  margin-bottom: 0;
}
.investment-unit-preview {
  grid-column: 1 / -1;
  min-height: 18px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.investment-market-box { min-height: 180px; }
.market-tracking-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
}
.market-tracking-note > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.market-tracking-note strong { color: var(--yellow); font-size: 11.5px; white-space: nowrap; }
.market-tracking-note span { color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.btn-market-refresh,
.btn-auto-quote {
  padding: 8px 11px;
  border: 1px solid rgba(88, 166, 255, .4);
  border-radius: 7px;
  background: rgba(88, 166, 255, .08);
  color: var(--blue);
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.btn-market-refresh:hover,
.btn-auto-quote:hover { border-color: var(--blue); background: rgba(88, 166, 255, .14); }
.btn-market-refresh:disabled,
.btn-auto-quote:disabled { cursor: not-allowed; opacity: .5; }
.market-tracking-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.market-tracking-summary > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface2);
}
.market-tracking-summary span {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .45px;
}
.market-tracking-summary strong { color: var(--text); font-size: 18px; }
.market-tracking-list { display: flex; flex-direction: column; gap: 8px; }
.market-tracking-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) repeat(5, minmax(95px, 1fr)) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}
.market-tracking-row.editing { border-color: rgba(245, 158, 11, .46); }
.market-tracking-row > div:not(.market-tracking-asset) {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.market-tracking-row > div > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .35px;
}
.market-tracking-row > div > strong { color: var(--text); font-size: 11.5px; white-space: nowrap; }
.market-tracking-asset { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.market-tracking-asset strong { color: var(--text); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-tracking-asset span { color: var(--muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-tracking-asset small { color: var(--yellow); font-size: 9.5px; font-weight: 650; }
.btn-market-quote,
.btn-auto-quote,
.btn-save-quote,
.btn-remove-quote,
.btn-cancel-quote {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
}
.btn-market-quote { padding: 8px 10px; white-space: nowrap; }
.btn-market-quote:hover { border-color: var(--yellow); color: var(--yellow); }
.btn-auto-quote { padding: 8px 12px; border-color: rgba(88, 166, 255, .4); background: rgba(88, 166, 255, .08); color: var(--blue); }
.btn-auto-quote:hover { border-color: var(--blue); background: rgba(88, 166, 255, .14); }
.btn-auto-quote:disabled { cursor: not-allowed; opacity: .5; }
.market-quote-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  margin-top: -1px;
  border: 1px solid rgba(245, 158, 11, .34);
  border-radius: 9px;
  background: rgba(245, 158, 11, .045);
}
.market-quote-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}
.btn-save-quote { padding: 8px 12px; border-color: rgba(245, 158, 11, .45); color: var(--yellow); }
.btn-remove-quote { padding: 8px 12px; color: var(--red); }
.btn-cancel-quote { padding: 8px 12px; color: var(--muted); }

/* ── RESPONSIVE RESPONSES (Unified media queries) ── */
@media (max-width: 1024px) { 
  .summary { grid-template-columns: repeat(3, 1fr); } 
  .analysis-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .chart-header-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .evolution-filters-compact {
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .summary { grid-template-columns: repeat(2, 1fr); } 
  
  header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px 16px;
  }
  .header-spacer { display: none; }
  .header-left { order: 1; }
  .header-right { order: 2; justify-self: center; }

  .month-btn {
    flex: 1 0 calc(20% - 4px);
    padding: 10px 2px;
  }

  .movements-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .movements-header h2 { font-size: 13px; }
  .search-wrap { width: 100%; }
  .search-wrap input { width: 100%; }
  .table-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    width: 100%;
  }
  .table-actions button {
    padding: 10px 4px;
    font-size: 11px;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
  }

  table thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }

  .movements-tbody tr {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 12px 14px;
    background: var(--surface);
  }
  .movements-tbody tr:hover { background: var(--surface2); }
  .movements-tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(48, 54, 61, 0.4);
    padding: 8px 0;
    text-align: right;
  }
  .movements-tbody td:last-child {
    border-bottom: none;
    padding-top: 12px;
    justify-content: flex-end;
  }
  .movements-tbody td::before {
    font-weight: 600;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    float: left;
  }
  .movements-tbody td:nth-of-type(1)::before { content: "Fecha"; }
  .movements-tbody td:nth-of-type(2)::before { content: "Tipo"; }
  .movements-tbody td:nth-of-type(3)::before { content: "Concepto"; }
  .movements-tbody td:nth-of-type(4)::before { content: "Categoría"; }
  .movements-tbody td:nth-of-type(5)::before { content: "Subcat."; }
  .movements-tbody td:nth-of-type(6)::before { content: "Importe"; }
  .movements-tbody td:nth-of-type(7)::before { content: "Acción"; }

  .investments-tbody tr {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 12px 14px;
    background: var(--surface);
  }
  .investments-tbody tr:hover { background: var(--surface2); }
  .investments-tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(48, 54, 61, 0.4);
    padding: 8px 0;
    text-align: right;
  }
  .investments-tbody td:last-child {
    border-bottom: none;
    padding-top: 12px;
    justify-content: space-between;
  }
  .investments-tbody td::before {
    font-weight: 600;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    float: left;
  }
  .investments-tbody td:nth-of-type(1)::before { content: "Fecha"; }
  .investments-tbody td:nth-of-type(2)::before { content: "Operación"; }
  .investments-tbody td:nth-of-type(3)::before { content: "Activo"; }
  .investments-tbody td:nth-of-type(4)::before { content: "Categoría"; }
  .investments-tbody td:nth-of-type(5)::before { content: "Subcat."; }
  .investments-tbody td:nth-of-type(6)::before { content: "Unidades"; }
  .investments-tbody td:nth-of-type(7)::before { content: "Precio/u"; }
  .investments-tbody td:nth-of-type(8)::before { content: "Importes"; }
  .investments-tbody td:nth-of-type(9)::before { content: "Acciones"; }

  #investmentsTableContainer table { min-width: 0; }
  #investmentsTableContainer th,
  #investmentsTableContainer td { width: 100%; min-width: 0; padding-left: 0; padding-right: 0; }
  .investment-amount-stack { min-width: 132px; }

  #evolutionTableContainer table, 
  #evolutionTableContainer tbody, 
  #evolutionTableContainer tr, 
  #evolutionTableContainer td,
  .dynamic-evolution-table table, 
  .dynamic-evolution-table tbody, 
  .dynamic-evolution-table tr, 
  .dynamic-evolution-table td {
    display: block;
    width: 100%;
  }
  #evolutionTableContainer tr,
  .dynamic-evolution-table tr {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 12px 14px;
    background: var(--surface);
  }
  #evolutionTableContainer td,
  .dynamic-evolution-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(48, 54, 61, 0.4);
    padding: 8px 0;
    text-align: right;
  }
  #evolutionTableContainer td:last-child,
  .dynamic-evolution-table td:last-child {
    border-bottom: none;
  }
  #evolutionTableContainer td::before,
  .dynamic-evolution-table td::before {
    font-weight: 600;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    float: left;
  }
  #evolutionTableContainer td:nth-of-type(1)::before { content: "Periodo"; }
  #evolutionTableContainer td:nth-of-type(2)::before { content: "Ingresos"; }
  #evolutionTableContainer td:nth-of-type(3)::before { content: "Gastos"; }
  #evolutionTableContainer td:nth-of-type(4)::before { content: "Inversiones"; }
  #evolutionTableContainer td:nth-of-type(5)::before { content: "Invs. Acum."; }
  #evolutionTableContainer td:nth-of-type(6)::before { content: "Ahorro Neto"; }
  #evolutionTableContainer td:nth-of-type(7)::before { content: "Ahorro neto acumulado"; }
  #evolutionTableContainer td:nth-of-type(8)::before { content: "Patrimonio"; }

  .dynamic-table-acum td:nth-of-type(1)::before { content: "Periodo"; }
  .dynamic-table-acum td:nth-of-type(2)::before { content: "Inversiones"; }
  .dynamic-table-acum td:nth-of-type(3)::before { content: "Liquidez"; }
  .dynamic-table-acum td:nth-of-type(4)::before { content: "Patrimonio registrado"; }

  .dynamic-table-flujos td:nth-of-type(1)::before { content: "Periodo"; }
  .dynamic-table-flujos td:nth-of-type(2)::before { content: "Ingresos"; }
  .dynamic-table-flujos td:nth-of-type(3)::before { content: "Gastos"; }
  .dynamic-table-flujos td:nth-of-type(4)::before { content: "Inversiones"; }
  .dynamic-table-flujos td:nth-of-type(5)::before { content: "Ahorro Neto"; }

  #tbody tr.year-header-row,
  .dynamic-evolution-table tr.year-header-row {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin-top: 18px !important;
    margin-bottom: 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: var(--surface2) !important;
  }
  
  #tbody tr.year-header-row td.td-year-header,
  .dynamic-evolution-table tr.year-header-row td.td-year-header {
    display: block !important;
    width: 100% !important;
    border-bottom: none !important;
    text-align: left !important;
    padding: 12px 14px !important;
  }
  
  #tbody tr.year-header-row td.td-year-header::before,
  .dynamic-evolution-table tr.year-header-row td.td-year-header::before {
    content: "" !important;
  }
}

@media (max-width: 600px) {
  .tabs-nav {
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    scrollbar-width: none;
  }
  .tabs-nav::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 1 0 auto; padding: 12px 16px; font-size: 14px; text-align: center; }

  header { padding: 16px; }
  .brand-block { gap: 8px; }
  header h1 { font-size: 18px; }
  header p { font-size: 11px; }
  .header-right { width: 100%; display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 4px; }
  #userEmail { text-align: center; order: -1; font-size: 11px; word-break: break-all; }
  .btn-logout { width: 100%; padding: 10px; font-size: 13px; text-align: center; height: 40px; display: flex; align-items: center; justify-content: center; }

  main { padding: 12px; }
  .form-panel { padding: 16px; margin-bottom: 24px; }
  .form-panel h2 { font-size: 13px; margin-bottom: 16px; }
  .form-grid { gap: 12px; }
  .btn-add { padding: 12px; font-size: 14px; }

  .panel-controls { flex-direction: column; align-items: stretch; gap: 12px; }
  .type-toggle { width: 100%; display: flex; }
  .type-toggle button { flex: 1; padding: 10px 4px; font-size: 13px; text-align: center; }

  .cat-section { margin-bottom: 16px; }
  .cat-section-title { font-size: 10px; margin-bottom: 8px; }
  .cat-pills { gap: 6px; }
  .cat-pill { padding: 6px 12px; font-size: 12px; }
  .subcat-row { margin-left: 2px; padding: 8px 0 2px 8px; gap: 4px; }
  .subcat-pill { padding: 4px 10px; font-size: 11px; }

  .card { padding: 14px 16px; }
  .card .amount { font-size: 22px; }

  .analysis-filters { grid-template-columns: 1fr; padding: 12px; gap: 8px; }
  .analysis-filters .field:last-child { grid-column: span 1 !important; }
  .analysis-summary { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ana-card { padding: 12px 8px; }
  .ana-card label { font-size: 10px; }
  .ana-card .val { font-size: 16px; }

  .chart-box { padding: 16px 12px; }
  .chart-box h3 { font-size: 12px; margin-bottom: 12px; }
  .chart-container { gap: 16px; flex-direction: column; }
  .donut-chart { width: 120px; height: 120px; }
  .chart-legend { width: 100%; min-width: 100%; }
  .legend-item { font-size: 11px; }
  .chart-box > div[style*="display:flex; justify-content:center;"] { gap: 10px !important; margin-bottom: 16px !important; }
  .chart-box > div[style*="display:flex; justify-content:center;"] > div { font-size: 11px !important; gap: 4px !important; }

  footer { margin-top: 40px; padding: 24px 0 48px 0; }
  .footer-content { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .footer-content div[style*="text-align: left;"] { text-align: center !important; }

  .header-profile-badge { min-height: 195px; padding: 12px; margin-bottom: 16px; }
  .header-profile-badge-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn-change-profile { width: 100%; justify-content: center; padding: 10px; }
}

@media (max-width: 480px) { 
  .summary { grid-template-columns: 1fr; } 
  .form-grid { grid-template-columns: 1fr; } 
  .month-btn { flex: 1 0 calc(25% - 4px); font-size: 11px; padding: 12px 2px; }
}
/* ── MOVIMIENTOS ESPECIALES ── */
.special-movement-context {
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(88, 166, 255, 0.28);
  border-radius: 8px;
  background: rgba(88, 166, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.special-movement-context strong {
  color: var(--accent);
  font-size: 13px;
}
.special-movement-context span {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.special-movement-context small {
  color: var(--muted);
  font-size: 11.5px;
}

.type-refund {
  background: rgba(63, 185, 80, 0.12);
  color: var(--green);
  border: 1px solid rgba(63, 185, 80, 0.25);
}
.type-neutral {
  background: rgba(230, 237, 243, 0.07);
  color: var(--text);
  border: 1px solid rgba(230, 237, 243, 0.16);
}
.amount-refund { color: var(--green); }
.amount-neutral { color: var(--text); }

.refund-row {
  background: rgba(63, 185, 80, 0.025);
}
.neutral-row {
  background: rgba(230, 237, 243, 0.018);
}
.movement-reference {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.3;
}
.movement-actions {
  white-space: nowrap;
}
.btn-refund-mov {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  padding: 5px 9px;
  font-size: 13px;
  margin-right: 4px;
}
.btn-refund-mov:hover {
  border-color: var(--green);
  color: var(--green);
  background: var(--green-dim);
}

/* ── ANÁLISIS CON VALORES NETOS NEGATIVOS ── */
.signed-chart-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--muted);
  font-size: 12px;
}
.signed-chart-summary strong {
  color: var(--text);
  font-size: 16px;
}
.signed-chart-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.signed-chart-item .bar-info {
  align-items: center;
}
.signed-negative {
  color: var(--green) !important;
}
.bar-fill.negative {
  opacity: 0.55;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.18) 0,
    rgba(255,255,255,0.18) 4px,
    transparent 4px,
    transparent 8px
  );
}
.card.expenses.refund-surplus .amount { color: var(--green); }

/* ── INVERSIÓN: COMPRAS, VENTAS Y POSICIONES ── */
.investment-operation-toggle { margin-bottom: 0; }
.type-toggle button.active-investment-sale {
  background: rgba(63, 185, 80, .13);
  color: var(--green);
}
.investment-sale-asset-wrap {
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid rgba(63, 185, 80, .22);
  border-radius: 8px;
  background: rgba(63, 185, 80, .035);
}
.investment-sale-asset-wrap small {
  color: var(--muted);
  font-size: 11px;
}
#invConcepto[readonly] {
  color: var(--muted);
  cursor: default;
}
.type-investment-sale {
  background: var(--green-dim);
  color: var(--green);
}
.amount-investment-sale { color: var(--green); }
.investment-sale-row { background: rgba(63, 185, 80, .02); }
.investment-loss { color: var(--red) !important; }
.investment-realized-summary {
  margin: -8px 0 18px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}
.investment-realized-summary strong { color: var(--green); }
.investment-assets-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.investment-assets-list span {
  padding: 2px 7px;
  border-radius: 12px;
  background: var(--surface2);
  color: var(--muted);
  font-size: 10.5px;
}

/* ── DESGLOSE COMPACTO DE SUBCATEGORÍAS ── */
.subcategory-details {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.subcategory-details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .55px;
  user-select: none;
}
.subcategory-details[open] summary { margin-bottom: 12px; }
.subcategory-category {
  padding: 9px 0;
  border-bottom: 1px solid rgba(48, 54, 61, .55);
}
.subcategory-category:last-child { border-bottom: none; }
.subcategory-category-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
  font-size: 11.5px;
  color: var(--text);
  font-weight: 600;
}
.subcategory-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0 3px 10px;
  color: var(--muted);
  font-size: 11px;
}

/* ── SELECTOR DE PERFILES DEMO ── */
.demo-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--modal-backdrop);
  backdrop-filter: blur(7px);
}
.demo-profile-dialog {
  width: min(1180px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 28px 80px var(--panel-shadow);
}
.demo-profile-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 22px;
}
.demo-profile-alpha-label {
  display: inline-flex;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.demo-profile-dialog-header h2 { font-size: 20px; margin-bottom: 5px; }
.demo-profile-dialog-header p { color: var(--muted); font-size: 12.5px; }
.demo-profile-dialog-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.demo-profile-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
}
.demo-profile-close:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }
.demo-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.demo-profile-card {
  --profile-accent: var(--accent);
  --profile-accent-soft: rgba(88, 166, 255, .12);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  min-height: 390px;
  padding: 0;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.demo-profile-card--pink { --profile-accent: #ec4899; --profile-accent-soft: rgba(236, 72, 153, .13); }
.demo-profile-card--green { --profile-accent: #4fae4b; --profile-accent-soft: rgba(79, 174, 75, .13); }
.demo-profile-card--blue { --profile-accent: #3b82f6; --profile-accent-soft: rgba(59, 130, 246, .13); }
.demo-profile-card--purple { --profile-accent: #8b5cf6; --profile-accent-soft: rgba(139, 92, 246, .13); }
.demo-profile-card--orange { --profile-accent: #f59e0b; --profile-accent-soft: rgba(245, 158, 11, .14); }
.demo-profile-card--teal { --profile-accent: #0f9f91; --profile-accent-soft: rgba(15, 159, 145, .13); }
.demo-profile-card:hover {
  transform: translateY(-3px);
  border-color: var(--profile-accent);
  background: var(--surface2);
  box-shadow: 0 14px 32px var(--panel-shadow);
}
.demo-profile-card:focus-visible { outline: 3px solid var(--profile-accent); outline-offset: 2px; }
.demo-profile-card.active { border-color: var(--profile-accent); box-shadow: 0 0 0 1px var(--profile-accent); }
.demo-profile-image-wrap {
  position: relative;
  display: block;
  aspect-ratio: 2.1 / 1;
  overflow: hidden;
  background: var(--surface2);
}
.demo-profile-image-wrap::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .14));
  pointer-events: none;
}
.demo-profile-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  transform: scale(1.055);
  transition: transform .3s ease, filter .2s ease;
}
.demo-profile-image { filter: brightness(.88) saturate(.94); }
.demo-profile-card:hover .demo-profile-image { transform: scale(1.075); }
.demo-profile-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 9px;
  padding: 14px 15px 15px;
}
.demo-profile-heading { display: flex; align-items: flex-start; gap: 10px; }
.demo-profile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--profile-accent-soft);
  font-size: 20px;
}
.demo-profile-heading > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.demo-profile-card strong { color: var(--text); font-size: 15px; line-height: 1.25; }
.demo-profile-title { color: var(--profile-accent); font-size: 11.5px; font-weight: 750; line-height: 1.4; margin-top: 2px; }
.demo-profile-card .demo-profile-badge { color: var(--text); font-size: 11.5px; font-weight: 650; line-height: 1.45; }
.demo-profile-description { color: var(--muted); font-size: 11.5px; line-height: 1.55; }
.demo-profile-features {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
}
.demo-profile-features span {
  padding: 3px 7px;
  border-radius: 7px;
  background: var(--profile-accent-soft);
  color: var(--profile-accent);
  font-size: 9.5px;
  font-weight: 650;
}

@media (max-width: 1040px) {
  .demo-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .demo-profile-grid { grid-template-columns: 1fr; }
  .demo-profile-dialog-header { flex-direction: column; }
  .demo-profile-dialog-actions { width: 100%; justify-content: flex-end; }
}

@media (max-width: 768px) {
  .investment-form-grid,
  .investment-tracking-form-grid { grid-template-columns: 1fr; }
  .market-tracking-note { align-items: flex-start; flex-direction: column; }
  .market-tracking-summary { grid-template-columns: 1fr; }
  .market-tracking-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-tracking-asset { grid-column: 1 / -1; }
  .btn-market-quote { grid-column: 1 / -1; width: 100%; }
  .market-quote-editor { grid-template-columns: 1fr; }
  .market-quote-actions { grid-column: 1; justify-content: stretch; flex-direction: column; }
  .market-quote-actions button { width: 100%; }
  .investment-operation-toggle { width: 100%; }
  .investment-operation-toggle button { flex: 1; padding: 9px 8px; }
  .demo-profile-modal { padding: 10px; }
  .demo-profile-dialog { padding: 18px; max-height: calc(100vh - 20px); }
}

/* ── AYUDA CONTEXTUAL DE LA TAXONOMÍA ── */
.category-picker-hint {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin: -10px 2px 14px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.category-picker-hint span {
  color: var(--accent);
  font-size: 12px;
}
.subcat-pill[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  color: var(--text);
}
.category-examples-tooltip {
  position: fixed;
  z-index: 3200;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: max-content;
  max-width: min(330px, calc(100vw - 24px));
  padding: 12px 14px;
  border: 1px solid rgba(88, 166, 255, .35);
  border-radius: 10px;
  background: var(--floating-surface);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .48), 0 0 0 1px rgba(255, 255, 255, .025) inset;
  color: var(--text);
  opacity: 0;
  transform: translateY(4px) scale(.985);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.category-examples-tooltip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.category-examples-tooltip strong {
  font-size: 12.5px;
  line-height: 1.3;
}
.category-examples-tooltip .category-examples-text {
  color: var(--floating-text);
  font-size: 11.5px;
  line-height: 1.55;
}
.category-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 24px 16px 28px;
  border: 1px dashed var(--border);
  border-radius: 9px;
  color: var(--muted);
  text-align: center;
}
.category-search-empty strong {
  color: var(--text);
  font-size: 12.5px;
}
.category-search-empty span { font-size: 11px; }

@media (max-width: 700px) {
  .category-picker-hint {
    justify-content: flex-start;
    margin-top: -8px;
  }
}


@media (max-width: 900px) and (min-width: 769px) {
  .investment-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .header-right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header-right #userEmail { grid-column: 1 / -1; }
  .header-right .btn-logout { width: 100%; min-height: 40px; }
  .header-profile-badge { min-height: 0; }
  .header-profile-badge-summary { align-items: flex-start; }
  .header-profile-image-wrap { width: 76px; height: 62px; }
}



/* ── LEGAL Y PRIVACIDAD ── */
.registration-legal-notice {
  margin: 4px 0 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.registration-legal-notice p {
  margin: 0 0 10px;
  text-align: left;
  font-size: 11px;
  line-height: 1.55;
}
.registration-legal-notice a,
.login-legal-links a,
.footer-legal-links a,
.demo-legal-links a,
.legal-page a { color: var(--accent); }
.legal-acceptance-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 9px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  cursor: pointer;
}
.legal-acceptance-row input { margin-top: 3px; accent-color: var(--accent); }
.login-legal-links,
.footer-legal-links,
.demo-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
.login-legal-links {
  justify-content: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
}
.footer-legal-links { margin-top: 10px; font-size: 11px; }
.footer-release-tools,
.footer-social-links {
  display: flex;
  align-items: center;
}
.footer-release-tools { gap: 14px; }
.footer-social-links { gap: 12px; font-size: 11px; }
.footer-social-links a { color: var(--muted); text-decoration: none; }
.footer-social-links a:hover,
.footer-social-links a:focus-visible { outline: none; color: var(--accent); text-decoration: underline; }
.footer-social-links a { font-weight: 700; }
.demo-legal-links {
  justify-content: center;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
  font-size: 11px;
}
.login-legal-links a,
.footer-legal-links a,
.demo-legal-links a { text-decoration: none; }
.login-legal-links a:hover,
.footer-legal-links a:hover,
.demo-legal-links a:hover { text-decoration: underline; }
.legal-placeholder { color: var(--yellow) !important; font-weight: 700; }

.legal-page { scroll-behavior: smooth; }
.legal-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  grid-template-columns: none;
  justify-content: space-between;
  align-items: center;
  padding: 13px 24px;
  background: var(--surface);
}
.legal-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text) !important;
  text-decoration: none;
  font-size: 17px;
  font-weight: 800;
}
.legal-brand .logo {
  width: 34px;
  height: 34px;
  margin: 0;
}
.legal-header-actions { display: flex; align-items: center; gap: 10px; }
.legal-back-link {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 650;
}
.legal-layout {
  max-width: 1280px;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 28px;
  padding: 32px 24px 64px;
}
.legal-sidebar {
  position: sticky;
  top: 84px;
  align-self: start;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.legal-sidebar h1 { font-size: 20px; line-height: 1.2; margin-bottom: 7px; }
.legal-sidebar > p { color: var(--muted); font-size: 12px; line-height: 1.5; margin-bottom: 18px; }
.legal-nav { display: flex; flex-direction: column; gap: 5px; }
.legal-nav a {
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
}
.legal-nav a:hover,
.legal-nav a.active { background: var(--surface2); color: var(--text); }
.legal-content { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.legal-completion-warning {
  padding: 14px 16px;
  border: 1px solid rgba(245, 158, 11, .48);
  border-radius: 10px;
  background: var(--yellow-dim);
  color: var(--text);
  font-size: 13px;
}
.legal-completion-warning[hidden] { display: none; }
.legal-completion-warning code { color: var(--yellow); }
.legal-document {
  scroll-margin-top: 82px;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 35px rgba(0,0,0,.08);
}
.legal-document-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 15px;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.legal-document-heading > span { font-size: 25px; font-weight: 800; letter-spacing: -.4px; }
.legal-document-heading small { color: var(--muted); white-space: nowrap; }
.legal-document h2 { font-size: 16px; margin: 26px 0 9px; }
.legal-document h2:first-of-type { margin-top: 0; }
.legal-document p,
.legal-document li { color: var(--muted); font-size: 14px; line-height: 1.7; }
.legal-document p + p { margin-top: 10px; }
.legal-document ul { margin: 8px 0 0 20px; display: grid; gap: 6px; }
.legal-document strong { color: var(--text); }
.legal-document code {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
}
.legal-data-list { display: grid; gap: 8px; }
.legal-data-list > div {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.legal-data-list dt { color: var(--muted); font-size: 12px; font-weight: 650; }
.legal-data-list dd { color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.legal-table-wrap { overflow-x: auto; margin-top: 12px; }
.legal-table { width: 100%; border-collapse: collapse; min-width: 660px; }
.legal-table th,
.legal-table td { padding: 12px 13px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.legal-table th { background: var(--surface2); color: var(--text); font-size: 12px; }
.legal-table td { color: var(--muted); font-size: 12px; line-height: 1.55; }
.legal-footer { margin-top: 0; padding-bottom: 36px; }
.legal-footer a { text-decoration: none; }

@media (max-width: 860px) {
  .legal-layout { grid-template-columns: 1fr; padding-top: 20px; }
  .legal-sidebar { position: static; }
  .legal-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .legal-header { padding: 10px 12px; }
  .legal-back-link { display: none; }
  .legal-layout { padding: 14px 12px 40px; }
  .legal-sidebar { padding: 16px; }
  .legal-nav { grid-template-columns: 1fr; }
  .legal-document { padding: 20px 16px; }
  .legal-document-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .legal-document-heading > span { font-size: 21px; }
  .legal-data-list > div { grid-template-columns: 1fr; gap: 3px; }
  .footer-legal-links { justify-content: center; }
}

/* ── CUENTAS Y ENRUTADO DE SALDOS ── */
.field-help {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
}
.account-select-context {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 16px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}
.account-select-context.is-empty { opacity: .82; }
.account-select-context > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.account-context-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.05);
}
.movement-account-field,
.account-tool-form-grid .field { min-width: 0; }
.movement-account-field select,
.account-tool-form-grid select {
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.movement-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.movement-account-filter select {
  min-width: 180px;
  height: 36px;
  padding: 0 34px 0 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
.movement-account-reference { color: var(--accent); opacity: .82; }
.balance-account-breakdown {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.balance-account-breakdown > span {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.accounts-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.accounts-summary-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}
.accounts-summary-card span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .45px;
}
.accounts-summary-card strong {
  display: block;
  margin-top: 6px;
  font-size: 21px;
  line-height: 1.2;
}
.accounts-workspace { display: grid; gap: 0; }
.account-form-grid { grid-template-columns: 1.35fr 1.25fr .9fr .9fr .55fr; }
.account-color-field input[type="color"] {
  width: 100%;
  min-height: 42px;
  padding: 4px;
  cursor: pointer;
}
.account-form-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: -2px 0 18px;
}
.check-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.check-option input { accent-color: var(--accent); }
.account-opening-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
.account-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 30px;
}
.account-tool-panel { margin-bottom: 0; }
.account-tool-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-tool-concept { grid-column: 1 / -1; }
.account-tool-description {
  margin: -8px 0 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.account-balance-hint { color: var(--accent); }
.accounts-list-header { margin-top: 3px; }
.accounts-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 28px;
}
.account-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.account-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--account-color, var(--accent));
}
.account-card.is-archived { opacity: .66; }
.account-card-heading {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.account-card-heading h3 { font-size: 16px; line-height: 1.25; }
.account-card-heading p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.account-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--account-color, var(--accent)) 45%, var(--border));
  border-radius: 11px;
  background: color-mix(in srgb, var(--account-color, var(--accent)) 12%, var(--surface2));
  font-size: 20px;
}
.account-status-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.account-status {
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .35px;
  text-transform: uppercase;
}
.account-status.primary { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent); }
.account-status.investing { border-color: color-mix(in srgb, var(--yellow) 55%, var(--border)); color: var(--yellow); }
.account-status.archived { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); color: var(--red); }
.account-balances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.account-balances > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.account-balances span { display: block; color: var(--muted); font-size: 9.5px; line-height: 1.25; }
.account-balances strong { display: block; margin-top: 4px; font-size: 13px; overflow-wrap: anywhere; }
.account-opening-note { color: var(--muted); font-size: 10.5px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.account-actions button,
.account-operation-actions button {
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface2);
  color: var(--muted);
  font: inherit;
  font-size: 10.5px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.account-actions button:hover,
.account-operation-actions button:hover { border-color: var(--accent); color: var(--text); }
.account-actions button.danger:hover,
.account-operation-actions button.danger:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }
.account-operations-box { margin-top: 0; }
.account-operation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.account-operation-row:last-child { border-bottom: 0; }
.account-operation-row > div:first-child { min-width: 0; }
.account-operation-row strong,
.account-operation-row span { display: block; }
.account-operation-row strong { font-size: 12px; }
.account-operation-row span { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.account-operation-row > b { font-size: 12px; white-space: nowrap; }
.account-operation-row > b.negative { color: var(--red); }
.account-operation-actions { display: flex; gap: 5px; }

.investment-account-routing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: -3px 0 20px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--yellow) 35%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--yellow-dim) 55%, transparent);
}
.investment-account-routing small { display: block; margin-top: 5px; color: var(--muted); font-size: 10.5px; }
.investment-account-routing select:disabled { opacity: .75; cursor: not-allowed; }

@media (max-width: 980px) {
  .movement-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .accounts-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .account-tools-grid,
  .accounts-list { grid-template-columns: 1fr; }
  .account-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .movement-account-filter { width: 100%; }
  .movement-account-filter select { width: 100%; }
}

@media (max-width: 560px) {
  .movement-form-grid,
  .account-form-grid,
  .account-opening-fields,
  .account-tool-form-grid,
  .investment-account-routing { grid-template-columns: 1fr; }
  .accounts-summary { grid-template-columns: 1fr 1fr; }
  .account-balances { grid-template-columns: 1fr; }
  .account-operation-row { grid-template-columns: minmax(0, 1fr) auto; }
  .account-operation-actions { grid-column: 1 / -1; }
}
.balance-account-breakdown b {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
}

/* ── DEUDAS Y FINANCIACIONES ── */
.summary { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.card.debts .amount { color: var(--red); }
.form-grid > .field { min-width: 0; }
.field select {
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 34px;
}
.field-note { color: var(--muted); font-size: 10px; line-height: 1.35; }
.debt-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.debt-key-field input { border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.debt-account-field select { max-width: 100%; }
.field[hidden] { display: none !important; }
.debt-optional-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.debt-advanced-details,
.debt-secondary-operations {
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface2) 72%, transparent);
}
.debt-advanced-details summary,
.debt-secondary-operations > summary {
  cursor: pointer;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  user-select: none;
}
.debt-tools-area[hidden] { display: none !important; }
.debt-tools-area { display: grid; gap: 14px; margin-bottom: 30px; }
.debt-payment-panel { margin-bottom: 0; border-color: color-mix(in srgb, var(--red) 28%, var(--border)); }
.debt-tool-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.debt-tool-badge {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--red) 45%, var(--border));
  border-radius: 999px;
  color: var(--red);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .35px;
  text-transform: uppercase;
}
.debt-payment-grid { grid-template-columns: 1.2fr 1.2fr .85fr .85fr .75fr; }
.debt-secondary-operations { margin-top: 0; }
.debt-secondary-operations > p { margin: 8px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.debt-secondary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.debt-secondary-grid .form-panel { margin: 0; }
.debt-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.debt-card { gap: 14px; }
.debt-card-heading > div { min-width: 0; }
.debt-card-heading h3,
.debt-card-heading p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-status.debt-status { border-color: color-mix(in srgb, var(--red) 50%, var(--border)); color: var(--red); }
.debt-progress-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--red) 24%, var(--border));
  border-radius: 11px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--red-dim) 55%, transparent), var(--bg));
}
.debt-progress-ring {
  --debt-progress: 0;
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: conic-gradient(var(--red) calc(var(--debt-progress) * 1%), color-mix(in srgb, var(--green) 36%, var(--border)) 0);
  isolation: isolate;
}
.debt-progress-ring::after {
  content: '';
  position: absolute;
  inset: 7px;
  z-index: -1;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
}
.debt-progress-ring.is-credit { background: conic-gradient(var(--yellow) calc(var(--debt-progress) * 1%), var(--border) 0); }
.debt-progress-ring.is-empty { background: var(--border); }
.debt-progress-ring strong { font-size: 19px; line-height: 1; }
.debt-progress-ring span { margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .35px; }
.debt-progress-copy { min-width: 0; }
.debt-progress-copy > span { display: block; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .35px; text-transform: uppercase; }
.debt-progress-copy > strong { display: block; margin-top: 3px; font-size: 22px; line-height: 1.15; overflow-wrap: anywhere; }
.debt-progress-copy > small { display: block; margin-top: 5px; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.debt-progress-track { height: 7px; margin-top: 11px; overflow: hidden; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); }
.debt-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--accent)); }
.debt-progress-track.is-credit span { background: linear-gradient(90deg, var(--yellow), var(--red)); }
.debt-quick-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.debt-quick-facts > div { min-width: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.debt-quick-facts span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .35px; }
.debt-quick-facts strong { display: block; margin-top: 4px; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.debt-primary-actions { align-items: center; }
.account-actions button.debt-action-primary { border-color: color-mix(in srgb, var(--red) 52%, var(--border)); background: var(--red-dim); color: var(--text); }
.account-actions button.debt-action-secondary { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); color: var(--accent); }
.debt-card-menu { position: relative; }
.debt-card-menu > summary {
  list-style: none;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface2);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 650;
  cursor: pointer;
}
.debt-card-menu > summary::-webkit-details-marker { display: none; }
.debt-card-menu[open] { flex-basis: 100%; }
.debt-card-menu-popover {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
  margin-top: 7px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
}
.debt-card-menu-popover button { text-align: left; }
.debt-next-payment { font-size: 15px !important; }
.debt-disbursement-button { background: var(--accent); }
.debt-adjustment-button { background: var(--purple); }

@media (max-width: 1180px) {
  .summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .debt-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .debt-payment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .debt-form-grid, .debt-optional-grid, .debt-payment-grid, .debt-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .debt-secondary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .summary { grid-template-columns: 1fr; }
  .debt-form-grid, .debt-optional-grid, .debt-payment-grid, .debt-tool-grid { grid-template-columns: 1fr; }
  .debt-tool-heading { display: block; }
  .debt-tool-badge { display: inline-block; margin-top: 8px; }
  .debt-progress-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .debt-progress-copy { width: 100%; }
  .debt-quick-facts { grid-template-columns: 1fr; }
}

/* ── PATRIMONIO Y NAVEGACIÓN ── */
.tabs-nav { justify-content: center; }
.tab-btn { min-width: 0; padding-inline: 20px; }

.summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card.patrimony-assets .amount { color: var(--green); }
.card.wealth { grid-column: span 2; }
.card label { overflow: hidden; text-overflow: ellipsis; }

.analysis-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.patrimony-form-heading,
.patrimony-card-heading,
.patrimony-list-header > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.patrimony-form-heading h2,
.patrimony-list-header h2 { margin-bottom: 5px; }
.patrimony-list-header p { margin: 0; color: var(--muted); font-size: 11px; }
.patrimony-simple-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--green) 45%, var(--border));
  border-radius: 999px;
  color: var(--green);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .35px;
  text-transform: uppercase;
}
.patrimony-type-picker {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0;
}
.patrimony-type-option {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
  transition: transform .18s, border-color .18s, color .18s;
}
.patrimony-type-option:hover { transform: translateY(-2px); color: var(--text); }
.patrimony-type-option.active { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.patrimony-type-option img { display: block; width: 100%; aspect-ratio: 1.55; object-fit: cover; }
.patrimony-type-option span { display: block; min-height: 38px; padding: 7px 5px; font-size: 9.5px; font-weight: 750; line-height: 1.25; }
.patrimony-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.patrimony-name-field { grid-column: span 2; }
.patrimony-debt-field { grid-column: span 2; }
.patrimony-debt-preview {
  grid-column: span 2;
  align-self: end;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--orange) 30%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--orange-dim) 70%, var(--bg));
  color: var(--muted);
  font-size: 10.5px;
}
.patrimony-debt-preview[hidden] { display: none; }
.patrimony-debt-preview strong { margin-left: 4px; color: var(--text); }
.patrimony-net-summary strong { color: var(--purple); }

.patrimony-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.patrimony-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.patrimony-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 44%, var(--border)); }
.patrimony-card.is-highlighted { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.patrimony-card-image { position: relative; height: 150px; overflow: hidden; background: var(--surface2); }
.patrimony-card-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.72)); }
.patrimony-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.patrimony-card-image > span { position: absolute; z-index: 1; left: 14px; bottom: 12px; color: #fff; font-size: 11px; font-weight: 800; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.patrimony-card-body { padding: 15px; }
.patrimony-card-heading > div:first-child { min-width: 0; }
.patrimony-card-heading h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.patrimony-card-heading p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.patrimony-card-actions { flex: 0 0 auto; display: flex; gap: 5px; }
.patrimony-card-actions button,
.patrimony-linked-debt button {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface2);
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
}
.patrimony-card-actions button:hover,
.patrimony-linked-debt button:hover { color: var(--accent); border-color: var(--accent); }
.patrimony-card-actions button.danger:hover { color: var(--red); border-color: var(--red); }
.patrimony-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 14px 0; }
.patrimony-values > div { min-width: 0; padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.patrimony-values span { display: block; min-height: 25px; color: var(--muted); font-size: 8.5px; line-height: 1.25; text-transform: uppercase; letter-spacing: .3px; }
.patrimony-values strong { display: block; margin-top: 4px; overflow-wrap: anywhere; font-size: 14px; }
.patrimony-net-value strong { color: var(--purple); }
.patrimony-linked-debt { padding: 11px; border: 1px solid color-mix(in srgb, var(--orange) 28%, var(--border)); border-radius: 9px; background: color-mix(in srgb, var(--orange-dim) 52%, var(--bg)); }
.patrimony-linked-debt > div:first-child { display: flex; justify-content: space-between; gap: 12px; min-width: 0; }
.patrimony-linked-debt > div:first-child span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10.5px; }
.patrimony-linked-debt > div:first-child strong { flex: 0 0 auto; font-size: 10.5px; }
.patrimony-linked-debt small { display: block; margin-top: 6px; color: var(--muted); font-size: 9.5px; }
.patrimony-linked-debt button { margin-top: 8px; }
.patrimony-linked-debt.is-empty { color: var(--muted); font-size: 10px; border-style: dashed; background: var(--bg); }
.patrimony-debt-progress { height: 6px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: var(--border); }
.patrimony-debt-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--yellow)); }
.patrimony-history { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 9px; }
.patrimony-history summary { cursor: pointer; color: var(--muted); font-size: 10px; font-weight: 700; }
.patrimony-history > div { display: grid; gap: 5px; margin-top: 8px; }
.patrimony-history span { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.patrimony-history strong { color: var(--text); }
.debt-asset-field select { max-width: 100%; }
.account-actions button.debt-asset-action { border-color: color-mix(in srgb, var(--teal) 42%, var(--border)); color: var(--teal); }

@media (max-width: 1020px) {
  .patrimony-type-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .patrimony-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card.wealth { grid-column: span 1; }
}
@media (max-width: 820px) {
  .patrimony-list { grid-template-columns: 1fr; }
  .analysis-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .tabs-nav { justify-content: flex-start; }
  .patrimony-type-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .patrimony-form-grid { grid-template-columns: 1fr; }
  .patrimony-name-field,
  .patrimony-debt-field,
  .patrimony-debt-preview { grid-column: auto; }
  .patrimony-values { grid-template-columns: 1fr; }
  .patrimony-values span { min-height: 0; }
}
@media (max-width: 520px) {
  .summary { grid-template-columns: 1fr; }
  .analysis-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .patrimony-card-image { height: 130px; }
}


/* ── AJUSTES DE INTERFAZ ── */
.summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}
.summary-row {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.summary-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.summary-position { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card.wealth { grid-column: auto; }
.card.patrimony-assets .amount { color: var(--teal); }
.card.debts .amount { color: var(--orange); }

.future-placeholder {
  min-height: 360px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 48px 24px;
  border: 1px dashed color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: 14px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 5%, var(--surface)), var(--surface));
  text-align: center;
}
.future-placeholder-icon { font-size: 38px; line-height: 1; }
.future-placeholder-label {
  margin-top: 6px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
}
.future-placeholder h2 { font-size: 24px; }
.future-placeholder p { max-width: 440px; color: var(--muted); font-size: 13px; }

@media (max-width: 900px) {
  .summary-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .summary-position { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .summary-flow { grid-template-columns: minmax(0, 1fr); }
  .future-placeholder { min-height: 280px; padding: 36px 18px; }
}

/* ── PLANIFICACIÓN Y PROYECCIONES ── */
#planningModuleRoot, #evolutionProjectionRoot { display: flex; flex-direction: column; gap: 22px; }
.evolution-section-tabs { margin-bottom: 22px; }
#evolutionHistorySection[hidden], #evolutionProjectionRoot[hidden] { display: none !important; }
.future-section-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.future-section-tab {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.future-section-tab > span:first-child { font-size: 22px; line-height: 1; }
.future-section-tab > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.future-section-tab strong { color: inherit; font-size: 14px; }
.future-section-tab small { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.future-section-tab:hover { background: var(--surface2); color: var(--text); }
.future-section-tab.active { border-color: rgba(88, 166, 255, .42); background: rgba(88, 166, 255, .1); color: var(--accent); }
.future-section { display: flex; flex-direction: column; gap: 20px; }
.future-section-header,
.future-panel-title,
.future-card-heading,
.future-form-actions,
.future-card-actions,
.future-chart-legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.future-section-header { align-items: flex-end; padding: 2px 2px 0; }
.future-section-header > div:first-child { max-width: 720px; }
.future-section-header h2 { margin: 2px 0 5px; font-size: 24px; letter-spacing: -.35px; }
.future-section-header p,
.future-panel-title p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.future-eyebrow,
.future-card-kicker {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.future-month-control { width: 190px; flex: 0 0 190px; }
.future-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.future-summary-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}
.future-summary-card span { display: block; color: var(--muted); font-size: 11px; }
.future-summary-card strong { display: block; overflow: hidden; margin: 3px 0 1px; color: var(--text); font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.future-summary-card small { color: var(--muted); font-size: 10px; }
.future-summary-card strong.negative,
.future-budget-values strong.negative { color: var(--red); }
.future-layout-two {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(290px, .85fr);
  align-items: start;
  gap: 16px;
}
.future-list-panel,
.future-form-panel,
.future-projection-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.future-form-panel { display: flex; flex-direction: column; gap: 13px; position: sticky; top: 14px; }
.future-panel-title { align-items: flex-start; margin-bottom: 14px; }
.future-panel-title h3 { margin: 0 0 3px; font-size: 16px; }
.future-card-list { display: flex; flex-direction: column; gap: 10px; }
.future-budget-card,
.future-goal-card {
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.future-budget-card.future-state-warning { border-color: rgba(245, 158, 11, .5); }
.future-budget-card.future-state-exceeded,
.future-goal-card.overdue { border-color: rgba(248, 81, 73, .5); }
.future-goal-card.completed { border-color: rgba(63, 185, 80, .5); }
.future-card-heading { align-items: flex-start; }
.future-card-heading h4 { margin-top: 2px; font-size: 14px; }
.future-status-pill {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}
.future-progress-track { height: 7px; margin: 13px 0; overflow: hidden; border-radius: 999px; background: var(--surface2); }
.future-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--purple)); }
.future-state-warning .future-progress-track span { background: var(--yellow); }
.future-state-exceeded .future-progress-track span,
.future-goal-card.overdue .future-progress-track span { background: var(--red); }
.future-goal-card.completed .future-progress-track span { background: var(--green); }
.future-budget-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.future-budget-values span { display: flex; flex-direction: column; }
.future-budget-values small,
.future-goal-meta,
.future-card-note { color: var(--muted); font-size: 10px; }
.future-budget-values strong { margin-top: 2px; font-size: 13px; }
.future-card-actions { justify-content: flex-end; margin-top: 13px; }
.btn-primary,
.btn-secondary,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .18s, border-color .18s, background .18s, color .18s;
}
.btn-primary { border-color: transparent; background: linear-gradient(135deg, #1f6feb, #58a6ff); color: #fff; }
.btn-secondary { background: transparent; color: var(--muted); }
.btn-danger { background: transparent; color: var(--muted); }
.btn-primary:hover { opacity: .88; }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: rgba(88, 166, 255, .08); }
.btn-danger:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }
.btn-small { padding: 6px 9px; font-size: 10px; }
.future-form-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 2px; }
.future-empty { padding: 42px 20px; border: 1px dashed var(--border); border-radius: 10px; background: var(--bg); }
.future-empty strong { display: block; color: var(--text); }
.future-empty p { margin-top: 4px; font-size: 11px; }
.future-goal-amount { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.future-goal-amount strong { font-size: 20px; }
.future-goal-amount span { color: var(--muted); font-size: 11px; }
.future-goal-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; }
.future-card-note { margin-top: 8px; }
.future-scenario-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.future-scenario-card { padding: 16px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.future-scenario-card span { font-size: 11px; font-weight: 700; }
.future-scenario-card strong { display: block; margin: 3px 0; font-size: 22px; }
.future-scenario-card small { color: var(--muted); font-size: 10px; }
.future-scenario-card.conservative span { color: var(--red); }
.future-scenario-card.base span { color: var(--accent); }
.future-scenario-card.optimistic span { color: var(--green); }
.future-projection-panel { padding-bottom: 10px; }
.future-chart-legend { justify-content: flex-end; flex-wrap: wrap; font-size: 10px; }
.future-chart-legend span::before { content: ''; display: inline-block; width: 12px; height: 3px; margin-right: 5px; border-radius: 999px; vertical-align: middle; }
.future-chart-legend .conservative::before { background: var(--red); }
.future-chart-legend .base::before { background: var(--accent); }
.future-chart-legend .optimistic::before { background: var(--green); }
.future-chart-wrap { overflow-x: auto; }
.future-projection-chart { display: block; width: 100%; min-width: 620px; height: auto; }
.future-chart-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; }
.future-chart-label { fill: var(--muted); font-size: 9px; }
.future-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.future-line.conservative { stroke: var(--red); }
.future-line.base { stroke: var(--accent); stroke-width: 3.5; }
.future-line.optimistic { stroke: var(--green); }
.future-form-grid-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.future-checkbox { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 11px; cursor: pointer; }
.future-checkbox input { margin-top: 3px; accent-color: var(--accent); }
.future-scenario-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.future-scenario-inputs > div { padding: 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); }
.future-scenario-inputs strong { display: block; margin-bottom: 7px; font-size: 11px; }
.future-scenario-inputs label { display: grid; grid-template-columns: 1fr 72px; align-items: center; gap: 8px; margin-top: 6px; color: var(--muted); font-size: 10px; }
.future-scenario-inputs input { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.future-projection-settings-layout { grid-template-columns: minmax(0, 1.1fr) minmax(310px, .9fr); }
.future-assumption-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.future-assumption-list span { display: flex; min-width: 0; flex-direction: column; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.future-assumption-list small { color: var(--muted); font-size: 10px; }
.future-assumption-list strong { margin: 2px 0; font-size: 15px; }
.future-assumption-list em { overflow: hidden; color: var(--accent); font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.future-projection-table { margin-top: 14px; }
.future-projection-table summary { padding: 10px 0; color: var(--accent); font-size: 11px; font-weight: 700; cursor: pointer; }
.future-projection-table .table-wrap { overflow-x: auto; border-radius: 8px; }
.future-projection-table table { min-width: 600px; }
.future-projection-table th,
.future-projection-table td { padding: 9px 10px; font-size: 10px; }

@media (max-width: 900px) {
  .future-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .future-layout-two,
  .future-projection-settings-layout { grid-template-columns: 1fr; }
  .future-form-panel { position: static; }
}

@media (max-width: 650px) {
  .future-section-tabs { grid-template-columns: 1fr; }
  .future-section-tab small { white-space: normal; }
  .future-section-header { align-items: stretch; flex-direction: column; }
  .future-month-control { width: 100%; flex-basis: auto; }
  .future-summary-grid,
  .future-scenario-grid,
  .future-form-grid-two,
  .future-scenario-inputs,
  .future-assumption-list { grid-template-columns: 1fr; }
  .future-budget-values { grid-template-columns: 1fr 1fr; }
  .future-panel-title { align-items: stretch; flex-direction: column; }
  .future-chart-legend { justify-content: flex-start; }
}

/* ── ACCESO PRIVADO EN ALPHA ── */
.private-login-mode .login-tabs,
.private-login-mode #registrationLegalNotice {
  display: none !important;
}

.demo-private-access {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .18s, background-color .18s, color .18s;
}

.demo-private-access:hover {
  border-color: var(--accent);
  background: var(--surface2);
  color: var(--text);
}

@media (max-width: 620px) {
  .demo-profile-dialog-actions {
    justify-content: space-between;
  }

  .demo-private-access {
    flex: 1;
  }
}

/* ── DATOS Y PRIVACIDAD DENTRO DE MI CUENTA 0.22.1 ── */
.btn-account-privacy {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface2);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s, background-color .18s, color .18s;
}

.btn-account-privacy:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
  color: var(--accent);
}

.privacy-center-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--modal-backdrop);
  backdrop-filter: blur(8px);
}

.privacy-center-dialog {
  width: min(1040px, 100%);
  max-height: min(860px, calc(100vh - 48px));
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 80px var(--panel-shadow);
  padding: 24px;
}

.privacy-center-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.privacy-center-kicker {
  display: inline-flex;
  margin-bottom: 5px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.privacy-center-header h2 {
  font-size: 25px;
  letter-spacing: -.4px;
}

.privacy-center-header p {
  max-width: 720px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.privacy-center-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
}

.privacy-center-close:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-dim);
}

.privacy-alpha-notice {
  margin-bottom: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(245, 158, 11, .42);
  border-radius: 10px;
  background: var(--yellow-dim);
}

.privacy-alpha-notice strong {
  color: var(--yellow);
  font-size: 13px;
}

.privacy-alpha-notice p {
  margin-top: 3px;
  color: var(--floating-text);
  font-size: 12px;
  line-height: 1.55;
}

.privacy-account-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.privacy-account-summary > div {
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
}

.privacy-account-summary span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .55px;
  text-transform: uppercase;
}

.privacy-account-summary strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.privacy-center-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.privacy-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg);
}

.privacy-card-export {
  border-color: rgba(88, 166, 255, .36);
}

.privacy-card-deletion {
  border-color: rgba(248, 81, 73, .36);
}

.privacy-card-roadmap {
  border-color: rgba(163, 113, 247, .32);
}

.privacy-card-heading {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 13px;
}

.privacy-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--accent);
  font-weight: 800;
}

.privacy-card h3 {
  font-size: 15px;
}

.privacy-card-heading p,
.privacy-helper,
.privacy-danger-note p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.privacy-card-heading p {
  margin-top: 2px;
}

.privacy-feature-list {
  display: grid;
  gap: 5px;
  margin: 0 0 14px 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.privacy-field {
  display: grid;
  gap: 6px;
  margin-bottom: 11px;
}

.privacy-field > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.privacy-field select,
.privacy-field textarea,
.privacy-field input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  outline: none;
}

.privacy-field select,
.privacy-field input {
  min-height: 39px;
  padding: 8px 10px;
}

.privacy-field textarea {
  min-height: 92px;
  padding: 9px 10px;
  resize: vertical;
}

.privacy-field select:focus,
.privacy-field textarea:focus,
.privacy-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(88, 166, 255, .12);
}

.privacy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.privacy-primary-button,
.privacy-secondary-button,
.privacy-danger-button {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.privacy-primary-button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.privacy-secondary-button {
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
}

.privacy-danger-button {
  border: 1px solid var(--red);
  background: var(--red-dim);
  color: var(--red);
}

.privacy-primary-button:hover,
.privacy-secondary-button:hover,
.privacy-danger-button:hover:not(:disabled) {
  filter: brightness(1.08);
}

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

.privacy-helper {
  margin-top: 10px;
}

.privacy-danger-note {
  margin-bottom: 12px;
  padding: 10px 11px;
  border-left: 3px solid var(--red);
  border-radius: 6px;
  background: var(--red-dim);
}

.privacy-danger-note strong {
  color: var(--red);
  font-size: 12px;
}

.privacy-check-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.privacy-check-row input {
  margin-top: 3px;
  accent-color: var(--accent);
}

.privacy-document-link {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.privacy-document-link:hover {
  text-decoration: underline;
}

body.privacy-center-open {
  overflow: hidden;
}

@media (max-width: 860px) {
  .header-right {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

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

@media (max-width: 620px) {
  .privacy-center-modal {
    align-items: stretch;
    padding: 0;
  }

  .privacy-center-dialog {
    max-height: 100vh;
    border: 0;
    border-radius: 0;
    padding: 18px 14px 28px;
  }

  .privacy-center-header h2 {
    font-size: 21px;
  }

  .privacy-account-summary {
    grid-template-columns: 1fr;
  }

  .privacy-actions > button {
    width: 100%;
  }

  .btn-account-privacy {
    width: 100%;
    min-height: 40px;
  }
}

/* ── MI CUENTA 0.22.1 ── */
.account-center-dialog {
  width: min(1100px, 100%);
}

.account-center-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg);
}

.account-center-tabs button {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.account-center-tabs button:hover {
  color: var(--text);
  background: var(--surface2);
}

.account-center-tabs button.active {
  color: var(--accent);
  background: var(--surface2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, var(--border));
}

.account-center-panel {
  display: none;
}

.account-center-panel.active {
  display: block;
}

.account-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.account-detail-list {
  display: grid;
  gap: 8px;
  margin-bottom: 15px;
}

.account-detail-list > div {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.account-detail-list span {
  color: var(--muted);
  font-size: 11px;
}

.account-detail-list strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.account-detail-list button {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface2);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.account-logout-button {
  margin-left: auto;
}

.account-status.investment-default {
  border-color: color-mix(in srgb, var(--purple) 55%, var(--border));
  color: var(--purple);
}

@media (max-width: 860px) {
  .account-settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .account-center-tabs {
    grid-template-columns: 1fr;
  }

  .account-detail-list > div {
    grid-template-columns: 1fr auto;
  }

  .account-detail-list span {
    grid-column: 1 / -1;
  }

  .account-logout-button {
    margin-left: 0;
  }
}

/* ── CHANGELOG HISTÓRICO 0.23.0 ── */
.footer-version-area {
  position: relative;
  flex: 0 0 auto;
}
footer .version-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  margin: 0;
  font: inherit;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
footer .version-trigger::after {
  content: '⌃';
  display: inline-block;
  color: var(--muted);
  font-size: 11px;
  transform: translateY(1px);
  transition: transform .16s ease, color .16s ease;
}
footer .version-trigger:hover,
footer .version-trigger:focus-visible,
.footer-version-area.is-open .version-trigger {
  border-color: var(--accent);
  background: rgba(88, 166, 255, .1);
  color: var(--text);
}
footer .version-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.footer-version-area.is-open .version-trigger::after {
  color: var(--accent);
  transform: translateY(1px) rotate(180deg);
}
.changelog-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  z-index: 1200;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(640px, calc(100vw - 48px));
  max-height: min(72vh, 720px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48);
}
.changelog-panel[hidden] { display: none; }
.changelog-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(88, 166, 255, .11), transparent 65%);
}
.changelog-header h2 {
  margin: 3px 0 4px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.2px;
}
.changelog-header p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.changelog-eyebrow {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .75px;
  text-transform: uppercase;
}
.changelog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.changelog-close:hover,
.changelog-close:focus-visible {
  border-color: var(--accent);
  color: var(--text);
}
.changelog-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.changelog-intro {
  margin: 0;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
.changelog-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 10px;
}
.changelog-release {
  border: 1px solid transparent;
  border-radius: 9px;
}
.changelog-release + .changelog-release { margin-top: 5px; }
.changelog-release[open] {
  border-color: var(--border);
  background: var(--bg);
}
.changelog-release summary {
  display: grid;
  grid-template-columns: minmax(92px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: background .14s ease;
}
.changelog-release summary::-webkit-details-marker { display: none; }
.changelog-release summary::after {
  content: '⌄';
  grid-column: 3;
  grid-row: 1;
  color: var(--muted);
  font-size: 13px;
  transition: transform .15s ease;
}
.changelog-release summary:hover { background: var(--surface2); }
.changelog-release summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.changelog-release[open] summary::after { transform: rotate(180deg); }
.changelog-release-version {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.changelog-release-title {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.changelog-current-badge {
  grid-column: 3;
  grid-row: 1;
  margin-right: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(63, 185, 80, .13);
  color: var(--green);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .35px;
  text-transform: uppercase;
}
.changelog-release ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0 18px 14px 42px;
}
.changelog-release li {
  padding-left: 2px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}
.changelog-release li::marker { color: var(--accent); }

@media (max-width: 600px) {
  .footer-version-area { position: static; }
  .changelog-panel {
    position: fixed;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100dvh - 24px);
    border-radius: 13px;
  }
  .changelog-header { padding: 17px 16px 14px; }
  .changelog-header h2 { font-size: 18px; }
  .changelog-intro { padding: 12px 16px; }
  .changelog-list { padding: 8px; }
  .changelog-release summary {
    grid-template-columns: minmax(78px, auto) minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px;
  }
  .changelog-release-title { white-space: normal; }
  .changelog-current-badge { display: none; }
  .changelog-release ul { padding: 0 14px 13px 34px; }
}

/* Progressive guidance and contextual help — v0.25.0 */
[hidden] { display: none !important; }

.help-tip {
  display: inline-grid;
  width: 18px;
  height: 18px;
  margin: 0 2px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(88, 166, 255, .42);
  border-radius: 50%;
  background: rgba(88, 166, 255, .09);
  color: var(--accent);
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  vertical-align: text-bottom;
  cursor: help;
}
.help-tip:hover,
.help-tip:focus-visible,
.help-tip[aria-expanded="true"] { border-color: var(--accent); background: rgba(88, 166, 255, .18); outline: none; }
.context-help-tooltip {
  position: fixed;
  z-index: 10050;
  width: min(300px, calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid rgba(88, 166, 255, .42);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .34);
  color: var(--text);
  font-size: 11.5px;
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}
.context-help-tooltip.visible { opacity: 1; visibility: visible; transform: translateY(0); }

.module-guide {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 1fr);
  gap: 18px 28px;
  padding: 22px;
  border: 1px solid rgba(88, 166, 255, .25);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(88, 166, 255, .10), rgba(88, 166, 255, .025));
}
.persistent-disclosure-toggle {
  display: flex;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.persistent-disclosure-toggle:hover,
.persistent-disclosure-toggle:focus-visible { border-color: var(--accent); outline: none; }
.persistent-disclosure-chevron { flex: 0 0 auto; color: var(--accent); transition: transform .16s ease; }
.persistent-disclosure.is-collapsed > .persistent-disclosure-toggle .persistent-disclosure-chevron { transform: rotate(-90deg); }
.persistent-disclosure.is-collapsed > :not(.persistent-disclosure-toggle) { display: none !important; }
.summary > .persistent-disclosure-toggle { margin-bottom: 1px; }
.summary.is-collapsed { gap: 0; }
.module-guide-copy { min-width: 0; }
.module-guide-kicker,
.module-guide-copy .module-guide-kicker {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .75px;
  text-transform: uppercase;
}
.module-guide-copy h2 { margin: 5px 0 7px; color: var(--text); font-size: clamp(19px, 2.3vw, 27px); line-height: 1.15; letter-spacing: -.45px; }
.module-guide-copy p { max-width: 700px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.module-guide-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; align-self: center; }
.module-guide-steps > span { display: grid; grid-template-columns: 25px 1fr; gap: 2px 7px; align-content: start; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: rgba(13, 17, 23, .38); }
.module-guide-steps b { display: grid; grid-row: 1 / span 2; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: rgba(88, 166, 255, .16); color: var(--accent); font-size: 11px; }
.module-guide-steps strong { color: var(--text); font-size: 11px; line-height: 1.3; }
.module-guide-steps small { color: var(--muted); font-size: 9.5px; line-height: 1.4; }
.module-guide-actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 9px; align-items: center; }
.module-primary-action { min-height: 39px; padding: 9px 15px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: #06111f; font-weight: 800; cursor: pointer; }
.module-primary-action:hover { filter: brightness(1.08); transform: translateY(-1px); }
.module-guide > .module-primary-action { grid-column: 1 / -1; justify-self: start; }
.compact-module-guide { padding: 19px 20px; }
.standalone-module-guide { margin-bottom: 22px; }

.progressive-form-panel {
  position: static !important;
  gap: 15px;
  padding: 19px;
  border: 1px solid rgba(88, 166, 255, .36);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(88, 166, 255, .055), var(--surface));
  box-shadow: 0 12px 34px rgba(0, 0, 0, .14);
}
.progressive-form-heading { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.progressive-form-heading h2,
.progressive-form-heading h3 { margin: 3px 0 5px; color: var(--text); font-size: 19px; }
.progressive-form-heading p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.panel-close-button { display: grid; flex: 0 0 31px; width: 31px; height: 31px; padding: 0; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); color: var(--muted); font-size: 20px; cursor: pointer; }
.panel-close-button:hover { border-color: var(--muted); color: var(--text); }
.form-step-label { display: inline-grid; width: 20px; height: 20px; margin-right: 4px; place-items: center; border-radius: 50%; background: rgba(88, 166, 255, .16); color: var(--accent); font-size: 10px; font-weight: 800; }
.progressive-options,
.nested-progressive-options,
.module-secondary-section { overflow: hidden; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.progressive-options > summary,
.nested-progressive-options > summary,
.module-secondary-section > summary { list-style: none; cursor: pointer; }
.progressive-options > summary::-webkit-details-marker,
.nested-progressive-options > summary::-webkit-details-marker,
.module-secondary-section > summary::-webkit-details-marker { display: none; }
.progressive-options > summary,
.nested-progressive-options > summary { padding: 12px 14px; color: var(--text); font-size: 11.5px; font-weight: 750; }
.progressive-options > summary::after,
.nested-progressive-options > summary::after { content: '⌄'; float: right; color: var(--muted); }
.progressive-options[open] > summary::after,
.nested-progressive-options[open] > summary::after { transform: rotate(180deg); }
.progressive-options > div,
.nested-progressive-options > div { padding: 0 14px 14px; }
.guided-note { margin: 0; padding: 11px 13px; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: rgba(88, 166, 255, .07); color: var(--muted); font-size: 11px; line-height: 1.55; }
.guided-note strong { color: var(--text); }
.progressive-form-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.section-helper { margin: -4px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.55; }

.module-secondary-section { background: var(--surface); }
.module-secondary-section > summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 16px; transition: background .14s ease; }
.module-secondary-section > summary:hover { background: var(--surface2); }
.module-secondary-section > summary > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.module-secondary-section > summary strong { color: var(--text); font-size: 13px; }
.module-secondary-section > summary small { color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.4; }
.module-secondary-section > summary > span:last-child { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; background: var(--surface2); color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.module-secondary-section > summary::after { content: '⌄'; color: var(--muted); font-size: 13px; }
.module-secondary-section[open] > summary { border-bottom: 1px solid var(--border); }
.module-secondary-section[open] > summary::after { transform: rotate(180deg); }
.module-secondary-content { display: flex; flex-direction: column; gap: 16px; padding: 16px; }

.simple-module-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.simple-module-summary > div { display: flex; min-width: 0; padding: 15px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); flex-direction: column; }
.simple-module-summary span { color: var(--muted); font-size: 10px; font-weight: 700; }
.simple-module-summary strong { margin: 4px 0 1px; color: var(--text); font-size: 22px; letter-spacing: -.35px; }
.simple-module-summary small { color: var(--muted); font-size: 9.5px; line-height: 1.4; }
.simple-list-panel { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.simple-position-list { display: flex; flex-direction: column; gap: 7px; }
.simple-position-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); }
.simple-position-row > div:first-child { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.simple-position-row > div:first-child strong { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.simple-position-row > div:first-child span { overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.simple-position-value { display: flex; flex-direction: column; align-items: flex-end; }
.simple-position-value small { color: var(--muted); font-size: 8.5px; }
.simple-position-value strong { color: var(--text); font-size: 13px; }
.compact-onboarding { min-height: 140px !important; }
.investment-simple-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.standalone-field-label { display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-size: 11px; font-weight: 700; }
.debt-basic-grid,
.patrimony-basic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

/* Planning: one obvious action first, detail second. */
.simplified-planning { gap: 16px; }
.simplified-section-header { display: flex; align-items: flex-end; justify-content: space-between; }
.simplified-section-header h3 { margin: 2px 0 0; color: var(--text); font-size: 20px; }
.budget-simple-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 17px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.budget-simple-hero > div:not(.future-progress-track):not(.module-guide-actions) { display: flex; min-width: 0; flex-direction: column; }
.budget-simple-hero > div > span { color: var(--muted); font-size: 10px; font-weight: 700; }
.budget-simple-hero > div > strong { margin: 4px 0 2px; color: var(--text); font-size: 24px; letter-spacing: -.4px; }
.budget-simple-hero > div > small { color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.budget-simple-main { padding: 0 14px; border-right: 1px solid var(--border); border-left: 1px solid var(--border); }
.budget-hero-progress { grid-column: 1 / -1; margin-top: 4px; }
.budget-simple-hero .module-guide-actions { margin-top: 2px; }
.planning-inline-form { margin: 0; }
.planning-detail-section .future-panel-title { align-items: center; }
.planning-goal-summary { max-width: 760px; }

/* Projections: base scenario is the default; complexity is opt-in. */
.simplified-projections { gap: 16px; }
.projection-simple-hero { display: grid; grid-template-columns: minmax(270px, .8fr) minmax(320px, 1.2fr); gap: 15px 24px; align-items: center; padding: 20px; border: 1px solid rgba(88, 166, 255, .3); border-radius: 14px; background: linear-gradient(135deg, rgba(88, 166, 255, .10), var(--surface)); }
.projection-hero-copy { display: flex; flex-direction: column; }
.projection-hero-copy > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.projection-hero-copy > strong { margin: 5px 0 1px; color: var(--text); font-size: clamp(30px, 5vw, 44px); letter-spacing: -1.1px; }
.projection-hero-copy > small { color: var(--green); font-size: 11px; font-weight: 750; }
.projection-hero-copy > small.negative { color: var(--red); }
.projection-horizon-control { display: flex; flex-direction: column; gap: 8px; }
.projection-horizon-control > span { color: var(--text); font-size: 11px; font-weight: 750; }
.projection-horizon-control > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.projection-horizon-control button { min-height: 36px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--muted); font-size: 10px; font-weight: 750; cursor: pointer; }
.projection-horizon-control button:hover { border-color: var(--muted); color: var(--text); }
.projection-horizon-control button.active { border-color: var(--accent); background: rgba(88, 166, 255, .15); color: var(--accent); }
.projection-warning { grid-column: 1 / -1; }
.projection-main-chart { padding: 17px; }
.projection-simple-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.projection-settings-section .future-projection-settings-layout { display: grid; grid-template-columns: minmax(270px, .7fr) minmax(440px, 1.3fr); align-items: start; }
.projection-settings-section .future-form-panel { position: static; }

@media (max-width: 1050px) {
  .module-guide { grid-template-columns: 1fr; }
  .module-guide-actions { grid-column: auto; }
  .projection-settings-section .future-projection-settings-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .module-guide-steps { grid-template-columns: 1fr; }
  .simple-module-summary,
  .budget-simple-hero,
  .projection-simple-summary { grid-template-columns: 1fr; }
  .budget-simple-main { padding: 10px 0; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .projection-simple-hero { grid-template-columns: 1fr; }
  .projection-warning { grid-column: auto; }
  .debt-basic-grid,
  .patrimony-basic-grid,
  .investment-simple-grid { grid-template-columns: 1fr !important; }
  .simple-position-row { grid-template-columns: minmax(0, 1fr) auto; }
  .simple-position-row > button { grid-column: 1 / -1; }
  .simplified-section-header { align-items: stretch; flex-direction: column; }
}

@media (max-width: 480px) {
  .module-guide,
  .compact-module-guide,
  .projection-simple-hero,
  .progressive-form-panel { padding: 15px; }
  .projection-horizon-control > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-secondary-section > summary { align-items: flex-start; }
  .module-secondary-section > summary > span:last-child { display: none; }
}

/* ── MOBILE WORKSPACE 0.25.0 ───────────────────────────────────────────────
   Compact, touch-first layout. Information remains available; dense areas
   become horizontal rails or two-column cards instead of long single stacks. */
html { scroll-padding-top: 66px; }
button, input, select, textarea, summary { touch-action: manipulation; }
.mobile-horizontal-scroller { scroll-behavior: smooth; }
.mobile-scroll-shell { overscroll-behavior-inline: contain; }

@media (pointer: coarse) {
  button,
  .tab-btn,
  .cat-pill,
  .subcat-pill,
  .pill-btn,
  .month-btn,
  summary { min-height: 42px; }
}

@media (max-width: 760px) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
    -webkit-text-size-adjust: 100%;
  }

  #appScreen > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 12px;
    padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  }
  #appScreen > header .header-spacer { display: none; }
  #appScreen > header .header-left {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-items: flex-start;
    min-width: 0;
    text-align: left;
  }
  #appScreen > header .brand-block { gap: 8px; min-width: 0; }
  #appScreen > header .logo { width: 34px; height: 34px; border-radius: 9px; }
  #appScreen > header h1 { overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
  #appScreen > header p { display: none; }
  #appScreen > header .header-right {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: repeat(2, auto);
    align-items: center;
    justify-items: end;
    width: auto;
    gap: 5px;
    margin: 0;
  }
  #appScreen > header #userEmail {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: min(46vw, 180px);
    overflow: hidden;
    color: var(--muted);
    font-size: 9.5px;
    line-height: 1.2;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
  }
  #appScreen > header .btn-account-privacy,
  #appScreen > header .btn-logout {
    width: auto;
    min-height: 34px;
    height: auto;
    padding: 7px 9px;
    font-size: 10.5px;
    line-height: 1.15;
    white-space: nowrap;
  }

  main { width: 100%; padding: 12px; }
  .header-profile-badge { min-height: 0; padding: 10px; margin-bottom: 12px; }
  .header-profile-badge-inner { gap: 9px; }
  .header-profile-badge-summary { gap: 9px; }
  .header-profile-image-wrap { width: 68px; height: 50px; }
  .header-profile-badge strong { font-size: 12px; }
  .header-profile-badge p { font-size: 10.5px; line-height: 1.4; }
  .btn-change-profile { min-height: 38px; padding: 8px 10px; }

  .tabs-nav {
    position: sticky;
    top: 0;
    z-index: 120;
    display: flex;
    gap: 2px;
    margin: 0 -12px 14px;
    padding: 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid rgba(48, 54, 61, .55);
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    scroll-padding-inline: 42%;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .tabs-nav::-webkit-scrollbar { display: none; }
  .tab-btn {
    flex: 0 0 auto;
    min-height: 47px;
    padding: 10px 13px 9px;
    border-radius: 0;
    font-size: 12px;
    scroll-snap-align: center;
  }

  .summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
  }
  .summary-row {
    display: grid;
    grid-auto-columns: minmax(148px, 44vw);
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 8px;
    padding: 1px 1px 5px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .summary-row::-webkit-scrollbar { display: none; }
  .summary-row > .card {
    min-width: 0;
    min-height: 76px;
    padding: 11px 12px;
    scroll-snap-align: start;
  }
  .summary-row > .card label {
    margin-bottom: 3px;
    padding-right: 13px;
    overflow: hidden;
    font-size: 9.5px;
    letter-spacing: .55px;
    text-overflow: ellipsis;
  }
  .summary-row > .card .amount { font-size: 18px; }
  .summary-row > .card .info-icon { top: 11px; right: 11px; }
  .summary-row > .card .tooltip-box {
    position: fixed;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
    max-width: none;
    transform: translateY(8px);
    white-space: normal;
  }
  .summary-row > .card .tooltip-box::after { display: none; }
  .summary-row > .card.tooltip-target:focus .tooltip-box,
  .summary-row > .card.tooltip-target:focus-within .tooltip-box {
    transform: translateY(0);
  }

  .module-guide,
  .compact-module-guide {
    gap: 13px;
    padding: 16px;
    border-radius: 12px;
  }
  .standalone-module-guide { margin-bottom: 15px; }
  .module-guide-copy h2 { margin: 4px 0 6px; font-size: 20px; line-height: 1.18; }
  .module-guide-copy p { font-size: 11.5px; line-height: 1.55; }
  .module-guide-steps {
    display: grid;
    grid-auto-columns: minmax(215px, 76vw);
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 8px;
    padding: 1px 1px 5px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .module-guide-steps::-webkit-scrollbar { display: none; }
  .module-guide-steps > span { min-height: 66px; scroll-snap-align: start; }
  .module-guide-actions { width: 100%; }
  .module-guide-actions > button,
  .module-guide > .module-primary-action { width: 100%; min-height: 43px; }

  .form-panel,
  .progressive-form-panel,
  .future-list-panel,
  .future-form-panel,
  .future-projection-panel,
  .simple-list-panel {
    padding: 14px;
    border-radius: 11px;
  }
  .form-panel { margin-bottom: 20px; }
  .form-panel h2 { margin-bottom: 14px; }
  .progressive-form-heading { gap: 10px; }
  .progressive-form-heading h2,
  .progressive-form-heading h3 { font-size: 17px; }
  .panel-close-button { flex-basis: 36px; width: 36px; height: 36px; }

  .form-grid,
  .movement-form-grid,
  .account-form-grid,
  .account-opening-fields,
  .account-tool-form-grid,
  .debt-form-grid,
  .debt-basic-grid,
  .debt-optional-grid,
  .debt-payment-grid,
  .debt-tool-grid,
  .investment-simple-grid,
  .investment-form-grid,
  .investment-tracking-form-grid,
  .patrimony-form-grid,
  .patrimony-basic-grid,
  .future-form-grid-two,
  .future-scenario-inputs,
  .future-assumption-list,
  .investment-account-routing {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
  .debt-basic-grid > .field:first-child,
  #investmentFormPanel .investment-form-grid > .field:first-child,
  .patrimony-debt-field,
  .account-tool-concept,
  .future-form-grid-two > .field:only-child,
  .future-form-grid-two > .field.full-width {
    grid-column: 1 / -1;
  }
  .field { min-width: 0; gap: 5px; }
  .field label,
  .privacy-field > span { font-size: 10.5px; line-height: 1.35; }
  .field input,
  .field select,
  .login-field input,
  .cat-search-wrap input,
  .search-wrap input,
  .movement-account-filter select,
  .privacy-field input,
  .privacy-field select,
  .privacy-field textarea,
  .future-scenario-inputs input {
    min-height: 44px;
    font-size: 16px;
  }
  .account-select-context { min-height: 14px; font-size: 9.5px; }
  .account-form-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .check-option { align-items: flex-start; font-size: 10.5px; line-height: 1.35; }
  .progressive-options > summary,
  .nested-progressive-options > summary { padding: 11px 12px; }
  .progressive-options > div,
  .nested-progressive-options > div { padding: 0 12px 12px; }
  .progressive-form-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progressive-form-actions > button:only-child { grid-column: 1 / -1; }
  .btn-add,
  .btn-cancel-edit,
  .btn-primary,
  .btn-secondary,
  .btn-danger { min-height: 44px; }

  .panel-controls { gap: 10px; }
  .type-toggle { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .type-toggle::-webkit-scrollbar { display: none; }
  .type-toggle button { flex: 1 0 auto; min-height: 40px; padding: 8px 12px; font-size: 12px; }
  .cat-search-wrap { margin-bottom: 12px; }
  .category-picker-hint { justify-content: flex-start; margin: -4px 1px 10px; font-size: 10px; }
  .cat-section { margin-bottom: 13px; }
  .cat-pills,
  .subcat-row {
    flex-wrap: nowrap;
    padding-bottom: 4px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .cat-pills::-webkit-scrollbar,
  .subcat-row::-webkit-scrollbar { display: none; }
  .cat-pill,
  .subcat-pill { flex: 0 0 auto; }

  .movements-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 8px;
  }
  .movements-header h2 { grid-column: 1 / -1; }
  .search-wrap,
  .movement-account-filter { width: 100%; }
  .search-wrap input,
  .movement-account-filter select { width: 100%; min-width: 0; }
  .table-actions { grid-column: 1 / -1; }
  .table-actions button { min-height: 40px; }

  /* Compact card tables: all details remain visible in two columns. */
  table.mobile-table-cards,
  table.mobile-table-cards tbody { display: block !important; width: 100% !important; }
  table.mobile-table-cards thead { display: none !important; }
  table.mobile-table-cards tbody { display: grid !important; gap: 9px; }
  table.mobile-table-cards tr:not(.year-header-row) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
  }
  table.mobile-table-cards td {
    display: flex !important;
    min-width: 0;
    min-height: 52px;
    padding: 9px 10px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    flex-direction: column;
    gap: 3px;
    border-right: 1px solid rgba(48, 54, 61, .55);
    border-bottom: 1px solid rgba(48, 54, 61, .55) !important;
    text-align: left !important;
    overflow-wrap: anywhere;
  }
  table.mobile-table-cards td:nth-child(2n) { border-right: 0; }
  table.mobile-table-cards td::before {
    content: attr(data-mobile-label) !important;
    display: block;
    color: var(--muted);
    font-size: 8.5px !important;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: .45px;
    text-transform: uppercase;
  }
  table.mobile-table-cards td:last-child { border-bottom: 0 !important; }
  table.mobile-table-movements td:nth-child(3),
  table.mobile-table-movements td:nth-child(7),
  table.mobile-table-investments td:nth-child(3),
  table.mobile-table-investments td:nth-child(8),
  table.mobile-table-investments td:nth-child(9) { grid-column: 1 / -1; border-right: 0; }
  table.mobile-table-movements td:nth-last-child(2),
  table.mobile-table-investments td:nth-last-child(2) { border-bottom: 0 !important; }
  table.mobile-table-cards .investment-amount-stack { width: 100%; min-width: 0; }
  table.mobile-table-cards .investment-row-actions,
  table.mobile-table-cards td:last-child { width: 100%; justify-content: flex-start !important; }
  table.mobile-table-cards td:last-child button { min-height: 36px; }
  .mobile-card-shell { overflow: visible !important; border: 0; background: transparent; }

  /* Dense analytical tables keep their headers and use controlled horizontal pan. */
  .mobile-scroll-shell {
    width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    border-radius: var(--radius);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  table.mobile-table-scroll {
    display: table !important;
    width: 100% !important;
    min-width: 660px;
    border-collapse: collapse;
  }
  table.mobile-table-scroll thead { display: table-header-group !important; }
  table.mobile-table-scroll tbody { display: table-row-group !important; }
  table.mobile-table-scroll tr { display: table-row !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
  table.mobile-table-scroll th,
  table.mobile-table-scroll td {
    display: table-cell !important;
    width: auto !important;
    min-width: 0;
    padding: 9px 10px !important;
    border-bottom: 1px solid var(--border) !important;
    text-align: left !important;
    white-space: nowrap;
  }
  table.mobile-table-scroll td::before { content: none !important; }
  table.mobile-table-scroll tr.year-header-row td { display: table-cell !important; }
  #evolutionTableContainer table.mobile-table-scroll,
  .dynamic-evolution-table table.mobile-table-scroll { min-width: 760px; }

  .accounts-summary,
  .analysis-summary,
  .future-summary-grid,
  .simple-module-summary,
  .projection-simple-summary,
  .budget-simple-hero,
  .future-scenario-grid {
    display: grid;
    grid-auto-columns: minmax(150px, 44vw);
    grid-auto-flow: column;
    grid-template-columns: none !important;
    gap: 8px;
    padding-bottom: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .accounts-summary::-webkit-scrollbar,
  .analysis-summary::-webkit-scrollbar,
  .future-summary-grid::-webkit-scrollbar,
  .simple-module-summary::-webkit-scrollbar,
  .projection-simple-summary::-webkit-scrollbar,
  .budget-simple-hero::-webkit-scrollbar,
  .future-scenario-grid::-webkit-scrollbar { display: none; }
  .accounts-summary > *,
  .analysis-summary > *,
  .future-summary-grid > *,
  .simple-module-summary > *,
  .projection-simple-summary > *,
  .budget-simple-hero > *,
  .future-scenario-grid > * { scroll-snap-align: start; }
  .accounts-summary-card { padding: 13px; }
  .accounts-summary-card strong { font-size: 18px; }
  .ana-card { min-width: 0; }

  .accounts-list,
  .patrimony-list { gap: 10px; }
  .account-card,
  .debt-card { padding: 14px; gap: 11px; }
  .account-balances { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .account-balances > div { padding: 8px; }
  .account-actions,
  .debt-actions,
  .patrimony-card-actions { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .account-actions::-webkit-scrollbar,
  .debt-actions::-webkit-scrollbar,
  .patrimony-card-actions::-webkit-scrollbar { display: none; }
  .account-actions button,
  .debt-actions button,
  .patrimony-card-actions button { flex: 0 0 auto; min-height: 36px; }
  .patrimony-values,
  .debt-quick-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .analysis-filters-modern,
  .evolution-filters-modern { padding: 13px; gap: 12px; }
  .pill-selector,
  .month-grid-selector {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .pill-selector::-webkit-scrollbar,
  .month-grid-selector::-webkit-scrollbar { display: none; }
  .pill-btn { flex: 0 0 auto; scroll-snap-align: start; }
  .month-btn { flex: 0 0 58px; min-width: 58px; scroll-snap-align: start; }

  .chart-box { padding: 13px 10px; }
  .chart-header-row { gap: 9px !important; }
  .evolution-filters-compact { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .evolution-filters-compact::-webkit-scrollbar { display: none; }
  .chart-box > div[style*="justify-content:center"],
  .future-chart-legend {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 7px;
    scrollbar-width: none;
  }
  .chart-box > div[style*="justify-content:center"]::-webkit-scrollbar,
  .future-chart-legend::-webkit-scrollbar { display: none; }
  .chart-box > div[style*="justify-content:center"] > div,
  .future-chart-legend > span { flex: 0 0 auto; white-space: nowrap; }
  #cumulativeChartContainer,
  #evolutionChartContainer,
  .future-chart-wrap { overflow-x: auto; overscroll-behavior-inline: contain; }
  #cumulativeChartContainer > svg,
  #evolutionChartContainer > svg { display: block; min-width: 680px; }

  .future-section-tabs,
  .account-center-tabs {
    display: flex;
    grid-template-columns: none;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .future-section-tabs::-webkit-scrollbar,
  .account-center-tabs::-webkit-scrollbar { display: none; }
  .future-section-tab,
  .account-center-tabs button {
    flex: 0 0 min(78vw, 300px);
    min-height: 48px;
    scroll-snap-align: center;
  }
  .account-center-tabs button { flex-basis: 150px; }
  .future-section-tab small { white-space: normal; }
  .future-section-header { gap: 10px; }
  .future-section-header h2 { font-size: 21px; }
  .future-month-control { width: 100%; }
  .future-budget-values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .future-card-actions { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .future-card-actions::-webkit-scrollbar { display: none; }
  .future-card-actions button { flex: 0 0 auto; }
  .projection-horizon-control > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .demo-profile-modal { align-items: stretch; padding: 0; }
  .demo-profile-dialog {
    width: 100%;
    max-height: 100dvh;
    padding: max(14px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
  }
  .demo-profile-dialog-header {
    position: sticky;
    top: calc(-1 * max(14px, env(safe-area-inset-top)));
    z-index: 2;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    margin: 0 -12px 12px;
    padding: max(14px, env(safe-area-inset-top)) 12px 11px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(10px);
  }
  .demo-profile-dialog-header h2 { font-size: 18px; }
  .demo-profile-dialog-header p { font-size: 10.5px; line-height: 1.4; }
  .demo-profile-dialog-actions { width: auto; flex-direction: column; align-items: stretch; }
  .demo-private-access { flex: 0 0 auto; min-height: 34px; padding: 6px 8px; font-size: 10px; }
  .demo-profile-grid {
    display: grid;
    grid-auto-columns: minmax(280px, 84vw);
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 9px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .demo-profile-grid::-webkit-scrollbar { display: none; }
  .demo-profile-card { min-height: 0; scroll-snap-align: center; }
  .demo-profile-card-body { gap: 7px; padding: 11px 12px 12px; }
  .demo-profile-features { margin-top: 4px; }

  .privacy-center-dialog { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .privacy-center-header {
    position: sticky;
    top: -18px;
    z-index: 3;
    margin: -18px -14px 12px;
    padding: max(16px, env(safe-area-inset-top)) 14px 12px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(10px);
  }
  .privacy-account-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .privacy-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .privacy-actions::-webkit-scrollbar { display: none; }
  .privacy-actions > button { flex: 0 0 auto; width: auto; min-height: 42px; }
  .account-detail-list > div { grid-template-columns: minmax(0, 1fr) auto; }
  .account-detail-list span { grid-column: 1 / -1; }

  .login-box { padding: 28px 20px; }
  #loginScreen { padding: 14px; }
  .connection-dialog { padding: 22px 18px; }

  footer { margin-top: 34px; padding-bottom: max(42px, env(safe-area-inset-bottom)); }
  .footer-content { align-items: stretch; text-align: left; }
  .footer-content div[style*="text-align: left"] { text-align: left !important; }
  .footer-legal-links { justify-content: flex-start; }
  #toast {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  #appScreen > header h1 span { display: none; }
  #appScreen > header #userEmail { max-width: 42vw; }
  main { padding-inline: 10px; }
  .tabs-nav { margin-inline: -10px; }
  .summary-row { grid-auto-columns: minmax(140px, 46vw); }
  .module-guide-steps { grid-auto-columns: minmax(205px, 82vw); }

  .form-grid,
  .movement-form-grid,
  .account-form-grid,
  .account-opening-fields,
  .account-tool-form-grid,
  .debt-form-grid,
  .debt-basic-grid,
  .debt-optional-grid,
  .debt-payment-grid,
  .debt-tool-grid,
  .investment-simple-grid,
  .investment-form-grid,
  .investment-tracking-form-grid,
  .patrimony-form-grid,
  .patrimony-basic-grid,
  .future-form-grid-two,
  .future-scenario-inputs,
  .future-assumption-list,
  .investment-account-routing { gap: 8px; }

  .account-form-grid > .field:nth-child(1),
  .account-form-grid > .field:nth-child(2),
  .movement-form-grid > .movement-account-field,
  .debt-payment-grid > .field:nth-child(1),
  .debt-payment-grid > .field:nth-child(2),
  .market-quote-editor > .field,
  .future-scenario-inputs > div { grid-column: 1 / -1; }

  .account-form-options { grid-template-columns: 1fr; }
  .market-tracking-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-quote-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-quote-actions { grid-column: 1 / -1; flex-direction: row; }
  .market-quote-actions button { width: auto; flex: 1; }

  .patrimony-values,
  .debt-quick-facts,
  .account-balances { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .patrimony-values > div,
  .debt-quick-facts > div,
  .account-balances > div { padding: 7px; }
  .patrimony-values strong,
  .debt-quick-facts strong,
  .account-balances strong { font-size: 11px; }
  .patrimony-values span,
  .debt-quick-facts span,
  .account-balances span { font-size: 8.5px; }

  .privacy-account-summary { grid-template-columns: 1fr; }
  .projection-horizon-control > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-profile-grid { grid-auto-columns: 88vw; }
}

@media (max-width: 760px) {
  table.mobile-table-cards td:last-child {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 6px;
  }
  table.mobile-table-cards td:last-child::before { flex: 0 0 100%; }
}

@media (max-width: 480px) {
  #appScreen > header h1 { font-size: 16px; }
  #appScreen > header h1 span { display: inline; }
}

@media (max-width: 350px) {
  #appScreen > header h1 span { display: none; }
  .form-grid > .field:has(input[type="date"]),
  .future-form-grid-two > .field:has(input[type="date"]) { grid-column: 1 / -1; }
}

/* 0.29.0: interfaz más compacta, cálida y orientada a la lectura rápida */
main { max-width: 1240px; padding-block: 18px; }
#appScreen > header { padding-block: 11px; }
.tabs-nav { margin-bottom: 18px; }
.tab-btn { padding-block: 9px; }
.summary { gap: 9px; margin-bottom: 20px; }
.summary-row { gap: 9px; }
.summary-position { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.summary-row > .card { min-height: 76px; padding: 11px 13px; overflow: visible; }
.card .amount { font-size: 19px; }
.card.cash-flow .amount { color: var(--green); }
.card.cash-flow.is-negative .amount { color: var(--red); }

.module-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 9px;
  padding: 10px 12px 10px 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 12px;
  background: linear-gradient(105deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface));
}
.module-action-bar > div:first-child { display: flex; min-width: 0; flex-direction: column; line-height: 1.25; }
.module-action-bar > div:first-child > span { color: var(--accent); font-size: 9px; font-weight: 850; letter-spacing: .8px; text-transform: uppercase; }
.module-action-bar > div:first-child > strong { margin-top: 2px; overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.module-action-buttons { display: flex; flex: 0 0 auto; gap: 7px; }
.module-action-bar .module-primary-action { min-height: 35px; padding: 7px 13px; }
.module-action-bar-investments { border-color: color-mix(in srgb, var(--yellow) 35%, var(--border)); background: linear-gradient(105deg, color-mix(in srgb, var(--yellow) 11%, var(--surface)), var(--surface)); }
.module-action-bar-investments > div:first-child > span { color: var(--yellow); }

.module-guide { position: relative; gap: 12px 20px; padding: 17px 19px; }
.standalone-module-guide { margin-bottom: 15px; }
.compact-module-guide { padding: 17px 19px; }
.module-guide-copy { padding-right: 84px; }
.module-guide-copy h2 { font-size: clamp(17px, 2vw, 22px); }
.module-guide-copy p { line-height: 1.5; }
.persistent-disclosure-toggle {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  width: auto;
  min-height: 28px;
  padding: 4px 8px;
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}
.persistent-disclosure-toggle:hover,
.persistent-disclosure-toggle:focus-visible { color: var(--text); }
.persistent-disclosure-chevron { font-size: 9px; }
.module-guide.is-collapsed { min-height: 38px; padding: 0; border-color: transparent; background: transparent; }
.module-guide.is-collapsed > .persistent-disclosure-toggle { top: 4px; right: 4px; }
.module-guide.is-collapsed + .accounts-summary,
.module-guide.is-collapsed + .simple-module-summary { margin-top: -4px; }
.summary > .persistent-disclosure-toggle { top: 6px; right: 6px; }
.summary { position: relative; }
.summary:not(.is-collapsed) { padding-top: 5px; }

.accounts-summary { gap: 9px; margin-bottom: 16px; }
.accounts-summary-card { position: relative; overflow: hidden; padding: 14px 15px; }
.accounts-summary-card::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: var(--metric-color, var(--border)); }
.accounts-summary-card strong { margin-top: 4px; color: var(--metric-color, var(--text)); font-size: 19px; }
.metric-liquidity, .metric-accounts { --metric-color: var(--accent); }
.metric-investment, .metric-investment-accounts { --metric-color: var(--yellow); }
.metric-debt { --metric-color: var(--orange); }
.metric-paid { --metric-color: var(--green); }
.metric-payment { --metric-color: var(--yellow); }
.metric-next { --metric-color: var(--accent); }
.patrimony-gross-summary, .patrimony-net-summary { --metric-color: var(--teal); }
.patrimony-debt-summary { --metric-color: var(--orange); }
.patrimony-net-summary strong,
.patrimony-net-value strong { color: var(--teal); }

.account-tools-grid { align-items: stretch; gap: 14px; margin-bottom: 22px; }
.account-tool-panel { display: flex; height: 100%; flex-direction: column; }
.account-tool-panel > .btn-add { margin-top: auto; }
.account-tool-description { min-height: 38px; margin-bottom: 12px; }
.account-card { gap: 12px; padding: 16px; }
.account-visual-card { isolation: isolate; background: radial-gradient(circle at 94% 0, color-mix(in srgb, var(--account-color) 13%, transparent), transparent 42%), var(--surface); }
.account-visual-card::before { width: 5px; }
.account-visual-icon { flex-basis: 50px; width: 50px; height: 50px; border-radius: 15px; font-size: 24px; box-shadow: inset 0 0 18px color-mix(in srgb, var(--account-color) 10%, transparent); }
.account-type-eyebrow { display: block; margin-bottom: 2px; color: var(--account-color, var(--accent)); font-size: 8.5px; font-weight: 850; letter-spacing: .65px; text-transform: uppercase; }
.account-balances > div:first-child strong { color: var(--accent); }
.account-balances > div:nth-child(2) strong { color: var(--yellow); }
.account-balances > div:last-child strong { color: var(--text); }
.accounts-list { gap: 12px; margin-bottom: 22px; }

.investment-summary .metric-investment strong { color: var(--yellow); }
.investment-summary .metric-result strong { color: var(--green); }
.investment-summary .metric-result strong.negative { color: var(--red); }
.investment-summary .metric-positions strong { color: var(--accent); }
.investment-position-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.investment-position-card { position: relative; display: grid; gap: 10px; min-width: 0; padding: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--position-color) 30%, var(--border)); border-radius: 12px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--position-color) 13%, transparent), transparent 44%), var(--bg); }
.investment-position-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--position-color); }
.investment-position-heading { display: flex; gap: 10px; min-width: 0; }
.investment-position-heading > div { display: flex; min-width: 0; flex-direction: column; }
.investment-position-heading > div > span { color: var(--position-color); font-size: 8px; font-weight: 850; letter-spacing: .5px; text-transform: uppercase; }
.investment-position-heading strong { overflow: hidden; margin-top: 2px; color: var(--text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.investment-position-heading small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.investment-position-icon { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border: 1px solid color-mix(in srgb, var(--position-color) 42%, var(--border)); border-radius: 11px; background: color-mix(in srgb, var(--position-color) 13%, var(--surface)); color: var(--position-color); font-size: 19px; }
.investment-position-money { display: grid; grid-template-columns: 1.4fr .8fr; gap: 8px; }
.investment-position-money > span { padding: 8px; border-radius: 8px; background: color-mix(in srgb, var(--surface) 72%, transparent); }
.investment-position-money small { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.investment-position-money strong { display: block; margin-top: 2px; color: var(--position-color); font-size: 15px; }
.investment-position-share { height: 5px; overflow: hidden; border-radius: 999px; background: var(--border); }
.investment-position-share span { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: var(--position-color); }
.investment-position-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.investment-position-footer > small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.investment-allocation-overview { display: grid; gap: 10px; margin: 14px 0 18px; }
.investment-allocation-item > div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.investment-allocation-item strong { color: var(--text); }
.investment-allocation-item > div:last-child { height: 8px; overflow: hidden; border-radius: 999px; background: var(--border); }
.investment-allocation-item > div:last-child span { display: block; height: 100%; border-radius: inherit; background: var(--allocation-color); }
.module-history-section { margin-top: 18px; }
.module-history-header { margin-bottom: 10px; }
.investment-history-details { border: 0; background: transparent; }

/* 0.34.0: portfolio de mercado integrado y operaciones de cuenta bajo demanda */
.account-form-panel,
.account-tool-panel { position: relative; }
.account-panel-close { position: absolute; top: 12px; right: 12px; }
.investment-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.investment-summary .metric-market strong { color: var(--blue); }
.investment-summary .metric-realized strong { color: var(--green); }
.investment-summary .metric-realized strong.negative { color: var(--red); }
.investment-portfolio-panel { margin-top: 12px; }
.investment-portfolio-title { align-items: flex-start; }
.investment-portfolio-controls { display: flex; min-width: 0; align-items: flex-end; flex-direction: column; gap: 8px; }
.investment-range-selector { display: flex; max-width: 100%; flex-wrap: wrap; justify-content: flex-end; gap: 3px; }
.investment-range-selector button {
  min-width: 34px;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  font-weight: 750;
}
.investment-range-selector button:hover,
.investment-range-selector button.active { border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 12%, var(--surface)); color: var(--yellow); }
.investment-coverage-note { margin: 10px 0; padding: 9px 11px; border-left: 3px solid var(--yellow); border-radius: 7px; background: color-mix(in srgb, var(--yellow) 7%, var(--surface)); color: var(--muted); font-size: 10px; }
.investment-position-grid { display: flex; flex-direction: column; gap: 9px; }
.investment-position-card { grid-template-columns: minmax(0, 1fr) minmax(210px, 240px); align-items: stretch; overflow: visible; }
.investment-position-core { display: grid; min-width: 0; gap: 9px; }
.investment-position-money { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.investment-position-money strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.investment-position-money strong.positive { color: var(--green); }
.investment-position-money strong.negative { color: var(--red); }
.investment-position-footer > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.investment-position-chart { display: flex; min-width: 0; padding: 10px; border-left: 1px solid var(--border); flex-direction: column; }
.investment-position-chart > span { color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .4px; text-transform: uppercase; }
.investment-sparkline { display: grid; min-height: 100px; align-content: center; gap: 3px; }
.investment-sparkline svg { display: block; width: 100%; height: 72px; overflow: visible; }
.investment-sparkline path { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.investment-sparkline.negative path { stroke: var(--red); }
.investment-sparkline.neutral path { stroke: var(--muted); }
.investment-sparkline > div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.investment-sparkline strong { color: var(--green); font-size: 12px; }
.investment-sparkline.negative strong { color: var(--red); }
.investment-sparkline.neutral strong { color: var(--muted); }
.investment-sparkline small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.investment-sparkline-state { display: grid; min-height: 100px; place-items: center; color: var(--muted); font-size: 9.5px; line-height: 1.4; text-align: center; }
.investment-sparkline-state.is-loading { animation: investment-chart-pulse 1.2s ease-in-out infinite alternate; }
.investment-position-quote-editor { grid-column: 1 / -1; margin: 0; }
@keyframes investment-chart-pulse { from { opacity: .45; } to { opacity: 1; } }

/* Formularios planos: los requisitos nunca quedan ocultos en acordeones. */
.flat-form-section { display: grid; gap: 12px; padding: 15px; border: 1px solid var(--border); border-radius: 11px; background: color-mix(in srgb, var(--surface) 86%, var(--bg)); }
.flat-form-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.flat-form-section-heading h3 { margin: 0; color: var(--text); font-size: 13px; }
.flat-form-section-heading p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; text-align: right; }
.debt-basic-section { border-color: color-mix(in srgb, var(--orange) 28%, var(--border)); }
.debt-tracking-section { border-color: color-mix(in srgb, var(--blue) 24%, var(--border)); }
.debt-basic-grid,
.debt-optional-grid { margin: 0; }
.investment-accounts-section { border-color: color-mix(in srgb, var(--yellow) 25%, var(--border)); }
.investment-accounts-section .investment-account-routing { margin: 0; padding: 0; border: 0; background: transparent; }
.investment-tracking-fields { margin: 0; background: color-mix(in srgb, var(--yellow) 5%, var(--surface)); }
.investment-tracking-fields-header { align-items: center; justify-content: space-between; flex-direction: row; gap: 16px; margin: 0; }
.investment-tracking-fields-header > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.tracking-choice { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--yellow) 36%, var(--border)); border-radius: 8px; background: var(--surface2); color: var(--text); cursor: pointer; font-size: 10.5px; font-weight: 750; }
.tracking-choice input { accent-color: var(--yellow); }
.investment-tracking-explanation { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.investment-instrument-search-field { position: relative; }
.investment-instrument-search-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.investment-instrument-search-control button { white-space: nowrap; }
.investment-instrument-search-status { min-height: 16px; margin-top: 5px; color: var(--muted); font-size: 9.5px; line-height: 1.4; }
.investment-instrument-results { display: grid; z-index: 3; max-height: 250px; margin-top: 6px; overflow-y: auto; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.investment-instrument-results button { display: flex; width: 100%; padding: 9px 10px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font: inherit; text-align: left; flex-direction: column; gap: 2px; }
.investment-instrument-results button:last-child { border-bottom: 0; }
.investment-instrument-results button:hover,
.investment-instrument-results button:focus-visible { background: color-mix(in srgb, var(--yellow) 9%, var(--surface2)); outline: none; }
.investment-instrument-results strong { font-size: 10.5px; }
.investment-instrument-results span { color: var(--muted); font-size: 9px; }

.debt-card { background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--account-color) 13%, transparent), transparent 43%), var(--surface); }
.debt-progress-hero { padding: 12px; }
.debt-progress-ring { width: 72px; height: 72px; }
.debt-progress-copy > strong { color: var(--orange); }
.debt-primary-actions .debt-action-primary { min-width: 110px; }
.debt-tool-heading > div { min-width: 0; }
.debt-tool-heading h2,
.debt-tool-heading p,
.debt-secondary-operations > summary span,
.debt-secondary-operations > summary small { overflow-wrap: anywhere; }
.debt-secondary-operations > summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .7fr) auto; align-items: center; gap: 10px; }
.debt-secondary-operations > summary::after { float: none; }
.debt-year { margin-bottom: 9px; overflow: hidden; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.debt-year .year-collapse-header { width: 100%; border: 0; border-radius: 0; font: inherit; text-align: left; }
.debt-year .year-collapse-header > span:first-child { display: flex; min-width: 0; flex-direction: column; }
.debt-year .year-collapse-header strong { color: var(--text); font-size: 12px; }
.debt-year .year-collapse-header small { color: var(--muted); font-size: 9.5px; font-weight: 500; }
.debt-year-operations { padding: 0 14px; border-top: 1px solid var(--border); }

.projection-reading-panel { padding: 16px; border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--border)); border-radius: 13px; background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 8%, var(--surface)), var(--surface)); }
.projection-insight-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.projection-insight-card { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--bg) 75%, transparent); }
.projection-insight-card span { display: block; color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.projection-insight-card strong { display: block; margin: 4px 0 3px; color: var(--teal); font-size: 17px; overflow-wrap: anywhere; }
.projection-insight-card strong.negative { color: var(--red); }
.projection-insight-card small { display: block; color: var(--muted); font-size: 9px; line-height: 1.4; }

@media (max-width: 900px) {
  .projection-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  main { padding: 12px; }
  .summary-position { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .module-action-bar { position: static; margin-inline: -2px; padding: 8px 9px 8px 11px; box-shadow: 0 8px 20px rgba(0,0,0,.12); }
  .module-action-bar > div:first-child > strong { font-size: 10.5px; }
  .module-action-buttons { min-width: 0; }
  .module-action-buttons > button,
  .module-action-bar > .module-primary-action { min-width: 0; padding-inline: 9px; font-size: 10px; white-space: nowrap; }
  .module-guide { padding: 14px; }
  .module-guide-copy { padding-right: 65px; }
  .module-guide-copy h2 { font-size: 18px; }
  .persistent-disclosure-toggle { top: 7px; right: 7px; }
  .account-tool-description { min-height: 0; }
  .investment-position-grid { grid-template-columns: 1fr; }
  .debt-secondary-operations > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .debt-secondary-operations > summary small { grid-column: 1 / -1; }
  .projection-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 390px) {
  .module-action-bar > div:first-child { display: none; }
  .module-action-bar { justify-content: stretch; }
  .module-action-buttons,
  .module-action-bar > .module-primary-action { width: 100%; }
  .module-action-buttons > button { flex: 1; }
  .summary-row > .card { min-height: 70px; padding: 9px 10px; }
  .card label { font-size: 8.5px; }
  .card .amount { font-size: 16px; }
  .account-visual-icon { flex-basis: 44px; width: 44px; height: 44px; }
  .investment-position-money { grid-template-columns: 1fr 1fr; }
  .projection-insight-grid { grid-template-columns: 1fr; }
}


/* 0.29.0: jerarquía visual, color semántico y controles compactos */
.brand-block h1 { position: relative; overflow: visible; }
.brand-alpha-badge {
  position: absolute;
  top: -8px;
  right: -34px;
  padding: 2px 4px;
  border: 1px solid color-mix(in srgb, var(--yellow) 60%, var(--border));
  border-radius: 4px;
  background: color-mix(in srgb, var(--yellow) 13%, var(--surface));
  color: var(--yellow);
  -webkit-text-fill-color: var(--yellow);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .7px;
  line-height: 1;
}

.module-action-bar { justify-content: flex-start; }
.module-action-bar > .module-primary-action,
.module-action-bar > .module-action-buttons { order: -1; }

.module-guide-copy { padding-right: 116px; }
.module-guide > .persistent-disclosure-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  min-width: 104px;
  height: 30px;
  min-height: 30px;
  box-sizing: border-box;
}
.module-guide.is-collapsed { min-height: 38px; }

.metric-payment { --metric-color: var(--red); }
.patrimony-gross-summary { --metric-color: var(--teal); }
.patrimony-net-summary { --metric-color: var(--text); }
.patrimony-net-summary strong,
.patrimony-net-value strong { color: var(--text); }
.card.total-assets .amount { color: var(--text); }

.account-visual-card { position: relative; padding-right: 70px; }
.account-default-emblem {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 34px;
  height: 28px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--account-color) 42%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 5px 14px rgba(0,0,0,.16);
}
.account-default-emblem b { font-size: 14px; line-height: 1; }
.account-default-emblem .movement-default-mark { color: var(--accent); }
.account-default-emblem .investment-default-mark { color: var(--yellow); }
.account-default-emblem.is-both { min-width: 44px; }

.planning-budgets-section { --planning-color: var(--orange); }
.planning-goals-section { --planning-color: var(--purple); }
.planning-budgets-section .module-action-bar,
.planning-goals-section .module-action-bar,
.planning-budgets-section .module-guide,
.planning-goals-section .module-guide {
  border-color: color-mix(in srgb, var(--planning-color) 34%, var(--border));
  background: linear-gradient(110deg, color-mix(in srgb, var(--planning-color) 9%, var(--surface)), var(--surface));
}
.planning-budgets-section .module-action-bar > div:first-child > span,
.planning-goals-section .module-action-bar > div:first-child > span,
.planning-budgets-section .module-guide-kicker,
.planning-goals-section .module-guide-kicker,
.planning-budgets-section .future-eyebrow,
.planning-goals-section .future-eyebrow { color: var(--planning-color); }
.planning-budgets-section .module-primary-action { border-color: var(--orange); background: var(--orange); color: #1d1303; }
.planning-goals-section .module-primary-action { border-color: var(--purple); background: var(--purple); color: white; }
.planning-budgets-section .future-progress-track span { background: linear-gradient(90deg, var(--orange), var(--yellow)); }
.planning-goals-section .future-progress-track span { background: linear-gradient(90deg, var(--purple), var(--green)); }
.planning-budgets-section .budget-simple-hero { border-color: color-mix(in srgb, var(--orange) 32%, var(--border)); }
.planning-goals-section .planning-goal-summary > div { border-color: color-mix(in srgb, var(--purple) 24%, var(--border)); }
.future-section-tab:first-child.active { border-color: color-mix(in srgb, var(--orange) 52%, var(--border)); background: color-mix(in srgb, var(--orange) 11%, var(--surface)); color: var(--orange); }
.future-section-tab:nth-child(2).active { border-color: color-mix(in srgb, var(--purple) 52%, var(--border)); background: color-mix(in srgb, var(--purple) 11%, var(--surface)); color: var(--purple); }

.simplified-projections { --projection-color: var(--purple); }
.projection-simple-hero,
.projection-reading-panel {
  border-color: color-mix(in srgb, var(--projection-color) 34%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--projection-color) 10%, var(--surface)), var(--surface));
}
.projection-horizon-control button.active { border-color: var(--projection-color); background: color-mix(in srgb, var(--projection-color) 15%, var(--surface)); color: var(--projection-color); }
.projection-insight-card { border-top: 2px solid var(--insight-color, var(--purple)); }
.projection-insight-card strong { color: var(--insight-color, var(--purple)); }
.projection-insight-card.insight-wealth { --insight-color: var(--purple); }
.projection-insight-card.insight-liquidity { --insight-color: var(--accent); }
.projection-insight-card.insight-debt { --insight-color: var(--orange); }
.projection-insight-card.insight-sensitivity { --insight-color: var(--yellow); }
.projection-metrics .metric-liquidity strong { color: var(--accent); }
.projection-metrics .metric-investment strong { color: var(--yellow); }
.projection-metrics .metric-debt strong { color: var(--red); }
.projection-metrics .metric-wealth strong { color: var(--purple); }

@media (max-width: 760px) {
  .module-guide-copy { padding-right: 112px; }
  .account-visual-card { padding-right: 61px; }
  .account-default-emblem { top: 11px; right: 10px; }
}

@media (max-width: 350px) {
  .brand-alpha-badge { right: -31px; }
  .module-guide:not(.is-collapsed) .module-guide-copy { padding-top: 30px; padding-right: 0; }
}

/* 0.25.0: acceso único y móvil sin desplazamiento lateral */
.pin-screen {
  position: fixed; inset: 0; z-index: 10020; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: var(--bg);
}
.pin-box { width: min(100%, 390px); padding: 30px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-lg); text-align: center; }
.pin-box h1 { margin: 0 0 24px; font-size: 22px; letter-spacing: .18em; }
.pin-label { display: block; margin-bottom: 7px; text-align: left; font-size: 12px; font-weight: 700; }
.pin-input { width: 100%; margin-bottom: 14px; text-align: center; font-size: 26px; letter-spacing: .55em; padding-left: .55em; font-variant-numeric: tabular-nums; }
.inline-preference-button { width: 100%; margin-top: 7px; padding: 7px 9px; border: 1px dashed var(--border); border-radius: 8px; background: transparent; color: var(--muted); font-size: 10.5px; font-weight: 650; cursor: pointer; text-align: left; }
.inline-preference-button:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }

@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: hidden !important; }
  #appScreen, #appScreen > header, main, footer, .tab-content, .form-panel, .chart-box, .table-wrap { min-width: 0; max-width: 100%; overflow-x: hidden !important; }
  *, *::before, *::after { min-width: 0; }

  .tabs-nav { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; gap: 6px; padding-inline: 10px; }
  .tabs-nav .tab-btn { width: 100%; white-space: normal; min-height: 44px; padding: 8px 5px; }

  .summary-row, .module-guide-steps, .accounts-summary, .analysis-summary, .future-summary-grid, .simple-module-summary,
  .projection-simple-summary, .budget-simple-hero, .future-scenario-grid, .demo-profile-grid {
    display: grid !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important; scroll-snap-type: none !important; padding-bottom: 0 !important;
  }
  .module-guide-steps, .demo-profile-grid { grid-template-columns: 1fr !important; }
  .summary-row > *, .module-guide-steps > *, .demo-profile-grid > * { width: auto !important; min-width: 0 !important; }

  .account-actions, .debt-actions, .patrimony-card-actions, .privacy-actions, .future-card-actions,
  .evolution-filters-compact, .pill-selector, .month-grid-selector, .future-section-tabs, .account-center-tabs,
  .chart-box > div[style*="justify-content:center"], .future-chart-legend {
    overflow: visible !important; flex-wrap: wrap !important; scroll-snap-type: none !important;
  }
  .account-actions button, .debt-actions button, .patrimony-card-actions button, .privacy-actions > button,
  .future-card-actions button, .pill-btn, .month-btn, .future-section-tab, .account-center-tabs button { flex: 1 1 120px !important; width: auto; min-width: 0; }

  #cumulativeChartContainer, #evolutionChartContainer, .future-chart-wrap { overflow: hidden !important; }
  #cumulativeChartContainer > svg, #evolutionChartContainer > svg, .future-chart-wrap svg, canvas { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto; }

  .mobile-scroll-shell, .mobile-card-shell, .table-wrap { overflow: visible !important; }
  table.mobile-table-scroll, table.mobile-table-cards, table { min-width: 0 !important; width: 100% !important; display: block !important; }
  table thead { display: none !important; }
  table tbody { display: grid !important; gap: 9px; }
  table tbody tr { display: grid !important; width: 100% !important; padding: 10px !important; margin: 0 !important; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
  table tbody tr.year-header-row { padding: 7px 10px !important; }
  table tbody td { display: flex !important; justify-content: space-between; align-items: flex-start; gap: 10px; width: 100% !important; padding: 5px 0 !important; border: 0 !important; text-align: right !important; white-space: normal !important; overflow-wrap: anywhere; }
  table tbody td::before { content: attr(data-mobile-label); flex: 0 1 46%; color: var(--muted); font-size: 10px; font-weight: 700; text-align: left; }
  table tbody tr.year-header-row td, table tbody td[colspan] { display: block !important; text-align: left !important; }
  table tbody tr.year-header-row td::before, table tbody td[colspan]::before { content: none !important; }

  .demo-profile-dialog { overflow-x: hidden !important; }
  .demo-profile-card { width: 100% !important; }
}

@media (max-width: 420px) {
  .summary-row, .accounts-summary, .analysis-summary, .future-summary-grid, .simple-module-summary,
  .projection-simple-summary, .budget-simple-hero, .future-scenario-grid { grid-template-columns: 1fr !important; }
  .summary-row,
  .accounts-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pin-box { padding: 24px 18px; }
}

@media (min-width: 761px) {
  .summary-row .tooltip-box {
    width: min(360px, calc(100vw - 36px));
    white-space: normal;
  }
  .summary-row .card:last-child .tooltip-box {
    right: 0;
    left: auto;
    transform: translateY(-12px);
  }
  .summary-row .card:last-child:hover .tooltip-box,
  .summary-row .card:last-child:focus .tooltip-box,
  .summary-row .card:last-child:focus-within .tooltip-box { transform: translateY(-5px); }
  .summary-row .card:last-child .tooltip-box::after { right: 24px; left: auto; transform: none; }
}

/* 0.29.0: tutoriales y acciones principales sin solapamientos */
:root { --assets-total: #818cf8; }

.tutorial-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: -9px 0 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.tutorial-toolbar button {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--text);
  font: inherit;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}
.tutorial-toolbar button:hover,
.tutorial-toolbar button:focus-visible { border-color: var(--accent); outline: none; background: var(--accent-dim); }

.persistent-disclosure-toggle,
.module-guide > .persistent-disclosure-toggle,
.summary > .persistent-disclosure-toggle,
.module-guide.is-collapsed > .persistent-disclosure-toggle {
  position: static;
  top: auto;
  right: auto;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 34px;
  margin: 0;
  padding: 7px 11px;
}
.module-guide > .persistent-disclosure-toggle {
  grid-column: 1 / -1;
  justify-self: end;
}
.summary > .persistent-disclosure-toggle { justify-self: end; }
.module-guide-copy,
.module-guide:not(.is-collapsed) .module-guide-copy { padding: 0; }
.module-guide.is-collapsed { min-height: 34px; padding: 0; }
.summary:not(.is-collapsed) { padding-top: 0; }

.module-action-bar {
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  padding: 15px 16px;
}
.module-action-bar > .module-primary-action,
.module-action-bar > .module-action-buttons { order: initial; }
.module-action-bar > div:first-child > span { font-size: 10px; }
.module-action-bar > div:first-child > strong {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.35;
  white-space: normal;
}
.module-action-buttons { flex-wrap: wrap; }
.module-action-bar .module-primary-action,
.module-action-bar .module-sale-action {
  min-height: 48px;
  padding: 12px 19px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 850;
}
.module-action-bar .module-sale-action {
  border-color: var(--green);
  background: var(--green);
  color: #07180b;
}
.module-action-bar .module-sale-action:hover { filter: brightness(1.08); transform: translateY(-1px); }

.card.total-assets .amount { color: var(--assets-total); }
.card.total-assets { border-color: var(--border); }

.brand-alpha-badge {
  top: -6px;
  right: -33px;
  border-color: color-mix(in srgb, var(--muted) 28%, var(--border));
  background: color-mix(in srgb, var(--muted) 5%, transparent);
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  -webkit-text-fill-color: color-mix(in srgb, var(--muted) 72%, transparent);
  font-weight: 750;
  letter-spacing: .55px;
}

@media (max-width: 760px) {
  .tutorial-toolbar { margin-top: -6px; padding-inline: 2px; }
  .module-action-bar { padding: 13px; }
  .module-action-bar > div:first-child > strong { font-size: 13px; }
  .module-action-buttons,
  .module-action-bar > .module-primary-action { width: 100%; }
  .module-action-buttons > button { flex: 1 1 150px; white-space: normal; }
}

@media (max-width: 390px) {
  .tutorial-toolbar { align-items: stretch; flex-direction: column; gap: 5px; }
  .tutorial-toolbar span { padding-inline: 4px; }
  .tutorial-toolbar button { width: 100%; }
  .module-action-bar > div:first-child { display: flex; }
  .module-action-bar .module-primary-action,
  .module-action-bar .module-sale-action { width: 100%; min-height: 50px; font-size: 13px; }
}

/* 0.30.0: controles plegados en el margen de escritorio */
:root {
  --disclosure-rail-right: max(24px, calc((100vw - 1040px) / 2 - 96px));
}
main { max-width: 1040px; }

.summary > .summary-disclosure-toggle {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--purple) 58%, var(--border));
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--purple) 24%, var(--surface)), color-mix(in srgb, var(--accent) 12%, var(--surface)));
  color: color-mix(in srgb, var(--purple) 78%, white);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .06);
}
.summary > .summary-disclosure-toggle:hover,
.summary > .summary-disclosure-toggle:focus-visible {
  border-color: var(--purple);
  color: #fff;
  transform: translateY(-1px);
  outline: none;
}
.summary > .summary-disclosure-toggle .persistent-disclosure-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.summary-disclosure-icon,
.summary-disclosure-icon svg {
  display: block;
  width: 21px;
  height: 21px;
}
.summary-disclosure-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.summary:not(.is-collapsed) .summary-disclosure-slash { display: block; }
.summary.is-collapsed .summary-disclosure-slash { display: none; }

.persistent-disclosure.is-collapsed,
.module-guide.is-collapsed,
.summary.is-collapsed,
.standalone-module-guide.is-collapsed,
.compact-module-guide.is-collapsed {
  width: 0;
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.persistent-disclosure.is-collapsed > .persistent-disclosure-toggle,
.module-guide.is-collapsed > .persistent-disclosure-toggle,
.summary.is-collapsed > .persistent-disclosure-toggle {
  position: fixed;
  right: var(--disclosure-rail-right);
  z-index: 900;
  width: 36px;
  min-width: 36px;
  height: 112px;
  min-height: 112px;
  margin: 0;
  padding: 9px 6px;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: -6px 8px 22px rgba(0, 0, 0, .28);
  backdrop-filter: blur(10px);
}
.summary.is-collapsed > .persistent-disclosure-toggle {
  top: 100px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  flex-direction: row;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--purple) 58%, var(--border));
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--purple) 24%, var(--surface)), color-mix(in srgb, var(--accent) 12%, var(--surface)));
  color: color-mix(in srgb, var(--purple) 78%, white);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .06);
}
.module-guide.is-collapsed > .persistent-disclosure-toggle {
  top: 220px;
}
.persistent-disclosure.is-collapsed > .persistent-disclosure-toggle .persistent-disclosure-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.persistent-disclosure.is-collapsed > .persistent-disclosure-toggle:hover,
.persistent-disclosure.is-collapsed > .persistent-disclosure-toggle:focus-visible {
  transform: translateY(-2px);
}

/* 0.31.0: tutoriales globales, marca compartida y operaciones de cuentas por año */
.brand-logo {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(88, 166, 255, .15), rgba(163, 113, 247, .15));
  border: 1px solid rgba(88, 166, 255, .4);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 15px rgba(88, 166, 255, .1);
}
.brand-title {
  position: relative;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.5px;
  background: linear-gradient(120deg, var(--brand-start) 40%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-title > span {
  background: linear-gradient(120deg, var(--accent), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 22px;
  width: 100%;
  height: 72px;
  overflow: hidden;
  text-align: center;
}
.auth-brand .brand-block { justify-content: center; }
.auth-brand .brand-tagline {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.auth-brand + h2 { margin-top: 0; }

.tutorial-toolbar .tutorials-global-toggle {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--purple) 58%, var(--border));
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--purple) 24%, var(--surface)), color-mix(in srgb, var(--accent) 12%, var(--surface)));
  color: color-mix(in srgb, var(--purple) 78%, white);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .06);
}
.tutorial-toolbar .tutorials-global-toggle:hover,
.tutorial-toolbar .tutorials-global-toggle:focus-visible {
  border-color: var(--purple);
  background: linear-gradient(145deg, color-mix(in srgb, var(--purple) 30%, var(--surface)), color-mix(in srgb, var(--accent) 16%, var(--surface)));
  color: #fff;
  transform: translateY(-1px);
}
.tutorials-global-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.tutorial-disclosure-icon,
.tutorial-disclosure-icon svg {
  display: block;
  width: 22px;
  height: 22px;
}
.tutorial-disclosure-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tutorials-global-toggle:not(.is-collapsed-state) .tutorial-disclosure-slash { display: block; }
.tutorials-global-toggle.is-collapsed-state .tutorial-disclosure-slash { display: none; }

.account-operation-year {
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.account-operation-year:last-child { margin-bottom: 0; }
.account-operation-year-header {
  width: 100%;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}
.account-operation-year-header small {
  margin-left: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}
.account-operation-year-list { border-top: 1px solid var(--border); }

/* 0.31.1: controles globales permanentes fuera del flujo */
.tutorial-toolbar {
  width: 0;
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
}
.tutorial-toolbar .tutorials-global-toggle {
  position: fixed;
  top: 100px;
  right: var(--disclosure-rail-right);
  z-index: 900;
  margin: 0;
}
.summary > .summary-disclosure-toggle,
.summary.is-collapsed > .summary-disclosure-toggle {
  position: fixed;
  top: 100px;
  right: calc(var(--disclosure-rail-right) + 50px);
  z-index: 900;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  margin: 0;
  padding: 0;
  flex-direction: row;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--purple) 58%, var(--border));
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--purple) 24%, var(--surface)), color-mix(in srgb, var(--accent) 12%, var(--surface)));
  color: color-mix(in srgb, var(--purple) 78%, white);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .06);
}
.summary > .summary-disclosure-toggle:hover,
.summary > .summary-disclosure-toggle:focus-visible,
.summary.is-collapsed > .summary-disclosure-toggle:hover,
.summary.is-collapsed > .summary-disclosure-toggle:focus-visible,
.tutorial-toolbar .tutorials-global-toggle:hover,
.tutorial-toolbar .tutorials-global-toggle:focus-visible {
  transform: none;
}

/* 0.35.0: Setup, Bienvenida y núcleo visual compartido */
main { max-width: 1180px; }
.tab-content.active { display: block; padding-top: 18px; }
.tab-content > :first-child,
#investmentOverview > :first-child,
#planningModuleRoot > :first-child { margin-top: 0 !important; }
.accounts-summary,
.simple-module-summary,
.analysis-summary { min-height: 92px; margin-top: 0; margin-bottom: 16px; align-items: stretch; }
.accounts-summary > *,
.simple-module-summary > *,
.analysis-summary > * { min-height: 92px; box-sizing: border-box; }
.movements-header { min-height: 52px; align-items: center; }
.movements-header .table-actions { margin-left: auto; }
.module-history-section { margin-top: 18px; }
#evolutionHistorySection,
#evolutionProjectionsSection { margin-top: 16px; }

/* El selector mantiene el alta manual como un bloque estable al alternar ingreso/gasto. */
#movementFormPanel { position: relative; overflow: hidden; }
#catPicker { height: 344px; min-height: 344px; padding-right: 7px; overflow-y: auto; scrollbar-gutter: stable; }
#catPicker::-webkit-scrollbar { width: 7px; }
#catPicker::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--accent) 35%, var(--surface2)); }
#movementFormPanel > #btnAdd { min-height: 43px; }
.movement-ai-assistant {
  padding: 21px;
  border-color: color-mix(in srgb, var(--purple) 54%, var(--border));
  background:
    radial-gradient(circle at 92% 3%, color-mix(in srgb, var(--purple) 24%, transparent), transparent 34%),
    radial-gradient(circle at 4% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 93%, var(--purple)), var(--surface));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .24), inset 0 1px rgba(255,255,255,.06);
}
.movement-ai-heading strong { font-size: 16px; letter-spacing: -.2px; }
.movement-ai-heading small { max-width: 660px; font-size: 11px; }
.movement-ai-badge { border-color: color-mix(in srgb, var(--purple) 55%, var(--border)); background: color-mix(in srgb, var(--purple) 13%, var(--surface)); }
.movement-ai-input-row { padding: 5px; border: 1px solid color-mix(in srgb, var(--purple) 35%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--bg) 82%, transparent); }
.movement-ai-input-row input { min-height: 45px; border: 0; background: transparent; }
.movement-ai-input-row .movement-ai-analyze { min-width: 172px; min-height: 45px; border: 0; border-radius: 9px; background: linear-gradient(135deg, var(--purple), var(--accent)); color: white; box-shadow: 0 8px 22px color-mix(in srgb, var(--purple) 28%, transparent); }
.movement-ai-input-row .movement-ai-analyze:not(:disabled):hover { filter: brightness(1.08); transform: translateY(-1px); }
.movement-ai-privacy { margin-bottom: 4px; font-size: 9.5px; }

/* Deudas: la etiqueta de acción vuelve a ser texto y no el círculo de numeración. */
.debt-action-kicker { display: block; margin-bottom: 5px; color: var(--orange); font-size: 9px; font-weight: 850; letter-spacing: .75px; text-transform: uppercase; }
.debt-tool-heading > div { display: block; min-width: 0; }
.debt-tool-heading h2 { display: block; margin: 0 0 5px; }
.debt-payment-panel { overflow: visible; }
.debt-payment-grid { align-items: start; }

/* Perfil demo integrado en la cabecera, a la izquierda de la marca. */
header { grid-template-columns: minmax(0, auto) minmax(250px, 1fr) auto; }
.header-profile-badge { display: flex; width: auto; min-width: 0; align-items: center; justify-content: flex-end; gap: 4px; }
.demo-header-pill { position: relative; display: flex; max-width: 138px; min-width: 0; align-items: center; gap: 6px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 9px; cursor: help; }
.demo-header-pill b { color: var(--accent); font-size: 7px; letter-spacing: .65px; }
.demo-header-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-header-action { display: grid; width: 24px; height: 24px; padding: 0; place-items: center; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.demo-header-action:hover,
.demo-header-action:focus-visible { border-color: var(--border); outline: none; color: var(--text); background: var(--surface2); }

/* Setup */
body.setup-open { overflow: hidden; }
.setup-modal { position: fixed; z-index: 12000; inset: 0; display: grid; padding: 28px; place-items: center; background: rgba(2, 6, 14, .82); backdrop-filter: blur(16px); }
.setup-modal[hidden] { display: none; }
.setup-dialog { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1120px, calc(100vw - 56px)); max-height: calc(100vh - 56px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: 22px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, var(--accent)), var(--bg)); box-shadow: 0 36px 100px rgba(0,0,0,.58); }
.setup-close { position: absolute; z-index: 3; top: 12px; right: 14px; display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.setup-close:hover,
.setup-close:focus-visible { border-color: var(--accent); outline: none; color: var(--text); background: var(--surface2); }
.setup-progress { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 16px 58px 13px 22px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface2) 55%, transparent); }
.setup-progress span { position: relative; display: flex; min-width: 0; align-items: center; gap: 7px; color: var(--muted); }
.setup-progress span::after { content: ''; position: absolute; z-index: 0; top: 11px; right: 4px; left: 26px; height: 1px; background: var(--border); }
.setup-progress span:last-child::after { display: none; }
.setup-progress b { position: relative; z-index: 1; display: grid; flex: 0 0 auto; width: 23px; height: 23px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); font-size: 8px; }
.setup-progress small { position: relative; z-index: 1; overflow: hidden; padding-right: 5px; background: var(--surface2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.setup-progress .active { color: var(--accent); }
.setup-progress .active b { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); }
.setup-progress .done b { border-color: var(--green); background: var(--green-dim); color: var(--green); }
.setup-body { min-height: 510px; padding: 34px 40px; overflow-y: auto; }
.setup-kicker { margin: 0 0 9px; color: var(--accent); font-size: 9px; font-weight: 850; letter-spacing: 1.2px; text-transform: uppercase; }
.setup-copy { max-width: 720px; margin-bottom: 27px; }
.setup-copy h2,
.setup-hero h2,
.setup-result h2 { margin: 0 0 10px; color: var(--text); font-size: clamp(25px, 3vw, 40px); line-height: 1.05; letter-spacing: -1.15px; }
.setup-copy p,
.setup-hero > p,
.setup-result > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.setup-hero { position: relative; display: grid; min-height: 430px; align-content: center; padding-right: 35%; }
.setup-hero h2 { max-width: 680px; font-size: clamp(37px, 5vw, 62px); }
.setup-orbit { position: absolute; right: 8%; display: grid; width: 210px; height: 210px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); border-radius: 50%; color: var(--accent); font-size: 88px; box-shadow: 0 0 0 35px color-mix(in srgb, var(--purple) 5%, transparent), 0 0 0 70px color-mix(in srgb, var(--accent) 4%, transparent); }
.setup-principles { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.setup-principles span { padding: 9px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 10px; }
.setup-principles b { margin-right: 6px; color: var(--accent); }
.setup-fields { display: grid; gap: 14px; }
.setup-fields-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setup-fields-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.setup-fields label,
.setup-count,
.setup-mini-row label { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; }
.setup-fields input,
.setup-fields select,
.setup-count input,
.setup-mini-row input,
.setup-mini-row select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; outline: none; background: var(--bg); color: var(--text); }
.setup-fields input:focus,
.setup-fields select:focus,
.setup-mini-row input:focus,
.setup-mini-row select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.setup-count { width: 260px; margin-bottom: 15px; }
.setup-entity-list,
.setup-mini-list { display: grid; gap: 10px; }
.setup-entity-card { position: relative; padding: 16px 16px 16px 55px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--surface2) 64%, transparent); }
.setup-entity-number { position: absolute; top: 20px; left: 17px; color: var(--accent); font-size: 9px; font-weight: 850; letter-spacing: .7px; }
.setup-account-grid { grid-template-columns: 1.2fr .9fr 1fr .8fr .7fr; align-items: end; }
.setup-check { flex-direction: row !important; align-items: center; align-self: center; color: var(--text) !important; }
.setup-check input { width: 15px; min-height: 15px; }
.setup-split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.setup-split-section > div { min-width: 0; padding: 15px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--surface2) 55%, transparent); }
.setup-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.setup-section-heading h3 { margin: 0; font-size: 13px; }
.setup-section-heading button,
.setup-remove { border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--accent); cursor: pointer; }
.setup-section-heading button { padding: 7px 10px; font-size: 9px; }
.setup-mini-row { position: relative; display: grid; grid-template-columns: 1.2fr .9fr .8fr 1fr 28px; gap: 8px; align-items: end; padding: 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.setup-debt-row { grid-template-columns: 1.15fr .9fr .8fr .8fr 1fr 28px; }
.setup-remove { width: 28px; height: 40px; color: var(--muted); }
.setup-empty { margin: 0; padding: 25px; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); font-size: 10px; text-align: center; }
.setup-salary-confirm { margin-top: 19px; }
.setup-note { margin-top: 11px; color: var(--muted); font-size: 9.5px; }
.setup-result { text-align: center; }
.setup-net-worth { display: block; margin: 18px 0 8px; color: var(--green); font-size: clamp(44px, 7vw, 82px); letter-spacing: -3px; }
.setup-net-worth.negative { color: var(--red); }
.setup-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 10px; align-items: center; margin: 30px 0 22px; }
.setup-equation span { padding: 15px 9px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); }
.setup-equation small,
.setup-equation b { display: block; }
.setup-equation small { margin-bottom: 5px; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.setup-equation b { font-size: 15px; }
.setup-equation i { color: var(--muted); font-style: normal; }
.setup-ready { display: flex; max-width: 680px; margin: 0 auto; gap: 12px; padding: 14px; border: 1px solid color-mix(in srgb, var(--green) 35%, var(--border)); border-radius: 12px; background: var(--green-dim); text-align: left; }
.setup-ready > span { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--green); color: var(--bg); }
.setup-ready b { font-size: 11px; }
.setup-ready p { margin: 3px 0 0; color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.setup-actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 14px 22px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface2) 55%, transparent); }
.setup-actions > span { color: var(--muted); font-size: 9px; }
.setup-actions button { min-height: 39px; padding: 8px 15px; border-radius: 9px; font-weight: 750; cursor: pointer; }
.setup-back { justify-self: start; border: 1px solid var(--border); background: transparent; color: var(--muted); }
.setup-next { justify-self: end; border: 1px solid var(--accent); background: var(--accent); color: #07111d; }

/* Bienvenida interactiva */
.welcome-shade { position: fixed; z-index: 10990; inset: 0; visibility: hidden; background: rgba(2, 6, 14, .74); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.welcome-open .welcome-shade { visibility: visible; opacity: 1; }
.welcome-target { position: relative !important; z-index: 11000 !important; border-radius: 13px; box-shadow: 0 0 0 4px var(--accent), 0 0 0 9999px rgba(2, 6, 14, .06), 0 22px 70px rgba(0,0,0,.48) !important; }
.welcome-coach { position: fixed; z-index: 11020; width: min(420px, calc(100vw - 36px)); padding: 19px; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)); border-radius: 15px; background: color-mix(in srgb, var(--surface) 96%, var(--accent)); box-shadow: 0 25px 70px rgba(0,0,0,.5); }
.welcome-coach[hidden] { display: none; }
.welcome-eyebrow { margin: 0 0 5px !important; color: var(--accent) !important; font-size: 8px !important; font-weight: 850; letter-spacing: .9px; text-transform: uppercase; }
.welcome-coach h2 { margin: 0 0 7px; font-size: 20px; letter-spacing: -.35px; }
.welcome-coach > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.welcome-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 9px; margin-top: 17px; }
.welcome-footer > span { color: var(--muted); font-size: 8px; }
.welcome-footer > div { display: flex; justify-content: flex-end; gap: 6px; }
.welcome-footer button { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); font-size: 9px; cursor: pointer; }
.welcome-footer button:disabled { opacity: .35; }
.welcome-footer .welcome-skip { justify-self: start; border-color: transparent; color: var(--muted); }
.welcome-footer .welcome-next { border-color: var(--accent); background: var(--accent); color: #07111d; font-weight: 800; }
.account-onboarding-card { grid-column: 1 / -1; min-height: 0; padding-block: 13px; background: transparent; }
.account-onboarding-card .privacy-card-heading { margin-bottom: 4px; }
.onboarding-restart-actions { justify-content: flex-start; }

/* Changelog: primero el significado de la entrega, después la cronología. */
.changelog-featured { padding: 17px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); border-radius: 13px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), color-mix(in srgb, var(--purple) 7%, var(--surface))); }
.changelog-featured > div > span { color: var(--accent); font-size: 8px; font-weight: 850; letter-spacing: .75px; text-transform: uppercase; }
.changelog-featured h3 { margin: 6px 0 12px; color: var(--text); font-size: 17px; line-height: 1.2; letter-spacing: -.25px; }
.changelog-featured ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.changelog-featured li { position: relative; padding-left: 15px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.changelog-featured li::before { content: '↗'; position: absolute; left: 0; color: var(--green); }
.changelog-timeline { position: relative; display: grid; gap: 7px; margin-top: 13px; padding-left: 13px; }
.changelog-timeline::before { content: ''; position: absolute; top: 5px; bottom: 5px; left: 3px; width: 1px; background: linear-gradient(var(--accent), var(--border) 18%, var(--border)); }
.changelog-timeline .changelog-release { position: relative; }
.changelog-timeline .changelog-release::before { content: ''; position: absolute; top: 16px; left: -13px; width: 7px; height: 7px; border: 2px solid var(--surface); border-radius: 50%; background: var(--border); }

/* 0.37 · identidad visual conservando siempre la proporción del raster. */
.app-placeholder-brand { position: relative; display: flex; width: 300px; height: 64px; align-items: center; justify-content: center; overflow: hidden; border-radius: 9px; background: #071321; }
.app-placeholder-brand img { display: block; width: 116%; max-width: none; height: auto; flex: 0 0 auto; image-rendering: auto; }
.app-placeholder-brand sup { position: absolute; top: 2px; right: 0; padding: 2px 5px; border: 1px solid color-mix(in srgb, var(--teal) 55%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--teal) 13%, var(--surface)); color: var(--teal); font-size: 7px; font-weight: 900; letter-spacing: .8px; }

.auth-brand-image { display: block; width: 116%; max-width: none; height: auto; flex: 0 0 auto; image-rendering: auto; border-radius: 10px; }

/* Demo: thumbnail real, color contenido y una sola acción inequívoca. */
header { grid-template-columns: minmax(180px, auto) minmax(260px, 1fr) auto; }
.header-profile-badge { align-self: center; justify-self: start; justify-content: flex-start; padding: 0; border: 0; background: transparent; }
.demo-header-pill { max-width: 178px; padding: 4px 8px 4px 4px; gap: 8px; border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, var(--surface)), color-mix(in srgb, var(--purple) 9%, var(--surface))); cursor: default; box-shadow: 0 7px 20px rgba(0,0,0,.16); }
.demo-header-pill img { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)); border-radius: 50%; object-fit: cover; object-position: center 35%; }
.demo-header-pill > span { display: grid; min-width: 0; gap: 1px; }
.demo-header-pill b { color: var(--teal); }
.demo-header-pill strong { overflow: hidden; color: var(--text); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.demo-header-action { display: inline-flex; width: auto; height: 32px; padding: 0 9px; gap: 5px; border-color: color-mix(in srgb, var(--purple) 35%, var(--border)); border-radius: 9px; background: color-mix(in srgb, var(--purple) 8%, var(--surface)); color: var(--text); }
.demo-header-action span { color: var(--teal); font-size: 14px; }
.demo-header-action small { font-size: 8.5px; font-weight: 750; white-space: nowrap; }

/* Setup visual de ocho pasos. */
.setup-progress { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.setup-account-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px 18px; padding: 16px; border-left: 4px solid var(--setup-account-color); background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--setup-account-color) 14%, transparent), transparent 34%), color-mix(in srgb, var(--surface2) 64%, transparent); }
.setup-account-card-heading { display: flex; grid-row: 1 / 3; align-items: flex-start; gap: 11px; }
.setup-account-icon { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--setup-account-color) 50%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--setup-account-color) 14%, var(--surface)); font-size: 23px; }
.setup-account-card-heading > div { display: grid; min-width: 0; gap: 3px; }
.setup-account-card-heading .setup-entity-number { position: static; color: var(--setup-account-color); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.setup-account-card-heading strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; }
.setup-account-card-heading small { color: var(--muted); font-size: 9px; }
.setup-account-type-picker { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; border: 0; }
.setup-account-type-picker legend { margin-bottom: 7px; color: var(--muted); font-size: 9px; font-weight: 750; }
.setup-account-type-picker label { position: relative; display: grid; min-height: 62px; padding: 8px 4px; place-items: center; gap: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--muted); cursor: pointer; text-align: center; }
.setup-account-type-picker input { position: absolute; opacity: 0; pointer-events: none; }
.setup-account-type-picker label:has(input:checked) { border-color: var(--type-color); background: color-mix(in srgb, var(--type-color) 13%, var(--surface)); color: var(--text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--type-color) 17%, transparent); }
.setup-account-type-picker label > span { font-size: 17px; }
.setup-account-type-picker label small { font-size: 7.5px; line-height: 1.15; }
.setup-account-grid { grid-template-columns: 1.15fr 1fr .8fr .95fr; }
.setup-investment-row { display: block; padding: 13px; }
.setup-investment-main { display: grid; grid-template-columns: 1.2fr .85fr .8fr 1fr 28px; gap: 8px; align-items: end; }
.setup-market-search { display: grid; grid-template-columns: minmax(190px, 1.1fr) minmax(220px, 1fr) 150px; gap: 10px; align-items: end; margin-top: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--teal) 6%, var(--bg)); }
.setup-market-search > div:first-child { align-self: center; }
.setup-market-search strong,
.setup-market-search small { display: block; }
.setup-market-search strong { margin-bottom: 3px; color: var(--teal); font-size: 10px; }
.setup-market-search small { color: var(--muted); font-size: 8.5px; line-height: 1.4; }
.setup-search-row { display: flex; gap: 6px; }
.setup-search-row button { padding: 0 10px; border: 1px solid var(--teal); border-radius: 8px; background: var(--teal-dim); color: var(--teal); cursor: pointer; font-size: 9px; font-weight: 750; }
.setup-market-status { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 9px; }
.setup-market-results { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.setup-market-results[hidden] { display: none; }
.setup-market-results button { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; text-align: left; }
.setup-market-results button:hover { border-color: var(--teal); }
.setup-market-results b { color: var(--teal); }
.setup-market-results span { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.setup-market-results small { grid-column: 2; }
.setup-asset-row { display: block; padding: 13px; }
.setup-asset-picker { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin-bottom: 12px; }
.setup-asset-picker button { position: relative; display: grid; min-width: 0; height: 82px; padding: 0; overflow: hidden; place-items: end stretch; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); color: white; cursor: pointer; text-align: left; }
.setup-asset-picker img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .58; transition: opacity .15s ease, transform .15s ease; }
.setup-asset-picker button::after { content: ''; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent, rgba(2, 6, 14, .9)); }
.setup-asset-picker span,
.setup-asset-picker small { position: relative; z-index: 1; }
.setup-asset-picker span { position: absolute; top: 6px; left: 7px; font-size: 15px; }
.setup-asset-picker small { padding: 7px; font-size: 7.5px; font-weight: 800; line-height: 1.15; }
.setup-asset-picker button:hover img { opacity: .75; transform: scale(1.04); }
.setup-asset-picker button.active { border-color: var(--teal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 25%, transparent); }
.setup-asset-picker button.active img { opacity: .82; }
.setup-asset-fields { display: grid; grid-template-columns: 1.3fr .8fr .65fr 28px; gap: 8px; align-items: end; }
.btn-register-sale { min-height: 34px; padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--green) 58%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--green) 10%, var(--surface)); color: var(--green); cursor: pointer; font-size: 9px; font-weight: 800; }
.btn-register-sale:hover:not(:disabled),
.btn-register-sale:focus-visible { border-color: var(--green); outline: none; background: color-mix(in srgb, var(--green) 18%, var(--surface)); }
.btn-register-sale:disabled { cursor: not-allowed; opacity: .38; }
.setup-section-heading > div > small { display: block; margin-top: 3px; color: var(--muted); font-size: 8.5px; }
.setup-net-worth.neutral { color: var(--text); }
.setup-result { position: relative; }
.setup-result.celebrating .setup-net-worth { animation: setup-result-arrive .8s cubic-bezier(.16, 1, .3, 1) both; }
.setup-celebration { position: absolute; inset: -20px 0 auto; height: 230px; overflow: hidden; pointer-events: none; }
.setup-celebration i { position: absolute; top: -25px; left: calc(5% + (var(--i) * 8%)); color: hsl(calc(175 + var(--i) * 13) 80% 62%); font-size: calc(8px + (var(--i) % 3) * 4px); font-style: normal; animation: setup-confetti 1.65s calc(var(--i) * 55ms) cubic-bezier(.2,.7,.25,1) both; }
@keyframes setup-result-arrive { from { opacity: 0; transform: scale(.82); } 55% { transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes setup-confetti { 0% { opacity: 0; transform: translateY(0) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc((var(--i) - 5) * 5px), 210px) rotate(430deg); } }

/* Bienvenida: el módulo actual permanece visible además del foco puntual. */
.welcome-module-current { position: relative; z-index: 11002 !important; border-color: var(--teal) !important; background: color-mix(in srgb, var(--teal) 18%, var(--surface)) !important; color: white !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 28%, transparent); }
.welcome-module-label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; margin: -5px -5px 14px; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--teal) 32%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--teal) 8%, var(--surface2)); }
.welcome-module-label > span { font-size: 15px; }
.welcome-module-label b { color: var(--teal); font-size: 10px; }
.welcome-module-label small { color: var(--muted); font-size: 8px; }

/* Análisis: métricas siempre visibles y periodo compacto. */
.analysis-summary { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 0; }
.analysis-period-bar { display: flex; min-height: 54px; align-items: center; gap: 11px; margin-bottom: 18px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface) 82%, transparent); }
.analysis-period-icon { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: var(--accent-dim); color: var(--accent); }
.analysis-period-bar > div { margin-right: auto; }
.analysis-period-bar > div strong,
.analysis-period-bar > div small { display: block; }
.analysis-period-bar > div strong { font-size: 10px; }
.analysis-period-bar > div small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.analysis-period-bar label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 8px; font-weight: 750; }
.analysis-period-bar select { min-width: 132px; height: 34px; padding: 0 28px 0 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 9px; }
.analysis-period-reset { height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--accent); cursor: pointer; font-size: 8.5px; font-weight: 750; }
.analysis-period-reset:hover { border-color: var(--border); background: var(--surface2); }

@media (prefers-reduced-motion: reduce) {
  .setup-result.celebrating .setup-net-worth,
  .setup-celebration i { animation: none; }
}