/* =========================
   BOTÓN GUARDAR PRO
========================= */

.btn-guardar {
  border: none;
  font-size: 18px;
  font-weight: 500;

  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

/* TEXTO */
.btn-guardar span {
  position: relative;
  z-index: 2;
}

/* =========================
   BARRA DE PROGRESO
========================= */
.btn-guardar::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;

  height: 6px;
  width: 0%;

  background: #000;

  /* 🔥 SIN transición por defecto */
  transition: width 0s;
}

/* =========================
   FILL
========================= */
.btn-guardar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 0%;
  background: #000;

  transition: height 0.25s ease-in;
  z-index: 1;
}

/* =========================
   ESTADOS
========================= */

/* CARGANDO (2s real) */
.btn-guardar.loading:not(.reset)::before {
  width: 100%;
  transition: width 2s linear;
}

/* COMPLETADO (sube fill) */
.btn-guardar.completed::after {
  height: 100%;
  transition: height 0.5s ease-out;
}

/* RESET (baja rápido) */
.btn-guardar.reset::before {
  width: 0%;
  transition: width 0.25s ease-in;
}

/* texto blanco sobre fondo */
.btn-guardar.completed span {
  color: #fff;
}

.nombre-recortado {
  max-width: 160px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.codigo {
  white-space: nowrap;
}

.btn-guardar .texto {
  width: 100%;
  text-align: center;
}