/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto-v30-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/roboto-v30-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/roboto-v30-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
  --brand-primary: #155196;
  --brand-secondary: #8ebf25;

  /* overwrite openprops according to /gfamobi/openprops.config.cjs */
  --font-sans:
    "Roboto", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
    Noto Sans, sans-serif;
  --font-size-00: 0.75rem;
  --font-size-0: 0.875rem;
  --radius-1: 0.5rem;
  --radius-2: 0.75rem;
  --size-7: 2.5rem;
  --size-8: 3.5rem;
}

body {
  margin: 0;
  background-color: #fff;
  font-family: var(--font-sans);
}

/*
FORM ELEMENTS
*/

/* checkbox */
input[type="checkbox"]:checked,
input[type="checkbox"]:not(:checked) {
  position: absolute;
  width: 0px;
  height: 0px;
}

input[type="checkbox"]:checked + label,
input[type="checkbox"]:not(:checked) + label {
  position: relative;
  padding: 0.1em 0.5em 0.1em 2em;
  border: var(--border-size-2) solid transparent;
  border-radius: var(--radius-2);
  cursor: pointer;
}

input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:not(:checked) + label:before {
  content: "";
  position: absolute;
  left: 0.5em;
  top: 0.2em;
  width: 1em;
  height: 1em;
  border: var(--border-size-1) solid var(--gray-8);
  border-radius: 5px;
}

input[type="checkbox"]:checked + label:before {
  background-color: var(--brand-secondary);
  border: 1px solid var(--brand-secondary);
}

input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:not(:checked) + label:after {
  content: "\2714";
  position: absolute;
  top: 0.4em;
  left: 0.8em;
  width: 1em;
  height: 1em;
  font-size: 0.8em;
  line-height: 1em;
  color: #fff;
  transition: all 0.2s var(--ease-1);
}

input[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}
input[type="checkbox"]:checked + label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  outline: none;
}
input[type="checkbox"]:disabled:checked + label:before,
input[type="checkbox"]:disabled:not(:checked) + label:before {
  box-shadow: none;
  border-color: var(--gray-8);
  background-color: var(--gray-8);
}
input[type="checkbox"]:disabled:checked + label:after {
  color: var(--gray-8);
}
input[type="checkbox"]:disabled + label {
  color: var(--gray-6);
}
input[type="checkbox"]:focus-visible + label {
  border-color: var(--brand-primary);
}

/* text input */
.text-input {
  border-radius: var(--radius-2);
  height: var(--size-8);
  border: var(--border-size-2) solid var(--gray-3);
  display: flex;
  align-items: center;
  font-size: var(--font-size-1);
  gap: var(--size-3);
  padding: 0 var(--size-3);
  color: var(--gray-8);
  background-color: #fff;
  transition:
    color 0.2s var(--ease-3),
    border-color 0.2s var(--ease-3);
}
.text-input input {
  color: var(--gray-6);
  font-size: var(--font-size-1);
  border: 0;
  flex: 1;
  height: 100%;
  outline: none;
  padding: 0;
  min-width: 0;
  background-color: transparent;
}
.text-input input:disabled {
  background: none;
}
.text-input input:autofill {
  box-shadow: 0 0 0px 1000px #ffffff inset !important;
}
.text-input input::-webkit-outer-spin-button,
.text-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.text-input:has(input:focus-visible) {
  border-color: var(--brand-primary);
}
.text-input:has(input:focus-visible) input {
  color: var(--gray-8);
}
.text-input:has(input:disabled) {
  background-color: var(--gray-1);
}
.text-input:hover:not(:has(input:disabled)):not(:has(input:focus-visible)) {
  border-color: var(--gray-5);
}

/* Button for all files */
.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-4);
  width: 100%;
  height: var(--size-8);
  padding: var(--size-2) var(--size-4);
  border: var(--border-size-2) solid transparent;
  border-radius: var(--radius-1);
  font-size: var(--font-size-1);
  transition:
    color 0.2s var(--ease-3),
    background-color 0.2s var(--ease-3);
  cursor: pointer;
}

.button.primary,
button.primary {
  background: var(--brand-primary);
  color: var(--gray-0);
}

.button.primary:hover,
button.primary:hover {
  background: var(--blue-8);
}

.button.primary:active,
button.primary:active {
  background: var(--blue-9);
}

.button:disabled,
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/*
LAYOUT
*/
.content {
  min-height: 100vh; /* To avoid logo being hidden on small screens */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
header,
.content-wrapper {
  display: block;
  margin: 0 auto;
  width: var(--size-content-2);
  text-align: center;
  margin-top: var(
    --font-size-4
  ); /* To avoid logo being hidden on small screens */
}
.content-box,
#kc-error-message {
  margin: var(--size-6) auto;
  padding: var(--size-3);
  color: var(--text-0);
  background-color: var(--gray-0);
  border-radius: var(--radius-2);
}

/*
CONTENT
*/
.form-row {
  margin-bottom: var(--size-3);
}

a {
  color: var(--brand-primary);
}

.alert {
  text-align: center;
  margin: var(--size-3) 0;
}
.alert-success {
  color: var(--green-8);
}
.alert-warning {
  color: var(--orange-3);
}
.alert-error {
  color: var(--red-8);
}
.alert-info {
  color: var(--blue-8);
}

.footer-links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  margin: var(--size-6) auto;
  padding: 0;
  list-style: none;
  font-size: 0.9em;
}
.footer-links li {
  padding: 0.1rem 0.5rem;
  font-size: 12px;
}

/* =============================
   For file: register-user.ftl
   ============================= */

/* Ensure the wrapper takes the full width of the wrapper */
.text-input-wrapper {
  width: 100%;
  outline: none;
}

/* Ensure the wrapper input takes the full width of the form */
.text-input-wrapper input {
  width: 100%;
  box-sizing: border-box; /* includes padding and border in the width */
  outline: none;
}

/* Hide form labels */
#kc-register-form label {
  display: none !important;
}

/* General wrapper adjustment */
#kc-register-form .text-input {
  position: relative;
  color: var(--gray-6);
}

/* Adjust input so the placeholder looks the same as in login */
#kc-register-form .text-input input {
  color: var(--gray-6);
  font-size: var(--font-size-1);
  border: 0;
  flex: 1;
  height: 100%;
  outline: none;
  padding: 0;
  min-width: 0;
  background-color: transparent;
}

/* Adjust input so the placeholder looks the same as in login */
#kc-register-form .text-input:focus-visible input {
  color: var(--gray-8);
}

/* For inputs to have icons like in login (optional) */
#kc-register-form .text-input svg {
  position: absolute;
  left: var(--size-2);
  top: 50%;
  transform: translateY(-50%);
  width: 1.5em;
  height: 1.5em;
  color: var(--gray-5);
}

/* Change border and text color on focus */
#kc-register-form .text-input:focus-visible {
  border-color: var(--brand-primary);
  color: var(--gray-8);
}

/* Visually reorder "go back */
#kc-form-buttons,
#kc-form-options {
  display: flex;
  justify-content: center;
  gap: var(--size-2);
}

/* first the registration button */
#kc-form-buttons {
  order: 1;
}

/* then the "go back" link */
#kc-form-options {
  order: 2;
  margin-top: var(--size-2);
}

/* checkbox */

#kc-register-form input[type="checkbox"] + label,
#kc-register-form input[type="radio"] + label {
  display: inline-block !important; /* o block según tu diseño */
}

#kc-register-form input[type="checkbox"]:checked,
#kc-register-form input[type="checkbox"]:not(:checked) {
  position: absolute;
  width: 0px;
  height: 0px;
}

#kc-register-form input[type="checkbox"]:checked + label,
#kc-register-form input[type="checkbox"]:not(:checked) + label {
  position: relative;
  padding: 0.1em 0.5em 0.1em 2em;
  border: var(--border-size-2) solid transparent;
  border-radius: var(--radius-2);
  cursor: pointer;
}

#kc-register-form input[type="checkbox"]:checked + label:before,
#kc-register-form input[type="checkbox"]:not(:checked) + label:before {
  content: "";
  position: absolute;
  left: 0.5em;
  top: 0.2em;
  width: 1em;
  height: 1em;
  border: var(--border-size-1) solid var(--gray-8);
  border-radius: 5px;
}

#kc-register-form input[type="checkbox"]:checked + label:before {
  background-color: var(--brand-secondary);
  border: 1px solid var(--brand-secondary);
}

#kc-register-form input[type="checkbox"]:checked + label:after,
#kc-register-form input[type="checkbox"]:not(:checked) + label:after {
  content: "\2714";
  position: absolute;
  top: 0.4em;
  left: 0.8em;
  width: 1em;
  height: 1em;
  font-size: 0.8em;
  line-height: 1em;
  color: #fff;
  transition: all 0.2s var(--ease-1);
}

#kc-register-form input[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}
#kc-register-form input[type="checkbox"]:checked + label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  outline: none;
}
#kc-register-form input[type="checkbox"]:disabled:checked + label:before,
#kc-register-form input[type="checkbox"]:disabled:not(:checked) + label:before {
  box-shadow: none;
  border-color: var(--gray-8);
  background-color: var(--gray-8);
}
#kc-register-form input[type="checkbox"]:disabled:checked + label:after {
  color: var(--gray-8);
}
#kc-register-form input[type="checkbox"]:disabled + label {
  color: var(--gray-6);
}
#kc-register-form input[type="checkbox"]:focus-visible + label {
  border-color: var(--brand-primary);
}

#kc-register-form select {
  width: 100%;
}

#kc-register-form select:has(option:checked[value=""]) {
  color: var(--gray-5);
}

/* =============================
   For file: login-config-totp.ftl
   ============================= */

/* Box CREATED MANUALLY for whole page */
#kc-box {
  background-color: var(--gray-0);
  padding: var(--size-4);
  border-radius: var(--radius-2);
  box-sizing: border-box;
}

/* Focus given to alignment of whole page  */
#kc-totp-settings {
  margin: 0;
  padding-left: var(--size-4);
  padding-right: var(--size-4);
  list-style-position: outside;
}

/* Focus given to alignment of whole page  */
#kc-totp-settings li {
  font-size: var(--font-size-1);
  color: var(--gray-8);
  text-align: justify;
}
/* Focus given to alignment of whole page  */
#kc-totp-settings > li {
  margin-bottom: var(--size-4);
}

/* Focus given to alignment of whole page  */
#kc-totp-settings li p {
  font-size: var(--font-size-1);
  color: var(--gray-8);
  text-align: justify;
}

/* Adjustmen for sub-list (Google Auth, Microsoft Auth...) inside step 1 */
#kc-totp-settings ul {
  padding-left: var(--size-5);
  padding-right: var(--size-5);
}

/* QR and secret key */
#kc-totp-settings #kc-totp-secret-key {
  text-align: center;
}

/* QR and secret key */
#kc-totp-settings #kc-totp-secret-qr-code {
  display: block;
  margin: 0 auto;
  margin-top: var(--size-4);
}

/* QR and link */
#kc-totp-settings #mode-manual,
#kc-totp-settings #mode-barcode,
#kc-totp-settings li p:has(#mode-manual),
#kc-totp-settings li p:has(#mode-barcode) {
  text-align: center;
}

/* QR and link */
#kc-totp-settings li p:has(#mode-manual) {
  margin-top: var(--size-2);
}

/* Form wrappers and inputs */
#kc-totp-settings-form .text-input-wrapper,
#kc-totp-settings-form .text-input {
  width: 100%;
  outline: none;
  position: relative;
}

/* Form wrappers and inputs */
#kc-totp-settings-form .text-input input {
  width: 100%;
  box-sizing: border-box;
  outline: none;
  border: 0;
  background-color: transparent;
  color: var(--gray-6);
  font-size: var(--font-size-1);
  height: 100%;
}

/* Hide labels inside the TOTP form */
#kc-totp-settings-form label {
  display: none !important;
}

#kc-totp-settings-form label,
#kc-totp-settings-form .required {
  display: none !important;
}

#kc-totp-settings-form .text-input-wrapper input {
  color: var(--gray-6);
  font-size: var(--font-size-1);
}

#kc-totp-settings-form .text-input:focus-visible {
  border-color: var(--brand-primary);
}

#kc-totp-settings-form .text-input-wrapper:has(input:focus-visible) input {
  color: var(--gray-8);
}

/* Alerts inside TOTP */
#kc-totp-settings-form .alert-error {
  color: var(--red-8);
  text-align: center;
}

/* =============================
   For file: login-otp.ftl
   ============================= */

#kc-otp-login-form .text-input-wrapper input {
  color: var(--gray-6);
  font-size: var(--font-size-1);
}

#kc-otp-login-form .text-input:focus-visible {
  border-color: var(--brand-primary);
}

#kc-otp-login-form .text-input-wrapper:has(input:focus-visible) input {
  color: var(--gray-8);
}

/* Hide labels inside the TOTP form */
#kc-otp-login-form label {
  display: none !important;
}

/* =============================
  LANDING PAGE
  For file: login.ftl
   ============================= */

/* Landing state */
.hide-on-landing {
  display: none !important;
}

#landing-page {
  display: block;
}

body:has(#landing-page):not(:has(.alert-error)) header {
  display: none !important;
}

/* Login or error states */

body:has(#login-form-wrapper:target) header,
body:has(.alert-error) header {
  display: block !important;
  margin: 0 auto !important;
  width: var(--size-content-2) !important;
  text-align: center !important;
  margin-top: var(--font-size-4) !important;
}

#login-form-wrapper:target,
body:has(.alert-error) .hide-on-landing {
  display: block !important;
}

/* Alternative for older browsers */
body:has(#login-form-wrapper:target) #landing-page,
body:has(.alert-error) #landing-page {
  display: none !important;
}

/* Style of landing */

.landing-logo {
  display: block;
  margin: 0 auto var(--size-2);
  max-width: 180px;
  height: auto;
}

#landing-page .content-box {
  padding: var(--size-3) var(--size-6);
  text-align: center;
}

.landing-title {
  font-size: var(--font-size-4);
  font-weight: 700;
  margin-bottom: var(--size-2);
}

.landing-subtitle {
  font-size: var(--font-size-0);
  font-weight: 600;
  color: var(--gray-9);
}

.landing-body {
  font-size: var(--font-size-1);
  color: var(--gray-8);
  line-height: 2;
  margin-top: var(--size-4);
}

.landing-button-container {
  display: flex;
  justify-content: center;
}

.landing-btn {
  width: 100px;
  height: var(--size-5);
  font-size: var(--font-size-0);
  text-decoration: none !important;
  margin-top: var(--size-4);
  margin-bottom: var(--size-4);
}