/* Importacion de fuente Montserrat*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

body {
	font-family: 'Montserrat', sans-serif;
}

/* Opcional: personalizar encabezados y párrafos */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
}

p, span, a, button, input, label {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
}

#MyDropDown{
	width: 80%;
	height:40px;
	margin-bottom: 10px;
	text-align: left;
}

#MyDropDown_sa{
	width: 40%;
	height:40px;
	margin-bottom: 10px;
	text-align: left;
}

/* Sidebar */
#sidebarItemExpanded{
	background-color: #442a1d; /*Color fondo sidebar*/	
	box-shadow: none !important; 
}

#sidebarCollapsed{
	background-color: #442a1d; /*Color fondo sidebar*/
	color: #ffffff;
	box-shadow: 5px 0 5px rgba(0, 0, 0, 0.2); /* Aplica sombra */
}

.sidebar-menu a {
  color: white !important;
}

.sidebar-menu .active a {
  background-color: #b4dac5 !important;
  color: #442a1d !important;
  border-left: 5px solid #b4dac5 !important;
}

.sidebar-menu a:hover {
  background-color: #b7d4f1 !important;
  color: #442a1d !important;
  border-left: 5px solid #b7d4f1 !important;
}

/* Navbar */
.navbar-static-top{
	background-color: #b4dac5 !important;
	z-index: 2; /* Para colocar orden de posicion entre elementos */
}

.main-header{
	z-index: 2; /* Para colocar orden de posicion entre elementos */
	background-color: #b4dac5 !important;
}

.sidebar-toggle{
	background-color: #b4dac5 !important;
}

/* Body */
.content-wrapper {
    background-color: white !important;
}

/* Cajas Dashoboard */
 .box.box-custom > .box-header {
    background-color: #613E4C !important; /* Color verde */
}

/* Foto de perfil */

.circular-image {
  width: 70px; /* Ajusta el tama�o de la imagen seg�n necesites */
  height: 70px;
  border-radius: 50%; /* Este valor hace que la imagen sea circular */
  object-fit: cover; /* Asegura que la imagen se ajuste bien al contenedor */
  border: 2px solid #ffffff; /* Opcional: un borde blanco alrededor */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra opcional para dar efecto */
  transition: transform 0.2s ease-in-out; /* animación suave */
}

.circular-image:hover {
  transform: scale(1.1);  /* se agranda 10% */
  cursor: pointer;        /* muestra la mano de "click" */
}

.card {
	border:1px solid #e5e7eb;
	border-radius:8px;
	padding:16px;
	margin-bottom:16px;
	align-items: center; /* asegura que texto quede a la misma altura */
	text-align: left;
}