input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
/*-webkit-text-fill-color: #495057 !important;*/ /* Color del texto */
transition: background-color 5000s ease-in-out 0s; /* Importante: para anular el fondo blanco */
}

.xyz { 
  background-size: auto; 
  text-align: center; 
  padding-top: 100px; 
}

.btn-circle.btn-xsm { 
  width: 23px; 
  height: 23px; 
  padding: 6px 0px; 
  border-radius: 11.5px; 
  font-size: 11.5px; 
  text-align: center; 
}

.btn-circle.btn-sm { 
  width: 30px; 
  height: 30px; 
  padding: 6px 0px; 
  border-radius: 15px; 
  font-size: 8px; 
  text-align: center; 
} 

.btn-circle.btn-md { 
  width: 50px; 
  height: 50px; 
  padding: 7px 10px; 
  border-radius: 25px; 
  font-size: 10px; 
  text-align: center; 
} 

.btn-circle.btn-xl { 
  width: 70px; 
  height: 70px; 
  padding: 10px 16px; 
  border-radius: 35px; 
  font-size: 12px; 
  text-align: center; 
}

.btn.active {
  background-color: #007bff;
  color: #fff;
}

#dt-search-0 {
  border-radius: 20px !important; /* Bordes redondeados */
}

.form-control {
  border-radius: 15px;
}

#tableProducts_filter {
  display: flex;
  justify-content: center;
  align-items: center;
  /*text-align:center;*/
  width: 100%;
}

.centered-search {
  display: flex;
  justify-content: center;  /* Centra horizontalmente */
  align-items: center;      /* Centra verticalmente */
  width: 100%;
  padding: 10px;
}
    
/* Centra el input (campo de búsqueda) dentro del contenedor */
.centered-search input {
  text-align: center;       /* Centra el texto dentro del input */
  display: inline-block;    /* Hace que el input se comporte como un bloque en línea */
  margin: 0 auto;           /* Centra el input dentro del contenedor */
  width: 100% !important;
  max-width: 600px !important;         /* Ajusta el tamaño máximo del campo de búsqueda */
}  

.table-hover tbody tr:hover td {
  cursor: pointer;
  color: rgb(223, 52, 9); /* Cambia el color del texto a rojo al hacer hover */
}

.btn-large-dim {
  width: 20vw; /* Ajusta el tamaño del botón en función del ancho de la pantalla */
  height: 20vw;
  max-width: 120px; /* No dejar que crezca demasiado */
  max-height: 120px; /* No dejar que crezca demasiado */
  /*font-size: clamp(9px, 1.5vw, 12px) !important;*/
  /*font-size: 1rem;*/
}

.mesa-responsive {
  font-size: clamp(10px, 1.5vw, 14px) !important;
}

.span-a{
  /*display: block;*/
  font-size: 10px;
  /*font-weight: 400;*/
}
.span-b{
  display: block;
  font-size: 9px;
  font-weight: 400;
}
.mesa-pill{
  top: -10px !important;
  right: -10px !important;
}
.mesa-circle {
  top: 0px !important;
  right: 0px !important;
}

/* Estilos para el card personalizado */
.productos {
  border: none;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  max-width: 180px;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .productos {
    max-width: 150px;
    width: 100%;
    font-size: 12px !important;
  }
  .productos h5 {
    font-size: 14px !important; /* Ajuste aún más pequeño en pantallas muy pequeñas */
  }
}

@media screen and (max-width: 380px) {
  .productos {
    max-width: 140px;
    width: 100%;
    font-size: 10px !important;
  }
}

@media screen and (max-width: 480px) {
  .productos {
    max-width: 150px;
    width: 100%;
    font-size: 10px !important;
  }
  .productos h5 {
    font-size: 12px !important; /* Ajuste aún más pequeño en pantallas muy pequeñas */
  }
}

/* Efecto al pasar el mouse */
.productos:hover {
  transform: scale(1.01); /* Agranda ligeramente */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra más profunda */
}

/* Efecto de "brillo" al pasar el mouse */
/*.productos:hover::before {
  content: '';
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2); /* Capa de brillo */
  /*pointer-events: none;
  transition: opacity 0.3s;
  opacity: 1;
}

/* Transiciones para suavizar el hover */
.productos:hover .productos-img {
  filter: brightness(1.2); /* Ilumina la imagen */
}

/* Estilo adicional para cuando se selecciona (simulado) */
.productos.selected {
  /*border: 1px solid #007bff; /* Añade un borde azul al seleccionar */
  box-shadow: 0 8px 20px rgba(0, 123, 255, 0.5); /* Más sombra */
}

/* Imagen del card */
.productos-img {
  transition: filter 0.3s ease-in-out;
}

/* Para el contenido del card */
.productos-body {
  background-color: rgba(255, 255, 255, 0.2); /* Fondo semitransparente */
  transition: background-color 0.3s;
}

/* Animación para el contenido del card al hacer hover */
.productos:hover .productos-body {
  background-color: rgba(255, 255, 255, 0.5); /* Fondo opaco al hacer hover */
}

/* Estilos de transición general */
.productos:hover .productos-body h5,
.productos:hover .productos-body p {
  transition: color 0.3s;
}

/* Cambia el color de los textos al hacer hover */
.productos:hover .productos-body h5 {
  color: #007bff; /* Color azul */
}

.productos:hover .productos-body p {
  color: #28a745; /* Color verde */
}

/* Para indicar que el card está "seleccionado" con un clic */
.productos-clickable {
  cursor: pointer;
}

/*.productos .card-title {
  font-size: 16px;
  color: #ffffff !important;
  text-shadow: -1px -1px 0px #000, 1px 1px 0px #000, -1px 1px 0px #000, 1px -1px 0px #000;
}*/
.productos .card-title {
  font-size: 16px;
  color: #ffffff !important; /* Color interior del texto */
  font-weight: 600; /* Hacer el texto más grueso (negrita) */
  text-shadow: 
    1px 1px 2px rgba(0, 0, 0, 0.8),  /* Sombra suave en la parte inferior derecha */
    -1px -1px 2px rgba(0, 0, 0, 0.8), /* Sombra suave en la parte superior izquierda */
    1px -1px 2px rgba(0, 0, 0, 0.5),  /* Sombra suave en la parte superior derecha */
    -1px 1px 2px rgba(0, 0, 0, 0.5);  /* Sombra suave en la parte inferior izquierda */
  letter-spacing: 0.5px;
  line-height: 1.4;
}



.price-badge {
  position: absolute;
  bottom: 10px; /* Ajusta la distancia desde la parte inferior */
  right: 10px; /* Ajusta la distancia desde la parte derecha */
  padding: 2px;
  font-size: 12px;
}

.stock-badge {
  position: absolute;
  /*top: -10px;*/
  left: 10px;
  bottom: -5px;
  /*bottom: 0px; /* Ajusta la distancia desde la parte inferior */
  /*left: 10px; /* Ajusta la distancia desde lado izquierdo */
  padding: 2px;
  font-size: 10px;
}

/*.favorite-badge {
  position: absolute;
  top: 0px;
  left: 75px;
  /*bottom: -5px;*/
  /*bottom: 0px; /* Ajusta la distancia desde la parte inferior */
  /*left: 10px; /* Ajusta la distancia desde lado izquierdo */
  /*padding: 2px;
  font-size: 10px;
}*/
.favorite-badge {
  position: absolute;           /* Posiciona el badge encima de los otros elementos */
  top: 2px;                    /* Coloca el badge en la parte superior */
  left: 50%;                    /* Centra horizontalmente */
  transform: translateX(-50%);  /* Ajusta para que esté perfectamente centrado */
  padding-left: 3px;
  padding-right: 3px;
  font-size: 10px;
}

@media screen and (max-width: 480px) {
  .favorite-badge {
    font-size: 9px;
  }
}

.icheck-primary[class*="icheck-"] > label{
  padding-left:22px !important;
  line-height: 18px;
}
.icheck-primary[class*="icheck-"] > input:first-child + input[type="hidden"] + label::before, .icheck-primary[class*="icheck-"] > input:first-child + label::before{
  width:18px;
  height:18px;
  border-radius:5px;
  margin-left:-22px;
}

.icheck-primary[class*="icheck-"] > input:first-child:checked + input[type="hidden"] + label::after, 
.icheck-primary[class*="icheck-"] > input:first-child:checked + label::after{
  top:0px;
  width: 4px;
  height: 8px;
  left:0px;
}

textarea {
  width: 100%; /* Ajusta al tamaño del contenedor padre */
  max-width: 1000px; /* Máximo ancho permitido */
  min-width: 200px; /* Ancho mínimo permitido */
  max-height: 300px; /* Altura máxima */
  min-height: 31px; /* Altura mínima */
  resize: none; /* Deshabilitar el redimensionamiento manual */
  overflow: hidden; /* Ocultar scrollbars temporales */
  padding: 10px;
  box-sizing: border-box; /* Incluye padding y border en el tamaño */
}

.bg-primary.bg-transparente {
  background-color: rgba(62, 234, 247, 0.6) !important; /* Color azul de Bootstrap con transparencia */
}

.bg-danger.bg-transparente {
  background-color: rgba(247, 62, 87, 0.6) !important; /* Color azul de Bootstrap con transparencia */
}

.bg-success.bg-transparente {
  background-color: rgba(62, 247, 133, 0.6) !important; /* Color azul de Bootstrap con transparencia */
}

 /* Ocultar los botones al inicio */
 .botones-flotantes {
  position: fixed;
  right: 10px; /* Alineado a la derecha */
  top: 50%;
  transform: translateY(-50%);
  display: none; /* Ocultos por defecto */
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

/* Estilos para los botones */
.botones-flotantes .btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

.btn-mesas {
  font-size: 2vw; /* Ajusta el tamaño en función del ancho de la pantalla */
}

.img-mesa {
  width: 5vw; /* 5% del ancho de la pantalla */
  height: auto; /* Mantiene la proporción */
  max-width: 40px; /* No exceder cierto tamaño en pantallas grandes */
}

/* Estilo para la capa overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1050; /* Para que esté encima de otros elementos */
}

 /* Spinner con sombra y color degradado */
 .fa-spinner-third {
  font-size: 60px;
  color: #8e44ad; /* Color púrpura */
  animation: spin 1.5s infinite linear;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.5); /* Sombra suave */
}

/* Animación de giro */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Texto debajo del spinner */
.text-spin {
  font-weight: bold;
  color: rgb(183, 239, 253);
  font-size: 18px;
}

.loader {
  text-align: center; /* Asegura que tanto el spinner como el texto estén centrados */
}

.bg-light-blue {
  background-color: rgba(167, 199, 231, 0.5); /* Azul pastel suave, opacidad 85% */
}

/*gris claro*/
.bg-light-gray {
  background-color: rgba(241, 241, 241, 0.9);
}

/* 🎨 Verde Menta (más vibrante) */
.bg-mint-green {
  background-color: rgba(144, 238, 144, 0.75); /* Ajuste de opacidad */
}

/* 🎨 Lavanda (más definida) */
.bg-lavender {
  background-color: rgba(215, 200, 250, 0.8);
}

/* 🎨 Amarillo Pastel (más balanceado) */
.bg-pastel-yellow {
  background-color: rgba(250, 220, 130, 0.75);
}

/* 🎨 Rosa Pastel (con más claridad) */
.bg-pastel-pink {
  background-color: rgba(250, 190, 200, 0.8);
}

/* 🎨 Turquesa Claro (con mejor visibilidad) */
.bg-light-turquoise {
  background-color: rgba(140, 250, 225, 0.75);
}

.bg-light-turquoise-b {
  background-color: rgba(140, 250, 225, 1);
}

/* 🌙 Modo Oscuro - Azul Nocturno Mejorado */
.bg-night-blue {
  background-color: rgba(34, 47, 64, 0.9); /* Más profundo para mejor contraste */
}

.bg-mystic-purple {
  background-color: rgba(54, 33, 71, 0.9); /* Púrpura oscuro, misterioso y sofisticado */
}

.bg-midnight-black {
  background-color: rgba(18, 18, 18, 0.9); /* Negro profundo para una sensación minimalista */
}

.bg-forest-green {
  background-color: rgba(23, 33, 30, 0.9); /* Verde oscuro, fresco y natural */
}

.bg-royal-blue {
  background-color: rgba(24, 38, 71, 0.9); /* Azul oscuro, elegante y real */
}

.bg-dusk-red {
  background-color: rgba(50, 24, 24, 0.9); /* Rojo quemado, intenso y cálido */
}

.bg-steel-gray {
  background-color: rgba(43, 48, 54, 0.9); /* Gris oscuro, moderno y sobrio */
}

.bg-dark-teal {
  background-color: rgba(23, 42, 43, 0.9); /* Verde azulado oscuro para un toque fresco */
}

.bg-charcoal {
  background-color: rgba(38, 38, 38, 0.9); /* Gris oscuro profundo, elegante y profesional */
}

.main-sidebar {
  backdrop-filter: blur(10px);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

/* Estilo de Enlaces */
.nav-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: #212529;
  text-decoration: none;
  /*border-radius: 0.375rem;*/
  transition: background-color 0.2s ease;
}

.header-nav {
  border-radius: 0.375rem;
}

.nav-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Activo */
.nav-link.active {
  font-weight: 600;
}

.input-group .btn-sidebar:hover {
  color: #0d6efd;
}

.container {
  max-width: 1200px; /* Simula container-xl */
  padding: 1rem 2rem;
  margin-left: auto;
  margin-right: auto;
}

/*.info-box {
  border-radius: 1.5rem;
}*/
.info-box {
  border-radius: 1.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
}

.info-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}


/*.card {*/
  /*opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.4s ease-out forwards;*/
  /*border-radius: 0.75rem; /* Más redondeado */
  /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); /* Sombra más difusa */
  /*border: none;
}*/
.card {
  border-radius: 1rem; /* Bordes más suaves */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  border: none; /* Elimina borde predeterminado */
  overflow: hidden; /* Evita que el contenido sobresalga */
}

/* Aplica el degradado solo si la card NO tiene una clase de color (como card-primary) */
/*.card:not(.card-primary):not(.card-secondary):not(.card-danger):not(.card-success) > .card-header {
  background: linear-gradient(135deg, #0d6efd, #0048a5);
  color: white;
  font-weight: bold;
  padding: 1rem;
  border-bottom: none;
}*/

/*.card-header {
  background: linear-gradient(135deg, #0d6efd, #0048a5); /* Degradado atractivo */
  /*color: white;
  font-weight: bold;
  padding: 1rem;
  border-bottom: none; /* Elimina bordes predeterminados */
/*}*/

.card-footer {
  background: #f8f9fa; /* Fondo suave */
  padding: 0.75rem 1rem;
  border-top: none; /* Elimina bordes predeterminados */
  text-align: right;
  font-size: 0.9rem;
  color: #6c757d;
}

/* Estilos para modo oscuro */
body.dark-mode .card {
  background: #222;
  color: #e0e0e0;
}

body.dark-mode .card-header {
  background: #333;
  color: white;
}

body.dark-mode .card-footer {
  background: #282828;
  color: #bbb;
}

.btn {
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.3s ease-in-out;
}

.btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.5px;
}

.gap-3 {
  gap: 1rem; /* Simulación de `gap` de Bootstrap 5 */
}

.navbar, .sidebar {
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.row {
  margin-left: -15px;
  margin-right: -15px;
}

.d-flex-gap > * {
  margin-bottom: 1rem;
  margin-right: 1rem;
}

/* 🌙 MODO OSCURO */
body.dark-mode {
  background-color: #181818;
  color: #e0e0e0;
}

body.dark-mode .card {
  background: #222;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .btn-primary {
  background: linear-gradient(135deg, #0a58ca, #0b5ed7);
}

body.dark-mode .btn-primary:hover {
  background-color: #0d6efd;
}

/* 📌 Enlaces */
body.dark-mode a {
  color: #4dabf7;
}

body.dark-mode a:hover {
  color: #80bdff;
}

/* ✨ Transición Suave de Modo */
body, .main-sidebar, .main-header, .card, a, .btn-primary {
  transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}

/* 🎛 Estilo del Switch de Modo Oscuro */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
  gap: 10px;
}

.toggle-switch input {
  display: none;
}

.switch-slider {
  width: 42px;
  height: 22px;
  background: #ccc;
  border-radius: 50px;
  position: relative;
  transition: background 0.3s ease-in-out;
}

.switch-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.3s ease-in-out;
}

/* 🌙 Activo - Modo Oscuro */
input:checked + .switch-slider {
  background: #0d6efd;
}

input:checked + .switch-slider::before {
  transform: translateX(20px);
}

.form-control:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 5px rgba(13, 110, 253, 0.5);
}

.modal-content {
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: none;
  animation: modalFadeIn 0.3s ease-out;
}

.modal-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.modal-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Animación de entrada */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Botón de cierre más moderno */
.modal-header .close {
  font-size: 1.5rem;
  color: #333;
  transition: all 0.3s;
}

.modal-header .close:hover {
  color: #0d6efd;
  transform: scale(1.2);
}


/*.table {
  border-radius: 0.5rem;
  overflow: hidden;
}

.table th {
  background-color: #0d6efd;
  color: white;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1rem;
}

.table tbody tr:nth-child(odd) {
  background-color: #f8f9fa;
}

.table-hover tbody tr:hover {
  background-color: rgba(13, 110, 253, 0.1);
  transition: background 0.3s ease-in-out;
}

.table td, .table th {
  padding: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
}*/

/* Estilo Responsivo */
/*.table-responsive {
  border-radius: 0.5rem;
  overflow: hidden;
}*/

.alert {
  border-radius: 0.5rem;
  padding: 1rem;
  font-weight: 500;
  animation: fadeIn 0.5s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.alert-dismissible .close {
  font-size: 1.2rem;
  padding: 0.5rem;
  transition: all 0.3s;
}

.alert-dismissible .close:hover {
  transform: scale(1.1);
  color: #333;
}

/* Animación de entrada */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.navbar {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/*Azul Neon Futurista*/
.card-header.gradient-blue {
  background: linear-gradient(135deg, #0d6efd, #0048a5);
  color: white;
}

/*Rojo Vibrante y Energético*/
.card-header.gradient-red {
  background: linear-gradient(135deg, #ff416c, #ff4b2b);
  color: white;
}

/*Amarillo Brillante y Soleado*/
.card-header.gradient-yellow {
  background: linear-gradient(135deg, #f6d365, #fda085);
  color: white;
}

/*Amarillo Fuego y Naranja Brillante*/
.card-header.gradient-fire {
  background: linear-gradient(135deg, #ff6a00, #ff0000, #ffcc00);
  color: white;
  box-shadow: 0 0 20px rgba(255, 100, 0, 0.7);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  font-weight: bold;
}

/*Morado Elegante y Profundo*/
.card-header.gradient-purple {
  background: linear-gradient(135deg, #8e2de2, #4a00e0);
  color: white;
}

/*Verde Refrescante y Natural*/
.card-header.gradient-green {
  background: linear-gradient(135deg, #00b09b, #96c93d);
  color: white;
}

/*Naranja-Dorado de Atardecer*/
.card-header.gradient-orange {
  background: linear-gradient(135deg, #ff9a44, #ff6a00);
  color: white;
}

/*Gris Metalizado Moderno*/
.card-header.gradient-gray {
  background: linear-gradient(135deg, #485563, #29323c);
  color: white;
}

/*Degradado Espacial (Azul Oscuro a Morado)*/
.card-header.gradient-space {
  background: linear-gradient(135deg, #2c3e50, #4ca1af);
  color: white;
}

/*Verde Esmeralda con Azul Turquesa*/
.card-header.gradient-emerald {
  background: linear-gradient(135deg, #56ab2f, #a8e063);
  color: white;
}

/*Negro Mate con Detalles en Gris*/
.card-header.gradient-dark {
  background: linear-gradient(135deg, #1e1e1e, #3d3d3d);
  color: white;
}

/*Rosa Pastel Suave*/
.card-header.gradient-pink {
  background: linear-gradient(135deg, #ff758c, #ff7eb3);
  color: white;
}

/*Cian Aqua Moderno*/
.card-header.gradient-cyan {
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  color: white;
}

/*Amarillo-Dorado Brillante (Luxury)*/
.card-header.gradient-gold {
  background: linear-gradient(135deg, #ffcc00, #ff9900);
  color: white;
}

@keyframes parpadeo {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.botonParpadeo {
  animation: parpadeo 1.5s ease-in-out infinite;
}

.botonParpadeo:hover {
  animation: none; /* Eliminar el parpadeo cuando el cursor está sobre el botón */
}

.input-group-sm .input-group-append .btn {
  height: calc(1.8125rem + 2px); /* Altura de los inputs sm */
  padding: 0.25rem 0.5rem; /* Ajuste del padding */
  font-size: 0.875rem; /* Tamaño de texto para btn-sm */
}

@media (max-width: 576px) {
  .responsive-text-sm {
    font-size: 0.75rem; /* Ajusta según tu necesidad */
  }
}