/* etf/etf.css — Página de un ETF. La base (encabezado, buscador, footer, barra del celular) viene de
   stock/overview/profile.css + site-header.css; aquí solo el contenido, con la misma paleta y
   tarjetas que Summary (blanco, borde suave, radio 18px, Inter, verde/rojo del sitio). */

:root {
  --etf-ink: #16242a;
  --etf-muted: #7b8a8f;
  --etf-line: rgba(22, 36, 42, 0.09);
  --etf-teal: #285260;
  --etf-teal-2: #548C92;
  --etf-teal-soft: #e8f0f1;
  --etf-pos: #188038;
  --etf-neg: #d93025;
}

/* ── pestañas: son saltos a secciones, sin las 8 de la acción ── */
.paginas.etfTabs { justify-content: flex-start; }
.paginas.etfTabs .elementoNav { flex: 0 1 160px; }
.paginas.etfTabs .elementoNav[aria-current="page"] h3 { color: #fff; }

/* ── contenido ── */
.contenido.etfMain {
  display: block;
  width: 92%;
  max-width: 1240px;
  margin-top: 180px;
  padding-bottom: 40px;
  font-family: 'Inter', sans-serif;
  color: var(--etf-ink);
}
.etfMain .etfIdentidad { margin-bottom: 22px !important; }
.etfMain .etfMark {
  color: var(--etf-teal) !important;
  background: var(--etf-teal-soft) !important;
  border-color: transparent !important;
  font-size: 20px;
}

.etfMain .etfMark.etfMark--logo { background: #fff !important; border-color: rgba(22, 36, 42, 0.09) !important; }
.etfState { padding: 60px 0; text-align: center; color: var(--etf-muted); font-size: 15px; }
.etfState--error { color: var(--etf-neg); }

.etfSec { scroll-margin-top: 240px; margin-bottom: 18px; }
.etfGrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.etfGrid--hero { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.etfGrid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.etfGrid > [hidden] { display: none; }

.etfCard {
  background: #fff;
  border: 1px solid var(--etf-line);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(22, 36, 42, 0.04);
  padding: 18px 20px;
  min-width: 0;
}
.etfCard[hidden] { display: none; }
.etfCardHead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.etfCardHead .etfCardTitle { margin-bottom: 0; }
.etfCardTitle { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 12px; }
.etfCardNote { font-size: 12px; color: var(--etf-muted); font-weight: 500; margin: -6px 0 12px; }
.etfCardHead .etfCardNote { margin: 0; }
.etfEmpty { color: var(--etf-muted); font-size: 13px; padding: 6px 0; }
.pos { color: var(--etf-pos); }
.neg { color: var(--etf-neg); }
.neutro { color: var(--etf-muted); }

/* ── gráfica ── */
.etfChartHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.etfKicker { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--etf-muted); font-weight: 600; }
.etfChip { font-size: 10px; font-weight: 800; letter-spacing: 0.05em; color: var(--etf-teal); background: #dcebec; padding: 3px 7px; border-radius: 999px; }
.etfRangeChange { margin-top: 6px; font-size: 15px; font-weight: 700; }
.etfRangeChange__l { color: var(--etf-muted); font-weight: 500; font-size: 13px; }
.etfRanges { display: flex; gap: 2px; flex-wrap: wrap; }
.etfRanges button {
  border: 0; background: transparent; cursor: pointer;
  font: 600 12px/1 'Inter', sans-serif; color: var(--etf-muted);
  padding: 7px 11px; border-radius: 999px; transition: background .15s, color .15s;
}
.etfRanges button:hover { background: #f1f4f5; color: var(--etf-ink); }
.etfRanges button.on { background: var(--etf-ink); color: #fff; }
.etfChartBox { position: relative; height: 320px; }
.etfChartMsg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--etf-muted); font-size: 13px; background: rgba(255, 255, 255, 0.6); }
.etfChartMsg[hidden] { display: none; }

/* ── datos clave ── */
.etfFacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.etfFact { background: #f6f8f8; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.etfFact__l { font-size: 11.5px; color: var(--etf-muted); font-weight: 600; }
.etfFact__v { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etfFact__s { font-size: 11.5px; color: var(--etf-muted); line-height: 1.3; }

/* ── posiciones ── */
.etfHoldings { display: flex; flex-direction: column; }
.etfHold {
  display: grid; grid-template-columns: 22px 34px minmax(0, 1.6fr) minmax(0, 1fr) 150px 14px;
  align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid #f0f2f3;
  color: var(--etf-ink); text-decoration: none; border-radius: 10px;
}
.etfHold:last-child { border-bottom: 0; }
a.etfHold:hover { background: #f6f8f8; }
.etfHold__n { font-size: 12px; color: var(--etf-muted); font-weight: 600; text-align: right; }
.etfHold__logo { width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(0, 0, 0, .07); background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.etfHold__logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.etfHold__logo.sin { background: var(--etf-teal-soft); border-color: transparent; }
.etfHold__logo.sin::after { content: attr(data-i); font: 800 11px Inter, sans-serif; color: var(--etf-teal); }
.etfHold__txt { display: flex; flex-direction: column; min-width: 0; }
.etfHold__txt b { font-size: 13.5px; font-weight: 800; }
.etfHold__txt span { font-size: 12px; color: var(--etf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etfHold__sec { font-size: 12px; color: var(--etf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etfHold__w { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; justify-content: flex-end; }
.etfHold__bar { flex: 1; height: 6px; background: #eef2f3; border-radius: 3px; overflow: hidden; }
.etfHold__bar i { display: block; height: 100%; background: var(--etf-teal-2); border-radius: 3px; }
.etfHold__go { font-size: 11px; color: #b5c0c3; }

/* ── barras (sectores, activos, tamaño, regiones) ── */
.etfBars { display: flex; flex-direction: column; gap: 9px; }
.etfBar { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 52px; align-items: center; gap: 10px; font-size: 13px; }
.etfBar__k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etfBar__track { height: 8px; background: #eef2f3; border-radius: 4px; overflow: hidden; }
.etfBar__track i { display: block; height: 100%; background: var(--etf-teal-2); border-radius: 4px; }
.etfBar__v { text-align: right; font-weight: 700; }

/* ── mini datos (bonos, valuación, riesgo) ── */
.etfMini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.etfMini__i { background: #f6f8f8; border-radius: 12px; padding: 11px 13px; display: flex; flex-direction: column; gap: 2px; }
.etfMini__l { font-size: 11.5px; color: var(--etf-muted); font-weight: 600; }
.etfMini__v { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.etfMini__s { font-size: 11.5px; color: var(--etf-muted); line-height: 1.3; }

/* ── rendimiento ── */
.etfPerfWrap { overflow-x: auto; }
.etfPerf { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 480px; }
.etfPerf th, .etfPerf td { padding: 10px 8px; text-align: right; border-bottom: 1px solid #f0f2f3; white-space: nowrap; }
.etfPerf thead th { font-size: 12px; color: var(--etf-muted); font-weight: 600; }
.etfPerf tbody th { text-align: left; font-weight: 700; }
.etfPerf tbody th small { color: var(--etf-muted); font-weight: 500; }
.etfPerf td { font-weight: 700; }
.etfPerf .etfPerf__main th { font-weight: 800; }
.etfPerf .etfPerf__diff th, .etfPerf .etfPerf__diff td { border-bottom: 0; font-size: 12.5px; }
.etfPerf .etfPerf__diff th { color: var(--etf-muted); font-weight: 600; }

/* ── about ── */
.etfDesc { font-size: 14px; line-height: 1.65; color: #34474e; margin-bottom: 14px; }
.etfAboutMeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.etfAboutMeta div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.etfAboutMeta span { font-size: 11.5px; color: var(--etf-muted); font-weight: 600; }
.etfAboutMeta a { color: var(--etf-teal); text-decoration: none; }
.etfAboutMeta a:hover { text-decoration: underline; }
.etfAboutMeta a i { font-size: 10px; }
.etfSource { margin-top: 14px; font-size: 11.5px; color: var(--etf-muted); text-align: center; }

/* ── responsive ── */
@media (max-width: 1100px) {
  .etfHold { grid-template-columns: 22px 34px minmax(0, 1.6fr) 130px 14px; }
  .etfHold__sec { display: none; }
}
@media (max-width: 900px) {
  .etfGrid, .etfGrid--hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .contenido.etfMain { width: 100%; padding: 0 14px 90px; margin-top: 130px; }
  .etfCard { padding: 16px; border-radius: 16px; }
  .etfChartBox { height: 260px; }
  .etfRanges { width: 100%; justify-content: space-between; }
  .etfRanges button { padding: 7px 8px; }
  .etfFact__v { font-size: 17px; }
  .etfHold { grid-template-columns: 30px minmax(0, 1fr) 110px; gap: 8px; }
  .etfHold__n, .etfHold__go { display: none; }
  .etfSec { scroll-margin-top: 150px; }
}
.etfHold__txt b.etfHold__nm { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etfGrid.etfGrid--solo { grid-template-columns: minmax(0, 1fr); }

/* ── fase 2: más posiciones, crecimiento de $10,000, dividendos ── */
.etfMore {
  margin-top: 10px; align-self: center; border: 1px solid var(--etf-line); background: #fff; cursor: pointer;
  font: 600 12.5px/1 'Inter', sans-serif; color: var(--etf-teal); padding: 9px 16px; border-radius: 999px;
}
.etfMore:hover { background: var(--etf-teal-soft); }
.etfGrowthCard { margin-bottom: 18px; }
.etfGrowthCard .etfCardTitle { margin-bottom: 4px; }
.etfGrowthSum { font-size: 14px; color: #34474e; }
.etfGrowthSum b { font-weight: 800; }
.etfLegend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: #34474e; margin: 2px 0 8px; }
.etfLegend span { display: inline-flex; align-items: center; gap: 6px; }
.etfLegend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.etfChartBox--growth { height: 300px; }
.etfChartBox--div { height: 250px; }
.etfDivTable { min-width: 420px; }
.etfDivTable thead th:first-child { text-align: left; }
.etfDivTable small { font-size: 10.5px; font-weight: 700; color: var(--etf-teal); background: #dcebec; padding: 2px 6px; border-radius: 999px; margin-left: 4px; }
#etfDivTableCard { margin-bottom: 18px; }
@media (max-width: 768px) {
  .etfChartBox--growth { height: 240px; }
  .etfChartBox--div { height: 210px; }
}

/* ── fase 3: gráfica como la de Summary, About arriba, dona de sectores, tarjetas plegables ── */
/* Tarjeta del hover (igual a .tooltipGraficaPrincipalDesign de Summary) */
.etfTip {
  position: absolute; pointer-events: none; opacity: 0; z-index: 5; min-width: 120px;
  background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; padding: 10px 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10); transition: opacity .1s ease;
  display: flex; flex-direction: column; font-family: 'Inter', sans-serif;
}
.etfTip__d { font-size: 10px; font-weight: 500; color: #9aa0a6; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 4px; white-space: nowrap; }
.etfTip__p { font-size: 16px; font-weight: 700; color: #202124; letter-spacing: -.02em; margin-bottom: 2px; }
.etfTip__c { font-size: 12px; font-weight: 500; white-space: nowrap; }

/* About: descripción recortada */
.etfAboutCard .etfCardHead { margin-bottom: 12px; }
.etfDesc.etfDesc--clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
.etfReadMore { border: 0; background: none; padding: 0; margin: 0 0 14px; cursor: pointer; font: 700 13px 'Inter', sans-serif; color: var(--etf-teal); }
.etfReadMore:hover { text-decoration: underline; }
.etfReadMore[hidden] { display: none; }

/* Dona de sectores (como "Allocation by sector" del portafolio) */
.etfDonutWrap { display: flex; align-items: center; gap: 20px; padding: 4px 0 6px; }
.etfDonut { width: 150px; height: 150px; flex-shrink: 0; }
.etfDonut circle { transition: opacity .15s; }
.etfDonut__n { font: 800 8px 'Inter', sans-serif; fill: #16242a; }
.etfDonut__l { font: 600 3.4px 'Inter', sans-serif; fill: #8a9aa0; }
.etfLegendList { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font: 500 13px 'Inter', sans-serif; }
.etfLegendList li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.etfLegendList i { width: 10px; height: 10px; border-radius: 3px; }
.etfLegendList span { color: #2C3E50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etfLegendList b { font-weight: 800; color: #16242a; font-variant-numeric: tabular-nums; }

/* Tarjetas plegables (solo celular) */
@media (max-width: 768px) {
  .etfDonutWrap { flex-direction: column; align-items: stretch; }
  .etfDonut { align-self: center; width: 130px; height: 130px; }
  .etfCard[data-fold] > .etfCardTitle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; margin-bottom: 12px; user-select: none; }
  .etfCard[data-fold] > .etfCardTitle::after { content: '\f078'; font: 900 11px 'Font Awesome 6 Free'; color: var(--etf-muted); transition: transform .2s; }
  .etfCard[data-fold].is-folded > .etfCardTitle { margin-bottom: 0; }
  .etfCard[data-fold].is-folded > .etfCardTitle::after { transform: rotate(-90deg); }
  .etfCard[data-fold].is-folded > :not(.etfCardTitle) { display: none !important; }
  .etfCard[data-fold] { padding-top: 14px; padding-bottom: 14px; }
}
/* Tarjeta del hover con varias líneas (Growth of $10,000) */
.etfTip__row { display: grid; grid-template-columns: 8px auto auto auto; align-items: center; gap: 6px; font-size: 12px; color: #5f6368; white-space: nowrap; margin-top: 3px; }
.etfTip__row i { width: 8px; height: 8px; border-radius: 2px; }
.etfTip__row b { color: #202124; font-weight: 700; margin-left: 4px; }
.etfTip__row em { font-style: normal; font-weight: 600; }