/* Seccion de datos (/datos/). Solo se encola dentro de la seccion.
   Colores por tokens del tema, salvo el dorado del grafico, que es literal a
   proposito para que coincida con las creatividades de Instagram. */

.oro-datos-bloque-wrap { padding: 2.4rem 0; }
@media screen and (min-width: 750px) { .oro-datos-bloque-wrap { padding: 3.6rem 0; } }

/* Cifras de cabecera */
.oro-datos-kpis {
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  list-style: none; margin: 0; padding: 0;
}
.oro-datos-kpis__item {
  flex: 1 1 220px;
  background: rgba(var(--color-foreground), 0.06);
  border: 1px solid rgba(var(--color-foreground), 0.25);
  border-radius: 10px;
  padding: 1.8rem 2rem;
}
.oro-datos-kpis__k {
  display: block; font-size: 3.2rem; line-height: 1.1; font-weight: 600;
  color: rgb(var(--color-foreground));
}
.oro-datos-kpis__l {
  display: block; margin-top: .6rem; font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.7);
}

/* Grafico */
.oro-datos-g { position: relative; margin: 1.6rem 0 .8rem; }
.oro-datos-g__svg { width: 100%; height: auto; aspect-ratio: 960 / 420; display: block; }
.oro-datos-g__rejilla { stroke: rgba(var(--color-foreground), 0.14); stroke-width: 1; }
.oro-datos-g__eje { fill: rgba(var(--color-foreground), 0.6); font-size: 13px; }
.oro-datos-g__valor { fill: rgb(var(--color-foreground)); font-size: 16px; font-weight: 600; }
.oro-datos-g__punto { fill: #D9A94E; stroke: rgb(var(--color-background)); stroke-width: 2; }
.oro-datos-g__cursor { stroke: rgba(var(--color-foreground), 0.45); stroke-width: 1; stroke-dasharray: 4 4; }
.oro-datos-g__tip {
  position: absolute; pointer-events: none; z-index: 2;
  background: rgb(var(--color-background));
  border: 1px solid rgba(var(--color-foreground), 0.4);
  border-radius: 6px; padding: .6rem 1rem;
  font-size: 1.4rem; color: rgb(var(--color-foreground));
  white-space: nowrap; transform: translate(-50%, -130%);
}
.oro-datos-g__tip b { color: #D9A94E; }

/* Tooltip del comparador: varias series a la vez, una linea por pais */
.oro-datos-g__tip:has(.oro-datos-g__tipf) { transform: translate(-50%, 0); white-space: normal; min-width: 18rem; }
.oro-datos-g__tipa { display: block; font-weight: 600; margin-bottom: .4rem; color: rgb(var(--color-foreground)); }
.oro-datos-g__tipf { display: flex; align-items: center; gap: .6rem; font-size: 1.3rem; line-height: 1.7; white-space: nowrap; }
.oro-datos-g__tipf i { width: 1rem; height: .3rem; border-radius: 2px; flex-shrink: 0; }
.oro-datos-g__tipf b { color: rgb(var(--color-foreground)); margin-left: auto; padding-left: 1rem; }

/* Botones de rango */
.oro-datos-rangos { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0 0 .4rem; }
.oro-datos-rangos button {
  background: transparent; cursor: pointer;
  border: 1px solid rgba(var(--color-foreground), 0.4);
  border-radius: 6px; padding: .6rem 1.4rem;
  font-family: inherit; font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.75);
}
.oro-datos-rangos button[aria-pressed="true"] {
  border-color: #B28A56; color: rgb(var(--color-foreground));
  background: rgba(178, 138, 86, 0.14);
}

/* Tabla. Nada de convertirla en tarjetas en movil: con 144 filas ordenables eso
   rompe la semantica para lectores de pantalla. Contenedor con scroll y ocultar
   columnas secundarias. */
.oro-datos-tabla {
  overflow-x: auto;
  border: 1px solid rgba(var(--color-foreground), 0.25);
  border-radius: 10px;
}
.oro-datos-tabla:focus-visible { outline: 2px solid #B28A56; outline-offset: 2px; }
.oro-datos-tabla__t {
  width: 100%; min-width: 560px;
  border-collapse: collapse;
  font-size: 1.5rem;
}
.oro-datos-tabla__t caption { text-align: left; padding: 1.2rem 1.6rem 0; color: rgba(var(--color-foreground), 0.7); font-size: 1.4rem; }
.oro-datos-tabla__t th,
.oro-datos-tabla__t td {
  padding: 1rem 1.4rem; text-align: left;
  border-bottom: 1px solid rgba(var(--color-foreground), 0.14);
}
.oro-datos-tabla__t thead th {
  background: rgba(var(--color-foreground), 0.06);
  color: rgb(var(--color-foreground));
  font-weight: 600; white-space: nowrap;
}
.oro-datos-tabla__t tbody tr:last-child th,
.oro-datos-tabla__t tbody tr:last-child td { border-bottom: 0; }
.oro-datos-tabla__t tbody th { font-weight: 400; color: rgb(var(--color-foreground)); }
.oro-datos-tabla__num { text-align: right !important; font-variant-numeric: tabular-nums; }
/* Cormorant Light 300 es demasiado fina para una tabla de cifras: se sube el
   grosor solo en las celdas numericas, no en el texto. */
.oro-datos-tabla__t td, .oro-datos-tabla__t tbody th { font-weight: 400; }
.oro-datos-tabla__num { font-weight: 500; }
.oro-datos-tabla__sube { color: #D9A94E; }
.oro-datos-tabla__baja { color: rgba(var(--color-foreground), 0.55); }

@media screen and (max-width: 749px) {
  .oro-datos-tabla__sec { display: none; }
  .oro-datos-tabla__t { min-width: 0; font-size: 1.4rem; }
  .oro-datos-tabla__t th, .oro-datos-tabla__t td { padding: .9rem 1rem; }
}

/* Enlaces de la seccion: misma convencion que los bloques de landing del tema
   (theme-bridge.css). El token --color-link es negro y esto va sobre fondo
   oscuro, asi que sin esta regla el navegador los pinta en azul y no se leen. */
.oro-datos-fuente a,
.oro-datos-nota a,
.oro-datos-tabla__t a,
.oro-datos-kpis a {
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  text-decoration-color: rgba(var(--color-foreground), 0.4);
}
.oro-datos-fuente a:hover,
.oro-datos-nota a:hover,
.oro-datos-tabla__t a:hover,
.oro-datos-kpis a:hover {
  text-decoration-color: rgb(var(--color-foreground));
}
/* La linea de fuente es una nota al pie: hereda el gris del parrafo, pero
   subrayada para que se vea que es un enlace. */
.oro-datos-fuente a { color: inherit; }
.oro-datos-fuente a:hover { color: rgb(var(--color-foreground)); }
.oro-datos-descargas a.button { text-decoration: none; }

/* Nota de fuente y avisos */
.oro-datos-fuente,
.oro-datos-nota {
  font-size: 1.3rem; color: rgba(var(--color-foreground), 0.6);
  margin: .8rem 0 0;
}
.oro-datos-nota--metodo {
  background: rgba(var(--color-foreground), 0.04);
  border-left: 2px solid rgba(178, 138, 86, 0.6);
  padding: 1.2rem 1.6rem; border-radius: 0 6px 6px 0;
  font-size: 1.4rem; color: rgba(var(--color-foreground), 0.75);
}
.oro-datos-aviso {
  margin-top: 2.4rem; font-size: 1.3rem;
  color: rgba(var(--color-foreground), 0.55);
}

/* Tarjetas del hub hacia las paginas hijas */
.oro-datos-tarjetas { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.oro-datos-tarjetas li {
  flex: 1 1 320px;
  background: rgba(var(--color-foreground), 0.06);
  border: 1px solid rgba(var(--color-foreground), 0.25);
  border-radius: 10px; padding: 2rem 2.2rem;
}
.oro-datos-tarjetas h2 { margin: 0 0 .8rem; }
.oro-datos-tarjetas p { margin: 0; color: rgba(var(--color-foreground), 0.75); font-size: 1.5rem; }
.oro-datos-tarjetas a { color: rgb(var(--color-foreground)); text-decoration: underline; text-underline-offset: 0.3rem; text-decoration-color: rgba(var(--color-foreground), 0.4); }
.oro-datos-tarjetas a:hover { text-decoration-color: rgb(var(--color-foreground)); }

/* Migas */
.oro-datos-migas { padding: 1.6rem 0 0; font-size: 1.4rem; color: rgba(var(--color-foreground), 0.6); }
.oro-datos-migas a { color: rgba(var(--color-foreground), 0.85); }

/* Comparador de paises */
.oro-datos-comparador__sel { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.oro-datos-comparador__sel label { font-size: 1.4rem; color: rgba(var(--color-foreground), 0.7); }
.oro-datos-comparador__sel select,
.oro-datos-buscador input {
  background: rgba(var(--color-foreground), 0.04);
  border: 1px solid rgba(var(--color-foreground), 0.4);
  border-radius: 6px; padding: .8rem 1.2rem;
  font-family: inherit; font-size: 1.5rem;
  color: rgb(var(--color-foreground)); min-width: 24rem; max-width: 100%;
}
.oro-datos-comparador__sel select:disabled { opacity: .5; }

.oro-datos-leyenda { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.oro-datos-leyenda li {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.4rem; color: rgba(var(--color-foreground), 0.85);
}
.oro-datos-leyenda__c { width: 1.4rem; height: .3rem; border-radius: 2px; flex-shrink: 0; }
.oro-datos-leyenda__x {
  background: none; border: 0; cursor: pointer; padding: 0 .4rem;
  font-size: 1.8rem; line-height: 1;
  color: rgba(var(--color-foreground), 0.5);
}
.oro-datos-leyenda__x:hover { color: rgb(var(--color-foreground)); }

/* Buscador de la tabla */
.oro-datos-buscador { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0 0 1.2rem; }
.oro-datos-buscador label { font-size: 1.4rem; color: rgba(var(--color-foreground), 0.7); }
.oro-datos-buscador__n { font-size: 1.4rem; color: rgba(var(--color-foreground), 0.6); }

/* Cabeceras ordenables */
.oro-datos-tabla__orden {
  background: none; border: 0; cursor: pointer; padding: 0;
  font: inherit; font-weight: 600; color: inherit; text-align: inherit;
}
.oro-datos-tabla__orden:hover { text-decoration: underline; }
.oro-datos-tabla__t th[aria-sort] .oro-datos-tabla__orden::after { content: ' ▾'; color: #B28A56; }
.oro-datos-tabla__t th[aria-sort="ascending"] .oro-datos-tabla__orden::after { content: ' ▴'; }

/* Descargas y enlaces */
.oro-datos-descargas { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }