/* Renovo · Finanzas en vivo — rejilla de cristal de la familia del pin (23/10/2026).
   Solo tokens --f-*; el cristal oscuro es tinta cálida, nunca negro puro. */
.fam.fin { max-width: 1240px; padding: 4px 0 56px; overflow-x: clip; }
.fin .fin-top { display: flex; align-items: center; gap: 14px; margin: 0 4px 14px; }
.fin .fin-top .fam-eyebrow { margin: 0; }
.fin .fin-top .fam-acts { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.fin .fin-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--f-soft); font-variant-numeric: tabular-nums; }
.fin .fin-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--f-good); box-shadow: 0 0 0 0 color-mix(in srgb, var(--f-good) 55%, transparent); animation: finPulse 2.4s var(--f-ease) infinite; }
@keyframes finPulse { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.fin .fin-sheet { position: relative; }
.fin .fin-head { margin: 0 4px 22px; }
.fin .fin-head .fam-h1 { font-size: clamp(36px, 4.6vw, 58px); }
.fin .fin-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; min-height: 34px; align-items: center; }
.fin .fin-chip-hint { font-size: 13px; color: var(--f-soft); }
.fin .fin-chip, .fin .fin-chip-clear { font: inherit; font-size: 13px; border-radius: 999px; padding: 7px 14px; cursor: pointer; border: 1px solid var(--f-edge); background: var(--f-glass-hi); color: var(--f-ink); box-shadow: var(--f-shadow); animation: finIn .35s var(--f-ease) both; }
.fin .fin-chip b { color: var(--f-acc-txt); font-weight: 600; }
.fin .fin-chip-clear { background: transparent; box-shadow: none; color: var(--f-soft); text-decoration: underline; text-underline-offset: 3px; }

/* ── Rejilla ─────────────────────────────────────────────────────────────── */
.fin .fin-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; grid-auto-flow: dense; }
.fin .fin-card { position: relative; grid-column: span 4; min-width: 0; padding: 20px 22px; border-radius: var(--f-r);
  background: var(--f-glass); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid var(--f-edge); box-shadow: var(--f-shadow); animation: finIn .6s var(--f-ease) both; }
.fin .fin-card:nth-child(2) { animation-delay: .04s } .fin .fin-card:nth-child(3) { animation-delay: .08s } .fin .fin-card:nth-child(4) { animation-delay: .12s }
.fin .fin-card:nth-child(5) { animation-delay: .16s } .fin .fin-card:nth-child(6) { animation-delay: .2s } .fin .fin-card:nth-child(n+7) { animation-delay: .24s }
@keyframes finIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.fin.is-swap .fin-card { animation: finSwap .32s var(--f-ease) both; }
@keyframes finSwap { from { opacity: .55; } to { opacity: 1; } }
.fin .fin-card > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 14px; }
.fin .fin-card > header .fin-cap { width: 100%; }
.fin .fin-cap { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--f-soft); }
.fin .fin-h { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.2; color: var(--f-ink); }
.fin .fin-sub { display: block; margin: 4px 0 0; font-size: 12.5px; color: var(--f-soft); }
.fin .fin-r { text-align: right; font-variant-numeric: tabular-nums; }
.fin .fin-dash { color: var(--f-soft); cursor: help; }
.fin .fin-gap { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--f-soft); }
.fin .fin-gap span { color: var(--f-acc-txt); }
.fin button { font: inherit; color: inherit; }
.fin .fin-src { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--f-line); background: transparent; color: var(--f-soft); font-size: 11px; cursor: pointer; opacity: .75; transition: opacity .2s, background .2s; }
.fin .fin-src:hover, .fin .fin-src:focus-visible { opacity: 1; background: var(--f-tint); }
.fin .fin-src-t { display: none; }
.fin .fin-card:hover .fin-src-t, .fin .fin-src:focus-visible .fin-src-t { display: inline; }
.fin td .fin-src, .fin .fin-kpi .fin-src, .fin .fin-hbar .fin-src { position: relative; top: auto; right: auto; padding: 3px 7px; }
.fin td .fin-src-t, .fin .fin-hbar .fin-src-t { display: none !important; }
.fin :focus-visible { outline: 2px solid var(--f-acc-txt); outline-offset: 2px; border-radius: 8px; }

/* ── KPI ─────────────────────────────────────────────────────────────────── */
.fin .fin-kpis { grid-column: span 12; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; }
.fin .fin-kpi { position: relative; padding: 18px 22px 16px; display: flex; flex-direction: column; gap: 6px; }
.fin .fin-kpi + .fin-kpi { border-left: 1px solid var(--f-line); }
.fin .fin-kpi .fin-num { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fin .fin-kpi .fin-src { position: absolute; top: 14px; right: 14px; }

/* ── Núcleo oscuro con el medidor ────────────────────────────────────────── */
.fin .fin-core { grid-column: 5 / span 4; grid-row: span 2; display: flex; flex-direction: column; }
.fin .fin-card.is-dark { --f-ink: #f3ebe1; --f-ink2: #d6ccbf; --f-soft: #c2b6a6; --f-line: rgba(243, 235, 225, .12); --f-acc-txt: #ec8a5f;
  background: radial-gradient(120% 90% at 50% 0%, #3d3128 0%, #2a211b 55%, #221a15 100%); border-color: rgba(255, 236, 214, .1); color: var(--f-ink);
  box-shadow: 0 40px 80px -40px rgba(60, 34, 14, .7), inset 0 1px 0 rgba(255, 236, 214, .08); }
.fin .fin-gauge-wrap { position: relative; width: min(300px, 100%); margin: 6px auto 4px; aspect-ratio: 1; }
.fin .fin-gauge { width: 100%; height: 100%; display: block; }
.fin .fin-ticks line { stroke: rgba(243, 235, 225, .22); stroke-width: 1.2; }
.fin .fin-g-track, .fin .fin-g-track2 { fill: none; stroke: rgba(243, 235, 225, .08); stroke-width: 12; }
.fin .fin-g-track2 { stroke-width: 16; }
.fin .fin-g-cov { fill: none; stroke: #c9a46a; stroke-width: 4; stroke-linecap: round; }
.fin .fin-g-val { fill: none; stroke: #e07a52; stroke-width: 16; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(224, 122, 82, .45)); }
.fin .fin-g-core { fill: rgba(255, 236, 214, .04); stroke: rgba(255, 236, 214, .08); }
.fin .fin-anim-arc { transition: stroke-dashoffset 1.1s var(--f-ease); animation: finArc 1.3s var(--f-ease) both; }
@keyframes finArc { from { stroke-dashoffset: 999; } }
.fin .fin-gauge-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.fin .fin-gauge-c .fin-num { font-family: var(--font-display); font-weight: 400; font-size: 46px; letter-spacing: -.02em; line-height: 1; }
.fin .fin-gauge-c span { margin-top: 6px; max-width: 120px; font-size: 11px; line-height: 1.3; color: var(--f-soft); }
.fin .fin-core-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: auto 0 0; }
.fin .fin-core-dl div { padding: 12px 4px 0; border-top: 1px solid var(--f-line); }
.fin .fin-core-dl dt { font-size: 11px; color: var(--f-soft); }
.fin .fin-core-dl dd { margin: 2px 0 10px; font-size: 18px; font-variant-numeric: tabular-nums; }

/* ── Barras de categoría ─────────────────────────────────────────────────── */
.fin .fin-bars { display: flex; align-items: flex-end; gap: 10px; height: 200px; }
.fin .fin-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; min-width: 0; transition: opacity .25s; }
.fin .fin-bar-v { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--f-ink2); }
.fin .fin-bar-t { flex: 1; width: 100%; max-width: 46px; display: flex; align-items: flex-end; border-radius: 12px; background: var(--f-tint); overflow: hidden; }
.fin .fin-bar-t i { display: block; width: 100%; height: var(--h); border-radius: 12px; background: linear-gradient(180deg, var(--f-acc-txt), color-mix(in srgb, var(--f-acc) 70%, #6b3b22)); transform-origin: bottom; animation: finGrow .9s var(--f-ease) both; animation-delay: calc(var(--i) * 60ms); transition: height .5s var(--f-ease); }
@keyframes finGrow { from { transform: scaleY(0); } }
.fin .fin-bar-l { font-size: 12.5px; color: var(--f-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.fin .fin-bar.is-on .fin-bar-t i { background: linear-gradient(180deg, #e8a073, var(--f-acc)); box-shadow: 0 0 18px -2px color-mix(in srgb, var(--f-acc) 60%, transparent); }
.fin .is-dim { opacity: .3; }

/* ── Donut y leyenda ─────────────────────────────────────────────────────── */
.fin .fin-donut-wrap { position: relative; width: 168px; margin: 0 auto 12px; }
.fin .fin-donut { width: 100%; display: block; }
.fin .fin-r-track { fill: none; stroke: var(--f-tint); stroke-width: 14; }
.fin .fin-d-seg { fill: none; stroke-width: 14; cursor: pointer; transition: opacity .25s, stroke-width .25s; animation: finArcIn 1s var(--f-ease) both; }
.fin .fin-d-seg:hover { stroke-width: 18; }
.fin .fin-d-seg.is-dim { opacity: .25; }
@keyframes finArcIn { from { opacity: 0; } }
.fin .fin-c0 { stroke: #b54b27; background: #b54b27; } .fin .fin-c1 { stroke: #c9a46a; background: #c9a46a; } .fin .fin-c2 { stroke: #47703a; background: #47703a; }
.fin .fin-c3 { stroke: #7a5c45; background: #7a5c45; } .fin .fin-c4 { stroke: #d8b9a0; background: #d8b9a0; }
.fin .fin-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fin .fin-donut-c .fin-num { font-family: var(--font-display); font-weight: 400; font-size: 24px; }
.fin .fin-donut-c span { font-size: 11px; color: var(--f-soft); }
.fin .fin-legend { list-style: none; margin: 0; padding: 0; }
.fin .fin-legend li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-top: 1px solid var(--f-line); font-size: 13px; font-variant-numeric: tabular-nums; }
.fin .fin-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.fin .fin-rowbtn { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 2px 0; border: 0; background: none; text-align: left; cursor: pointer; min-width: 0; }
.fin .fin-legend .fin-rowbtn, .fin .fin-supt .fin-rowbtn { flex-direction: row; align-items: center; }
.fin .fin-rowbtn b { font-weight: 500; font-family: var(--font-display); font-size: 15.5px; }
.fin .fin-rowbtn small { font-size: 11px; color: var(--f-soft); text-transform: none; }
.fin .fin-rowbtn:hover b, .fin .fin-rowbtn:hover { color: var(--f-acc-txt); }
.fin .fin-rowbtn.is-on { color: var(--f-acc-txt); font-weight: 600; }

/* ── Área ────────────────────────────────────────────────────────────────── */
.fin .fin-legend-i { margin-left: auto; font-size: 11px; color: var(--f-soft); display: inline-flex; align-items: center; gap: 6px; }
.fin .fin-legend-i i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.fin .fin-li-p { background: var(--f-acc-txt); } .fin .fin-li-s { background: var(--f-good); margin-left: 8px; }
.fin .fin-area-wrap { position: relative; height: 150px; }
.fin .fin-area { width: 100%; height: 100%; display: block; overflow: visible; }
.fin .fin-ag0 { stop-color: var(--f-acc-txt); stop-opacity: .35; } .fin .fin-ag1 { stop-color: var(--f-acc-txt); stop-opacity: 0; }
.fin .fin-axis { stroke: var(--f-line); }
.fin .fin-a-line { fill: none; stroke: var(--f-acc-txt); stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fin .fin-a-sales { fill: none; stroke: var(--f-good); stroke-width: 2.2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.fin .fin-anim-draw { stroke-dasharray: 1; animation: finDraw 1.2s var(--f-ease) both; }
@keyframes finDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.fin .fin-a-pts { position: absolute; inset: 0; }
.fin .fin-a-pt { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--f-acc-txt); background: var(--f-glass-hi); cursor: pointer; transition: transform .2s var(--f-ease); }
.fin .fin-a-pt:hover, .fin .fin-a-pt.is-on { transform: scale(1.35); background: var(--f-acc-txt); }
.fin .fin-a-lbl { position: absolute; bottom: -2px; transform: translateX(-50%); font-size: 11px; color: var(--f-soft); text-transform: capitalize; }

/* ── Alertas, anillos, tablas ────────────────────────────────────────────── */
.fin .fin-al { list-style: none; margin: 0; padding: 0; }
.fin .fin-al li { display: grid; grid-template-columns: 1fr auto 72px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--f-line); }
.fin .fin-al li.fin-ok { display: block; color: var(--f-good); font-size: 14px; border: 0; }
.fin .fin-delta { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fin .fin-delta.is-up { color: var(--f-bad); } .fin .fin-delta.is-down { color: var(--f-good); }
.fin .fin-spark { width: 72px; height: 22px; overflow: visible; }
.fin .fin-spark polyline { fill: none; stroke: var(--f-acc-txt); stroke-width: 1.6; stroke-linejoin: round; }
.fin .fin-spark circle { fill: var(--f-acc-txt); }
.fin .fin-rings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
/* 28/10 · Sin anillo, la tarjeta ya no necesita alto de anillo. */
.fin .fin-ringc { position: relative; text-align: center; padding: 4px 0 2px; }
.fin .fin-ring { width: 100%; max-width: 132px; display: block; }
.fin .fin-r-val { fill: none; stroke: var(--f-acc-txt); stroke-width: 9; stroke-linecap: round; }
.fin .fin-ring.is-good .fin-r-val { stroke: var(--f-good); }
.fin .fin-ring .fin-r-track { stroke-width: 9; }
.fin .fin-ringc > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 22%; }
/* 28/10 · La banda sustituye al anillo: la cifra manda y la línea dice dónde cae. */
.fin .fin-kv { display: block; font-family: var(--f-num, var(--font-display)); font-weight: 600; font-size: 25px; line-height: 1.1; letter-spacing: -.02em; color: var(--f-ink); font-variant-numeric: tabular-nums; }
.fin .fin-kr .fin-banda { width: 100%; margin: 8px 0 10px; }
.fin .fin-banda { display: block; width: min(132px, 80%); height: 3px; margin: 10px auto 0; border-radius: 99px; background: var(--f-line); overflow: hidden; }
.fin .fin-banda i { display: block; height: 100%; border-radius: 99px; background: var(--f-acc-txt); }
.fin .fin-banda.is-good i { background: var(--f-good); }
.fin .fin-ringc .fin-num { font-family: var(--font-display); font-weight: 400; font-size: 21px; }
.fin .fin-ringc span { font-size: 11px; line-height: 1.25; color: var(--f-soft); }
.fin .fin-table { grid-column: span 8; }
.fin .fin-tscroll { overflow-x: auto; margin: 0 -6px; }
.fin table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fin th { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--f-soft); text-align: left; padding: 6px; border-bottom: 1px solid var(--f-line); white-space: nowrap; }
.fin td { padding: 8px 6px; border-bottom: 1px solid var(--f-line); vertical-align: middle; font-variant-numeric: tabular-nums; }
.fin tbody tr { transition: opacity .25s, background .25s; animation: finIn .5s var(--f-ease) both; animation-delay: calc(var(--i, 0) * 25ms); }
.fin tbody tr:hover { background: var(--f-tint); }
.fin tbody tr.is-on { background: color-mix(in srgb, var(--f-acc-txt) 12%, transparent); }
.fin tbody tr.is-dim { opacity: .35; }
.fin .fin-mbar { display: inline-block; width: 54px; height: 5px; margin-right: 8px; border-radius: 3px; background: var(--f-tint); vertical-align: middle; overflow: hidden; }
.fin .fin-mbar i { display: block; height: 100%; border-radius: 3px; background: var(--f-good); transition: width .5s var(--f-ease); }
.fin .fin-mbar i.is-bad { background: var(--f-bad); }
.fin .fin-hbar { display: grid; grid-template-columns: 46px 1fr auto auto; gap: 10px; align-items: center; margin-top: 10px; font-size: 13px; }
.fin .fin-hbar-t { height: 10px; border-radius: 6px; background: var(--f-tint); overflow: hidden; }
.fin .fin-hbar-t i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #c9a46a, var(--f-acc-txt)); transform-origin: left; animation: finGrowX .9s var(--f-ease) both; }
@keyframes finGrowX { from { transform: scaleX(0); } }
.fin .fin-qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fin .fin-q { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 16px; background: var(--f-tint); font-size: 12.5px; min-height: 74px; }
.fin .fin-q-n { font-family: var(--font-display); font-size: 26px; line-height: 1; }
.fin .fin-q small { color: var(--f-soft); }
.fin .fin-q-estrella { background: color-mix(in srgb, var(--f-good) 16%, transparent); }
.fin .fin-q-perro { background: color-mix(in srgb, var(--f-bad) 12%, transparent); }
.fin .fin-q.is-empty { opacity: .6; }
.fin .fin-supt { grid-column: span 6; }
.fin .fin-fama { grid-column: span 6; }
.fin .fin-scatter { position: relative; height: 210px; margin: 4px 0 0 18px; border-left: 1px solid var(--f-line); border-bottom: 1px solid var(--f-line);
  background-image: linear-gradient(var(--f-line) 1px, transparent 1px), linear-gradient(90deg, var(--f-line) 1px, transparent 1px); background-size: 25% 25%; }
.fin .fin-ax-y { position: absolute; left: -10px; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center; font-size: 11px; color: var(--f-soft); white-space: nowrap; }
.fin .fin-ax-x { position: absolute; right: 0; bottom: -20px; font-size: 11px; color: var(--f-soft); }
.fin .fin-pt { position: absolute; width: 14px; height: 14px; margin: 0 0 -7px -7px; border-radius: 50%; border: 0; padding: 0; background: var(--f-good); box-shadow: 0 0 0 5px color-mix(in srgb, var(--f-good) 18%, transparent); cursor: pointer; transition: transform .25s var(--f-ease), opacity .25s; animation: finIn .6s var(--f-ease) both; }
.fin .fin-pt.is-bad { background: var(--f-bad); box-shadow: 0 0 0 5px color-mix(in srgb, var(--f-bad) 18%, transparent); }
.fin .fin-pt span { position: absolute; left: 14px; top: -16px; font-size: 11px; white-space: nowrap; color: var(--f-ink2); }
.fin .fin-pt:hover, .fin .fin-pt.is-on { transform: scale(1.3); }
.fin .fin-gaps { grid-column: span 12; }
.fin .fin-gaps ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--f-ink2); columns: 2; column-gap: 32px; }

/* ── Cajón «de dónde sale» ───────────────────────────────────────────────── */
.fin .fin-drawer { position: fixed; z-index: 600; top: 72px; right: 18px; bottom: 18px; width: min(420px, calc(100vw - 24px)); pointer-events: none; }
.fin .fin-dr-in { height: 100%; overflow: auto; padding: 22px 22px 18px; border-radius: var(--f-r); background: var(--f-glass-hi); -webkit-backdrop-filter: blur(28px) saturate(1.3); backdrop-filter: blur(28px) saturate(1.3);
  border: 1px solid var(--f-edge); box-shadow: 0 40px 90px -30px rgba(96, 62, 30, .5); transform: translateX(24px); opacity: 0; transition: transform .3s var(--f-ease), opacity .3s; pointer-events: auto; }
.fin .fin-drawer.is-open .fin-dr-in { transform: none; opacity: 1; }
.fin .fin-dr-in header { position: relative; margin-bottom: 12px; padding-right: 40px; }
.fin .fin-dr-x { position: absolute; top: -6px; right: -6px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--f-line); background: transparent; font-size: 20px; cursor: pointer; }
.fin .fin-dr-b td small { display: block; color: var(--f-soft); font-size: 11px; margin-top: 2px; }
.fin .fin-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: var(--f-tint); color: var(--f-ink2); }
.fin .fin-tag-factura { background: color-mix(in srgb, #c9a46a 25%, transparent); }
.fin .fin-tag-receta { background: color-mix(in srgb, var(--f-good) 18%, transparent); }
.fin .fin-tag-tpv { background: color-mix(in srgb, var(--f-acc-txt) 18%, transparent); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .fin .fin-card, .fin .fin-core { grid-column: span 6; grid-row: auto; }
  .fin .fin-kpis, .fin .fin-table, .fin .fin-gaps { grid-column: span 12; }
}
@media (max-width: 720px) {
  .fam.fin { padding: 0 0 40px; }
  .fin .fin-top { margin: 0 2px 10px; flex-wrap: wrap; }
  .fin .fin-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fin .fin-card, .fin .fin-core, .fin .fin-kpis, .fin .fin-table, .fin .fin-supt, .fin .fin-fama, .fin .fin-gaps { grid-column: 1 / -1; grid-row: auto; }
  .fin .fin-core { order: -1; }
  .fin .fin-kpis { order: -2; grid-template-columns: 1fr 1fr; }
  .fin .fin-kpi:nth-child(3) { border-left: 0; }
  .fin .fin-kpi:nth-child(n+3) { border-top: 1px solid var(--f-line); }
  .fin .fin-kpi { padding: 14px 16px; }
  .fin .fin-kpi .fin-num { font-size: 26px; }
  .fin .fin-kpi .fin-src { top: 10px; right: 10px; }
  .fin .fin-card { padding: 16px; }
  .fin .fin-hide-m { display: none; }
  .fin .fin-bars { height: 170px; gap: 6px; }
  .fin .fin-gaps ul { columns: 1; }
  .fin .fin-drawer { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; height: 72vh; }
  .fin .fin-dr-in { transform: translateY(30px); }
}
@media (prefers-reduced-motion: reduce) {
  .fin *, .fin *::before, .fin *::after { animation: none !important; transition: none !important; }
}
@media print { .fin .fin-drawer, .fin .no-print { display: none !important; } }
.fin-sheet.pdf-mode .fin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fin-sheet.pdf-mode .fin-card { grid-column: auto; grid-row: auto; animation: none; backdrop-filter: none; -webkit-backdrop-filter: none; break-inside: avoid; }
.fin-sheet.pdf-mode .fin-kpis, .fin-sheet.pdf-mode .fin-table, .fin-sheet.pdf-mode .fin-gaps { grid-column: 1 / -1; }
.fin-sheet.pdf-mode .fin-src { display: none; }

/* Enlaces a los módulos, simulador y ajustes de rejilla */
.fin .fin-grid { align-items: start; }
.fin .fin-pt.is-r span { left: auto; right: 14px; }
.fin .fin-go { display: inline-flex; margin: 6px 8px 0 0; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--f-line); background: transparent; color: var(--f-acc-txt); font: inherit; font-size: 12.5px; cursor: pointer; }
.fin .fin-go:hover, .fin .fin-go:focus-visible { background: var(--f-tint); }
.fin .fin-reno { margin-left: auto; }
.fin .fin-sim { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--f-line); }
.fin .fin-sim label { display: grid; gap: 8px; font-size: 14px; }
.fin .fin-sim input[type=range] { width: 100%; accent-color: var(--f-acc-txt); }
.fin .fin-sim-out { margin: 8px 0 0; font-size: 14px; }
.fin .fin-table td:first-child { min-width: 150px; }
.fin .fin-go-b { margin-top: 28px; }


/* ═══════════════════════════════════════════════════════════════════════════
   ÉLITE (23/10/2026) · lienzo grafito, cristal oscuro, cifras tabulares, acento Renovo con mesura.
   Todo con prefijo #main para ganar a la capa clara; el PDF del panel (pdf-mode) y el documento
   financiero siguen en claro.
   ═══════════════════════════════════════════════════════════════════════════ */
#main .fam.fin {
  --f-acc: #e8794b; --f-acc-txt: #f08a5d; --f-acc-ink: #170d07;
  --f-good: #93b37f; --f-bad: #e2856d; --f-star: #d9a650; --f-cool: #c9a46a;  /* 28/10: fuera el azul y el menta; la familia es cálida */
  --f-ink: #eef1f6; --f-ink2: #b8bfcc; --f-soft: #8a93a3;
  --f-line: rgba(255, 255, 255, .07); --f-tint: rgba(255, 255, 255, .045);
  --f-glass: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  --f-glass-hi: #1a1e26; --f-edge: rgba(255, 255, 255, .09);
  --f-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 48px -28px rgba(0, 0, 0, .8);
  --f-r: 18px; --f-num: "Inter", "SF Pro Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  max-width: 1320px; margin: 0 auto; padding: 22px 24px 40px; border-radius: 28px;
  background: radial-gradient(1200px 500px at 50% -10%, rgba(124, 156, 255, .08), transparent 60%), radial-gradient(800px 400px at 100% 0%, rgba(232, 121, 75, .07), transparent 60%), #0c0e13;
  color: var(--f-ink); font-family: var(--f-num); font-feature-settings: "tnum" 1, "cv11" 1; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55);
}
#main .fam.fin::before { display: none; }
#main .fam.fin .fin-num, #main .fam.fin td, #main .fam.fin .fin-r { font-variant-numeric: tabular-nums; }

/* Cabecera breve: título, en vivo, conmutador y herramientas */
#main .fam.fin .fin-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 0 0 14px; }
#main .fam.fin .fin-ttl { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
#main .fam.fin .fin-h1 { margin: 0; font-family: var(--f-num); font-size: 19px; font-weight: 650; letter-spacing: -.015em; color: var(--f-ink); white-space: nowrap; }
/* 28/10 · La hora no compite con el titular: deja de ser una píldora con punto que late. */
#main .fam.fin .fin-live { font-size: 12.5px; color: var(--f-soft); padding: 0; background: none; border: 0; }
#main .fam.fin .fin-live i { display: none; }
#main .fam.fin .fin-badge { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--f-star); padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(233, 196, 106, .35); background: rgba(233, 196, 106, .08); }
#main .fam.fin .fin-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--f-line); }
#main .fam.fin .fin-seg button { border: 0; background: transparent; color: var(--f-soft); font-size: 13px; font-weight: 550; padding: 7px 14px; border-radius: 9px; cursor: pointer; transition: color .2s, background .2s; white-space: nowrap; }
#main .fam.fin .fin-seg button[aria-selected="true"] { color: var(--f-ink); background: rgba(255, 255, 255, .09); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 4px 14px -6px rgba(0, 0, 0, .8); }
#main .fam.fin .fin-tools { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
#main .fam.fin .fin-per-b, #main .fam.fin .fin-btn { height: 34px; border-radius: 10px; border: 1px solid var(--f-edge); background: rgba(255, 255, 255, .04); color: var(--f-ink); font: 500 13px/1 var(--f-num); padding: 0 12px; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
#main .fam.fin .fin-btn:hover, #main .fam.fin .fin-per-b:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
#main .fam.fin .fin-btn.is-pri { background: linear-gradient(180deg, #f08a5d, #d9673a); border-color: transparent; color: #160b05; font-weight: 650; }
#main .fam.fin .fin-btn.is-pri:hover { filter: brightness(1.06); }
#main .fam.fin .fin-btn:disabled { opacity: .45; cursor: default; }
#main .fam.fin .fin-head { margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
#main .fam.fin .fin-meta { margin: 0; font-size: 12.5px; color: var(--f-soft); }
#main .fam.fin .fin-chips { margin: 0; min-height: 30px; }
#main .fam.fin .fin-chip-hint { font-size: 12.5px; }
#main .fam.fin .fin-chip { background: rgba(240, 138, 93, .1); border-color: rgba(240, 138, 93, .3); color: var(--f-ink); box-shadow: none; padding: 5px 12px; font-size: 12.5px; }

/* Rejilla y cristal */
#main .fam.fin .fin-grid { gap: 14px; }
#main .fam.fin .fin-card { background: var(--f-glass), #12151c; border: 1px solid var(--f-edge); border-radius: var(--f-r); box-shadow: var(--f-shadow); padding: 18px 20px; backdrop-filter: none; -webkit-backdrop-filter: none; transition: transform .25s var(--f-ease), border-color .25s, box-shadow .25s; }
#main .fam.fin .fin-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 60% at 0% 0%, rgba(255, 255, 255, .05), transparent 50%); }
@media (hover: hover) { #main .fam.fin .fin-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .15); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 30px 60px -30px rgba(0, 0, 0, .9); } }
#main .fam.fin .fin-cap { font-size: 11px; letter-spacing: .14em; color: var(--f-soft); font-weight: 600; }
#main .fam.fin .fin-h { font-family: var(--f-num); font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--f-ink); }
#main .fam.fin .fin-sub, #main .fam.fin .fin-gap { font-size: 12.5px; color: var(--f-soft); }
#main .fam.fin .fin-src { border-color: var(--f-line); color: var(--f-soft); font-size: 11px; }
#main .fam.fin .fin-src:hover { background: rgba(255, 255, 255, .06); color: var(--f-ink); }

/* KPI superiores */
#main .fam.fin .fin-kpis { padding: 0; }
#main .fam.fin .fin-kpi { padding: 18px 20px; }
#main .fam.fin .fin-kpi .fin-num { font-family: var(--f-num); font-weight: 650; font-size: 30px; letter-spacing: -.03em; color: var(--f-ink); }
#main .fam.fin .fin-kpi:first-child .fin-num { color: var(--f-ink); }

/* Medidor héroe */
#main .fam.fin .fin-card.is-dark { --f-ink: #f4f6fa; --f-soft: #8f98a8; --f-line: rgba(255, 255, 255, .08); --f-acc-txt: #f08a5d;
  background: radial-gradient(90% 70% at 50% 35%, rgba(240, 138, 93, .14), transparent 60%), radial-gradient(120% 100% at 50% 0%, #241d16, #1c1711 70%); border-color: rgba(255, 255, 255, .1); }
#main .fam.fin .fin-ticks line { stroke: rgba(255, 255, 255, .16); }
#main .fam.fin .fin-ticks line.is-on { stroke: #f08a5d; }
#main .fam.fin .fin-g-track, #main .fam.fin .fin-g-track2 { stroke: rgba(255, 255, 255, .06); }
#main .fam.fin .fin-g-cov { stroke: var(--f-cool); stroke-width: 3; }
#main .fam.fin .fin-g-val { stroke: #f08a5d; filter: drop-shadow(0 0 12px rgba(240, 138, 93, .55)); }
#main .fam.fin .fin-g-core { fill: rgba(255, 255, 255, .025); stroke: rgba(255, 255, 255, .06); }
#main .fam.fin .fin-gauge-c .fin-num { font-family: var(--f-num); font-weight: 650; font-size: 48px; letter-spacing: -.04em; color: var(--f-ink); }
#main .fam.fin .fin-core-dl dd { font-weight: 600; font-size: 17px; color: var(--f-ink); }

/* Barras, donut, área, anillos, tablas */
#main .fam.fin .fin-bar-t { background: rgba(255, 255, 255, .04); border-radius: 10px; max-width: 38px; }
#main .fam.fin .fin-bar-t i { border-radius: 10px; background: linear-gradient(180deg, #8ea8ff, #4b63c9); }
#main .fam.fin .fin-bar.is-on .fin-bar-t i { background: linear-gradient(180deg, #ffb08a, #e0663c); box-shadow: 0 0 22px -4px rgba(240, 138, 93, .7); }
#main .fam.fin .fin-bar-v { color: var(--f-ink2); font-size: 11px; }
#main .fam.fin .fin-c0 { stroke: #f08a5d; background: #f08a5d; } #main .fam.fin .fin-c1 { stroke: #d9a650; background: #d9a650; } #main .fam.fin .fin-c2 { stroke: #93b37f; background: #93b37f; }
#main .fam.fin .fin-c3 { stroke: #c08a63; background: #c08a63; } #main .fam.fin .fin-c4 { stroke: #a99d8f; background: #a99d8f; }
#main .fam.fin .fin-donut-c .fin-num { font-family: var(--f-num); font-weight: 650; font-size: 20px; color: var(--f-ink); }
#main .fam.fin .fin-legend li { font-size: 12.5px; }
#main .fam.fin .fin-rowbtn b { font-family: var(--f-num); font-weight: 550; font-size: 13px; }
#main .fam.fin .fin-ag0 { stop-color: #f08a5d; stop-opacity: .38; } #main .fam.fin .fin-ag1 { stop-color: #f08a5d; stop-opacity: 0; }
#main .fam.fin .fin-as0 { stop-color: #c9a46a; stop-opacity: .3; } #main .fam.fin .fin-as1 { stop-color: #c9a46a; stop-opacity: 0; }
#main .fam.fin .fin-a-line { stroke: #f08a5d; stroke-width: 2; }
#main .fam.fin .fin-a-sales { stroke: #c9a46a; stroke-width: 2; stroke-dasharray: none; }
#main .fam.fin .fin-grid-l { stroke: rgba(255, 255, 255, .05); stroke-dasharray: 2 4; }
#main .fam.fin .fin-li-p { background: #f08a5d; } #main .fam.fin .fin-li-s { background: #c9a46a; }
#main .fam.fin .fin-a-pt { border-color: #f08a5d; background: #1c1711; width: 12px; height: 12px; margin: -6px 0 0 -6px; }
#main .fam.fin .fin-a-pt.is-on, #main .fam.fin .fin-a-pt:hover { background: #f08a5d; box-shadow: 0 0 0 6px rgba(240, 138, 93, .18); }
#main .fam.fin .fin-a-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #1c1711; border: 2px solid #d9a650; pointer-events: none; }
#main .fam.fin .fin-r-val { stroke: #d9a650; } #main .fam.fin .fin-ring.is-good .fin-r-val { stroke: var(--f-good); }
#main .fam.fin .fin-ringc .fin-num { font-family: var(--f-num); font-weight: 650; color: var(--f-ink); }
#main .fam.fin th { font-size: 11px; color: var(--f-soft); letter-spacing: .1em; }
#main .fam.fin td { font-size: 13px; color: var(--f-ink2); }
#main .fam.fin tbody tr:hover { background: rgba(255, 255, 255, .03); }
#main .fam.fin tbody tr.is-on { background: rgba(240, 138, 93, .1); }
#main .fam.fin .fin-spark polyline { stroke: #c9a46a; } #main .fam.fin .fin-spark circle { fill: #c9a46a; }
#main .fam.fin .fin-q { background: rgba(255, 255, 255, .035); border: 1px solid var(--f-line); border-radius: 14px; }
#main .fam.fin .fin-q-n { font-family: var(--f-num); font-weight: 650; color: var(--f-ink); }
#main .fam.fin .fin-q-estrella { background: rgba(79, 209, 161, .08); border-color: rgba(79, 209, 161, .2); }
#main .fam.fin .fin-q-perro { background: rgba(255, 107, 107, .07); border-color: rgba(255, 107, 107, .2); }
#main .fam.fin .fin-hbar-t { background: rgba(255, 255, 255, .05); } #main .fam.fin .fin-hbar-t i { background: linear-gradient(90deg, #4b63c9, #8ea8ff); }
#main .fam.fin .fin-scatter { border-color: var(--f-line); background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); }
#main .fam.fin .fin-go { color: #f08a5d; border-color: rgba(240, 138, 93, .3); }
#main .fam.fin .fin-go:hover { background: rgba(240, 138, 93, .1); }
#main .fam.fin .fin-mbar { background: rgba(255, 255, 255, .06); }
#main .fam.fin .is-dim { opacity: .28; filter: saturate(.4); }

/* Cuenta de resultados, KPI de hostelería, acciones */
#main .fam.fin .fin-pnl { grid-column: span 5; }
#main .fam.fin .fin-kpih { grid-column: span 3; }
#main .fam.fin .fin-acts { grid-column: span 4; }
#main .fam.fin .fin-pl { width: 100%; }
#main .fam.fin .fin-pl th[scope=row] { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 450; color: var(--f-ink2); border-bottom: 1px solid var(--f-line); padding: 7px 6px; white-space: normal; }
#main .fam.fin .fin-pl td { padding: 7px 6px; }
#main .fam.fin .fin-pl tr.is-strong th, #main .fam.fin .fin-pl tr.is-strong td { color: var(--f-ink); font-weight: 650; }
#main .fam.fin .fin-pl tr.fin-pl-ebitda th, #main .fam.fin .fin-pl tr.fin-pl-ebitda td { border-top: 1px solid rgba(255, 255, 255, .18); }
#main .fam.fin .fin-pl .is-neg { color: var(--f-bad); }
#main .fam.fin .fin-soft { color: var(--f-soft); }
#main .fam.fin .fin-dl { font-size: 12.5px; font-weight: 600; } #main .fam.fin .fin-dl.is-good { color: var(--f-good); } #main .fam.fin .fin-dl.is-bad { color: var(--f-bad); }
#main .fam.fin .fin-in { width: 96px; height: 28px; border-radius: 8px; border: 1px solid var(--f-edge); background: rgba(255, 255, 255, .04); color: var(--f-ink); text-align: right; font: 500 13px var(--f-num); font-variant-numeric: tabular-nums; padding: 0 8px; }
#main .fam.fin .fin-in:focus { outline: none; border-color: #f08a5d; box-shadow: 0 0 0 3px rgba(240, 138, 93, .2); }
#main .fam.fin .fin-kl { list-style: none; margin: 0; padding: 0; }
#main .fam.fin .fin-kl li { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 10px 0; border-top: 1px solid var(--f-line); align-items: center; }
#main .fam.fin .fin-kl li:first-child { border-top: 0; padding-top: 0; }
#main .fam.fin .fin-kl b { display: block; font-size: 13px; font-weight: 600; color: var(--f-ink); }
#main .fam.fin .fin-kl small { font-size: 11px; color: var(--f-soft); }
#main .fam.fin .fin-kv { font-size: 18px; font-weight: 650; color: var(--f-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
#main .fam.fin .fin-kv.is-alto, #main .fam.fin .fin-kv.is-bajo { color: var(--f-bad); } #main .fam.fin .fin-kv.is-ok, #main .fam.fin .fin-kv.is-bien { color: var(--f-good); }
#main .fam.fin .fin-band { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .06); }
#main .fam.fin .fin-band-ok { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: rgba(79, 209, 161, .35); }
#main .fam.fin .fin-band i { position: absolute; top: -4px; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .6); transition: left .6s var(--f-ease); }
#main .fam.fin .fin-band i.is-alto, #main .fam.fin .fin-band i.is-bajo { background: var(--f-bad); box-shadow: 0 0 10px var(--f-bad); }
#main .fam.fin .fin-st { grid-column: 1 / -1; font-style: normal; font-size: 11px; font-weight: 600; color: var(--f-soft); }
#main .fam.fin .fin-st.is-alto, #main .fam.fin .fin-st.is-bajo { color: var(--f-bad); } #main .fam.fin .fin-st.is-ok, #main .fam.fin .fin-st.is-bien { color: var(--f-good); }
#main .fam.fin .fin-al2 { list-style: none; margin: 0; padding: 0; counter-reset: a; }
#main .fam.fin .fin-al2 li { display: grid; grid-template-columns: 88px 1fr; gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--f-line); animation: finIn .5s var(--f-ease) both; animation-delay: calc(var(--i) * 50ms); }
#main .fam.fin .fin-al2 li:first-child { border-top: 0; padding-top: 0; }
#main .fam.fin .fin-al2 li > .fin-go { grid-column: 2; justify-self: start; margin: 0; }
#main .fam.fin .fin-al2 p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--f-ink); }
#main .fam.fin .fin-imp { font-size: 17px; font-weight: 650; color: var(--f-good); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
#main .fam.fin .fin-imp small { display: block; font-size: 11px; font-weight: 500; color: var(--f-soft); letter-spacing: 0; }
#main .fam.fin .fin-imp.is-na { color: var(--f-soft); }
#main .fam.fin .fin-al2 details { margin-top: 4px; font-size: 11px; color: var(--f-soft); }
#main .fam.fin .fin-al2 summary { cursor: pointer; color: var(--f-soft); }
#main .fam.fin .fin-al2 details p { color: var(--f-ink2); font-size: 11px; margin-top: 4px; }
#main .fam.fin .fin-ok { color: var(--f-good); font-size: 13px; margin: 0; }

/* Cajón en oscuro */
#main .fam.fin .fin-dr-in { background: rgba(18, 21, 28, .96); border-color: rgba(255, 255, 255, .12); color: var(--f-ink); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9); }
#main .fam.fin .fin-dr-x { color: var(--f-ink); border-color: var(--f-edge); }
#main .fam.fin .fin-tag { background: rgba(255, 255, 255, .07); color: var(--f-ink2); }
#main .fam.fin .fam-report-footer { color: var(--f-soft); border-color: var(--f-line); }
#main .fam.fin .fin-sim input[type=range] { accent-color: #f08a5d; }

/* Documento financiero: papel A4 claro, tipografía de imprenta */
#main .fam.fin.is-doc .fin-head, #main .fam.fin.is-doc .fam-report-footer { display: none; }
.fin-doc { margin: 0 auto; max-width: 820px; }
/* Responsive élite */
@media (max-width: 1180px) {
  #main .fam.fin .fin-pnl { grid-column: span 7; } #main .fam.fin .fin-kpih { grid-column: span 5; } #main .fam.fin .fin-acts { grid-column: span 12; }
  #main .fam.fin .fin-top { grid-template-columns: 1fr auto; } #main .fam.fin .fin-tools { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 720px) {
  #main .fam.fin { padding: 14px 12px 28px; border-radius: 20px; margin: 0 -6px; }
  /* 28/10 · En 390 px la cabecera se comía la pantalla entera: titular + reloj + dos
     pestañas a todo lo ancho + periodo a todo lo ancho + tres botones, y la primera cifra
     empezaba por debajo del pliegue. Manuel, de pie, 40 segundos, veía cero datos.
     Los mandos pasan a una fila de fichas que se desliza: el dato sube a la primera pantalla. */
  #main .fam.fin .fin-top { grid-template-columns: 1fr; gap: 8px; }
  #main .fam.fin .fin-seg { width: auto; }
  #main .fam.fin .fin-seg button { flex: 0 0 auto; padding: 8px 12px; font-size: 12.5px; }
  #main .fam.fin .fin-tools { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px;
    padding-bottom: 2px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
  #main .fam.fin .fin-tools::-webkit-scrollbar { display: none; }
  #main .fam.fin .fin-tools > * { flex: 0 0 auto; }
  #main .fam.fin .fin-tools .fin-per-b { width: auto; }
  #main .fam.fin .fin-h1 { font-size: 25px; }
  #main .fam.fin .fin-pnl, #main .fam.fin .fin-kpih, #main .fam.fin .fin-acts { grid-column: 1 / -1; }
  #main .fam.fin .fin-card { padding: 16px; border-radius: 16px; }
  #main .fam.fin .fin-kpi .fin-num { font-size: 24px; }
  #main .fam.fin .fin-gauge-c .fin-num { font-size: 40px; }
  #main .fam.fin .fin-in { width: 84px; }
  #main .fam.fin .fin-al2 li { grid-template-columns: 76px 1fr; }
}
/* PDF del panel: vuelve al claro */
#main #reportSheet.pdf-mode .fin-card { background: #fff; border-color: #e3e5ea; box-shadow: none; }
#main #reportSheet.pdf-mode .fin-card::after { display: none; }
@media print { #main .fam.fin { background: #fff; color: #111; box-shadow: none; } }

#main .fam.fin #reportSheet, #main .fam.fin .fin-sheet { background: transparent; color: var(--f-ink); }

#main .fam.fin article#reportSheet.fin-sheet:not(.pdf-mode) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#main .fam.fin .fin-grid[hidden], .fin-doc[hidden] { display: none !important; }


#main .fam.fin .fin-per { position: relative; }
html body.page-app #main .fam.fin .fin-per-b { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 190px; padding: 0 12px; height: 34px; font: 500 13px/1 var(--f-num, inherit); color: var(--f-ink); cursor: pointer; white-space: nowrap; }
#main .fam.fin .fin-per-b i { font-style: normal; font-size: 11px; color: var(--f-soft); transition: transform .2s; }
#main .fam.fin .fin-per-b[aria-expanded=true] i { transform: rotate(180deg); }
#main .fam.fin .fin-per-l { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 100%; max-height: 300px; overflow: auto; padding: 6px; border-radius: 12px; border: 1px solid var(--f-edge); background: #151820; box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .7); display: grid; gap: 2px; }
#main .fam.fin .fin-per-l[hidden] { display: none; }
html body.page-app #main .fam.fin .fin-per-o { display: block; width: 100%; text-align: left; padding: 8px 10px; height: auto; border: 0; border-radius: 8px; background: transparent; color: var(--f-ink2, var(--f-ink)); font: 500 13px/1.2 var(--f-num, inherit); white-space: nowrap; cursor: pointer; }
html body.page-app #main .fam.fin .fin-per-o:hover, html body.page-app #main .fam.fin .fin-per-o:focus-visible { background: rgba(255, 255, 255, .07); outline: none; }
html body.page-app #main .fam.fin .fin-per-o.is-on { background: rgba(240, 138, 93, .16); color: #f6b08f; }
#main .fam.fin .fin-tools .fin-per { grid-column: 1 / -1; } #main .fam.fin .fin-tools .fin-per .fin-per-b { width: 100%; }
#main .fam.fin .fin-na { color: var(--f-soft); font-size: 11px; font-style: italic; white-space: nowrap; }
html body.page-app #main .fam.fin .fin-al2 summary { border: 0; box-shadow: none; text-decoration: none; background: none; }
html body.page-app #main .fam.fin .fin-al2 details { border: 0; box-shadow: none; background: none; }
#main .fam.fin .fin-src { flex-shrink: 0; white-space: nowrap; min-width: max-content; }

/* Shared vector document: warm paper, restrained typography, no raster export. */
.fin-doc{max-width:860px;overflow:auto}
.rp{display:flex;flex-direction:column;align-items:flex-start;gap:22px;width:800px;margin:16px auto;color:#2a2420}
.rp-pg.fam-fin-paper{display:block;flex:none;width:800px;height:auto;padding:0;background:#fffaf3;border-radius:4px;box-shadow:0 12px 36px -20px rgba(74,52,32,.3);overflow:visible}
#main .fam.fin .fam-fin-paper text{font-size:revert-layer}
.fam-fin-doc-zoom{min-height:44px}
@media print{.fam-fin-doc-zoom{display:none!important}.rp{width:210mm;gap:0;zoom:1!important}.rp-pg.fam-fin-paper{width:210mm;break-after:page;box-shadow:none}.rp-pg.fam-fin-paper:last-child{break-after:auto}}

/* ═══ Estilo app (24/10/2026): crema, tarjetas planas cálidas, acento terracota; sin marco oscuro ═══ */
#main .fam.fin {
  --f-acc: #b54b27; --f-acc-txt: #a8402b; --f-acc-ink: #fff8f2; --f-good: #47703a; --f-bad: #a8402b; --f-star: #86601f; --f-cool: #8f5a3c;
  --f-ink: #2a2420; --f-ink2: #4a4035; --f-soft: #64594e; --f-line: rgba(74, 52, 32, .11); --f-tint: rgba(214, 190, 160, .22);
  --f-glass: #fffaf3; --f-glass-hi: #fffaf3; --f-edge: rgba(74, 52, 32, .14); --f-shadow: none;
  background: none; box-shadow: none; border-radius: 0; padding: 4px 0 56px; color: var(--f-ink); }
#main .fam.fin .fin-h1 { font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 26px; letter-spacing: -.01em; }
#main .fam.fin .fin-live { background: none; border: 0; color: var(--f-soft); }
#main .fam.fin .fin-seg { background: rgba(74, 52, 32, .05); border-color: var(--f-edge); }
#main .fam.fin .fin-seg button[aria-selected="true"] { background: #fffaf3; color: var(--f-ink); box-shadow: 0 0 0 1px var(--f-edge), 0 4px 12px -8px rgba(96, 62, 30, .4); }
#main .fam.fin .fin-per-b, #main .fam.fin .fin-btn { background: #fffaf3; border-color: var(--f-edge); color: var(--f-ink); }
#main .fam.fin .fin-btn:hover, #main .fam.fin .fin-per-b:hover { background: #fff; border-color: rgba(74, 52, 32, .26); }
#main .fam.fin .fin-btn.is-pri { background: var(--f-acc); border-color: var(--f-acc); color: var(--f-acc-ink); }
#main .fam.fin .fin-li-p { background: #d9a487; } #main .fam.fin .fin-li-s { background: var(--f-acc-txt); }
#main .fam.fin .fin-trend .fin-li-p { background: var(--f-acc-txt); } #main .fam.fin .fin-trend .fin-li-s { background: var(--f-good); }
#main .fam.fin .fin-card, #main .fam.fin .fin-hero .fin-card {
  --f-ink: #2a2420; --f-ink2: #4a4035; --f-soft: #64594e; --f-line: rgba(74, 52, 32, .11); --f-acc-txt: #a8402b;
  background: #fffaf3; border: 1px solid rgba(74, 52, 32, .12); border-radius: 18px; color: var(--f-ink);
  box-shadow: 0 1px 0 rgba(96, 62, 30, .04), 0 18px 40px -34px rgba(96, 62, 30, .4); backdrop-filter: none; -webkit-backdrop-filter: none; }
#main .fam.fin .fin-card::after { display: none; }
@media (hover: hover) { #main .fam.fin .fin-card:hover { transform: none; border-color: rgba(74, 52, 32, .22); } }
/* Cabecera: «De dónde sale» en el flujo, nunca encima del título */
#main .fam.fin .fin-card > header .fin-cap { width: auto; flex: 1 1 auto; min-width: 0; }
#main .fam.fin .fin-card > header .fin-h { flex-basis: 100%; }
#main .fam.fin .fin-card > header > .fin-src { position: static; flex: none; margin: -4px -6px 0 auto; }
/* Medidor: anillo fino terracota */
#main .fam.fin .fin-ticks, #main .fam.fin .fin-g-cov, #main .fam.fin .fin-g-track, #main .fam.fin .fin-g-core { display: none; }
#main .fam.fin .fin-g-track2 { stroke: rgba(74, 52, 32, .09); stroke-width: 10; }
#main .fam.fin .fin-g-val { stroke: var(--f-acc-txt); stroke-width: 10; stroke-linecap: round; filter: none; }
#main .fam.fin .fin-gauge-c .fin-num { color: var(--f-ink); font-weight: 600; font-size: 34px; letter-spacing: -.03em; }
#main .fam.fin .fin-gauge-c span { color: var(--f-soft); }
#main .fam.fin .fin-core-dl dd { color: var(--f-ink); }
#main .fam.fin .fin-kr svg { background: none; box-shadow: none; }
/* Por categoría: barras horizontales top-N */
#main .fam.fin .fin-crows { display: flex; flex-direction: column; gap: 10px; }
#main .fam.fin .fin-crow { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 2px 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--f-ink); cursor: pointer; text-align: left; transition: opacity .25s; }
#main .fam.fin .fin-crow-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#main .fam.fin .fin-crow-l::first-letter { text-transform: uppercase; }
#main .fam.fin .fin-crow-t { height: 8px; border-radius: 6px; background: rgba(74, 52, 32, .07); overflow: hidden; }
#main .fam.fin .fin-crow-t i { display: block; height: 100%; border-radius: 6px; background: #e3a98a; transform-origin: left; animation: finGrowX .8s var(--f-ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
#main .fam.fin .fin-crow:first-child .fin-crow-t i, #main .fam.fin .fin-crow.is-on .fin-crow-t i { background: var(--f-acc-txt); }
#main .fam.fin .fin-crow-v { font-variant-numeric: tabular-nums; font-weight: 600; }
#main .fam.fin .fin-crow.is-dim { opacity: .4; }
#main .fam.fin .fin-crow:hover .fin-crow-l { color: var(--f-acc-txt); }
#main .fam.fin .fin-crow-miss { margin-top: 6px; }
/* Estado vacío: icono, frase, siguiente paso */
#main .fam.fin .fin-gap { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 6px 0 0; padding: 16px; border: 1px dashed rgba(74, 52, 32, .2); border-radius: 14px; background: rgba(214, 190, 160, .1); font-size: 13px; line-height: 1.45; color: var(--f-ink2); }
#main .fam.fin .fin-gap p { margin: 0; }
#main .fam.fin .fin-gap-i { color: var(--f-acc-txt); font-size: 18px; line-height: 1; }
#main .fam.fin .fin-gap .fin-go { margin: 0; }
/* Colores de gráficos */
#main .fam.fin .fin-c0 { stroke: #c9572f; background: #c9572f; } #main .fam.fin .fin-c1 { stroke: #8f5a3c; background: #8f5a3c; } #main .fam.fin .fin-c2 { stroke: #d9a487; background: #d9a487; }
#main .fam.fin .fin-c3 { stroke: #4a4035; background: #4a4035; } #main .fam.fin .fin-c4 { stroke: #e9cdb6; background: #e9cdb6; }
#main .fam.fin .fin-a-line { stroke-width: 1.8; }
#main .fam.fin .fin-r-track { stroke: rgba(74, 52, 32, .09); }
#main .fam.fin .fin-q { background: rgba(214, 190, 160, .14); }
/* 28/10 · `--f-acc` es el acento de FONDO de botón; como texto sobre el lienzo mide 4,46:1 y
   AA pide 4,5. Seis enlaces del Informe lo usaban («Abrir su escandallo», «Ir a Reputación»…).
   `--f-acc-txt` es su variante de tinta y da 5,20:1. Mismo fallo que la marca el 28/10. */
#main .fam.fin .fin-go { color: var(--f-acc-txt, var(--f-acc)); }
@media (max-width: 720px) { #main .fam.fin { padding: 6px 0 28px; margin: 0; } #main .fam.fin .fin-gauge-wrap { max-width: 240px; margin-left: auto; margin-right: auto; } #main .fam.fin .fin-swipe > .fin-card { flex-basis: 88%; } }
#main .fam.fin .fin-kr small.fin-krs { margin-top: 2px; font-weight: 600; color: var(--f-ink); }
#main .fam.fin .fin-kr small.fin-krs.is-alto, #main .fam.fin .fin-kr small.fin-krs.is-bajo, #main .fam.fin .fin-st.is-alto, #main .fam.fin .fin-st.is-bajo { text-decoration: underline; text-underline-offset: 2px; }

/* Plato a plato: uncosted dishes folded into one actionable row */
.fin .fin-table tr.fin-tmiss td { padding: 14px 0 6px; border-bottom: 0; }
.fin .fin-tmiss div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px dashed var(--f-line, rgba(60,40,20,.18)); border-radius: 12px; }
.fin .fin-tmiss p { flex: 1 1 260px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--f-soft); white-space: normal; text-align: left; }
.fin .fin-tmiss b { color: var(--f-ink, inherit); font-weight: 600; }

/* ═══ Informe con el estilo de la app (27/10/2026) ══════════════════════════
   Mismas piezas que Hoy: tarjetas de .hoy-list, recuadros de .hoy-proof y
   botones .qbtn. Sin restos del tema oscuro anterior. */
html body.page-app #main .fam.fin { background: none; box-shadow: none; }
html body.page-app #main .fam.fin .fin-card { background: var(--f-glass); border: 1px solid var(--f-edge); border-radius: var(--f-r); box-shadow: var(--f-shadow); transform: none; }
html body.page-app #main .fam.fin .fin-card::after { display: none; }
html body.page-app #main .fam.fin .fin-card:hover { transform: none; box-shadow: var(--f-shadow); border-color: var(--f-edge); }
html body.page-app #main .fam.fin .fin-btn, html body.page-app #main .fam.fin .fin-per-b { height: auto; min-height: 38px; padding: 0 16px; border-radius: 3px; border: 1px solid var(--f-line); background: transparent; color: var(--f-ink2); font: 500 14px/1.2 var(--font-ui); box-shadow: none; }
html body.page-app #main .fam.fin .fin-btn.is-pri { background: var(--f-acc); border-color: var(--f-acc); color: var(--f-acc-ink); font-weight: 600; }
html body.page-app #main .fam.fin .fin-btn:hover, html body.page-app #main .fam.fin .fin-per-b:hover { background: var(--f-tint); }
html body.page-app #main .fam.fin .fin-btn.is-pri:hover { background: var(--f-acc); filter: brightness(1.06); }
html body.page-app #main .fam.fin .fin-seg { border-radius: 3px; background: var(--f-tint); border: 1px solid var(--f-line); }
html body.page-app #main .fam.fin .fin-seg button { border-radius: 2px; color: var(--f-soft); }
html body.page-app #main .fam.fin .fin-seg button[aria-selected="true"] { background: var(--f-glass-hi); color: var(--f-ink); box-shadow: none; }
html body.page-app #main .fam.fin .fin-per-l { background: var(--f-glass-hi); border: 1px solid var(--f-line); border-radius: 3px; box-shadow: var(--f-shadow); }
html body.page-app #main .fam.fin .fin-per-o { border-radius: 2px; color: var(--f-ink2); }
html body.page-app #main .fam.fin .fin-per-o:hover, html body.page-app #main .fam.fin .fin-per-o:focus-visible { background: var(--f-tint); }
html body.page-app #main .fam.fin .fin-per-o.is-on { background: var(--f-tint); color: var(--f-acc-txt); }
html body.page-app #main .fam.fin .fin-live, html body.page-app #main .fam.fin .fin-badge { background: var(--f-tint); border: 1px solid var(--f-line); color: var(--f-soft); }
html body.page-app #main .fam.fin .fin-live i { box-shadow: none; }
html body.page-app #main .fam.fin .fin-in { border-radius: 2px; }
html body.page-app #main .fam.fin .fin-q, html body.page-app #main .fam.fin .fin-empty { border-radius: 16px; }
html body.page-app #main .fam.fin .fin-a-pt { background: var(--f-glass-hi); border-color: var(--f-acc-txt); }
html body.page-app #main .fam.fin .fin-a-pt:hover, html body.page-app #main .fam.fin .fin-a-pt.is-on { background: var(--f-acc-txt); }
html body.page-app #main .fam.fin .fin-band, html body.page-app #main .fam.fin .fin-mbar { background: var(--f-tint); }
html body.page-app #main .fam.fin .fin-band-ok { background: color-mix(in srgb, var(--f-good) 30%, transparent); }
html body.page-app #main .fam.fin .fin-band i { background: var(--f-ink); box-shadow: none; }
html body.page-app #main .fam.fin .fin-band i.is-alto, html body.page-app #main .fam.fin .fin-band i.is-bajo { background: var(--f-bad); box-shadow: none; }
html body.page-app #main .fam.fin .fin-g-val, html body.page-app #main .fam.fin .fin-bar.is-on .fin-bar-t i { filter: none; box-shadow: none; }
html body.page-app #main .fam.fin .fin-bar-t i, html body.page-app #main .fam.fin .fin-hbar-t i { background: var(--f-acc-txt); }

/* ═══════════════════════════════════════════════════════════════════════
   [Auditoría estricta · 27/10] Un solo juego de tokens, un solo radio por tipo
   de control y nada de texto que se parta mal. Solo CSS: ni lógica ni datos.
   ═══════════════════════════════════════════════════════════════════════ */
/* A1 · Tinta y acento: el sistema y los módulos (Hoy/Reputación/Informe/Escandallo)
   tenían dos paletas casi iguales (#1a150f vs #2a2420, #6b5f50 vs #64594e…) y dos
   acentos (oro #8a5a10 en el chrome, terracota en los módulos). Queda una. */
html[data-theme="light"] body.page-app {
  --ink: #2a2420; --ink-2: #4d443c; --ink-soft: #64594e; --bad: #a8402b;
  --accent: #b54b27; --accent-ink: #a8402b; --accent-solid: #b54b27; --accent-soft: #f3e1d6;
}
html[data-theme="dark"] body.page-app {
  --ink: #f3ebe1; --ink-2: #d6ccbf; --ink-soft: #b0a596;
  --accent: #e07a52; --accent-ink: #ec8a5f; --accent-solid: #e07a52; --accent-soft: rgba(224, 122, 82, .12);
}
/* El CTA del Escandallo usaba un tercer naranja (#d4623a) con texto claro por debajo de AA. */
html[data-theme="light"] body.page-app .hoja.hesc { --atl-acc: #b54b27; }
html body.page-app .hesc .stars { color: var(--f-star, #a7782a); }

/* A2 · Pesos: cuatro (400/500/600/700). Fuera 450, 550, 650 y 800. */
#main .fam.fin .fin-h1, #main .fam.fin .fin-num, #main .fam.fin .fin-kv, #main .fam.fin .fin-imp, #main .fam.fin .fin-q-n,
#main .fam.fin .fin-pl tr.is-strong th, #main .fam.fin .fin-pl tr.is-strong td { font-weight: 600; }
#main .fam.fin .fin-seg button, #main .fam.fin .fin-rowbtn b { font-weight: 500; }
#main .fam.fin .fin-pl th[scope=row] { font-weight: 400; }
body.page-app .item-row .item-name, body.page-app .esc-carta-viva .card-header h3, body.page-app .rev-card .rev-author { font-weight: 600; }
body.page-app .stat .stat-value, body.page-app .hero-number { font-weight: 700; }

/* A3 · Radios de control: los botones de acción son píldora en todas partes
   (antes «Copiar respuesta» era 3px en Hoy y píldora en Reputación). */
html body.page-app .hoy-acts .qbtn-primary,
html body.page-app #main .fam.fin .fin-btn,
html body.page-app #demoBanner .btn,
html body.page-app #repSortSel { border-radius: 999px; }
html body.page-app #main .fam.fin .fin-seg { border-radius: 999px; padding: 3px; }
html body.page-app #main .fam.fin .fin-seg button { border-radius: 999px; }
html body.page-app .top-rail .tr-mods .nav-item .count { border-radius: 999px !important; }
html[data-theme] body.page-app #renoFab { border-radius: 50% !important; }
html body.page-app #main #hoyStream .hoy-acts .qbtn.qbtn-primary { border-radius: 999px !important; }
/* «Datos de ejemplo» junto al título repetía el banner de demo. */
html body.page-app.has-demo-banner #main .fam.fin .fin-ttl .fin-badge { display: none; }
/* El panel de RENO era la única superficie flotante con esquinas de 3px. */
html body.page-app #renoPanel.open { border-radius: 16px; overflow: hidden; }
html body.page-app:has(#renoPanel.open) #renoFab { visibility: hidden; }
/* Superficies: el raíl del Escandallo (20px) se alinea con sus paneles (24px). */
html body.page-app .hesc .atl-rail { border-radius: 24px; }
/* La nota «Consejo» era un pósit amarillo inclinado: un color y un giro de más. */
html[data-theme="light"] body.page-app .hesc .atl-tip {
  background: rgba(253, 248, 241, .92); color: #4d443c; border: 1px solid rgba(74, 52, 32, .11);
  border-radius: 14px; transform: none; box-shadow: 0 16px 30px -22px rgba(96, 62, 30, .45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html[data-theme="light"] body.page-app .hesc .atl-tip b { color: #2a2420; }

/* A4 · Botones primarios del libro mayor (Carta, Ajustes, Locales): eran texto
   subrayado; ahora una píldora clara de verdad. Los secundarios siguen siendo enlace. */
html body.page-app #main .btn.btn-primary:not(#reportBody *) {
  min-height: 36px !important; padding: 0 18px !important; border-radius: 999px !important; border: 0 !important;
  background: var(--accent-solid) !important; color: var(--ink-on-solid) !important; text-decoration: none !important; box-shadow: none !important;
  display: inline-flex; align-items: center; justify-content: center;
}
html body.page-app #main .btn.btn-primary:not(#reportBody *)::after { display: none !important; }
html body.page-app #main .btn.btn-primary:not(#reportBody *):hover { filter: brightness(1.06); }

/* A5 · Jerarquía de títulos: Locales, Ajustes y Carta titulaban a 20px frente a los
   26–54px del resto. Mismo serif, mismo tamaño que el Informe. */
html body.page-app #main .account-view .stream-head .hero-titular,
html body.page-app #main .esc-despertar > .hero-titular { font-size: 28px !important; line-height: 1.15 !important; letter-spacing: -.015em; }
/* Contenido: la entradilla (21px serif) pesaba igual que el título. */
html body.page-app #main .con-view .hoja .hd .disp { font-size: 26px; }
html body.page-app #main .con-view .hoja .hd .lede { font-size: 16px; line-height: 1.55; color: var(--ink-soft); font-family: var(--font-ui, Inter, sans-serif); }

/* A6 · Texto redundante: la nota «Demo · datos de ejemplo» repetía el banner de demo. */
html body.page-app.has-demo-banner #main .hdemo,
html body.page-app.has-demo-banner #main .fam-demo { display: none; }

/* A7 · Cortes de línea: nada de palabras huérfanas en titulares, nombres y entradillas. */
#main h1, #main h2, #main h3, #main .hoy-h1, #main .fin-h, #main .atl-dish b, #main .disp, .l-hero h1 { text-wrap: balance; }
#main p, #main .hoy-lede, #main small, .l-lead, .l-tag span { text-wrap: pretty; }

/* A8 · Informe: «Imprimir» caía solo en una tercera fila; las tarjetas de una fila no
   acababan a la misma altura (huecos de 18 a 77px). El reloj ya no baila. */
@media (min-width: 1101px) {
  html body.page-app #main .fam.fin .fin-top { grid-template-columns: auto 1fr; row-gap: 12px; }
  html body.page-app #main .fam.fin .fin-ttl { grid-column: 1 / -1; flex-wrap: nowrap; }
  html body.page-app #main .fam.fin .fin-seg { justify-self: start; }
  html body.page-app #main .fam.fin .fin-tools { flex-wrap: nowrap; justify-self: end; }
  html body.page-app #main .fam.fin .fin-tools .fin-btn { padding-inline: 14px; white-space: nowrap; }
}
@media (min-width: 901px) { html body.page-app #main .fam.fin .fin-grid { align-items: stretch; } }
#finLive { font-variant-numeric: tabular-nums; }

/* A9 · Reputación: «Tiempo de respuesta / Aún no medible» se partía en 4 líneas. */
html body.page-app .fam .fam-kv > span { min-width: 0; flex: 1 1 auto; }
html body.page-app .fam .fam-kv > strong, html body.page-app .fam .fam-kv > b { flex: 0 0 auto; text-align: right; }

/* A10 · Facturas: las categorías salen como las escribe el proveedor («panadería»). */
html body.page-app #main .pillar-finance .data-table tbody td:first-child::first-letter { text-transform: uppercase; }

/* A11 · Locales: el icono de borrar flotaba por encima de la línea de «Editar». */
html body.page-app #main .account-view .list-item .btn-sm { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }

/* A12 · Móvil */
@media (max-width: 600px) {
  /* «Ahora no» quedaba huérfano en su propia fila. */
  html body.page-app .hoy-acts { flex-wrap: nowrap; }
  html body.page-app .hoy-acts .q-skip { margin-left: auto; white-space: nowrap; }
  /* Landing: dos CTA apilados de anchos distintos. */
  .l-hero .l-acts { display: grid; grid-template-columns: 1fr; }
  .l-hero .l-acts > .l-btn, .l-hero .l-acts > .l-link { width: 100%; justify-content: center; text-align: center; }
  /* FR: «Aujourd'hui» se cortaba en la barra inferior. */
  html[lang^=fr] body.page-app button[data-mv] > span { font-size: 11px; letter-spacing: -.02em; text-overflow: clip; }
}
/* ═══ [Auditoría al milímetro · 27/10] B1–B10 ═══ */
/* B1 · Facturas: la primera regla del panel duplicaba la de las pestañas; «Escribirla a mano» era una banda de 103px. */
html body.page-app #main .tabbar + .subpane, html body.page-app #main .tabbar + * > .subpane:first-child { border-top: 0; padding-top: 4px; }
html body.page-app #main .inv-manual-pane { padding-block: 0; }
html body.page-app #main .inv-manual-pane > summary { padding-block: 14px; }
/* B2 · Ajustes: la caja y su cabecera pintaban dos reglas pegadas; contraseña a ancho útil. */
html body.page-app .set-group > .set-sum { border-top: 0; }
html body.page-app #main .pw-row input[type="password"] { flex: 1 1 260px; min-width: 0; max-width: 360px; min-height: 40px; }
/* B3 · Carta: el antetítulo «Escandallo · local» repetía la pestaña activa. */
html body.page-app #main .tabbar ~ * .esc-despertar > .m-eyebrow, html body.page-app #main .esc-view.esc-despertar > .m-eyebrow { display: none; }
/* B4 · Anillos KPI: etiquetas a dos líneas fijas y equilibradas → las cifras y estados quedan en la misma línea base. */
#main .fam.fin .fin-kr > div { display: flex; flex-direction: column; align-items: center; }
#main .fam.fin .fin-kr b { font-size: 12.5px; min-height: 2.5em; display: flex; align-items: center; justify-content: center; text-wrap: balance; overflow-wrap: normal; }
#main .fam.fin .fin-kr small { font-size: 11px; line-height: 1.35; }
#main .fam.fin .fin-kr small.fin-krs { min-height: 2.7em; text-wrap: balance; }
/* B5 · Micro-tipos: nada por debajo de 11px; gráficos con texto legible al tamaño real (~11–12px). */
#main .fam.fin .fin-cap, #main .fam.fin th, #main .fam.fin .fin-imp small, #main .fam.fin .fin-q small, #main .fam.fin .fin-per-b i { font-size: 11px; }
#main .fam.fin .fin-mline svg text { font-size: 16px; }
#main .fam.fin .fin-kr svg text { font-size: 15px; }
/* B6 · Un solo terracota también en titulares grandes y gráficos (adiós #c9572f). */
html[data-theme="light"] body.page-app { --f-acc-txt: #b54b27; --hy-acc-txt: #b54b27; }
html[data-theme="light"] body.page-app #main .fam.fin .fin-c0 { stroke: #b54b27; background: #b54b27; }
/* B7 · Informe en oscuro: el medidor usaba azul pizarra (#1b1f29/#8f98a8); ahora los tonos cálidos de la app. */
html[data-theme="dark"] body.page-app #main .fam.fin .fin-card.is-dark { --f-ink: #f3ebe1; --f-soft: #b0a596; --f-line: rgba(243, 235, 225, .1); --f-acc-txt: #e07a52;
  background: radial-gradient(90% 70% at 50% 35%, rgba(224, 122, 82, .12), transparent 60%), radial-gradient(120% 100% at 50% 0%, #262019, #17130f 70%); border-color: rgba(243, 235, 225, .1); }
html[data-theme="dark"] body.page-app #main .fam.fin .fin-ticks line.is-on, html[data-theme="dark"] body.page-app #main .fam.fin .fin-g-val { stroke: #e07a52; }
/* B8 · Escandallo: la barra de pestañas mide lo mismo que la hoja que sale del contenedor. */
@media (min-width: 961px) {
  html body.page-app #main .stream.hoja-ancho:has(.hoja.hesc) > .tabbar { width: min(1680px, calc(100vw - 48px)); max-width: none; margin-left: calc(50% - min(840px, 50vw - 24px)); }
}
/* B9 · Estrellas: mismo oro en Reputación que en Hoy. */
html body.page-app .fam-stars i:not(.off), html body.page-app #main .rev-stars, html body.page-app #main .star-on { color: var(--f-star, #a7782a); }
/* B10 · Nombres de plato en tarjetas: sin cortes a mitad de sintagma. */
html body.page-app .hesc .atl-dish b, html body.page-app .hesc .atl-row b { text-wrap: balance; }
/* B11 · Informe en oscuro: las tarjetas seguían crema sobre fondo oscuro. Mismas superficies cálidas que la app. */
html[data-theme="dark"] body.page-app #main .fam.fin {
  --f-acc: #e07a52; --f-acc-txt: #ec8a5f; --f-acc-ink: #1c130d; --f-good: #93b37f; --f-bad: #e2856d; --f-star: #d9a650;
  --f-ink: #f3ebe1; --f-ink2: #d6ccbf; --f-soft: #b0a596; --f-line: rgba(243, 235, 225, .1); --f-edge: rgba(243, 235, 225, .1); --f-glass: #221c16; --f-glass-hi: #2a231c; }
html[data-theme="dark"] body.page-app #main .fam.fin .fin-card, html[data-theme="dark"] body.page-app #main .fam.fin .fin-hero .fin-card {
  --f-ink: #f3ebe1; --f-ink2: #d6ccbf; --f-soft: #b0a596; --f-line: rgba(243, 235, 225, .1); --f-acc-txt: #ec8a5f;
  background: #221c16; border-color: rgba(243, 235, 225, .09); box-shadow: 0 18px 40px -30px rgba(8, 5, 2, .7); }
html[data-theme="dark"] body.page-app #main .fam.fin .fin-live, html[data-theme="dark"] body.page-app #main .fam.fin .fin-per-b,
html[data-theme="dark"] body.page-app #main .fam.fin .fin-btn:not(.is-pri), html[data-theme="dark"] body.page-app #main .fam.fin .fin-seg button[aria-selected="true"] { background: #2a231c; color: var(--f-ink); }
html[data-theme="dark"] body.page-app #main .fam.fin .fin-seg { background: rgba(243, 235, 225, .05); }
html[data-theme="dark"] body.page-app #main .fam.fin svg text[fill="#2a2420"], html[data-theme="dark"] body.page-app #main .fam.fin svg text[fill="#4a4035"] { fill: #d6ccbf; }
html[data-theme="dark"] body.page-app #main .fam.fin svg text[fill="#64594e"] { fill: #b0a596; }
html[data-theme="dark"] body.page-app #main .fam.fin svg [stroke="#eee5d8"], html[data-theme="dark"] body.page-app #main .fam.fin svg [stroke="#e6dccd"] { stroke: rgba(243, 235, 225, .1); }
/* B12 · Consejo del Escandallo en oscuro: tampoco pósit amarillo. */
html[data-theme="dark"] body.page-app .hesc .atl-tip { background: rgba(42, 35, 28, .92); color: #d6ccbf; border: 1px solid rgba(243, 235, 225, .1);
  border-radius: 14px; transform: none; box-shadow: 0 16px 30px -22px rgba(8, 5, 2, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-theme="dark"] body.page-app .hesc .atl-tip b { color: #f3ebe1; }
/* B13 · El 20px del título llegaba por una capa con !important (@layer elite, var --t-20): se ajusta la variable en el propio título. */
html body.page-app #main .account-view .stream-head .hero-titular, html body.page-app #main .esc-despertar > .hero-titular { --t-20: 28px; --t-27: 28px; }
/* B14 · Etiquetas finales de la tendencia: el gráfico se pinta en clave oscura (texto #fff). En claro eran invisibles y se cortaban por la derecha. */
#main .fam.fin .fin-mline svg text[fill="#fff"] { fill: #b54b27; text-anchor: end; }
html[data-theme="dark"] #main .fam.fin .fin-mline svg text[fill="#fff"] { fill: #f3ebe1; }

/* Financial reading order: result, trend, decision, then supporting detail. */
#main #finGrid{grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:32px;align-items:start;grid-auto-flow:row}
#main #finGrid>.fam-fin-summary,#main #finGrid>.fam-fin-categories,#main #finGrid>.fam-fin-detail,#main #finGrid>.fin-gaps{grid-column:1/-1}
#main #finGrid>.fin-mline{grid-column:1;grid-row:auto}
#main #finGrid>.fin-mline,#main #finGrid .fam-fin-detail-body>.fin-card{background:none;border:0;box-shadow:none;padding:0;animation:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#main #finGrid .fam-fin-summary{display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:end;padding:24px 0 32px;border-bottom:1px solid var(--f-line)}
#main #finGrid .fam-fin-result{position:relative}
#main #finGrid .fam-fin-result>.fin-num{display:block;margin-top:12px;font:400 clamp(48px,6vw,76px)/1.06 var(--font-display);letter-spacing:-.04em;color:var(--f-ink)}
/* 29/10 · EL PUENTE. La lista de dos cifras sueltas se va: sus números viven ahora dentro de
   la frase, que dice lo mismo con menos. A su derecha, qué movió el dinero este mes. La barra
   es la proporción del tramo sobre el mayor, no un adorno: se lee de un vistazo quién manda. */
#main #finGrid .fam-fin-frase{margin:14px 0 0;max-width:34ch;font-size:17px;line-height:1.6;color:var(--f-ink2)}
#main #finGrid .fam-fin-frase .fin-num{font-weight:600;color:var(--f-ink);font-variant-numeric:tabular-nums}
#main #finGrid .fam-fin-sub{margin:6px 0 0;font-size:13px;color:var(--f-soft)}
#main #finGrid .fam-fin-sub .fin-num{font-variant-numeric:tabular-nums;color:var(--f-ink2)}
/* 29/10 · La frontera de verdad, donde se lee la cifra y no en el detalle plegado. */
#main #finGrid .fam-fin-base{margin:12px 0 0;max-width:46ch;font-size:11.5px;line-height:1.5;color:var(--f-soft)}
/* Meses de la tendencia: botones de verdad, 44 px de alto, no adornos bajo la curva. */
#main #finGrid .fam-fin-meses{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
#main #finGrid .fam-fin-mes{flex:1 1 72px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:5px 8px;border:1px solid var(--f-line);border-radius:10px;background:transparent;cursor:pointer;transition:border-color .2s,background .2s}
#main #finGrid .fam-fin-mes span{font-size:11px;color:var(--f-soft)}
#main #finGrid .fam-fin-mes b{font-size:12.5px;font-weight:550;color:var(--f-ink2);font-variant-numeric:tabular-nums}
#main #finGrid .fam-fin-mes[aria-pressed="true"]{border-color:var(--f-acc);background:color-mix(in srgb,var(--f-acc) 10%,transparent)}
#main #finGrid .fam-fin-mes[aria-pressed="true"] b{color:var(--f-acc-txt,var(--f-acc))}
@media (hover:hover){#main #finGrid .fam-fin-mes:hover{border-color:var(--f-acc)}}
#main #finGrid .fam-fin-mov{align-self:end;max-width:30ch;justify-self:end}
#main #finGrid .fam-fin-puente{list-style:none;display:grid;gap:14px;margin:12px 0 0;padding:0}
#main #finGrid .fam-fin-puente li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:5px 12px}
#main #finGrid .fam-fin-puente .fp-q{font-size:13.5px;line-height:1.4;color:var(--f-ink2);min-width:0}
#main #finGrid .fam-fin-puente .fp-n{justify-self:end;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
#main #finGrid .fam-fin-puente .fp-b{grid-column:1/-1;height:4px;border-radius:99px;background:var(--f-tint);overflow:hidden}
#main #finGrid .fam-fin-puente .fp-b>i{display:block;height:100%;border-radius:99px}
#main #finGrid .fam-fin-puente .is-mas .fp-n{color:var(--f-good)}
#main #finGrid .fam-fin-puente .is-mas .fp-b>i{background:var(--f-good)}
#main #finGrid .fam-fin-puente .is-menos .fp-n{color:var(--f-bad)}
#main #finGrid .fam-fin-puente .is-menos .fp-b>i{background:var(--f-bad)}
#main #finGrid .fam-fin-fuera{margin:14px 0 0;font-size:11.5px;line-height:1.5;color:var(--f-soft)}
@media(max-width:760px){#main #finGrid .fam-fin-mov{max-width:none;justify-self:stretch;margin-top:22px}
#main #finGrid .fam-fin-frase{max-width:none}}
#main #finGrid .fam-fin-priority>.fin-acts{padding:24px;background:var(--f-glass);border:1px solid var(--f-edge);border-radius:24px;box-shadow:var(--f-shadow)}
#main #finGrid .fam-fin-priority .fin-al2 li{display:block;padding:0;animation:none}
#main #finGrid .fam-fin-priority .fin-imp{display:block;margin:18px 0;font-size:30px}
#main #finGrid .fam-fin-priority .fin-go{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:18px;padding:10px 20px;border-radius:99px;background:var(--f-acc);color:var(--f-acc-ink);text-decoration:none}
#main #finGrid .fam-fin-categories{padding:8px 0 24px}
#main #finGrid .fam-fin-categories header{margin-bottom:20px}
#main #finGrid .fam-fin-categories .fin-crows{display:grid;grid-template-columns:1fr 1fr;gap:12px 48px}
#main #finGrid .fin-crow{min-height:44px}
#main #finGrid .fam-fin-detail{border-top:1px solid var(--f-line);padding:0;min-width:0}
#main #finGrid .fam-fin-detail>summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:18px 0;cursor:pointer;list-style:none;font:400 24px/1.3 var(--font-display);color:var(--f-ink)}
#main #finGrid .fam-fin-detail>summary::-webkit-details-marker{display:none}
#main #finGrid .fam-fin-detail>summary::after{content:'+';position:static;transform:none;color:var(--f-soft)}
#main #finGrid .fam-fin-detail[open]>summary::after{content:'−'}
#main #finGrid .fam-fin-detail-body{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:12px 0 32px;min-width:0}
#main #finGrid .fam-fin-detail-body>.fin-card{grid-column:auto;grid-row:auto;min-width:0}
#main #finGrid .fam-fin-detail-body>:is(.fin-table,.fin-supt,.fin-acts,.fin-trend,.fin-kpis){grid-column:1/-1}
@media(max-width:760px){#main #finGrid{grid-template-columns:minmax(0,1fr);gap:24px}#main #finGrid .fam-fin-summary{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:8px}#main #finGrid .fam-fin-summary dd{font-size:23px}#main #finGrid .fam-fin-categories .fin-crows,#main #finGrid .fam-fin-detail-body{grid-template-columns:minmax(0,1fr)}#main #finGrid .fam-fin-detail>summary{font-size:22px}}#main #finGrid>.fin-mline svg text{font-size:11px}
#main #finGrid>.fam-fin-detail+.fam-fin-detail{margin-top:-32px}
@media(max-width:760px){#main #finGrid>.fin-mline svg text{font-size:14px}#main #finGrid>.fam-fin-detail+.fam-fin-detail{margin-top:-24px}}
#main #finGrid>.fin-mline svg text[fill="#47703a"]{fill:var(--f-good)}
#main #finGrid>.fin-mline svg [stroke="#b54b27"]{stroke:var(--f-acc)}