.form-group {
      margin-bottom: 16px;
    }
    label {
      display: block;
      color: var(--muted);
      font-size: 0.875rem;
      margin-bottom: 6px;
    }
    input[type="text"], input[type="password"] {
      width: 100%;
      padding: 10px;
	  margin-bottom:10px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background-color: var(--input);
      color: var(--text);
      transition: border-color 0.2s;
    }
    input[type="text"]:focus, input[type="password"]:focus {
      border-color: var(--accent);
      outline: none;
    }
    button {
      width: 35%;
      padding: 10px;
      background-color: var(--accent);
      color: var(--bg);
      font-weight: 600;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.2s, opacity 0.2s;
	  display: block; /* Obliga al botón a comportarse como un bloque */
  margin: 0 auto; /* Centra el bloque horizontalmente */
    }
    button:hover {
      background-color: #16a34a; /* Un tono más oscuro */
    }
    button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
    .message {
      margin-top: 20px;
      padding: 12px;
      border-radius: 6px;
      text-align: center;
      font-size: 0.875rem;
    }
	
    .message.error {
      background-color: #450a0a; /* Fondo rojo oscuro */
      color: var(--danger);
      border: 1px solid var(--danger);
    }
    .message.success {
      background-color: #064e3b; /* Fondo verde oscuro */
      color: var(--accent);
      border: 1px solid var(--accent);
    }
	#msg {
      margin-top: 20px;
      padding: 12px;
      border-radius: 6px;
      text-align: center;
      font-size: 0.875rem;
    }
	#msg.error {
      background-color: #450a0a; /* Fondo rojo oscuro */
      color: var(--danger);
      border: 1px solid var(--danger);
    }
    #msg.success {
      background-color: #064e3b; /* Fondo verde oscuro */
      color: var(--accent);
      border: 1px solid var(--accent);
    }