* {
  font-family: Arial, Helvetica, sans-serif;
}

/* Personalización del botón "Choose File" usando el color primario de Bootstrap */
.custom-file-button::-webkit-file-upload-button {
  background-color: #0ea5e9;
  /* Azul primario de Bootstrap */
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  margin: -8px;
  /* Alineación para compensar el padding del form-control */
  margin-right: 15px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.custom-file-button::-webkit-file-upload-button:hover {
  background-color: #0ea5e9;
}

/* Compatibilidad para Firefox */
.custom-file-button::file-selector-button {
  background-color: #0ea5e9;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  margin: -8px;
  margin-right: 15px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.custom-file-button:hover::file-selector-button {
  background-color: #0b5ed7;
}

/* Estilo para el menú desplegable */
.fade-content {
  opacity: 1;
  transition: opacity 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

.fade-out {
  opacity: 0;
}

.navbar-nav .dropdown-toggle {
  cursor: pointer;
  display: flex;
  /* Para alinear el icono y el svg */
  align-items: center;
  /* Centrar verticalmente */
}

.form-label.required::after {
  content: " *";
  color: red;
}

.navbar-nav .dropdown-toggle::after {
  display: none !important;
  /* Oculta la flecha por defecto */
}

.navbar-nav .dropdown-toggle i {
  transition: transform 0.3s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

/* Rotar la flecha cuando el menú está abierto */
.navbar-nav .dropdown-toggle[aria-expanded="true"] .fa-angle-down {
  transform: rotateX(180deg);
}

.navbar-nav .dropdown-menu {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.navbar-nav .dropdown-menu .nav-link {
  padding-left: 20px;
  color: #5e72e4;
  font-size: 0.9rem;
  text-decoration: none;
}

.navbar-nav .dropdown-menu .nav-link:hover {
  color: #344675;
}

.bento-container {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.bento-grid {
  display: grid;
  height: 100%;
  width: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 8px;
  border-radius: 8px;
}

.bento-col1-row1 {
  grid-column: span 1;
  grid-row: span 1;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col1-row2 {
  grid-column: span 1;
  grid-row: span 2;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col1-row3 {
  grid-column: span 1;
  grid-row: span 3;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col1-row4 {
  grid-column: span 1;
  grid-row: span 4;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col2-row1 {
  grid-column: span 2;
  grid-row: span 1;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col2-row2 {
  grid-column: span 2;
  grid-row: span 2;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col2-row3 {
  grid-column: span 2;
  grid-row: span 3;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col2-row4 {
  grid-column: span 2;
  grid-row: span 4;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col3-row1 {
  grid-column: span 3;
  grid-row: span 1;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col3-row2 {
  grid-column: span 3;
  grid-row: span 2;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col3-row3 {
  grid-column: span 3;
  grid-row: span 3;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col3-row4 {
  grid-column: span 3;
  grid-row: span 4;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col4-row1 {
  grid-column: span 4;
  grid-row: span 1;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col4-row2 {
  grid-column: span 4;
  grid-row: span 2;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col4-row3 {
  grid-column: span 4;
  grid-row: span 3;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col4-row4 {
  grid-column: span 4;
  grid-row: span 4;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col5-row1 {
  grid-column: span 5;
  grid-row: span 1;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col5-row2 {
  grid-column: span 5;
  grid-row: span 2;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col5-row3 {
  grid-column: span 5;
  grid-row: span 3;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col5-row4 {
  grid-column: span 5;
  grid-row: span 4;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col6-row1 {
  grid-column: span 6;
  grid-row: span 1;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col6-row2 {
  grid-column: span 6;
  grid-row: span 2;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col6-row3 {
  grid-column: span 6;
  grid-row: span 3;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bento-col6-row4 {
  grid-column: span 6;
  grid-row: span 4;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

/* Estilo para la tabla de horarios */
#tabla-horario td {
  border: 1px solid #ddd;
  min-width: 120px;
}

#tabla-horario td[data-fusionada="1"] {
  padding: 0;
  border: none;
}

#contenedor-resultados-filtro {
  background-color: rgba(94, 114, 229, 0.2);
  border-radius: 5px;
  max-height: 150px;
  overflow-y: auto;
  cursor: pointer;
}

#contenedor-resultados-filtro ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  padding: 5px;
}

#contenedor-resultados-filtro ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}

.filterable-list {
  width: calc(100% - 1rem);
  max-height: 10rem;
  overflow-y: auto;
}

.autocomplete-item:hover {
  background-color: lightblue;
}

.avatar-upload {
  position: relative;
  max-width: 205px;
  margin: 50px auto;
  /* Centrar el ejemplo */
}

.avatar-edit {
  position: absolute;
  right: 12px;
  z-index: 1;
  top: 10px;
}

.avatar-edit input {
  display: none;
}

.avatar-edit input+label {
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-bottom: 0;

  border-radius: 100%;
  background: #FFFFFF;
  border: 1px solid transparent;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-weight: normal;
  transition: all 0.3s ease-in-out;
}

.avatar-edit input+label:hover {
  background: #f1f1f1;
  border-color: #d6d6d6;
}

.avatar-edit input+label::after {
  /* Set the font for this icon style */
  font-family: 'Font Awesome 6 Free';
  /* Set the weight for this icon style */
  font-weight: 900;
  /* Make sure icons render pixel-perfect */
  -webkit-font-smoothing: antialiased;
  /* Set the Unicode value for the "fa-trash" icon */
  content: '\f304';
  color: #2d2d2d;
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
  font-size: 13px;
}

.avatar-preview {
  width: 192px;
  height: 192px;
  position: relative;
  border-radius: 100%;
  border: 6px solid #F8F8F8;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.avatar-preview>div {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

@media screen and (max-width: 769px) {
  .bento-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .desktop-to-mobile {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
  }
}

/* Estilos para el desplegable de categorías */
.dropdown-container {
  position: relative;
  width: 100%;
}

.dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  user-select: none;
}

.dropdown-header:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
}

.dropdown-text {
  font-size: 0.875rem;
  color: #495057;
  font-weight: 500;
}

.dropdown-arrow {
  font-size: 0.75rem;
  color: #6c757d;
  transition: transform 0.7s ease;
}

.dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-top: 0;
  border-radius: 0 0 0.375rem 0.375rem;
  opacity: 0;
}

.dropdown-content.show {
  max-height: 500px;
  padding: 1rem;
  overflow: auto;
  opacity: 1;
}

.dropdown-header.active {
  background-color: rgba(0, 0, 0, .2);
  color: #fff !important;
}

.dropdown-header.active .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-header.active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

/* Ajustes para el contenido del desplegable */
.dropdown-content .input-group {
  margin-top: 0.5rem;
}

.dropdown-content #lista-expenses {
  margin-bottom: 0.5rem;
}

.month-paid {
  background-color: #2dce89 !important;
  /* verde */
  border: 1px solid #28a745 !important;
  pointer-events: none;
  opacity: 0.6;
}

.month-pending {
  border: 1px solid #f5365c !important;
  /* rojo */
  background-color: transparent !important;
}

.doc-preview {
  border: solid 1px black;
}

.doc-preview>img {
  width: -webkit-fill-available;
  height: auto;
}