/**************************************/
/************** CUSTOM ****************/
/**************************************/

html, body {
  height: 100%;
}

@font-face {
  font-family: "Magistral";
  src: url(assets/fonts/Magistral-Book.ttf);
}

@font-face {
  font-family: "Poppins";
  src: url(assets/fonts/Poppins-Regular.otf);
}

@font-face {
  font-family: "PoppinsBold";
  src: url(assets/fonts/Poppins-Bold.otf);
}

body {
  font-family: "Poppins";
}

strong {
  font-family: "PoppinsBold";
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Magistral";
}

a:hover {
  text-decoration: none !important;
}

.text-primario {
  color: var(--primario) !important;
}

.text-secundario {
  color: var(--secundario) !important;
}

.text-terciario {
  color: var(--terciario) !important;
}

.bg-primario {
  background-color: var(--primario);
}

.btn.bg-primario:hover,
.btn.bg-primario:focus,
.btn.bg-primario:active {
  background-color: var(--secundario) !important;
  color: #fff !important;
}

#responseCsvDownloadButton {
  --bs-btn-color: var(--primario);
  --bs-btn-border-color: var(--primario);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primario);
  --bs-btn-hover-border-color: var(--primario);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--secundario);
  --bs-btn-active-border-color: var(--secundario);
}

.bg-secundario {
  background-color: var(--secundario);
}

.bg-terciario {
  background-color: var(--terciario);
}

.bg-gris {
  background-color: var(--gris);
}

.borde-gris {
  border: 1px solid var(--gris-oscuro);
}

body {
  background-image: url(assets/img/bg-login.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  overflow: auto;
}

.navbar-brand img {
  height: auto;
  width: 250px;
}

/************** MENÚ GENERAL ****************/

.module-drawer {
  background: var(--primario);
  left: 50%;
  position: absolute;
  transform: translate(-50%, -8px);
  transition: transform .2s ease;
}

.module-drawer:hover,
.module-drawer:focus-within {
  transform: translate(-50%, -100%);
}

.module-drawer-link {
  background: #fff;
  color: var(--primario);
  height: 2.25rem;
  width: 2.25rem;
}

.module-drawer-link:hover,
.module-drawer-link:focus {
  color: var(--terciario);
}

@media (max-width: 767.98px) {
  .module-drawer {
    border-radius: var(--bs-border-radius) !important;
    left: 50%;
    margin: 0;
    position: absolute;
    top: 0;
    transform: translate(-50%, -120%);
    transition: none;
    width: max-content;
    z-index: 2;
  }

  .module-drawer:hover,
  .module-drawer:focus-within {
    transform: translate(-50%, -120%);
  }
}

.side-panel-trigger {
  border-radius: 1rem 0 0 1rem;
  height: 3.75rem;
  position: fixed;
  right: 0;
  transform: translateY(-50%);
  transition: background-color .2s ease, width .2s ease;
  width: 4rem;
  z-index: 1035;
}

.side-panel-trigger:hover {
  width: 4.4rem;
}

.side-panel-trigger:focus-visible {
  outline: 3px solid rgb(255 255 255 / 85%);
  outline-offset: -5px;
}

.conversation-ai-trigger {
  top: 50%;
}

.conversation-ai-trigger:hover,
.notification-panel-trigger:hover {
  background-color: var(--primario);
}

.notification-panel-trigger {
  top: calc(50% + 4.5rem);
}

/************** LOGIN ****************/

.login {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .68)), url(assets/img/bg-login.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  overflow: auto;
}

.login form {
  background-color: rgba(255, 255, 255, .94) !important;
  backdrop-filter: blur(14px);
  max-width: 32rem;
}

.login form > img {
  max-width: 14rem;
}

.login .form-control,
.login .form-select {
  border: 1px solid var(--gris-oscuro);
  border-radius: .75rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.login .form-control::placeholder {
  color: var(--secundario);
}

.login .form-floating > .form-control::placeholder {
  color: transparent;
}

.login .form-control:focus,
.login .form-select:focus {
  border-color: var(--primario);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--primario) 16%, transparent);
}

.login .form-floating > .form-control:focus ~ label,
.login .form-floating > .form-control:not(:placeholder-shown) ~ label,
.login .form-floating > .form-select ~ label {
  color: var(--primario) !important;
}

.login button.btn {
  background-image: linear-gradient(135deg, var(--primario) 0%, var(--secundario) 50%, var(--primario) 100%);
  background-position: 0 0;
  background-size: 200% 100%;
  border: 0;
  transition: background-position .35s ease, box-shadow .2s ease, transform .2s ease;
}

.login button.btn:hover,
.login button.btn:focus {
  background-position: 100% 0;
  box-shadow: 0 .5rem 1rem color-mix(in srgb, var(--secundario) 24%, transparent) !important;
  transform: translateY(-1px);
}

.login button.btn:disabled {
  box-shadow: none !important;
  transform: none;
}

.login a {
  transition: color .2s ease;
}

.login a:hover,
.login a:focus {
  color: var(--primario) !important;
}

.login .alert {
  border: 0;
  border-radius: .75rem;
}

/************** CHECKBOX ****************/

/* Customize the label (the container) */
.form-check-custom {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
  line-height: 35px;
  min-height: 35px;
}

/* Hide the browser's default checkbox */
.form-check-custom input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 50%;
  left: 0;
  height: 22px;
  width: 22px;
  background-color: var(--gris-oscuro);
  transform: translateY(-50%);
}

/* On mouse-over, add a grey background color */
.form-check-custom:hover input ~ .checkmark {
  background-color: var(--terciario);
}

/* When the checkbox is checked, add a blue background */
.form-check-custom input:checked ~ .checkmark {
  background-color: var(--primario);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.form-check-custom input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.form-check-custom .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

table .form-check-custom {
  margin: auto;
  width: 22px;
  padding-left: 0;
}

.question-drag-handle {
  cursor: move;
}

.question-type-button:not(:disabled):hover,
.question-type-button:not(:disabled):focus {
  background-color: var(--gris);
  border-color: var(--gris-oscuro);
  color: var(--negro);
}

/************** MEDIA QUERIES ****************/

@media (min-width: 768px) {

}

@media (max-width: 767.98px) {
  .side-panel-trigger {
    border-radius: .85rem 0 0 .85rem;
    height: 2.85rem;
    width: 3.25rem;
  }

  .side-panel-trigger:hover {
    width: 3.5rem;
  }

  .notification-panel-trigger {
    top: calc(50% + 3.6rem);
  }
}