/* Estilos para el formulario de ventas */
.formulario {
    border: 2px solid #007bff; /* Color del borde azul */
    border-radius: 10px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interno */
    margin-bottom: 20px; /* Margen inferior para separarlo de otros elementos */
}
.vr {
  border-left: 2px solid #007bff;
  height: 100%;
}

.login.card {
  max-width: 500px; /* Limita el ancho máximo del formulario */
  max-height: 1000px;
}
.form-outline {
  margin-bottom: 1.5rem; /* Espacio entre los elementos del formulario */
}

.shadow-circle {
    position: relative;
    transition: transform 0.3s ease-in-out;
  }
  
  .shadow-circle::after {
    content: "";
    position: absolute;
    bottom: -20px; /* Más distancia para el efecto de flotación */
    left: 50%;
    transform: translateX(-50%);
    width: 80%; /* Tamaño más grande para una sombra más prominente */
    height: 30px; /* Altura aumentada para una sombra más prominente */
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    z-index: -1;
    transition: bottom 0.5s ease-in-out;
  }
  
  .shadow-circle:hover {
    transform: translateY(-15px); /* Movimiento hacia arriba para el efecto de flotación */
  }
  
  .shadow-circle:hover::after {
    bottom: -40px; /* Sombra más baja al flotar */
  }
  
  .venta-anulada {
    text-decoration: line-through;
    color: #ccc;
  }
  
  .flash-message {
    text-align: center;
    font-weight: bold;
}


/* Estilos base para las tarjetas */
.card {
  margin: 10px;
  flex: 1 1 calc(25% - 20px); /* Ajusta el ancho de las tarjetas */
  box-sizing: border-box;
}

/* Media query para pantallas más pequeñas */
@media (max-width: 768px) {
  .card {
    flex: 1 1 calc(50% - 20px); /* Ajusta el ancho de las tarjetas para pantallas medianas */
  }
}

@media (max-width: 480px) {
  .card {
    flex: 1 1 100%; /* Apila las tarjetas verticalmente para pantallas pequeñas */
  }
}

.gradient-custom {
  /* Degradado de fondo personalizado */
  background: linear-gradient(45deg, #4e54c8, #8f94fb);
  height: 100vh;
}
.login img {
  max-width: 250px; /* Ajusta el tamaño máximo de la imagen */
  margin-bottom: 1rem;
}
.login-card {
  border-radius: 1rem;
}


.resumen-table {
  border-collapse: collapse;
  width: 50%; /* Ajusta el ancho según sea necesario */
  margin-top: 20px;
}
.resumen-table th, .resumen-table td {
  text-align: left;
  padding: 8px;
}
.resumen-table th {
  background-color: #f2f2f2;
}



html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  flex: 1;
}

/* Asegúrate de que el footer esté al final */
footer {
  background-color: #343a40; /* mismo color que bg-dark */
  color: white;
  text-align: center;
  padding: 1rem 0;
  position: relative;
  width: 100%;
}

.table-shadow {
  box-shadow: 0 0 20px rgba(15, 106, 235, 0.8);
}



.card2 {
  position: relative;
  height: 260px;
  background-color: #101010;
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
  color: #eeeeee;
  padding: 20px;
  box-sizing: border-box;
}

/* Borde animado */
.card2::before {
  content: "";
  position: absolute;
  top: -4px;  /* Aumenta el valor para un borde más grueso */
  left: -4px;  /* Aumenta el valor para un borde más grueso */
  right: -4px;  /* Aumenta el valor para un borde más grueso */
  bottom: -4px;  /* Aumenta el valor para un borde más grueso */
  background: linear-gradient(45deg, #00ffcc, #ff0066, #00ffcc, #ff0066);
  background-size: 400% 400%;
  z-index: -1;
  animation: gradient-border 4s linear infinite;
}

/* Fondo interno */
.card2::after {
  content: "";
  position: absolute;
  top: 4px;  /* Ajusta para que coincida con el grosor del borde */
  left: 4px;  /* Ajusta para que coincida con el grosor del borde */
  right: 4px;  /* Ajusta para que coincida con el grosor del borde */
  bottom: 4px;  /* Ajusta para que coincida con el grosor del borde */
  background: #101010;
  border-radius: 8px;
  z-index: -1;
}

/* Contenedor de la imagen */
.card-image-container {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
}

/* Estilo de la imagen */
.card-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Cuerpo de la tarjeta */
.card-body {
  text-align: center;
  width: 100%;
}

/* Título de la tarjeta */
.card-title {
  margin-bottom: 0.5rem;
}

/* Animación del borde */
@keyframes gradient-border {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.sort-link {
  text-decoration: none; /* Elimina el subrayado */
  color: inherit; /* Usa el color normal del texto */
  font-weight: bold; /* Opcional: hacer el texto más notorio */
  cursor: pointer; /* Mantiene la experiencia de clic */
}