/* Radar de fondos mutuos.
 *
 * Hoja aparte y no dentro de plata.css por una razón práctica: es la única página del
 * sitio con tablas densas de sesenta filas y tres controles simultáneos. Sus clases no le
 * sirven a ninguna otra página, y tenerlas separadas hace que el día que el radar cambie
 * de forma se borre un archivo en vez de buscar líneas sueltas en la hoja común.
 *
 * Todos los colores salen de las variables de plata.css. Acá no se define ninguno propio
 * salvo el verde/rojo de compra y venta, que no existen en la paleta del sitio.
 */

/* El verde y el rojo de compra/venta salen del par --up/--dn de plata.css: es el mismo
   'subio / bajo' que usa el resto del sitio y tiene que cambiar junto con el tema. */
:root { --ffm-sube:var(--ok-tx); --ffm-baja:var(--dn);
        --ffm-sube-bg:var(--ok-bg); --ffm-baja-bg:var(--bad-bg); }

/* ── Controles ──────────────────────────────────────────────────────────── */
.ffm-ctrl {
  display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end;
  margin:16px 0 10px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.ffm-campo { display:flex; flex-direction:column; gap:4px; min-width:0; }
/* Redundante desde que plata.css trae `[hidden]{display:none!important}` para todo el
   sitio, pero se deja: documenta por que hizo falta. `display:flex` le gana al
   `display:none` de la hoja por defecto del navegador, asi que sin una de las dos reglas
   los selectores de accion y de fondo quedan visibles y vacios donde no se usan. */
.ffm-campo[hidden] { display:none; }
.ffm-campo label {
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--tx3); font-weight:700;
}
.ffm-campo select {
  font:inherit; font-size:.86rem; padding:6px 8px; max-width:270px;
  background:var(--surface); color:var(--tx);
  border:1px solid var(--line2); border-radius:8px;
}
.ffm-campo select:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* ── Navegación entre vistas ────────────────────────────────────────────────
   Dos formas del mismo menú, según el espacio que haya:

   · Escritorio: columna a la izquierda, agrupada por lo que contesta cada vista. Once
     pastillas en fila no tienen jerarquía —"Backtest" pesa lo mismo que "Industria"—
     y en dos hileras ni siquiera se ve cuál está activa sin leerlas todas.
   · Teléfono: vuelven a ser pastillas en fila. Una barra lateral ahí se comería el
     ancho que la tabla necesita, y el móvil ya funcionaba bien así. */
.ffm-layout { display:grid; grid-template-columns:216px minmax(0,1fr); gap:26px;
  align-items:start; margin-top:16px; }
/* `min-width:0` no es decorativo: un hijo de grilla arranca en `min-width:auto`, así que
   se estira hasta el ancho mínimo de su contenido. Con una tabla de ocho columnas
   adentro, la columna medía 681 px dentro de un teléfono de 375 y el desborde quedaba
   escondido por el `overflow-x:hidden` del body: invisible, pero ahí. */
.ffm-cuerpo { min-width:0; }
/* La barra queda a la vista mientras se recorre una tabla de sesenta filas: si hay que
   volver arriba para cambiar de vista, se deja de cambiar de vista. */
.ffm-side { position:sticky; top:calc(var(--hdr) + 14px); }
.ffm-tabs { display:flex; flex-direction:column; gap:1px; }
.ffm-grupo-tit { font-size:.64rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--tx3); font-weight:700; margin:14px 0 5px; padding:0 3px; }
.ffm-grupo-tit:first-child { margin-top:0; }
.ffm-tabs button {
  font:inherit; font-size:.87rem; font-weight:500; cursor:pointer; text-align:left;
  padding:7px 10px; border-radius:7px; border:1px solid transparent;
  background:none; color:var(--tx2);
  border-left:3px solid transparent;   /* el mismo grosor activo e inactivo: si no, el
                                          rótulo se corre 3 px al seleccionarlo */
}
.ffm-tabs button:hover { background:var(--hover); color:var(--tx); }
.ffm-tabs button[aria-selected="true"] {
  background:var(--acc-bg); color:var(--accent-d); font-weight:700;
  border-left-color:var(--accent);
}

@media (max-width:1000px) {
  .ffm-layout { grid-template-columns:minmax(0,1fr); gap:0; }
  .ffm-side { position:static; }
  .ffm-grupo-tit { display:none; }
  .ffm-tabs { flex-direction:row; flex-wrap:wrap; gap:6px; margin:0 0 2px; }
  .ffm-tabs button {
    font-weight:600; padding:7px 13px; border-radius:20px; border-left-width:1px;
    background:var(--surface); color:var(--tx2); border-color:var(--line);
  }
  .ffm-tabs button:hover { border-color:var(--accent); color:var(--accent-d); background:var(--surface); }
  .ffm-tabs button[aria-selected="true"] {
    background:var(--accent); border-color:var(--accent); color:#fff;
  }
}

/* ── Tarjetas de cifras ─────────────────────────────────────────────────── */
.ffm-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:14px 0; }
.ffm-kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:11px 13px; }
.ffm-kpi small { display:block; font-size:.72rem; color:var(--tx3); margin-bottom:3px; }
.ffm-kpi b { font-size:1.3rem; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ffm-kpi em { display:block; font-style:normal; font-size:.74rem; color:var(--tx3); margin-top:2px; }

/* ── Tablas ─────────────────────────────────────────────────────────────── */
/* Envoltorio propio: en móvil una tabla de ocho columnas hace scroll dentro de su caja y
   nunca empuja el ancho del body. */
.ffm-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:6px 0 2px; }
table.ffm-t { width:100%; border-collapse:collapse; font-size:.84rem; min-width:520px; }
table.ffm-t th, table.ffm-t td { padding:7px 9px; border-bottom:1px solid var(--line); }
table.ffm-t th {
  text-align:right; white-space:nowrap; background:var(--bg);
  font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--tx3);
}
table.ffm-t th.izq, table.ffm-t td.izq { text-align:left; }
table.ffm-t th[data-orden] { cursor:pointer; user-select:none; }
table.ffm-t th[data-orden]:hover { color:var(--accent-d); }
/* La flecha dice por qué columna y en qué sentido está ordenada la tabla. */
table.ffm-t th.ord-asc, table.ffm-t th.ord-desc { color:var(--accent-d); }
table.ffm-t th.ord-asc::after { content:" ▲"; font-size:.85em; }
table.ffm-t th.ord-desc::after { content:" ▼"; font-size:.85em; }
table.ffm-t td { text-align:right; font-variant-numeric:tabular-nums; }
/* Rayado de filas. Con el marco angosto no hacia falta; a mil y pico de pixeles, una
   fila de cinco columnas deja tanto blanco entre el nombre y las cifras que el ojo se
   cambia de renglon a mitad de camino. */
table.ffm-t tbody tr:nth-child(even) { background:var(--surface2); }
table.ffm-t tbody tr:hover { background:var(--ok-soft); }
table.ffm-t tfoot td { font-weight:700; border-top:2px solid var(--line2); border-bottom:none; }
.ffm-tk { font-weight:700; color:var(--tx); }
.ffm-tk:hover { color:var(--accent-d); }
.ffm-sub { display:block; font-size:.72rem; color:var(--tx3); font-weight:400;
  max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sube { color:var(--ffm-sube); }
.baja { color:var(--ffm-baja); }
.nada { color:var(--tx3); }

/* Barra proporcional dentro de la celda: el ranking se lee sin comparar cifras. */
td.ffm-barra { position:relative; }
td.ffm-barra i {
  position:absolute; left:6px; top:50%; transform:translateY(-50%);
  height:15px; border-radius:3px; background:var(--cap); opacity:.55; z-index:0;
}
td.ffm-barra i.neg { background:var(--dn); opacity:.28; }   /* venta neta, subponderación */
td.ffm-barra span { position:relative; z-index:1; }

/* Etiquetas */
.ffm-tag { display:inline-block; font-size:.62rem; font-weight:700; padding:1px 5px;
  border-radius:4px; background:var(--bg); color:var(--tx3); margin-left:5px;
  vertical-align:middle; border:1px solid var(--line); }
.ffm-tag.ipsa { background:var(--cap); color:var(--cap-tx); border-color:transparent; }
.ffm-tag.off { background:var(--ffm-baja-bg); color:var(--ffm-baja); border-color:transparent; }

/* ── Paneles y gráficos ─────────────────────────────────────────────────── */
.ffm-panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 15px; margin:14px 0; }
.ffm-panel h3 { margin:0 0 2px; font-size:1rem; }
.ffm-panel p.ffm-nota { margin:0 0 10px; font-size:.8rem; color:var(--tx3); }
.ffm-dos { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:760px) { .ffm-dos { grid-template-columns:1fr; } }

.ffm-graf { width:100%; display:block; }
.ffm-graf text { font-size:10px; fill:var(--tx3); font-variant-numeric:tabular-nums; }
.ffm-graf .g { stroke:var(--line); stroke-width:1; }

.ffm-pie { font-size:.76rem; color:var(--tx3); margin:8px 0 0; }
.ffm-vacio { padding:22px; text-align:center; color:var(--tx3); font-size:.86rem; }
.ffm-leyenda { display:flex; gap:14px; flex-wrap:wrap; font-size:.76rem; color:var(--tx3); margin-top:6px; }
.ffm-leyenda i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; }

/* Aviso de que el universo cambió entre dos meses. No es decorativo: es la diferencia
   entre "la industria vendió" y "un fondo dejó de reportar", que en las cifras se ven
   exactamente igual. */
.ffm-aviso {
  margin:14px 0; padding:10px 13px; font-size:.82rem; line-height:1.5;
  background:var(--int); border-radius:var(--radius); color:var(--int-tx);
}
.ffm-aviso b { font-weight:700; }