/* css/informes-avanzados-desktop.css
   Prestax · Informes avanzados (Paso 6) — capa de escritorio, a partir de
   980px (mismo breakpoint que el resto de la app, ver A.4 en la hoja de
   ruta UX/UI). Solo activa el Bento Grid real; el resto de estilos vive en
   css/informes-avanzados.css (mobile-first). */

@media (min-width: 980px) {
  #informesAvanzadosModal .modal {
    --modal-width: min(1180px, 96vw);
    --modal-height: min(880px, 92vh);
  }

  .ia-bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas:
      "big  big  med1 med2"
      "big  big  med7 med3"
      "med4 med4 med9 med9"
      "med8 med8 med5 med5"
      "med6 med6 sm1  sm2"
      "sm3  sm3  sm4  sm4";
    gap: 16px;
    padding: 18px;
  }

  .ia-card--big {
    display: flex;
    flex-direction: column;
  }

  .ia-card--big .ia-card__bignum {
    font-size: 40px;
  }

  .ia-card--big .ia-card__chart-wrap {
    height: 160px;
  }

  .ia-card--med .ia-card__bignum {
    font-size: 30px;
  }

  .ia-card:hover {
    border-color: rgba(255, 255, 255, 0.18);
  }

  .ia-chip {
    flex: 1 1 auto;
  }

  .ia-filters {
    padding: 12px 20px;
  }
}