/* Acceso y recuperación METROIL; conserva autenticación y validación. */
:is(tb-login, tb-reset-password-request, tb-reset-password),
:is(tb-login, tb-reset-password-request, tb-reset-password) :is(.tb-login-content, .tb-password-content) {
  background-color: #F6FAFF !important;
  color: #06194B;
}

:is(tb-login, tb-reset-password-request, tb-reset-password) mat-card {
  background-color: #FFFFFF !important;
  color: #06194B !important;
  border: 1px solid #EDEFF3;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgb(6 25 75 / 10%);
}

tb-login .tb-login-form .oauth-container .title,
:is(tb-reset-password-request, tb-reset-password) mat-card-title {
  color: #06194B !important;
  font-weight: 600;
}

:is(tb-reset-password-request, tb-reset-password) mat-card-subtitle {
  color: #18336C !important;
}

/* Los tokens de error quedan a cargo de ThingsBoard. */
:is(tb-login, tb-reset-password-request, tb-reset-password) .mat-mdc-form-field {
  --mat-form-field-outlined-input-text-color: #06194B;
  --mat-form-field-outlined-input-text-placeholder-color: #18336C;
  --mat-form-field-outlined-disabled-input-text-color: #18336C;
  --mat-form-field-outlined-disabled-label-text-color: #18336C;
  --mat-form-field-outlined-disabled-outline-color: #DDE5ED;
  --mat-form-field-outlined-caret-color: #06194B;
  --mat-form-field-outlined-label-text-color: #06194B;
  --mat-form-field-outlined-hover-label-text-color: #06194B;
  --mat-form-field-outlined-focus-label-text-color: #06194B;
  --mat-form-field-outlined-outline-color: #DDE5ED;
  --mat-form-field-outlined-hover-outline-color: #18336C;
  --mat-form-field-outlined-focus-outline-color: #00A9C7;
}

:is(tb-login, tb-reset-password-request, tb-reset-password) .mat-mdc-text-field-wrapper {
  background-color: #F3F7FB !important;
}

/* ThingsBoard superpone una capa lila a los campos autocompletados. */
:is(tb-login, tb-reset-password-request, tb-reset-password) .tb-autofilled .mat-mdc-form-field-flex::before {
  display: none !important;
}

:is(tb-login, tb-reset-password-request, tb-reset-password) input.mat-mdc-input-element {
  background-color: transparent !important;
  color: #06194B !important;
  caret-color: #06194B;
}

/* El autocompletado conserva el mismo fondo que el resto del campo. */
:is(tb-login, tb-reset-password-request, tb-reset-password) input:autofill,
:is(tb-login, tb-reset-password-request, tb-reset-password) input:-webkit-autofill {
  -webkit-text-fill-color: #06194B !important;
  -webkit-box-shadow: 0 0 0 1000px #F3F7FB inset !important;
  box-shadow: 0 0 0 1000px #F3F7FB inset !important;
}

:is(tb-login, tb-reset-password-request, tb-reset-password) .mat-mdc-form-field:not(.mat-form-field-invalid) .mdc-floating-label {
  color: #06194B !important;
}

:is(tb-login, tb-reset-password-request, tb-reset-password) .mat-mdc-form-field .mat-icon {
  color: #00A9C7 !important;
}

tb-login .tb-login-form .tb-action-button:not(:disabled),
:is(tb-reset-password-request, tb-reset-password) form button[type="submit"]:not(:disabled) {
  --mat-button-filled-label-text-color: #FFFFFF;
  background-color: #00A9C7 !important;
  color: #FFFFFF !important;
  font-weight: 600;
}

tb-login .tb-login-form .tb-action-button:not(:disabled) {
  text-transform: uppercase;
}

tb-login .tb-login-form .tb-action-button:not(:disabled):hover,
:is(tb-reset-password-request, tb-reset-password) form button[type="submit"]:not(:disabled):hover {
  filter: brightness(0.94);
}

tb-login .tb-login-form .tb-action-button:disabled,
:is(tb-reset-password-request, tb-reset-password) form button:disabled {
  --mat-button-filled-disabled-label-text-color: #18336C;
  background-color: #EDEFF3 !important;
  color: #18336C !important;
}

tb-login .tb-login-form .tb-reset-password,
:is(tb-reset-password-request, tb-reset-password) form button[type="button"]:not(:disabled) {
  --mat-button-text-label-text-color: #06194B;
  color: #06194B !important;
}

tb-login .tb-login-form .tb-reset-password:hover,
:is(tb-reset-password-request, tb-reset-password) form button[type="button"]:not(:disabled):hover {
  --mat-button-text-label-text-color: #00A9C7;
  color: #00A9C7 !important;
}

/* La etiqueta de recuperación puede ocupar varias líneas en pantallas pequeñas. */
:is(tb-reset-password-request, tb-reset-password) form button[type="submit"] {
  white-space: normal;
  height: auto;
  min-height: 44px;
  padding: 10px 16px;
}

:is(tb-reset-password-request, tb-reset-password) form button[type="button"]:not(:disabled) {
  background-color: transparent !important;
}

:is(tb-login, tb-reset-password-request, tb-reset-password) button:focus-visible {
  outline: 2px solid #06194B;
  outline-offset: 3px;
}