/* ==========================================================================
   MOA FINANCE — STUDIO 2026 (capa visual v3)
   Se carga después de styles.css y premium-v2.css. Solo cambia la apariencia:
   no toca IDs, formularios ni contratos con app.js.

   Ideas clave:
   · Paleta oficial MOA (teal #178391, morado #4F1A48, rosa, naranja, amarillo).
   · Cada pestaña tiene su propio color de acento (variables --acc*), que se
     transiciona suavemente al cambiar de vista (studio-fx.js pone
     body[data-view]).
   · Tipografía Poppins, tamaños cómodos de lectura y números tabulares.
   ========================================================================== */

@property --acc   { syntax: '<color>'; inherits: true; initial-value: #178391; }
@property --acc-2 { syntax: '<color>'; inherits: true; initial-value: #0a4e56; }
@property --acc-soft { syntax: '<color>'; inherits: true; initial-value: #e6f3f4; }
@property --acc-ink  { syntax: '<color>'; inherits: true; initial-value: #0e6670; }

:root {
  /* Marca */
  --brand-teal: #178391;
  --brand-teal-dark: #036870;
  --brand-purple: #4f1a48;
  --brand-purple-light: #82647f;
  --brand-pink: #e62962;
  --brand-carmine: #c40847;
  --brand-orange: #f9b03b;
  --brand-yellow: #f9d05d;
  --brand-gray: #ededed;

  /* Superficies y texto */
  --s-canvas: #f3f6f8;
  --s-card: #ffffff;
  --s-sunken: #f6f9fa;
  --s-line: #e3eaee;
  --s-line-strong: #cfdbe1;
  --s-ink: #12303a;
  --s-ink-2: #2f4a55;
  --s-muted: #64798a;
  --s-faint: #93a4b0;
  --s-night: #0b2a30;
  --s-night-2: #071c21;

  /* Colores semánticos */
  --c-green: #12a07a;
  --c-green-soft: #e3f6ef;
  --c-amber: #e8921c;
  --c-amber-soft: #fef3e2;
  --c-teal: #178391;
  --c-teal-soft: #e4f3f5;
  --c-rose: #e62962;
  --c-rose-soft: #fdebf1;
  --c-purple: #7a3b72;
  --c-purple-soft: #f5edf4;
  --c-blue: #2f6fd0;
  --c-blue-soft: #e9f0fc;
  --c-violet: #6a5ae0;
  --c-violet-soft: #efedfd;
  --c-slate: #4a6c8c;
  --c-slate-soft: #ebf1f6;

  /* Acento por defecto (Resumen) */
  --acc: #178391;
  --acc-2: #0a4e56;
  --acc-soft: #e6f3f4;
  --acc-ink: #0e6670;

  /* Re-mapeo de la paleta anterior hacia la marca oficial */
  --moa-green-975: #06363c;
  --moa-green-950: #0a4e56;
  --moa-green-900: #0e5d66;
  --moa-green-850: #106a75;
  --moa-green-800: #127684;
  --moa-green-750: #2f4a55;
  --moa-green-700: #178391;
  --moa-green-650: #4c6574;
  --moa-green-500: #64798a;
  --moa-green-300: #b9cad3;
  --moa-green-150: #e3eaee;
  --moa-green-100: #edf3f5;
  --moa-green-050: #f6f9fa;
  --moa-purple-950: #2a0d26;
  --moa-purple-900: #3b1235;
  --moa-purple-800: #4f1a48;
  --moa-purple-700: #65295d;
  --moa-purple-600: #82647f;
  --moa-purple-300: #c2aec0;
  --moa-purple-150: #e5dbe4;
  --moa-purple-100: #f0eaef;
  --moa-purple-050: #f8f4f7;

  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-numeric: "Poppins", ui-sans-serif, system-ui, sans-serif;

  --r-xl: 24px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;

  --sh-1: 0 1px 2px rgba(18, 48, 58, .04), 0 4px 14px rgba(18, 48, 58, .05);
  --sh-2: 0 2px 6px rgba(18, 48, 58, .05), 0 14px 34px rgba(18, 48, 58, .08);
  --sh-3: 0 30px 80px rgba(7, 28, 33, .28);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);

  --v2-sidebar: 268px;
  --sidebar-width: 268px;
}

/* Acento de cada pestaña ---------------------------------------------------- */
body[data-view="directiva"] { --acc: #5e2556; --acc-2: #2a0a26; --acc-soft: #f4ecf3; --acc-ink: #5e2556; }
body[data-view="dashboard"] { --acc: #178391; --acc-2: #0a4e56; --acc-soft: #e6f3f4; --acc-ink: #0e6670; }
body[data-view="pnl"]       { --acc: #8a4682; --acc-2: #3b1235; --acc-soft: #f6eef5; --acc-ink: #5e2556; }
body[data-view="budget"]    { --acc: #ec9a26; --acc-2: #b2560a; --acc-soft: #fef4e4; --acc-ink: #8f4807; }
body[data-view="accounts"]  { --acc: #e62962; --acc-2: #a3063b; --acc-soft: #fdecf1; --acc-ink: #a3063b; }
body[data-view="loans"]     { --acc: #3a7be0; --acc-2: #1a3e86; --acc-soft: #eaf1fc; --acc-ink: #1d4c9f; }
body[data-view="movements"] { --acc: #7564ea; --acc-2: #36298f; --acc-soft: #f0eefd; --acc-ink: #4334b0; }
body[data-view="register"]  { --acc: #18b08a; --acc-2: #0b5f4e; --acc-soft: #e5f7f1; --acc-ink: #0b6b57; }

body {
  transition: --acc .6s ease, --acc-2 .6s ease, --acc-soft .6s ease, --acc-ink .6s ease;
}

/* ==========================================================================
   1) Base
   ========================================================================== */
html { background: var(--s-canvas); }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--s-ink-2);
  background: var(--s-canvas);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
}

body::before { display: none !important; }

button, input, select, textarea { font-family: var(--font-sans); }

h1, h2, h3, h4, strong { color: var(--s-ink); }

::selection { color: #fff; background: var(--acc); }

.eyebrow {
  color: var(--acc-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ==========================================================================
   2) Login — tema financiero (sin efecto líquido)
   ========================================================================== */
.auth-screen.lx {
  position: fixed;
  inset: 0;
  z-index: 100;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  color: #fff;
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(23, 131, 145, .45), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(79, 26, 72, .55), transparent 60%),
    linear-gradient(160deg, #0b2a30 0%, #081f25 55%, #071a1f 100%);
  font-family: var(--font-sans);
}

.lx-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.lx-grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 40% 45%, #000 0%, transparent 75%);
  animation: lx-grid-pan 30s linear infinite;
}

@keyframes lx-grid-pan { to { background-position: 64px 64px, 64px 64px; } }

.lx-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
}
.lx-glow-a { width: 460px; height: 460px; left: -120px; top: 10%; background: #178391; animation: lx-drift-a 18s ease-in-out infinite alternate; }
.lx-glow-b { width: 380px; height: 380px; right: 4%; bottom: -120px; background: #82647f; opacity: .38; animation: lx-drift-b 22s ease-in-out infinite alternate; }
.lx-glow-c { width: 260px; height: 260px; left: 46%; top: -90px; background: #f9b03b; opacity: .16; animation: lx-drift-a 26s ease-in-out infinite alternate-reverse; }

@keyframes lx-drift-a { to { transform: translate(90px, 60px) scale(1.12); } }
@keyframes lx-drift-b { to { transform: translate(-80px, -70px) scale(1.08); } }

.lx-symbols i {
  position: absolute;
  left: var(--x);
  bottom: -60px;
  color: rgba(255, 255, 255, .07);
  font-size: calc(46px * var(--s));
  font-style: normal;
  font-weight: 700;
  animation: lx-rise 24s linear infinite;
  animation-delay: var(--d);
}

@keyframes lx-rise {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-115vh) rotate(25deg); opacity: 0; }
}

.lx-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  width: min(1240px, 100%);
  flex: 1 0 auto;
  margin: 0 auto;
  padding: clamp(28px, 5vh, 64px) clamp(20px, 4vw, 56px) 32px;
}

.lx-hero { min-width: 0; animation: lx-fade-up .9s var(--ease-out) both; }

.lx-logo { display: block; width: 170px; height: auto; margin-bottom: 34px; }

.lx-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 7px 14px 7px 10px;
  color: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  font-size: 12.5px;
  font-weight: 500;
}
.lx-kicker span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3fe0b0;
  box-shadow: 0 0 0 0 rgba(63, 224, 176, .6);
  animation: lx-live 2s ease-out infinite;
}

.lx-headline {
  margin: 0;
  color: #fff;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.lx-headline em { display: block; font-style: italic; font-weight: 300; color: rgba(255, 255, 255, .86); }
.lx-headline strong {
  font-weight: 800;
  color: transparent;
  background: linear-gradient(95deg, #5fd3da 0%, #9ff0d9 45%, #f9d05d 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.lx-lead {
  max-width: 520px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .66);
  font-size: 15.5px;
  line-height: 1.65;
}

.lx-stage { position: relative; height: clamp(220px, 32vh, 300px); margin-top: 36px; }

.lx-chart { width: 100%; height: 100%; overflow: visible; }
.lx-gridlines line { stroke: rgba(255, 255, 255, .08); stroke-width: 1; stroke-dasharray: 4 6; }
.lx-candles g { transform-box: fill-box; transform-origin: 50% 100%; animation: lx-candle .7s var(--ease-spring) both; animation-delay: calc(.25s + var(--i) * .07s); }
.lx-candles line { stroke-width: 2; stroke-linecap: round; }
.lx-candles .up line { stroke: rgba(63, 224, 176, .55); }
.lx-candles .up rect { fill: rgba(63, 224, 176, .32); stroke: rgba(63, 224, 176, .75); stroke-width: 1.2; }
.lx-candles .dn line { stroke: rgba(240, 90, 130, .55); }
.lx-candles .dn rect { fill: rgba(240, 90, 130, .30); stroke: rgba(240, 90, 130, .75); stroke-width: 1.2; }

@keyframes lx-candle { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

.lx-area { fill: url(#lx-area); opacity: 0; animation: lx-fade 1s ease 1.6s forwards; }
.lx-line {
  fill: none;
  stroke: url(#lx-line);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 6px 14px rgba(63, 193, 201, .45));
  animation: lx-draw 2.2s var(--ease-out) .5s forwards;
}
.lx-dot { fill: #f9d05d; opacity: 0; animation: lx-fade .3s ease 2.5s forwards; }
.lx-pulse {
  fill: none;
  stroke: #f9d05d;
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: lx-ping 2.2s ease-out 2.7s infinite;
}

@keyframes lx-draw { to { stroke-dashoffset: 0; } }
@keyframes lx-fade { to { opacity: 1; } }
@keyframes lx-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.6); } }

.lx-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  background: #10343b;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .32);
  opacity: 0;
  animation: lx-pop .7s var(--ease-spring) forwards, lx-bob 6s ease-in-out infinite;
}
.lx-float small { display: block; color: rgba(255, 255, 255, .55); font-size: 11px; font-weight: 500; }
.lx-float b { display: block; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.lx-float-a { left: 2%; top: -6%; animation-delay: 1.2s, 2s; }
.lx-float-b { right: 0; top: 34%; animation-delay: 1.6s, 2.6s; }
.lx-float-c { left: 30%; bottom: -10%; animation-delay: 2s, 3.2s; }

@keyframes lx-pop { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes lx-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

.lx-float-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: #3fe0b0;
  background: rgba(63, 224, 176, .14);
  font-size: 18px;
  font-weight: 700;
}
.lx-spark { width: 60px; height: 24px; }
.lx-spark path { fill: none; stroke: #3fe0b0; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: lx-draw 1.4s ease 2s forwards; }

.lx-ring { display: grid; width: 38px; height: 38px; }
.lx-ring svg { transform: rotate(-90deg); }
.lx-ring circle { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 4; }
.lx-ring .lx-ring-fill { stroke: #f9b03b; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: lx-ring 1.6s var(--ease-out) 2.2s forwards; }
@keyframes lx-ring { to { stroke-dashoffset: 32; } }

.lx-live {
  width: 12px;
  height: 12px;
  margin: 0 6px 0 8px;
  border-radius: 50%;
  background: #3fe0b0;
  box-shadow: 0 0 0 0 rgba(63, 224, 176, .6);
  animation: lx-live 2s ease-out infinite;
}
@keyframes lx-live { 0% { box-shadow: 0 0 0 0 rgba(63, 224, 176, .55); } 100% { box-shadow: 0 0 0 14px rgba(63, 224, 176, 0); } }

/* Tarjeta de acceso */
.lx-panel { display: flex; justify-content: center; min-width: 0; }

.lx-card {
  position: relative;
  width: min(430px, 100%);
  padding: 40px 36px 30px;
  overflow: hidden;
  color: var(--s-ink-2);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--sh-3), 0 0 0 1px rgba(255, 255, 255, .06);
  animation: lx-card-in .9s var(--ease-out) .15s both;
}

@keyframes lx-card-in { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes lx-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.lx-card-stripe {
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, #178391 0%, #178391 25%, #4f1a48 25%, #4f1a48 50%, #e62962 50%, #e62962 75%, #f9b03b 75%);
  background-size: 200% 100%;
  animation: lx-stripe 8s linear infinite;
}
@keyframes lx-stripe { to { background-position: -200% 0; } }

.lx-card-logo { display: block; width: 120px; height: auto; margin-bottom: 26px; }

.lx-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding: 6px 12px;
  color: #0e6670;
  border-radius: 999px;
  background: #e6f3f4;
  font-size: 12px;
  font-weight: 600;
}
.lx-badge svg { width: 15px; height: 15px; }

.lx-title { margin: 0; font-size: 30px; line-height: 1.12; letter-spacing: -.02em; }
.lx-title em { display: block; color: #178391; font-style: italic; font-weight: 300; font-size: 22px; }
.lx-title strong { color: #4f1a48; font-weight: 800; }

.lx-desc { margin: 12px 0 24px; color: var(--s-muted); font-size: 14.5px; line-height: 1.6; }

.lx-google { display: flex; min-height: 46px; align-items: center; }

.lx-error {
  margin: 16px 0 0;
  padding: 11px 14px;
  color: #a3063b;
  border: 1px solid #f7c3d3;
  border-radius: 12px;
  background: #fdecf1;
  font-size: 13px;
  line-height: 1.5;
}
.lx-error.hidden { display: none; }

.lx-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 20px 0 0;
  list-style: none;
  border-top: 1px solid var(--s-line);
}
.lx-perks li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  color: var(--s-ink-2);
  border-radius: 999px;
  background: var(--s-sunken);
  font-size: 12px;
  font-weight: 500;
}
.lx-perks li span { font-size: 8px; }
.lx-perks li:nth-child(1) span { color: #178391; }
.lx-perks li:nth-child(2) span { color: #f9b03b; }
.lx-perks li:nth-child(3) span { color: #e62962; }

.lx-foot { display: block; margin-top: 16px; color: var(--s-faint); font-size: 12px; line-height: 1.5; }

/* Cinta financiera inferior */
.lx-ticker {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .18);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lx-ticker-track {
  display: flex;
  width: max-content;
  animation: lx-ticker 46s linear infinite;
}
.lx-ticker span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lx-ticker b { font-size: 10px; }
.lx-ticker b.up { color: #3fe0b0; }
.lx-ticker b.dn { color: #f05a82; }
.lx-ticker b.flat { color: #f9d05d; }
@keyframes lx-ticker { to { transform: translateX(-50%); } }

@media (max-width: 980px) {
  .lx-layout { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
  .lx-hero { text-align: left; }
  .lx-logo { width: 140px; margin-bottom: 22px; }
  .lx-stage { height: 190px; margin-top: 24px; }
  .lx-float-b, .lx-float-c { display: none; }
  .lx-panel { justify-content: stretch; }
  .lx-card { width: 100%; }
}

@media (max-width: 560px) {
  .lx-layout { padding-inline: 16px; }
  .lx-headline { font-size: 38px; }
  .lx-lead { font-size: 14px; }
  .lx-stage { height: 150px; }
  .lx-float { display: none; }
  .lx-card { padding: 32px 22px 24px; border-radius: 22px; }
  .lx-title { font-size: 26px; }
}

/* ==========================================================================
   3) Estructura de la app
   ========================================================================== */
body.authed {
  background: var(--s-canvas);
}

body.authed .app-shell {
  grid-template-columns: var(--v2-sidebar) minmax(0, 1fr);
}

/* Halo de color del acento, fijo detrás del contenido */
body.authed .main::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -20vh -10vw auto auto;
  width: 60vw;
  height: 60vh;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 13%, transparent), transparent);
  box-shadow: none;
  pointer-events: none;
}

body.authed .main { padding: 0 clamp(16px, 2.4vw, 36px) 56px; }

/* ==========================================================================
   4) Sidebar
   ========================================================================== */
body.authed .sidebar {
  padding: 24px 14px 16px;
  background:
    radial-gradient(420px 260px at 0% 105%, color-mix(in srgb, var(--acc) 34%, transparent), transparent 70%),
    linear-gradient(180deg, #0c2c33 0%, #08222a 100%);
  box-shadow: none;
  border-right: 1px solid rgba(255, 255, 255, .04);
}

body.authed .sidebar::before {
  opacity: 1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(180deg, #000, transparent 55%);
}
body.authed .sidebar::after { display: none; }

body.authed .brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 0;
  margin: 0 0 26px;
  padding: 0 10px;
}
body.authed .brand-logo { display: block; width: 112px; height: auto; }
body.authed .brand-chip {
  padding: 5px 10px;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--acc) 40%, transparent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}

body.authed .nav { position: relative; gap: 4px; padding-bottom: 16px; }
body.authed .nav::before {
  margin: 0 12px 8px;
  color: rgba(255, 255, 255, .38);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
}

/* Indicador deslizante del ítem activo (lo posiciona studio-fx.js) */
.nav-indicator {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--acc) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .5s var(--ease-spring), height .3s ease, opacity .3s ease;
  pointer-events: none;
}

body.authed .nav-item {
  z-index: 1;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  min-height: 54px;
  padding: 8px 10px;
  color: rgba(255, 255, 255, .74);
  border: 0;
  border-radius: 14px;
  text-align: left;
  transition: background .2s ease, color .2s ease, transform .25s var(--ease-out);
}
body.authed .nav-item > .nav-icon {
  width: 36px;
  height: 36px;
  color: rgba(255, 255, 255, .78);
  border: 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, .06);
  transition: background .25s ease, color .25s ease, transform .35s var(--ease-spring);
}
body.authed .nav-icon svg { width: 19px; height: 19px; }
body.authed .nav-item,
body.authed .nav-item * { text-align: left !important; }
body.authed .nav-item > .nav-copy {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-self: stretch;
  min-width: 0;
  width: 100% !important;
  place-items: initial;
}
body.authed .nav-item.active > .nav-icon { color: #fff !important; background: rgba(255, 255, 255, .2) !important; border-color: transparent !important; }
body.authed .nav-copy strong { color: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; }
body.authed .nav-copy small { margin-top: 1px; color: rgba(255, 255, 255, .42); font-size: 11px; font-weight: 400; }

body.authed .nav-item:hover { color: #fff; background: rgba(255, 255, 255, .05); transform: translateX(3px); }
body.authed .nav-item:hover > .nav-icon { transform: scale(1.06); }

body.authed .nav-item.active,
body.authed .nav-item.active:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  box-shadow: none;
  transform: none;
}
body.authed .nav.has-indicator .nav-item.active { background: transparent; }
body.authed .nav-item.active::before { display: none; }
body.authed .nav-item.active > .nav-icon { color: #fff; background: rgba(255, 255, 255, .2); box-shadow: none; }
body.authed .nav-item.active .nav-copy strong { color: #fff !important; }
body.authed .nav-item.active .nav-copy small { color: rgba(255, 255, 255, .78) !important; }

body.authed .sidebar-card {
  min-height: 0;
  margin: auto 0 10px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .05);
  box-shadow: none;
}
body.authed .sidebar-card::before {
  width: 90px;
  height: 90px;
  right: -30px;
  bottom: -40px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 55%, transparent), transparent);
  box-shadow: none;
}
body.authed .sidebar-card .eyebrow { color: rgba(255, 255, 255, .55); font-size: 10.5px; }
body.authed .sidebar-card strong { margin: 6px 0 2px; color: #fff; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
body.authed .sidebar-card small { color: rgba(255, 255, 255, .5); font-size: 11.5px; }

body.authed .sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  background: rgba(0, 0, 0, .18);
}
body.authed .user-avatar { width: 38px; height: 38px; border-radius: 12px; }
body.authed .user-meta { flex: 1 1 auto; min-width: 0; }
body.authed .user-avatar { flex: 0 0 38px; }
body.authed .user-meta strong { display: block; color: #fff; font-size: 12.5px; font-weight: 600; }
body.authed .user-role-pill {
  margin-top: 3px;
  padding: 2px 8px;
  color: rgba(255, 255, 255, .78);
  border: 0;
  background: rgba(255, 255, 255, .1);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
}
body.authed .sidebar-user #sign-out-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  color: rgba(255, 255, 255, .78);
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .07);
}
body.authed .sidebar-user #sign-out-btn:hover { color: #fff; background: var(--brand-pink); }
body.authed .sidebar-footer { color: rgba(255, 255, 255, .3); border-top-color: rgba(255, 255, 255, .06); font-size: 10px; }

/* ==========================================================================
   5) Barra superior — banner de color de cada pestaña
   ========================================================================== */
body.authed .topbar {
  position: sticky;
  top: 12px;
  z-index: 35;
  min-height: 0;
  margin: 16px 0 22px;
  padding: 24px 28px;
  overflow: hidden;
  color: #fff;
  border: 0;
  border-radius: var(--r-xl);
  background: linear-gradient(120deg, var(--acc-2) 0%, var(--acc) 100%);
  /* La segunda sombra tapa el contenido que pasa por encima de la barra fija. */
  box-shadow: 0 18px 40px color-mix(in srgb, var(--acc) 26%, transparent), 0 -12px 0 12px var(--s-canvas);
  backdrop-filter: none;
  transition: padding .35s var(--ease-out), box-shadow .35s ease;
}

/* Trazo de gráfica decorativo + rejilla */
body.authed .topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'%3E%3Cpath d='M0 104 C60 98 90 86 130 90 S200 70 240 72 S310 44 350 52 S420 30 460 34 S540 12 600 8' fill='none' stroke='white' stroke-opacity='.28' stroke-width='2.5'/%3E%3Cpath d='M0 104 C60 98 90 86 130 90 S200 70 240 72 S310 44 350 52 S420 30 460 34 S540 12 600 8 L600 120 L0 120Z' fill='white' fill-opacity='.06'/%3E%3C/svg%3E"),
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-repeat: no-repeat, repeat, repeat;
  background-position: right bottom, 0 0, 0 0;
  background-size: 62% 100%, 28px 28px, 28px 28px;
  mask-image: linear-gradient(90deg, transparent 10%, #000 70%);
  pointer-events: none;
}

body.authed .topbar::after {
  content: "";
  position: absolute;
  z-index: 0;
  display: block;
  width: 260px;
  height: 260px;
  right: -60px;
  top: -150px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .22), transparent);
  pointer-events: none;
}

body.authed .topbar > * { position: relative; z-index: 1; }

body.authed .topbar .eyebrow {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  transition: opacity .25s ease, margin .3s ease, max-height .3s ease;
  max-height: 20px;
}
body.authed .topbar h1 {
  color: #fff;
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 700;
  letter-spacing: -.025em;
  transition: font-size .35s var(--ease-out);
}

body.authed.is-scrolled .topbar { padding: 14px 22px; box-shadow: 0 14px 30px color-mix(in srgb, var(--acc) 30%, transparent), 0 -12px 0 12px var(--s-canvas); }
body.authed.is-scrolled .topbar .eyebrow { opacity: 0; max-height: 0; margin: 0; overflow: hidden; }
body.authed.is-scrolled .topbar h1 { font-size: 21px; }

body.authed .topbar { display: flex; align-items: center; gap: 16px; }
body.authed .topbar > div:not(.topbar-actions) { flex: 1 1 auto; min-width: 0; text-align: left; }
body.authed .topbar-actions { gap: 10px; flex: 0 0 auto; }

body.authed .topbar .status-pill {
  min-height: 38px;
  padding: 0 14px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .12);
  font-size: 12px;
  font-weight: 500;
}
body.authed .topbar .status-pill span { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); }
body.authed .topbar .status-pill.online span { background: #6ff0c4; animation: lx-live 2s ease-out infinite; }
body.authed .topbar .status-pill.error span { background: #ffd1dd; }

body.authed .topbar .btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .12);
  box-shadow: none;
}
body.authed .topbar .btn-secondary:hover { color: #fff; border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .22); }
body.authed .topbar .btn-primary {
  color: var(--acc-ink);
  border-color: #fff;
  background: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .15);
}
body.authed .topbar .btn-primary:hover { color: var(--acc-2); border-color: #fff; background: #fff; box-shadow: 0 14px 30px rgba(0, 0, 0, .22); }
body.authed .topbar #menu-toggle { color: #fff; border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .12); }

/* ==========================================================================
   6) Botones
   ========================================================================== */
.btn,
.icon-btn,
.action-btn,
.quick-range { position: relative; overflow: hidden; font-family: var(--font-sans); }

.btn {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  transition: transform .2s var(--ease-out), background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

.btn-primary {
  color: #fff;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--acc) 30%, transparent);
}
.btn-primary:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--acc) 40%, transparent);
  filter: saturate(1.1);
}

.btn-secondary {
  color: var(--s-ink);
  border: 1px solid var(--s-line-strong);
  background: #fff;
  box-shadow: var(--sh-1);
}
.btn-secondary:hover { color: var(--acc-ink); border-color: var(--acc); background: #fff; box-shadow: var(--sh-2); }

.btn-ghost { color: var(--acc-ink); border: 1px solid transparent; background: transparent; }
.btn-ghost:hover { color: var(--acc-ink); border-color: transparent; background: var(--acc-soft); }

.btn-large { min-height: 50px; padding-inline: 26px; border-radius: 14px; font-size: 14.5px; }

.icon-btn {
  min-width: 40px;
  height: 40px;
  color: var(--s-ink-2);
  border: 1px solid var(--s-line-strong);
  border-radius: 12px;
  background: #fff;
}
.icon-btn:hover { color: var(--acc-ink); border-color: var(--acc); background: var(--acc-soft); }

.action-btn {
  min-height: 32px;
  padding: 0 12px;
  color: var(--acc-ink);
  border: 1px solid color-mix(in srgb, var(--acc) 25%, #fff);
  border-radius: 9px;
  background: var(--acc-soft);
  font-size: 12px;
  font-weight: 600;
  transition: background .2s ease, color .2s ease, transform .2s var(--ease-out);
}
.action-btn:hover { color: #fff; border-color: var(--acc); background: var(--acc); transform: translateY(-1px); }
.action-btn.danger-action { color: var(--c-rose); border-color: #f7c3d3; background: var(--c-rose-soft); }
.action-btn.danger-action:hover { color: #fff; border-color: var(--c-rose); background: var(--c-rose); }

/* Onda al hacer clic (studio-fx.js inserta .fx-ripple) */
.fx-ripple {
  position: absolute;
  z-index: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .25;
  transform: scale(0);
  pointer-events: none;
  animation: fx-ripple .6s ease-out forwards;
}
@keyframes fx-ripple { to { transform: scale(var(--fx-r, 30)); opacity: 0; } }

/* ==========================================================================
   7) Filtros
   ========================================================================== */
.filter-panel {
  margin: 0 auto 22px;
  padding: 22px 24px;
  border: 1px solid var(--s-line);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--sh-1);
  animation: fx-rise .55s var(--ease-out) both;
}
.filter-panel::before { width: 4px; background: linear-gradient(180deg, var(--acc), var(--acc-2)); }
.filter-panel::after {
  width: 200px;
  height: 200px;
  right: -90px;
  top: -110px;
  border: 0;
  background: radial-gradient(closest-side, var(--acc-soft), transparent);
  box-shadow: none;
}
.filter-panel-heading h2 { color: var(--s-ink); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }

.filter-result-pill {
  min-height: 34px;
  padding: 0 13px;
  color: var(--acc-ink);
  border: 0;
  background: var(--acc-soft);
  font-size: 12px;
  font-weight: 600;
}
.filter-result-pill::before { background: var(--acc); }

.quick-ranges { gap: 8px; margin-bottom: 16px; }
.quick-range {
  min-height: 34px;
  padding: 0 15px;
  color: var(--s-ink-2);
  border: 1px solid var(--s-line-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 500;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease-out);
}
.quick-range:hover,
.quick-range:focus-visible { color: var(--acc-ink); border-color: var(--acc); background: var(--acc-soft); transform: translateY(-1px); }
.quick-range.active,
.quick-range[aria-pressed="true"] {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--acc) 30%, transparent);
}

.filter-bar { gap: 14px; }

.filter-bar label > span,
.form-grid label > span,
.field-label,
.budget-table-tools label > span,
.accounts-workspace-toolbar label > span,
.template-month-control label > span,
.template-search > span,
.accounts-import-controls label > span,
.budget-pnl-controls label > span,
.accounts-month-control label,
.accounts-month-control label > span {
  color: var(--s-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* ==========================================================================
   8) Campos
   ========================================================================== */
input[type="text"],
input[type="date"],
input[type="month"],
input[type="search"],
input[type="number"],
input[type="email"],
select,
textarea {
  color: var(--s-ink);
  border: 1px solid var(--s-line-strong);
  border-radius: 12px;
  background-color: #fff;
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
input[type="text"],
input[type="date"],
input[type="month"],
input[type="search"],
input[type="number"],
input[type="email"] { min-height: 44px; padding: 0 14px; }
select { height: 44px; padding: 0 36px 0 14px; }
textarea { padding: 12px 14px; }
input::placeholder, textarea::placeholder { color: var(--s-faint); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--s-line-strong)); }
input:focus, select:focus, textarea:focus {
  border-color: var(--acc);
  background-color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 16%, transparent);
}
input[readonly] { color: var(--s-muted); background: var(--s-sunken); }
.form-grid label > input,
.form-grid label > select,
.form-grid label > textarea { min-width: 0; max-width: 100%; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--acc); }

/* ==========================================================================
   9) KPIs
   ========================================================================== */
.kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 0 0 22px;
}
#view-dashboard > .kpi-grid,
#view-loans > .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#view-budget > .budget-pnl-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.accounts-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin-top: 18px !important; }
.kpi-grid .kpi-card,
.kpi-grid .kpi-card:nth-child(n) { grid-column: auto; }

.kpi-card {
  --k: var(--c-teal);
  --k-soft: var(--c-teal-soft);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  padding: 20px 20px 18px;
  overflow: hidden;
  border: 1px solid var(--s-line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-1);
  transition: transform .3s var(--ease-out), box-shadow .3s ease, border-color .3s ease;
}
.kpi-card.positive { --k: var(--c-green); --k-soft: var(--c-green-soft); }
.kpi-card.warning  { --k: var(--c-amber); --k-soft: var(--c-amber-soft); }
.kpi-card.info     { --k: var(--c-teal);  --k-soft: var(--c-teal-soft); }
.kpi-card.danger   { --k: var(--c-rose);  --k-soft: var(--c-rose-soft); }
.kpi-card.accent   { --k: var(--c-purple); --k-soft: var(--c-purple-soft); }
.kpi-card.neutral  { --k: var(--c-slate); --k-soft: var(--c-slate-soft); }
#kpi-exchange-card { --k: var(--c-violet); --k-soft: var(--c-violet-soft); }
#kpi-coverage-card { --k: var(--c-blue); --k-soft: var(--c-blue-soft); }

/* Barra inferior de color + halo en la esquina */
.kpi-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  top: auto;
  height: 4px;
  background: linear-gradient(90deg, var(--k), color-mix(in srgb, var(--k) 35%, #fff));
  transform-origin: left;
  animation: fx-bar .9s var(--ease-out) .2s both;
}
.kpi-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -60px;
  top: -70px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--k-soft), transparent);
  transition: transform .5s var(--ease-out);
}
.kpi-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--k) 35%, var(--s-line));
  box-shadow: 0 18px 38px color-mix(in srgb, var(--k) 16%, transparent);
}
.kpi-card:hover::after { transform: scale(1.35); }

/* Etiqueta con ícono */
.kpi-card > span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--s-muted);
  min-height: 34px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}
.kpi-card > span::before {
  content: "";
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background-color: var(--k-soft);
  background-image: var(--k-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

.kpi-card strong {
  position: relative;
  z-index: 1;
  margin: 18px 0 6px;
  color: var(--s-ink);
  font-family: var(--font-numeric);
  font-size: clamp(22px, 1.9vw, 30px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.kpi-card.danger strong,
.kpi-card.accent strong { color: var(--s-ink); }
.kpi-card small { position: relative; z-index: 1; color: var(--s-muted); font-size: 12px; line-height: 1.45; }
.kpi-card small.budget-kpi-status { margin-top: 4px; color: var(--k); font-weight: 600; }

/* Íconos por tipo (SVG en línea) */
.kpi-card.positive { --k-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312a07a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M14 7h7v7'/%3E%3C/svg%3E"); }
.kpi-card.warning  { --k-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8921c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E"); }
.kpi-card.info     { --k-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23178391' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V11M10 20V5M16 20v-8M22 20H2'/%3E%3C/svg%3E"); }
.kpi-card.danger   { --k-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e62962' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E"); }
.kpi-card.accent   { --k-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a3b72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3C/svg%3E"); }
.kpi-card.neutral  { --k-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a6c8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-6 9 6'/%3E%3Cpath d='M5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 21h18'/%3E%3C/svg%3E"); }
#kpi-exchange-card { --k-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a5ae0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h14l-3-3M20 16H6l3 3'/%3E%3C/svg%3E"); }
#kpi-coverage-card { --k-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fd0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }

/* ==========================================================================
   10) Paneles, hallazgos y salud
   ========================================================================== */
.panel {
  border: 1px solid var(--s-line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-1);
}

.panel-heading { gap: 16px; }
.panel-heading .eyebrow { color: var(--acc-ink); font-size: 10.5px; }
.panel-heading h2 { margin: 4px 0 0; color: var(--s-ink); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.panel-heading small { margin-top: 6px; color: var(--s-muted); font-size: 12.5px; line-height: 1.55; }

.insights-layout { gap: 16px; margin-bottom: 16px; }
.insights-panel, .health-panel { padding: 22px; }
.insights-list { gap: 10px; margin-top: 18px; }
.insight {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  padding: 14px;
  border: 1px solid var(--s-line);
  border-radius: 14px;
  background: var(--s-sunken);
  transition: transform .25s var(--ease-out), border-color .2s ease, background .2s ease, box-shadow .25s ease;
}
.insight:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acc) 30%, var(--s-line)); background: #fff; box-shadow: var(--sh-1); }
.insight-icon { width: 38px; height: 38px; color: var(--c-teal); border: 0; border-radius: 11px; background: var(--c-teal-soft); font-size: 15px; }
.insight.positive .insight-icon { color: var(--c-green); background: var(--c-green-soft); }
.insight.warning .insight-icon { color: var(--c-amber); background: var(--c-amber-soft); }
.insight.danger .insight-icon { color: var(--c-rose); border: 0; background: var(--c-rose-soft); }
.insight strong { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.insight p { margin-top: 4px; color: var(--s-muted); font-size: 12.5px; line-height: 1.55; }

.health-metrics { gap: 18px; margin-top: 22px; }
.metric-row span { color: var(--s-ink-2); font-size: 13px; font-weight: 500; }
.metric-row strong { color: var(--s-ink); font-size: 14px; font-weight: 700; }
.metric-bar { height: 9px; background: var(--s-sunken); box-shadow: inset 0 0 0 1px var(--s-line); }
.metric-bar i {
  background: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 40%, #f9b03b));
  transform-origin: left;
  animation: fx-bar 1.1s var(--ease-out) .25s both;
}
.metric-row:nth-child(2) .metric-bar i { background: linear-gradient(90deg, #7a3b72, #e62962); }
.metric-row:nth-child(3) .metric-bar i { background: linear-gradient(90deg, #e8921c, #f9d05d); }
.metric-row:nth-child(4) .metric-bar i { background: linear-gradient(90deg, #2f6fd0, #6a5ae0); }

/* ==========================================================================
   11) Gráficas
   ========================================================================== */
.chart-grid { gap: 16px; }
.chart-card { padding: 22px; transition: transform .3s var(--ease-out), box-shadow .3s ease, border-color .3s ease; }
.chart-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acc) 25%, var(--s-line)); box-shadow: var(--sh-2); }
.chart-wrap { margin-top: 16px; }

.help {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  color: var(--acc-ink);
  border: 0;
  border-radius: 10px;
  background: var(--acc-soft);
  font-size: 13px;
  font-weight: 700;
  cursor: help;
}

.chart-mini-filter span,
.section-year-filter span { color: var(--s-muted); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.chart-mini-filter select,
.section-year-filter select { font-size: 13px; }
.chart-download-btn { font-size: 12px; }

.mini-table { border-top-color: var(--s-line); }
.mini-table-row { min-height: 44px; border-bottom-color: var(--s-line); transition: background .2s ease; }
.mini-table-row:hover { background: var(--s-sunken); }
.mini-table-row span { color: var(--s-ink-2); font-size: 13px; }
.mini-table-row strong { color: var(--s-ink); font-size: 13.5px; font-weight: 600; }
.bank-balance-table .mini-table-row small { color: var(--s-muted); font-size: 11.5px; }

.composition-legend-item strong { font-size: 13px; }
.composition-legend-item small { font-size: 11.5px; color: var(--s-muted); }
.composition-legend-item b { font-size: 13px; }
.composition-legend-empty { font-size: 13px; }

.charts-export-panel { padding: 20px 22px; background: linear-gradient(120deg, #fff 55%, var(--acc-soft)); }

/* Conciliación */
.cash-reconciliation-panel { padding: 22px; }
.reconciliation-status {
  padding: 6px 12px;
  color: var(--acc-ink);
  border-radius: 999px;
  background: var(--acc-soft);
  font-size: 12px;
  font-weight: 600;
}
.reconciliation-overview > div {
  border: 1px solid var(--s-line);
  border-radius: 16px;
  background: var(--s-sunken);
}
.reconciliation-overview span { color: var(--s-muted); font-size: 12.5px; }
.reconciliation-overview strong { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.reconciliation-overview small { color: var(--s-muted); font-size: 12px; }
.reconciliation-line { font-size: 13px; }
.reconciliation-lines { border-color: var(--s-line); }
.reconciliation-line { padding: 14px 18px; border-bottom-color: #eef3f5; }
.reconciliation-line > span > strong { color: var(--s-ink); font-size: 13.5px; font-weight: 600; }
.reconciliation-line small { color: var(--s-muted); font-size: 12px; }
.reconciliation-line > strong { font-size: 14.5px; font-weight: 700; }
.reconciliation-line.total { background: var(--acc-soft); border-top-color: var(--s-line); }
.reconciliation-line.total > span > strong,
.reconciliation-line.total > strong { color: var(--acc-ink); font-weight: 700; }
.reconciliation-line.bank { background: var(--c-purple-soft); }
.cash-reconciliation-heading small { font-size: 12.5px; color: var(--s-muted); }
.reconciliation-alert { font-size: 13px; border-radius: 12px; }
.empty-state span { font-size: 13px; }
.budget-pnl-controls p { font-size: 12.5px; color: var(--s-muted); }

/* ==========================================================================
   12) Encabezados de sección, P&L y tablas
   ========================================================================== */
.section-actions { margin: 4px auto 18px; animation: fx-rise .5s var(--ease-out) both; }
/* El título ya aparece en el banner superior: se evita repetirlo. */
body.authed .view > .section-actions > div:first-child > .eyebrow,
body.authed .view > .section-actions > div:first-child > h2 { display: none; }
.section-actions { align-items: center; }
.section-actions h2 { margin: 4px 0 6px; color: var(--s-ink); font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.section-actions p:not(.eyebrow) { max-width: 78ch; color: var(--s-muted); font-size: 13.5px; line-height: 1.6; }

.pnl-card { padding: clamp(22px, 3vw, 34px); }
.pnl-title { border-bottom-color: var(--s-line); }
.pnl-title img { width: 46px; height: 46px; border: 0; border-radius: 14px; box-shadow: var(--sh-1); }
.pnl-title h2 { font-size: 20px; font-weight: 700; }
.pnl-title p { color: var(--s-muted); font-size: 12.5px; }
.pnl-title > span {
  min-height: 34px;
  padding: 0 14px;
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  font-size: 12px;
  font-weight: 600;
}
.pnl-summary { border-color: var(--s-line); border-radius: 16px; }
.pnl-line { min-height: 54px; padding: 0 20px; border-bottom-color: var(--s-line); transition: background .2s ease; }
.pnl-line:hover { background: var(--s-sunken); }
.pnl-line span { color: var(--s-ink-2); font-size: 14px; }
.pnl-line strong { color: var(--s-ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pnl-line small { font-size: 12px; color: var(--s-muted); }
.pnl-line.subtotal { background: var(--acc-soft); }
.pnl-line.subtotal span { color: var(--acc-ink); font-weight: 600; }
.pnl-line.subtotal strong { color: var(--acc-ink); font-weight: 700; }
.pnl-line.total { background: linear-gradient(120deg, var(--acc-2), var(--acc)); }
.pnl-line.total span, .pnl-line.total strong { color: #fff; }
.pnl-line.total strong { font-size: 18px; font-weight: 700; }
.pnl-line.negative strong { color: var(--c-rose); }
.pnl-notes { border: 0; border-radius: 16px; background: var(--s-sunken); }
.pnl-notes h3 { color: var(--s-ink); font-size: 14px; font-weight: 600; }
.pnl-notes p { color: var(--s-muted); font-size: 13px; line-height: 1.65; }

.table-panel { padding: 18px; }
.table-tools { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (min-width: 761px) { .table-tools input[type="search"] { grid-column: span 2; } }
.movement-table td:nth-child(1),
.movement-table td:nth-child(n+6):nth-child(-n+10) { white-space: nowrap; }

.table-scroll { border-color: var(--s-line); border-radius: 16px; scrollbar-color: var(--s-line-strong) transparent; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb { border-color: #fff; background: var(--s-line-strong); }

.data-table { color: var(--s-ink-2); font-size: 13px; }
.data-table th {
  padding: 13px 14px;
  color: var(--s-muted);
  border-bottom: 1px solid var(--s-line);
  background: #f7fafb;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
}
.data-table td {
  padding: 13px 14px;
  color: var(--s-ink-2);
  border-bottom-color: #eef3f5;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  transition: background .18s ease;
}
.data-table tbody tr:hover td { background: color-mix(in srgb, var(--acc-soft) 70%, #fff); }
.data-table td strong { color: var(--s-ink); font-size: 13px; font-weight: 600; }
.data-table td small { color: var(--s-muted); font-size: 11.5px; }
.data-table tfoot th,
.data-table tfoot td { color: #fff; background: var(--acc-2); font-size: 12px; }

.amount-positive { color: var(--c-green) !important; }
.amount-negative { color: var(--c-rose) !important; }

.badge {
  min-height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}
.badge::before { width: 6px; height: 6px; }
.badge.entry    { color: #0b7a5c; background: var(--c-green-soft); }
.badge.cost     { color: #a35c06; background: var(--c-amber-soft); }
.badge.expense  { color: #b0124a; background: var(--c-rose-soft); }
.badge.transfer { color: #4334b0; background: var(--c-violet-soft); }
.badge.void     { color: #6b7f8e; background: #eef2f5; }

.empty-state { border-color: var(--s-line-strong); border-radius: 16px; background: var(--s-sunken); color: var(--s-muted); }
.empty-state::before { color: var(--acc); }
.empty-inline { color: var(--s-muted); font-size: 13px; }

/* ==========================================================================
   13) Formularios (registro, presupuesto, préstamos)
   ========================================================================== */
.form-card { padding: 24px; }
.form-section-title { gap: 14px; }
.form-section-title > span {
  width: 40px;
  height: 40px;
  color: #fff;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--acc) 30%, transparent);
  font-size: 15px;
  font-weight: 700;
}
.rate-card .form-section-title > span { background: linear-gradient(135deg, #8a4682, #3b1235); }
.form-section-title h3 { color: var(--s-ink); font-size: 17px; font-weight: 600; }
.form-section-title p { color: var(--s-muted); font-size: 13px; }

.segmented { align-content: start; align-self: start; gap: 6px; padding: 5px; border: 1px solid var(--s-line); border-radius: 14px; background: var(--s-sunken); }
.segmented label span {
  min-height: 42px;
  color: var(--s-ink-2);
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .2s var(--ease-out);
}
.segmented label:hover span { color: var(--acc-ink); background: #fff; }
.segmented input:checked + span,
.segmented label:nth-child(even) input:checked + span {
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--acc) 30%, transparent);
}
.segmented.large label span { min-height: 52px; font-size: 14.5px; font-weight: 600; }
.segmented.direction-options { grid-template-columns: .8fr .8fr 1.5fr; }
.segmented label { position: relative; display: block; }
.segmented input { position: absolute; inset: 0; width: 1px; height: 1px; margin: 0; }

.field-help { color: var(--s-muted); font-size: 12.5px; }
.form-grid { gap: 16px; }
.form-grid small { color: var(--s-muted); font-size: 11.5px; }

.rate-summary > div { border-color: var(--s-line); border-radius: 16px; background: var(--s-sunken); }
.rate-summary span { color: var(--s-muted); font-size: 12px; font-weight: 500; }
.rate-summary small { color: var(--s-muted); font-size: 11.5px; }
.rate-summary strong { color: var(--s-ink); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.rate-summary > div:nth-child(2) strong { color: var(--acc-ink); }

.exchange-panel { border-color: var(--s-line); border-radius: 18px; }
.exchange-panel-heading h4 { color: var(--s-ink); font-size: 16px; }
.exchange-panel-heading small,
.exchange-result span, .exchange-result small,
.exchange-metrics span, .exchange-metrics small,
.exchange-formula { font-size: 12px; }
.exchange-operation-badge { font-size: 11px; color: #fff; background: linear-gradient(135deg, var(--acc), var(--acc-2)); border: 0; }
.switch-row { font-size: 13px; }

.form-submit-bar {
  border: 1px solid var(--s-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 40px rgba(18, 48, 58, .1);
  backdrop-filter: blur(12px);
}
.form-submit-bar strong { font-size: 15px; }
.form-submit-bar span { color: var(--s-muted); font-size: 12.5px; }

/* ==========================================================================
   14) Presupuesto, cuentas y préstamos
   ========================================================================== */
.budget-workspace-nav,
.accounts-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--s-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--sh-1);
}
.budget-workspace-nav .btn { min-height: 40px; border-radius: 11px; box-shadow: none; }
.budget-workspace-nav .btn:hover { transform: none; }
.budget-workspace-nav .btn-ghost { color: var(--s-ink-2); }

body.authed .accounts-tabs { margin: 22px 0 16px; border-bottom: 0; }
body.authed .accounts-tabs button {
  min-height: 40px;
  padding: 0 18px;
  color: var(--s-ink-2);
  border: 0;
  border-radius: 11px;
  background: transparent;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .25s ease, color .25s ease;
}
body.authed .accounts-tabs button:hover { color: var(--acc-ink); background: var(--acc-soft); }
body.authed .accounts-tabs button[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--acc) 28%, transparent);
}

.budget-pnl-controls label { font-size: 12px; }
.budget-pacing-key { font-size: 12.5px; color: var(--s-ink-2); }
.budget-chart-intro p, .budget-chart-intro span, .budget-pnl-note { font-size: 13px; color: var(--s-muted); }

.budget-progress, .account-progress-track { border-radius: 999px; }

.accounts-import-panel {
  border: 1px dashed color-mix(in srgb, var(--acc) 45%, var(--s-line-strong));
  background: linear-gradient(120deg, #fff 50%, var(--acc-soft));
}
.accounts-import-status { font-size: 13px; }

.monthly-template-group { border-color: var(--s-line); border-radius: 16px; }
.template-summary-pill { border: 0; background: var(--acc-soft); color: var(--acc-ink); }
.template-summary-pill strong { color: var(--acc-ink); }
.account-plan-footer { border-radius: 16px; background: var(--s-sunken); }
.account-plan-footer strong { font-size: 22px; letter-spacing: -.02em; }

.loan-schedule-summary span { font-size: 12px; }

/* ==========================================================================
   15) Toasts y carga
   ========================================================================== */
.toast {
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 16px;
  background: #0f2e35;
  box-shadow: 0 22px 50px rgba(7, 28, 33, .35);
  animation: fx-toast .45s var(--ease-spring) both;
}
.toast strong { color: #fff; font-size: 14px; }
.toast p { color: rgba(255, 255, 255, .7); font-size: 13px; }
.toast-icon { color: #fff; background: var(--c-green); }
.toast.error .toast-icon { background: var(--c-rose); }
.toast button { color: rgba(255, 255, 255, .7); }
@keyframes fx-toast { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }

.loading-overlay { background: rgba(243, 246, 248, .78); backdrop-filter: blur(8px); }
.loading-overlay span { color: var(--s-ink-2); font-size: 14px; font-weight: 500; }
.loader {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 20%, #178391 40%, #4f1a48 65%, #e62962 85%, #f9b03b);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  animation: spin .9s linear infinite;
}

/* ==========================================================================
   16) Animaciones de entrada
   ========================================================================== */
@keyframes fx-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fx-bar { from { transform: scaleX(0); } to { transform: none; } }

body.authed .view.active { animation: none; }
body.authed .view.active > *,
body.authed .view.active .kpi-grid > .kpi-card,
body.authed .view.active .chart-grid > .chart-card {
  animation: fx-rise .6s var(--ease-out) both;
}
body.authed .view.active > :nth-child(2) { animation-delay: .06s; }
body.authed .view.active > :nth-child(3) { animation-delay: .12s; }
body.authed .view.active > :nth-child(4) { animation-delay: .18s; }
body.authed .view.active > :nth-child(5) { animation-delay: .24s; }
body.authed .view.active > :nth-child(n+6) { animation-delay: .3s; }

body.authed .view.active .kpi-grid > .kpi-card:nth-child(2) { animation-delay: .05s; }
body.authed .view.active .kpi-grid > .kpi-card:nth-child(3) { animation-delay: .1s; }
body.authed .view.active .kpi-grid > .kpi-card:nth-child(4) { animation-delay: .15s; }
body.authed .view.active .kpi-grid > .kpi-card:nth-child(5) { animation-delay: .2s; }
body.authed .view.active .kpi-grid > .kpi-card:nth-child(6) { animation-delay: .25s; }
body.authed .view.active .kpi-grid > .kpi-card:nth-child(7) { animation-delay: .3s; }
body.authed .view.active .kpi-grid > .kpi-card:nth-child(8) { animation-delay: .35s; }

body.authed .view.active .chart-grid > .chart-card:nth-child(2) { animation-delay: .08s; }
body.authed .view.active .chart-grid > .chart-card:nth-child(3) { animation-delay: .14s; }
body.authed .view.active .chart-grid > .chart-card:nth-child(4) { animation-delay: .2s; }
body.authed .view.active .chart-grid > .chart-card:nth-child(n+5) { animation-delay: .26s; }

.conditional:not(.hidden) { animation: fx-rise .4s var(--ease-out) both; }

/* ==========================================================================
   17) Responsive
   ========================================================================== */
@media (min-width: 981px) {
  .mobile-only, body.authed #menu-toggle { display: none !important; }
  body.authed .app-shell { display: grid; }
  body.authed .sidebar { transform: none; }
}

@media (max-width: 1280px) {
  #view-dashboard > .kpi-grid,
  #view-loans > .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-budget > .budget-pnl-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  body.authed .sidebar { padding-top: 20px; }
  body.authed .topbar { top: 8px; }
}

@media (max-width: 760px) {
  body.authed .topbar { flex-wrap: wrap; gap: 12px; margin-top: 10px; padding: 16px; border-radius: 20px; }
  body.authed .topbar > div:not(.topbar-actions) { flex: 1 1 calc(100% - 60px); }
  body.authed .topbar h1 { font-size: 22px; }
  body.authed .topbar .eyebrow { display: block; }
  body.authed .topbar-actions { display: flex; flex: 1 1 100%; width: 100%; }
  body.authed .topbar-actions .status-pill { display: none; }
  body.authed .topbar-actions .btn,
  body.authed .topbar-actions .btn-secondary,
  body.authed .topbar-actions .btn-primary { display: inline-flex; flex: 1 1 0; width: auto; min-width: 0; padding-inline: 12px; font-size: 13px; align-items: center; justify-content: center; white-space: nowrap; }
  body.authed .topbar-actions .btn-primary::before { content: none; }
  body.authed.is-scrolled .topbar-actions { display: none; }
  body.authed .topbar::before { background-size: 100% 100%, 28px 28px, 28px 28px; }
  .accounts-kpis { grid-template-columns: 1fr 1fr !important; }
  .segmented.direction-options { grid-template-columns: 1fr; }
  .filter-panel { padding: 18px; }
}

@media (max-width: 560px) {
  #view-dashboard > .kpi-grid,
  #view-loans > .kpi-grid,
  #view-budget > .budget-pnl-kpis,
  .accounts-kpis { grid-template-columns: 1fr !important; }
  .kpi-card { min-height: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  .lx-symbols, .lx-glow { display: none; }
  .lx-line { stroke-dashoffset: 0; }
  .lx-area, .lx-dot, .lx-float { opacity: 1; }
  .nav-indicator { transition: none; }
}

/* ==========================================================================
   18) Impresión: sin decoraciones de pantalla
   ========================================================================== */
@media print {
  body.authed .topbar,
  body.authed .main::before { display: none !important; }
  body.authed .view.active > *,
  .kpi-card, .chart-card { animation: none !important; transform: none !important; box-shadow: none !important; }
}

/* Contenedores de la onda de clic */
.segmented label span,
body.authed .accounts-tabs button { position: relative; overflow: hidden; }

/* ─── MOA Academy: selector de sede (Directiva) y distintivo de sede ─── */
body.authed .topbar .sede-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 6px 0 14px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  font-size: 12px;
  font-weight: 500;
}
body.authed .topbar .sede-switch.hidden { display: none; }
body.authed .topbar .sede-switch select {
  min-height: 30px;
  padding: 0 28px 0 10px;
  color: var(--acc-ink);
  border: 0;
  border-radius: 999px;
  background-color: #fff;
  font: inherit;
  font-weight: 600;
}
body.authed .topbar .sede-badge { font-weight: 600; }
.students-layout { margin-top: 18px; }
@media (max-width: 760px) {
  body.authed .topbar .sede-switch { flex: 1 1 100%; justify-content: space-between; }
}