/**
 * @file
 * CSP Fix - Estilos para reemplazar inline CSS de blazy/slick y superfish.
 *
 * Este archivo contiene reglas CSS que reemplazan los estilos inline
 * generados por los módulos blazy y superfish, permitiendo cumplir
 * con políticas de Content Security Policy (CSP).
 *
 * NOTA: Los anchos de megamenu están definidos directamente en style.css
 * para cada submenu específico (submenu-contenedor-*).
 */

/* =============================================================================
   BLAZY - Aspect Ratio via data-attributes
   ============================================================================= */

/**
 * Blazy usa padding-bottom hack para mantener aspect ratio.
 * Convertimos a CSS custom properties + aspect-ratio nativo donde sea posible.
 *
 * IMPORTANTE: Solo aplicar a elementos .blazy o .media--ratio para no afectar
 * otros elementos como slides de Slick con contenido personalizado.
 */

/* Contenedor con ratio dinámico - SOLO para elementos blazy/media específicos */
.blazy[data-ratio-padding],
.media--ratio[data-ratio-padding] {
  position: relative;
  height: 0;
  padding-bottom: var(--blazy-padding, 56.25%); /* Default 16:9 */
  overflow: hidden;
}

/* Soporte para aspect-ratio nativo (navegadores modernos) */
@supports (aspect-ratio: 1) {
  .blazy[data-ratio-padding],
  .media--ratio[data-ratio-padding] {
    height: auto;
    padding-bottom: 0;
    aspect-ratio: var(--blazy-aspect-ratio, 16/9);
  }
}

/* Ratios comunes predefinidos - solo para elementos blazy/media */
.blazy[data-ratio-padding="25"],
.media--ratio[data-ratio-padding="25"] { --blazy-padding: 25%; --blazy-aspect-ratio: 4/1; }
.blazy[data-ratio-padding="33.33"],
.media--ratio[data-ratio-padding="33.33"] { --blazy-padding: 33.33%; --blazy-aspect-ratio: 3/1; }
.blazy[data-ratio-padding="50"],
.media--ratio[data-ratio-padding="50"] { --blazy-padding: 50%; --blazy-aspect-ratio: 2/1; }
.blazy[data-ratio-padding="56.25"],
.media--ratio[data-ratio-padding="56.25"] { --blazy-padding: 56.25%; --blazy-aspect-ratio: 16/9; }
.blazy[data-ratio-padding="62.5"],
.media--ratio[data-ratio-padding="62.5"] { --blazy-padding: 62.5%; --blazy-aspect-ratio: 16/10; }
.blazy[data-ratio-padding="66.67"],
.media--ratio[data-ratio-padding="66.67"] { --blazy-padding: 66.67%; --blazy-aspect-ratio: 3/2; }
.blazy[data-ratio-padding="75"],
.media--ratio[data-ratio-padding="75"] { --blazy-padding: 75%; --blazy-aspect-ratio: 4/3; }
.blazy[data-ratio-padding="100"],
.media--ratio[data-ratio-padding="100"] { --blazy-padding: 100%; --blazy-aspect-ratio: 1/1; }
.blazy[data-ratio-padding="133.33"],
.media--ratio[data-ratio-padding="133.33"] { --blazy-padding: 133.33%; --blazy-aspect-ratio: 3/4; }
.blazy[data-ratio-padding="150"],
.media--ratio[data-ratio-padding="150"] { --blazy-padding: 150%; --blazy-aspect-ratio: 2/3; }
.blazy[data-ratio-padding="177.78"],
.media--ratio[data-ratio-padding="177.78"] { --blazy-padding: 177.78%; --blazy-aspect-ratio: 9/16; }

/* =============================================================================
   BLAZY - Background Images via data-attributes
   ============================================================================= */

/**
 * Blazy genera inline: style="background-image: url(...)"
 * El JavaScript aplicará la URL como CSS custom property.
 * Solo aplicar a elementos con clase blazy o b-bg
 */

.blazy[data-bg-src],
.b-bg[data-bg-src],
.media[data-bg-src] {
  background-image: var(--blazy-bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =============================================================================
   BLAZY - Width para Lightbox via data-attributes
   ============================================================================= */

/**
 * Lightbox de Blazy usa inline: style="width: Xpx"
 * Solo aplicar a elementos de lightbox
 */

.litebox[data-style-width],
.blazy[data-style-width],
.media--ratio[data-style-width] {
  width: var(--blazy-width, auto);
  max-width: 100%;
}

/* Anchos comunes para lightbox */
.litebox[data-style-width="320"],
.blazy[data-style-width="320"] { --blazy-width: 320px; }
.litebox[data-style-width="480"],
.blazy[data-style-width="480"] { --blazy-width: 480px; }
.litebox[data-style-width="640"],
.blazy[data-style-width="640"] { --blazy-width: 640px; }
.litebox[data-style-width="720"],
.blazy[data-style-width="720"] { --blazy-width: 720px; }
.litebox[data-style-width="800"],
.blazy[data-style-width="800"] { --blazy-width: 800px; }
.litebox[data-style-width="960"],
.blazy[data-style-width="960"] { --blazy-width: 960px; }
.litebox[data-style-width="1024"],
.blazy[data-style-width="1024"] { --blazy-width: 1024px; }
.litebox[data-style-width="1280"],
.blazy[data-style-width="1280"] { --blazy-width: 1280px; }
.litebox[data-style-width="1920"],
.blazy[data-style-width="1920"] { --blazy-width: 1920px; }

/* =============================================================================
   BLAZY - Media ratio container
   ============================================================================= */

/**
 * Clase media--ratio usada por Blazy para contenedores con ratio.
 */

.media--ratio {
  position: relative;
  display: block;
  overflow: hidden;
}

.media--ratio > img,
.media--ratio > iframe,
.media--ratio > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =============================================================================
   SUPERFISH/SUPERSUBS - Menú móvil via CSS custom properties
   ============================================================================= */

/**
 * El plugin supersubs.js calcula anchos dinámicos para submenús y aplica
 * estilos inline. Reemplazamos con CSS custom properties.
 */

/* Elemento temporal para medición de fuente (reemplaza inline style) */
.sf-fontsize-measure {
  padding: 0;
  position: absolute;
  top: -99999em;
  width: auto;
}

/* Elementos durante medición (reemplaza inline white-space, float, width) */
.sf-menu .sf-measuring {
  white-space: nowrap;
  float: none;
  width: auto;
}

/* Aplicar width via CSS custom property */
.sf-menu ul.sf-has-width,
.sf-menu li.sf-has-width,
.sf-menu ol.sf-has-width,
.sf-menu .sf-multicolumn-column.sf-has-width {
  width: var(--sf-width, auto);
}

/* Aplicar offset (left/right) via CSS custom property */
.sf-menu ul.sf-has-offset {
  left: var(--sf-offset, auto);
}

.sf-menu ul.sf-has-offset[style*="--sf-offset-dir: right"] {
  left: auto;
  right: var(--sf-offset, auto);
}

/* Fallback: anchos predefinidos comunes en em para submenús */
.sf-menu ul[data-sf-width="12"] { --sf-width: 12em; }
.sf-menu ul[data-sf-width="13"] { --sf-width: 13em; }
.sf-menu ul[data-sf-width="14"] { --sf-width: 14em; }
.sf-menu ul[data-sf-width="15"] { --sf-width: 15em; }
.sf-menu ul[data-sf-width="16"] { --sf-width: 16em; }
.sf-menu ul[data-sf-width="17"] { --sf-width: 17em; }
.sf-menu ul[data-sf-width="18"] { --sf-width: 18em; }
.sf-menu ul[data-sf-width="19"] { --sf-width: 19em; }
.sf-menu ul[data-sf-width="20"] { --sf-width: 20em; }
.sf-menu ul[data-sf-width="21"] { --sf-width: 21em; }
.sf-menu ul[data-sf-width="22"] { --sf-width: 22em; }
.sf-menu ul[data-sf-width="23"] { --sf-width: 23em; }
.sf-menu ul[data-sf-width="24"] { --sf-width: 24em; }
.sf-menu ul[data-sf-width="25"] { --sf-width: 25em; }
.sf-menu ul[data-sf-width="26"] { --sf-width: 26em; }
.sf-menu ul[data-sf-width="27"] { --sf-width: 27em; }