/* Identidad visual: tamaños de las imágenes propias (3.36.0).
   Cada regla reproduce el hueco que ocupaba el dibujo vectorial original, para
   que la imagen subida caiga exactamente en su lugar. */

.sma-if-custom-art {
  display: block;
  max-width: 100%;
  object-fit: contain;
}

/* Portada: la flama grande, posicionada sobre las montañas. */
.sma-if-prevention-hero-art > .sma-if-custom-art {
  position: absolute;
  right: 22%;
  bottom: 18%;
  width: 145px;
  height: 145px;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.35));
}

/* Triángulo del fuego. */
.sma-if-triangle-art > .sma-if-custom-art {
  width: 100%;
  max-width: 570px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.18));
}

/* Tipos de incendio. */
.sma-if-fire-types .sma-if-custom-art {
  width: 78px;
  height: 78px;
}

/* Decisiones que previenen. */
.sma-if-prevention-rules article > .sma-if-custom-art {
  position: relative;
  z-index: 2;
  width: 82px;
  height: 82px;
  margin: 13px auto 42px;
}

/* Escenarios de “¿Qué vas a hacer hoy?”. */
.sma-if-scenario-visual > .sma-if-custom-art {
  position: relative;
  z-index: 2;
  width: 112px;
  height: 112px;
}

/* Símbolo de zona de veda. */
.sma-if-fire-ban-symbol > .sma-if-custom-art {
  width: 112px;
  height: 112px;
}

/* Teléfono, en sus cuatro apariciones. */
.sma-if-emergency-button .sma-if-custom-art {
  width: 32px;
  height: 32px;
}
.sma-if-mobile-emergency .sma-if-custom-art {
  width: 27px;
  height: 27px;
}
.sma-if-report-fire-title > .sma-if-custom-art {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
}
.sma-if-alert-icon .sma-if-custom-art {
  width: 100%;
  height: 100%;
}

/* Pasos del bloque de reporte: la imagen propia releva al círculo numerado. */
.sma-if-report-fire li.has-custom-step:before {
  display: none;
}
.sma-if-report-fire li .sma-if-custom-art.is-report-step {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
}

@media (max-width: 900px) {
  .sma-if-report-fire-title > .sma-if-custom-art {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }
}

@media (max-width: 620px) {
  .sma-if-fire-types .sma-if-custom-art {
    width: 62px;
    height: 62px;
  }
  .sma-if-fire-ban-symbol > .sma-if-custom-art {
    width: 82px;
    height: 82px;
  }
  .sma-if-report-fire-title > .sma-if-custom-art {
    width: 45px;
    height: 45px;
    flex-basis: 45px;
  }
  .sma-if-prevention-hero-art > .sma-if-custom-art {
    right: 18%;
    width: 110px;
    height: 110px;
  }
}

/* Marcadores y distintivos que el mapa arma con JavaScript. Las imágenes
   propias heredan la clase del vector que sustituyen, pero las reglas que
   apuntaban a «svg» necesitan su equivalente para una imagen. */
.sma-if-flame.sma-if-custom-art,
.sma-if-results-flame.sma-if-custom-art,
.sma-if-aircraft-vector.sma-if-custom-art,
.sma-if-results-aircraft-vector.sma-if-custom-art {
  width: 100%;
  height: 100%;
}
.sma-if-operation-marker .sma-if-custom-art.sma-if-pin-art {
  display: block;
  width: 100%;
  height: 100%;
}
.sma-if-report-type-icon .sma-if-custom-art.sma-if-report-art {
  display: block;
  width: 29px;
  height: 29px;
}
.sma-if-panel-report-icon .sma-if-custom-art.sma-if-report-art {
  width: 36px;
  height: 36px;
}
@media (max-width: 800px) {
  .sma-if-report-type-icon .sma-if-custom-art.sma-if-report-art {
    width: 25px;
    height: 25px;
  }
}

/* La tacha de prohibición, dibujada como SVG.

   Es un SVG y no una caja a propósito: así el navegador solo la considera
   tocada cuando el clic cae sobre la tinta -el aro o la diagonal-, y el hueco
   del centro deja pasar el clic al icono que está debajo. Con una caja, la
   tacha tapaba al icono y había que llegar a ella por un botón.

   Cada regla repite position:absolute porque la hoja de la página trae
   «.sma-if-scenario-visual > span { position: relative }» y reglas parecidas
   que por especificidad le ganarían a la base. */
.sma-if-prevention-rules article.is-prohibition.has-ring-element:after,
.sma-if-scenario-visual.is-prohibition.has-ring-element:after,
.sma-if-fire-ban-symbol.has-ring-element:after {
  display: none;
}
.sma-if-ring {
  position: absolute;
  z-index: 3;
  overflow: visible;
  pointer-events: none;
}

/* Los grosores van en unidades del viewBox, así que crecen y encogen junto con
   la caja de la tacha. Llevan «px» porque dentro de un dibujo con viewBox un px
   es una unidad del dibujo, y porque sin unidad el navegador rechaza el calc()
   de la diagonal y el trazo se queda sin grosor.

   Se declaran en el contenedor y no en el aro a propósito: así el valor llega
   heredado, y cuando la persona cambia el grosor desde el editor -que escribe
   la variable en el aro mismo- ese valor gana sin pelear con la especificidad
   de estas reglas. */
.sma-if-prevention-rules article.is-prohibition,
.sma-if-scenario-visual.is-prohibition {
  --sma-ring-width: 5px;
  --sma-ring-slash-k: 2.7;
}
.sma-if-fire-ban-symbol {
  --sma-ring-width: 7px;
  --sma-ring-slash-k: 1.7;
}

.sma-if-ring .sma-if-ring-circle,
.sma-if-ring .sma-if-ring-slash,
.sma-if-ring .sma-if-ring-hit {
  fill: none;
  stroke: var(--sma-ring-color, var(--p-red, #ef3340));
}
.sma-if-ring .sma-if-ring-circle {
  stroke-width: var(--sma-ring-width, 5px);
}
/* La diagonal es más gruesa que el aro, como la dibujaba el degradado. */
.sma-if-ring .sma-if-ring-slash {
  stroke-width: calc(var(--sma-ring-width, 5px) * var(--sma-ring-slash-k, 2.7));
  stroke-linecap: butt;
}
/* Aro invisible, solo para tener dónde darle clic: una línea de cinco unidades
   es un blanco muy chico para el dedo. No se pinta, únicamente recibe el
   toque, y solo en modo edición. */
.sma-if-ring .sma-if-ring-hit {
  stroke: transparent;
  stroke-width: calc(var(--sma-ring-width, 5px) * 3.5);
}
body.sma-ed-on .sma-if-ring .sma-if-ring-circle,
body.sma-ed-on .sma-if-ring .sma-if-ring-slash,
body.sma-ed-on .sma-if-ring .sma-if-ring-hit {
  /* Solo la tinta recibe el ratón: el hueco del centro deja pasar el clic al
     icono que está debajo, que por eso ya se puede seleccionar directo. */
  pointer-events: stroke;
  cursor: pointer;
}

/* Cada regla repite position:absolute porque la hoja de la página trae
   «.sma-if-scenario-visual > span { position: relative }» y reglas parecidas
   que por especificidad le ganarían a la base. Las medidas son las mismas del
   pseudo-elemento que sustituye. */
.sma-if-prevention-rules article.is-prohibition > .sma-if-ring {
  position: absolute;
  top: 31px;
  left: 50%;
  width: 102px;
  height: 102px;
  transform: translateX(-50%) scale(var(--sma-ring-scale, 1));
}
.sma-if-scenario-visual.is-prohibition > .sma-if-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 137px;
  height: 137px;
  transform: translate(-50%, -62%) scale(var(--sma-ring-scale, 1));
}
.sma-if-fire-ban-symbol > .sma-if-ring {
  position: absolute;
  inset: 23px;
  width: auto;
  height: auto;
  transform: scale(var(--sma-ring-scale, 1));
}
@media (max-width: 620px) {
  .sma-if-scenario-visual.is-prohibition > .sma-if-ring {
    width: 112px;
    height: 112px;
  }
  .sma-if-fire-ban-symbol > .sma-if-ring {
    inset: 17px;
  }
}

/* Cuadros agregados desde el editor. */
.sma-if-insert {
  display: inline-block;
  max-width: 100%;
}
.sma-if-insert.is-empty {
  border: 1px dashed currentColor;
  border-radius: 8px;
  padding: 8px 12px;
  opacity: 0.75;
  font-size: 13px;
}