/* 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;
}

/* 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 */
}

/* Card Dashboard */
.payment-card {
background: #F4F6F8;
border-radius: 18px;
padding: 10px 15px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
transition: transform 0.15s ease, box-shadow 0.15s ease;
cursor: pointer;
}
.payment-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.payment-title {
font-size: 11px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 10px;
}
.payment-row {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
}
.payment-subtitle {
font-size: 12px;
font-weight: 500;
color: #6c757d;
}
.payment-amount {
font-size: 11px;
font-weight: 700;
color: #34495e;
}

/* Avatar / Foto de perfil */
.circular-image {
  width: 70px;
  height: 70px;

  /* Clave para el círculo */
  border-radius: 50%;

  /* Evita deformaciones */
  object-fit: cover;

  /* Importante en Shiny + HTML */
  display: block;

  /* Opcional estética */
  border: 2px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

  /* Animación suave */
  transition: transform 0.2s ease-in-out;
}

.circular-image:hover {
  transform: scale(1.1);
  cursor: pointer;
}