/* Estilos front-office para ecommcatalog */

.ecommcatalog-download {
  margin: 10px 0;
}

.ecommcatalog-download .btn.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color3, #000000);
  border-color: var(--color3, #000000);
}

.ecommcatalog-download .btn.btn-primary:hover {
  background: var(--color3, #000000);
  border-color: var(--color3, #000000);
  opacity: 0.85;
}

/* Icono (y texto) SIEMPRE en blanco, pase lo que pase con el tema */
.ecommcatalog-download .btn.btn-primary,
.ecommcatalog-download .btn.btn-primary:hover,
.ecommcatalog-download .btn.btn-primary:focus,
.ecommcatalog-download .btn.btn-primary:active,
.ecommcatalog-download .btn.btn-primary .material-icons {
  color: #fff !important;
}

.ecommcatalog-download .material-icons,
.ecommcatalog-download span {
  vertical-align: middle;
}

/* Estado "generando PDF": aro girando (no depende de la fuente de iconos) */
.ecommcatalog-download .btn.btn-primary.is-loading {
  pointer-events: none;
  opacity: 0.95;
  cursor: progress;
}

/* Oculta el glyph del icono y dibuja un aro girando en su lugar */
.ecommcatalog-download .btn.btn-primary.is-loading .material-icons {
  position: relative;
  width: 1em;
  height: 1em;
  color: transparent !important;
}

.ecommcatalog-download .btn.btn-primary.is-loading .material-icons::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ecommcatalog-spin 0.7s linear infinite;
}

@keyframes ecommcatalog-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Estado de error temporal */
.ecommcatalog-download .btn.btn-primary.has-error {
  background: #c0392b !important;
  border-color: #c0392b !important;
}