/*
 * Ajustes propios del sitio administrado por el panel.
 *
 * REGLA: esto NO reemplaza ni edita el CSS de Elementor (public/_el/*.css, que
 * viene del mirror y no se toca). Solo agrega reglas para los casos en que el
 * contenido dejo de ser el congelado y el mirror nunca tuvo una regla que lo
 * contemplara. Cada bloque explica que problema resuelve.
 */

/*
 * Logos de "Nuevas emisiones" (listing 323 -> listing anidado 1151).
 *
 * El mirror venia con UNA sola imagen congelada (720x424), asi que nunca
 * necesito una regla de tamaño: post-1151.css y post-323.css no definen ni
 * width, ni height, ni object-fit para este <img>. Ahora cada tarjeta trae el
 * logo de SU emisor y los logos del directorio tienen proporciones muy
 * distintas entre si (cuadrados, apaisados, verticales), con lo cual cada
 * tarjeta quedaba de un alto diferente y los logos sin alinear.
 *
 * Se les da una caja comun y se encaja el logo dentro sin deformarlo.
 */
.elementor-1151 .elementor-element-255fdc9 img {
  width: 100%;
  height: 120px;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .elementor-1151 .elementor-element-255fdc9 img {
    height: 100px;
  }
}

@media (max-width: 767px) {
  .elementor-1151 .elementor-element-255fdc9 img {
    height: 90px;
  }
}

/*
 * Franja de logos institucionales del home (contenedor 43af3ac).
 *
 * El mirror la congelo como una grilla de 6 columnas fijas porque tenia
 * exactamente 6 logos. Ahora la cantidad la decide el panel: con 4 quedarian
 * dos columnas vacias a la derecha (logos corridos), y con 8 la segunda fila
 * saldria desalineada. fillLogoStrip agrega esta clase SOLO cuando la cantidad
 * publicada no es 6; con 6 no toca nada y la salida es la del mirror.
 */
.bva-logos-auto {
  --e-con-grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  --justify-items: center;
  --align-items: center;
}

@media (max-width: 767px) {
  .bva-logos-auto {
    --e-con-grid-template-columns: repeat(2, 1fr);
  }
}

/*
 * Pagina 404 (src/pages/404.astro).
 *
 * El mirror no tiene ninguna pagina de error de la que copiar el bloque, asi que
 * el cuerpo es propio y sus reglas viven aca. Se usan los tokens del kit de
 * Elementor (post-6.css) para no introducir una paleta paralela: si el kit cambia,
 * esta pagina lo sigue.
 */
.bva-404 {
  background: var(--e-global-color-accent, #1A1C21);
  color: var(--e-global-color-text, #E9E8EE);
  display: flex;
  justify-content: center;
  padding: 96px 20px 120px;
}

.bva-404__caja {
  max-width: 640px;
  text-align: center;
}

.bva-404__codigo {
  color: var(--e-global-color-secondary, #FBBA00);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.bva-404__titulo {
  color: #fff;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.15;
  margin: 0 0 16px;
}

.bva-404__texto {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 32px;
}

.bva-404__acciones {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  justify-content: center;
}

.bva-404__boton {
  background: var(--e-global-color-secondary, #FBBA00);
  border-radius: 4px;
  color: var(--e-global-color-primary, #501E53);
  display: inline-block;
  font-weight: 600;
  padding: 14px 28px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.bva-404__boton:hover,
.bva-404__boton:focus {
  background: var(--e-global-color-fc81c4b, #FCC643);
  color: var(--e-global-color-primary, #501E53);
}

.bva-404__enlace {
  color: var(--e-global-color-text, #E9E8EE);
  text-decoration: underline;
}

/*
 * Alineacion de parrafos y titulos cargados desde el panel.
 *
 * El editor del CMS emite las clases de WordPress (`has-text-align-*`, ver
 * admin/src/components/editor-schema.ts). El CSS del mirror ya trae `left`,
 * `center` y `right`; `justify` no existe en WordPress y el panel si la ofrece,
 * asi que la unica regla que hace falta agregar es esta.
 */
.has-text-align-justify {
  text-align: justify;
}

/*
 * Logos de las entidades del Directorio (T-15 del UAT).
 *
 * El motor quita `width` y `height` del <img> al cambiar la imagen, y tiene que
 * hacerlo: esos atributos describen la imagen CONGELADA del mirror, y si
 * sobreviven el navegador reserva el alto de otra imagen (ver `pintarImg` en
 * src/lib/jet.ts). El problema es que en estas tres ubicaciones el mirror nunca
 * definio una regla de tamano —le alcanzaba con los atributos— asi que al
 * quitarlos cada logo pasa a dibujarse a su tamano natural.
 *
 * En produccion no se nota porque WordPress sirve TODOS los logos como una
 * miniatura de 720x424: por eso "los logos ya existentes" se ven parejos y uno
 * nuevo desentona, que es exactamente lo que reporto el UAT.
 *
 * Se les devuelve la caja que el mirror tenia, ahora en CSS y de forma
 * responsiva, con `contain` para que cualquier proporcion entre sin deformarse.
 * Mismo criterio que la regla de las tarjetas de "Nuevas emisiones" de mas
 * arriba.
 */

/* Listado de emisores: el mirror la congelo en 720x424. */
.elementor-element-e091463 .jet-listing-dynamic-image__img {
  width: 100%;
  aspect-ratio: 720 / 424;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Casas de bolsa: 339x205 en el mirror. */
.elementor-element-a4511d1 .jet-listing-dynamic-image__img {
  width: 100%;
  aspect-ratio: 339 / 205;
  object-fit: contain;
  object-position: center;
  display: block;
}

/*
 * Logo de la entidad en el detalle de un hecho de relevancia y de una emision
 * (768 paginas). Tampoco tenia regla de tamano.
 */
.elementor-element-bf2165e .jet-listing-dynamic-image__img {
  width: 100%;
  aspect-ratio: 720 / 424;
  object-fit: contain;
  object-position: center;
  display: block;
}

/*
 * Fichas de emisor, casa de bolsa y administradora. Estas SI tienen regla del
 * mirror (`width: 300px`), pero solo de ancho: un logo mas alto que ancho
 * empujaba el resto de la ficha. Se le pone techo sin tocar el ancho que ya
 * define el mirror.
 */
.elementor-element-c552659 .jet-listing-dynamic-image__img,
.elementor-element-db6352b .jet-listing-dynamic-image__img,
.elementor-element-e00ae4b .jet-listing-dynamic-image__img {
  max-height: 180px;
  object-fit: contain;
  object-position: left center;
}

/*
 * Imagenes que el panel reemplaza (T-16 del UAT).
 *
 * `pintarImg` quita `width` y `height` del <img> porque describen la imagen
 * congelada del mirror y no la nueva. Es correcto, pero deja a la nueva sin
 * ninguna medida, y el mirror casi nunca definio una regla de CSS: le alcanzaba
 * con esos atributos. Resultado: la foto que sube un editor se dibuja a su
 * tamano natural y se desborda del bloque.
 *
 * Este techo es deliberadamente minimo. No recorta ni fuerza una proporcion
 * —eso lo hacen las reglas por widget de mas arriba, donde se sabe que caja
 * corresponde—: solo garantiza que ninguna imagen del panel salga del ancho de
 * su contenedor y que conserve su proporcion.
 */
.bva-img {
  max-width: 100%;
  height: auto;
}

/*
 * Color del sombreado de los banners del home.
 *
 * QUE slide lleva capa lo decide el MARCADO, no esta regla: el sitio vigente
 * deja el primer banner sin sombrear y sombrea los otros tres, y `fillSlider`
 * clona cada slide del congelado que le toca, asi que hereda eso tal cual.
 * Ponersela a todos —como se hacia hasta el 09/09— le daba al primero un tinte
 * violaceo que el original no tiene: sobre esa imagen, que es magenta oscuro,
 * el azul marino de la capa baja el rojo de 97 a 56 y deja el rojo sin peso.
 * Es lo que la BVA reporto como "nosotros tenemos otro tinte".
 *
 * Esta regla solo pone el COLOR, y solo lo necesita un banner que el panel
 * publique de mas: los cuatro capturados ya traen su propia regla en el CSS del
 * mirror, con este mismo valor. El color es el del sitio vigente, verificado en
 * su post-12.css: #0207576E, azul marino al 43 %.
 */
.elementor-element-e0245f2 .swiper-slide .elementor-background-overlay {
  background-color: #0207576e;
}

/*
 * Buscadores del sitio (T-24 del UAT).
 *
 * El buscador general del mirror nunca devolvia nada, asi que su desplegable de
 * resultados —`.e-search-results`— quedo en el HTML sin una sola regla propia:
 * lo que se ve abajo es el formato de las sugerencias que ahora si se pintan.
 * La pagina `/buscar/` es nueva y no hay pagina del mirror de donde copiarla, y
 * el "Sin resultados" de los listados tampoco existia.
 *
 * OJO CON EL FONDO: el sitio tiene `body { background: #100216 }` (viene en
 * pre-body.html del mirror). La primera version de estas reglas se escribio para
 * fondo claro —texto casi negro, bordes `rgba(0,0,0,.07)`— y en el sitio los
 * resultados quedaban ilegibles: la BVA lo reporto el 07/09 como "el buscador
 * universal no funciona", cuando en realidad funcionaba y no se veia. Se usa la
 * paleta del kit de Elementor, igual que la pagina 404.
 */
.e-search-results:empty {
  display: none;
}

/* El desplegable flota sobre la pagina: necesita fondo propio y opaco. */
.e-search-results {
  background: var(--e-global-color-accent, #1A1C21);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.bva-sugerencia {
  align-items: baseline;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--e-global-color-text, #E9E8EE);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 14px;
  text-decoration: none;
}

.bva-sugerencia:last-child {
  border-bottom: 0;
}

.bva-sugerencia:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--e-global-color-secondary, #FBBA00);
}

.bva-sugerencia__titulo {
  font-size: 14px;
  line-height: 1.35;
}

.bva-sugerencia__seccion {
  color: rgba(233, 232, 238, 0.55);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bva-sugerencia--vacia {
  color: rgba(233, 232, 238, 0.6);
  font-size: 14px;
  margin: 0;
  padding: 12px 14px;
}

.bva-sugerencia--todos {
  color: var(--e-global-color-secondary, #FBBA00);
  font-weight: 700;
  justify-content: center;
}

/*
 * El resplandor de fondo no debe atrapar clics.
 *
 * `.glow-container` es la capa decorativa del diseño: cinco circulos difuminados
 * que se mueven solos. Esta en `position: fixed`, ocupa toda la ventana y es
 * hermana del contenido, asi que al estar posicionada se pinta POR ENCIMA de
 * cualquier contenido que no lo este. En la pagina de resultados eso dejaba los
 * titulos y los "LEER MAS" sin recibir el clic: el puntero le llegaba a la bola.
 *
 * Se apagan los eventos de puntero y no se toca nada mas. Es seguro: el script
 * que la anima no registra un solo oyente —mueve los circulos con
 * requestAnimationFrame— asi que no pierde nada, y de paso cubre cualquier otra
 * pagina donde el contenido quede por debajo.
 */
.glow-container {
  pointer-events: none;
}

/*
 * Pagina de resultados de busqueda.
 *
 * Replica el estilo de la pagina de resultados del sitio original, medido sobre
 * ella: contenedor de 1140 px, titulo Roboto 60/500 en blanco, y una fila por
 * resultado con el titulo a la izquierda en 28/500 y "LEER MAS" a la derecha en
 * el amarillo del kit. Las filas miden 80 px y se separan 30.
 *
 * Lo unico que se aparta del original es el agrupado por seccion —que el
 * original no tiene y aca ordena 47 resultados de golpe— y el campo de busqueda,
 * que se conserva para poder rehacer la busqueda sin volver a abrir la lupa.
 */
.bva-buscar {
  color: var(--e-global-color-text, #E9E8EE);
  display: flex;
  justify-content: center;
  padding: 72px 20px 96px;
}

.bva-buscar__caja {
  max-width: 1140px;
  width: 100%;
}

.bva-buscar__titulo {
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  font-weight: 500;
  line-height: 1;
  margin: 0 0 40px;
}

.bva-buscar__form {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  max-width: 720px;
}

.bva-buscar__input {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  color: #1A1C21;
  flex: 1;
  font-size: 16px;
  padding: 12px 14px;
}

.bva-buscar__boton {
  background: var(--e-global-color-secondary, #FBBA00);
  border: 0;
  border-radius: 4px;
  color: var(--e-global-color-accent, #1A1C21);
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 12px 26px;
  text-transform: uppercase;
}

.bva-buscar__estado {
  color: rgba(233, 232, 238, 0.7);
  font-size: 14px;
  margin: 0 0 28px;
}

.bva-buscar__grupo {
  margin-bottom: 44px;
}

.bva-buscar__grupo-titulo {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--e-global-color-secondary, #FBBA00);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 6px;
  padding-bottom: 10px;
  text-transform: uppercase;
}

.bva-buscar__lista {
  display: grid;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* La fila: titulo a la izquierda, accion a la derecha. 4fr 1fr como el
   original, centrado en vertical, con 20 px arriba y abajo. */
.bva-buscar__fila {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: 4fr 1fr;
  /* 20 px tambien a los costados: en el original el contenido de la fila mide
     1100 dentro de un contenedor de 1140. */
  padding: 20px;
}

.bva-buscar__enlace {
  color: var(--e-global-color-text, #E9E8EE);
  font-family: "Roboto", sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.bva-buscar__enlace:hover,
.bva-buscar__enlace:focus {
  color: var(--e-global-color-fc81c4b, #FCC643);
}

.bva-buscar__mas {
  align-items: center;
  color: var(--e-global-color-secondary, #FBBA00);
  display: inline-flex;
  font-size: 16px;
  font-weight: 600;
  gap: 12px;
  justify-self: end;
  /* Sin interlineado propio la fila creceria 8 px de mas y dejaria de medir
     los 80 del original. */
  line-height: 1;
  padding: 12px 24px;
  text-decoration: none;
  white-space: nowrap;
}

.bva-buscar__mas svg {
  fill: currentColor;
  height: 14px;
  width: 14px;
}

.bva-buscar__mas:hover,
.bva-buscar__mas:focus {
  color: var(--e-global-color-fc81c4b, #FCC643);
}

/* Igual que el original: por debajo de 1024 la fila se apila, el titulo baja a
   22 px y se van los 20 px de aire, que en columna sobran. */
@media (max-width: 1024px) {
  .bva-buscar__titulo {
    font-size: clamp(30px, 6vw, 44px);
  }

  .bva-buscar__fila {
    gap: 4px;
    grid-template-columns: 1fr;
    padding: 0;
  }

  .bva-buscar__enlace {
    font-size: 22px;
  }

  .bva-buscar__mas {
    justify-self: start;
    padding: 4px 0;
  }
}

.bva-sin-resultados {
  color: rgba(233, 232, 238, 0.7);
  font-size: 15px;
  padding: 28px 0;
  text-align: center;
}

/*
 * Aviso del formulario de suscripción (T-29 del UAT).
 *
 * El mirror no tenía nada parecido: el formulario mostraba un cartel verde
 * puesto a mano por el build, que además mentía. Estos son los dos estados
 * reales, el de alta hecha y el de error.
 */
.bva-suscripcion__aviso {
  background: #0a7d32;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  margin-top: 12px;
  padding: 12px 16px;
}

.bva-suscripcion__aviso--error {
  background: #8a1c1c;
}

/*
 * Ajustes de contenedor y contención de desborde horizontal (Resumen de Mercado y global).
 *
 * 1. En el contenedor de Resumen de Mercado (7cf341b), el mirror ubica dos vectores
 *    decorativos con posicionamiento absoluto (bf37d2e en left: -30px y 3b94fd8 en
 *    right: -135px con 500px de ancho). Al no tener overflow: hidden (como sí lo tienen
 *    618907a y 55da8ac), 3b94fd8 desborda por la derecha y ensancha el documento,
 *    desplazando el centrado de todas las secciones boxed posteriores (64c367d, 618907a, etc.)
 *    y generando problemas de margen en toda la página inferior.
 *
 * 2. Protección general contra desbordes horizontales en html y body.
 *
 * 3. En Volumen Acumulado (chartAcumulado), se asegura que el contenedor .chart-container
 *    ocupe el 100% del ancho con posición relativa y sin desbordes flexbox.
 */
html,
body {
  overflow-x: clip;
}

.elementor-12 .elementor-element.elementor-element-7cf341b {
  overflow: hidden;
  position: relative;
}

.chart-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 550px;
}

@media (max-width: 768px) {
  .chart-container {
    height: 300px;
  }
}