/* congress_trading — estilos (compact home + página /congress-trading/).
 * Depende de los tokens --bf-* que sirve el theme (design-system.md);
 * fallbacks locales por si el shortcode se usa fuera del theme. Sin
 * font-family propio: el theme sirve Roboto y el plugin la hereda.
 *
 * Task 8: vista compact (últimos movimientos) — cabecera de una fila y
 * tabla de 8 filas. El CSS de filtros/panel resumen/ficha de político
 * (vista full) llega en T9-T11.
 */

.bfct-wrap {
    --bfct-accent:   var(--bf-primary, #026580);
    --bfct-bg:       var(--bf-gray-100, #f9f9f9);
    --bfct-panel-bg: var(--bf-white, #ffffff);
    --bfct-border:   var(--bf-gray-300, #ddd);
    --bfct-radius:   var(--bf-radius, 8px);
    --bfct-shadow:   var(--bf-shadow, 0 4px 12px rgba(0, 0, 0, 0.08));
    --bfct-positive: var(--bf-buy, #27AE60);
    --bfct-negative: var(--bf-sell, #E74C3C);
    --bfct-neutral:  var(--bf-gray-600, #6c757d);
    padding:       20px;
    border-radius: var(--bfct-radius);
    border:        1px solid var(--bfct-border);
    background:    var(--bfct-bg);
    box-shadow:    var(--bfct-shadow);
    box-sizing:    border-box;
    max-width:     100%;
    position:      relative;
    margin-bottom: 20px;
}

/* [hidden] vencido por display de autor (gotcha del patrón herramienta,
 * tool-plugin-pattern.md §8) — sin toggles todavía en T8, pero cualquier
 * futuro spinner/panel condicional respeta esto desde ya. */
.bfct-wrap [hidden] { display: none !important; }

.bfct-placeholder {
    margin: 0;
    color:  var(--bfct-neutral);
}

/* La cabecera del compact la pinta el slot estándar del theme
   (.bft-slot-head) — sin cabecera propia (feedback Javier 2026-07-20). */

/* ── Tabla de movimientos ─────────────────────────────────────────────── */
.bfct-table-scroll { overflow-x: auto; }

.bfct-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.8rem;
}
.bfct-table th,
.bfct-table td {
    padding:     6px 8px;
    text-align:  left;
    white-space: nowrap;
}
.bfct-table thead th {
    font-size:      0.66rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color:          var(--bfct-neutral);
    border-bottom:  1px solid var(--bfct-border);
}
.bfct-table tbody td { border-bottom: 1px solid var(--bfct-border); }
.bfct-table tbody tr:last-child td { border-bottom: none; }
.bfct-table tbody tr:hover { background: var(--bf-primary-10, rgba(2, 101, 128, 0.08)); }

.bfct-td-date  { color: var(--bfct-neutral); }
.bfct-td-amount { font-variant-numeric: tabular-nums; }

.bfct-logo {
    width:         18px;
    height:        18px;
    border-radius: 3px;
    object-fit:    contain;
    vertical-align: middle;
    margin-right:  4px;
}
.bfct-company-link {
    color:           inherit;
    text-decoration: none;
}
.bfct-company-link:hover,
.bfct-company-link:focus-visible { text-decoration: underline; }

.bfct-state {
    margin-left: 4px;
    color:       var(--bfct-neutral);
    font-size:   0.72rem;
}

/* ── Chip de partido: R rojo / D azul / I gris / — neutro ───────────────── */
.bfct-chip {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       17px;
    height:          17px;
    padding:         0 5px;
    margin-left:     4px;
    border-radius:   9px;
    font-size:       0.65rem;
    font-weight:     700;
    line-height:     1;
    color:           var(--bf-white, #fff);
    vertical-align:  middle;
}
.bfct-chip-rep  { background: var(--bfct-negative); }
.bfct-chip-dem  { background: var(--bfct-accent); }
.bfct-chip-ind  { background: var(--bf-gray-600, #555); }
.bfct-chip-none {
    background: var(--bf-gray-300, #ddd);
    color:      var(--bfct-neutral);
}

@media (max-width: 600px) {
    .bfct-table { font-size: 0.74rem; }
    .bfct-table th,
    .bfct-table td { padding: 5px 6px; }
}

/* ── Vista FULL (T9): formulario de filtros GET ─────────────────────────── */
.bfct-filters {
    display:       flex;
    flex-direction: column;
    gap:           8px;
    margin-bottom: 14px;
}
.bfct-filter-row {
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px;
    align-items: center;
}
.bfct-select {
    padding:       7px 8px;
    border:        1px solid var(--bfct-border);
    border-radius: 4px;
    font-size:     0.8rem;
    font-family:   inherit;
    background:    var(--bfct-panel-bg);
    color:         var(--bf-black-soft, #333);
    max-width:     200px;
}
.bfct-select:disabled { opacity: 0.5; cursor: not-allowed; }
.bfct-select-member   { max-width: 260px; }

.bfct-apply {
    padding:       7px 16px;
    border:        1px solid var(--bfct-accent);
    border-radius: 4px;
    background:    var(--bfct-accent);
    color:         var(--bf-white, #fff);
    font-size:     0.8rem;
    font-weight:   600;
    font-family:   inherit;
    cursor:        pointer;
}
.bfct-apply:hover { opacity: 0.9; }

.bfct-reset {
    font-size:       0.8rem;
    color:           var(--bfct-neutral);
    text-decoration: none;
}
.bfct-reset:hover,
.bfct-reset:focus-visible { text-decoration: underline; }

.bfct-meta {
    font-size:     0.75rem;
    color:         var(--bfct-neutral);
    margin-bottom: 8px;
}

.bfct-empty {
    margin:     0;
    padding:    18px 8px;
    text-align: center;
    color:      var(--bfct-neutral);
    font-size:  0.85rem;
}

.bfct-error {
    padding:       14px;
    border:        1px solid var(--bfct-border);
    border-radius: var(--bfct-radius);
    color:         var(--bfct-neutral);
    font-size:     0.85rem;
}

/* ── Tabla full: columnas propias + orden ────────────────────────────────── */
.bfct-td-sector { color: var(--bf-black-soft, #333); }
.bfct-td-link   { text-align: center; }
.bfct-td-link a { color: var(--bfct-accent); text-decoration: none; }
.bfct-td-link a:hover,
.bfct-td-link a:focus-visible { text-decoration: underline; }

.bfct-pos { color: var(--bfct-positive); font-weight: 600; }
.bfct-neg { color: var(--bfct-negative); font-weight: 600; }

.bfct-sortable a {
    color:           inherit;
    text-decoration: none;
}
.bfct-sortable a:hover,
.bfct-sortable a:focus-visible { text-decoration: underline; }
.bfct-sorted { color: var(--bfct-accent); }

/* ── Paginación ───────────────────────────────────────────────────────── */
.bfct-pager {
    display:         flex;
    justify-content: space-between;
    gap:             12px;
    margin-top:      12px;
    font-size:       0.82rem;
}
.bfct-pager-link {
    padding:         6px 14px;
    border:          1px solid var(--bfct-border);
    border-radius:   4px;
    background:      var(--bfct-panel-bg);
    color:           var(--bfct-accent);
    text-decoration: none;
    font-weight:     600;
}
.bfct-pager-link:hover,
.bfct-pager-link:focus-visible { background: var(--bf-primary-10, rgba(2, 101, 128, 0.08)); }

@media (max-width: 600px) {
    .bfct-select        { max-width: 100%; flex: 1 1 100%; }
    .bfct-select-member { max-width: 100%; }
}

/* ── Panel resumen / ficha de político (T10) — sin Chart.js (D5) ────────── */
.bfct-summary { margin-bottom: 16px; }

.bfct-summary-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap:                   12px;
}

.bfct-card {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    padding:        14px;
    background:     var(--bfct-panel-bg);
    border:         1px solid var(--bfct-border);
    border-radius:  var(--bfct-radius);
}

.bfct-card-label {
    font-size:      0.7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color:          var(--bfct-neutral);
}

.bfct-card-value {
    font-size:            1.6rem;
    font-weight:          700;
    color:                var(--bf-black-soft, #333);
    font-variant-numeric: tabular-nums;
}

/* Barras compra/venta proporcionales — width:% calculado en PHP (bfct_bar_width) */
.bfct-bar-row {
    display:               grid;
    grid-template-columns: 62px 1fr 68px;
    align-items:           center;
    gap:                   8px;
}
.bfct-bar-row + .bfct-bar-row { margin-top: 4px; }
.bfct-bar-label {
    font-size: 0.72rem;
    color:     var(--bfct-neutral);
}
.bfct-bar-track {
    height:        8px;
    border-radius: 4px;
    background:    var(--bf-gray-200, #eee);
    overflow:      hidden;
}
.bfct-bar-fill  { height: 100%; border-radius: 4px; }
.bfct-bar-buy   { background: var(--bfct-positive); }
.bfct-bar-sell  { background: var(--bfct-negative); }
.bfct-bar-value {
    font-size:            0.75rem;
    font-weight:          600;
    font-variant-numeric: tabular-nums;
    text-align:           right;
}

.bfct-top-list {
    margin:         0;
    padding:        0;
    list-style:     none;
    display:        flex;
    flex-direction: column;
    gap:            6px;
}
.bfct-top-list li {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   0.8rem;
}
.bfct-top-name {
    flex:          1 1 auto;
    min-width:     0;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    color:         var(--bf-black-soft, #333);
}
.bfct-top-value {
    flex:                 0 0 auto;
    font-weight:          600;
    font-variant-numeric: tabular-nums;
    color:                var(--bf-black-soft, #333);
}

/* ── Ficha de político (D6, spec §5.3) ───────────────────────────────────── */
.bfct-member-card {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    padding:        16px;
    background:     var(--bfct-panel-bg);
    border:         1px solid var(--bfct-border);
    border-radius:  var(--bfct-radius);
}
.bfct-card-head {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}
.bfct-card-name {
    margin:      0;
    font-size:   1.25rem;
    font-weight: 700;
    color:       var(--bf-black-soft, #333);
}
.bfct-card-meta {
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
    font-size: 0.8rem;
    color:     var(--bfct-neutral);
}
.bfct-card-bars {
    display:        flex;
    flex-direction: column;
    max-width:      420px;
}
.bfct-card-sectors { display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 600px) {
    .bfct-summary-grid { grid-template-columns: 1fr; }
    .bfct-bar-row       { grid-template-columns: 54px 1fr 60px; }
    .bfct-card-bars     { max-width: 100%; }
}

/* ── Watermark de marca — SOLO CSS, SOLO vista full (T11). Sin Chart.js
 * (D5), así que aplica el idiom "paneles HTML sin canvas" (plugin-ui-
 * standards.md §2, mismo patrón que .mcal-panel::before / .cpg-chart-wm-host
 * de market_calendar/market_risk_premium): logo de fondo vía ::before sobre
 * TODO el bloque full, contenido elevado con z-index. .bfct-wrap ya es
 * position:relative — .bfct-full es el mismo elemento, no un hijo nuevo. */
.bfct-full::before {
    content:        '';
    position:       absolute;
    inset:          0;
    pointer-events: none;
    background:     url('../iconos/bf_logo.webp') no-repeat center / 42%;
    opacity:        0.07;
    z-index:        0;
}
.bfct-full > * { position: relative; z-index: 1; }