/* Tema padrão: escuro */
body {
    background-color: #1f2937;
    color: white;
  }
  
  .login-container {
    background-color: #111827;
    color: white;
  }
  
  input, button {
    background-color: #374151;
    color: white;
    border: 1px solid #4b5563;
  }
  
  /* Tema claro */
  body.light {
    background-color: #f3f4f6;
    color: #333;
  }
  
  body.light .login-container {
    background-color: white;
    color: #111;
  }
  
  body.light label {
    color: #4b5563;
  }

  body.light input {
    background-color: #e5e7eb;
    color: black;
    border: 1px solid #d1d5db;
  }
  
  body.light button {
    background-color: #3b82f6;
    color: white;
    border: none;
  }

  body.light footer {
    color: #4b5563;
  }

 
body.light #moonIcon {
  stroke: #4b5563; 
  fill: #4b5563;   /* Cor escura para o preenchimento da lua */
}

  /* Toggle Switch */
  .theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
  }
  
  .switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
  }
  
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4b5563;
    transition: .4s;
    border-radius: 34px;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
  }
  
  input:checked + .slider {
    background-color: #3b82f6;
  }
  
  input:checked + .slider:before {
    transform: translateX(20px);
  }