/* ═══════════════════════════════════════════════════════════════════
   ALPHA FINANCE TOP PICKS  —  market-map/top-picks/top-picks.css
   Usa la base de marketMap.css (layout, switch, pills, barra de índices).
   Aquí: la línea de la edición, los controles y las tarjetas de las picks.
   ═══════════════════════════════════════════════════════════════════ */

.tp-page { gap: 18px; }

/* ── Hero ──────────────────────────────────────────────────────── */
.tp-meta { margin: 14px 0 0; font: 500 13.5px/1.5 'Inter', sans-serif; color: #6b7b80; }
.tp-meta b { color: #16242a; font-weight: 700; }
.tp-meta .tp-dot { margin: 0 7px; color: #b7c4c8; }
.tp-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.tp-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 11.5px 'Inter', sans-serif; color: #285260;
  background: rgba(84, 140, 146, 0.12); padding: 7px 11px; border-radius: 999px;
}
.tp-tag i { font-size: 11px; }

/* ── Controles ─────────────────────────────────────────────────── */
.tp-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 4px; }
.tp-filter {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid rgba(22, 36, 42, 0.10); background: #fff; color: rgba(22, 36, 42, 0.7);
  font: 700 13px 'Inter', sans-serif; padding: 9px 13px; border-radius: 999px;
  transition: background .15s, color .15s;
}
.tp-filter:hover { background: rgba(84, 140, 146, 0.08); }
.tp-filter.is-on { background: #188038; color: #fff; border-color: #188038; }
.tp-filter i { font-size: 12px; }

/* ── Esqueletos ────────────────────────────────────────────────── */
@keyframes tp-shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
.tp-skel { display: inline-block; border-radius: 8px; background: linear-gradient(90deg, #eef2f3 25%, #f7f9f9 50%, #eef2f3 75%); background-size: 800px 100%; animation: tp-shimmer 1.4s linear infinite; }
.tp-skel--line { width: 320px; max-width: 100%; height: 12px; margin: 4px 0; }

/* ── Tarjetas ──────────────────────────────────────────────────── */
.tp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tp-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: linear-gradient(135deg, rgba(84, 140, 146, 0.06), #fff 55%), #fff;
  border: 1px solid rgba(22, 36, 42, 0.09); border-radius: 18px;
  padding: 14px 14px 12px; box-shadow: 0 6px 18px rgba(22, 36, 42, 0.04);
  text-decoration: none; color: inherit; cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tp-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(22, 36, 42, 0.09); border-color: rgba(84, 140, 146, 0.45); }
.tp-card.is-skel { min-height: 210px; background: linear-gradient(90deg, #f4f7f7 25%, #fbfcfc 50%, #f4f7f7 75%); background-size: 800px 100%; animation: tp-shimmer 1.4s linear infinite; pointer-events: none; }
.tp-card__top { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.tp-rank {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 12px 'Inter', sans-serif; color: #16242a; background: #f1f4f5; font-variant-numeric: tabular-nums;
}
.tp-rank.is-top { background: #16242a; color: #fff; }
.tp-card__id { display: flex; flex-direction: column; min-width: 0; gap: 3px; flex: 1; }
.tp-card__row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tp-t { font: 800 14px 'Inter', sans-serif; color: #548C92; background: rgba(84, 140, 146, 0.10); padding: 3px 8px; border-radius: 6px; }
.tp-rating { font: 800 9.5px 'Inter', sans-serif; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.tp-n { font: 600 12.5px 'Inter', sans-serif; color: #16242a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-s { font: 500 11.5px 'Inter', sans-serif; color: #7b8a8f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Aro del Alpha Score (el de los widgets del Home / Portfolio) */
.tp-gauge { position: relative; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tp-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tp-gauge__bg { fill: none; stroke: #eef1f2; stroke-width: 4; }
.tp-gauge__v { fill: none; stroke-width: 4; stroke-linecap: round; }
.tp-gauge b { position: absolute; font: 800 13px 'Inter', sans-serif; color: #16242a; }

.tp-card__price { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.tp-p { font: 800 17px 'Inter', sans-serif; color: #16242a; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tp-c { font: 700 12px 'Inter', sans-serif; padding: 2px 7px; border-radius: 999px; background: #f1f4f5; color: #4c5c62; }
.tp-c.positivo { background: rgba(24, 128, 56, 0.10); color: #188038; }
.tp-c.negativo { background: rgba(217, 48, 37, 0.10); color: #c5221f; }
.tp-card .mm-tk-spark { width: 96px; height: 30px; display: block; margin-left: auto; }

/* Franja del valor intrínseco (como la tarjeta del portafolio) */
.tp-iv {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: 12px; background: rgba(84, 140, 146, 0.06); border: 1px solid rgba(84, 140, 146, 0.18);
  font: 500 12px 'Inter', sans-serif; color: #5c6b70; min-width: 0;
}
.tp-iv b { color: #16242a; font-weight: 800; font-size: 13.5px; margin-left: 3px; font-variant-numeric: tabular-nums; }
.tp-iv i.fa-wand-magic-sparkles { font-size: 10px; color: #548C92; margin-left: 5px; }
.tp-iv__l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-iv--wait .tp-iv__l { color: #8a9aa0; }
.tp-iv--wait .tp-iv__l i { color: #548C92; margin: 0 5px 0 0; animation: tp-pulse 1.4s ease-in-out infinite; }
@keyframes tp-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.tp-open { white-space: nowrap; color: #285260; font-weight: 700; }
.tp-open i { font-size: 10px; margin-left: 2px; }
.tp-verdict { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 700 11.5px 'Inter', sans-serif; white-space: nowrap; }
.tp-verdict em { font-style: normal; font-weight: 600; opacity: .85; }
.tp-verdict--under { background: rgba(24, 128, 56, 0.10); color: #188038; }
.tp-verdict--fair { background: rgba(84, 140, 146, 0.12); color: #3d6b70; }
.tp-verdict--over { background: rgba(217, 48, 37, 0.10); color: #d93025; }

/* Logos (mismo recurso que News) */
.tp-logo {
  position: relative; width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.07);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.tp-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.tp-logo.is-fallback { background: #e8f0f1; border-color: transparent; }
.tp-logo.is-fallback img { display: none; }
.tp-logo.is-fallback::after { content: attr(data-initials); font: 800 13px 'Inter', sans-serif; color: #285260; letter-spacing: -.02em; }

/* ── Vacío / error ─────────────────────────────────────────────── */
.tp-empty { text-align: center; padding: 28px 0; font: 500 13.5px 'Inter', sans-serif; color: #8a9aa0; }
.tp-state {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: #fff; border: 1px solid rgba(22, 36, 42, 0.09); border-radius: 18px; padding: 36px 20px; text-align: center;
}
.tp-state[hidden] { display: none; }
.tp-state i { font-size: 26px; color: #548C92; }
.tp-state p { margin: 0; font: 500 14.5px/1.5 'Inter', sans-serif; color: #3d4b50; max-width: 460px; }
.tp-page.is-empty .tp-tools, .tp-page.is-empty .tp-grid { display: none; }
.tp-note { padding: 0 4px; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1100px) { .tp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tp-grid { grid-template-columns: 1fr; gap: 10px; } .tp-card .mm-tk-spark { width: 80px; } }