/*-----------------------------------------------
|   Cuadro de busqueda (Modificar Usuario)
-----------------------------------------------*/
/* Solo estilos para el campo de búsqueda */
.search-field {
  position: relative;
  max-width: 400px;
  margin: 0 auto 1.5rem auto; /* centrar y dar espacio inferior */
}
.search-field .form-control {
  padding-left: 2.5rem; /* espacio para el ícono */
  border-radius: 50px; /* bordes redondeados */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.search-field .search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  pointer-events: none;
}

/*-----------------------------------------------
|   Paginación (Modificar Usuario)
-----------------------------------------------*/
/* Estilo por defecto de las páginas (no activas) */
.pagination .page-item .page-link {
  background-color: #ffffff; /* fondo blanco */
  color: #8f1633; /* texto granate */
  border: 1px solid #dee2e6; /* mantiene el borde por defecto */
}

/* Hover de cualquier página */
.pagination .page-item .page-link:hover {
  background-color: #8f1633; /* fondo granate */
  color: #ffffff; /* texto blanco */
  border-color: #8f1633; /* borde granate */
}

/* Página activa */
.pagination .page-item.active .page-link {
  background-color: #8f1633; /* fondo granate */
  color: #ffffff; /* texto blanco */
  border-color: #8f1633; /* borde granate */
}

/*-----------------------------------------------
|   Tabla Usuarios (Modificar Usuario)
-----------------------------------------------*/
#tablaUsuarios th,
#tablaUsuarios td {
  text-align: center !important; /* centrado horizontal */
  vertical-align: middle !important; /* centrado vertical */
}

#tablaUsuarios th {
  background-color: #a62246;
  border-width: 0px;
}

/*-----------------------------------------------
|   Dashboard 
-----------------------------------------------*/
/* Clase para limitar ancho de las tarjetas */
.option-card {
  max-width: 500px;
  margin: 0 auto; /* centra la tarjeta dentro de su columna */
}

.sidebar {
  position: relative; /* para que los hijos absolute se referencien aquí */
  padding-bottom: 4rem; /* espacio extra para que no quede encima del contenido */
}

.avatar-upload {
  position: relative;
  width: 120px;
  height: 120px;
}
.avatar-upload .avatar-preview {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ddd;
}
.avatar-upload input[type='file'] {
  display: none;
}
.avatar-upload label {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.avatar-upload label svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

/*-----------------------------------------------
|   Paginas Productos 
-----------------------------------------------*/
@media (max-width: 768px) {
  .offcanvas.offcanvas-start {
    top: 45px !important; /* Altura de tu navbar */
    height: calc(100% - 10px) !important; /* Resto de la pantalla */
  }
}

@media (max-width: 991px) {
  .offcanvas.offcanvas-start {
    top: 45px !important; /* Altura de tu navbar */
    height: calc(100% - 10px) !important; /* Resto de la pantalla */
  }
}