/* Base Button Style */
.btn-indigo {
  height: 48px;
  width: fit-content;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-indigo);
  color: var(--color-text);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.3s, color 0.3s;
  text-decoration: none;
  padding: 0 1.5rem;
  margin: 1rem auto; 
}

/* Estado Hover */
.btn-indigo:hover {
  background-color: #7040ff; /* Un tono más claro */
  color: #fff;
}

/* Alternativas de colores para el estado hover, según el esquema indigo */
.btn-indigo-hover-100:hover {
  background-color: #e0cfff;
}

.btn-indigo-hover-200:hover {
  background-color: #c4a8ff;
}

.btn-indigo-hover-300:hover {
  background-color: #aa84ff;
}

.btn-indigo-hover-400:hover {
  background-color: #8d62ff;
}

.btn-indigo-hover-500:hover {
  background-color: #7040ff;
}

.btn-indigo-hover-600:hover {
  background-color: #5630cc;
}

.btn-indigo-hover-700:hover {
  background-color: #422399;
}

.btn-indigo-hover-800:hover {
  background-color: #301766;
}

.btn-indigo-hover-900:hover {
  background-color: #200c33;
}

/* Estado Press */
.btn-indigo:active {
  background-color: #422399; /* Un tono más oscuro */
}

/* Estado Inactive */
.btn-indigo:disabled {
  background-color: #c4a8ff; /* Color más claro y opaco */
  color: #ffffff;
  cursor: not-allowed;
}

/* Estado Focus */
.btn-indigo:focus {
  outline: 2px solid #6610f2; /* Un borde de enfoque */
  outline-offset: 2px;
}

/* Variantes de Botones */

/* Botón Destructivo */
.btn-red {
  background-color: #dc3545;
  color: #fff;
}

.btn-red:hover {
  background-color: #c82333;
}

.btn-red:active {
  background-color: #bd2130;
}

.btn-red:disabled {
  background-color: #f8d7da;
  color: #ffffff;
  cursor: not-allowed;
}

.btn-red:focus {
  outline: 2px solid #dc3545;
  outline-offset: 2px;
}

/* Botón Editorial/Dark */
.btn-dark {
  background-color: #343a40;
  color: #fff;
}

.btn-dark:hover {
  background-color: #495057;
}

.btn-dark:active {
  background-color: #23272b;
}

.btn-dark:disabled {
  background-color: #6c757d;
  color: #ffffff;
  cursor: not-allowed;
}

.btn-dark:focus {
  outline: 2px solid #343a40;
  outline-offset: 2px;
}

/* Botón Transaccional */
.btn-green {
  background-color: #28a745;
  color: #fff;
}

.btn-green:hover {
  background-color: #218838;
}

.btn-green:active {
  background-color: #1e7e34;
}

.btn-green:disabled {
  background-color: #c3e6cb;
  color: #ffffff;
  cursor: not-allowed;
}

.btn-green:focus {
  outline: 2px solid #28a745;
  outline-offset: 2px;
}

/* Estilos Globales */
.bg-indigo { background-color: #6610f2; }
.text-indigo { color: #6610f2; }
.bg-indigo-100 { background-color: #e0cfff; }
.bg-indigo-200 { background-color: #c4a8ff; }
.bg-indigo-300 { background-color: #aa84ff; }
.bg-indigo-400 { background-color: #8d62ff; }
.bg-indigo-500 { background-color: #7040ff; }
.bg-indigo-600 { background-color: #5630cc; }
.bg-indigo-700 { background-color: #422399; }
.bg-indigo-800 { background-color: #301766; }
.bg-indigo-900 { background-color: #200c33; }
.btn-outline-indigo {
  border-color: #6610f2;
  color: #6610f2;
}
.btn-outline-indigo:hover {
  background-color: #6610f2;
  color: #fff;
}