/* ================================================================================================
   FINANZAS V3 — FINANCIAL COMMAND CENTER
   Sobrio, ejecutivo, legible. Tokens del ERP (--accent, --ink, --muted, --line, --surface,
   --amber, --red); color con propósito: verde = correcto/marca, ámbar = atención, rojo = vencido,
   gris = secundario. Nunca el color como única codificación (siempre hay texto o icono).
   Móvil primero: una columna, tarjetas, objetivos táctiles >= 44px, sin scroll horizontal.
   ================================================================================================ */
#finance {
  --fv3-ink: var(--ink, #14201c);
  --fv3-muted: var(--muted, #64736d);
  --fv3-line: var(--line, #e3ebe7);
  --fv3-surface: var(--surface, #ffffff);
  --fv3-soft: var(--surface-subtle, #eef5f1);
  --fv3-accent: var(--accent, #126b5f);
  --fv3-accent-dark: var(--accent-dark, #0c5148);
  --fv3-accent-soft: var(--accent-soft, #e5f4f0);
  --fv3-amber: var(--amber, #946815);
  --fv3-amber-soft: var(--amber-soft, #fbf2de);
  --fv3-amber-line: var(--amber-line, #ead39a);
  --fv3-red: var(--red, #a13242);
  --fv3-red-soft: #fbeaed;
  --fv3-radius: 14px;
  --fv3-shadow: var(--shadow-card, 0 1px 2px rgba(20, 32, 28, .04), 0 14px 34px rgba(20, 32, 28, .06));
}

/* ---- Raíces --------------------------------------------------------------------------------- */
#financeV3CommandCenter { display: grid; gap: 16px; border: 0; padding: 0; background: transparent; box-shadow: none; }
#financeReceivablesV3Root, #financePayablesV3Root, #financeMovementsV3Root, #financeExpensesV3Root, #financeAccountsV3Root { display: grid; gap: 14px; min-width: 0; }

.fv3-num { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fv3-num--hero { font-size: clamp(2rem, 6vw, 3.1rem); line-height: 1; letter-spacing: -.04em; }
.fv3-eyebrow { display: block; margin-bottom: 4px; font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--fv3-accent); }
.fv3-muted { color: var(--fv3-muted); font-size: .9rem; }
.fv3-danger { color: var(--fv3-red) !important; }
.fv3-in { color: var(--fv3-accent-dark); }
.fv3-out { color: var(--fv3-ink); }

/* ---- Botones y enlaces (>= 44px) ------------------------------------------------------------ */
.fv3-btn, .fv3-link, .fv3-pill, .fv3-rank, .fv3-customer > summary { -webkit-tap-highlight-color: transparent; }
.fv3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--fv3-accent); border-radius: 10px; background: var(--fv3-accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.fv3-btn--ghost { background: var(--fv3-surface); color: var(--fv3-accent-dark); border-color: var(--fv3-line); }
.fv3-btn--light { background: #fff; color: var(--fv3-accent-dark); border-color: #fff; }
.fv3-btn--ghost-light { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .35); }
.fv3-btn:hover { filter: brightness(.97); }
.fv3-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--fv3-accent-dark); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.fv3-link:hover { text-decoration-color: currentColor; }
.fv3-btn:focus-visible, .fv3-link:focus-visible, .fv3-pill:focus-visible, .fv3-rank:focus-visible, .fv3-customer > summary:focus-visible, .fv3-search input:focus-visible, .fv3-select select:focus-visible, .fv3-stat[data-fv3-ir]:focus-visible { outline: 3px solid var(--fv3-accent); outline-offset: 2px; }

/* ---- Hero del resumen ----------------------------------------------------------------------- */
.fv3-hero { display: grid; gap: 14px; }
.fv3-hero-primary { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 22px 20px; border-radius: 18px; background: linear-gradient(160deg, var(--fv3-accent-dark) 0%, var(--fv3-accent) 100%); color: #fff; box-shadow: var(--fv3-shadow); }
.fv3-hero-primary .fv3-eyebrow { color: rgba(255, 255, 255, .8); }
.fv3-hero-primary > strong { color: #fff; }
.fv3-hero-primary > small { font-size: .92rem; opacity: .85; }
.fv3-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fv3-hero-side { min-width: 0; }
.fv3-top { height: 100%; padding: 16px 16px 8px; border: 1px solid var(--fv3-line); border-radius: 18px; background: var(--fv3-surface); box-shadow: var(--fv3-shadow); }
.fv3-top-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fv3-top-head small { color: var(--fv3-muted); }
.fv3-rank { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 56px; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--fv3-line); background: transparent; text-align: left; color: inherit; font: inherit; cursor: pointer; border-radius: 8px; }
.fv3-rank:last-child { border-bottom: 0; }
.fv3-rank:hover { background: var(--fv3-soft); }
.fv3-rank-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fv3-accent-soft); color: var(--fv3-accent-dark); font-weight: 800; font-size: .78rem; }
.fv3-rank-name { min-width: 0; }
.fv3-rank-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv3-rank-name small { display: block; color: var(--fv3-muted); margin-top: 2px; }
.fv3-rank > strong { color: var(--fv3-ink); white-space: nowrap; }

/* ---- Indicadores ---------------------------------------------------------------------------- */
.fv3-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fv3-stat { min-width: 0; padding: 14px 14px 12px; border: 1px solid var(--fv3-line); border-left-width: 4px; border-radius: 12px; background: var(--fv3-surface); }
button.fv3-stat { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; min-height: 44px; -webkit-appearance: none; appearance: none; }
button.fv3-stat:hover { border-color: var(--fv3-accent); }
.fv3-stat-label { display: block; font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--fv3-muted); }
.fv3-stat strong { display: block; margin-top: 6px; font-size: 1.25rem; color: var(--fv3-ink); overflow-wrap: anywhere; }
.fv3-stat small { display: block; margin-top: 4px; color: var(--fv3-muted); }
.fv3-stat--ok { border-left-color: var(--fv3-accent); }
.fv3-stat--partial { border-left-color: var(--fv3-amber); }
.fv3-stat--danger { border-left-color: var(--fv3-red); }
.fv3-stat--danger strong { color: var(--fv3-red); }
.fv3-stat--unavailable, .fv3-stat--restricted, .fv3-stat--loading { border-left-color: var(--fv3-line); }
.fv3-stat--unavailable strong, .fv3-stat--restricted strong, .fv3-stat--loading strong { color: var(--fv3-muted); font-size: 1.05rem; }
.fv3-periodo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: var(--fv3-muted); font-size: .9rem; }

/* ---- Tarjetas, listas de atención, completar ----------------------------------------------- */
.fv3-split { display: grid; gap: 12px; }
.fv3-card { padding: 16px; border: 1px solid var(--fv3-line); border-radius: var(--fv3-radius); background: var(--fv3-surface); min-width: 0; }
.fv3-card--soft { background: var(--fv3-soft); }
.fv3-card-head { display: grid; gap: 2px; margin-bottom: 10px; }
.fv3-card-head h4 { margin: 0; font-size: 1rem; }
.fv3-card-head small { color: var(--fv3-muted); }
.fv3-att-list, .fv3-completar, .fv3-manual-list, .fv3-cats, .fv3-kv { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fv3-att { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--fv3-line); border-left-width: 4px; border-radius: 10px; background: var(--fv3-surface); }
.fv3-att--vencido { border-left-color: var(--fv3-red); background: var(--fv3-red-soft); }
.fv3-att--autoridad { border-left-color: var(--fv3-amber); background: var(--fv3-amber-soft); }
.fv3-att--cobertura { border-left-color: var(--fv3-amber); }
.fv3-att--fechas { border-left-color: var(--fv3-line); }
.fv3-att--info { border-left-color: var(--fv3-accent); }
.fv3-att--ok { border-left-color: var(--fv3-accent); color: var(--fv3-accent-dark); }
.fv3-att--loading { color: var(--fv3-muted); }
.fv3-att > span { min-width: 0; overflow-wrap: anywhere; }
.fv3-completar li { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--fv3-surface); border: 1px solid var(--fv3-line); }
.fv3-completar li span { overflow-wrap: anywhere; }
.fv3-completar li .fv3-btn { justify-self: start; }
.fv3-banner { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--fv3-line); border-left-width: 4px; border-radius: 12px; background: var(--fv3-surface); }
.fv3-banner strong { color: var(--fv3-ink); }
.fv3-banner span { color: var(--fv3-muted); overflow-wrap: anywhere; }
.fv3-banner--warn { border-left-color: var(--fv3-amber); background: var(--fv3-amber-soft); }
.fv3-banner--soft { border-left-color: var(--fv3-accent); background: var(--fv3-accent-soft); }
.fv3-banner .fv3-link, .fv3-banner .fv3-btn { justify-self: start; }

/* ---- Estados -------------------------------------------------------------------------------- */
.fv3-state, .fv3-empty { display: grid; gap: 6px; padding: 18px 16px; border: 1px dashed var(--fv3-line); border-radius: var(--fv3-radius); background: var(--fv3-surface); color: var(--fv3-muted); }
.fv3-state strong, .fv3-empty strong { color: var(--fv3-ink); }
.fv3-state--restricted { border-style: solid; border-left: 4px solid var(--fv3-amber); background: var(--fv3-amber-soft); }
.fv3-state--error { border-style: solid; border-left: 4px solid var(--fv3-red); }
.fv3-state .fv3-btn { justify-self: start; }

/* ---- Cabecera de CxC / CxP / Gastos --------------------------------------------------------- */
.fv3-cxc-hero { display: grid; gap: 14px; padding: 20px; border-radius: 18px; background: var(--fv3-accent-dark); color: #fff; box-shadow: var(--fv3-shadow); }
.fv3-cxc-hero .fv3-eyebrow { color: rgba(255, 255, 255, .8); }
.fv3-cxc-hero--expense { background: var(--fv3-ink); }
.fv3-cxc-total strong { display: block; color: #fff; }
.fv3-cxc-total small { display: block; margin-top: 6px; opacity: .85; }
.fv3-cxc-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* Las tres cifras laterales son composición de la cartera visible (hechos servidos agrupados), no el total directivo. */
.fv3-cxc-side-cap { grid-column: 1 / -1; margin: 0; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.fv3-cxc-side > div { min-width: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .1); }
.fv3-cxc-side span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.fv3-cxc-side strong { display: block; margin-top: 4px; font-size: 1.05rem; color: #fff; overflow-wrap: anywhere; }
.fv3-cxc-side strong.fv3-danger { color: #ffd6dc !important; }
.fv3-cxc-side small { display: block; margin-top: 2px; font-size: .78rem; opacity: .8; }
.fv3-cxc-hero--expense .fv3-cxc-side { grid-template-columns: 1fr; align-content: end; }

/* ---- Barra de herramientas ----------------------------------------------------------------- */
.fv3-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fv3-search { flex: 1 1 240px; display: block; }
.fv3-search input, .fv3-select select { width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--fv3-line); border-radius: 11px; background: var(--fv3-surface); color: inherit; font: inherit; font-size: 16px; }
.fv3-select { display: grid; gap: 4px; flex: 1 1 200px; }
.fv3-select span { font-size: .78rem; color: var(--fv3-muted); }
.fv3-filters { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.fv3-filters::-webkit-scrollbar { display: none; }
.fv3-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--fv3-line); border-radius: 999px; background: var(--fv3-surface); color: inherit; font: inherit; white-space: nowrap; cursor: pointer; }
.fv3-pill em { font-style: normal; font-size: .78rem; padding: 1px 7px; border-radius: 999px; background: var(--fv3-soft); color: var(--fv3-muted); }
.fv3-pill[aria-pressed="true"] { background: var(--fv3-accent); border-color: var(--fv3-accent); color: #fff; font-weight: 750; }
.fv3-pill[aria-pressed="true"] em { background: rgba(255, 255, 255, .2); color: #fff; }

/* ---- Cliente / proveedor (tarjeta expandible) ----------------------------------------------- */
.fv3-customer-list { display: grid; gap: 10px; }
.fv3-customer { border: 1px solid var(--fv3-line); border-radius: var(--fv3-radius); background: var(--fv3-surface); overflow: hidden; }
.fv3-customer--overdue { border-left: 4px solid var(--fv3-red); }
/* Las tarjetas viven DENTRO de un .finance-section-panel, cuyo estilo de <summary> (flex, marcador «+»,
   barra de acento, span 900) no debe heredarse: se neutraliza con mayor especificidad. */
.fv3-customer > summary, .finance-section-panel .fv3-customer > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; justify-content: normal; min-height: 72px; padding: 12px 14px; cursor: pointer; background: transparent; }
.fv3-customer > summary::-webkit-details-marker { display: none; }
.finance-section-panel .fv3-customer > summary::before, .finance-section-panel .fv3-customer > summary::after { content: none; display: none; }
.finance-section-panel .fv3-customer > summary > span { color: inherit; font-size: inherit; font-weight: 400; }
.finance-section-panel .fv3-customer > summary small { max-width: none; font-size: .82rem; line-height: 1.35; }
.fv3-customer[open] > summary { background: var(--fv3-soft); border-bottom: 1px solid var(--fv3-line); }
.fv3-customer-main { min-width: 0; }
.fv3-customer-main strong { display: block; font-size: 1rem; color: var(--fv3-ink); overflow-wrap: anywhere; }
.fv3-customer-main small, .fv3-customer-money small { display: block; margin-top: 3px; color: var(--fv3-muted); }
.fv3-customer-money { text-align: right; }
.fv3-customer-money strong { display: block; font-size: 1.2rem; color: var(--fv3-ink); white-space: nowrap; }
.fv3-chevron { width: 10px; height: 10px; border-right: 2px solid var(--fv3-muted); border-bottom: 2px solid var(--fv3-muted); transform: rotate(45deg); transition: transform .15s ease; margin: 0 4px 4px 0; }
.fv3-customer[open] .fv3-chevron { transform: rotate(-135deg); margin: 4px 4px 0 0; }
.fv3-docs { display: grid; }
.fv3-doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--fv3-line); }
.fv3-doc:last-of-type { border-bottom: 0; }
.fv3-doc-id { min-width: 0; }
.fv3-doc-id strong, .fv3-doc-id small { display: block; }
.fv3-doc-id small, .fv3-doc-nums small { color: var(--fv3-muted); font-size: .8rem; }
.fv3-doc-nums { text-align: right; white-space: nowrap; }
.fv3-doc-nums strong { display: block; color: var(--fv3-ink); }
.fv3-doc-state { display: flex; gap: 6px; flex-wrap: wrap; grid-column: 1 / -1; }
.fv3-doc-action { grid-column: 1 / -1; justify-self: start; }
.fv3-docs-actions { padding: 10px 14px 14px; border-top: 1px solid var(--fv3-line); }
.fv3-status { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: .72rem; font-weight: 750; background: var(--fv3-soft); color: var(--fv3-muted); }
.fv3-status--vencida { background: var(--fv3-red-soft); color: var(--fv3-red); }
.fv3-status--hoy { background: var(--fv3-amber-soft); color: var(--fv3-amber); }
.fv3-status--ok { background: var(--fv3-accent-soft); color: var(--fv3-accent-dark); }
.fv3-status--cfdi { background: var(--fv3-surface); border: 1px solid var(--fv3-line); }
.fv3-status--previo { background: var(--fv3-surface); border: 1px dashed var(--fv3-line); color: var(--fv3-muted); }
.fv3-manual-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--fv3-surface); border: 1px solid var(--fv3-line); }
.fv3-manual-list li span strong, .fv3-manual-list li span small { display: block; }
.fv3-manual-list small { color: var(--fv3-muted); }

/* ---- Movimientos y gastos ------------------------------------------------------------------- */
.fv3-mov-list { display: grid; gap: 8px; }
.fv3-mov { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--fv3-line); border-radius: 12px; background: var(--fv3-surface); }
.fv3-mov--reversed { opacity: .65; }
.fv3-mov-main { min-width: 0; }
.fv3-mov-main strong { display: block; overflow-wrap: anywhere; }
.fv3-mov-main small { display: block; margin-top: 2px; color: var(--fv3-muted); font-size: .8rem; }
.fv3-mov > strong { white-space: nowrap; font-size: 1.02rem; }
.fv3-more { display: flex; justify-content: center; }
.fv3-cats li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.fv3-cats li i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 999px; background: var(--fv3-accent-soft); position: relative; }
.fv3-cats li i::before { content: ""; position: absolute; inset: 0; width: var(--w, 0%); border-radius: inherit; background: var(--fv3-accent); }

/* ---- Cuentas y deuda ------------------------------------------------------------------------ */
.fv3-groups { display: grid; gap: 12px; }
.fv3-acc-list { display: grid; gap: 8px; }
.fv3-acc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--fv3-line); border-radius: 12px; background: var(--fv3-surface); }
.fv3-acc--pending { border-left: 4px solid var(--fv3-amber); }
.fv3-acc-main strong { display: block; overflow-wrap: anywhere; }
.fv3-acc-main small, .fv3-acc-nums small { display: block; color: var(--fv3-muted); font-size: .8rem; }
.fv3-acc-nums { text-align: right; white-space: nowrap; }
.fv3-acc-nums strong { display: block; }
.fv3-acc-state { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fv3-kv li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--fv3-line); }
.fv3-kv li:last-child { border-bottom: 0; }
.fv3-kv--links li { grid-template-columns: 1fr; }
.fv3-kv strong { color: var(--fv3-ink); }

/* ---- Secciones subordinadas (detalle técnico y formularios) -------------------------------- */
.fv3-group-title { margin: 6px 0 -4px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fv3-muted); }
.finance-section-panel.fv3-subordinada > summary span { color: var(--fv3-muted); }

/* ---- Responsivo ----------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .fv3-doc { grid-template-columns: minmax(0, 1fr) auto auto; }
  .fv3-doc-state { grid-column: auto; }
  .fv3-doc-action { grid-column: 1 / -1; }
  .fv3-acc { grid-template-columns: minmax(0, 1fr) auto auto; }
  .fv3-acc-state { grid-column: auto; }
}
@media (min-width: 900px) {
  .fv3-hero { grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); }
  .fv3-hero-primary { padding: 28px 26px; }
  .fv3-stat-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .fv3-split { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); align-items: start; }
  .fv3-cxc-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .fv3-cxc-side { min-width: 360px; }
  .fv3-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fv3-doc { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .fv3-doc-action { grid-column: auto; }
}
@media (min-width: 1200px) {
  .fv3-stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .fv3-stat strong { font-size: 1.3rem; }
}
@media (max-width: 480px) {
  .fv3-hero-primary { padding: 18px 16px; border-radius: 16px; }
  .fv3-num--hero { font-size: clamp(1.9rem, 10vw, 2.6rem); }
  .fv3-cxc-hero { padding: 16px; }
  .fv3-cxc-side { grid-template-columns: 1fr 1fr; }
  .fv3-cxc-side > div:first-child { grid-column: 1 / -1; }
  .fv3-customer > summary, .finance-section-panel .fv3-customer > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .fv3-chevron { display: none; }
  .fv3-att { grid-template-columns: 1fr; }
  .fv3-att .fv3-link { justify-self: start; padding-left: 0; }
  .fv3-doc { grid-template-columns: 1fr; gap: 6px; }
  .fv3-doc-nums { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; text-align: left; white-space: normal; }
  .fv3-doc-nums strong { font-size: 1.05rem; }
  .fv3-customer-money strong { font-size: 1.08rem; }
  .fv3-stat-grid { grid-template-columns: 1fr 1fr; }
  .fv3-stat strong { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fv3-chevron { transition: none; }
}

/* ==== Tonos de sección anclados por identidad =================================================
   styles.css asigna el color de cada panel heredado por su POSICIÓN entre hermanos. Finanzas V3
   reordena la sección Cuentas y deuda (Recordatorios pasa a Configuración) y añade el panel de
   diagnóstico, así que el color se vuelve a anclar por identidad: ningún panel hereda el tono de
   otro y el resultado es byte a byte el mismo que antes del rediseño. */
#finance > #financeRemindersDetails { --section-tone: var(--finance-neutral); --section-soft: var(--finance-neutral-soft); }
#finance > #financeMovementsPanel { --section-tone: var(--finance-risk); --section-soft: var(--finance-risk-soft); }
#finance > #financeCardsDetails { --section-tone: var(--finance-receivable); --section-soft: var(--finance-receivable-soft); }
#finance > #financeLoansDetails { --section-tone: var(--finance-payable); --section-soft: var(--finance-payable-soft); }
#finance > #financeReceivablesPanel { --section-tone: var(--finance-profit); --section-soft: var(--finance-profit-soft); }
#finance > #financeManualPayablesDetails { --section-tone: var(--finance-expense); --section-soft: var(--finance-expense-soft); }
#finance > #financeExpensesPanel { --section-tone: var(--finance-neutral); --section-soft: var(--finance-neutral-soft); }
#finance > .fv3-diagnostico { display: block; }
#finance > .fv3-diagnostico[hidden] { display: none; }