.custom-card-container {
  height: 500px;
  /* Altura máxima que puede tener el contenedor */
  overflow: auto;
  /* Permite desplazamiento cuando el contenido es mayor que el contenedor */
  position: relative;
  border: 1px solid #ccc;
  display: flex;
  /* Usa flexbox */
  flex-wrap: wrap;
  /* Permite que las tarjetas se envuelvan */
  gap: 10px;
  /* Espacio entre tarjetas */
  padding: 10px;
  /* Espacio alrededor del contenido dentro del contenedor */
}


.custom-card {
  width: 150px;
  height: 100px;
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ddd;

  display: flex;
  flex-direction: column; /* Organiza los hijos en una columna */
  justify-content: space-between; /* Espacio entre el título, staff y los íconos */
  align-items: flex-start; /* Alinea los elementos al inicio (izquierda) */
  padding: 5px; /* Añade un poco de padding */
}

.card-title {
  margin-bottom: 2px; /* Ajusta según sea necesario */
}

.card-staff {
  font-size: 0.8em; /* Hazlo más pequeño que el título */
  color: #666; /* Color gris para diferenciarlo */
  margin-bottom: 10px; /* Espacio antes de los íconos */
}

.card-icons {
  position: absolute;
  top: 5px; /* Ajusta según sea necesario */
  right: 5px; /* Ajusta según sea necesario */
  display: flex;
  gap: 5px; /* Espacio entre los íconos */
}

.assign-user-icon,
.edit-card-icon,
.delete-card-icon {
  cursor: pointer;
  /* más estilos según sea necesario */
}


.add-card {
  display: flex;
  /* Usa flexbox para alinear el contenido */
  justify-content: center;
  /* Centra horizontalmente */
  align-items: center;
  /* Centra verticalmente */
  background-color: #e9ecef;
  /* Fondo de la tarjeta, ajústalo como prefieras */
}

.add-card i {
  font-size: 24px;
  /* Tamaño del ícono */
  color: #495057;
  /* Color del ícono, ajústalo como prefieras */
}

.add-card {
  background-color: #e9ecef;
}

.add-card i {
  font-size: 24px;
  color: #495057;
}

.nav-link {
  display: flex;
  /* Establece el tab como contenedor flex */
  justify-content: space-between;
  /* Separa los elementos al principio y al final */
  align-items: center;
  /* Alinea los elementos verticalmente */
}

.tab-title {
  /* Estilos para el título del piso */
}

.icons {
  /* Alinea los íconos a la derecha */
  display: flex;
  gap: 5px;
  /* Espacio entre los íconos */
}

.edit-icon,
.delete-icon {
  cursor: pointer;
  /* Cambia el cursor para indicar que son clicables */
}

.bg-gray{
  background-color: rgb(229, 191, 186);
}

.bg-transparent{
  background-color: transparent;
}