/* bf-esg-block.css — bloque ESG compartido por la ficha de empresa
   (company_profile) y la ficha de ETF (etf_profile). Prefijo `bf-esg-`.

   Fuente canónica: wordpress/lib/ — copiar a plugins/<plugin>/css/ antes del
   deploy (régimen lib→copia, guardián python/tests/test_lib_copias_sync.py).
   NUNCA editar la copia.

   Un solo patrón para los dos bloques (decisión de Javier, 2026-08-14: manda el
   diseño de la ficha de ETF, adaptado): cabecera con la nota GLOBAL destacada
   —el total nunca es una tarjeta más— y debajo la rejilla de los tres pilares
   E/S/G, cada uno con su barra y la marca de su referencia. Las diferencias
   legítimas entre las dos fichas van por MODIFICADOR sobre esta misma hoja
   (`--company`: letra de rating y puesto en la industria; `--fund`: procedencia
   y cobertura de la cartera), nunca en una segunda hoja: dos hojas es como los
   dos bloques acabaron con dos diseños distintos.

   Esta hoja pone ESTRUCTURA y espaciado. El COLOR semántico del número lo
   siguen poniendo las clases del plugin (`.cpg-pos`/`.cpg-neu`/`.cpg-neg` en la
   ficha de empresa), que son las que conocen sus tokens de contraste WCAG. */

.bf-esg-block {
    --bf-esg-border: #e0e0e0;
    --bf-esg-bg:     #f9f9f9;
    /* Gris de etiquetas: el token del sistema, no la copia congelada — #6c757d
       se queda en 4,45:1 sobre el #f9f9f9 de .bf-esg-head (2026-08-30). */
    --bf-esg-gray:   var(--bf-gray-600, #616970);
    --bf-esg-accent: var(--bf-primary, #026580);
    --bf-esg-track:  #ececec;
    --bf-esg-mark:   #333333;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* `hidden` LOAD-BEARING: el JS del toggle de grupo esconde y enseña la
   referencia cuando el grupo activo no tiene cifra de ese pilar. Explícito y
   con más peso que las reglas de display de abajo. */
.bf-esg-block [hidden] { display: none; }

/* ── Cabecera: la nota global ───────────────────────────────────────────── */
.bf-esg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    border: 1px solid var(--bf-esg-border);
    border-radius: 6px;
    background: var(--bf-esg-bg);
    padding: 12px 14px;
}
.bf-esg-head-main { flex: 1 1 260px; min-width: 0; }
.bf-esg-head-lbl {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--bf-esg-gray);
}
.bf-esg-head-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.bf-esg-head-val { font-size: 2rem; font-weight: 700; line-height: 1.15; }
.bf-esg-head-bench { font-size: .86rem; color: var(--bf-esg-gray); }
/* Procedencia en chips (ficha de ETF): el número grande NUNCA va solo. */
.bf-esg-head-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    font-size: .8rem; margin-top: 6px;
}
/* Procedencia en prosa (ficha de empresa: documento fuente + avisos). */
.bf-esg-head-note { margin-top: 6px; }
.bf-esg-head-note > p { margin: 0; }
.bf-esg-head-note > p + p { margin-top: 3px; }

/* Lado derecho de la cabecera — solo la ficha de empresa (letra + puesto). */
.bf-esg-head-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.bf-esg-badge {
    width: 62px; height: 62px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 700; border: 3px solid currentColor;
}
.bf-esg-side-body {
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0; max-width: 175px; text-align: center;
}

/* ── Rejilla de pilares ─────────────────────────────────────────────────── */
.bf-esg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}
.bf-esg-item {
    border: 1px solid var(--bf-esg-border);
    border-radius: 6px;
    padding: 10px 12px;
}
.bf-esg-lbl {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--bf-esg-gray);
}
.bf-esg-val { font-size: 1.35rem; font-weight: 700; margin: 2px 0 7px; }
.bf-esg-bar {
    position: relative; height: 8px; border-radius: 4px;
    background: var(--bf-esg-track);
}
.bf-esg-fill { display: block; height: 100%; border-radius: 4px; background: var(--bf-esg-accent); }
/* Marca de la referencia (media del grupo / de la clase) sobre la misma barra:
   la comparación se lee sin buscar el número. El `translateX(-50%)` la CENTRA
   en su valor: sin él la marca se dibuja a la derecha del punto que señala y en
   una media de 100 se sale medio carril fuera de la barra. */
.bf-esg-mark {
    position: absolute; top: -3px; width: 2px; height: 14px;
    transform: translateX(-50%);
    background: var(--bf-esg-mark);
}
.bf-esg-benchlbl { font-size: .7rem; color: var(--bf-esg-gray); margin-top: 6px; }
/* Pie del bloque: contra QUÉ se compara y con cuántos (grupo o clase). */
.bf-esg-foot { font-size: .72rem; color: var(--bf-esg-gray); }

@media (max-width: 560px) {
    .bf-esg-head { gap: 10px; }
    .bf-esg-head-side { width: 100%; justify-content: flex-start; }
    .bf-esg-head-val { font-size: 1.7rem; }
    .bf-esg-badge { width: 52px; height: 52px; font-size: 1.25rem; }
}