/* Gestiontrak · Cuadro financiero (usa también los estilos base de cxc.css) */
.cuadro .cf-subtabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; margin-bottom: 14px; background: var(--surface-2); border-radius: var(--r); }
.cuadro .cf-subtabs button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 6px; padding: 7px 12px; font-weight: 600; font-size: 13px; cursor: pointer; }
.cuadro .cf-subtabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

/* Tabla del cuadro */
.cuadro .cf-caja { max-height: 75vh; }
.cuadro .cf-tabla { border-collapse: separate; border-spacing: 0; font-size: 13px; }
.cuadro .cf-tabla th, .cuadro .cf-tabla td { padding: 5px 10px; border-bottom: 1px solid var(--line); }
.cuadro .cf-tabla thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); white-space: nowrap; }
.cuadro .cf-tabla thead tr.cf-bloques + tr th { top: 29px; }
.cuadro .cf-tabla tbody th, .cuadro .cf-dist tbody th { color: var(--fg); text-transform: none; letter-spacing: 0; font-size: 13px; white-space: normal; }
.cuadro .cf-tabla tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; font-weight: 400; min-width: 240px; max-width: 340px; }
.cuadro .cf-tabla thead th.cf-desc { left: 0; z-index: 3; text-align: left; }
.cuadro .cf-tabla td.m { min-width: 104px; }
.cuadro .cf-b { border-left: 2px solid var(--line); }
.cuadro .cf-tc { font-weight: 600; background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.cuadro th.cf-sd { color: var(--warn); }
.cuadro .cf-tabla thead th { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 12px; font-weight: 700; }
.cuadro tr.cf-sec th { color: var(--accent); background: var(--surface-2); text-transform: uppercase; }
.cuadro .cf-dist tr.cf-sec th { color: var(--accent); background: var(--surface-2); }
.cuadro tr.cf-bloques th { text-align: left; color: var(--accent); font-family: var(--f-display); font-size: 13px; }
.cuadro tr.cf-bloques th:first-child { position: sticky; left: 0; z-index: 3; }
.cuadro tr.cf-sec th { background: var(--surface-2); color: var(--accent); font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .02em; padding-top: 10px; }
.cuadro tr.cf-cta th .enlace { text-align: left; color: var(--fg); text-decoration: none; }
.cuadro tr.cf-cta th .enlace:hover { color: var(--accent); text-decoration: underline; }
.cuadro tr.cf-cta th .chip { margin-left: 4px; }
.cuadro tr.cf-sub th, .cuadro tr.cf-sub td { font-weight: 700; border-top: 1px solid var(--ink); }
.cuadro tr.cf-res th, .cuadro tr.cf-res td { font-weight: 700; background: var(--accent-soft); }
.cuadro tr.cf-res th { background: var(--accent-soft); }
.cuadro tr.cf-final th, .cuadro tr.cf-final td { border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
.cuadro tr.cf-pct th, .cuadro tr.cf-pct td { color: var(--muted); font-size: 12px; font-style: italic; }

.cuadro .cf-aviso { font-size: 13px; color: var(--warn); background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; }
.cuadro .cf-aviso .enlace { color: var(--warn); font-weight: 600; }

/* Movimientos */
.cuadro .cf-movs td { vertical-align: top; }
.cuadro .cf-desc-mov { min-width: 180px; max-width: 300px; }
.cuadro select.cf-sel { max-width: 260px; font-size: 12px; }
.cuadro select.cf-propia { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* Distribución % */
.cuadro .cf-dist th[scope="row"] { font-weight: 400; text-align: left; min-width: 220px; background: var(--surface); border-bottom: 1px solid var(--line); }
.cuadro .cf-dist td { border-bottom: 1px solid var(--line); padding: 4px 8px; }
.cuadro .cf-dist input.cf-pct-in { width: 70px; }
.cuadro .cf-dist tr.cf-sec th { text-align: left; }
.cuadro tr.cf-form td { background: var(--accent-soft); padding: 12px; }
.cuadro .cf-cli-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.cuadro .cf-cli-form input.cf-pct-in { width: 76px; }
.cuadro .cf-cli-form .sec { flex-basis: 100%; }
.cuadro .cf-suma { align-self: center; }

@media (max-width: 720px) {
  .cuadro .cf-tabla tbody th { min-width: 170px; }
  .cuadro .cf-tabla td.m { min-width: 90px; }
}