body {
      font-family: Arial, sans-serif;
      background-color: #f0f2f5;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

 .login-container {
  align-items: center;
  position: absolute;
  animation: zoomIn 2s ease-in-out;
  height: auto;
  width: 80%;
  max-width: 600px;
  text-align: center;
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
    filter: blur(20px); 
  }
  50% {
    opacity: 0.5;
    transform: scale(1.05);
    filter: blur(10px); 
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0); 
  }
}


    input {
      display: block;
      width: 100%;
      margin: 15px 0;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }

    #loadings {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 10px;
      width: 100%;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }

    #loadings:hover {
      background-color: #45a049;
    }

    #error-message {
              margin-top: 10px;
    }
    .logo {
  width: 200px;       /* ou 80px, 120px — ajuste como quiser */
  height: auto;
  margin-bottom: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.flip {
  transform-style: preserve-3d;
   height: 100%;
  width: 100%;
  transition: 1s;
}
.frente, .tras {
  height: 100%;
  width: 100%;
  
   position: relative;
      backface-visibility: hidden;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    
}
.frente {
  left: 50%;
  transform: translateX(-50%);
background-color: white;
overflow: hidden;
}

@media (max-width: 769px) {
.frente::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100px;
  height: 100px;
  background: #4CAF50;
  border-radius: 10%;
  animation: orbit 6s alternate infinite;
  filter: blur(20px);
}

.frente::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100px;
  height: 100px;
  background: #4CAF50; /* cor diferente só p/ ver */
  border-radius: 10%;
  animation: orbitReverse 6s alternate infinite;
  filter: blur(20px);
}

}
@media (min-width: 769px) {
 .frente::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100px;
  height: 100px;
  background: #4CAF50;
  border-radius: 10%;
  animation: orbits 6s alternate infinite;
  filter: blur(20px);
} 
.frente::after {
  filter: blur(20px);
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100px;
  height: 100px;
  background: #4CAF50;
  border-radius: 10%;
    animation: orbitReverses 6s alternate infinite;

} 
}
@keyframes orbits {
  0%   { top: -90px; left: -20%; }
  25%  { top: -90px; left: 113%; transform: translateX(-100%); }
  50%  { top: 120%; left: 113%; transform: translate(-100%, -100%); }
  75%  { top: 120%; left: -13%; transform: translateY(-100%); }
  100% { top: -90px; left: -13%; }
  
}
/* animação da bolinha */
@keyframes orbit {
  0%   { top: -95px; left: -50%; }
  25%  { top: -95px; left: 125%; transform: translateX(-100%); }
  50%  { top: 122%; left: 125%; transform: translate(-100%, -100%); }
  75%  { top: 122%; left: -25%; transform: translateY(-100%); }
  100% { top: -40px; left: -25%; }
}
@keyframes orbitReverse {
  0%   { top: 122%; left: 120%; transform: translate(-100%, -100%); } /* começa oposto ao 0% do orbit */
  25%  { top: 122%; left: -25%; transform: translateY(-100%); }       /* oposto ao 25% */
  50%  { top: -25px; left: -25%; }                                    /* oposto ao 50% */
    75%  { top: -60px; left: 98%; }      /* oposto ao 75% */
   100% { top: 115%; left: 98%; } /* fecha ciclo */
}
@keyframes orbitReverses {
  0%   { top: 122%; left: 120%; transform: translate(-100%, -100%); } /* começa oposto ao 0% do orbit */
  25%  { top: 122%; left: -13%; transform: translateY(-100%); }       /* oposto ao 25% */
  50%  { top: -40px; left: -13%; }                                    /* oposto ao 50% */
    75%  { top: -55px; left: 98%; }      /* oposto ao 75% */
   100% { top: 115%; left: 98%; } /* fecha ciclo */
}


.tras {
  
  margin-top: 10%;
   height: auto;
  position: absolute;
top: 50%;
  left: 50%;
  align-items: center;
  background-color: #45a049;
  transform: rotateY(180deg) translatey(-50%) translateX(50%);
}

.login-container.ativo .flip {
  transform: rotateY(180deg);
}

 input {
        width: 92%; 
    margin: 15px auto; 
     
      display: block;
     
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }

    #loading {
      background-color: #ffffff;
      color: #45a049;
      border: none;
      padding: 10px;
      width: 50%;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }

    #loading:hover {
      background-color: #45a049;
      color: #ffffff;
            border: #ffffff solid 1px;

    }

    #error-message {
      margin-top: 10px;
    }
    .logo {
  width: 200px;       /* ou 80px, 120px — ajuste como quiser */
  height: auto;
  margin-bottom: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.modal {
  display: none; /* Começa oculto */
  position: fixed;
  z-index: 999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  animation: modal 1s ;
}
@keyframes modal {
 from {
    filter: blur(20px);
    top: 100%;
  }
}
.modal::after.ativo {
  animation: modal 1s reverse ;
}

/* Caixa do conteúdo */
.modal-content {
  background: white;
  padding: 0;
  border-radius: 8px;
  max-width: 90%;
  max-height: 80%;
  overflow: auto;
  display: flex;
  justify-content: center; /* centraliza horizontalmente */
  align-items: center;     /* centraliza verticalmente */
}

.modal-content video {
  height: auto;
  display: block;
  width: 100%;
  object-fit: contain;
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  color: white;
  font-size: 28px;
  cursor: pointer;
}

 #loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  color: white;
  font-family: Arial, sans-serif;
}

.spinner {
  display: flex;
  gap: 5px;
}

.spinner span {
  width: 12px;
  height: 12px;
  background: #45a049;
  border-radius: 50%;
  animation: bounce 0.5s infinite alternate;
}

.spinner span:nth-child(2) { animation-delay: 0.2s; }
.spinner span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  to { transform: translateY(-8px); }
}



/* Container */
.checkbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Label estilizada */
.checkbox-label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  font-size: 15px;
  color: #ffffff;
  user-select: none;
  display: flex;
  align-items: flex-end; /* deixa o texto mais embaixo */
  line-height: 25px;     /* controla a altura da linha */
}

/* Esconde o checkbox padrão */
.checkbox-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Checkmark customizado */
.checkmark {
  position: absolute;
  left: 0;
  top: 2px;
  height: 18px;
  width: 18px;
  background-color: #f0f0f0;
  border-radius: 4px;
  border: 2px solid #ccc;
  transition: all 0.2s ease;
}

/* Quando marcado */
.checkbox-label input:checked ~ .checkmark {
  background-color: #4CAF50;
  border-color: #4CAF50;
}

/* Desenho do "✔" */
.checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Mostra o ✔ quando marcado */
.checkbox-label input:checked ~ .checkmark::after {
  display: block;
}

/* === MODAL SUCESSO === */
.modal-sucesso {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.65);
  justify-content: center;
  align-items: center;
  animation: sucessoFadeIn 0.3s ease;
}

.modal-sucesso-content {
  background: #ffffff;
  border-radius: 18px;
  padding: 35px 45px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  animation: sucessoSlide 0.35s ease;
  max-width: 420px;
  width: 90%;
}

.modal-sucesso-content h2 {
  color: #2e7d32;
  margin-top: 12px;
  font-size: 22px;
}

.modal-sucesso-content p {
  color: #555;
  font-size: 15px;
  margin-top: 6px;
}

.modal-sucesso-content button {
  margin-top: 20px;
  padding: 10px 25px;
  border: none;
  border-radius: 10px;
  background-color: #2e7d32;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.25s;
}

.modal-sucesso-content button:hover {
  background-color: #1b5e20;
}

.modal-sucesso-icone {
  color: #2e7d32;
  font-size: 50px;
  border: 3px solid #2e7d32;
  border-radius: 50%;
  display: inline-block;
  width: 75px;
  height: 75px;
  line-height: 68px;
  text-align: center;
  margin-bottom: 10px;
  animation: sucessoPop 0.8s ease;
}

@keyframes sucessoPop {
  0% { transform: scale(0.2); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes sucessoSlide {
  from { transform: translateY(-40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes sucessoFadeIn {
  from { opacity: 0; } to { opacity: 1; }
}