/* ===========================================================================
   BASE — Finanzas Ensigna  (F1)
   Letras locales, tokens de los dos temas (§2), vidrio, barras, hoja, avisos,
   entrada, clases comunes con los MISMOS nombres de 11-Finanzas §7 y los
   estilos de las gráficas (graficos.js no trae CSS propio).

   Vidrio: .tarjeta = vidrio liviano SIN blur (se pueden ver muchas a la vez).
           .vidrio  = vidrio de verdad CON blur (máx. ~6 visibles en el teléfono).
   Nada con blur en elementos fixed que se muevan con el scroll.
   =========================================================================== */

/* ── letras (Google Fonts, servidas locales, solo latin) ───────────────── */
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap;
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/hanken-grotesk.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Martian Mono"; font-style: normal; font-weight: 400 500; font-stretch: 100%; font-display: swap;
  src: url("../fonts/martian-mono.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── tokens: CLARO («vidrio claro») ─────────────────────────────────────── */
:root {
  --fondo: #EEEDF6;
  --superficie: rgba(255, 255, 255, .62);
  --superficie-solida: #FFFFFF;
  --texto: #14122B;
  --texto-2: #4E4A6E;
  --texto-3: #7D7899;
  --linea: rgba(20, 18, 43, .10);
  --cian: #1F9CC4; --lila: #6E56E0; --durazno: #E0784A;
  --entra: #0E8F63; --sale: #D2453A; --aviso: #B7791F;
  /* series validadas (dataviz, 13/09/2026) — orden fijo: cian, durazno, lila, menta, oro, rosa, azul, coral */
  --serie-1: #058eaf; --serie-2: #c55f1d; --serie-3: #896ace; --serie-4: #0d976f;
  --serie-5: #a27905; --serie-6: #c1558a; --serie-7: #4c7dd9; --serie-8: #ca5553;

  /* derivados propios de Finanzas Ensigna */
  --holo: linear-gradient(115deg, #7FE3FF, #B9A2FF 48%, #FFC6A8);
  --sobre-holo: #14122B;
  --campo: rgba(255, 255, 255, .72);
  --campo-2: rgba(20, 18, 43, .055);
  --linea-fuerte: rgba(20, 18, 43, .22);
  --pulgar: #FFFFFF;
  --acento: #6E56E0;
  --sobre-sale: #FFFFFF;
  --vidrio-a: rgba(255, 255, 255, .80);
  --vidrio-b: rgba(255, 255, 255, .52);
  --vidrio-borde: rgba(255, 255, 255, .85);
  --vidrio-luz: rgba(255, 255, 255, .9);
  --tarjeta-a: rgba(255, 255, 255, .74);
  --tarjeta-b: rgba(255, 255, 255, .54);
  --brillo: rgba(255, 255, 255, .55);
  --sombra-1: 0 1px 2px rgba(40, 30, 90, .06), 0 10px 28px -18px rgba(40, 30, 90, .28);
  --sombra-2: 0 18px 50px -12px rgba(40, 30, 90, .35), 0 2px 8px rgba(40, 30, 90, .08);
  --velo: rgba(20, 18, 43, .38);
  --barra-fondo: rgba(255, 255, 255, .96);
  --blur: 16px;

  /* alias para quien copie CSS de 11-Finanzas (mismos nombres, colores de Finanzas Ensigna) */
  --plano: var(--fondo); --tinta: var(--texto); --tinta-2: var(--texto-2); --tinta-3: var(--texto-3);
  --superficie-2: var(--campo-2); --ok-texto: var(--entra); --ok: var(--entra); --peligro: var(--sale); --serio: var(--durazno);

  --display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cuerpo: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --radio: 20px; --radio-chico: 13px;
  --curva: cubic-bezier(.22, 1, .36, 1);
  --lateral: 256px;
  --barra-inf: 64px;
  --sa-arriba: env(safe-area-inset-top, 0px);
  --sa-abajo: env(safe-area-inset-bottom, 0px);
  --sa-izq: env(safe-area-inset-left, 0px);
  --sa-der: env(safe-area-inset-right, 0px);
  color-scheme: light;
}

/* ── tokens: OSCURO («tinta de seguridad + holograma») ─────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0C0A1A; --superficie: rgba(255, 255, 255, .08); --superficie-solida: #161331;
    --texto: #F3F1FF; --texto-2: #BDB8DE; --texto-3: #8A85B0; --linea: rgba(222, 216, 255, .14);
    --cian: #7FE3FF; --lila: #B9A2FF; --durazno: #FFC6A8; --entra: #72E6B8; --sale: #FF8F80; --aviso: #FFD37E;
    --serie-1: #07a0c5; --serie-2: #dc6d27; --serie-3: #9b79e6; --serie-4: #00aa7d;
    --serie-5: #b6880c; --serie-6: #d7629b; --serie-7: #588df1; --serie-8: #e2625f;
    --campo: rgba(255, 255, 255, .06); --campo-2: rgba(255, 255, 255, .07); --linea-fuerte: rgba(222, 216, 255, .26);
    --pulgar: rgba(255, 255, 255, .16); --acento: #7FE3FF; --sobre-sale: #1A0C10;
    --vidrio-a: rgba(255, 255, 255, .13); --vidrio-b: rgba(255, 255, 255, .035); --vidrio-borde: rgba(255, 255, 255, .16);
    --vidrio-luz: rgba(255, 255, 255, .26); --tarjeta-a: rgba(28, 25, 58, .72); --tarjeta-b: rgba(20, 17, 44, .58);
    --brillo: rgba(255, 255, 255, .16);
    --sombra-1: inset 0 1px 0 rgba(255, 255, 255, .10), 0 20px 50px -30px rgba(0, 0, 0, .8);
    --sombra-2: 0 24px 60px -20px rgba(0, 0, 0, .8), 0 2px 10px rgba(0, 0, 0, .4);
    --velo: rgba(5, 4, 12, .66); --barra-fondo: rgba(18, 15, 40, .97);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #0C0A1A; --superficie: rgba(255, 255, 255, .08); --superficie-solida: #161331;
  --texto: #F3F1FF; --texto-2: #BDB8DE; --texto-3: #8A85B0; --linea: rgba(222, 216, 255, .14);
  --cian: #7FE3FF; --lila: #B9A2FF; --durazno: #FFC6A8; --entra: #72E6B8; --sale: #FF8F80; --aviso: #FFD37E;
  --serie-1: #07a0c5; --serie-2: #dc6d27; --serie-3: #9b79e6; --serie-4: #00aa7d;
  --serie-5: #b6880c; --serie-6: #d7629b; --serie-7: #588df1; --serie-8: #e2625f;
  --campo: rgba(255, 255, 255, .06); --campo-2: rgba(255, 255, 255, .07); --linea-fuerte: rgba(222, 216, 255, .26);
  --pulgar: rgba(255, 255, 255, .16); --acento: #7FE3FF; --sobre-sale: #1A0C10;
  --vidrio-a: rgba(255, 255, 255, .13); --vidrio-b: rgba(255, 255, 255, .035); --vidrio-borde: rgba(255, 255, 255, .16);
  --vidrio-luz: rgba(255, 255, 255, .26); --tarjeta-a: rgba(28, 25, 58, .72); --tarjeta-b: rgba(20, 17, 44, .58);
  --brillo: rgba(255, 255, 255, .16);
  --sombra-1: inset 0 1px 0 rgba(255, 255, 255, .10), 0 20px 50px -30px rgba(0, 0, 0, .8);
  --sombra-2: 0 24px 60px -20px rgba(0, 0, 0, .8), 0 2px 10px rgba(0, 0, 0, .4);
  --velo: rgba(5, 4, 12, .66); --barra-fondo: rgba(18, 15, 40, .97);
  color-scheme: dark;
}

/* «Menos transparencia»: superficies sólidas y sin desenfoque */
:root.menos-transparencia {
  --blur: 0px;
  --vidrio-a: var(--superficie-solida); --vidrio-b: var(--superficie-solida);
  --tarjeta-a: var(--superficie-solida); --tarjeta-b: var(--superficie-solida);
  --campo: var(--superficie-solida);
}

/* ── base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--fondo); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--fondo); color: var(--texto);
  font: 15px/1.5 var(--cuerpo);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none; overflow-x: hidden;
}
html.con-hoja body { overflow: hidden; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.015em; line-height: 1.15; text-wrap: balance; font-weight: 680; }
a { color: var(--acento); text-decoration: none; text-underline-offset: 3px; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 8px; }
::selection { background: color-mix(in srgb, var(--lila) 32%, transparent); }
.ico { display: inline-block; vertical-align: -.18em; flex: 0 0 auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.copiar-oculto { position: fixed; top: 0; left: 0; opacity: 0; font-size: 16px; pointer-events: none; }
.marca-svg { color: var(--texto); display: block; }

/* tipografía de marca */
.ceja { font-family: var(--mono); font-size: 10.5px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); font-weight: 400; }
.cifra { font-family: var(--display); font-weight: 720; letter-spacing: -.03em; line-height: 1; font-variation-settings: "opsz" 96; }
.brillo-texto { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root:not([data-theme="dark"]) .brillo-texto { filter: saturate(1.4) brightness(.78); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brillo-texto { filter: none; } }
.num { font-variant-numeric: tabular-nums; }

/* ── fondo: luces + guilloché (canvas) ──────────────────────────────────── */
.fondo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.arranque, .login, .app, .avisos, #hojas { position: relative; z-index: 1; }

/* ── ARRANQUE ───────────────────────────────────────────────────────────── */
.arranque { position: fixed; inset: 0; display: grid; place-items: center; z-index: 50; }
.arranque .marca-svg { width: 72px; height: 72px; }
.arranque .marca-aro { transform-origin: 16px 16px; animation: girar 2.4s linear infinite; }
.arranque .marca-dial { transform-origin: 16px 16px; animation: latir 1.6s ease-in-out infinite; }
.arranque-error { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 24px; max-width: 340px; }
@keyframes latir { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.9); opacity: .7; } }

/* ── VIDRIO ─────────────────────────────────────────────────────────────── */
.vidrio {
  position: relative; isolation: isolate;
  background: linear-gradient(140deg, var(--vidrio-a), var(--vidrio-b));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.5); backdrop-filter: blur(var(--blur)) saturate(1.5);
  border: 1px solid var(--vidrio-borde); border-radius: var(--radio);
  box-shadow: inset 0 1px 0 var(--vidrio-luz), var(--sombra-1);
}
.vidrio::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(380px circle at var(--mx, 25%) var(--my, 0%), var(--brillo), transparent 46%);
}
.holo::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--holo); opacity: .8;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.inclinable {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .55s var(--curva); transform-style: preserve-3d; will-change: transform;
}
.inclinable.moviendo { transition: transform .08s linear; }

/* ── LAYOUT DE LA APP ───────────────────────────────────────────────────── */
.app { min-height: 100vh; min-height: 100dvh; }
.principal { min-width: 0; }

.barra-sup {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  min-height: calc(56px + var(--sa-arriba));
  padding: var(--sa-arriba) max(16px, var(--sa-der)) 0 max(16px, var(--sa-izq));
  background: var(--fondo);
  background: color-mix(in srgb, var(--fondo) 90%, transparent);
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
html.con-scroll .barra-sup { border-bottom-color: var(--linea); }
.barra-marca { display: inline-flex; }
.barra-sup h1 { flex: 1; min-width: 0; font-size: 23px; font-weight: 700; letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acciones { display: flex; align-items: center; gap: 4px; }

#contenido { position: relative; padding-bottom: calc(var(--barra-inf) + var(--sa-abajo) + 28px); transition: opacity .18s ease; view-transition-name: contenido; }
#contenido.refrescando > .vista:not(.vista-oculta) { opacity: .55; transition: opacity .18s ease; }
.vista-oculta { position: absolute !important; top: 0; left: 0; right: 0; visibility: hidden; pointer-events: none; }
.vista-entra { animation: aparecer .22s ease both; }

.pantalla { width: 100%; max-width: 1180px; margin: 0 auto; padding: 6px max(16px, var(--sa-der)) 16px max(16px, var(--sa-izq)); }
.pantalla .pantalla { padding: 0; max-width: none; }

/* transiciones entre pantallas (View Transitions API) */
::view-transition-old(contenido) { animation: vt-sale .16s ease both; }
::view-transition-new(contenido) { animation: vt-entra .34s var(--curva) both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
@keyframes vt-sale { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(12px); } }

/* barra inferior (iPhone): casi opaca, SIN blur */
.barra-inf {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; view-transition-name: barra-inf;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch;
  height: calc(var(--barra-inf) + var(--sa-abajo));
  padding: 0 var(--sa-der) var(--sa-abajo) var(--sa-izq);
  background: var(--barra-fondo); border-top: 1px solid var(--linea);
}
html.con-hoja .barra-inf { pointer-events: none; }
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 44px; border: 0; background: none; padding: 6px 0 4px; color: var(--texto-3);
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
}
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab .ico { width: 24px; height: 24px; transition: transform .3s var(--curva); }
.tab.activo { color: var(--texto); }
.tab.activo .ico { color: var(--acento); animation: tab-salto .42s var(--curva); }
@keyframes tab-salto { 0% { transform: scale(1); } 40% { transform: scale(1.16) translateY(-2px); } 100% { transform: none; } }
.tab-raya {
  position: absolute; top: -1px; left: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--holo); opacity: 0; transition: transform .38s var(--curva), opacity .2s ease;
}
.tab-raya.sin-anim, .raya.sin-anim { transition: none !important; }
.tab-anotar { display: grid; place-items: center; border: 0; background: none; padding: 0; min-height: 44px; }
.tab-anotar span {
  display: grid; place-items: center; width: 56px; height: 56px; margin-top: -20px; border-radius: 50%;
  background: var(--holo); color: var(--sobre-holo);
  box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--lila) 60%, transparent), 0 0 0 5px var(--fondo);
  transition: transform .2s var(--curva);
}
.tab-anotar:active span { transform: scale(.92) rotate(90deg); }
.tab-anotar .ico { width: 28px; height: 28px; }

/* barra lateral (compu) */
.lateral { display: none; }
@media (min-width: 960px) {
  .barra-inf { display: none; }
  .barra-marca { display: none; }
  #contenido { padding-bottom: 48px; }
  .principal { margin-left: var(--lateral); }
  .barra-sup { min-height: 76px; padding: 0 36px; }
  .barra-sup h1 { font-size: 30px; }
  .pantalla { padding: 6px 36px 28px; }
  .lateral {
    display: flex; flex-direction: column; gap: 6px; view-transition-name: lateral;
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--lateral); z-index: 40;
    padding: 22px 14px 14px; background: var(--barra-fondo); border-right: 1px solid var(--linea);
  }
  .lateral .marca { display: flex; align-items: center; gap: 11px; padding: 4px 10px 24px; }
  .lateral .marca-svg { width: 34px; height: 34px; }
  .marca-nombre { display: grid; line-height: 1.1; }
  .marca-nombre strong { font-family: var(--display); font-size: 20px; font-weight: 720; letter-spacing: -.02em; }
  .marca-nombre small { font-family: var(--mono); font-size: 9.5px; color: var(--texto-3); letter-spacing: .12em; margin-top: 3px; }
  .lateral-nav { display: grid; gap: 2px; }
  .lateral-item {
    position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px;
    border: 0; border-radius: 13px; background: none; color: var(--texto-2); font-size: 15px; font-weight: 600; text-align: left;
  }
  .lateral-item:hover { background: var(--campo-2); color: var(--texto); }
  .lateral-item.activo { background: var(--campo-2); color: var(--texto); }
  .lateral-item.activo .ico { color: var(--acento); }
  .lateral-item.activo::before {
    content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0;
    background: var(--holo); animation: crecer-y .3s var(--curva);
  }
  .lateral-anotar { margin: 16px 0 0; width: 100%; }
  .lateral-yo { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 4px 4px 8px; border-top: 1px solid var(--linea); }
}
.avatar {
  display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  background: var(--holo); color: var(--sobre-holo); font-family: var(--display); font-weight: 750; font-size: 15px;
}
.yo-textos { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.yo-textos strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yo-textos small { font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── CLASES COMUNES (11-Finanzas §7, con cara de Finanzas Ensigna) ────────────────── */
.pila { display: flex; flex-direction: column; gap: 12px; }
.fila { display: flex; align-items: center; gap: 8px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 960px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

.tarjeta {
  position: relative; min-width: 0; border-radius: var(--radio); padding: 16px;
  background: linear-gradient(150deg, var(--tarjeta-a), var(--tarjeta-b));
  border: 1px solid var(--vidrio-borde); box-shadow: var(--sombra-1);
}
.tarjeta-titulo { font-family: var(--display); font-size: 17px; font-weight: 660; letter-spacing: -.015em; color: var(--texto); }
.tarjeta-sub { font-size: 13px; color: var(--texto-2); margin-top: 2px; }

/* botones */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border: 1px solid var(--linea); border-radius: var(--radio-chico);
  background: var(--campo); color: var(--texto); font-size: 15px; font-weight: 650; line-height: 1.1;
  text-align: center; white-space: nowrap; user-select: none; -webkit-user-select: none;
  transition: transform .12s ease, background-color .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease, filter .16s ease;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primario {
  background: var(--holo); color: var(--sobre-holo); border-color: transparent;
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--lila) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.btn-fantasma { background: transparent; border-color: transparent; color: var(--texto-2); }
.btn-peligro { background: var(--sale); border-color: transparent; color: var(--sobre-sale); }
.btn-chico { min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: 11px; }
.btn-chico::after { content: ""; position: absolute; inset: -4px 0; }
.btn-icono {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--radio-chico); background: transparent; color: var(--texto-2);
  transition: background-color .16s ease, color .16s ease, transform .12s ease;
}
.btn-icono:active { transform: scale(.94); }
@media (hover: hover) {
  .btn:hover:not(:disabled) { border-color: var(--linea-fuerte); }
  .btn-primario:hover:not(:disabled), .btn-peligro:hover:not(:disabled) { border-color: transparent; filter: brightness(1.05) saturate(1.1); }
  .btn-fantasma:hover:not(:disabled) { background: var(--campo-2); border-color: transparent; color: var(--texto); }
  .btn-icono:hover { background: var(--campo-2); color: var(--texto); }
}
.btn.ocupado { color: transparent !important; pointer-events: none; }
.btn.ocupado > * { visibility: hidden; }
.btn.ocupado::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 2px solid var(--texto-3); border-color: var(--texto-3) var(--texto-3) transparent transparent;
  animation: girar .7s linear infinite;
}
.btn-primario.ocupado::before { border-color: var(--sobre-holo) var(--sobre-holo) transparent transparent; }
@keyframes girar { to { transform: rotate(360deg); } }

/* campos */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > span:first-child { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.campo input, .campo select, .campo textarea, .entrada {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--linea); border-radius: var(--radio-chico);
  background: var(--campo); color: var(--texto); font-size: 16px; line-height: 1.3;
  -webkit-appearance: none; appearance: none; transition: border-color .16s ease, box-shadow .16s ease;
}
.campo textarea { min-height: 96px; padding: 12px 14px; resize: vertical; }
.campo select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A85B0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 9.5 6.5 6.5 6.5-6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.campo select option { background: var(--superficie-solida); color: var(--texto); }
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-3); }
.campo input:focus, .campo select:focus, .campo textarea:focus, .entrada:focus {
  border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 24%, transparent); outline: none;
}
.campo.error input, .campo.error select, .campo.error textarea { border-color: var(--sale); }
.campo .nota { margin-top: -1px; }

/* chips y segmentado */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; position: relative;
  border: 1px solid var(--linea); border-radius: 999px; background: var(--campo); color: var(--texto-2);
  font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .12s ease;
}
.chip::after { content: ""; position: absolute; inset: -4px 0; }
.chip:active { transform: scale(.96); }
.chip.activo { background: var(--texto); border-color: var(--texto); color: var(--fondo); }

.segmentado {
  position: relative; display: inline-flex; align-items: stretch; padding: 3px; gap: 0;
  background: var(--campo-2); border: 1px solid var(--linea); border-radius: var(--radio-chico); isolation: isolate;
}
.segmentado > button {
  position: relative; z-index: 1; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent;
  color: var(--texto-2); font-size: 14px; font-weight: 650; white-space: nowrap; transition: color .2s ease;
}
.segmentado > button.activo { color: var(--texto); }
.segmentado > .raya {
  position: absolute; z-index: 0; left: 0; top: 3px; bottom: 3px; width: 0; border-radius: 10px;
  background: var(--pulgar); box-shadow: 0 1px 3px rgba(20, 18, 43, .12), inset 0 1px 0 rgba(255, 255, 255, .2); opacity: 0;
  transition: transform .34s var(--curva), width .34s var(--curva), opacity .2s ease;
}

/* filtros de Inicio y Movimientos */
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filtros .filtro-bolsillo { flex: 1 1 200px; }
@media (min-width: 960px) { .filtros .filtro-bolsillo { flex: 0 0 auto; min-width: 300px; } }
.selector-periodo {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px;
  border-radius: var(--radio-chico); background: var(--campo-2); border: 1px solid var(--linea); color: var(--texto); font-size: 14px; font-weight: 650;
  white-space: nowrap;
}
.selector-periodo .sp-ico { color: var(--texto-2); display: inline-flex; }
.selector-periodo .sp-chev { color: var(--texto-3); display: inline-flex; }
.selector-periodo select {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px;
  -webkit-appearance: none; appearance: none; border: 0;
}
.selector-periodo:focus-within { box-shadow: 0 0 0 2px var(--acento); }

/* listas */
.lista { display: flex; flex-direction: column; }
.lista > * + * { border-top: 1px solid var(--linea); }
.fila-lista {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 0; width: 100%;
  background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; color: inherit;
}
.lista > .fila-lista:first-child { border-top: 0; }
.fila-lista > :nth-child(2) { flex: 1 1 auto; min-width: 0; }
.fila-lista > :last-child:not(:first-child):not(:nth-child(2)) { margin-left: auto; flex: 0 0 auto; text-align: right; }
.fila-lista .titulo { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-lista .sub { display: block; font-size: 13px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.fila-lista { cursor: pointer; }
@media (hover: hover) { button.fila-lista:hover, a.fila-lista:hover { background: var(--campo-2); } }

.icono-cat {
  display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: var(--campo-2); border: 1px solid var(--linea); color: var(--texto-2);
}
.icono-cat .ico { width: 20px; height: 20px; }

.monto { font-weight: 700; white-space: nowrap; color: var(--texto); font-variant-numeric: tabular-nums; }
.monto.ingreso { color: var(--entra); }
.monto.gasto { color: var(--texto); }
.monto.inversion { color: var(--texto); }

.pill {
  display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--campo-2); color: var(--texto-2);
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; vertical-align: middle; line-height: 1.2;
}
.pill .ico { width: 12px; height: 12px; }
.pill.revisar { color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 45%, transparent); background: color-mix(in srgb, var(--aviso) 12%, transparent); }
.pill.revisar::before {
  content: ""; width: 11px; height: 11px; background: currentColor; flex: 0 0 auto;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4 2.4 17.8A2 2 0 0 0 4.1 20.8h15.8a2 2 0 0 0 1.7-3L13.7 4a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4.2M12 17.2h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4 2.4 17.8A2 2 0 0 0 4.1 20.8h15.8a2 2 0 0 0 1.7-3L13.7 4a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4.2M12 17.2h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pill.auto { color: var(--acento); border-color: color-mix(in srgb, var(--acento) 40%, transparent); }
/* estados (métricas, alertas): siempre con ícono + texto */
.pill.bueno { color: var(--entra); border-color: color-mix(in srgb, var(--entra) 42%, transparent); background: color-mix(in srgb, var(--entra) 10%, transparent); }
.pill.atento { color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 45%, transparent); background: color-mix(in srgb, var(--aviso) 11%, transparent); }
.pill.malo { color: var(--sale); border-color: color-mix(in srgb, var(--sale) 42%, transparent); background: color-mix(in srgb, var(--sale) 10%, transparent); }
.pill.sin-datos { color: var(--texto-2); }

.nota { font-size: 13px; line-height: 1.45; color: var(--texto-3); }

/* vacío */
.vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 36px 20px; max-width: 420px; margin: 0 auto; }
.vacio-img { width: 116px; height: 116px; object-fit: contain; margin-bottom: 6px; filter: drop-shadow(0 18px 24px rgba(20, 10, 60, .35)); animation: flotar 6s ease-in-out infinite; }
.vacio-ico {
  position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 8px;
  border-radius: 50%; background: var(--campo-2); color: var(--texto-2);
}
.vacio-ico::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px dashed var(--linea-fuerte);
  animation: girar 18s linear infinite;
}
.vacio-titulo { font-size: 18px; font-weight: 680; }
.vacio-texto { font-size: 14px; color: var(--texto-2); max-width: 34ch; }
.vacio .btn { margin-top: 10px; }
@keyframes flotar { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-2deg); } }

/* esqueleto */
.esqueleto {
  display: block; border-radius: 10px;
  background: linear-gradient(90deg, var(--campo-2) 25%, var(--linea) 50%, var(--campo-2) 75%);
  background-size: 200% 100%; animation: brillar 1.3s ease-in-out infinite;
}
.esqueleto-bloque { display: flex; flex-direction: column; }
.esqueleto-fila { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.esqueleto-fila + .esqueleto-fila { border-top: 1px solid var(--linea); }
.esq-circulo { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }
.esq-textos { flex: 1; display: grid; gap: 7px; }
.esq-linea { height: 12px; width: 62%; }
.esqueleto-fila:nth-child(2n) .esq-linea { width: 48%; }
.esqueleto-fila:nth-child(3n) .esq-linea { width: 70%; }
.esq-linea.esq-corta { width: 34% !important; height: 10px; }
.esq-monto { width: 72px; height: 14px; }
@keyframes brillar { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── ANIMACIONES ────────────────────────────────────────────────────────── */
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes crecer-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes dibujar { to { stroke-dashoffset: 0; } }
@keyframes sacudir { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
.anim-subir { animation: subir .38s var(--curva) both; }
.anim-crecer { transform-origin: 50% 100%; transform-box: fill-box; animation: crecer-y .7s var(--curva) both; }
.escalonado > * { animation: subir .4s var(--curva) both; }
.escalonado > *:nth-child(1) { animation-delay: .02s; }
.escalonado > *:nth-child(2) { animation-delay: .05s; }
.escalonado > *:nth-child(3) { animation-delay: .08s; }
.escalonado > *:nth-child(4) { animation-delay: .11s; }
.escalonado > *:nth-child(5) { animation-delay: .14s; }
.escalonado > *:nth-child(6) { animation-delay: .17s; }
.escalonado > *:nth-child(7) { animation-delay: .20s; }
.escalonado > *:nth-child(8) { animation-delay: .23s; }
.escalonado > *:nth-child(9) { animation-delay: .26s; }
.escalonado > *:nth-child(10) { animation-delay: .29s; }
.escalonado > *:nth-child(n+11) { animation-delay: .32s; }
.dibujar path, .dibujar circle { stroke-dasharray: 40; stroke-dashoffset: 40; animation: dibujar .5s .08s var(--curva) forwards; }
.sacudir { animation: sacudir .42s ease both; }

/* ── HOJA ───────────────────────────────────────────────────────────────── */
.hoja-capa {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: var(--teclado, 0px);
}
.hoja-fondo { position: absolute; inset: 0; background: var(--velo); opacity: 0; transition: opacity .3s ease; }
.hoja-capa.abierta .hoja-fondo { opacity: 1; }
.hoja {
  position: relative; display: flex; flex-direction: column; width: 100%;
  max-height: calc(var(--vv-alto, 100dvh) - var(--sa-arriba) - 10px);
  background: var(--superficie-solida); color: var(--texto); border-radius: 26px 26px 0 0;
  border: 1px solid var(--linea); border-bottom: 0;
  box-shadow: var(--sombra-2); outline: none;
  transform: translateY(100%); transition: transform .38s var(--curva);
  will-change: transform;
}
.hoja::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; pointer-events: none;
  background: var(--holo); opacity: .7;
}
.hoja-capa.abierta .hoja { transform: translateY(0); }
.hoja-capa.cerrando .hoja { transform: translateY(100%); transition-duration: .28s; transition-timing-function: cubic-bezier(.4, 0, 1, 1); }
.hoja.arrastrando { transition: none !important; }
.hoja-agarre { display: grid; place-items: center; height: 20px; flex: 0 0 auto; cursor: grab; touch-action: none; }
.hoja-agarre span { width: 38px; height: 5px; border-radius: 3px; background: var(--linea-fuerte); }
.hoja-cabeza { display: flex; align-items: center; gap: 8px; padding: 0 8px 4px 20px; min-height: 48px; flex: 0 0 auto; touch-action: none; }
.hoja-titulo { flex: 1; min-width: 0; font-size: 20px; font-weight: 700; }
.hoja.sin-titulo .hoja-cabeza { min-height: 0; padding-bottom: 0; justify-content: flex-end; }
.hoja-cuerpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 8px max(20px, var(--sa-der)) calc(20px + var(--sa-abajo)) max(20px, var(--sa-izq));
}
html.teclado-abierto .hoja-cuerpo { padding-bottom: 16px; }
@media (min-width: 760px) {
  .hoja-capa { align-items: center; padding: 24px; }
  .hoja {
    width: min(540px, 100%); max-height: min(86vh, 860px); border-radius: 24px; border-bottom: 1px solid var(--linea);
    transform: translateY(12px) scale(.97); opacity: 0; transition: transform .3s var(--curva), opacity .22s ease;
  }
  .hoja.hoja-ancha { width: min(840px, 100%); }
  .hoja.hoja-chica { width: min(420px, 100%); }
  .hoja-capa.abierta .hoja { transform: none; opacity: 1; }
  .hoja-capa.cerrando .hoja { transform: translateY(8px) scale(.98); opacity: 0; transition-duration: .18s; }
  .hoja-agarre { display: none; }
  .hoja-cabeza { padding: 16px 10px 4px 24px; }
  .hoja-cuerpo { padding: 8px 24px 24px; }
}

/* confirmar */
.confirmar { display: flex; flex-direction: column; gap: 14px; padding-top: 2px; }
.confirmar-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--campo-2); color: var(--acento); }
.confirmar-ico.peligro { color: var(--sale); background: color-mix(in srgb, var(--sale) 13%, transparent); }
.confirmar-texto { font-size: 15px; color: var(--texto-2); white-space: pre-line; }
.confirmar-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.confirmar-botones .btn { min-height: 48px; }
.hoja-confirmar .hoja-cabeza { padding-top: 6px; }

/* ── AVISOS (toast) ─────────────────────────────────────────────────────── */
.avisos {
  position: fixed; z-index: 90; left: 0; right: 0; top: calc(var(--sa-arriba) + 8px);
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 12px; pointer-events: none;
}
.aviso {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: min(460px, 100%);
  min-height: 46px; padding: 10px 16px 10px 12px; border-radius: 16px;
  background: var(--superficie-solida); color: var(--texto); border: 1px solid var(--linea); box-shadow: var(--sombra-2);
  font-size: 14px; font-weight: 600; line-height: 1.3;
  transform: translateY(-16px) scale(.96); opacity: 0; transition: transform .32s var(--curva), opacity .22s ease;
}
.aviso.visible { transform: none; opacity: 1; }
.aviso.saliendo { transform: translateY(-10px) scale(.97); opacity: 0; }
.aviso-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; }
.aviso-ok .aviso-ico { background: color-mix(in srgb, var(--entra) 18%, transparent); color: var(--entra); }
.aviso-ok .aviso-ico path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: dibujar .45s .15s var(--curva) forwards; }
.aviso-error .aviso-ico { background: color-mix(in srgb, var(--sale) 18%, transparent); color: var(--sale); }
.aviso-info .aviso-ico { background: color-mix(in srgb, var(--acento) 18%, transparent); color: var(--acento); }
@media (min-width: 960px) {
  .avisos { top: auto; bottom: 24px; left: var(--lateral); }
  .aviso { transform: translateY(16px) scale(.96); }
  .aviso.saliendo { transform: translateY(10px) scale(.97); }
}

/* ── ENTRADA (login.js) ─────────────────────────────────────────────────── */
.login {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: calc(var(--sa-arriba) + 20px) max(20px, var(--sa-der)) calc(var(--sa-abajo) + 20px) max(20px, var(--sa-izq));
}
.login-caja { width: 100%; max-width: 400px; display: grid; justify-items: center; text-align: center; gap: 12px; }
.login-escena { position: relative; width: min(240px, 62vw); aspect-ratio: 1; margin-bottom: 4px; }
.login-escena::before {
  content: ""; position: absolute; inset: 12%; border-radius: 50%; filter: blur(34px); opacity: .55;
  background: conic-gradient(from 90deg, #7FE3FF, #B9A2FF, #FFC6A8, #7FE3FF);
  animation: girar 14s linear infinite;
}
.login-img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(10, 6, 40, .45)); animation: flotar 7s ease-in-out infinite; }
.login-titulo { font-family: var(--display); font-size: clamp(44px, 13vw, 60px); font-weight: 760; letter-spacing: -.045em; line-height: .95; font-variation-settings: "opsz" 96; }
.login-bajada { font-size: 16px; color: var(--texto-2); max-width: 30ch; }
.login-panel { width: 100%; display: grid; gap: 12px; margin-top: 14px; padding: 18px; }
.btn-google {
  width: 100%; min-height: 54px; gap: 12px; border-radius: 15px; font-size: 16px; font-weight: 650;
  background: #FFFFFF; color: #1F1F1F; border: 1px solid rgba(20, 18, 43, .16);
  box-shadow: 0 10px 26px -14px rgba(10, 6, 40, .55);
}
.btn-google .g-logo { width: 22px; height: 22px; flex: 0 0 auto; }
@media (hover: hover) { .btn-google:hover:not(:disabled) { border-color: rgba(20, 18, 43, .3); filter: none; background: #F7F7FB; } }
.login-error {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radio-chico); text-align: left;
  background: color-mix(in srgb, var(--sale) 12%, transparent); color: var(--texto); font-size: 14px; font-weight: 550;
  border: 1px solid color-mix(in srgb, var(--sale) 40%, transparent);
}
.login-error .ico { color: var(--sale); margin-top: 1px; }
.login-ok { background: color-mix(in srgb, var(--entra) 12%, transparent); border-color: color-mix(in srgb, var(--entra) 40%, transparent); }
.login-ok .ico { color: var(--entra); }
.login-pie { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.login-pie .ico { color: var(--texto-3); }
.login-serie { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.login-cinta { width: 64px; height: 8px; border-radius: 4px; background: var(--holo); opacity: .85; }

/* ── GRÁFICAS (graficos.js) ─────────────────────────────────────────────── */
.gf { position: relative; min-width: 0; container-type: inline-size; }
.gf-zona { position: relative; min-width: 0; }
.gf-svg { display: block; overflow: visible; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.gf-svg:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; border-radius: 10px; }
.gf-eje { font-family: var(--cuerpo); font-size: 11px; font-variant-numeric: tabular-nums; }
.gf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gf-oculto { display: none !important; }
.gf-esperando { opacity: 0; }
.gf-capa-texto { transition: opacity .25s ease; }

.gf-tip {
  position: absolute; z-index: 5; left: 0; top: 0; min-width: 132px; max-width: 240px; pointer-events: none;
  padding: 9px 11px; border-radius: 13px; background: var(--superficie-solida); color: var(--texto);
  border: 1px solid var(--linea); box-shadow: var(--sombra-2); font-size: 13px; line-height: 1.35;
  opacity: 0; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease;
}
.gf-tip.medir { visibility: hidden; opacity: 1; transition: none; }
.gf-tip.visible { opacity: 1; transform: none; }
.gf-tip-titulo { font-weight: 700; margin-bottom: 4px; }
.gf-tip-fila { display: flex; align-items: center; gap: 7px; }
.gf-tip-fila + .gf-tip-fila { margin-top: 2px; }
.gf-tip-clave { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.gf-tip-valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.gf-tip-nombre { color: var(--texto-2); }
.gf-tip-pie { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--linea); color: var(--texto-2); font-size: 12px; }

.gf-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; }
.gf-leyenda-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-2); }
.gf-muestra { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.gf-muestra-linea { width: 16px; height: 3px; border-radius: 2px; }
.gf-leyenda-valor { color: var(--texto); font-weight: 650; font-variant-numeric: tabular-nums; }

.gf-tarjeta { display: flex; flex-direction: column; gap: 10px; }
.gf-tarjeta-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.gf-tarjeta-textos { min-width: 0; }
.gf-tarjeta-cuerpo { min-width: 0; }
.gf-alternar { margin: -6px -8px 0 0; color: var(--texto-2); }

.gf-tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; border: 1px solid var(--linea); }
.gf-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.gf-tabla th, .gf-tabla td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.gf-tabla thead th { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.gf-tabla tbody th { font-weight: 600; color: var(--texto); }
.gf-tabla td { color: var(--texto-2); }
.gf-tabla tr:last-child > * { border-bottom: 0; }
.gf-tabla .gf-num { text-align: right; font-variant-numeric: tabular-nums; }
.gf-tabla-vacia { text-align: center !important; color: var(--texto-3) !important; padding: 18px !important; }

/* anillo */
.gf-anillo { display: grid; place-items: center; position: relative; }
.gf-anillo svg { display: block; overflow: visible; }
.gf-anillo-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.gf-anillo-valor { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--texto); font-variant-numeric: tabular-nums; }
.gf-anillo-sub { font-size: 10.5px; color: var(--texto-3); margin-top: 3px; line-height: 1.1; }

/* dona y arcos: lista debajo en el teléfono, al lado cuando hay lugar */
.gf-dona-caja { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: center; }
@container (min-width: 560px) {
  .gf-dona-caja { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 28px; }
}
.gf-dona-grafica { position: relative; width: min(100%, 230px); aspect-ratio: 1; margin: 0 auto; }
.gf-dona-grafica svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gf-dona-centro { position: absolute; inset: 22%; display: grid; place-content: center; text-align: center; pointer-events: none; }
.gf-dona-titulo { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.gf-dona-valor { font-family: var(--display); font-weight: 720; font-size: 22px; letter-spacing: -.03em; line-height: 1.05; color: var(--texto); margin-top: 3px; }
.gf-dona-lista { display: flex; flex-direction: column; min-width: 0; }
.gf-dona-fila {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 52px; padding: 6px 8px; margin: 0 -8px; border: 0; border-radius: 12px; background: none; text-align: left; color: inherit;
  transition: background-color .16s ease, opacity .2s ease;
}
.gf-dona-fila + .gf-dona-fila { box-shadow: inset 0 1px 0 var(--linea); }
.gf-dona-fila.gf-activa, .gf-dona-fila:focus-visible { background: var(--campo-2); }
.gf-dona-lista.gf-hay-activa .gf-dona-fila:not(.gf-activa) { opacity: .55; }
.gf-dona-ico { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--campo-2); color: var(--texto-2); }
.gf-dona-ico .ico { width: 18px; height: 18px; }
.gf-dona-ico::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--gf-color, var(--texto-3)); box-shadow: 0 0 0 2px var(--superficie-solida); }
.gf-dona-textos { min-width: 0; display: grid; line-height: 1.25; }
.gf-dona-nombre { font-size: 14.5px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-dona-n { font-size: 12.5px; color: var(--texto-3); }
.gf-dona-cifras { display: grid; justify-items: end; line-height: 1.25; }
.gf-dona-monto { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gf-dona-pct { font-size: 12.5px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.gf-marca-dona { transition: opacity .2s ease, stroke-width .2s ease; cursor: pointer; }

/* medidor (presupuesto con meta) */
.gf-medidor { display: grid; gap: 6px; }
.gf-medidor-textos { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--texto-2); }
.gf-medidor-textos strong { color: var(--texto); font-size: 14px; font-variant-numeric: tabular-nums; }
.gf-medidor-pista { position: relative; height: 10px; border-radius: 5px; background: var(--campo-2); box-shadow: inset 0 0 0 1px var(--linea); }
.gf-medidor-relleno { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 5px; transition: width .8s var(--curva); }
.gf-medidor-meta { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--texto); }
.gf-medidor-estado { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--texto-2); }
.gf-medidor-estado .ico { width: 14px; height: 14px; }
.gf-medidor-estado.gf-malo .ico { color: var(--sale); }
.gf-medidor-estado.gf-atento .ico { color: var(--aviso); }
.gf-medidor-estado.gf-bueno .ico { color: var(--entra); }

/* chispa */
.gf-chispa { display: block; }
.gf-chispa svg { display: block; overflow: visible; }

/* ── el que no quiere movimiento ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .inclinable { transform: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}