.telalogin{
    width:250px;
    padding:20px;
    background:var(--card);
    border-radius:18px;

    box-shadow: 0 0 15px 5px rgb(255, 255, 255);
    text-align:center;
    background-color: rgb(255, 255, 255);
}
.telatrocarsenha{
  width:360px;
  padding:24px;
  background:var(--card);
  border-radius:18px;
  box-shadow: 0 0 15px 5px rgb(255, 255, 255);
  text-align:center;
  background-color: rgb(255, 255, 255);
}
.card{
  width:360px;
  padding:24px;
  background:var(--card);
  border-radius:18px;
  box-shadow: 0 0 15px 5px rgb(255, 255, 255);
  background-color: rgb(255, 255, 255);
  text-align:center;
}
#btnRelatorio,#btnMenuPrincipal{
    background-color:blue;
    color:white;
    padding:10px 20px;
    margin:8px 0;
    border:none;
    border-radius:10px;
    cursor:pointer;
    width:80%;
    font-size:16px;
    opacity: 0.6;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}
label{
    display:block;
    text-align:left;
    margin-top:12px;
    font-weight:600;
    font-size:13px
}
.btnlogin{
    background-color:rgb(140, 140, 252);
    color:white;
    padding:10px 20px;
    margin:8px 0;
    border:none;
    border-radius:10px;
    cursor:pointer;
    width:80%;
    font-size:16px;
    opacity: 0.6;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

/* Quando o botão NÃO estiver desabilitado */
.btnlogin:not(:disabled) {
    background-color: blue;     /* azul normal */
    cursor: pointer;
    opacity: 1;
}

.txtCim, .txtSenha,.cmbLoja{
    width:80%;
    padding:5px;
    margin:5px 0;
    display:inline-block;
    border:1px solid #ccc;
    border-radius:10px;
    box-sizing:border-box;
    text-align: center;
}
.TrocarSenha{
    width:80%;
    padding:5px;
    margin:8px 8px;
    display:inline-block;
    border:1px solid #ccc;
    border-radius:10px;
    box-sizing:border-box;
    text-align: center;
}


.ph1{
    margin:0;
    font-size:25px;
    font-weight:600;
    font-style: bold;
    font-family:Arial, Helvetica, sans-serif;
    margin-bottom:8px;
    color: blue;
}

.ph3{
    margin:0;
    font-size:16px;
    font-weight:600;
    margin-bottom:8px;
    color: blue;
}
body{
  margin:0;
  font-family:system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;  
  background-image: url(/imagens/backlogin.jpg);
}

.logo {
  width: 120px;
  height: auto;
  margin-bottom: 0px;
}
input{
  width:100%;
  padding:10px 12px;
  margin-top:6px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  font-size:15px;
}

/* ============================================= */
/* ESTILIZAÇÃO DO RECAPTCHA */
/* ============================================= */

/* Container do reCAPTCHA */
#recaptcha {
    margin: 12px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Redimensionar o reCAPTCHA para caber no card de login */
#recaptcha > div {
    transform: scale(0.85);
    transform-origin: center center;
}

/* Ajuste para telas muito pequenas (mobile) */
@media (max-width: 350px) {
    #recaptcha > div {
        transform: scale(0.75);
    }
}

/* Ajuste para telas médias */
@media (min-width: 351px) and (max-width: 500px) {
    #recaptcha > div {
        transform: scale(0.80);
    }
}