/* GA_LOGIN_MOBILE_FINAL_V7 */
@media screen and (max-width:767px) {

  html:has(.legacy-login-exact),
  body:has(.legacy-login-exact) {
    margin: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .legacy-login-exact {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #e9e1dc !important;
  }

  /* A foto ocupa apenas a parte superior.
     Isto evita ampliar demais a imagem horizontal. */
  .legacy-login-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: 61dvh !important;
    background-image:
      url('/static/img/portal/login-familia.jpg') !important;
    background-size: cover !important;
    background-position: 50% 40% !important;
    background-repeat: no-repeat !important;
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .legacy-login-background::before,
  .legacy-login-background::after {
    display: none !important;
    content: none !important;
  }

  /* Painel compacto, abaixo dos rostos. */
  .legacy-login-glass {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 52dvh !important;
    margin: 0 !important;
    padding: 12px 20px
      calc(13px + env(safe-area-inset-bottom,0px))
      !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: rgba(255,255,255,.75) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .legacy-login-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .legacy-login-content > h1 {
    display: none !important;
  }

  .legacy-login-logo {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: clamp(55px, 9dvh, 76px) !important;
    max-width: 55% !important;
    object-fit: contain !important;
    margin: 0 auto 9px !important;
    padding: 0 !important;
    transform: none !important;
  }

  .legacy-login-form-exact {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(7px,1.3dvh,11px) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .legacy-line-field {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .legacy-line-field > span {
    display: none !important;
  }

  .legacy-line-field input,
  .legacy-password-line input {
    width: 100% !important;
    height: clamp(39px,5.8dvh,47px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 42px 0 43px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(65,65,65,.30) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.24) !important;
    color: #3b3b3b !important;
    font-size: 16px !important;
    box-shadow: none !important;
    line-height: normal !important;
  }

  .legacy-password-line {
    position: relative !important;
    width: 100% !important;
  }

  .legacy-eye-btn {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: 0 !important;
    color: #666 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    padding: 0 !important;
  }

  .legacy-forgot-link {
    display: block !important;
    align-self: center !important;
    margin: 1px 0 !important;
    padding: 0 !important;
    color: #3439ad !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  .legacy-login-button {
    display: block !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    height: clamp(43px,6.2dvh,52px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: #34349b !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: normal !important;
    font-weight: 700 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .legacy-version-chip {
    position: static !important;
    inset: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    width: fit-content !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 9px auto 0 !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.9) !important;
    color: #666 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    transform: none !important;
  }
}

/* Celulares com pouca altura. */
@media screen and (max-width:767px)
       and (max-height:670px) {

  .legacy-login-glass {
    padding-top: 7px !important;
    padding-bottom:
      calc(7px + env(safe-area-inset-bottom,0px))
      !important;
    max-height: 65dvh !important;
  }

  .legacy-login-logo {
    height: 49px !important;
    margin-bottom: 5px !important;
  }

  .legacy-login-form-exact {
    gap: 6px !important;
  }

  .legacy-version-chip {
    margin-top: 5px !important;
  }
}


/* GA_LOGIN_AJUSTE_ENQUADRAMENTO_V8 */
@media screen and (max-width:767px) {

  /* A foto continua por tras de todo o painel:
     elimina a divisao branca na transicao. */
  .legacy-login-background {
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    background-image:
      url('/static/img/portal/login-familia.jpg') !important;
    background-size: auto 70dvh !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: #c5afa2 !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Painel ligeiramente mais alto,
     mantendo a base na parte inferior. */
  .legacy-login-glass {
    bottom: 0 !important;
    top: auto !important;
    padding-top: 18px !important;
    padding-bottom:
      calc(25px + env(safe-area-inset-bottom,0px))
      !important;
    background: rgba(255,255,255,.61) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 24px 24px 0 0 !important;
    overflow: visible !important;
    max-height: none !important;
  }

  .legacy-login-content {
    overflow: visible !important;
  }

  .legacy-login-button {
    flex-shrink: 0 !important;
  }

  .legacy-version-chip {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media screen and (max-width:767px)
       and (max-height:670px) {
  .legacy-login-glass {
    padding-top: 10px !important;
    padding-bottom:
      calc(12px + env(safe-area-inset-bottom,0px))
      !important;
  }
}


/* GA_LOGIN_CORRECAO_VISUAL_V9 */
@media screen and (max-width:767px) {

  /* Evita a faixa horizontal causada pelo
     termino da fotografia atras do formulario. */
  .legacy-login-background {
    height: 100dvh !important;
    background-size: auto 100dvh !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }

  /* O painel passa a cobrir a transicao
     sem deixar linha atravessando os campos. */
  .legacy-login-glass {
    background: rgba(255,255,255,.70) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Icone de usuario */
  .legacy-line-field:has(input[name="cpf"])::before {
    content: "" !important;
    position: absolute !important;
    left: 13px !important;
    top: 50% !important;
    width: 21px !important;
    height: 21px !important;
    transform: translateY(-50%) !important;
    background: #666 !important;
    -webkit-mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M3 22v-3c0-4 4-6 9-6s9 2 9 6v3z'/%3E%3C/svg%3E")
      center/contain no-repeat !important;
    mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M3 22v-3c0-4 4-6 9-6s9 2 9 6v3z'/%3E%3C/svg%3E")
      center/contain no-repeat !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  /* Icone de cadeado sem emoji colorido */
  .legacy-line-field:has(input[name="password"])::before {
    content: "" !important;
    position: absolute !important;
    left: 13px !important;
    top: 50% !important;
    width: 21px !important;
    height: 21px !important;
    transform: translateY(-50%) !important;
    background: #666 !important;
    -webkit-mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h2v12H5V10zm3 0h4V7a2 2 0 0 0-4 0z'/%3E%3C/svg%3E")
      center/contain no-repeat !important;
    mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h2v12H5V10zm3 0h4V7a2 2 0 0 0-4 0z'/%3E%3C/svg%3E")
      center/contain no-repeat !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  .legacy-line-field input,
  .legacy-password-line input {
    padding-left: 45px !important;
  }
}


/* GA_LOGIN_FOTO_ENQUADRAMENTO_V10
   Mantem o formulario e altera apenas o fundo.
*/
@media screen and (max-width:767px) {

  .legacy-login-exact {
    background: #e8dfd8 !important;
  }

  .legacy-login-background {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;

    background-image:
      url('/static/img/portal/login-familia.jpg') !important;

    /* Reduz a ampliacao excessiva da V9 */
    background-size: auto 78dvh !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: #e8dfd8 !important;

    /* Transicao suave sem faixa horizontal */
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 60%,
      transparent 79%
    ) !important;

    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 60%,
      transparent 79%
    ) !important;

    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .legacy-login-glass {
    /* Mesma posicao do formulario V9 */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


/* GA_LOGIN_FOTO_OTIMIZADA_V11 */
@media screen and (max-width:767px) {
  .legacy-login-background {
    background-image:
      url("/static/img/portal/login-familia-otimizada-v11.webp")
      !important;
    background-size: auto 78dvh !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    filter: none !important;
    transform: none !important;
  }
}


/* GA_LOGIN_LOGO_SLOGAN_V12 */
@media screen and (max-width:767px) {

  .ga-login-brand-v12 {
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    margin:0 auto 7px !important;
    overflow:visible !important;
  }

  .ga-login-brand-v12 .legacy-login-logo {
    display:block !important;
    width:205px !important;
    max-width:75% !important;
    height:auto !important;
    max-height:105px !important;
    object-fit:contain !important;
    object-position:center !important;
    margin:0 auto !important;
    padding:0 !important;
    clip-path:none !important;
    overflow:visible !important;
  }

  .ga-login-slogan-v12 {
    color:#293a95 !important;
    text-align:center !important;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    letter-spacing:.15px !important;
    margin:0 !important;
    padding:0 !important;
    white-space:nowrap !important;
  }
}