/* Tu portafolio. Hoja propia, como el radar de fondos: sus clases no le sirven a otra
   página. Todos los colores salen de las variables de plata.css. */

/* ── Gráfico: cartera contra el mismo dinero en el índice ───────────────────
   El SVG se estira con `preserveAspectRatio="none"`, así que la caja de afuera es la
   que manda el alto y el cursor se posiciona en PORCENTAJE, no en píxeles del viewBox. */
.pf-graf { position:relative; }
.pf-graf svg { width:100%; height:300px; display:block; }
.pf-graf-x { position:relative; height:16px; margin-top:2px; }
.pf-graf-x span { position:absolute; transform:translateX(-50%); font-size:.72rem;
  color:var(--tx3); white-space:nowrap; }
.pf-graf-x span:first-child { transform:none; }
.pf-graf-x span:last-child { transform:translateX(-100%); }
.pf-cursor { position:absolute; top:0; bottom:16px; width:1px; background:var(--tx3);
  pointer-events:none; opacity:.6; }

/* ── Tablas ──
   Grilla no, tabla sí: acá las columnas son todas numéricas y alineadas a la derecha,
   que es justo lo que el `td { text-align:right }` global ya hace bien. */
.pf-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:4px 0 2px; }
table.pf-t { width:100%; border-collapse:collapse; font-size:.85rem; min-width:640px; }
table.pf-t th, table.pf-t td { padding:7px 9px; border-bottom:1px solid var(--line); }
table.pf-t th { text-align:right; white-space:nowrap; background:var(--bg);
  font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--tx3); }
table.pf-t th.izq, table.pf-t td.izq { text-align:left; }
table.pf-t td { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.pf-t tbody tr:nth-child(even) { background:var(--surface2); }
table.pf-t tbody tr:hover { background:var(--ok-soft); }
.pf-tk { font-weight:700; color:var(--tx); }
.pf-tk:hover { color:var(--accent-d); }
.pf-cerrada { font-size:.68rem; color:var(--tx3); margin-left:6px; }

.pf-op { font-size:.68rem; font-weight:700; letter-spacing:.04em; padding:2px 7px;
  border-radius:999px; background:var(--neu-bg); color:var(--tx2); }
.pf-op.compra { background:var(--ok-bg); color:var(--ok-tx); }
.pf-op.venta { background:var(--bad-bg); color:var(--bad-tx); }
.pf-op.dividendo { background:var(--info-bg); color:var(--info-tx); }

.pf-borrar { background:none; border:none; color:var(--tx3); cursor:pointer;
  font-size:1.1rem; line-height:1; padding:0 6px; border-radius:5px; font-family:inherit; }
.pf-borrar:hover { color:var(--dn); background:var(--bad-bg); }
.pf-borrar:disabled { opacity:.4; cursor:default; }

/* ── Controles ─────────────────────────────────────────────────────────────── */
.pf-filtros, .pf-tabs { display:flex; gap:6px; margin-left:auto; }
.pf-tabs { margin:0 0 14px; }
.pf-f, .pf-t { font:inherit; font-size:.84rem; font-weight:600; cursor:pointer;
  padding:6px 13px; border-radius:20px; background:var(--surface); color:var(--tx2);
  border:1px solid var(--line); }
.pf-f:hover, .pf-t:hover { border-color:var(--accent); color:var(--accent-d); }
.pf-f.on, .pf-t.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.pf-uso { margin-left:auto; color:var(--tx3); font-size:.8rem; }

.pf-form { background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; }
.pf-fila { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.pf-nombre { color:var(--tx3); font-size:.84rem; }

/* ── Importar ──────────────────────────────────────────────────────────────── */
.pf-csv { background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; }
.pf-guia { margin:0 0 10px; font-size:.88rem; color:var(--tx2); line-height:1.55; }
.pf-guia code, .pf-errores code { background:var(--bg); border:1px solid var(--line);
  border-radius:5px; padding:1px 5px; font-size:.85em; }
.pf-ej summary { cursor:pointer; color:var(--accent-d); font-size:.86rem; }
.pf-ej pre { background:var(--bg); border:1px solid var(--line); border-radius:9px;
  padding:11px 13px; overflow-x:auto; font-size:.8rem; margin:8px 0 0; }
#pfPegar { width:100%; margin-top:10px; font:inherit; font-size:.86rem; padding:10px 12px;
  border:1px solid var(--line2); border-radius:9px; background:var(--bg); color:var(--tx);
  resize:vertical; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
#pfPegar:focus { outline:none; border-color:var(--accent); }

.pf-previa { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.pf-previa p { font-size:.88rem; }
.pf-errores { margin:10px 0 0; padding-left:20px; font-size:.84rem; color:var(--tx2);
  line-height:1.7; }

/* ── Avisos ──
   Tres tonos con tres significados distintos, y no es decoración: `pf-alerta` es
   "revisa esto, puede haber un número malo", `pf-aviso` es contexto, `pf-ok` confirma. */
.pf-alerta { background:var(--warn-bg); color:var(--warn-tx); border-radius:9px;
  padding:10px 13px; font-size:.85rem; line-height:1.55; margin:0 0 12px; }
.pf-aviso { color:var(--tx3); font-size:.78rem; line-height:1.55; margin:8px 0 0; }
/* El interruptor de "guardarlas igual" vive DENTRO del aviso amarillo, no debajo: la
   decisión y el motivo tienen que leerse juntos. Separados, uno ve una casilla suelta y
   no sabe a qué se refiere. */
/* Etiqueta chica al lado de un dato: "asegurado", "parcial", "sin lote". Lleva `title`
   con la explicación completa — la etiqueta sola nombra el estado, no lo justifica. */
.pf-etq { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:99px;
  font-size:.68rem; font-weight:700; letter-spacing:.02em; text-transform:lowercase;
  background:var(--surface2); color:var(--tx3); border:1px solid var(--line);
  vertical-align:middle; cursor:help; }
.pf-etq.ok { background:var(--ok-bg); color:var(--ok-tx); border-color:transparent;
  cursor:default; }

/* Barrita dentro de una celda: da la escala de un vistazo sin robarle ancho al número,
   que sigue siendo el dato. Va ANTES del valor y no lo empuja. */
.pf-barra-mini { display:inline-block; width:38px; height:5px; border-radius:99px;
  background:var(--surface2); margin-right:7px; vertical-align:middle; overflow:hidden; }
.pf-barra-mini i { display:block; height:100%; background:var(--accent); }

.pf-chk { display:inline-flex; align-items:center; gap:7px; margin-top:8px;
  cursor:pointer; font-weight:600; }
.pf-chk input { accent-color:var(--accent); width:15px; height:15px; cursor:pointer; }
.pf-ok { background:var(--ok-bg); color:var(--ok-tx); border-radius:9px;
  padding:10px 13px; font-size:.88rem; font-weight:600; }

.pf-legal { color:var(--tx3); font-size:.78rem; margin-top:16px; line-height:1.6; }
.pf-vaciar { background:none; border:none; color:var(--dn); cursor:pointer;
  text-decoration:underline; font-family:inherit; font-size:inherit; padding:0; }

@media (max-width:760px) {
  .pf-filtros, .pf-tabs { margin-left:0; }
  .pf-graf svg { height:220px; }
}

/* El tooltip del gráfico usa `.chart-tip` del sitio; esto es lo propio de acá: una
   tabla de tres filas con el valor y el porcentaje uno al lado del otro. */
.pf-tip { max-width:330px; }
.pf-tip table { width:100%; font-size:.79rem; }
.pf-tip td { border:none; padding:2px 0; color:var(--tx2); white-space:nowrap; }
.pf-tip td:last-child { text-align:right; color:var(--tx); font-weight:600; padding-left:16px;
  font-variant-numeric:tabular-nums; }
.pf-tip em { font-style:normal; font-weight:600; margin-left:6px; font-size:.95em; }
.pf-tip .pf-tip-dif td { border-top:1px solid var(--line); padding-top:5px; }

/* Rango y escala del gráfico. Pastillas chicas: son un control secundario, el
   protagonista es la curva. */
.pf-graf-ctrl { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 10px; }
.pf-rangos, .pf-modos { display:flex; gap:3px; }
.pf-modos { margin-left:auto; }
.pf-r { font:inherit; font-size:.76rem; font-weight:700; cursor:pointer;
  padding:4px 10px; border-radius:7px; background:none; color:var(--tx3);
  border:1px solid transparent; letter-spacing:.02em; }
.pf-r:hover { color:var(--tx); background:var(--hover); }
.pf-r.on { background:var(--accent); color:#fff; border-color:var(--accent); }

/* Eje vertical. Va sobre el gráfico y no a un costado: el SVG se estira al 100% del
   ancho y reservarle margen obligaría a recalcular el viewBox. */
.pf-graf-y { position:absolute; left:0; top:0; bottom:16px; pointer-events:none; }
.pf-graf-y span { position:absolute; left:0; transform:translateY(-50%);
  font-size:.7rem; color:var(--tx3); background:var(--surface); padding:0 4px;
  font-variant-numeric:tabular-nums; }
.pf-graf-y span:first-child { transform:none; }
.pf-graf-y span:last-child { transform:translateY(-100%); }

@media (max-width:560px) { .pf-modos { margin-left:0; } }
.pf-op.aporte { background:var(--ok-bg); color:var(--ok-tx); }
.pf-op.retiro { background:var(--warn-bg); color:var(--warn-tx); }

/* El historial scrollea dentro de su caja. `max-height` en vez de dejarlo crecer: con
   cuatrocientos movimientos, la pagina se vuelve un tobogan y el pie queda a un
   kilometro. La cabecera se queda arriba mientras uno recorre. */
.pf-movs { max-height:60vh; overflow-y:auto; }
.pf-movs thead th { position:sticky; top:0; z-index:1; background:var(--bg); }

/* ── Sector y liquidez en la tabla de posiciones ──────────────────────────── */
.pf-sec { color:var(--tx3); font-size:.78rem; white-space:nowrap; }
/* Los días para salir sólo se destacan cuando pasan el umbral. Pintar la columna
   entera de colores convierte un dato en decoración y deja de avisar nada. */
.pf-iliq { color:var(--warn-tx); background:var(--warn-bg); border-radius:5px;
  padding:1px 6px; font-weight:700; }

/* ── Quién hizo el resultado ──
   Barras y no una tabla: la comparación entre papeles es la información, y comparar
   diez números en una columna obliga a leerlos de a uno. */
.pf-barras { display:flex; flex-direction:column; gap:3px; margin-top:4px; }
.pf-barra-f { display:grid; grid-template-columns:96px 1fr 110px 62px; gap:10px;
  align-items:center; padding:3px 0; font-size:.85rem; }
.pf-barra-f .pf-tk { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-barra-caja { background:var(--bg); border-radius:4px; height:16px; overflow:hidden; }
.pf-barra-caja i { display:block; height:100%; background:var(--up); border-radius:4px; }
.pf-barra-caja i.neg { background:var(--dn); }
.pf-barra-f b { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.pf-barra-r { text-align:right; font-size:.79rem; font-variant-numeric:tabular-nums; }

/* ── En qué estás metido ──
   Una cinta y no una torta: comparar ángulos es más difícil que comparar largos, y en
   el teléfono una torta con seis tajadas no se lee. */
.pf-cinta { display:flex; height:26px; border-radius:7px; overflow:hidden;
  background:var(--bg); margin:2px 0 12px; }
.pf-cinta-t { height:100%; }
/* GRID Y NO flex-wrap: con el monto en su propia línea, el wrap dejaba los items a
   distinta altura y saltados. En columnas quedan alineados y el ojo compara hacia abajo. */
.pf-leyenda { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:10px 18px; font-size:.84rem; color:var(--tx2); }
.pf-leyenda-i { display:flex; align-items:flex-start; gap:6px; min-width:0; }
.pf-leyenda-i i { width:11px; height:11px; border-radius:3px; flex:none; margin-top:3px; }
.pf-leyenda-tx { display:flex; flex-direction:column; min-width:0; line-height:1.35; }
/* El nombre de un sector puede ser largo ("Consumo discrecional") y no debe empujar la
   columna: corta con puntos suspensivos, que el ancho lo manda el grid. */
.pf-leyenda-n { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-leyenda-i b { color:var(--tx); font-variant-numeric:tabular-nums; }
.pf-leyenda-i em { font-style:normal; color:var(--tx3); font-size:.92em;
  font-variant-numeric:tabular-nums; }

/* Seis colores y vuelta a empezar. Van por `data-i` y no por nombre de sector: los
   sectores los manda la fuente de datos y una lista de colores por nombre se
   desactualiza en silencio el día que aparece uno nuevo (queda transparente). */
.pf-cinta-t[data-i="0"], .pf-leyenda-i i[data-i="0"] { background:var(--accent); }
.pf-cinta-t[data-i="1"], .pf-leyenda-i i[data-i="1"] { background:#5b8def; }
.pf-cinta-t[data-i="2"], .pf-leyenda-i i[data-i="2"] { background:#e0a53d; }
.pf-cinta-t[data-i="3"], .pf-leyenda-i i[data-i="3"] { background:#9b6bd6; }
.pf-cinta-t[data-i="4"], .pf-leyenda-i i[data-i="4"] { background:#4bb3a8; }
.pf-cinta-t[data-i="5"], .pf-leyenda-i i[data-i="5"] { background:#d4707a; }

@media (max-width:620px) {
  .pf-barra-f { grid-template-columns:76px 1fr 92px; gap:8px; font-size:.8rem; }
  .pf-barra-r { display:none; }
}

/* El split no es plata: no va ni en verde ni en rojo. */
.pf-op.split { background:var(--info-bg); color:var(--info-tx); }

/* El plegado de la contribucion. El boton dice cuanto suma lo escondido, asi que ocupa
   toda la fila y se lee como parte de la lista, no como un control suelto. */
.pf-barra-mas { padding:5px 0 2px; }
.pf-barra-mas .pf-r { width:100%; text-align:left; font-weight:600; font-size:.78rem;
  border:1px dashed var(--line2); }
.pf-barra-mas .pf-r:hover { border-style:solid; }

/* ── Qué dice el análisis ─────────────────────────────────────────────────── */
/* La recomendación es la única columna con color propio: es la que uno busca. Los
   cuatro tonos son los mismos del resto del sitio, no una paleta nueva. */
.pf-rec { font-size:.7rem; font-weight:700; letter-spacing:.04em; padding:2px 8px;
  border-radius:999px; background:var(--neu-bg); color:var(--tx2); white-space:nowrap; }
.pf-rec.compra { background:var(--ok-bg); color:var(--ok-tx); }
.pf-rec.mantener { background:var(--info-bg); color:var(--info-tx); }
.pf-rec.reducir { background:var(--warn-bg); color:var(--warn-tx); }
.pf-rec.vender { background:var(--bad-bg); color:var(--bad-tx); }

/* "Vencido" tiene que verse SIN buscarlo: una recomendación de un informe cuya ventana
   cerró es justo la que alguien usa creyendo que es de hoy. */
.pf-vencido { font-size:.66rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; padding:1px 6px; border-radius:5px;
  background:var(--warn-bg); color:var(--warn-tx); margin-left:5px; }

.pf-rompe { margin:10px 0 0; }
.pf-rompe summary { cursor:pointer; color:var(--accent-d); font-size:.86rem;
  font-weight:600; }
.pf-rompe p { margin:9px 0 0; font-size:.85rem; color:var(--tx2); line-height:1.6;
  padding-left:12px; border-left:2px solid var(--line); }
.pf-rompe p b { color:var(--tx); }

/* ── Artículo 107 ─────────────────────────────────────────────────────────── */
.pf-tasa { margin-left:auto; display:flex; align-items:center; gap:7px;
  font-size:.8rem; color:var(--tx3); }
.pf-tasa select { font:inherit; font-size:.82rem; padding:3px 8px; border-radius:7px;
  border:1px solid var(--line2); background:var(--surface); color:var(--tx); }

/* Tres estados y no dos. "Cerca del corte" y "sólo por market maker" no son "cumple":
   son un beneficio que puede no estar el día que uno venda, y eso se decide antes. */
.pf-liq { font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:999px;
  background:var(--ok-bg); color:var(--ok-tx); white-space:nowrap; }
.pf-liq.pf-ojo { background:var(--warn-bg); color:var(--warn-tx); }
.pf-liq.pf-no { background:var(--bad-bg); color:var(--bad-tx); }

.pf-trib-res { display:flex; flex-wrap:wrap; gap:6px 22px; margin:12px 0 0;
  font-size:.88rem; color:var(--tx2); }
.pf-trib-res b { color:var(--tx); }

@media (max-width:620px) { .pf-tasa { margin-left:0; } }

/* ── La peor caída y los controladores ───────────────────────────────────── */
.pf-caida { margin:8px 0 0; font-size:.88rem; color:var(--tx2); }
.pf-caida b { color:var(--tx); }
.pf-duenos { font-size:.78rem; color:var(--tx2); line-height:1.5;
  max-width:420px; white-space:normal; }
.pf-duenos em { font-style:normal; color:var(--tx3); }

/* ── Rentabilidad por período ──
   Tarjetas y no una tabla: son cuatro celdas de tres datos cada una, y una tabla de 4x4
   con encabezados ocupa el doble para decir lo mismo. */
.pf-per { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; }
.pf-per-c { flex:1 1 150px; background:var(--bg); border:1px solid var(--line);
  border-radius:9px; padding:8px 11px; display:flex; flex-direction:column; gap:1px; }
.pf-per-c.parcial { border-style:dashed; }
.pf-per-t { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--tx3); }
.pf-per-t em { font-style:normal; text-transform:none; letter-spacing:0;
  color:var(--warn-tx); background:var(--warn-bg); border-radius:4px; padding:0 5px;
  cursor:help; }
.pf-per-c b { font-size:1.12rem; font-variant-numeric:tabular-nums; }
.pf-per-i { font-size:.74rem; color:var(--tx3); font-variant-numeric:tabular-nums; }
.pf-per-d { font-size:.76rem; font-weight:700; font-variant-numeric:tabular-nums; }

/* ── El prompt para armar el CSV con una IA ───────────────────────────────── */
/* Es un bloque de lectura, no de datos: ancho cómodo y el texto del prompt en un `pre`
   que se puede copiar de un botón. El `pre` va con `white-space:pre-wrap` porque el
   prompt tiene líneas largas y en el teléfono un scroll horizontal dentro de un details
   plegado es imposible de descubrir. */
.pf-prompt-guia { font-size:.88rem; color:var(--tx2); }
.pf-prompt-guia ul { margin:.3rem 0 .7rem 1.1rem; padding:0; }
.pf-prompt-guia li { margin:.2rem 0; }
.pf-prompt-guia pre { white-space:pre-wrap; word-break:break-word; max-height:320px;
  overflow-y:auto; background:var(--bg); border:1px solid var(--line2);
  border-radius:8px; padding:10px 12px; font-size:.78rem; line-height:1.45; }
.pf-nota-prompt { margin-top:.6rem; font-size:.82rem; color:var(--tx3); }

/* ── Dividendos sugeridos ─────────────────────────────────────────────────── */
/* Una tabla y no tarjetas: son filas homogéneas que se comparan por monto, y hay que
   poder marcar y desmarcar rápido. El check de la cabecera marca todas. */
.pf-div-tbl { width:100%; border-collapse:collapse; font-size:.86rem; }
.pf-div-tbl th { text-align:left; font-weight:600; opacity:.65; padding:.35rem .5rem;
  border-bottom:1px solid var(--line); }
.pf-div-tbl td { padding:.35rem .5rem; border-bottom:1px solid var(--line); }
.pf-div-tbl .der { text-align:right; font-variant-numeric:tabular-nums; }
.pf-div-tbl tr:hover td { background:var(--surface2); }
.pf-div-t { color:var(--tx3); font-size:.8rem; }
.pf-div-pie { margin-top:10px; }