/* 
- Login
- Signup
- Password reset pages
*/


@font-face {
  font-family: "RobotoCondensed";
  src: url("./../fonts/RobotoCondensed-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("./../fonts/RobotoCondensed-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("./../fonts/RobotoCondensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}


:root {
  --color-primary: #CFE1F3; /* Background botones secundarios */
  --color-secondary: #EEF4FA; /* fondos en tablas, menús, formularios, etc... */
  --color-normal-text: #143351; /* Todo lo que es texto y texto en botones */
  --color-inactive-text: #8198AF; /* Texto en botones inactivos */
  --color-active: #ED6D58; /* salmón activos */
  --color-active-hover: #8198AF; /* salmón hover */
  --color-active-text: #FFFFFF; /* texto en botones activos */

  --font-family: "RobotoCondensed", sans-serif;
  --font-size-1: 1.5rem; /* 24 px */
  --font-size-2: 1.25rem; /* 20 px */
  --font-size-3: 1rem; /* 16px */
  --font-size-4: 0.875rem; /* 14px */
  --font-size-5: 0.75rem; /* 12px */
  --font-weight-normal: 400;
  --font-weight-semibold: 700;
  --font-weight-bold: 700;
  --spacer-1: 0.5rem;
  --spacer-2: 0.75rem; /* 12px */
  --spacer-3: 1rem; /* 16px */
  --spacer-4: 1.25rem; /* 20px */
  --spacer-5: 2rem;
  --shadows: 7px 7px 7px rgba(0, 0, 0, 0.15);
  --border-radius-pill: 50rem;
}

body,
html {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: var(--font-weight-normal);
  color: #FFFFFF;
  background: url(/static/assets/img/bg-login-ac.jpg);
  background-size: cover;
  background-repeat: no-repeat !important;
  background-position: 50% 30%;
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

a {
  text-decoration: none !important;
  color: #FFFFFF !important;
  font-weight: var(--font-weight-bold);
}

#page-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 50%;
}

/* Fondos */
.bg-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-normal-text) !important;
}

/* Botones */
.butn {
  border-radius: var(--border-radius-pill);
  color: #000000;
  font-size: var(--font-size-4);
  font-weight: var(--font-weight-bold);
  border: 0;
  padding: var(--spacer-3) var(--spacer-4);
  line-height: normal;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
}

.butn:hover {
  background-color: var(--color-primary) !important;
  color: #FFFFFF !important;
}

/* Alertas */
.alert {
  font-size: var(--font-size-5);
  border: none;
  padding: 15px;
  margin-bottom: var(--spacer-3);
  border-radius: 0.25rem;
}

.alert h5 {
  font-size: var(--font-size-4);
  font-weight: var(--font-weight-bold);
  color: #000000;
  text-align: left;
  margin-top: 0.3rem;
}

.alert .alert-warning {
  background: #fce1ba;
  color: #7b4e0e;
  border-color: #ffeeba;
}

/* Header */
.auth__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacer-3);
}

.auth__header--img {
  content: url(/static/assets/img/logo_am-blanco.png);
  width: 100%;
  max-width: 220px;
  margin: 2.5rem 0;
}

.auth__header--title {
  font-size: 28px !important;
  font-weight: var(--font-weight-bold);
  margin-bottom: 0;
}

.auth__header--subtitle {
  font-size: var(--font-size-3) !important;
  font-weight: var(--font-weight-normal);
}

/* Content  */
.auth__content {
  padding: var(--spacer-3) 0;
  max-width: 280px;
  width: 100%;
  text-align: center;
  margin: auto;
}

.auth__content--desc {
  font-size: var(--font-size-4);
  display: block;
}

.auth__content .form-group {
  width: 100%;
  margin-bottom: var(--spacer-3);
}

.auth__content .form-group label {
  display: none;
}

.auth__content .form-group input[type="text"],
.auth__content .form-group input[type="email"],
.auth__content .form-group input[type="number"],
.auth__content .form-group input[type="url"],
.auth__content .form-group input[type="password"],
.auth__content .form-group select {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  border-radius: 20px;
  color: #000000;
  font-size: var(--font-size-3) !important;
  height: 45px !important;
  padding: 12px 20px;
}

.auth__content .form-group:has(label[for="id_captcha_1"]) label {
  display: inline-flex;
}
.auth__content .form-group:has(label[for="id_captcha_1"]) img.captcha {
  border-radius: 10px;
  margin-bottom: 0.5rem;
}

::placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: black !important;
  opacity: 1 !important; /* Firefox */
}

.auth__contents--buttons {
  text-align: center;
  padding-top: var(--spacer-3);
}

/* Footer */
.auth__footer--links {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-5);
  text-align: center;
  margin-top: var(--spacer-3);
  gap: 4rem;
  width: 100%;
}

.btn-success.active,
.btn-success.active.focus,
.btn-success.active:focus,
.btn-success.active:hover,
.btn-success:active,
.btn-success:active.focus,
.btn-success:active:focus,
.btn-success:active:hover,
.btn-success:focus,
.btn-success:hover,
.btn-success:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active,
.open > .dropdown-toggle.btn-success,
.open > .dropdown-toggle.btn-success:focus,
.open > .dropdown-toggle.btn-success:hover,
.show > .btn-success.dropdown-toggle {
  color: #FFFFFF !important;
  background: var(--color-primary) !important;
  border-color: none;
}

.form-check-input.is-invalid ~ .form-check-label,
.has-error .checkbox,
.has-error .checkbox-inline,
.has-error .control-label,
.has-error .form-control-feedback,
.has-error .help-block,
.has-error .radio,
.has-error .radio-inline,
.has-error.checkbox label,
.has-error.checkbox-inline label,
.has-error.radio label,
.has-error.radio-inline label,
.invalid-feedback,
.was-validated .form-check-input:invalid ~ .form-check-label {
  color: #000000 !important;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-5) !important;
  background-color: var(--color-primary);
  border-radius: 5px;
  padding: 5px;
  text-align: center;
}

@media (max-width: 767px) {
  .auth__header {
    width: 100%;
    padding: 0;
    margin: 0 auto;
  }

  body {
    background-position: top;
  }
}