.card-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
  /* Gris más oscuro */
  filter: brightness(0) saturate(100%) invert(70%) sepia(5%) saturate(85%) hue-rotate(180deg) brightness(80%) contrast(95%);
}


/* Botón bordó estilo moderno con letra fina usando Inter */
.btn-bordo-modern {
  background-color: #800020; /* Bordó / granate oscuro */
  color: #fff; /* Texto blanco */
  font-family: 'inter', sans-serif; /* Fuente moderna y fina */
  font-weight: 300; /* Letra fina */
  font-size: 0.95rem; /* Tamaño legible */
  text-transform: none; /* Letras normales */
  text-decoration: none; /* Sin subrayado */
  padding: 0.5rem 1.2rem; /* Padding cómodo */
  border-radius: 6px; /* Bordes casi cuadrados con leve redondeado */
  border: none; /* Sin borde visible */
  cursor: pointer;
  transition: all 0.2s ease-in-out; /* Transición suave */
}

/* Hover */
.btn-bordo-modern:hover {
  background-color: #b2003f; /* Bordó más brillante */
  color: #fff;
  text-decoration: none;
}

/* Focus */
.btn-bordo-modern:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(128, 0, 32, 0.3); /* Halo sutil */
}

/* Active */
.btn-bordo-modern:active {
  background-color: #600018; /* Bordó más oscuro */
}

/* Disabled */
.btn-bordo-modern:disabled {
  background-color: #800020;
  color: #ccc;
  cursor: not-allowed;
  text-decoration: none;
}
</style>

<!-- Botón de ejemplo -->
<button class="btn-bordo-modern">Mi Botón</button>


/* BOTÓN */
.btn-bordo-modern {
  margin-top: 10px;
  padding: 10px;

  background-color: #428bca;
  color: white;

  border: 1px solid #357ebd;
  border-radius: 4px;

  cursor: pointer;
}

.btn-bordo-modern:hover {
  background-color: #3071a9;
}

/* ALERTAS */
.alert {
  margin-top: 10px;
}