/* Estilo base */
.botones,
.btn-danger,
.btn-warning,
.btn-success,
.btn-secondary {
  border: 1px solid #131212;
  border-radius: 6px;  
  padding: 6px 12px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  box-shadow: 4px 4px #393939;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Botón genérico */
.botones {
  background: var(--color-textos);
}
.botones:hover {
  background: var(--color-textos);
  transform: translateY(-1px); /* se levanta un poquito */
}
.botones:active {
  background-color: var(--color-textos);
  transform: translateY(2px) translateX(2px);
  box-shadow: none;
}

/* Botón eliminar */
.btn-danger {
  background-color: var(--err);
}
.btn-danger:hover {
  background: var(--err);
  transform: translateY(-1px);
  border: 1px solid #131212;
}
.btn-danger:active {
  background: var(--err);
  transform: translateY(2px) translateX(2px);
  box-shadow: none;
}

/* Botón editar */
.btn-warning {
  background-color: var(--warn) !important;
}
.btn-warning:hover {
  background: var(--warn);
  transform: translateY(-1px);
  border: 1px solid #131212;
}
.btn-warning:active {
  background: var(--warn);
  transform: translateY(2px) translateX(2px);
  box-shadow: none;
}

/* Botón guardar */
.btn-success {
  background-color: var(--ok);
}
.btn-success:hover {
  background: var(--ok);
  transform: translateY(-1px);
  border: 1px solid #131212;
}
.btn-success:active {
  background: var(--ok);
  transform: translateY(2px) translateX(2px);
  box-shadow: none;
}

/* Botón volver */
.btn-secondary {
  background-color: rgb(82, 82, 93);
}
.btn-secondary:hover {
  background: rgb(82, 82, 93);
  transform: translateY(-1px);
  border: 1px solid #131212;
}
.btn-secondary:active {
  background: rgb(82, 82, 93);
  transform: translateY(2px) translateX(2px);
  box-shadow: none;
}


/*botones de la tabla*/

/* Estilo base para todos los badges */
.badge {
  font-size: 0.85rem;
  padding: 0.45em 0.7em;
  border-radius: 0.5rem;
  font-weight: 600;
  color: white !important; /* texto blanco por defecto */
}

/* Verde moderno para "sí" o disminuciones */
.badge-si {
  background-color: var(--ok);
  color: white !important;
}

/* Rojo moderno para "no" o aumentos */
.badge-no {
  background-color: var(--err);
  color: white !important;
}

/* Gris neutro */
.badge-neutral {
  background-color: #6c757d;
  color: white !important;
}


/*graficos*/
.medida-box {
  background-color: #2a2a3d;
  color: #ffffff;
  border-radius: 10px;
  border: 1px solid #444;
  transition: transform 0.2s ease;
}

.medida-box:hover {
  transform: scale(1.02);
}

/* Stepper wrapper */
.stepper-wrapper {
  max-width: 100%;
  overflow-x: auto;
}

/* Stepper base */
.stepper {
  position: relative;
}

.step {
  text-align: center;
}

.step-icon {
  width: 50px;
  height: 50px;
  font-weight: bold;
  font-size: 1.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: transform 0.2s ease, background-color 0.3s ease;
  margin: 15px;
}

/* Estados */
.step-active {
  background-color: var(--color-textos); /* activo → tu color principal */
  box-shadow: 2px 2px 0 #393939;
}

.step-done {
  background-color: var(--amarillito); /* pasos completados → amarillito */
  color: var(--color-textos);
}

.step-pending {
  background-color: #bfbfbf; /* pasos pendientes → gris */
}

/* Hover efecto */
.step:hover .step-icon {
  transform: scale(1.1);
  box-shadow: 2px 2px 0 #060606;
}


/* Línea entre pasos */
.step-line {
  flex: 1;
  height: 4px;
  background-color: var(--color-textos);
  margin: 0 10px;
  border-radius: 2px;
}

/* Label */
.step-label {
  font-size: 0.9rem;
  color: var(--color-textos);
  font-weight: 600;
  max-width: 100px;
}

/* Responsive */
@media (max-width: 768px) {
  .stepper {
    flex-direction: column;
  }

  .step-line {
    display: none;
  }

  .step-label {
    max-width: none;
  }
}