/* =============================================================================
   PANEL FINANCIERO
   ============================================================================= */

.fi-grid{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:18px; align-items:start; }
.fi-col{ display:flex; flex-direction:column; gap:18px; min-width:0; }

/* --------------------------------------------------------------- cabecera */
.fi-big{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:34px; font-weight:800; line-height:1.05; margin:8px 0 3px;
}
.fi-sub{ font-size:12px; color:var(--mut); }
.fi-sub b{ color:var(--dim); font-weight:600; }

/* barra compuesta cobrado / pendiente */
.fi-compo{ display:flex; height:8px; border-radius:4px; overflow:hidden;
  background:rgba(255,255,255,.06); margin:16px 0 10px; }
.fi-compo i{ height:100%; display:block; }
.fi-leg{ display:flex; flex-wrap:wrap; gap:14px; font-size:11px; color:var(--mut); }
.fi-leg span{ display:flex; align-items:center; gap:6px; }
.fi-leg i{ width:8px; height:8px; border-radius:2px; display:block; }

/* ------------------------------------------------------------ gráfico mes */
.fi-chart{ display:flex; align-items:flex-end; gap:6px; height:150px; margin:6px 0 10px; }
.fi-bar{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; gap:5px; height:100%; cursor:default; }
.fi-bar .b{
  width:100%; border-radius:4px 4px 0 0; background:var(--acc);
  min-height:2px; transition:filter .14s;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.fi-bar:hover .b{ filter:brightness(1.25); }
.fi-bar .b i{ display:block; width:100%; background:var(--green); border-radius:0 0 0 0; }
.fi-bar .lb{ font-size:9px; color:var(--faint); letter-spacing:.3px; text-transform:uppercase;
  white-space:nowrap; }
.fi-bar.destacado .lb{ color:var(--ink); font-weight:700; }

/* -------------------------------------------------------------- comisiones */
.fi-com{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line); }
.fi-com:last-child{ border-bottom:0; }
.fi-com .q{ display:flex; align-items:center; gap:10px; }
.fi-com .av{ width:32px; height:32px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; background:rgba(252,80,0,.2); color:var(--acc); }
.fi-com .av.r{ background:rgba(111,168,245,.18); color:var(--blue); }
.fi-com .nm{ font-size:12.5px; font-weight:700; }
.fi-com .pc{ font-size:10.5px; color:var(--mut); }
.fi-com .v{ font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:16px; font-weight:700; }

/* ------------------------------------------------------------------ tabla */
.fi-tabla{ width:100%; border-collapse:collapse; }
.fi-tabla th{
  text-align:left; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--faint); padding:0 10px 9px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.fi-tabla th.n, .fi-tabla td.n{ text-align:right; }
.fi-tabla td{ padding:10px; border-bottom:1px solid var(--line); font-size:12px; vertical-align:top; }
.fi-tabla tr:last-child td{ border-bottom:0; }
.fi-tabla tbody tr{ cursor:pointer; }
.fi-tabla tbody tr:hover td{ background:rgba(255,255,255,.03); }
.fi-tabla td.n{ font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.fi-tabla .cli{ font-weight:600; }
.fi-tabla .fe{ font-family:var(--mono); font-size:11px; color:var(--mut); }
.fi-tabla .mini{ font-size:10.5px; color:var(--mut); margin-top:2px; }
.fi-wrap{ overflow-x:auto; }
.fi-tot td{ border-top:1px solid var(--line2); border-bottom:0;
  font-weight:700; padding-top:12px; }

.fi-filtros{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.fi-filtros select{
  background:var(--card2); color:var(--ink); border:1px solid var(--line2);
  border-radius:var(--r-sm); padding:8px 11px; font:inherit; font-size:12px;
}
.fi-filtros select:focus{ outline:none; border-color:var(--acc); }

@media (max-width:1080px){
  .fi-grid{ grid-template-columns:1fr; }
  .fi-big{ font-size:27px; }
}