/* ======== COMPLEMENTO CSS ORIGINAL=======================*/
.header-logo-center .header-icon-2-right {
  right: 10px;
}

/* ======== HOME ======================================*/
.card .card-home {
  position: relative;
}
.card.vethomeserv {
  background-color: #c2baa6;
  position: relative;
}
.card-style .card-home {
  position: relative;
}
.icono-card {
  font-size: 100px;
  opacity: 0.2;
  position: absolute;
  right: -20px;  /* Aumenta este valor para mover el ícono más a la derecha */
  top: 40px;  /* Aumenta este valor para mover el ícono más abajo */
}
/* Estilo base para dispositivos móviles */
/*.card-home {
  width: 100%;
}
.card-container {
  display: flex;
  flex-wrap: wrap; 
  justify-content: space-between;
}

@media (min-width: 768px) {
  .card-home {
    width: 45%; 
  .custom-width {
    width: 50%;
  }
}*/

/*========= LOGIN ===============================*/
/*.card-login::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.content-login {
  backdrop-filter: blur(10px);
  background-color: rgba(212, 234, 247, 0.5);
  border-radius: 15px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3); 
}*/
.card-login::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.content-login {
  backdrop-filter: blur(8px);
  background-color: rgba(0, 0, 0, 0.5); /* Ajuste a un fondo menos oscuro */
  border-radius: 15px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3); /* Borde claro sutil */
  color: white; /* Color de texto blanco */
}

/* Nuevas clases creadas */
.login-custom-input .form-control {
  color: white; /* Color del texto de entrada */
}

.login-custom-input label,
.login-custom-input em {
  color: white; /* Color del texto del label y em */
}

.login-custom-btn {
  background-color: #1E90FF; /* Botón azul brillante */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.login-custom-btn:hover {
  background-color: #4682B4; /* Cambio de color al pasar el cursor */
}
/* Estilos por defecto para dispositivos grandes como computadoras de escritorio */
.img-responsive {
  width: 100px;
  height: 80px;
}

/* Estilos para tablets */
@media (max-width: 768px) {
  .img-responsive {
    width: 160px;
    height: 125px;
  }
  
}

/* Estilos para celulares */
@media (max-width: 576px) {
  .img-responsive {
    width: 160px;
    height: 125px;
  }
}
/* =============== COLORES ===============================*/
.hoko-primary {
  color : #153b44;
}
.hoko-secondary {
  color : #2d6e7e;
}
.hoko-accent {
  color : #c6de41;
}
.hoko-dark {
  color : #071c21;
}
.hoko-gray-light {
  color : #e4e6f0;
}
.hoko-gray {
  color : #83a5ad;
}
.hoko-primary-bg{
  background-color : #153b44;
}
.hoko-secondary-bg {
  background-color : #2d6e7e;
}
.hoko-accent-bg {
  background-color : #c6de41;
}
.hoko-dark-bg {
  background-color : #071c21;
}
.hoko-gray-bg {
  background-color : #83a5ad;
}
.hoko-gray-light-bg {
  background-color : #e4e6f0;
}
.bg-accent-300 {
  background-color : #F18F01;
}
.bg-accent-100 {
  background-color : #b6ccd8;
}
.bg-accent-700{
  background-color : #ffbfab;
}
.bg-accent-400 {
  background-color :#F5ECD7
}
.hoko-gradient-1 {
  background: rgb(21,59,68);
  background: linear-gradient(0deg, rgba(21,59,68,1) 0%, rgba(45,110,126,1) 35%, rgba(220,231,233,1) 100%);
}
.bg-transparent {
  background-color: transparent !important;
}
.bg-green-home {
  background-color :#c6ffe6;
}

.bg-menu1 {
  background-color :#345e37;
}
.bg-menu2 {
  background-color :#A096A2;
}
.bg-menu3 {
  background-color :#ff6366;
}
/* ===== INPUTS =====================================================*/
.border-invalid {
  border-color: red !important; /* El !important puede ser necesario si otros estilos están sobrescribiendo este. */
}

.border-valid {
  border-color: green !important;
}
body input[type="name"].valida-error {
  border: 1px solid red;
}



/* ===== LISTAS =====================================================*/
.custom-list-item {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 15px 10px;  /* Ajustamos el padding para que sea más grande */
  border-bottom: 1px solid #e0e0e0;  /* Añadimos una línea delgada en la parte inferior de cada fila */
}

.custom-list-group .text-content {
  flex: 1;
  margin-left: 15px;
  display: flex;
  flex-direction: column;
}
.custom-list-group .delete-icon {
  margin-left: 10px;   /* Espacio a la izquierda del ícono */
    color: #ff0000;     /* Color rojo para indicar acción de eliminación */
    align-self: center;    /* Color rojo para indicar acción de eliminación */
}
.custom-list-group .custom-list-item:last-child {
  border-bottom: none; /* Elimina la línea delgada en la última fila para que no haya una línea extra en la parte inferior */
}
.label-container {
  position: relative;
  padding-top: 1.2rem;  /* Ajusta este valor según sea necesario */
}

.custom-label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.75rem;  /* Ajusta este valor según sea necesario */
  color: #6c757d;  /* Color gris oscuro de Bootstrap */
}

.balances-container {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
  padding-right: 1rem;
}
.homepedidoslst a {
  justify-content: space-between;
}
.custom-divider {
  height: 1px;
  display: block;
  background-color: rgba(0, 0, 0, 0.05);
  margin-bottom: 5px;
}
.centered-select {
  text-align: center;
  text-align-last: center; /* Para asegurar el centrado en diferentes navegadores */
  width: 100%;
}
.centered-select option {
  text-align: center;
}
/* TABLAS INICIALES ======================*/
.iniciales {
  width: 30px;
  height: 30px;
  display: inline-block;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  margin-right: 10px;
}
/* ======== PAGINACION==============================*/
.pagination .page-item.active .page-link {
  background-color: #007bff; /* Puedes cambiar el color */
  border-color: #007bff;
  color: #fff;
}

.pagination .page-link {
  color: #007bff; /* Cambia el color según tu necesidad */
}

.pagination .page-link:hover {
  color: #0056b3;
}
/* ======== MAPAS ==================================*/
#mapContainer {
  height: 90vh; /* Uso de unidades vh para hacer referencia al porcentaje del alto de la pantalla */
  width: 100%;
  margin: 0 auto; /* Centrar el contenedor si es necesario */
}
#mapContainerGoRoute {
  height: 60vh; /* Uso de unidades vh para hacer referencia al porcentaje del alto de la pantalla */
  width: 100%;
  margin: 0 auto; /* Centrar el contenedor si es necesario */
}
#go-route-map {
  height: 100%;
  width: 100%;
}

#map-maps {
  height: 100%;
  width: 100%;
}
.infowindow {
  font-family: Arial, sans-serif;
  width: 250px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.infowindow .title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 5px;
}

.infowindow .title a {
  color: #1a73e8;
  text-decoration: none;
}

.infowindow .address {
  margin-bottom: 8px;
}

.infowindow .address a {
  color: #1a73e8;
  text-decoration: none;
}

.infowindow .rating {
  color: #666;
  margin-bottom: 8px;
}

.infowindow .rating span {
  margin-left: 5px;
  color: #999;
}

.infowindow .actions a {
  color: #1a73e8;
  text-decoration: none;
  margin-right: 5px;
}

.infowindow .actions a:last-child {
  margin-right: 0;
}
.gradient-bar {
  height: 20px;
  width: 400px; /* O el ancho que prefieras */
  background: linear-gradient(to right, 
    #ffff80 0%,   /* 0 - Amarillo claro */
    #ffcc00 16.7%, /* 5 - Amarillo */
    #ff9900 33.3%, /* 10 - Naranja claro */
    #ff6600 50%,   /* 15 - Naranja */
    #ff5050 66.7%, /* 20 - Rojo claro */
    #ff0000 83.3%, /* 25 - Rojo */
    #cc0000 100%); /* 30 - Rojo oscuro */
}
/* == LECTOR de BARRAS ===========================================*/
.contenedor-barcode {
  display: flex;
  justify-content: center; /* Centrar horizontalmente */
  height: 100vh; /* Altura completa de la ventana de visualización */
}
#barcode-scanner {
  width: 100%; /* Ajustar al ancho disponible */
  height: auto; /* Altura automática para mantener la relación de aspecto */
  max-width: 400px; /* Máximo ancho permitido */
  max-height: 300px; /* Máxima altura permitida */
  overflow: hidden; /* Ocultar cualquier contenido que se desborde */
}

/* == ANIMACIONES ===========================================*/
@keyframes pulse {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.5);
  }
  100% {
      transform: scale(1);
  }
}

.pulse {
  display: inline-block;
  animation: pulse 2s infinite;
}