/* ============================================================
   AFITS Finanzas · base.css
   Cargado desde index.html. Ver ARQUITECTURA.md para el orden.
   ============================================================ */

/* ============================================================
   AFITS Finanzas — sistema de diseño
   ============================================================ */
:root{
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable", "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  --font-num: "SF Mono", ui-monospace, "JetBrains Mono", "Roboto Mono", Menlo, monospace;

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px;
  --sp: 4px;
  --dur: 420ms;
  --ease: cubic-bezier(.22,1,.36,1);

  /* ---- Acentos de marca (ai/knowledge/04_IDENTIDAD/05_Colores.md) ----
     Dorado  = dinero, patrimonio, marca  → ingresos, disponible, cifras principales
     Verde   = crecimiento, vida          → ahorro, inversión, progreso, estado saludable
     Cada acento codifica un significado; no se usan como decoración. */
  --gold-base: #C6A664;   /* elementos gráficos: barras, arcos, bordes */
  --gold-light:#E0C88E;   /* texto y cifras sobre negro */
  --gold-deep: #8A7233;   /* fondos, degradados y texto sobre claro */

  --green-base: #5C7F68;  /* Verde Bambú — iconos, gráficos, detalles */
  --green-light:#8FAE99;  /* Verde Bambú claro — texto y trazos sobre negro */
  --green-deep: #2E4437;  /* Verde Bambú profundo — fondos y degradados */

  --warn: #D9803F;        /* alerta funcional — naranja, distinto del dorado */
  --neg:  #E5544F;        /* negativo — heredado del libro original */
}

/* ---- Tema claro (sólo si se elige) ---- */
:root[data-theme="light"]{
  --bg:        #F4F3F0;
  --bg-deep:   #EDEBE7;
  --surface:   #FFFFFF;
  --surface-2: #F8F7F5;
  --border:    #E3E0DA;
  --border-str:#D2CEC6;
  --text:      #0A0A0A;
  --text-2:    #55534F;
  --text-3:    #8A8D91;
  --accent:    #0A0A0A;
  --accent-fg: #F2F1EE;
  --hero-a:    #131313;
  --hero-b:    #2B2B2C;
  --hero-fg:   #F2F1EE;
  --shadow:    0 1px 2px rgba(10,10,10,.05), 0 8px 24px -12px rgba(10,10,10,.14);
  --shadow-lg: 0 2px 4px rgba(10,10,10,.05), 0 24px 60px -24px rgba(10,10,10,.26);
  --track:     #EAE7E2;
  --sheen:     rgba(232,205,148,.16);
  /* sobre fondo claro el texto usa las variantes profundas (contraste de lectura) */
  --gold:      var(--gold-deep);
  --gold-graph:var(--gold-base);
  --gold-soft: rgba(198,166,100,.14);
  --green:     var(--green-deep);
  --green-graph:var(--green-base);
  --pos:       var(--green-deep);
  --logo-invert: 1;   /* artwork blanco → versión negra sobre fondo claro */
}
/* ---- Tema oscuro (por defecto) ----
   La marca es negra y dorada, así que la app abre en oscuro aunque el
   sistema esté en claro. Se declara aquí, no sólo en el arranque, para
   que no aparezca un destello blanco antes de que corra el JavaScript. */
:root, :root[data-theme="dark"]{
  --bg:        #0A0A0A;
  --bg-deep:   #060606;
  --surface:   #141414;
  --surface-2: #1A1A1A;
  --border:    #232323;
  --border-str:#2E2E2E;
  --text:      #F2F1EE;
  --text-2:    #A6A49F;
  --text-3:    #777673;
  --accent:    #F2F1EE;
  --accent-fg: #0A0A0A;
  --hero-a:    #1C1C1D;
  --hero-b:    #0E0E0E;
  --hero-fg:   #F2F1EE;
  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 8px 24px -14px rgba(0,0,0,.8);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.55), 0 30px 70px -30px rgba(0,0,0,.9);
  --track:     #242424;
  --sheen:     rgba(224,200,142,.10);
  /* sobre fondo negro el texto usa las variantes claras */
  --gold:      var(--gold-light);
  --gold-graph:var(--gold-base);
  --gold-soft: rgba(224,200,142,.12);
  --green:     var(--green-light);
  --green-graph:var(--green-light);
  --pos:       var(--green-light);
  --logo-invert: 0;   /* artwork blanco → versión blanca sobre fondo oscuro */
  --warn: #E09455; --neg: #F06663;
}
/* Sin efecto desde que el oscuro es el valor por defecto; se conserva
   por si algún día se vuelve a seguir la preferencia del sistema. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#0A0A0A; --bg-deep:#060606; --surface:#141414; --surface-2:#1A1A1A;
    --border:#232323; --border-str:#2E2E2E; --text:#F2F1EE; --text-2:#A6A49F; --text-3:#777673;
    --accent:#F2F1EE; --accent-fg:#0A0A0A; --hero-a:#1C1C1D; --hero-b:#0E0E0E; --hero-fg:#F2F1EE;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -14px rgba(0,0,0,.8);
    --shadow-lg:0 2px 6px rgba(0,0,0,.55), 0 30px 70px -30px rgba(0,0,0,.9);
    --track:#242424; --sheen:rgba(224,200,142,.10);
    --gold:var(--gold-light); --gold-graph:var(--gold-base); --gold-soft:rgba(224,200,142,.12);
    --green:var(--green-light); --green-graph:var(--green-light);
    --pos:var(--green-light); --logo-invert:0; --warn:#E09455; --neg:#F06663;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
/* El atributo `hidden` oculta con `display:none` del estilo del navegador,
   que pierde contra cualquier `display` declarado aquí. Sin esto, la hoja
   inferior y el aviso de mes cerrado se quedaban visibles al ocultarlos. */
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:none; cursor:pointer; }
::selection{ background:var(--text); color:var(--bg); }

/* Foco visible y consistente en todo lo interactivo.
   `:focus-visible` no lo muestra al hacer clic, sólo al navegar con teclado. */
:where(button, a, [tabindex]):focus-visible{
  outline:2.5px solid var(--gold-graph);
  outline-offset:3px;
  border-radius:10px;
}
.tab:focus-visible, .nav-item:focus-visible{ outline-offset:-2px; }

/* Sólo para lectores de pantalla */
.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* ============================================================
   Layout
   ============================================================ */
.app{ display:flex; min-height:100dvh; }

/* --- Rail lateral (escritorio) --- */
.rail{
  display:none; flex-direction:column; gap:2px;
  width:248px; flex:0 0 248px;
  padding:26px 16px calc(20px + env(safe-area-inset-bottom));
  border-right:1px solid var(--border);
  background:var(--bg-deep);
  position:sticky; top:0; height:100dvh;
}
/* ---- Logotipo AFITS Finance ----
   El lockup lleva dorado, así que NO se invierte: invertirlo destruiría
   el color de marca. En su lugar hay dos versiones — la de tema claro
   sustituye el blanco del texto por negro y deja el dorado intacto. */
.logo-finance{
  display:block; width:112px; height:auto;
  content: url("../assets/logo-finance.webp");
}
:root[data-theme="light"] .logo-finance{
  content: url("../assets/logo-finance-claro.webp");
}

/* ---- Logotipo antiguo (aún usado en la firma del pie) ---- */
.logo-wordmark{
  display:block; width:104px; height:auto;
  filter:invert(var(--logo-invert));
  transition:filter var(--dur) var(--ease);
}
.logo-isotipo{ display:block; width:100%; height:auto; }
/* área de protección: el logo siempre respira */
.brand{ display:flex; flex-direction:column; align-items:flex-start;
        gap:10px; padding:6px 12px 30px; }
.brand-sub{
  font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold); font-weight:650;
}

.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:12px;
  color:var(--text-2); font-size:14.5px; font-weight:530; letter-spacing:-.01em;
  text-align:left; width:100%;
  transition: background 220ms var(--ease), color 220ms var(--ease);
}
.nav-item svg{ width:19px; height:19px; flex:0 0 19px; stroke-width:1.7; }
.nav-item:hover{ background:var(--surface-2); color:var(--text); }
.nav-item[aria-current="page"]{ background:var(--surface); color:var(--text); font-weight:640; box-shadow:var(--shadow); }
.rail-foot{ margin-top:auto; display:flex; flex-direction:column; gap:2px; }

/* --- Columna principal --- */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

/* Barra superior y selector de periodo se pegan juntos: si cada uno
   fuera sticky en top:0 por su cuenta, se solaparían al hacer scroll. */
.cabecera{ position:sticky; top:0; z-index:40; }
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) 18px 12px;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid transparent;
  transition:border-color 260ms var(--ease);
}
.topbar.is-stuck{ border-bottom-color:var(--border); }
.topbar-title{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.topbar-title h1{ margin:0; font-size:19px; font-weight:700; letter-spacing:-.025em; line-height:1.15; }
.topbar-meta{
  font-size:11.5px; color:var(--text-3); font-weight:560; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.icon-btn{
  display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px;
  border-radius:50%; color:var(--text-2);
  transition: background 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}
.icon-btn svg{ width:19px; height:19px; stroke-width:1.75; }
.icon-btn:hover{ background:var(--surface-2); color:var(--text); }
.icon-btn:active{ transform:scale(.92); }

.content{
  flex:1; width:100%; max-width:1080px; margin:0 auto;
  padding:8px 18px calc(112px + env(safe-area-inset-bottom));
}

/* --- Tabbar (móvil) --- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; align-items:stretch;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(22px) saturate(1.6);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  border-top:1px solid var(--border);
}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:7px 2px 5px; border-radius:14px;
  color:var(--text-3); font-size:10px; font-weight:620; letter-spacing:.01em;
  transition:color 200ms var(--ease), background 200ms var(--ease);
}
.tab svg{ width:21px; height:21px; stroke-width:1.7; transition:transform 300ms var(--ease); }
.tab[aria-current="page"]{ color:var(--text); }
.tab[aria-current="page"] svg{ transform:translateY(-1px) scale(1.06); }
.tab:active svg{ transform:scale(.9); }

@media (min-width:900px){
  .rail{ display:flex; }
  .tabbar{ display:none; }
  .content{ padding:10px 34px 80px; }
  .topbar{ padding:22px 34px 14px; }
  .topbar-title h1{ font-size:25px; }
}
/* ============================================================
   Vistas + transiciones
   ============================================================ */
.view{ display:none; }
.view.is-active{ display:block; animation:viewIn 480ms var(--ease) both; }
@keyframes viewIn{
  from{ opacity:0; transform:translateY(10px) scale(.994); }
  to{ opacity:1; transform:none; }
}
.stack{ display:flex; flex-direction:column; gap:14px; }
.stack > *{ animation:riseIn 560ms var(--ease) both; }
.stack > *:nth-child(1){ animation-delay:20ms }
.stack > *:nth-child(2){ animation-delay:60ms }
.stack > *:nth-child(3){ animation-delay:100ms }
.stack > *:nth-child(4){ animation-delay:140ms }
.stack > *:nth-child(5){ animation-delay:180ms }
.stack > *:nth-child(6){ animation-delay:220ms }
.stack > *:nth-child(n+7){ animation-delay:260ms }
@keyframes riseIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:1ms !important; transition-duration:1ms !important; }
}