/* =========================================================
   DATOS · Evolución clasificación HTML/SVG
   Responsive 14" / 24"
   ========================================================= */

/* =========================================================
   Card base evolución
   ========================================================= */

#datos-page .datos-classification-evo-card {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;

  color: white;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.075);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.026) 0%,
      rgba(255,255,255,0.010) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.040),
    0 16px 34px rgba(0,0,0,0.14);
}

/* Card de un solo gráfico */
#datos-page .datos-classification-evo-card--single {
  padding: 14px 16px 12px;
  margin-top: 14px;
}

/* Card dual: posiciones + puntos */
#datos-page .datos-classification-evo-dual-card {
  padding: 14px 16px 12px;
  margin-top: 14px;

  border-color: rgba(255,255,255,0.080);
  background:
    radial-gradient(circle at 0% 0%, var(--datos-goals-soft, rgba(255,255,255,0.05)), transparent 34%),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.026) 0%,
      rgba(255,255,255,0.010) 100%
    );
}

#datos-page .datos-classification-evo-body,
#datos-page .datos-classification-evo-graph-wrap {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Ruta parquet inferior */
#datos-page .datos-classification-evo-blob {
  font-size: 10px;
  opacity: 0.30;
  margin-top: 8px;
  word-break: break-all;
  color: white;
}


/* =========================================================
   Selector Posición / Puntos
   ========================================================= */

#datos-page .datos-classif-evo-metric-switch {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  padding: 4px;
  border-radius: 999px;

  background: rgba(255,255,255,0.060);
  border: 1px solid rgba(255,255,255,0.105);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    0 8px 20px rgba(0,0,0,0.12);
}

#datos-page .datos-classif-evo-metric-btn {
  appearance: none;
  -webkit-appearance: none;

  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,0.68);

  border-radius: 999px;

  padding: 7px 13px;

  font-size: 12px;
  font-weight: 850;

  cursor: pointer;

  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

#datos-page .datos-classif-evo-metric-btn:hover {
  color: white;
  background: rgba(255,255,255,0.070);
}

#datos-page .datos-classif-evo-metric-btn.is-active {
  color: white;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.170),
      rgba(255,255,255,0.080)
    );

  border-color: rgba(255,255,255,0.185);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.110),
    0 5px 14px rgba(0,0,0,0.14);
}

/* Se mantiene para el modo single o para usos antiguos.
   En modo dual la ocultamos más abajo. */
#datos-page .datos-classif-evo-static-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 7px 13px;
  border-radius: 999px;

  color: white;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.160),
      rgba(255,255,255,0.075)
    );

  border: 1px solid rgba(255,255,255,0.160);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.100),
    0 5px 14px rgba(0,0,0,0.14);
}


/* =========================================================
   Gráfico HTML/SVG base
   ========================================================= */

#datos-page .datos-evo-html-chart {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;

  overflow: hidden;

  padding: 0;
  margin: 0;

  border: none;
  background: transparent;
  box-shadow: none;
}

/* Contenedor real del gráfico */
#datos-page .datos-evo-html-chart-inner {
  position: relative;

  width: 100%;
  max-width: 1360px;

  height: clamp(440px, 31vw, 530px);
  min-height: 440px;
  max-height: 530px;

  overflow: hidden;
}

/* SVG principal */
#datos-page .datos-evo-html-svg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;
  user-select: none;
  pointer-events: none;
}

/* Capa de escudos del último punto */
#datos-page .datos-evo-html-logo-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Escudos finales dentro del gráfico */
#datos-page .datos-evo-html-logo-btn {
  position: absolute;
  transform: translate(-50%, -50%);

  width: clamp(28px, 1.75vw, 36px);
  height: clamp(28px, 1.75vw, 36px);
  padding: 2px;

  border-radius: 999px;
  border: 1px solid var(--datos-evo-line-color-border);

  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 42%),
    rgba(13, 20, 32, 0.78);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 6px 15px rgba(0,0,0,0.32);

  pointer-events: auto;

  transition:
    transform .15s ease,
    opacity .15s ease,
    filter .15s ease,
    box-shadow .15s ease;
}

#datos-page .datos-evo-html-logo-btn:hover {
  transform: translate(-50%, -50%) scale(1.09);
  z-index: 5;
}

#datos-page .datos-evo-html-logo-btn.is-muted {
  opacity: 0.18;
  filter: grayscale(0.45);
}

#datos-page .datos-evo-html-logo-btn.is-selected {
  transform: translate(-50%, -50%) scale(1.15);
  z-index: 6;

  box-shadow:
    0 0 0 2px var(--datos-evo-line-color-border),
    0 0 20px var(--datos-evo-line-color-soft),
    0 8px 18px rgba(0,0,0,0.40);
}

#datos-page .datos-evo-html-logo-img {
  width: 100%;
  height: 100%;

  object-fit: contain;
  border-radius: 999px;
  display: block;
}

#datos-page .datos-evo-html-logo-fallback {
  width: 100%;
  height: 100%;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 9px;
  font-weight: 900;
  color: white;

  background: rgba(255,255,255,0.10);
}


/* =========================================================
   Leyenda inferior de escudos
   ========================================================= */

#datos-page .datos-evo-html-bottom-legend {
  width: 100%;
  max-width: 1360px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  padding: 7px 6px 2px;
  margin-top: 2px;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: thin;
}

#datos-page .datos-evo-html-bottom-legend::-webkit-scrollbar {
  height: 6px;
}

#datos-page .datos-evo-html-bottom-legend::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.035);
  border-radius: 999px;
}

#datos-page .datos-evo-html-bottom-legend::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
}

#datos-page .datos-evo-html-bottom-legend::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.26);
}

#datos-page .datos-evo-html-bottom-legend-btn {
  appearance: none;
  -webkit-appearance: none;

  width: clamp(42px, 2.35vw, 52px);
  height: clamp(42px, 2.35vw, 52px);
  min-width: clamp(42px, 2.35vw, 52px);

  padding: 3px;

  border-radius: 999px;
  border: 1px solid var(--datos-evo-line-color-border);

  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.22), transparent 42%),
    rgba(13, 20, 32, 0.76);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 7px 16px rgba(0,0,0,0.30);

  transition:
    transform .15s ease,
    opacity .15s ease,
    filter .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

#datos-page .datos-evo-html-bottom-legend-btn:hover {
  transform: translateY(-2px) scale(1.03);
}

#datos-page .datos-evo-html-bottom-legend-btn.is-muted {
  opacity: 0.25;
  filter: grayscale(0.45);
}

#datos-page .datos-evo-html-bottom-legend-btn.is-selected {
  transform: translateY(-2px) scale(1.09);

  box-shadow:
    0 0 0 2px var(--datos-evo-line-color-border),
    0 0 20px var(--datos-evo-line-color-soft),
    0 9px 20px rgba(0,0,0,0.36);
}

#datos-page .datos-evo-html-bottom-logo {
  width: 100%;
  height: 100%;

  object-fit: contain;
  border-radius: 999px;
  display: block;
}

#datos-page .datos-evo-html-bottom-fallback {
  width: 100%;
  height: 100%;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 10px;
  font-weight: 900;
  color: white;

  background: rgba(255,255,255,0.10);
}


/* =========================================================
   Modo dual: dos gráficos dentro de un único contenedor
   ========================================================= */

#datos-page .datos-classification-evo-dual-grid {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

#datos-page .datos-classification-evo-dual-panel {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  padding: 0;

  border: none;
  background: transparent;
}

#datos-page .datos-classification-evo-dual-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 2px;
  min-width: 0;
}

#datos-page .datos-classification-evo-dual-panel-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#datos-page .datos-classification-evo-dual-panel-title {
  color: white;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#datos-page .datos-classification-evo-dual-panel-subtitle {
  color: white;
  opacity: 0.68;

  font-size: 11px;
  font-weight: 650;

  margin-top: 3px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Por si queda alguna pill antigua dentro del modo dual */
#datos-page .datos-classification-evo-dual-panel-head .datos-classif-evo-static-badge {
  display: none !important;
}

#datos-page .datos-classification-evo-dual-chart-shell {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

/* En modo dual bajamos altura para que no quede gigante */
#datos-page .datos-classification-evo-dual-panel .datos-evo-html-chart-inner {
  max-width: none;

  height: clamp(350px, 18.6vw, 430px);
  min-height: 350px;
  max-height: 430px;
}

/* En modo dual NO queremos leyenda dentro de cada gráfico */
#datos-page .datos-classification-evo-dual-panel .datos-evo-html-bottom-legend {
  display: none;
}

/* Leyenda compartida bajo ambos gráficos */
#datos-page .datos-evo-html-bottom-legend--shared {
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;

  margin: 2px auto 0;
  padding: 5px 8px 2px;

  border-top: none;

  justify-content: flex-start;
  gap: 13px;

  flex-wrap: nowrap;
}

/* Escudos algo más grandes en la leyenda compartida */
#datos-page .datos-evo-html-bottom-legend--shared .datos-evo-html-bottom-legend-btn {
  width: clamp(45px, 2.45vw, 56px);
  height: clamp(45px, 2.45vw, 56px);
  min-width: clamp(45px, 2.45vw, 56px);
}


/* =========================================================
   Modo single: un gráfico con contenedor
   ========================================================= */

#datos-page .datos-classification-evo-card--single .datos-evo-html-chart-inner {
  height: clamp(445px, 32vw, 540px);
  min-height: 445px;
  max-height: 540px;
}

#datos-page .datos-classification-evo-card--single .datos-evo-html-bottom-legend {
  margin-top: 4px;
}


/* =========================================================
   Responsive portátil / 14 pulgadas
   ========================================================= */

@media (max-width: 1500px) {
  #datos-page .datos-classification-evo-dual-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  #datos-page .datos-classification-evo-dual-panel .datos-evo-html-chart-inner {
    height: clamp(430px, 38vw, 520px);
    min-height: 430px;
    max-height: 520px;
  }

  #datos-page .datos-evo-html-bottom-legend--shared {
    justify-content: flex-start;
    gap: 11px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1400px) {
  #datos-page .datos-classification-evo-card--single,
  #datos-page .datos-classification-evo-dual-card {
    padding: 12px 12px 10px;
  }

  #datos-page .datos-evo-html-chart-inner {
    max-width: 100%;
  }

  #datos-page .datos-evo-html-bottom-legend {
    max-width: 100%;
  }
}

@media (max-width: 900px) {
  #datos-page .datos-classification-evo-card--single,
  #datos-page .datos-classification-evo-dual-card {
    padding: 10px 10px 9px;
    border-radius: 16px;
  }

  #datos-page .datos-evo-html-chart-inner,
  #datos-page .datos-classification-evo-card--single .datos-evo-html-chart-inner,
  #datos-page .datos-classification-evo-dual-panel .datos-evo-html-chart-inner {
    height: 430px;
    min-height: 430px;
    max-height: 430px;
  }

  #datos-page .datos-evo-html-logo-btn {
    width: 27px;
    height: 27px;
    padding: 2px;
  }

  #datos-page .datos-evo-html-bottom-legend {
    justify-content: flex-start;
    gap: 9px;
    padding-top: 7px;
  }

  #datos-page .datos-evo-html-bottom-legend--shared {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    justify-content: flex-start;
  }

  #datos-page .datos-evo-html-bottom-legend-btn,
  #datos-page .datos-evo-html-bottom-legend--shared .datos-evo-html-bottom-legend-btn {
    width: 39px;
    height: 39px;
    min-width: 39px;
  }

  #datos-page .datos-classification-evo-dual-panel-head {
    align-items: center;
  }

  #datos-page .datos-classification-evo-dual-panel-title {
    font-size: 14px;
  }

  #datos-page .datos-classification-evo-dual-panel-subtitle {
    font-size: 10px;
  }
}


/* =========================================================
   Pantallas grandes
   ========================================================= */

@media (min-width: 1700px) {
  #datos-page .datos-evo-html-chart-inner,
  #datos-page .datos-evo-html-bottom-legend {
    max-width: 1380px;
  }

  #datos-page .datos-classification-evo-dual-panel .datos-evo-html-chart-inner {
    max-width: none;
  }

  #datos-page .datos-evo-html-bottom-legend--shared {
    max-width: 100%;
  }
}

@media (min-width: 2100px) {
  #datos-page .datos-evo-html-chart-inner,
  #datos-page .datos-evo-html-bottom-legend {
    max-width: 1440px;
  }

  #datos-page .datos-classification-evo-dual-panel .datos-evo-html-chart-inner {
    max-width: none;
  }

  #datos-page .datos-evo-html-bottom-legend--shared {
    max-width: 100%;
  }
}