/* monedas.css – versión completa con centrado y grilla para Monedas + Crypto + Bancos */

/* ──────────────────────────────────────────────
   1)  CONTENEDORES PRINCIPALES
   ────────────────────────────────────────────── */

.monedas-wrapper,               /* Monedas tradicionales */
.crypto-wrapper,                /* Cajas de Crypto        */
.bancos-wrapper,                /* Placeholders: Bancos   */
.uva-wrapper,                   /* Placeholder: UVA       */
.acciones-wrapper {             /* Placeholder: Acciones  */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* Centra horizontalmente el conjunto */
  gap: 20px;                 /* Espacio uniforme entre cajas       */
  margin-top: 30px;          /* Aire respecto a los botones arriba */
}

/* ──────────────────────────────────────────────
   2)  CAJAS: ESTADOS VISIBLES / OCULTOS
   ────────────────────────────────────────────── */

.box-moneda,
.box-crypto,
.box[data-tipo="BANCOS"],
.box[data-tipo="UVA"],
.box[data-tipo="ACCIONES"] {
  display: none;           /* Escondidas por defecto; JS las muestra */
  opacity: 0;
  transition: opacity 0.3s ease;
  width: 280px;            /* Ancho fijo para que armen grilla      */
}

/* visible = el JS añade esta clase */
.box-moneda.visible,
.box-crypto.visible,
.box[data-tipo="BANCOS"].visible,
.box[data-tipo="UVA"].visible,
.box[data-tipo="ACCIONES"].visible {
  display: block;
  opacity: 1;
}

/* ──────────────────────────────────────────────
   3)  GRILLAS LIMITADAS A 5 COLUMNAS
   ────────────────────────────────────────────── */

/* Crypto */
.crypto-wrapper {
  max-width: calc((280px * 5) + (20px * 4)); /* 5 columnas + 4 gaps */
  margin-inline: auto;                        /* centra el contenedor */
}

/* Bancos – misma lógica de 5 cajas por fila */
.bancos-wrapper {
  max-width: calc((280px * 5) + (20px * 4)); /* 5 columnas + 4 gaps */
  margin-inline: auto;
}

/* Si más adelante necesitas limitar UVA o Acciones, duplica la regla:
.uva-wrapper, .acciones-wrapper { ... } */

/* ──────────────────────────────────────────────
   4)  UTILITARIOS EXTRA
   ────────────────────────────────────────────── */

.crypto-logo {
  width: 24px;
  height: 24px;
  vertical-align: text-bottom;
  margin-right: 6px;
}

/* ──────────────────────────────────────────────
   5)  MEDIA QUERY (móvil) – Apilado vertical
   ────────────────────────────────────────────── */
@media (max-width: 500px) {
  .monedas-wrapper,
  .crypto-wrapper,
  .bancos-wrapper,
  .uva-wrapper,
  .acciones-wrapper {
    gap: 12px;
  }
  .box-moneda,
  .box-crypto,
  .box[data-tipo="BANCOS"],
  .box[data-tipo="UVA"],
  .box[data-tipo="ACCIONES"] {
    width: 100%;          /* Apilado vertical en pantallas estrechas */
  }
}