/* ============================================================================
   Finanzas Familiares — sistema de diseño

   Una decisión gobierna todo lo demás: **el color significa dato**. El acento
   de la interfaz es tinta (casi negro en claro, casi blanco en oscuro), no un
   tono, para que las ocho ranuras de la paleta categórica queden libres para
   las categorías de gasto y nada compita con ellas. Un botón azul y un grupo
   "Niños" azul en la misma pantalla es una ambigüedad que no se paga.

   La paleta categórica y los tonos de estado son la instancia validada de la
   guía de visualización: pasan el corte de daltonismo por pares adyacentes en
   los dos modos. El ORDEN de las ranuras es el mecanismo de seguridad, no
   decoración: no reordenar sin volver a validar.

   Una sola familia tipográfica (Figtree) para todo, con JetBrains Mono
   reservado a las columnas numéricas que tienen que alinearse verticalmente.
   ============================================================================ */

/* ── Tipografías, subseteadas y servidas desde el propio sitio ───────── */

@font-face{font-family:'Figtree';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/figtree-latin.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/jbmono-latin.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/jbmono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ══ Fichas ═══════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* Superficies: papel cálido, no blanco puro */
  --plano:    #f4f3ef;
  --sup:      #fcfcfb;
  --sup2:     #efeeea;
  --sup3:     #e7e6e0;
  --material: rgba(250, 250, 248, 0.78);

  /* Tinta */
  --tinta:  #0b0b0b;
  --tinta2: #52514e;
  --tinta3: #898781;
  --tinta-inv: #fcfcfb;

  /* Líneas: la elevación se declara UNA vez, borde o sombra, nunca las dos */
  --linea:  #e1e0d9;
  --linea2: #c3c2b7;

  /* Interacción — tinta, no tono */
  --accion:      #16161a;
  --accion-alta: #2e2e35;
  --enlace:      #1c5cab;
  --foco:        #1c5cab;
  --lavado:      rgba(11, 11, 11, 0.05);
  --lavado2:     rgba(11, 11, 11, 0.09);

  /* Estado — nunca reutilizados como color de serie, siempre con ícono */
  --ok:       #0ca30c;
  --aviso:    #fab219;
  --serio:    #ec835a;
  --critico:  #d03b3b;
  --ok-txt:   #006300;

  /* Ocho ranuras categóricas validadas. El orden es el mecanismo. */
  --s1: #2a78d6;  --s2: #eb6834;  --s3: #1baf7a;  --s4: #eda100;
  --s5: #e87ba4;  --s6: #008300;  --s7: #4a3aa7;  --s8: #e34948;
  --s-neutro: #898781;

  /* Sombras con desplazamiento real y difuminado suave */
  --sombra1: 0 1px 2px rgba(11,11,11,.05), 0 1px 3px rgba(11,11,11,.04);
  --sombra2: 0 2px 4px rgba(11,11,11,.04), 0 8px 22px rgba(11,11,11,.07);
  --sombra3: 0 8px 16px rgba(11,11,11,.07), 0 24px 56px rgba(11,11,11,.12);

  /* Escala tipográfica fija: en producto no se usa clamp */
  --t-xs:  .75rem;    --t-sm:  .8125rem;  --t-md:   .875rem;
  --t-base:.9375rem;  --t-lg:  1.0625rem; --t-xl:   1.375rem;
  --t-2xl: 1.75rem;   --t-hero:2.75rem;

  /* Ritmo denso: es un tablero, no una portada */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 20px;  --e6: 24px;  --e7: 32px;  --e8: 44px;  --e9: 64px;

  --r-chico: 8px;  --r-medio: 11px;  --r-tarjeta: 14px;  --r-pastilla: 999px;

  --lateral: 244px;
  --rapido: 140ms;  --medio: 220ms;
  --curva: cubic-bezier(.22,.61,.36,1);
  --resorte: cubic-bezier(.32,.72,0,1);
}

:root[data-tema="dark"], :root[data-tema="noche"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="dia"]) { color-scheme: dark; }
}

/* Los valores oscuros se declaran dos veces: una para la preferencia del
   sistema y otra para el interruptor, que tiene que ganar en ambos sentidos. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="dia"]) {
    --plano:#0c0c0b; --sup:#171716; --sup2:#201f1e; --sup3:#2a2a28;
    --material: rgba(18,18,17,.82);
    --tinta:#f5f4ef; --tinta2:#c3c2b7; --tinta3:#8b8981; --tinta-inv:#0c0c0b;
    --linea:#2c2c2a; --linea2:#3a3a37;
    --accion:#f0efe9; --accion-alta:#ffffff; --enlace:#86b6ef; --foco:#86b6ef;
    --lavado: rgba(245,244,239,.06); --lavado2: rgba(245,244,239,.11);
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
    --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
    --ok-txt:#0ca30c;
    --sombra1:none; --sombra2:none; --sombra3:0 16px 48px rgba(0,0,0,.6);
  }
}
:root[data-tema="noche"] {
  --plano:#0c0c0b; --sup:#171716; --sup2:#201f1e; --sup3:#2a2a28;
  --material: rgba(18,18,17,.82);
  --tinta:#f5f4ef; --tinta2:#c3c2b7; --tinta3:#8b8981; --tinta-inv:#0c0c0b;
  --linea:#2c2c2a; --linea2:#3a3a37;
  --accion:#f0efe9; --accion-alta:#ffffff; --enlace:#86b6ef; --foco:#86b6ef;
  --lavado: rgba(245,244,239,.06); --lavado2: rgba(245,244,239,.11);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
  --ok-txt:#0ca30c;
  --sombra1:none; --sombra2:none; --sombra3:0 16px 48px rgba(0,0,0,.6);
}

/* Menos transparencia: el material se vuelve opaco en vez de desaparecer */
@media (prefers-reduced-transparency: reduce) {
  :root { --material: var(--sup); }
}

/* ══ Base ═════════════════════════════════════════════════════════════ */

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

html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--linea2) transparent; }

body {
  background: var(--plano);
  color: var(--tinta);
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-base);
  line-height: 1.5;
  letter-spacing: -0.005em;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Las superficies del navegador también son parte del diseño */
::selection { background: var(--lavado2); color: var(--tinta); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--linea2); border-radius: 999px; border: 3px solid var(--plano); }
::-webkit-scrollbar-thumb:hover { background: var(--tinta3); }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--r-chico);
}
:focus:not(:focus-visible) { outline: none; }

a { color: var(--enlace); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3, h4 { font-weight: 650; line-height: 1.18; letter-spacing: -0.022em; }
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-base); letter-spacing: -0.012em; }

svg { display: block; }

.fz-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.fz-ic {
  width: 20px; height: 20px; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.fz-ic .lleno { fill: currentColor; stroke: none; }
.fz-ic-chico { width: 16px; height: 16px; stroke-width: 1.8; }

.fz-saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accion); color: var(--tinta-inv);
  padding: var(--e3) var(--e5); border-radius: 0 0 var(--r-medio) 0;
}
.fz-saltar:focus { left: 0; }

/* Cifras: mono sólo donde hay que alinear columnas verticalmente */
.fz-cifra { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.fz-col-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-sm);
  letter-spacing: -0.03em;
}

/* ══ Marco: lateral + columna ═════════════════════════════════════════ */

.fz-marco { display: flex; min-height: 100dvh; }
.fz-menu-check { position: absolute; opacity: 0; pointer-events: none; }

.fz-lateral {
  width: var(--lateral); flex: none;
  display: flex; flex-direction: column;
  background: var(--sup);
  border-right: 1px solid var(--linea);
  position: sticky; top: 0; height: 100dvh;
  padding: var(--e5) 0 var(--e4);
  z-index: 30;
}

.fz-marca {
  display: flex; align-items: center; gap: var(--e3);
  padding: 0 var(--e5) var(--e6);
}
.fz-marca-ic { width: 24px; height: 24px; color: var(--tinta); stroke-width: 1.9; }
.fz-marca-txt { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.03em; }
.fz-menu-cerrar { display: none; margin-left: auto; cursor: pointer; color: var(--tinta2); padding: var(--e2); }

.fz-nav { flex: 1; overflow-y: auto; padding: 0 var(--e3); }
.fz-nav-grupo {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta3);
  padding: var(--e4) var(--e3) var(--e2);
}
.fz-nav-grupo:first-child { padding-top: 0; }

.fz-nav-item {
  display: flex; align-items: center; gap: var(--e3);
  padding: 9px var(--e3); border-radius: var(--r-medio);
  color: var(--tinta2); text-decoration: none;
  font-size: var(--t-md); font-weight: 500;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva);
  min-height: 38px;
}
.fz-nav-item:hover { background: var(--lavado); color: var(--tinta); }
.fz-nav-item.activa { background: var(--lavado2); color: var(--tinta); font-weight: 600; }
.fz-nav-item.activa .fz-ic { stroke-width: 1.9; }
.fz-nav-item .fz-pastilla { margin-left: auto; }

.fz-pastilla {
  background: var(--critico); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: var(--r-pastilla);
  font-variant-numeric: tabular-nums;
}

.fz-lateral-pie { padding: var(--e3) var(--e3) 0; border-top: 1px solid var(--linea); margin-top: var(--e4); }

.fz-tema {
  display: flex; align-items: center; gap: var(--e3); width: 100%;
  padding: 9px var(--e3); border: 0; background: none; cursor: pointer;
  border-radius: var(--r-medio); color: var(--tinta2);
  font: inherit; font-size: var(--t-md); font-weight: 500; min-height: 38px;
}
.fz-tema:hover { background: var(--lavado); color: var(--tinta); }
.fz-ic-luna { display: none; }
:root[data-tema="noche"] .fz-ic-sol { display: none; }
:root[data-tema="noche"] .fz-ic-luna { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="dia"]) .fz-ic-sol { display: none; }
  :root:not([data-tema="dia"]) .fz-ic-luna { display: block; }
}

.fz-usuario {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3); margin-top: var(--e1);
}
.fz-avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--accion); color: var(--tinta-inv);
  display: grid; place-items: center;
  font-size: var(--t-sm); font-weight: 700;
}
.fz-usuario-txt { min-width: 0; line-height: 1.25; }
.fz-usuario-txt strong { display: block; font-size: var(--t-sm); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fz-usuario-txt small { display: block; font-size: var(--t-xs); color: var(--tinta3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fz-salir { margin-left: auto; color: var(--tinta3); padding: var(--e1); border-radius: var(--r-chico); }
.fz-salir:hover { color: var(--critico); }

.fz-velo { display: none; }

.fz-columna { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── Barra superior: material translúcido, el contenido pasa por debajo ── */

.fz-superior {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e5) var(--e7) var(--e4);
  background: var(--material);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
/* Borde de scroll en vez de una regla dura permanente */
.fz-superior::after {
  content: ''; position: absolute; inset: auto 0 -1px 0; height: 1px;
  background: var(--linea); opacity: 0;
  transition: opacity var(--rapido) var(--curva);
}
.fz-superior.desplazada::after { opacity: 1; }

.fz-menu-abrir { display: none; cursor: pointer; color: var(--tinta); padding: var(--e2); margin: calc(var(--e2) * -1); }
.fz-titulo { font-size: var(--t-xl); font-weight: 680; letter-spacing: -0.028em; }
.fz-superior-acciones { margin-left: auto; display: flex; gap: var(--e2); align-items: center; }

/* ── Barra de filtros ────────────────────────────────────────────────── */

.fz-filtros {
  position: sticky; top: 66px; z-index: 19;
  display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap;
  padding: var(--e2) var(--e7) var(--e3);
  background: var(--material);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--linea);
}

.fz-periodo { display: flex; align-items: center; gap: 2px; }
.fz-p-nav {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; color: var(--tinta2);
  border-radius: var(--r-chico);
}
.fz-p-nav:hover { background: var(--lavado); color: var(--tinta); }
.fz-p-nav:disabled { opacity: .35; cursor: default; }
.fz-p-actual {
  display: flex; align-items: center; gap: var(--e2);
  border: 1px solid var(--linea); background: var(--sup);
  padding: 6px var(--e3); border-radius: var(--r-medio); cursor: pointer;
  font: inherit; font-size: var(--t-md); font-weight: 600; color: var(--tinta);
  min-width: 148px; justify-content: center; min-height: 32px;
}
.fz-p-actual:hover { border-color: var(--linea2); }

.fz-filtros-chips { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.fz-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--sup2); border: 1px solid var(--linea);
  padding: 4px 6px 4px 10px; border-radius: var(--r-pastilla);
  font-size: var(--t-sm); font-weight: 500; color: var(--tinta2);
}
.fz-chip button {
  border: 0; background: none; cursor: pointer; color: var(--tinta3);
  display: grid; place-items: center; padding: 2px; border-radius: 50%;
}
.fz-chip button:hover { color: var(--critico); background: var(--lavado); }
.fz-chip-limpiar { color: var(--enlace); font-size: var(--t-sm); background: none; border: 0;
  cursor: pointer; font: inherit; font-size: var(--t-sm); padding: 4px 6px; }

.fz-filtros-acciones { margin-left: auto; display: flex; gap: var(--e2); align-items: center; }
.fz-buscar { position: relative; display: flex; align-items: center; }
.fz-buscar .fz-ic { position: absolute; left: 10px; color: var(--tinta3); pointer-events: none; }
/* Especificidad a propósito: la regla genérica de input[type=search] tiene la
   misma que `.fz-buscar input` y, al venir después, le ganaba el padding
   izquierdo — el texto arrancaba encima de la lupa. */
.fz-filtros .fz-buscar input[type="search"] {
  border: 1px solid var(--linea); background: var(--sup);
  border-radius: var(--r-medio); padding: 7px var(--e3) 7px 32px;
  font: inherit; font-size: var(--t-md); color: var(--tinta);
  width: 220px; min-height: 32px;
}
.fz-buscar input::placeholder { color: var(--tinta3); }
.fz-buscar input:focus { border-color: var(--foco); }

/* ══ Contenido ════════════════════════════════════════════════════════ */

.fz-main { flex: 1; padding: var(--e6) var(--e7) var(--e9); max-width: 1240px; width: 100%; }
.fz-main.amplio { max-width: none; }
.fz-subtitulo { color: var(--tinta2); font-size: var(--t-md); margin: calc(var(--e3) * -1) 0 var(--e5); max-width: 68ch; }

.fz-seccion {
  display: flex; align-items: baseline; gap: var(--e3);
  margin: var(--e8) 0 var(--e4);
}
.fz-seccion:first-child { margin-top: 0; }
.fz-seccion h2 { font-size: var(--t-lg); }
.fz-seccion .fz-nota { color: var(--tinta3); font-size: var(--t-sm); }
.fz-seccion-acc { margin-left: auto; display: flex; gap: var(--e2); }

.fz-tarjeta {
  background: var(--sup); border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra1); padding: var(--e5);
}
:root[data-tema="noche"] .fz-tarjeta { border: 1px solid var(--linea); box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="dia"]) .fz-tarjeta { border: 1px solid var(--linea); box-shadow: none; }
}
.fz-tarjeta-tit { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e4); }
.fz-tarjeta-tit h3 { font-size: var(--t-md); font-weight: 620; }
.fz-tarjeta-tit .fz-ic { color: var(--tinta3); }

/* ── Fichas de cifra ─────────────────────────────────────────────────── */

.fz-cifras { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.fz-ficha {
  background: var(--sup); border-radius: var(--r-tarjeta); padding: var(--e4) var(--e5);
  box-shadow: var(--sombra1); display: flex; flex-direction: column; gap: 2px;
  position: relative;
}
:root[data-tema="noche"] .fz-ficha { border: 1px solid var(--linea); box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="dia"]) .fz-ficha { border: 1px solid var(--linea); box-shadow: none; }
}
.fz-ficha-rot {
  font-size: var(--t-sm); color: var(--tinta2); font-weight: 500;
  display: flex; align-items: center; gap: 5px;
}
.fz-ficha-val { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.fz-ficha-val.hero { font-size: var(--t-hero); }
.fz-ficha-pie { font-size: var(--t-sm); color: var(--tinta3); }
.fz-ficha-delta { font-size: var(--t-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.fz-delta-sube { color: var(--critico); }   /* en gastos, subir es malo */
.fz-delta-baja { color: var(--ok-txt); }
.fz-ficha.destacada { background: var(--accion); color: var(--tinta-inv); box-shadow: var(--sombra2); }
.fz-ficha.destacada .fz-ficha-rot, .fz-ficha.destacada .fz-ficha-pie { color: var(--tinta-inv); opacity: .72; }

.fz-ayuda {
  border: 0; background: none; cursor: help; color: var(--tinta3);
  display: inline-grid; place-items: center; padding: 0;
}
.fz-ayuda:hover { color: var(--tinta); }

/* ── Botones ─────────────────────────────────────────────────────────── */

.fz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px var(--e4); border-radius: var(--r-medio);
  border: 1px solid transparent; cursor: pointer;
  font: inherit; font-size: var(--t-md); font-weight: 560;
  min-height: 36px; white-space: nowrap; text-decoration: none;
  transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva),
              transform var(--rapido) var(--resorte), opacity var(--rapido) var(--curva);
}
.fz-btn:active { transform: scale(.975); }
.fz-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.fz-btn-primario { background: var(--accion); color: var(--tinta-inv); }
.fz-btn-primario:hover:not(:disabled) { background: var(--accion-alta); }

.fz-btn-suave { background: var(--sup2); color: var(--tinta); border-color: var(--linea); }
.fz-btn-suave:hover:not(:disabled) { background: var(--sup3); }

.fz-btn-fantasma { background: none; color: var(--tinta2); border-color: var(--linea); }
.fz-btn-fantasma:hover:not(:disabled) { background: var(--lavado); color: var(--tinta); }

.fz-btn-peligro { background: none; color: var(--critico); border-color: var(--linea); }
.fz-btn-peligro:hover:not(:disabled) { background: rgba(208,59,59,.09); border-color: var(--critico); }

.fz-btn-chico { padding: 5px var(--e3); min-height: 30px; font-size: var(--t-sm); }
.fz-btn-icono { padding: 7px; min-height: 34px; width: 34px; }

.fz-btn.cargando { pointer-events: none; opacity: .7; }
.fz-btn.cargando::before {
  content: ''; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: fz-girar .7s linear infinite;
}
@keyframes fz-girar { to { transform: rotate(360deg); } }

/* ── Segmentos (conmutador de vista) ─────────────────────────────────── */

.fz-segmentos {
  display: inline-flex; background: var(--sup2); border-radius: var(--r-medio);
  padding: 3px; gap: 2px; border: 1px solid var(--linea);
}
.fz-segmentos button {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: var(--t-sm); font-weight: 550; color: var(--tinta2);
  padding: 5px var(--e3); border-radius: 8px; min-height: 28px;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.fz-segmentos button:hover { color: var(--tinta); }
.fz-segmentos button[aria-pressed="true"] {
  background: var(--sup); color: var(--tinta); font-weight: 620; box-shadow: var(--sombra1);
}

/* ── Formularios ─────────────────────────────────────────────────────── */

.fz-campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--e4); }
.fz-campo > label { font-size: var(--t-sm); font-weight: 560; color: var(--tinta2); }
.fz-campo .fz-pista { font-size: var(--t-xs); color: var(--tinta3); }
.fz-campo .fz-error { font-size: var(--t-xs); color: var(--critico); display: flex; align-items: center; gap: 4px; }

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=date], select, textarea {
  width: 100%; border: 1px solid var(--linea); background: var(--sup);
  border-radius: var(--r-medio); padding: 9px var(--e3);
  font: inherit; font-size: var(--t-md); color: var(--tinta);
  min-height: 38px; transition: border-color var(--rapido) var(--curva);
  caret-color: var(--enlace);
}
textarea { min-height: 88px; resize: vertical; line-height: 1.55; }
select { appearance: none; padding-right: var(--e7); cursor: pointer; }
.fz-select { position: relative; }
.fz-select > .fz-ic { position: absolute; right: 10px; top: 50%; margin-top: -8px;
  color: var(--tinta3); pointer-events: none; }
input:focus, select:focus, textarea:focus { border-color: var(--foco); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--critico); }
input::placeholder, textarea::placeholder { color: var(--tinta3); }
input:disabled, select:disabled, textarea:disabled { background: var(--sup2); color: var(--tinta3); cursor: not-allowed; }

/* En móvil el tipo baja de 16px y iOS hace zoom al enfocar */
@media (max-width: 860px) {
  input, select, textarea { font-size: 16px; }
}

.fz-fila { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.fz-check { display: flex; align-items: flex-start; gap: var(--e3); cursor: pointer; font-size: var(--t-md); }
.fz-check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accion); flex: none; }

.fz-switch { display: flex; align-items: center; gap: var(--e3); cursor: pointer; }
.fz-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.fz-switch-pista {
  width: 42px; height: 25px; border-radius: 999px; background: var(--sup3);
  position: relative; flex: none; transition: background var(--medio) var(--resorte);
}
.fz-switch-pista::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 19px; height: 19px; border-radius: 50%; background: var(--sup);
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
  transition: transform var(--medio) var(--resorte);
}
.fz-switch input:checked + .fz-switch-pista { background: var(--ok); }
.fz-switch input:checked + .fz-switch-pista::after { transform: translateX(17px); }
.fz-switch input:focus-visible + .fz-switch-pista { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ── Tablas ──────────────────────────────────────────────────────────── */

.fz-tabla-caja { overflow-x: auto; border-radius: var(--r-tarjeta); background: var(--sup); box-shadow: var(--sombra1); }
:root[data-tema="noche"] .fz-tabla-caja { border: 1px solid var(--linea); box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="dia"]) .fz-tabla-caja { border: 1px solid var(--linea); box-shadow: none; }
}

table.fz-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
.fz-tabla th {
  text-align: left; font-size: var(--t-xs); font-weight: 620; letter-spacing: .045em;
  text-transform: uppercase; color: var(--tinta3);
  padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linea);
  white-space: nowrap; position: sticky; top: 0; background: var(--sup); z-index: 1;
}
.fz-tabla th.orden { cursor: pointer; user-select: none; }
.fz-tabla th.orden:hover { color: var(--tinta); }
.fz-tabla th .fz-ic { display: inline-block; vertical-align: -3px; }
.fz-tabla td { padding: 10px var(--e4); border-bottom: 1px solid var(--linea); vertical-align: middle; }
.fz-tabla tbody tr:last-child td { border-bottom: 0; }
.fz-tabla tbody tr { transition: background var(--rapido) var(--curva); }
.fz-tabla tbody tr:hover { background: var(--lavado); }
.fz-tabla tbody tr.sel { background: var(--lavado2); }
.fz-num { text-align: right; font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-sm); letter-spacing: -.03em; }
.fz-tabla .fz-principal { font-weight: 550; }
.fz-tabla .fz-secundario { color: var(--tinta3); font-size: var(--t-sm); }
.fz-tabla tfoot td { font-weight: 650; border-top: 1px solid var(--linea2); background: var(--sup2); }

/* ── Etiqueta de categoría: color + forma, nunca color solo ──────────── */

.fz-etiq {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-sm); font-weight: 520; color: var(--tinta2);
  white-space: nowrap;
}
.fz-punto { width: 9px; height: 9px; border-radius: 3px; flex: none; background: var(--s-neutro); }
.fz-etiq.sin-clasificar { color: var(--tinta3); font-style: italic; }

.fz-marca-origen {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 5px; border-radius: 4px; background: var(--sup2); color: var(--tinta3);
  border: 1px solid var(--linea);
}
.fz-marca-origen.ia { color: var(--s7); border-color: color-mix(in srgb, var(--s7) 35%, transparent); }
.fz-marca-origen.manual { color: var(--tinta2); }

/* ── Avisos ──────────────────────────────────────────────────────────── */

.fz-aviso {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e3) var(--e4); border-radius: var(--r-medio);
  background: var(--sup2); border: 1px solid var(--linea);
  font-size: var(--t-md); color: var(--tinta2); margin-bottom: var(--e4);
}
.fz-aviso .fz-ic { flex: none; margin-top: 1px; }
.fz-aviso strong { color: var(--tinta); font-weight: 600; }
.fz-aviso.atencion { border-color: color-mix(in srgb, var(--aviso) 45%, var(--linea)); }
.fz-aviso.atencion .fz-ic { color: var(--aviso); }
.fz-aviso.critico { border-color: color-mix(in srgb, var(--critico) 45%, var(--linea)); }
.fz-aviso.critico .fz-ic { color: var(--critico); }
.fz-aviso.bueno .fz-ic { color: var(--ok); }
.fz-aviso-acc { margin-left: auto; flex: none; }

/* ── Estado vacío que enseña ─────────────────────────────────────────── */

.fz-vacio {
  text-align: center; padding: var(--e9) var(--e5);
  background: var(--sup); border-radius: var(--r-tarjeta);
  border: 1px dashed var(--linea2);
}
.fz-vacio-ic { width: 34px; height: 34px; margin: 0 auto var(--e4); color: var(--tinta3);
  stroke: currentColor; fill: none; stroke-width: 1.4; }
.fz-vacio h3 { font-size: var(--t-lg); margin-bottom: 6px; }
.fz-vacio p { color: var(--tinta2); max-width: 46ch; margin: 0 auto var(--e5); font-size: var(--t-md); }

/* ── Cargando: esqueleto, no ruedita al centro ───────────────────────── */

.fz-esq {
  background: linear-gradient(90deg, var(--sup2) 25%, var(--sup3) 50%, var(--sup2) 75%);
  background-size: 200% 100%; animation: fz-brillo 1.4s ease-in-out infinite;
  border-radius: var(--r-chico); height: 1em;
}
@keyframes fz-brillo { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.fz-esq-linea { height: 14px; margin-bottom: 8px; }
.fz-esq-bloque { height: 220px; border-radius: var(--r-tarjeta); }

/* ── Diálogos ────────────────────────────────────────────────────────── */

.fz-dialogo { border: 0; padding: 0; background: none; max-width: min(560px, 94vw); width: 100%; }
.fz-dialogo::backdrop { background: rgba(11,11,11,.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.fz-dialogo[open] { animation: fz-materializar var(--medio) var(--resorte); }
@keyframes fz-materializar {
  from { opacity: 0; transform: translateY(10px) scale(.985); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.fz-dlg-caja {
  background: var(--sup); border-radius: 18px; box-shadow: var(--sombra3);
  display: flex; flex-direction: column; max-height: 86dvh;
  border: 1px solid var(--linea);
}
.fz-dlg-cab { display: flex; align-items: center; padding: var(--e5) var(--e5) var(--e3); }
.fz-dlg-cab h2 { font-size: var(--t-lg); }
.fz-dlg-x { margin-left: auto; border: 0; background: none; cursor: pointer;
  color: var(--tinta3); padding: var(--e1); border-radius: var(--r-chico); }
.fz-dlg-x:hover { background: var(--lavado); color: var(--tinta); }
.fz-dlg-cuerpo { padding: 0 var(--e5); overflow-y: auto; flex: 1; }
.fz-dlg-pie { display: flex; gap: var(--e2); justify-content: flex-end;
  padding: var(--e4) var(--e5) var(--e5); border-top: 1px solid var(--linea); margin-top: var(--e4); }
.fz-dialogo.ancho { max-width: min(880px, 96vw); }

/* ── Toast ───────────────────────────────────────────────────────────── */

#fz-toast {
  position: fixed; left: 50%; bottom: var(--e6); z-index: 90;
  transform: translate(-50%, 120%); opacity: 0; pointer-events: none;
  background: var(--accion); color: var(--tinta-inv);
  padding: 10px var(--e5); border-radius: var(--r-pastilla);
  font-size: var(--t-md); font-weight: 520; box-shadow: var(--sombra3);
  max-width: 92vw; text-align: center;
  transition: transform var(--medio) var(--resorte), opacity var(--rapido) var(--curva);
}
#fz-toast.ver { transform: translate(-50%, 0); opacity: 1; }
#fz-toast.malo { background: var(--critico); color: #fff; }

/* ══ Visualización ════════════════════════════════════════════════════ */

.fz-viz { width: 100%; }
.fz-viz text { font-family: 'Figtree', system-ui, sans-serif; }
.fz-viz .eje { stroke: var(--linea2); stroke-width: 1; }
.fz-viz .rejilla { stroke: var(--linea); stroke-width: 1; }
.fz-viz .rot { fill: var(--tinta3); font-size: 11px; }
.fz-viz .rot-num { fill: var(--tinta3); font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; }
.fz-viz .val { fill: var(--tinta); font-size: 12px; font-weight: 600; }
.fz-viz .val-inv { fill: var(--tinta-inv); font-size: 12px; font-weight: 600; }

/* Leyenda: siempre presente con 2 o más series */
.fz-leyenda { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); margin-top: var(--e4); }
.fz-leyenda-it { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-sm); color: var(--tinta2); }
.fz-leyenda-it .fz-punto { width: 10px; height: 10px; }
.fz-leyenda-it button { border: 0; background: none; cursor: pointer; font: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: 7px; padding: 2px 4px; border-radius: var(--r-chico); }
.fz-leyenda-it button:hover { background: var(--lavado); }
.fz-leyenda-it.apagada { opacity: .38; }

/* Tooltip de gráfico */
.fz-tip {
  position: fixed; z-index: 80; pointer-events: none; opacity: 0;
  background: var(--accion); color: var(--tinta-inv);
  padding: 8px 11px; border-radius: var(--r-chico); font-size: var(--t-sm);
  box-shadow: var(--sombra3); max-width: 280px; line-height: 1.45;
  transition: opacity var(--rapido) var(--curva);
}
.fz-tip.ver { opacity: 1; }
.fz-tip b { font-weight: 650; }
.fz-tip .fz-tip-val { font-variant-numeric: tabular-nums; font-weight: 650; }
.fz-tip .fz-tip-sub { opacity: .75; font-size: var(--t-xs); }

/* ── El mapa del dinero ──────────────────────────────────────────────── */

.fz-mapa-caja {
  background: var(--sup); border-radius: var(--r-tarjeta); padding: var(--e5);
  box-shadow: var(--sombra1); overflow-x: auto;
}
:root[data-tema="noche"] .fz-mapa-caja { border: 1px solid var(--linea); box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="dia"]) .fz-mapa-caja { border: 1px solid var(--linea); box-shadow: none; }
}
.fz-mapa-cab { display: flex; align-items: center; gap: var(--e4); margin-bottom: var(--e5); flex-wrap: wrap; }
.fz-mapa-cab .fz-segmentos { margin-left: auto; }

.fz-sankey .enlace { fill-opacity: .34; transition: fill-opacity var(--rapido) var(--curva); }
.fz-sankey .enlace:hover { fill-opacity: .62; }
.fz-sankey .enlace.interno { fill: var(--s-neutro); fill-opacity: .18; }
.fz-sankey .enlace.interno:hover { fill-opacity: .38; }
.fz-sankey .enlace.tenue { fill-opacity: .07; }
.fz-sankey .nodo { fill: var(--tinta2); }
.fz-sankey .nodo-cap { }
.fz-sankey .nodo-rot { fill: var(--tinta); font-size: 12px; font-weight: 570; }
.fz-sankey .nodo-val { fill: var(--tinta3); font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; }
.fz-sankey .col-rot { fill: var(--tinta3); font-size: 10px; font-weight: 620;
  letter-spacing: .08em; text-transform: uppercase; }
.fz-sankey g.grupo { cursor: pointer; }

/* ── Barras y otras formas ───────────────────────────────────────────── */

.fz-barra-fila { display: grid; grid-template-columns: 1fr auto; gap: var(--e3) var(--e4);
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.fz-barra-fila:last-child { border-bottom: 0; }
/* El relleno se anima con transform, no con width: animar width obliga al
   navegador a recalcular el layout en cada cuadro. La pista recorta la forma
   —tiene overflow oculto y el radio—, así que el relleno puede ser un
   rectángulo plano y escalarlo no le deforma las puntas. */
.fz-barra-pista { grid-column: 1 / -1; height: 8px; background: var(--sup2); border-radius: 999px; overflow: hidden; }
.fz-barra-relleno { height: 100%; width: 100%; background: var(--s-neutro);
  transform-origin: left center; transform: scaleX(0);
  transition: transform var(--medio) var(--curva); }

/* Medidor de presupuesto: la pista es un paso claro de la misma rampa */
.fz-medidor { height: 9px; border-radius: 999px; background: var(--sup3); overflow: hidden; }
.fz-medidor-relleno { height: 100%; width: 100%; background: var(--ok);
  transform-origin: left center; transform: scaleX(0);
  transition: transform var(--medio) var(--curva); }
.fz-medidor.riesgo .fz-medidor-relleno { background: var(--aviso); }
.fz-medidor.excedido .fz-medidor-relleno { background: var(--critico); }
.fz-medidor-marca { width: 2px; background: var(--tinta3); flex: none; }

/* ── Portada de acceso ───────────────────────────────────────────────── */

.fz-portada {
  min-height: 100dvh; display: grid; place-items: center; padding: var(--e6);
  background:
    radial-gradient(120% 80% at 12% 0%, color-mix(in srgb, var(--s1) 7%, transparent), transparent 62%),
    radial-gradient(90% 70% at 92% 100%, color-mix(in srgb, var(--s3) 6%, transparent), transparent 58%),
    var(--plano);
}
.fz-portada-caja { width: 100%; max-width: 400px; }
.fz-portada-marca { display: flex; align-items: center; gap: var(--e3); justify-content: center;
  margin-bottom: var(--e7); }
.fz-portada-marca .fz-ic { width: 28px; height: 28px; stroke-width: 1.9; }
.fz-portada-marca span { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.035em; }
.fz-portada h1 { font-size: var(--t-2xl); text-align: center; margin-bottom: 6px; }
.fz-portada .fz-lede { text-align: center; color: var(--tinta2); margin-bottom: var(--e7);
  font-size: var(--t-md); }
.fz-portada-pie { text-align: center; margin-top: var(--e5); font-size: var(--t-sm); color: var(--tinta3); }
.fz-portada-pie a { color: var(--tinta2); }
.fz-tabs-acceso { display: flex; gap: 2px; background: var(--sup2); border: 1px solid var(--linea);
  border-radius: var(--r-medio); padding: 3px; margin-bottom: var(--e6); }
.fz-tabs-acceso button { flex: 1; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: var(--t-md); font-weight: 550; color: var(--tinta2); padding: 7px; border-radius: 8px;
  min-height: 34px; }
.fz-tabs-acceso button[aria-selected="true"] { background: var(--sup); color: var(--tinta);
  font-weight: 620; box-shadow: var(--sombra1); }

.fz-fuerza { display: flex; gap: 3px; margin-top: 6px; }
.fz-fuerza i { height: 3px; flex: 1; background: var(--sup3); border-radius: 999px;
  transition: background var(--rapido) var(--curva); }
.fz-fuerza.n1 i:nth-child(1) { background: var(--critico); }
.fz-fuerza.n2 i:nth-child(-n+2) { background: var(--aviso); }
.fz-fuerza.n3 i:nth-child(-n+3) { background: var(--s3); }
.fz-fuerza.n4 i { background: var(--ok); }

/* ── Utilidades ──────────────────────────────────────────────────────── */

.fz-flex { display: flex; align-items: center; gap: var(--e3); }
.fz-flex-fin { margin-left: auto; }
.fz-rejilla-2 { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.fz-rejilla-3 { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fz-oculto { display: none !important; }
.fz-solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.fz-tenue { color: var(--tinta3); }
.fz-suave { color: var(--tinta2); }
.fz-mini { font-size: var(--t-sm); }
.fz-micro { font-size: var(--t-xs); }
.fz-neg { font-weight: 650; }
.fz-der { text-align: right; }
.fz-nowrap { white-space: nowrap; }

/* ══ Responsive: la estructura cambia, la tipografía no ═══════════════ */

@media (max-width: 1100px) {
  .fz-main, .fz-superior, .fz-filtros { padding-left: var(--e5); padding-right: var(--e5); }
}

@media (max-width: 860px) {
  /* En móvil el texto base sube a 16px: es la lectura mínima cómoda en un
     teléfono, y de paso evita que iOS haga zoom al enfocar un campo. */
  :root { --t-base: 1rem; --t-md: .9375rem; --t-sm: .875rem; }

  .fz-lateral {
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--medio) var(--resorte);
    box-shadow: var(--sombra3);
  }
  .fz-menu-check:checked ~ .fz-lateral { transform: none; }
  .fz-menu-check:checked ~ .fz-velo {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(11,11,11,.4); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .fz-menu-abrir, .fz-menu-cerrar { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
  .fz-superior { padding: var(--e4) var(--e4) var(--e3); gap: var(--e3); }
  .fz-titulo { font-size: var(--t-lg); }
  .fz-filtros { top: 58px; padding: var(--e2) var(--e4) var(--e3); gap: var(--e3); }
  .fz-filtros-acciones { width: 100%; margin-left: 0; }
  .fz-buscar { flex: 1; }
  .fz-buscar input { width: 100%; }
  .fz-main { padding: var(--e5) var(--e4) var(--e9); }
  .fz-cifras { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  /* La cifra que encabeza la pantalla ocupa el ancho completo: partida en dos
     líneas ("$" arriba, el número abajo) deja de leerse como una cifra. */
  .fz-ficha.destacada { grid-column: 1 / -1; }
  .fz-ficha-val { font-size: var(--t-xl); }
  .fz-ficha-val.hero { font-size: var(--t-2xl); white-space: nowrap; }
  .fz-tabla th, .fz-tabla td { padding: 9px var(--e3); }
  /* Objetivos táctiles: 44px de verdad, no 42. La regla de accesibilidad no
     admite "casi", y en un dedo esos 2px son la diferencia entre acertar y
     tener que reintentar. */
  .fz-btn { min-height: 44px; padding: 11px var(--e4); }
  .fz-btn-chico { min-height: 44px; padding: 9px var(--e3); }
  .fz-btn-icono { min-height: 44px; width: 44px; }
  .fz-nav-item, .fz-tema { min-height: 44px; }
  .fz-p-nav { width: 44px; height: 44px; }
  .fz-p-actual { min-height: 44px; }
  .fz-segmentos button { min-height: 40px; }
  .fz-segmentos { padding: 2px; }
  /* Los íconos de ayuda son chicos por diseño; el área que se toca, no. */
  .fz-ayuda, .fz-chip button, .fz-salir { padding: 14px; margin: -14px; }
  .fz-dlg-x { padding: 10px; margin: -10px; }
}

@media print {
  .fz-lateral, .fz-superior, .fz-filtros, #fz-toast, .fz-btn { display: none !important; }
  body { background: #fff; }
  .fz-tarjeta, .fz-ficha, .fz-tabla-caja { box-shadow: none; border: 1px solid #ddd; }
}

/* ══ Movimiento reducido: se cruza a opacidad, no se apaga el feedback ══ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .fz-dialogo[open] { animation: none; }
  .fz-btn:active { transform: none; }
  #fz-toast { transition: opacity .15s linear; transform: translate(-50%, 0); }
}

@media (prefers-contrast: more) {
  :root { --linea: var(--tinta3); --linea2: var(--tinta2); --material: var(--sup); }
  .fz-tarjeta, .fz-ficha, .fz-tabla-caja { border: 1px solid var(--linea2); }
}

/* ── Documentos legales y de referencia ──────────────────────────────── */

.fz-portada.doc { display: block; padding: 0; background: var(--plano); }
.fz-doc-caja { max-width: 74ch; margin: 0 auto; padding: var(--e8) var(--e5) var(--e9); }
.fz-doc-caja h1 { font-size: var(--t-2xl); margin-bottom: var(--e2); }
.fz-doc-caja h2 { font-size: var(--t-lg); margin: var(--e8) 0 var(--e3); }
.fz-doc-caja h3 { font-size: var(--t-base); margin: var(--e5) 0 var(--e2); }
.fz-doc-caja p, .fz-doc-caja li { color: var(--tinta2); margin-bottom: var(--e3); line-height: 1.62; }
.fz-doc-caja ul, .fz-doc-caja ol { padding-left: var(--e5); margin-bottom: var(--e4); }
.fz-doc-caja li { margin-bottom: var(--e2); }
.fz-doc-caja strong { color: var(--tinta); font-weight: 620; }
.fz-doc-fecha { color: var(--tinta3); font-size: var(--t-sm); margin-bottom: var(--e7); }
.fz-doc-volver { display: inline-flex; align-items: center; gap: 5px; margin-bottom: var(--e5);
  color: var(--tinta2); text-decoration: none; font-size: var(--t-md); }
.fz-doc-volver:hover { color: var(--tinta); }
.fz-doc-caja table { width: 100%; border-collapse: collapse; margin-bottom: var(--e5);
  font-size: var(--t-md); }
.fz-doc-caja th { text-align: left; font-size: var(--t-xs); font-weight: 620; letter-spacing: .045em;
  text-transform: uppercase; color: var(--tinta3); padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--linea); }
.fz-doc-caja td { padding: var(--e2) var(--e3); border-bottom: 1px solid var(--linea);
  color: var(--tinta2); vertical-align: top; }

/* Botón que ocupa el ancho del formulario: en una portada, el único paso
   siguiente no se busca, se encuentra. */
.fz-btn-ancho { width: 100%; margin-top: var(--e2); }

/* Las tarjetas de las portadas respiran más que las del tablero. */
.fz-portada .fz-tarjeta { padding: var(--e6); }
.fz-portada .fz-tarjeta .fz-campo:last-of-type { margin-bottom: var(--e3); }