/* css/login-fundo-logo.css
   Ajusta somente o fundo, o posicionamento da logo e os espaçamentos principais.
   O restante do formulário continua sendo controlado por css/style.css.
*/

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  margin: 0 !important;
  background: #ffffff !important;
}

/* Remove a faixa decorativa superior do layout antigo. */
.top-line {
  display: none !important;
}

/* Mesmo fundo branco e espaçamento compacto dos menus mobile corrigidos. */
.page {
  width: 100% !important;
  min-height: 100vh !important;
  padding: 8px 14px 24px !important;
  background: #ffffff !important;
}

/* Logo alinhada à esquerda, limitada à mesma largura visual dos menus. */
.brand {
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto 8px !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  text-align: left !important;
}

/* Logo menor, proporcional e sem margens adicionais. */
.logo-drtele {
  width: 145px !important;
  max-width: 62vw !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  display: block !important;
  object-fit: contain !important;
}

/* Mantém o formulário próximo da logo e centralizado na mesma largura. */
.panel {
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

/* Evita espaço superior herdado do layout anterior. */
.panel__right {
  margin-top: 0 !important;
}

/* Celulares mais estreitos. */
@media (max-width: 390px) {
  .page {
    padding: 7px 10px 20px !important;
  }

  .brand {
    margin-bottom: 7px !important;
  }

  .logo-drtele {
    width: 132px !important;
  }
}

/* Desktop: mantém o logo proporcional, sem centralizá-lo. */
@media (min-width: 641px) {
  .page {
    padding-top: 12px !important;
  }

  .logo-drtele {
    width: 150px !important;
  }
}