/* ============================================
   LA BRÚJULA — Ficha de ETF
   ============================================
   Una acción se resume en cuatro precios; un ETF no. Dos personas de
   acuerdo en la idea acaban con resultados distintos según el vehículo
   que elijan, así que la ficha cuenta también qué ES el fondo, qué
   LLEVA dentro y por qué ése y no los otros de la mesa.
   ============================================ */

/* ── Tira de identidad ─────────────────────── */

.etf-identity {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.etf-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

.etf-chip b {
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: 10px;
}

/* ── Bloques ───────────────────────────────── */

.etf-block {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--glass-bg);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
}

.etf-block-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
}

.etf-block-title svg {
  width: 14px;
  height: 14px;
  color: var(--insight-color, var(--accent-primary));
}

/* ── Qué lleva dentro ──────────────────────── */

.etf-holdings {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.etf-holding {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 46px;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.etf-holding-name {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.etf-holding-bar {
  display: block;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.etf-holding-bar i {
  display: block;
  height: 100%;
  background: var(--insight-color, var(--accent-primary));
  border-radius: var(--radius-full);
}

.etf-holding-pct {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-primary);
  text-align: right;
}

/* ── Por qué éste y no los otros ───────────── */
/* El bloque diferencial: casi nadie publica el descarte razonado.     */

.etf-block-why {
  border-left: 3px solid var(--insight-color, var(--accent-primary));
}

.etf-alt + .etf-alt {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-primary);
}

.etf-alt-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.etf-alt-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

.etf-alt-meta {
  padding: 1px var(--space-2);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
}

.etf-alt-why {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-tertiary);
}

/* ── El peaje del contango ─────────────────── */

.etf-roll {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--warning-soft);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.etf-roll svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--warning);
}

@media (max-width: 560px) {
  .etf-holding {
    grid-template-columns: minmax(0, 1fr) 52px 44px;
    gap: var(--space-2);
  }
}