/* ═══════════════════════════════════════════════════════════════
   La barra del rango.
   Es lo único de esta web que un competidor no enseña, así que
   merece su propio fichero y su propio cuidado.
   ═══════════════════════════════════════════════════════════════ */

.rangebox {
  padding: 26px 26px 22px;
}

.range-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.range-price {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* El precio parpadea al cambiar. Sin esto no se distingue una página viva
   de una congelada, y en un panel de dinero eso importa. */
.range-price.tick { animation: pricepulse 0.5s ease-out; }
@keyframes pricepulse {
  0%   { color: var(--cyan); text-shadow: 0 0 22px rgba(79, 216, 232, 0.5); }
  100% { color: var(--text); text-shadow: none; }
}

.range-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--line-2);
  background: var(--surface);
  white-space: nowrap;
}
/* El estado y los movimientos del día, juntos a la derecha del precio. Se
   parten a dos líneas en pantalla estrecha en vez de empujar el precio. */
.range-head-tags {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.range-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  border: 1px solid var(--line);
  background: var(--surface);
  white-space: nowrap;
}

.range-state .pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}
.range-state.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.range-state.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.range-state.bad  { color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 40%, transparent); }

/* ── la barra ───────────────────────────────────────────────── */

.range-track {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  margin: 40px 0 8px;
}

/* La franja donde tu dinero está cobrando. */
.range-fill {
  position: absolute;
  inset: 1px auto 1px 0;
  border-radius: 999px;
  background: var(--grad);
  opacity: 0.85;
  transition: left 0.5s ease, right 0.5s ease;
}

.range-edge {
  position: absolute;
  top: -7px;
  bottom: -7px;
  width: 2px;
  background: var(--line-3);
  border-radius: 2px;
}

/* El marcador del precio. */
.range-cursor {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 30px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: var(--text);
  transform: translateY(-50%);
  transition: left 0.5s ease;
  box-shadow: 0 0 0 4px var(--void), 0 0 18px rgba(255, 255, 255, 0.35);
}
.range-cursor.out { background: var(--warn); box-shadow: 0 0 0 4px var(--void), 0 0 18px rgba(245, 184, 65, 0.5); }

.range-cursor::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  color: var(--text);
}

/* Cuando el precio se sale, el marcador se queda pegado al borde y una flecha
   dice hacia dónde se fue. Mentir sobre la posición sería peor que no pintarla. */
.range-cursor.pinned::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: translateY(-50%);
}
.range-cursor.pinned.right::before { left: 10px; border-left: 7px solid var(--warn); }
.range-cursor.pinned.left::before { right: 10px; border-right: 7px solid var(--warn); }

.range-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 14px;
}
.range-scale span:last-child { text-align: right; }
.range-scale small {
  display: block;
  font-family: var(--f-body);
  font-size: 0.68rem;
  color: var(--dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 3px;
}

/* ── cifras bajo la barra ────────────────────────────────────── */

.range-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin-top: 26px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.range-facts > div {
  background: var(--void-2);
  padding: 15px 16px;
}
.range-facts dt {
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
  margin: 0 0 6px;
}
.range-facts dd {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}

/* El neto, pegado bajo la cifra que lo produce. Va FUERA del <dd> a
   propósito: dentro, cada repintado lo borraría al reescribir el importe. */
.range-facts .fact-neto,
.range-facts .fact-nota {
  display: block;
  margin-top: 5px;
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--dim);
}

/* `.up`/`.down` sueltas pierden por especificidad contra la regla de arriba
   y el neto se quedaba gris siempre. Se repiten aquí con el mismo peso. */
.range-facts .fact-neto.up { color: var(--good); }
.range-facts .fact-neto.down { color: var(--bad); }

/* ── confirmación antes de retirar ───────────────────────────── */

/* Filas, no rejilla: aquí las tres cifras se leen en vertical y la última es
   la suma de las dos de arriba. En columnas esa relación no se ve. */
.ret-conf {
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.ret-conf > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 15px;
  background: var(--void-2);
}
.ret-conf > div + div { border-top: 1px solid var(--line); }
.ret-conf dt {
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
  margin: 0;
}
.ret-conf dd {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}
.ret-conf .up { color: var(--good); }

/* El total va separado del resto: es lo que se lleva, no un dato más. */
.ret-conf-total { background: var(--surface) !important; }
.ret-conf-total dt { color: var(--muted); }
.ret-conf-total dd { font-size: 1.22rem; font-weight: 700; }

.ret-conf-nota {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
}

/* El aviso de esperar. Ámbar y no rojo a propósito: no ha pasado nada malo,
   solo conviene mirar el precio antes de cerrar. */
.ret-conf-aviso {
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(245, 184, 65, 0.3);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-sm);
  background: rgba(245, 184, 65, 0.07);
}
.ret-conf-aviso p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.6;
}
.ret-conf-aviso p + p { margin-top: 7px; font-size: 0.76rem; }

/* ── el gráfico del precio ───────────────────────────────────── */

/* Altura fija: sin ella, `maintainAspectRatio:false` deja que el lienzo crezca
   en cada repintado y la tarjeta se estira sola hasta el infinito. */
.chart-wrap {
  position: relative;
  height: 230px;
}
.chart-wrap canvas { max-width: 100%; }

/* ── en qué está convertido el capital ───────────────────────── */

.mix-bar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.mix-bar > span { display: block; transition: width 0.4s ease; }

.mix-0 { background: linear-gradient(100deg, #7c4def, #d946ef); }
.mix-1 { background: var(--cyan); }

.mix-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.mix-legend > div { position: relative; padding-left: 18px; }

.mix-dot {
  position: absolute;
  left: 0; top: 5px;
  width: 9px; height: 9px;
  border-radius: 50%;
}

.mix-legend dt {
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
  margin: 0 0 5px;
}
.mix-legend dd {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}
.mix-legend small {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--dim);
  font-family: var(--f-mono);
}

/* ── paginación de una tabla ─────────────────────────────────── */

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.pager > span { font-size: 0.78rem; }
.pager button[disabled] { opacity: 0.4; cursor: not-allowed; }

.tag-cobro {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--dim);
  border: 1px solid var(--line-2);
}

/* ── el aviso de qué pasa después ────────────────────────────── */

.range-next {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--grad-soft);
  border: 1px solid var(--line);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
}
.range-next strong { color: var(--text); font-family: var(--f-mono); }

/* ── esqueleto mientras carga ────────────────────────────────── */

.skel {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-3) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: skelmove 1.4s linear infinite;
  border-radius: 6px;
  color: transparent !important;
}
@keyframes skelmove { to { background-position: -200% 0; } }

@media (max-width: 560px) {
  .rangebox { padding: 20px 16px 18px; }
  .range-cursor::after { font-size: 0.66rem; padding: 2px 7px; }
}

/* ── árabe ────────────────────────────────────────────────────
   La barra del rango es un eje numérico: abajo a la izquierda, arriba a la
   derecha. Eso NO se voltea aunque la página vaya de derecha a izquierda,
   igual que no se voltea el gráfico. El marcador del precio se posiciona con
   `left: %`, así que darle la vuelta al contenedor lo pondría a decir lo
   contrario de lo que pasa. */
[dir="rtl"] .range-track,
[dir="rtl"] .range-scale,
[dir="rtl"] .chart-wrap,
[dir="rtl"] .mix-bar { direction: ltr; }

/* Los rótulos de dentro sí se leen en árabe, solo el orden es fijo. */
[dir="rtl"] .range-scale span { direction: rtl; }
[dir="rtl"] .range-scale span:first-child { text-align: left; }
[dir="rtl"] .range-scale span:last-child { text-align: right; }

[dir="rtl"] .mix-legend > div { padding-left: 0; padding-right: 18px; }
[dir="rtl"] .mix-dot { left: auto; right: 0; }